/* CMS additions — loaded after the approved site.css. Keeps the approved stylesheet untouched. */

/* ---- one-H1 mechanism: hero/banner title can be a styled <span> with identical looks ---- */
span.hero-title{display:block;font-family:var(--serif);font-size:clamp(2.8rem,6.5vw,5.8rem);font-weight:400;line-height:1.02;letter-spacing:-.01em;max-width:14ch;opacity:0;animation:fadeUp 1s .5s forwards}
span.hero-title em{font-style:italic;color:#f3c969;font-weight:300}
.page-hero-content span.ph-title{display:block;font-family:var(--serif);font-size:clamp(2.4rem,5vw,4.4rem);font-weight:400;line-height:1.04;letter-spacing:-.01em;max-width:18ch}
@media (max-width:640px){span.hero-title{font-size:3rem}}

/* ---- owner-facing section options (Advanced box in the section editor) ---- */
.sec-pad-sm{padding-top:2.5rem!important;padding-bottom:2.5rem!important}
.sec-pad-lg{padding-top:8rem!important;padding-bottom:8rem!important}
.sec-pad-top0{padding-top:0!important}
.sec-pad-bottom0{padding-bottom:0!important}
.sec-pad-none{padding-top:0!important;padding-bottom:0!important}
.sec-bg-paper{background:var(--paper)!important}
.sec-bg-warm{background:var(--paper-warm)!important}
.sec-bg-white{background:#fff!important}
.sec-bg-dark{background:var(--ink)!important;color:var(--paper)}
.sec-bg-dark h2,.sec-bg-dark h3,.sec-bg-dark p{color:var(--paper)}
@media (max-width:760px){.sec-hide-m{display:none!important}
  .sec-pad-lg{padding-top:5rem!important;padding-bottom:5rem!important}}

/* ---- rich-text editor output inside articles ---- */
.article img.img-left{float:left;width:46%;aspect-ratio:auto;margin:.4rem 1.6rem 1rem 0}
.article img.img-right{float:right;width:46%;aspect-ratio:auto;margin:.4rem 0 1rem 1.6rem}
.article img.img-center{width:70%;aspect-ratio:auto;margin-left:auto;margin-right:auto;display:block}
.article h2,.article h3,.article h4,.article table,.article blockquote,.article hr{clear:both}
.article blockquote{margin:1.8rem 0;padding:1rem 1.4rem;border-left:3px solid var(--saffron);background:var(--paper-warm);font-family:var(--serif);font-size:1.25rem;font-style:italic;color:var(--ink)}
.article blockquote p:last-child{margin-bottom:0}
.article table{width:100%;border-collapse:collapse;margin:1.6rem 0 2rem;font-size:.95rem;line-height:1.5;display:block;overflow-x:auto}
.article table th,.article table td{border:1px solid var(--line);padding:.6rem .8rem;text-align:left;vertical-align:top}
.article table th{background:var(--paper-warm);color:var(--ink);font-weight:600}
.article hr{border:0;border-top:1px solid var(--line);margin:2.4rem 0}
.article iframe{width:100%;aspect-ratio:16/9;height:auto;border:0;border-radius:4px;margin:1.4rem 0}
.article u{text-underline-offset:3px}
.article::after{content:"";display:table;clear:both}
.intro-text ul,.intro-text ol{margin:0 0 1.2rem 1.2rem}
@media (max-width:640px){.article img.img-left,.article img.img-right,.article img.img-center{float:none;width:100%;margin:1.4rem 0}}

/* ---- H1–H6 selector: a heading whose tag was changed keeps its designed look.
   site.css targets `.hx-h2` etc. alongside the real tag; these zero-specificity rules only
   stand in for the browser's default size/weight of the designed tag. ---- */
:where(.hx-h1){font-size:2em;font-weight:700}
:where(.hx-h2){font-size:1.5em;font-weight:700}
:where(.hx-h3){font-size:1.17em;font-weight:700}
:where(.hx-h4){font-size:1em;font-weight:700}
:where(.hx-h5){font-size:.83em;font-weight:700}
:where(.hx-h6){font-size:.67em;font-weight:700}
:where(div.hx){display:block}

/* ---- FAQ accordion (sections/faq.php) ---- */
.faq-wrap{padding:6rem 2rem}
.faq-inner{max-width:920px;margin:0 auto}
.faq-list{margin-top:2.6rem;border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:1.35rem 0}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:focus-visible{outline:2px solid var(--saffron);outline-offset:4px}
.faq-q{font-family:var(--serif);font-size:1.35rem;font-weight:600;line-height:1.3;color:var(--ink);margin:0;transition:color .2s}
.faq-item summary:hover .faq-q,.faq-item[open] .faq-q{color:var(--saffron)}
.faq-ic{position:relative;flex:0 0 26px;height:26px;border:1px solid var(--line);border-radius:50%;transition:transform .25s,border-color .2s}
.faq-ic::before,.faq-ic::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1.5px;background:var(--saffron);transform:translate(-50%,-50%)}
.faq-ic::after{transform:translate(-50%,-50%) rotate(90deg);transition:opacity .2s}
.faq-item[open] .faq-ic{transform:rotate(180deg);border-color:var(--saffron)}
.faq-item[open] .faq-ic::after{opacity:0}
.faq-a{padding:0 3.2rem 1.6rem 0;color:var(--ink-soft);line-height:1.8;font-size:1.02rem}
.faq-a p{margin:0 0 .9rem}.faq-a p:last-child{margin-bottom:0}
.faq-a ul,.faq-a ol{margin:0 0 .9rem 1.2rem}
.faq-a a{color:var(--saffron);border-bottom:1px solid rgba(194,65,12,.3)}
@media (max-width:640px){.faq-wrap{padding:4rem 1.3rem}.faq-q{font-size:1.15rem}.faq-a{padding-right:0}}

/* ---- Video reviews, reel style (sections/video_reviews.php) ---- */
.vr-wrap{padding:7rem 2rem;background:var(--ink);color:var(--paper);overflow:hidden}
.vr-inner{max-width:1380px;margin:0 auto}
.vr-wrap .sec-head :where(h2,h3,h4,div){color:var(--paper)}
.vr-wrap .sec-head em{color:#f3c969}
.vr-wrap .sec-head p{color:rgba(250,246,240,.72)}
.vr-wrap .sec-eyebrow{color:#f3c969}
.vr-rail{position:relative}
.vr-track{display:flex;gap:1.4rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:.4rem .2rem 1rem;justify-content:safe center;outline:none}
.vr-track::-webkit-scrollbar{display:none}
.vr-card{position:relative;flex:0 0 clamp(220px,19vw,270px);aspect-ratio:9/16;margin:0;border-radius:18px;overflow:hidden;background:#000;scroll-snap-align:center;box-shadow:0 20px 50px rgba(0,0,0,.45);isolation:isolate}
.vr-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;cursor:pointer;display:block}
.vr-card::after{content:"";position:absolute;inset:auto 0 0;height:55%;background:linear-gradient(to top,rgba(10,7,5,.88),rgba(10,7,5,0));pointer-events:none;z-index:1}
.vr-cap{position:absolute;left:0;right:0;bottom:0;padding:1.1rem 1.1rem 1.25rem;z-index:2;display:flex;flex-direction:column;gap:.15rem;pointer-events:none}
.vr-cap q{font-family:var(--serif);font-style:italic;font-size:1.08rem;line-height:1.35;color:#fff;margin-bottom:.4rem;quotes:"“" "”"}
.vr-cap strong{font-family:var(--sans);font-weight:600;font-size:.95rem;color:#fff}
.vr-cap span{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:#f3c969}
.vr-sound{position:absolute;top:.8rem;right:.8rem;z-index:3;width:40px;height:40px;border-radius:50%;border:0;background:rgba(10,7,5,.55);color:#fff;font-size:1.05rem;cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:background .2s,transform .2s}
.vr-sound:hover{background:var(--saffron);transform:scale(1.06)}
.vr-sound .vr-ico-on{display:none}.vr-sound.on .vr-ico-on{display:inline}.vr-sound.on .vr-ico-off{display:none}
.vr-sound.on{background:var(--saffron)}
.vr-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;width:62px;height:62px;border-radius:50%;background:rgba(250,246,240,.9);color:var(--saffron);display:flex;align-items:center;justify-content:center;font-size:1.3rem;padding-left:4px;pointer-events:none;transition:opacity .3s,transform .3s}
.vr-card.playing .vr-play{opacity:0;transform:translate(-50%,-50%) scale(.8)}
.vr-progress{position:absolute;top:0;left:0;right:0;height:3px;background:rgba(255,255,255,.18);z-index:3}
.vr-progress i{display:block;height:100%;width:0;background:#f3c969;transition:width .25s linear}
.vr-letter{flex-basis:clamp(300px,32vw,460px);aspect-ratio:auto;background:var(--paper);color:var(--ink);display:flex;flex-direction:column}
.vr-letter::after{display:none}
.vr-letter-img{position:relative;display:block;padding:0;border:0;background:#efe6d6;cursor:zoom-in;flex:0 0 auto}
.vr-letter-img img{display:block;width:100%;aspect-ratio:1600/827;object-fit:cover;transform:rotate(-1.2deg) scale(1.03);transition:transform .4s}
.vr-letter-img:hover img{transform:rotate(0) scale(1.05)}
.vr-zoom{position:absolute;right:.7rem;bottom:.7rem;background:rgba(26,20,16,.82);color:#fff;font-size:.75rem;letter-spacing:.05em;padding:.35rem .65rem;border-radius:20px}
.vr-letter figcaption{padding:1.4rem 1.5rem 1.6rem;display:flex;flex-direction:column;gap:.2rem;flex:1;justify-content:center}
.vr-letter blockquote{margin:0 0 .8rem;font-family:var(--serif);font-style:italic;font-size:1.2rem;line-height:1.45;color:var(--ink);border-left:3px solid var(--saffron);padding-left:1rem}
.vr-letter strong{font-weight:600}
.vr-letter figcaption span{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--saffron)}
.vr-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:46px;height:46px;border-radius:50%;border:1px solid rgba(250,246,240,.3);background:rgba(26,20,16,.75);color:#fff;font-size:1.6rem;line-height:1;cursor:pointer;transition:opacity .2s,background .2s}
.vr-nav:hover{background:var(--saffron)}
.vr-prev{left:-.4rem}.vr-next{right:-.4rem}
.vr-rail.at-start .vr-prev,.vr-rail.at-end .vr-next,.vr-rail.no-scroll .vr-nav{opacity:0;pointer-events:none}
.vr-cta{text-align:center;margin-top:2.6rem}
.vr-lightbox{border:0;padding:0;background:transparent;max-width:min(96vw,1400px);max-height:94vh}
.vr-lightbox::backdrop{background:rgba(10,7,5,.85)}
.vr-lightbox img{display:block;max-width:100%;max-height:92vh;border-radius:6px}
.vr-lb-x{position:fixed;top:1rem;right:1.2rem;width:44px;height:44px;border-radius:50%;border:0;background:#fff;font-size:1.6rem;cursor:pointer}
@media (max-width:760px){.vr-wrap{padding:4.5rem 0}.vr-wrap .sec-head{padding:0 1.5rem}
  .vr-track{justify-content:flex-start;padding:.4rem 1.5rem 1rem;scroll-padding:0 1.5rem}.vr-card{flex-basis:72vw}.vr-letter{flex-basis:86vw}.vr-nav{display:none}}
@media (prefers-reduced-motion:reduce){.vr-letter-img img{transform:none}}

/* ---- Instagram feed (sections/instagram_feed.php) ---- */
.ig-wrap{padding:7rem 2rem;background:var(--paper)}
.ig-inner{max-width:1380px;margin:0 auto}
.ig-compact{padding:4.5rem 2rem}.ig-compact .sec-head{margin-bottom:1.6rem}.ig-compact .ig-cta{margin-top:0}
.ig-handle{font-family:var(--sans);letter-spacing:.06em;color:var(--saffron)!important}
.ig-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem}
.ig-grid.ig-n6{grid-template-columns:repeat(6,1fr)}
.ig-grid.ig-n12{grid-template-columns:repeat(6,1fr)}
.ig-tile{position:relative;display:block;aspect-ratio:1;overflow:hidden;background:var(--paper-warm)}
.ig-tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.ig-tile:hover img{transform:scale(1.06)}
.ig-over{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;padding:1rem;text-align:center;background:rgba(26,20,16,.62);color:#fff;opacity:0;transition:opacity .3s}
.ig-over em{font-style:normal;font-size:.82rem;line-height:1.45}
.ig-tile:hover .ig-over,.ig-tile:focus-visible .ig-over{opacity:1}
.ig-badge{position:absolute;top:.5rem;right:.6rem;color:#fff;font-size:.85rem;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.ig-cta{text-align:center;margin-top:2.4rem}
.ig-btn{display:inline-flex;align-items:center;gap:.55rem;padding:.95rem 1.8rem;border:1px solid var(--ink);color:var(--ink);font-family:var(--sans);font-weight:500;letter-spacing:.04em;text-decoration:none;transition:background .25s,color .25s}
.ig-btn:hover{background:var(--ink);color:var(--paper)}
@media (max-width:900px){.ig-grid,.ig-grid.ig-n6,.ig-grid.ig-n12{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.ig-wrap{padding:4.5rem 1.2rem}.ig-grid,.ig-grid.ig-n6,.ig-grid.ig-n12{grid-template-columns:repeat(2,1fr);gap:.4rem}.ig-over{display:none}}
.post-meta{text-align:center;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;color:var(--saffron);margin:0 0 2.4rem}