/* ==========================================================================
   MJ's Studio — "Midnight Dimensional"
   Warm espresso + antique gold · Fraunces serif + Hanken Grotesk · 3D crystal
   Single dark-luxe theme. No build step.
   ========================================================================== */

:root{
  --bg:#15110c;            /* espresso */
  --bg-2:#1c1812;
  --surface:#211b13;       /* cards */
  --surface-2:#2a2218;
  --bone:#f1ece0;
  --bone-2:#d9d3c5;
  --muted:#9c9383;
  --gold:#c9a86a;
  --gold-2:#e6cf95;        /* bright highlight */
  --gold-deep:#a8863f;
  --line:rgba(241,236,224,.12);
  --line-2:rgba(241,236,224,.22);
  --gold-line:rgba(201,168,106,.32);

  --font-serif:'Fraunces', Georgia, 'Times New Roman', serif;
  --font-sans:'Hanken Grotesk', system-ui, sans-serif;

  --radius:16px;
  --radius-sm:10px;
  --radius-pill:999px;
  --nav-h:76px;

  /* Uppercase letter-tracking — one scale for every caps label */
  --track-caps-wide:.24em;   /* editorial eyebrows */
  --track-caps:.14em;        /* standard UI labels */
  --track-caps-tight:.1em;   /* dense / numeric labels */
  --shadow:0 30px 70px rgba(0,0,0,.5);
  --ease:cubic-bezier(.16,1,.3,1);

  /* Type scale — body / UI (pixel-aligned, ~1.125 step) */
  --step--1:.9375rem;   /* 15px — meta / small body */
  --step-0:1rem;        /* 16px — body */
  --step-1:1.125rem;    /* 18px — lead paragraph */

  /* Type scale — display (serif headings, fed by clamp at the top end) */
  --display-1:1.2rem;
  --display-2:1.3rem;
  --display-3:1.5rem;
  --display-4:1.7rem;
  --display-5:1.85rem;
  --display-title:clamp(2.2rem,4.6vw,3.5rem);
  --display-hero:clamp(2.9rem,7.2vw,5.9rem);

  /* Spacing rhythm — 4/8 grid */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:40px;
  --space-8:48px;
  --space-lg:64px;
  --space-section:120px;
}

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important}

html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 20px);overflow-x:clip;-webkit-tap-highlight-color:rgba(201,168,106,.18);overscroll-behavior-y:none}
body{
  font-family:var(--font-sans);
  background:var(--bg);
  color:var(--bone);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}

.container{width:min(1200px,100% - 64px);margin-inline:auto}
.container.narrow{width:min(860px,100% - 64px)}

::selection{background:var(--gold);color:#241a09}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:3px}

.skip-link{position:absolute;left:-9999px;top:0;z-index:500;background:var(--gold);color:#241a09;font-weight:600;padding:12px 22px;border-radius:0 0 10px 0}
.skip-link:focus{left:0}

/* Ambient warm light + grain over the whole page (depth, not flat black) */
/* Ambient glow — absolutely positioned (scrolls with the page) instead of fixed,
   so it never re-composites on every scroll frame. */
.atmos{position:absolute;top:0;left:0;right:0;height:130vh;z-index:-2;pointer-events:none;
  background:
    radial-gradient(80% 40% at 50% -8%, rgba(201,168,106,.14), transparent 60%),
    radial-gradient(55% 40% at 88% 6%, rgba(120,86,40,.12), transparent 60%),
    linear-gradient(180deg,var(--bg-2),var(--bg) 70%);
}
.grain{display:none}

/* --------------------------------------------------------------------------
   Type devices
   -------------------------------------------------------------------------- */
.eyebrow{display:inline-flex;align-items:center;gap:var(--space-3);font-size:.74rem;font-weight:600;
  letter-spacing:var(--track-caps-wide);text-transform:uppercase;color:var(--muted);margin-bottom:var(--space-5)}
.eyebrow::before{content:'';width:36px;height:1px;background:var(--gold);opacity:.8}

.section-title{font-family:var(--font-serif);font-weight:340;font-optical-sizing:auto;
  font-size:var(--display-title);line-height:1.05;letter-spacing:-.02em;max-width:20ch}
.gold-em{font-style:italic;font-weight:380;color:var(--gold-2);position:relative;white-space:nowrap}
.gold-em::after{content:'';position:absolute;left:0;right:0;bottom:.04em;height:2px;
  background:linear-gradient(90deg,var(--gold),transparent);transform:scaleX(0);transform-origin:left}
.reveal.visible .gold-em::after,.gold-em.drawn::after{animation:draw 1.1s var(--ease) .25s forwards}
@keyframes draw{to{transform:scaleX(1)}}
/* Gold range — static milled-metal bevel on the single hero headline word */
.hero h1 .gold-em{background:linear-gradient(180deg,var(--gold-2) 0%,var(--gold) 48%,var(--gold-deep) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

.section-lead{color:var(--muted);font-size:var(--step-1);max-width:54ch}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-sans);font-weight:600;font-size:.97rem;
  padding:15px 28px;border-radius:var(--radius-pill);border:1px solid transparent;cursor:pointer;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s,border-color .2s,color .2s;
  white-space:nowrap}
.btn:active{transform:translateY(0) scale(.98)}
.btn-primary{background:linear-gradient(180deg,var(--gold-2),var(--gold));color:#241a09;
  box-shadow:0 14px 40px rgba(201,168,106,.22)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 20px 52px rgba(201,168,106,.36)}
.btn-ghost{background:transparent;color:var(--bone);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--gold);transform:translateY(-2px)}
.btn-lg{padding:17px 32px;font-size:1.02rem}
.btn-sm{padding:10px 20px;font-size:.88rem}
.btn-block{width:100%}

/* --------------------------------------------------------------------------
   Nav
   -------------------------------------------------------------------------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-h);
  transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(21,17,12,.92);border-bottom-color:var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h)}
.nav-right{display:flex;align-items:center;gap:30px}
.brand{display:inline-flex;align-items:center;gap:12px;font-family:var(--font-serif);font-weight:500;
  font-size:1.32rem;letter-spacing:.005em;font-variation-settings:'opsz' 72,'wght' 500}
.brand .dot{width:9px;height:9px;border-radius:50%;background:var(--gold);flex:none;
  box-shadow:0 0 14px rgba(201,168,106,.6)}
.brand .brand-gem{width:18px;height:18px;flex:none;display:inline-grid;place-items:center;
  filter:drop-shadow(0 0 8px rgba(201,168,106,.45))}
.brand .brand-gem svg{width:100%;height:100%;overflow:visible}
.brand-gem .bg-fill{fill:rgba(201,168,106,.14)}
.brand-gem .bg-line{fill:none;stroke:var(--gold);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a:not(.btn){position:relative;font-size:.92rem;font-weight:500;color:var(--muted);transition:color .2s}
.nav-links a:not(.btn)::after{content:'';position:absolute;left:0;right:100%;bottom:-6px;height:1.5px;
  background:var(--gold);transition:right .25s var(--ease)}
.nav-links a:not(.btn):hover,.nav-links a.active:not(.btn){color:var(--bone)}
/* Per-link underline is now HOVER-only; the active section is marked by the shared
   sliding .nav-spy bar below, so two gold lines never stack. */
.nav-links a:not(.btn):hover::after{right:0}
.nav-links{position:relative}
/* Single shared hairline that SLIDES + resizes under the active section link.
   Compositor-only: translateX + scaleX (base width 1px, so --spy-w maps px directly
   with no calc inside scaleX) + opacity. Geometry measured only on section change /
   resize in frame() — never per scroll frame. will-change toggled via .spy-on. */
.nav-spy{position:absolute;left:0;bottom:-6px;width:1px;height:1.5px;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold-2) 50%,var(--gold-deep));
  border-radius:2px;transform-origin:left center;
  transform:translateX(var(--spy-x,0)) scaleX(var(--spy-w,0));opacity:var(--spy-o,0);
  pointer-events:none;transition:transform .32s var(--ease),opacity .26s linear}
.nav-spy.spy-on{will-change:transform}
@media (max-width:680px){.nav-spy{display:none}}
.nav-toggle{display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:44px;height:44px;background:none;border:0;cursor:pointer;padding:8px}
.nav-toggle span{width:22px;height:2px;background:var(--bone);border-radius:2px;transition:transform .25s,opacity .25s}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* --------------------------------------------------------------------------
   Hero — 3D crystal + serif headline
   -------------------------------------------------------------------------- */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;padding:calc(var(--nav-h) + 40px) 0 60px;overflow:hidden;touch-action:pan-y}
.hero-canvas{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,var(--bg) 8%,rgba(21,17,12,.55) 42%,transparent 70%)}
.hero .container{position:relative;z-index:2}
.hero-copy{max-width:640px}

.hero h1{font-family:var(--font-serif);font-weight:330;font-optical-sizing:auto;
  font-size:var(--display-hero);line-height:1.0;letter-spacing:-.022em}
.line{display:block;overflow:hidden;padding-bottom:.2em;margin-bottom:-.18em}
.js .line>span{display:block;transform:translateY(120%)}
.hero.ready .line>span{animation:rise 1s var(--ease) forwards}
.hero.ready .line:nth-child(1)>span{animation-delay:.12s}
.hero.ready .line:nth-child(2)>span{animation-delay:.26s}
.hero.ready .line:nth-child(3)>span{animation-delay:.40s}
@keyframes rise{to{transform:translateY(0)}}
.hero .gold-em::after{animation:none}
.hero.ready .gold-em::after{animation:draw 1.1s var(--ease) 1.05s forwards}

.hero-kicker{display:flex;align-items:center;gap:var(--space-3);font-size:.74rem;font-weight:600;letter-spacing:var(--track-caps-wide);
  text-transform:uppercase;color:var(--muted);margin-bottom:var(--space-6)}
.hero-kicker::before{content:'';width:36px;height:1px;background:var(--gold);opacity:.8}
.hero-lead{font-size:var(--step-1);line-height:1.6;color:var(--bone-2);max-width:46ch;margin-top:34px}
.hero-actions{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:40px;overflow:visible}
.hero-guarantee{display:flex;align-items:center;gap:10px;margin-top:22px;font-size:.92rem;
  padding:9px 16px 9px 14px;border:1px solid var(--gold-line);border-radius:var(--radius-pill);
  background:linear-gradient(180deg,rgba(201,168,106,.06),rgba(201,168,106,.02));width:fit-content;max-width:100%}
.hero-guarantee svg{color:var(--gold);flex:none}
.hg-seal{flex:none;display:inline-flex;line-height:0}
.hg-text{position:relative;color:var(--bone-2)}
.hg-text::after{content:'';position:absolute;left:0;right:0;bottom:-3px;height:1px;
  background:linear-gradient(90deg,var(--gold),transparent);transform:scaleX(1);transform-origin:left}

.js .hero.ready .hero-kicker,.js .hero.ready .hero-lead,.js .hero.ready .hero-actions,
.js .hero.ready .hero-guarantee,.js .hero.ready .hero-spec{animation:fade .9s ease forwards}
.js .hero-kicker,.js .hero-lead,.js .hero-actions,.js .hero-guarantee,.js .hero-spec{opacity:0}
.hero.ready .hero-kicker{animation-delay:.05s}
.hero.ready .hero-lead{animation-delay:.85s}
.hero.ready .hero-actions{animation-delay:1.0s}
.hero.ready .hero-guarantee{animation-delay:1.12s}
.hero.ready .hero-spec{animation-delay:1.24s}
@keyframes fade{to{opacity:1}}

.hero-spec{display:flex;flex-wrap:wrap;margin-top:4vh;border-top:1px solid var(--line);max-width:580px}
.spec{padding:22px 34px 0 0;margin-right:34px;border-right:1px solid var(--line)}
.spec:last-child{border-right:0;margin-right:0;padding-right:0}
.spec-val{font-family:var(--font-serif);font-weight:400;font-size:var(--display-5);line-height:1;letter-spacing:-.01em}
.spec-val .u{color:var(--gold)}
.spec-label{font-size:.72rem;letter-spacing:var(--track-caps-tight);text-transform:uppercase;color:var(--muted);margin-top:10px}
.spec-context{flex:0 0 100%;font-size:.7rem;font-weight:600;letter-spacing:var(--track-caps);text-transform:uppercase;
  color:var(--muted);padding-top:16px}


/* --------------------------------------------------------------------------
   Section frame
   -------------------------------------------------------------------------- */
.section{padding:var(--space-section) 0;position:relative}
.section-head{margin-bottom:var(--space-lg);max-width:62ch}

/* --------------------------------------------------------------------------
   Services — editorial index
   -------------------------------------------------------------------------- */
.index-list{border-top:1px solid var(--gold-line)}
.index-item{border-bottom:1px solid var(--line)}
.index-row{display:grid;grid-template-columns:84px 1fr auto;gap:30px;align-items:baseline;
  padding:32px 10px;cursor:pointer;list-style:none;
  transition:padding-left .35s var(--ease),background .35s var(--ease)}
.index-row::-webkit-details-marker{display:none}
.index-row:hover{padding-left:24px;background:linear-gradient(90deg,rgba(201,168,106,.06),transparent)}
.index-item[open] .index-row{background:linear-gradient(90deg,rgba(201,168,106,.05),transparent)}
.index-num{font-family:var(--font-serif);font-size:1rem;font-style:italic;color:var(--gold);padding-top:.4em}
.index-main h3{font-family:var(--font-serif);font-weight:380;font-size:clamp(1.6rem,2.8vw,2.2rem);
  line-height:1.1;letter-spacing:-.01em;margin-bottom:10px}
.index-main p{color:var(--muted);font-size:var(--step-0);max-width:62ch}
.index-arrow{align-self:center;color:var(--muted);transition:transform .35s var(--ease),color .35s}
.index-row:hover .index-arrow{color:var(--gold)}
.index-item[open] .index-arrow{transform:rotate(180deg);color:var(--gold)}
.index-detail{padding:0 10px 36px 114px}
.index-detail p{color:var(--bone-2);font-size:1.02rem;line-height:1.7;max-width:68ch}
.index-item[open] > .index-detail{animation:detailIn .45s var(--ease)}
@keyframes detailIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* --------------------------------------------------------------------------
   The Standard — principles band (declarative, not interactive)
   -------------------------------------------------------------------------- */
.standard-list{border-top:1px solid var(--gold-line)}
.standard-item{display:grid;grid-template-columns:84px 1fr;gap:30px;align-items:baseline;
  padding:var(--space-6) 10px;border-bottom:1px solid var(--line)}
.standard-main h3{font-family:var(--font-serif);font-weight:380;font-size:var(--display-3);
  line-height:1.2;letter-spacing:-.01em;margin-bottom:var(--space-2)}
.standard-main p{color:var(--muted);font-size:var(--step-0);max-width:72ch;line-height:1.55}

/* The Standard — bespoke self-drawing glyphs (one per principle). The draw rides
   the band's EXISTING .reveal.visible state (main.js revealObserver); no new JS,
   no new observer, no scroll listener. Only stroke-dashoffset animates, one-shot,
   on a tiny static SVG. pathLength="1" normalizes every stroke so one dash pair
   hides then draws any path. */
.standard-item{align-items:start}
.standard-item .index-num{padding-top:0} /* re-seat numeral to the top now a glyph sits above the heading */
.std-glyph{display:block;width:24px;height:24px;margin-bottom:14px;color:var(--gold);overflow:visible}
.std-glyph path,.std-glyph circle{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:1}
.std-glyph .std-glyph-tick{stroke-width:1.6}
.standard-item.reveal.visible .std-glyph path,.standard-item.reveal.visible .std-glyph circle{
  animation:stdGlyphDraw 1s var(--ease) var(--gd,0s) forwards}
@keyframes stdGlyphDraw{to{stroke-dashoffset:0}}
@media (max-width:680px){.std-glyph{width:22px;height:22px;margin-bottom:10px}}

/* --------------------------------------------------------------------------
   Process — gold drawn connector
   -------------------------------------------------------------------------- */
.process{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative}
.process::before{content:'';position:absolute;left:0;right:0;top:21px;height:1px;background:var(--line-2)}
.process::after{content:'';position:absolute;left:0;top:21px;height:1px;width:100%;
  background:linear-gradient(90deg,var(--gold),var(--gold-deep));
  transform:scaleX(0);transform-origin:left;transition:transform 1.5s var(--ease) .2s}
.process.drawn::after{transform:scaleX(1)}
.pstep{position:relative;padding:0 24px 0 0}
.pstep-node{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:var(--bg);border:1px solid var(--line-2);font-family:var(--font-serif);font-style:italic;
  font-size:.95rem;color:var(--bone);position:relative;z-index:1;margin-bottom:28px;
  transition:border-color .5s,color .5s,background .5s,box-shadow .5s}
.process.drawn .pstep:nth-child(1) .pstep-node{transition-delay:.2s}
.process.drawn .pstep:nth-child(2) .pstep-node{transition-delay:.55s}
.process.drawn .pstep:nth-child(3) .pstep-node{transition-delay:.9s}
.process.drawn .pstep:nth-child(4) .pstep-node{transition-delay:1.25s}
.process.drawn .pstep-node{border-color:var(--gold);color:#241a09;
  background:linear-gradient(180deg,var(--gold-2),var(--gold));box-shadow:0 0 24px rgba(201,168,106,.35)}
/* F5 — process precision instrument: per-step tick-rule + heading resolve.
   Tick draws via transform:scaleX (never width); the heading tints gold while
   its isolated decoder runs, then settles to bone. All driven by the one frame(). */
.pstep::after{content:'';position:absolute;left:0;right:24px;bottom:0;height:1px;
  background:linear-gradient(90deg,var(--gold),var(--gold-deep));
  transform:scaleX(0);transform-origin:left;opacity:.85}
.pstep h3{transition:color .55s var(--ease)}
.pstep h3.resolving{color:var(--gold-2)}
.pstep h3{font-family:var(--font-serif);font-weight:400;font-size:var(--display-2);margin-bottom:10px;letter-spacing:-.01em}
.pstep p{color:var(--muted);font-size:var(--step--1);max-width:30ch}

/* --------------------------------------------------------------------------
   Pricing
   -------------------------------------------------------------------------- */
.price-lead{font-family:var(--font-serif);font-weight:340;font-size:clamp(1.5rem,2.8vw,2.1rem);
  line-height:1.3;letter-spacing:-.01em;max-width:24ch;margin-bottom:10px}
.price-lead em{font-style:italic;color:var(--gold-2)}
.price-sub{color:var(--muted);font-size:var(--step-0);max-width:52ch;margin-bottom:var(--space-lg)}
.tiers{border-top:1px solid var(--gold-line)}
.tier{display:grid;grid-template-columns:1fr .7fr 1.4fr auto;gap:32px;align-items:center;
  padding:34px 10px;border-bottom:1px solid var(--line);
  transition:padding-left .35s var(--ease),background .35s var(--ease)}
.tier:hover{padding-left:22px;background:linear-gradient(90deg,rgba(201,168,106,.06),transparent)}
.tier.featured{background:linear-gradient(90deg,rgba(201,168,106,.07),transparent);box-shadow:inset 2px 0 0 var(--gold),inset 0 1px 0 rgba(241,236,224,.05)}
.tier.featured .tier-name{color:var(--gold-2)}
.tier-name{font-family:var(--font-serif);font-weight:400;font-size:var(--display-3);letter-spacing:-.01em}
.tier-name .tag{display:block;font-family:var(--font-sans);font-size:.66rem;letter-spacing:var(--track-caps);
  text-transform:uppercase;color:var(--gold);font-weight:600;margin-top:7px}
.tier-price{font-family:var(--font-serif);font-weight:400;font-size:var(--display-4);letter-spacing:-.01em}
.tier-price .from{display:block;font-family:var(--font-sans);font-size:.66rem;text-transform:uppercase;
  letter-spacing:var(--track-caps-tight);color:var(--muted);font-weight:600;margin-bottom:4px}
.tier-desc{color:var(--muted);font-size:var(--step--1)}
/* Whole tier card is the control now (role=button); the arrow is just the affordance. */
.tier{cursor:pointer}
.tier:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:var(--radius-sm)}
.tier-go{justify-self:end;color:var(--gold);display:inline-flex;align-items:center;opacity:.62;
  transition:opacity .25s var(--ease),transform .25s var(--ease)}
.tier:hover .tier-go,.tier:focus-visible .tier-go{opacity:1;transform:translateX(5px)}

/* Guarantee band */
.guarantee{display:flex;align-items:center;gap:28px;margin-top:60px;
  background:linear-gradient(120deg,rgba(201,168,106,.10),rgba(201,168,106,.03));
  border:1px solid var(--gold-line);border-radius:var(--radius);padding:38px 40px;box-shadow:var(--shadow),inset 0 1px 0 rgba(241,236,224,.05)}
.guarantee-icon{display:grid;place-items:center;flex:none;width:58px;height:58px;border-radius:var(--radius);
  background:linear-gradient(180deg,var(--gold-2),var(--gold));color:#241a09}
.guarantee h3{font-family:var(--font-serif);font-weight:400;font-size:var(--display-3);margin-bottom:8px;letter-spacing:-.01em}
.guarantee p{color:var(--bone-2);font-size:var(--step-0);max-width:74ch}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq-list{border-top:1px solid var(--gold-line)}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{display:grid;grid-template-columns:52px 1fr 26px;align-items:center;gap:10px;
  padding:28px 8px;font-family:var(--font-serif);font-weight:400;font-size:var(--display-1);cursor:pointer;
  list-style:none;letter-spacing:-.01em}
.faq-list summary::-webkit-details-marker{display:none}
.faq-q{font-family:var(--font-serif);font-style:italic;font-size:.95rem;color:var(--gold)}
.faq-icon{position:relative;width:16px;height:16px;justify-self:end}
.faq-icon::before,.faq-icon::after{content:'';position:absolute;background:var(--gold);border-radius:2px;transition:transform .3s var(--ease)}
.faq-icon::before{top:7px;left:0;width:16px;height:1.5px}
.faq-icon::after{top:0;left:7px;width:1.5px;height:16px}
details[open] .faq-icon::after{transform:rotate(90deg)}
/* FAQ answers glide open/closed via a collapsing grid track (0fr->1fr). Only the
   grid row interpolates — no JS height loop, no page reflow, not scroll-coupled.
   The inner <p> keeps generous bottom padding as descender slack under the clip. */
.faq-ans{display:grid;grid-template-rows:0fr;transition:grid-template-rows .42s var(--ease)}
.faq-list details[open] .faq-ans{grid-template-rows:1fr}
/* The inner clipper is the grid item: min-height:0 + overflow:hidden + NO padding,
   so the 0fr track collapses fully to 0 (the answer's own padding lives on the <p>
   inside, which the clipper hides). Without this, the <p>'s padding can't compress
   and the closed row resolves to ~30px, leaving a gap. */
.faq-ans-i{min-height:0;overflow:hidden}
.faq-ans-i>p{margin:0;padding:2px 8px 28px 62px;color:var(--muted);font-size:1rem;line-height:1.7;max-width:72ch;
  opacity:0;transform:translateY(6px);transition:opacity .34s var(--ease) .04s,transform .34s var(--ease) .04s}
.faq-list details[open] .faq-ans-i>p{opacity:1;transform:none}
/* Closing pass: JS adds .faq-closing, reverses the motion, then drops [open] on transitionend. */
.faq-list details.faq-closing .faq-ans{grid-template-rows:0fr}
.faq-list details.faq-closing .faq-ans-i>p{opacity:0;transform:translateY(6px)}
/* Mirror the plus/minus marker on close: ease minus->plus during the collapse
   (the [open] rotate rule is still applied while .faq-closing is present, so this
   higher-specificity rule overrides it for exactly the collapse duration). */
.faq-list details.faq-closing .faq-icon::after{transform:none}
.faq-typing::after{content:'|';color:var(--gold);opacity:1;animation:faqCursor .5s step-end infinite}
@keyframes faqCursor{0%,100%{opacity:1}50%{opacity:0}}

/* --------------------------------------------------------------------------
   Start / quote form
   -------------------------------------------------------------------------- */
.section-start{border-top:1px solid var(--line);background:linear-gradient(180deg,transparent,rgba(201,168,106,.04))}
.start-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:64px;align-items:start}
.start-copy{position:sticky;top:calc(var(--nav-h) + 36px)}
.start-points{display:flex;flex-direction:column;gap:14px;margin-top:32px}
.start-points li{display:flex;align-items:center;gap:12px;font-size:.99rem;color:var(--bone-2)}
.start-points svg{color:var(--gold);flex:none}
.contact-direct{margin-top:38px;padding-top:30px;border-top:1px solid var(--line)}
.contact-direct-label{font-size:.74rem;text-transform:uppercase;letter-spacing:var(--track-caps);color:var(--muted);margin-bottom:16px}
.contact-methods{display:flex;flex-wrap:wrap;gap:11px}
.contact-method{display:inline-flex;align-items:center;gap:8px;font-size:.9rem;font-weight:600;color:var(--bone);
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius-pill);padding:11px 18px;
  min-height:44px;transition:transform .2s,border-color .2s}
.contact-method:hover{transform:translateY(-2px);border-color:var(--gold)}
.contact-method svg{flex:none;color:var(--gold)}
.contact-method.whatsapp svg{color:#48c95f}
.contact-number{display:inline-flex;align-items:center;min-height:44px;margin-top:7px;font-family:var(--font-serif);font-style:italic;
  color:var(--muted);font-size:1.05rem;transition:color .2s}
.contact-number:hover{color:var(--bone)}

.form-card{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius);
  padding:var(--space-7) var(--space-7);box-shadow:var(--shadow),inset 0 1px 0 rgba(241,236,224,.05)}
.form-section{margin-bottom:26px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form-row .form-section{margin-bottom:26px}
.form-label{display:block;font-size:.74rem;text-transform:uppercase;letter-spacing:var(--track-caps);color:var(--muted);margin-bottom:13px}
.req{color:var(--gold);margin-left:3px}
.optional{text-transform:none;letter-spacing:0;color:var(--muted)}
.chip-group{display:flex;flex-wrap:wrap;gap:10px}
.chip{font-family:var(--font-sans);font-size:.88rem;font-weight:500;color:var(--bone-2);
  background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--radius-pill);padding:12px 18px;min-height:44px;cursor:pointer;
  transition:border-color .2s,color .2s,background .2s;position:relative;overflow:hidden}
.chip:hover{border-color:var(--gold-line);color:var(--bone)}
.chip.selected{background:linear-gradient(180deg,var(--gold-2),var(--gold));border-color:var(--gold);color:#241a09}
.chip.selected::after{content:'';position:absolute;top:0;left:0;width:55%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,248,210,.38),transparent);
  transform:translateX(-200%);
  animation:chipShimmer .55s ease forwards}
@keyframes chipShimmer{from{transform:translateX(-200%)}to{transform:translateX(400%)}}
/* Touch press feedback — hover affordances don't fire on tap, so give a real pressed state */
.chip:active{transform:scale(.97)}
.index-row:active,.faq-list summary:active,.tier:active{background:linear-gradient(90deg,rgba(201,168,106,.08),transparent)}
.nav-links a:not(.btn):active,.footer-links a:active,.contact-method:active,.tier-cta:active,.contact-number:active{color:var(--bone)}
.form-card input,.form-card textarea{width:100%;font-family:var(--font-sans);font-size:1rem;color:var(--bone);
  background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--radius-sm);padding:14px 16px;
  transition:border-color .2s,background .2s;resize:vertical;-webkit-appearance:none;appearance:none}
.form-card input::placeholder,.form-card textarea::placeholder{color:var(--muted);opacity:.9}
.form-card input:focus,.form-card textarea:focus{outline:none;border-color:var(--gold);background:var(--bg);
  box-shadow:0 0 0 3px rgba(201,168,106,.08),0 0 14px rgba(201,168,106,.07)}
/* Touch-only: an instant gold border warm-up the moment a thumb lands, before the
   keyboard + focus glow animate in. Closes the dead gap on tap. Border-color only. */
@media (hover:none){.form-card input:active,.form-card textarea:active{border-color:var(--gold-line)}}
.form-card textarea{overscroll-behavior:contain}
@media (hover:none){.form-card textarea{resize:none}}
.tier-hint{display:flex;align-items:center;gap:8px;font-size:.78rem;color:var(--gold);opacity:.8;margin-bottom:18px;padding:10px 14px;
  background:rgba(201,168,106,.07);border:1px solid rgba(201,168,106,.15);border-radius:var(--radius-sm)}
.tier-hint[hidden]{display:none}
.tier-hint svg{flex-shrink:0;opacity:.9}
/* text-wrap:pretty — eliminates widow/orphan lines on narrow mobile columns.
   Pure progressive enhancement, silently ignored by unsupported engines. */
.hero-lead,.section-lead,.price-lead,.price-sub,.index-main p,.standard-main p,
.faq-ans-i>p,.tier-desc,.editorial-meta{text-wrap:pretty}
.form-card input.invalid,.form-card textarea.invalid,.chip-group.invalid .chip{border-color:#d8694e}
.form-card input:-webkit-autofill{-webkit-text-fill-color:var(--bone);transition:background-color 9999s ease}
.field-error{color:#e88a6e;font-size:.82rem;margin-top:9px;display:none}
.field-error.show{display:block}
.hp-field{position:absolute;left:-9999px;top:-9999px;height:0;overflow:hidden}
.form-fineprint{margin-top:17px;text-align:center;color:var(--muted);font-size:.8rem}
.form-fineprint a{color:var(--gold)}
.btn-spinner{display:none;width:18px;height:18px;border:2.5px solid rgba(36,26,9,.35);border-top-color:#241a09;
  border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.btn.loading .btn-spinner{display:inline-block}
.btn.loading{pointer-events:none;opacity:.85}
.btn.loading .btn-label{opacity:.7}
.form-success{text-align:center;padding:36px 10px}
.form-success h3{font-family:var(--font-serif);font-weight:400;font-size:var(--display-4);margin:24px 0 10px}
.form-success p{color:var(--muted);max-width:40ch;margin:0 auto 28px}
/* Contact-form success seal (gem-strike). Plays ONCE, only when #formSuccess gains
   .sealed in the JS success branch (gating fixes the old cdraw auto-firing while
   hidden). Composited: stroke-dashoffset + opacity + transform only. */
.form-seal{width:118px;height:118px;margin:0 auto}
.form-seal svg{width:118px;height:118px;overflow:visible;display:block}
.form-seal .seal-ring{stroke:var(--gold);stroke-width:2;stroke-linecap:round;stroke-dasharray:308;stroke-dashoffset:308}
.form-seal .seal-ring2{stroke:var(--gold-line);stroke-width:1;stroke-dasharray:267;stroke-dashoffset:267}
.form-seal .seal-gem{stroke:var(--gold-2);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:240;stroke-dashoffset:240}
.form-seal .seal-facet{fill:rgba(201,168,106,.10);opacity:0}
.form-success.sealed .form-seal{animation:sealSettle .9s var(--ease) .05s both}
.form-success.sealed .seal-ring{animation:sealDraw .85s var(--ease) .1s forwards}
.form-success.sealed .seal-ring2{animation:sealDraw .85s var(--ease) .22s forwards}
.form-success.sealed .seal-gem{animation:sealDraw .7s var(--ease) .5s forwards}
.form-success.sealed .seal-facet{animation:sealFacet .6s ease 1s forwards}
.form-success.sealed h3{opacity:0;animation:sealRise .7s var(--ease) .85s forwards}
.form-success.sealed p{opacity:0;animation:sealRise .7s var(--ease) .98s forwards}
@keyframes sealDraw{to{stroke-dashoffset:0}}
@keyframes sealFacet{to{opacity:1}}
@keyframes sealRise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes sealSettle{0%{transform:scale(.86)}60%{transform:scale(1.03)}100%{transform:scale(1)}}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer{border-top:1px solid var(--line);padding:54px 0}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap}
.footer-links{display:flex;gap:28px;flex-wrap:wrap}
.footer-links a{display:inline-flex;align-items:center;min-height:44px;font-size:.9rem;color:var(--muted);transition:color .2s}
.footer-links a:hover{color:var(--bone)}
.footer-note{font-size:.84rem;color:var(--muted)}

/* --------------------------------------------------------------------------
   Toast
   -------------------------------------------------------------------------- */
.toast{position:fixed;bottom:28px;left:50%;transform:translate(-50%,90px);background:var(--surface-2);
  border:1px solid var(--gold-line);color:var(--bone);padding:15px 24px;border-radius:var(--radius-sm);font-size:.92rem;
  font-weight:500;box-shadow:var(--shadow);opacity:0;pointer-events:none;
  transition:transform .35s var(--ease),opacity .35s;z-index:300;max-width:min(480px,90vw)}
.toast.show{transform:translate(-50%,0);opacity:1}

/* --------------------------------------------------------------------------
   Legal pages
   -------------------------------------------------------------------------- */
.legal{padding:calc(var(--nav-h) + 70px) 0 90px}
.legal h1{font-family:var(--font-serif);font-weight:380;font-size:clamp(2.2rem,4vw,3rem);letter-spacing:-.02em;margin-bottom:12px}
.legal .updated{color:var(--muted);font-size:.86rem;margin-bottom:42px}
.legal h2{font-family:var(--font-serif);font-weight:400;font-size:1.4rem;margin:38px 0 12px;letter-spacing:-.01em}
.legal p,.legal li{color:var(--bone-2);font-size:1rem}
.legal p{margin-bottom:13px}
.legal ul{list-style:disc;padding-left:24px;margin-bottom:13px}
.legal li{margin-bottom:7px}

/* --------------------------------------------------------------------------
   Editorial statement section
   -------------------------------------------------------------------------- */
.editorial-section { padding: 5vh 0 7vh; overflow: hidden; touch-action: pan-y; }
.editorial-lines { margin-bottom: 36px; }
.editorial-line {
  font-family: var(--font-serif);
  font-size: clamp(58px, 11vw, 108px);
  font-weight: 500;
  line-height: .86;
  margin: 0;
  white-space: nowrap;
}
.ed-l1 { padding-left: max(28px, 4vw); color: var(--bone-2); }
.ed-l2 {
  padding-left: max(52px, 8.5vw);
  color: transparent;
  -webkit-text-stroke: 1px rgba(201,168,106,.25);
}
.ed-l3 {
  padding-left: max(18px, 2vw);
  color: var(--gold);
  font-style: italic;
}
.editorial-footer { display: flex; align-items: center; gap: 36px; flex-wrap: wrap; }
.editorial-meta { font-size: .9rem; color: var(--muted); line-height: 1.68; margin: 0; max-width: 260px; }
@media (max-width: 680px) {
  /* Match the 64px section rhythm so scroll feels consistent */
  .editorial-section { padding: 64px 0 56px; overflow-x: hidden; }
  .editorial-lines { overflow-x: hidden; }
  /* Scale type to the device; -0.02em tracking tightens the display serif */
  .editorial-line { white-space: normal; font-size: clamp(40px,13vw,72px); line-height: .92; letter-spacing: -.02em; }
  /* Recreate the desktop zigzag stagger at mobile scale (desktop is 28/52/18) */
  .ed-l1 { padding-left: max(12px, 2.5vw); }
  .ed-l2 { padding-left: max(44px, 10vw); }
  .ed-l3 { padding-left: max(8px, 1.5vw); }
}

/* --------------------------------------------------------------------------
   Reveal-on-scroll
   -------------------------------------------------------------------------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.reveal.visible{opacity:1;transform:none}
.d-1{transition-delay:.05s}.d-2{transition-delay:.1s}.d-3{transition-delay:.15s}.d-4{transition-delay:.2s}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width:1024px){
  .hero-scrim{background:linear-gradient(180deg,rgba(21,17,12,.2),var(--bg) 78%)}
  .start-grid{grid-template-columns:1fr;gap:50px}
  .start-copy{position:static}
  .process{grid-template-columns:1fr;row-gap:16px}
  .process::before,.process::after{display:none}
  .tier{grid-template-columns:1fr 1fr;gap:18px 32px}
  .tier-desc{grid-column:1/-1;order:3}
  .tier-go{order:4}
}
@media (max-width:680px){
  /* Batch 3 — spacing hierarchy: editorial rhythm vs stretched desktop */
  .section{padding:64px 0}
  .section-head{margin-bottom:28px}
  .container{width:min(1200px,100% - 40px)}
  /* Batch 4 — full-height thumb-zone nav drawer. top:0 + 100dvh = full bleed.
     justify-content:center puts links in the middle of the screen.
     padding-top clears the fixed nav bar; padding-bottom clears the home indicator.
     overflow-y:auto handles landscape phones with short viewports.
     z-index:90 keeps the hamburger (nav bar z-index higher) on top and tappable. */
  .nav-links{position:fixed;top:0;left:0;right:0;height:100dvh;z-index:90;
    flex-direction:column;align-items:stretch;justify-content:center;gap:0;overflow-y:auto;
    background:#15110c;box-shadow:0 24px 64px rgba(0,0,0,.75);
    padding:var(--nav-h) 28px max(28px,env(safe-area-inset-bottom));
    transform:translateY(-12px);opacity:0;pointer-events:none;
    transition:transform .35s var(--ease),opacity .35s}
  .nav-links.open{transform:translateY(0);opacity:1;pointer-events:auto}
  /* Larger touch targets for thumb-zone links */
  .nav-links a:not(.btn){padding:18px 4px;font-size:1.2rem;text-align:center}
  .nav-links .btn{margin-top:16px;min-height:44px}
  .nav-toggle{display:flex}
  .hero{min-height:auto;padding-top:calc(var(--nav-h) + 36px)}
  .hero-scrim{background:linear-gradient(180deg,rgba(21,17,12,.15),var(--bg) 70%)}
  /* Batch 2 — hero headline: tighter tracking + balanced line-break */
  --display-hero:clamp(2.5rem,11.5vw,3.4rem);
  .hero h1{letter-spacing:-.03em;line-height:.98;text-wrap:balance}
  /* Batch 1 — one confident full-width gold bar in the thumb arc */
  .hero-actions{flex-direction:column;align-items:stretch;gap:12px;margin-top:32px}
  .hero-actions .btn{width:100%}
  .hero-spec{margin-top:48px;gap:18px 0}
  .spec-label{font-size:.78rem}
  .spec-context{font-size:.72rem}
  /* Batch 3 — fix the orphaned spec divider: full-width stack with horizontal rules */
  .spec{flex:1 1 100%;border-right:0;border-bottom:1px solid var(--line);padding:14px 0;margin-right:0}
  .spec:last-child{border-bottom:0}
  .scroll-cue{display:none}
  .index-row{grid-template-columns:44px 1fr auto;gap:14px}
  .index-detail{padding-left:58px;padding-right:0}
  .standard-item{grid-template-columns:44px 1fr;gap:14px;padding:var(--space-5) 0}
  .process{grid-template-columns:1fr;row-gap:16px}
  .pstep{display:grid;grid-template-columns:44px 1fr;gap:4px 18px;align-items:center;padding:0}
  .pstep-node{margin-bottom:0}
  .pstep h3,.pstep p{grid-column:2}
  .pstep::after{display:none}
  .tier{grid-template-columns:1fr;gap:8px}
  .tier-go{justify-self:start}
  .tier-name .tag,.tier-price .from{font-size:.75rem}
  .form-row{grid-template-columns:1fr;gap:0}
  .form-card{padding:30px 22px}
  .form-card input,.form-card textarea{font-size:1rem}
  .start-grid{grid-template-columns:1fr}
  .guarantee{flex-direction:column;align-items:flex-start;gap:18px;padding:30px 26px}
  .footer-inner{flex-direction:column;text-align:center}
  .footer-links{justify-content:center;gap:6px 22px}
  .gold-em{white-space:normal}
  /* Batch 3 — normalize FAQ gutter to match 20px mobile gutter everywhere else */
  .container.narrow{width:min(860px,100% - 40px)}
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .js .line>span{transform:none !important;animation:none !important}
  .js .hero-kicker,.js .hero-lead,.js .hero-actions,.js .hero-guarantee,.js .hero-spec{opacity:1 !important;animation:none !important}
  .gold-em::after{transform:scaleX(1) !important;animation:none !important}
  .scroll-cue{display:none}
  .process::after{transition:none}
  .pstep::after{transform:scaleX(1)}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
  /* New animations — paint final states, no draw/settle (placed after the global
     line so they win the cascade). */
  .std-glyph path,.std-glyph circle{stroke-dashoffset:0 !important;animation:none !important}
  .form-success.sealed .seal-ring,.form-success.sealed .seal-ring2,.form-success.sealed .seal-gem{stroke-dashoffset:0;animation:none}
  .form-success.sealed .seal-facet{opacity:1;animation:none}
  .form-success.sealed .form-seal{transform:none;animation:none}
  .form-success.sealed h3,.form-success.sealed p{opacity:1;transform:none;animation:none}
  .faq-ans{transition:none}
  .faq-ans-i>p{transition:none;opacity:1;transform:none}
  .faq-list details[open] .faq-ans{grid-template-rows:1fr}
}