/* Zarco Dental — site styles, v4 "product theatre".
   Warm gallery daylight; dark lives only inside crafted UI objects.
   Three set-pieces: the theatre card, the drag-the-line slider, service UI fragments. */

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--enamel-050)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--enamel-050);color:var(--text-body);
  font-family:var(--font-sans);font-size:var(--fs-body);line-height:var(--lh-body);
  letter-spacing:var(--ls-body);-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--fw-semibold);color:var(--text-heading);margin:0;text-wrap:balance}
p{margin:0;text-wrap:pretty}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
::selection{background:var(--teal-200);color:var(--ink-900)}
:focus-visible{outline:2px solid var(--teal-600);outline-offset:3px}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--ink-900);color:var(--enamel-050);padding:10px 16px;z-index:600;font-size:var(--fs-small)}
.skip-link:focus{left:0}

.container{max-width:var(--container-max);margin-inline:auto;padding-inline:var(--gutter)}
.container-wide{max-width:var(--container-wide);margin-inline:auto;padding-inline:var(--gutter)}

.acc{font-family:var(--font-editorial);font-style:italic;font-weight:var(--fw-regular);font-size:1.08em;letter-spacing:-0.01em}

/* Mono eyebrow with the 2px vertical rule */
.rule-label{display:inline-flex;align-items:center;gap:11px}
.rule-label i{width:2px;height:13px;background:var(--accent-primary);transform:scaleY(0);transform-origin:top center;transition:transform var(--dur-draw) var(--ease-draw)}
.rule-label span{font-family:var(--font-mono);font-size:var(--fs-eyebrow);font-weight:var(--fw-medium);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--accent-primary)}
.rule-label.inverse i{background:var(--accent-inverse)}
.rule-label.inverse span{color:var(--accent-inverse)}
.in .rule-label i,.rule-label.in i,html.ready .hero .rule-label i{transform:scaleY(1)}

/* ---------- Reveal primitives ---------- */
html.js [data-reveal]{opacity:0;transform:translateY(var(--reveal-shift));transition:opacity var(--dur-reveal) var(--ease-out) var(--d,0ms),transform var(--dur-reveal) var(--ease-out) var(--d,0ms)}
html.js [data-reveal].in{opacity:1;transform:none}
.mask-line{display:block;transition:clip-path var(--dur-mask) var(--ease-draw) var(--d,0ms),transform var(--dur-mask) var(--ease-draw) var(--d,0ms)}
html.js .mask-line{clip-path:inset(0 -0.2em 105% 0);transform:translateY(.16em)}
html.js.ready .mask-line{clip-path:inset(-0.3em -0.2em -0.25em 0);transform:none}
.draw-rule{height:1px;background:var(--border-rule);position:relative;overflow:hidden}
.draw-rule::after{content:"";position:absolute;inset:0;background:var(--accent-primary);transform:scaleX(0);transform-origin:left center;transition:transform var(--dur-draw) var(--ease-draw) var(--d,0ms)}
.draw-rule.inverse{background:var(--border-rule-inverse)}
.draw-rule.inverse::after{background:var(--accent-inverse)}
.in .draw-rule::after,.draw-rule.in::after{transform:scaleX(1)}

/* ---------- Curtain ---------- */
.curtain{
  position:fixed;inset:0;z-index:700;background:var(--ink-900);
  display:flex;align-items:center;justify-content:center;
  transition:transform 780ms var(--ease-draw) 60ms,visibility 0s linear 900ms;
}
.curtain-mark{display:flex;align-items:center;gap:14px}
.curtain-mark i{width:3px;height:0;background:var(--teal-300);transition:height 520ms var(--ease-draw) 120ms}
.curtain-mark b{
  font-family:var(--font-display);font-weight:var(--fw-bold);font-size:clamp(22px,3vw,30px);letter-spacing:-0.03em;color:var(--enamel-050);
  opacity:0;transform:translateY(10px);transition:opacity 480ms var(--ease-out) 260ms,transform 480ms var(--ease-out) 260ms;
}
.curtain-mark b em{font-style:normal;color:var(--teal-300)}
html.js .curtain.arm .curtain-mark i{height:34px}
html.js .curtain.arm .curtain-mark b{opacity:1;transform:none}
.curtain.lift{transform:translateY(-100%);visibility:hidden}
html:not(.js) .curtain{display:none}
@media (prefers-reduced-motion:reduce){.curtain{display:none}}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-sans);font-weight:var(--fw-semibold);font-size:var(--fs-small);letter-spacing:.005em;
  border-radius:var(--radius-pill);padding:0 var(--space-7);height:46px;white-space:nowrap;
  transition:background-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),transform var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard);
}
.btn:active{transform:scale(.98)}
.btn svg{transition:transform var(--dur-base) var(--ease-out)}
.btn:hover svg{transform:translateX(var(--arrow-nudge))}
.btn-lg{height:56px;padding:0 var(--space-9);font-size:var(--fs-body)}
.btn-primary{background:linear-gradient(165deg,var(--teal-600),var(--teal-800));color:var(--enamel-050);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 8px 20px -10px rgba(10,98,89,.4)}
.btn-primary:hover{background:linear-gradient(165deg,var(--teal-700),var(--teal-900));box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 14px 32px -12px rgba(10,98,89,.5)}
.btn-outline{background:transparent;color:var(--ink-800);border:1px solid var(--enamel-300)}
.btn-outline:hover{border-color:var(--ink-800)}
.btn-accent{background:linear-gradient(165deg,var(--signal-500),var(--signal-700));color:#FFF9F5;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 10px 26px -10px rgba(217,80,47,.5)}
.btn-accent:hover{background:linear-gradient(165deg,var(--signal-600),#9C3220);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 16px 38px -12px rgba(217,80,47,.55)}
.btn-ghost-inverse{background:transparent;color:var(--enamel-050)}
.btn-ghost-inverse:hover{color:#FFFFFF;text-decoration:underline;text-underline-offset:5px}

/* ---------- Header — cream glass ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:var(--z-header);height:var(--header-h);
  display:flex;align-items:center;background:transparent;border-bottom:1px solid transparent;
  transition:height var(--dur-base) var(--ease-standard),background-color var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard);
}
.site-header.scrolled{
  height:var(--header-h-scrolled);
  background:rgba(250,247,241,.82);backdrop-filter:var(--blur-glass);-webkit-backdrop-filter:var(--blur-glass);
  border-bottom-color:var(--border-hairline);
}
.site-header .container-wide{width:100%;display:flex;align-items:center;gap:var(--space-10)}

.wordmark{display:inline-flex;align-items:center;gap:10px}
.wordmark i{width:3px;height:22px;border-radius:2px;background:var(--teal-700);transition:height var(--dur-base) var(--ease-standard)}
.wordmark b{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:20px;letter-spacing:-0.03em;color:var(--ink-900);transition:font-size var(--dur-base) var(--ease-standard)}
.wordmark b em{font-style:normal;color:var(--teal-700)}
.scrolled .wordmark b{font-size:18px}
.scrolled .wordmark i{height:19px}
.wordmark.inverse b{color:var(--enamel-050)}
.wordmark.inverse b em{color:var(--teal-300)}
.wordmark.inverse i{background:var(--teal-300)}

.site-nav{display:flex;gap:var(--space-8);margin-left:auto}
.site-nav a{
  position:relative;font-size:var(--fs-small);font-weight:var(--fw-medium);
  color:var(--ink-600);padding-bottom:4px;transition:color var(--dur-fast) var(--ease-standard);
}
.site-nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--teal-700);transform:scaleX(0);transform-origin:left center;transition:transform var(--dur-base) var(--ease-draw)}
.site-nav a:hover{color:var(--ink-900)}
.site-nav a:hover::after{transform:scaleX(1)}
/* Services dropdown */
.nav-drop{position:relative}
.nav-drop::before{content:"";position:absolute;left:-24px;right:-24px;top:100%;height:22px}
.nav-drop-btn{
  display:inline-flex;align-items:center;gap:6px;position:relative;
  font-size:var(--fs-small);font-weight:var(--fw-medium);color:var(--ink-600);padding-bottom:4px;
  transition:color var(--dur-fast) var(--ease-standard);
}
.nav-drop-btn::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--teal-700);transform:scaleX(0);transform-origin:left center;transition:transform var(--dur-base) var(--ease-draw)}
.nav-drop:hover .nav-drop-btn,.nav-drop.open .nav-drop-btn{color:var(--ink-900)}
.nav-drop:hover .nav-drop-btn::after,.nav-drop.open .nav-drop-btn::after{transform:scaleX(1)}
.nav-drop-btn svg{transition:transform var(--dur-base) var(--ease-out);color:var(--teal-700)}
.nav-drop:hover .nav-drop-btn svg,.nav-drop.open .nav-drop-btn svg{transform:rotate(180deg)}
.nav-drop-panel{
  position:absolute;top:calc(100% + 16px);left:50%;min-width:400px;
  background:var(--enamel-000);border:1px solid var(--border-hairline);border-radius:var(--radius-card);
  box-shadow:var(--shadow-xl);padding:10px;z-index:400;
  opacity:0;visibility:hidden;transform:translate(-50%,10px);
  transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out),visibility 0s linear var(--dur-base);
}
.nav-drop:hover .nav-drop-panel,.nav-drop.open .nav-drop-panel,.nav-drop:focus-within .nav-drop-panel{
  opacity:1;visibility:visible;transform:translate(-50%,0);
  transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out);
}
.nav-drop-panel a{
  display:flex;align-items:flex-start;gap:14px;padding:13px 14px;border-radius:var(--radius-md);
  transition:background-color var(--dur-fast) var(--ease-standard);
}
.nav-drop-panel a:hover{background:var(--teal-50)}
.nav-drop-panel a i{font-family:var(--font-editorial);font-style:italic;font-size:1.15rem;color:var(--teal-600);line-height:1.2;flex:0 0 auto}
.nav-drop-panel a b{display:block;font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--fs-small);color:var(--ink-900);letter-spacing:-.01em}
.nav-drop-panel a small{display:block;margin-top:2px;font-size:var(--fs-caption);line-height:1.45;color:var(--text-muted)}

.header-cta{flex:0 0 auto}
.header-cta .btn{height:40px;padding:0 var(--space-6);border:1px solid var(--ink-800);color:var(--ink-900);background:transparent}
.header-cta .btn:hover{background:var(--teal-700);border-color:var(--teal-700);color:var(--enamel-050)}

.menu-btn{display:none;flex-direction:column;justify-content:center;gap:6px;width:44px;height:44px;margin-left:auto}
.menu-btn span{display:block;height:1.5px;background:var(--ink-900)}
.menu-btn span:first-child{width:26px}
.menu-btn span:last-child{width:18px;margin-left:8px}

/* Mobile menu — ink sheet */
.mobile-menu{
  position:fixed;inset:0;z-index:var(--z-overlay);background:var(--ink-900);color:var(--enamel-050);
  display:flex;flex-direction:column;padding:var(--space-7) var(--gutter) var(--space-10);
  opacity:0;visibility:hidden;transition:opacity var(--dur-slow) var(--ease-out),visibility 0s linear var(--dur-slow);
}
.mobile-menu.open{opacity:1;visibility:visible;transition:opacity var(--dur-slow) var(--ease-out)}
.mobile-menu-top{display:flex;align-items:center;justify-content:space-between;height:44px}
.mobile-menu-close{color:var(--enamel-050);font-family:var(--font-mono);font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase}
.mobile-menu nav{display:flex;flex-direction:column;margin-top:var(--space-14)}
.mobile-menu nav a{
  display:flex;align-items:baseline;gap:var(--space-6);padding:var(--space-6) 0;
  border-top:1px solid var(--border-rule-inverse);
  font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--fs-h2);letter-spacing:var(--ls-heading);color:var(--enamel-050);
  opacity:0;transform:translateY(12px);transition:opacity var(--dur-reveal) var(--ease-out) var(--d,0ms),transform var(--dur-reveal) var(--ease-out) var(--d,0ms);
}
.mobile-menu.open nav a{opacity:1;transform:none}
.mobile-menu nav a small{font-family:var(--font-mono);font-weight:var(--fw-medium);font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);color:var(--accent-inverse)}
.mobile-menu-foot{margin-top:auto;display:flex;flex-direction:column;gap:var(--space-6)}
.mobile-menu-foot .btn{justify-content:center}
.mobile-menu-foot p{font-family:var(--font-mono);font-size:var(--fs-caption);color:var(--text-inverse-muted)}

/* ---------- Hero ---------- */
.hero{
  position:relative;overflow:clip;
  padding-top:calc(var(--header-h) + clamp(28px,5vh,64px));
  padding-bottom:clamp(var(--space-14),6vw,var(--space-20));
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(900px 560px at 85% 0%, rgba(18,145,132,.10), transparent 60%),
    radial-gradient(700px 500px at 0% 100%, rgba(217,80,47,.05), transparent 60%);
}
.hero > *{position:relative}
.hero-eyebrow-row{display:flex;justify-content:space-between;align-items:center;gap:var(--space-8);flex-wrap:wrap}
.hero-eyebrow-row .where{font-family:var(--font-mono);font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--enamel-500)}
.hero-grid{
  display:grid;grid-template-columns:minmax(0,6.5fr) minmax(0,5.5fr);
  gap:clamp(var(--space-10),4vw,var(--space-16));align-items:start;
  margin-top:clamp(var(--space-9),3.5vw,var(--space-12));
}
.hero-copy{display:flex;flex-direction:column;gap:var(--space-8)}
.hero h1{
  font-size:clamp(2.6rem,4.7vw,4.3rem);
  line-height:.97;letter-spacing:-0.048em;color:var(--ink-900);
}
.hero h1 .acc{color:var(--teal-700)}
.hero-sub{font-size:var(--fs-body-lg);line-height:1.55;color:var(--text-secondary);max-width:46ch}
.hero-cta-row{display:flex;gap:var(--space-5);align-items:center;flex-wrap:wrap}
.hero-scroll{display:inline-flex;align-items:center;gap:12px;margin-top:var(--space-6);font-family:var(--font-mono);font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--enamel-500)}
.hero-scroll i{position:relative;width:1px;height:44px;background:var(--enamel-300);overflow:hidden}
.hero-scroll i::after{content:"";position:absolute;left:0;top:-40%;width:100%;height:40%;background:var(--teal-600);animation:scrollcue 2.4s var(--ease-draw) infinite}
@keyframes scrollcue{0%{top:-40%}70%,100%{top:110%}}
@media (prefers-reduced-motion:reduce){.hero-scroll i::after{animation:none;top:0;height:100%}}

html.js .hero-copy > .hero-sub,html.js .hero-copy > .hero-cta-row,html.js .hero-copy > .hero-scroll,html.js .hero-eyebrow-row .where{opacity:0;transform:translateY(var(--reveal-shift));transition:opacity var(--dur-reveal) var(--ease-out) 620ms,transform var(--dur-reveal) var(--ease-out) 620ms}
html.ready .hero-copy > .hero-sub,html.ready .hero-copy > .hero-cta-row,html.ready .hero-copy > .hero-scroll,html.ready .hero-eyebrow-row .where{opacity:1;transform:none}

/* ---------- The theatre ---------- */
.hero-stage{position:relative;padding:var(--space-9) 0 var(--space-9)}
.theatre{
  --t-row:56px;
  position:relative;overflow:clip;
  background:
    radial-gradient(120% 90% at 85% -10%, rgba(18,145,132,.28), transparent 55%),
    linear-gradient(160deg,#0B222B 0%,#07161E 70%);
  border:1px solid rgba(255,255,255,.10);border-radius:var(--radius-panel);
  padding:var(--space-6) var(--space-6) var(--space-7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 50px 100px -30px rgba(7,22,30,.5),0 10px 30px -10px rgba(7,22,30,.3);
  transform:rotate(-1.4deg);
  max-width:520px;margin-inline:auto;
}
.theatre::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.08) 50%,transparent 58%);
  transform:translateX(-130%);
}
.theatre.s-book::after{animation:sheen 1100ms var(--ease-out) 400ms 1 forwards}
@keyframes sheen{to{transform:translateX(130%)}}
@media (prefers-reduced-motion:reduce){.theatre.s-book::after{animation:none}}
html.js .theatre{opacity:0;transform:translateY(26px) rotate(-1.4deg);transition:opacity var(--dur-reveal) var(--ease-out) 760ms,transform var(--dur-reveal) var(--ease-out) 760ms}
html.ready .theatre{opacity:1;transform:rotate(-1.4deg)}
.theatre-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-5)}
.theatre-title{font-family:var(--font-editorial);font-style:italic;font-size:1.15rem;color:var(--teal-300)}
.theatre-tag{font-family:var(--font-mono);font-size:10px;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:rgba(168,196,192,.55);border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:3px 10px}

.t-search{
  display:flex;align-items:center;gap:10px;height:42px;padding:0 var(--space-5);
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:999px;
  color:#CFE5E1;font-size:var(--fs-small);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.28);
}
.t-search svg{color:rgba(168,196,192,.7);flex:0 0 auto}
.t-query{white-space:nowrap;overflow:hidden}
.t-caret{width:1.5px;height:18px;background:var(--teal-300);animation:caret 1.05s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.t-caret{animation:none}}

.t-results{list-style:none;margin:var(--space-6) 0 0;padding:0;position:relative;height:calc(var(--t-row) * 3 + 16px)}
.t-row{
  position:absolute;left:0;right:0;height:var(--t-row);
  display:flex;align-items:center;gap:12px;padding:0 var(--space-5);
  border-radius:var(--radius-md);border:1px solid transparent;
  opacity:0;transform:translateY(10px);
  transition:opacity 420ms var(--ease-out),transform 640ms var(--ease-draw),border-color 300ms,background-color 300ms;
}
.t-row:nth-child(1){top:0}
.t-row:nth-child(2){top:calc(var(--t-row) + 8px)}
.t-row:nth-child(3){top:calc(var(--t-row) * 2 + 16px)}
.t-fav{width:26px;height:26px;flex:0 0 auto;border-radius:8px;background:rgba(255,255,255,.10);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.t-you .t-fav{background:linear-gradient(160deg,var(--teal-500),var(--teal-700));box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 4px 12px -3px rgba(18,145,132,.5)}
.t-row > div{min-width:0;flex:1}
.t-row b{display:block;font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--fs-small);color:#E9F2F0;letter-spacing:-.01em}
.t-row small{display:block;font-size:12px;color:rgba(168,196,192,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t-pos{font-family:var(--font-mono);font-size:11px;color:rgba(168,196,192,.55);border:1px solid rgba(255,255,255,.12);border-radius:999px;width:22px;height:22px;display:grid;place-items:center;flex:0 0 auto;transition:color 300ms,border-color 300ms}
/* stage: results appear with your practice sitting third */
.theatre.s-results .t-row{opacity:1}
.theatre.s-results .t-you{transform:translateY(calc((var(--t-row) + 8px) * 2))}
.theatre.s-results .t-row:nth-child(2){transform:translateY(calc((var(--t-row) + 8px) * -1))}
.theatre.s-results .t-row:nth-child(3){transform:translateY(calc((var(--t-row) + 8px) * -1))}
/* stage: the rise — everyone back to their DOM slot, you now first */
.theatre.s-rise .t-you,.theatre.s-rise .t-row:nth-child(2),.theatre.s-rise .t-row:nth-child(3){transform:translateY(0)}
.theatre.s-rise .t-you{background:rgba(18,145,132,.14);border-color:var(--teal-500)}
.theatre.s-rise .t-you .t-pos{color:var(--teal-200);border-color:var(--teal-500)}

.t-book{
  display:flex;align-items:center;gap:10px;margin-top:var(--space-6);
  padding:12px var(--space-5);border-radius:999px;
  background:linear-gradient(165deg,rgba(18,145,132,.22),rgba(18,145,132,.08));
  border:1px solid rgba(58,175,161,.45);
  font-size:13px;color:#BFE0DB;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 12px 30px -12px rgba(18,145,132,.45);
  opacity:0;transform:translateY(12px);
  transition:opacity 460ms var(--ease-out),transform 460ms var(--ease-out);
}
.t-book b{font-weight:var(--fw-semibold);color:#E9F2F0;font-size:13px}
.t-book svg{color:var(--teal-300);flex:0 0 auto}
.t-book .t-check{color:var(--teal-300)}
.t-book-dot{width:7px;height:7px;border-radius:50%;background:var(--teal-400);flex:0 0 auto}
.theatre.s-book .t-book{opacity:1;transform:none}

.t-replay{
  position:absolute;left:2%;bottom:2px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--enamel-500);padding:8px 10px;border-radius:999px;
  transition:color var(--dur-fast) var(--ease-standard);
}
.t-replay:hover{color:var(--teal-700)}

/* Annotations */
.anno{position:absolute;display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:11px;line-height:1.5;letter-spacing:.03em;color:var(--enamel-600);opacity:0;transform:translateY(6px);transition:opacity 500ms var(--ease-out),transform 500ms var(--ease-out);white-space:nowrap}
.anno i{display:block;width:34px;height:1px;background:var(--teal-600);flex:0 0 auto}
.anno span br{display:none}
.anno.on{opacity:1;transform:none}
.anno-1{top:2px;left:2%}
.anno-1 i{transform:rotate(38deg) translateY(8px)}
.anno-2{display:none}
.anno-3{bottom:2px;right:0}
.anno-3 i{order:2;transform:rotate(38deg) translateY(-8px)}
.anno-3 span{order:1}

/* ---------- Service page hero ---------- */
.page-hero{position:relative;overflow:clip;padding-top:calc(var(--header-h) + clamp(36px,6vh,72px));padding-bottom:clamp(var(--space-10),4vw,var(--space-14))}
.page-hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(800px 500px at 88% 0%, rgba(18,145,132,.09), transparent 60%)}
.page-hero > *{position:relative}
.page-hero-top{display:flex;justify-content:space-between;align-items:center;gap:var(--space-8);flex-wrap:wrap;margin-bottom:var(--space-9)}
.crumb{font-family:var(--font-mono);font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--enamel-500)}
.crumb a{color:inherit}
.crumb a:hover{color:var(--teal-700)}
.page-hero .lede{margin-top:var(--space-8);max-width:56ch;color:var(--text-secondary);font-size:var(--fs-body-lg);line-height:1.6}
.page-hero .hero-cta-row{margin-top:var(--space-9)}

/* Static illustration cards on service pages */
.theatre.static{transform:none;max-width:560px;margin-inline:0}
.theatre.static .t-results{height:auto;display:flex;flex-direction:column;gap:8px}
.theatre.static .t-row{position:relative;top:auto;height:auto;min-height:var(--t-row);opacity:1;transform:none;padding-top:8px;padding-bottom:8px}
.theatre.static .t-you{background:rgba(18,145,132,.14);border-color:var(--teal-500)}
.theatre.static .t-you .t-pos{color:var(--teal-200);border-color:var(--teal-500)}
html.js .theatre.static{opacity:1;transform:none;transition:none}
.serp-pack .t-row small{color:rgba(168,196,192,.6)}
.serp-meta{display:flex;gap:14px;margin-top:6px}
.serp-meta u{text-decoration:none;font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-300)}

/* Enquiry vignette (patient journeys) */
.enq{max-width:520px;background:linear-gradient(160deg,#0B222B 0%,#07161E 70%);border:1px solid rgba(255,255,255,.10);border-radius:var(--radius-panel);padding:var(--space-7);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),var(--shadow-xl)}
.enq-field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--space-5)}
.enq-field i{font-family:var(--font-mono);font-style:normal;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(168,196,192,.6)}
.enq-field b{height:40px;border-radius:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);display:flex;align-items:center;padding:0 14px;font-weight:var(--fw-regular);font-size:var(--fs-small);color:#CFE5E1}
.enq .t-book{margin-top:var(--space-6)}

/* Integration map (automation) */
.intmap{
  position:relative;max-width:560px;height:400px;
  background:radial-gradient(120% 90% at 80% -10%, rgba(18,145,132,.24), transparent 55%),linear-gradient(160deg,#0B222B 0%,#07161E 70%);
  border:1px solid rgba(255,255,255,.10);border-radius:var(--radius-panel);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),var(--shadow-xl);overflow:clip;
}
.intmap-node{
  position:absolute;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;
}
.intmap-node span{
  display:grid;place-items:center;width:56px;height:56px;border-radius:16px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);color:var(--teal-300);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
}
.intmap-node b{font-family:var(--font-mono);font-weight:var(--fw-medium);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(191,219,213,.8);white-space:nowrap}
.intmap-hub span{width:74px;height:74px;border-radius:20px;background:linear-gradient(160deg,var(--teal-500),var(--teal-800));color:#EAF6F3;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 14px 40px -10px rgba(18,145,132,.55)}
.intmap-hub b{color:#CFE5E1}
.intmap-line{position:absolute;height:1px;background:linear-gradient(90deg,rgba(58,175,161,.7),rgba(58,175,161,.12));transform-origin:left center}
.intmap-tag{position:absolute;right:14px;top:12px;font-family:var(--font-mono);font-size:10px;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:rgba(168,196,192,.55);border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:3px 10px}

/* Two-column feature split used on service pages */
.svc-split{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(var(--space-10),5vw,var(--space-16));align-items:center}
.svc-split > .svc-copy{display:flex;flex-direction:column;gap:var(--space-7)}
.svc-copy h2{font-size:clamp(1.9rem,3vw,2.5rem);line-height:1.05;letter-spacing:var(--ls-display)}
.svc-copy h2 .acc{color:var(--teal-700)}
.svc-copy p{color:var(--text-secondary);max-width:52ch;line-height:1.6}
.journey-steps.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}

/* ---------- Sections ---------- */
.section{padding-block:var(--section-y)}
.giant{
  font-size:clamp(2.9rem,7vw,6.25rem);line-height:.98;letter-spacing:-0.045em;display:block;
}
.giant .acc{color:var(--teal-700)}
.giant sup{
  font-family:var(--font-mono);font-weight:var(--fw-medium);font-size:clamp(.75rem,1vw,.9rem);
  letter-spacing:var(--ls-eyebrow);color:var(--text-muted);
  vertical-align:top;position:relative;top:.5em;margin-left:.45em;
}
.section-intro{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-10);flex-wrap:wrap;margin-bottom:var(--space-14)}
.section-intro .lede{max-width:46ch;color:var(--text-secondary);font-size:var(--fs-body-lg);line-height:1.55}
.h-display{font-size:clamp(2.1rem,3.6vw,2.75rem);line-height:1.06;letter-spacing:var(--ls-display)}
.h-display .acc{color:var(--teal-700)}

/* ---------- Before / after ---------- */
.ba{display:flex;flex-direction:column;gap:0}
.ba-ruler{
  position:relative;height:34px;margin-bottom:10px;
  display:flex;justify-content:space-between;align-items:flex-end;
  background:repeating-linear-gradient(90deg,rgba(7,22,30,.22) 0 1px,transparent 1px 14px) bottom/100% 8px no-repeat;
}
.ba-ruler-label{
  font-family:var(--font-mono);font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
  color:var(--text-muted);padding-bottom:12px;background:var(--enamel-050);padding-inline:4px;
}
.ba-marker{
  position:absolute;left:50%;bottom:-1px;width:0;height:0;margin-left:-7px;
  border-left:7px solid transparent;border-right:7px solid transparent;border-top:9px solid var(--signal-600);
}
.ba-frame{
  --cut:50%;
  position:relative;aspect-ratio:16/9;max-height:640px;width:100%;
  border-radius:var(--radius-panel);overflow:hidden;
  border:1px solid var(--border-hairline);
  box-shadow:var(--shadow-xl);
  touch-action:pan-y;
}
.ba-side{position:absolute;inset:0}
.ba-after{clip-path:inset(0 0 0 var(--cut))}
.ba-shine{
  position:absolute;top:0;bottom:0;left:var(--cut);width:90px;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,.30),rgba(255,255,255,0));
  mix-blend-mode:screen;
}
.ba-tag{
  position:absolute;bottom:14px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
  padding:6px 12px;border-radius:999px;pointer-events:none;
}
.ba-before .ba-tag{left:14px;background:rgba(7,22,30,.72);color:#fff}
.ba-after .ba-tag{right:14px;bottom:clamp(48px,9.5%,66px);background:rgba(7,22,30,.72);color:#EDE6D6;border:1px solid rgba(237,230,214,.25)}
.ba-divider{
  position:absolute;top:0;bottom:0;left:var(--cut);width:2px;margin-left:-1px;
  background:#fff;pointer-events:none;
  box-shadow:0 0 0 .5px rgba(7,22,30,.25),0 0 18px rgba(255,255,255,.85);
}
.ba-handle{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:58px;height:58px;border-radius:50%;display:grid;place-items:center;
  background:var(--signal-600);color:#FFF6F1;
  border:3px solid #fff;box-shadow:0 14px 34px -8px rgba(7,22,30,.45);
  transition:transform var(--dur-fast) var(--ease-standard),background-color var(--dur-fast) var(--ease-standard);
}
.ba-hint{
  position:absolute;top:calc(50% + 40px);left:50%;transform:translateX(-50%);
  font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:#fff;text-shadow:0 1px 8px rgba(7,22,30,.7);
  transition:opacity var(--dur-slow) var(--ease-standard);
}
.ba.dragged .ba-hint{opacity:0}
.ba-range{
  position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:grab;
  -webkit-appearance:none;appearance:none;
}
.ba-range:active{cursor:grabbing}
.ba-frame:has(.ba-range:active) .ba-handle{transform:translate(-50%,-50%) scale(1.08);background:var(--signal-500)}
.ba-frame:has(.ba-range:focus-visible) .ba-handle{box-shadow:0 0 0 3px var(--teal-300),0 14px 34px -8px rgba(7,22,30,.45)}
.ba-note{margin-top:var(--space-5);font-family:var(--font-mono);font-size:var(--fs-caption);color:var(--text-muted);text-align:right}

/* The two miniature sites (pure HTML illustrations) */
.mini{position:absolute;inset:0;pointer-events:none;overflow:hidden}
/* BEFORE: deliberately dated */
.mini-before{background:#EFF0E9;font-family:Verdana,Geneva,sans-serif;color:#222}
.mb-top{display:flex;justify-content:space-between;align-items:center;gap:12px;background:#123C8A;color:#fff;padding:1.6% 2.4%}
.mb-logo{font-family:"Times New Roman",Times,serif;font-weight:700;font-size:clamp(10px,1.5vw,20px);letter-spacing:.02em;white-space:nowrap}
.mb-nav{font-size:clamp(6px,0.85vw,11px);opacity:.92;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mb-banner{background:#fff;border:2px ridge #999;margin:2.2% 2.4%;padding:2% 2.6%}
.mb-banner b{display:block;font-family:"Times New Roman",Times,serif;font-size:clamp(12px,2vw,26px);color:#123C8A;margin-bottom:.6em}
.mb-banner p{font-size:clamp(7px,1vw,13px);line-height:1.55;text-align:justify;color:#333}
.mb-more{margin-top:.7em;color:#123C8A;font-size:clamp(7px,0.95vw,12px)}
.mb-row{display:flex;gap:2.4%;padding:0 2.4%}
.mb-row span{flex:1;background:#FDFBEA;border:1px solid #C9C39A;padding:1.6% 2%;font-size:clamp(6.5px,0.9vw,12px);line-height:1.5;text-align:center}
.mb-marq{position:absolute;left:0;right:0;bottom:0;background:#B31212;color:#fff;font-size:clamp(6.5px,0.9vw,12px);padding:1.1% 0;text-align:center;letter-spacing:.04em;white-space:nowrap;overflow:hidden}
/* AFTER: the same practice, rebuilt — full-bleed luxury, deep green + brass */
.mini-after3{background:#081C1A;font-family:var(--font-sans);color:#EDE6D6}
.m3-photo{
  position:absolute;inset:0;
  background:url("../assets/img/reception.jpg") 72% 55%/cover;
  filter:saturate(.92) brightness(1.05);
}
.m3-scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(97deg,rgba(6,24,21,.96) 0%,rgba(6,24,21,.84) 34%,rgba(6,24,21,.36) 68%,rgba(7,22,30,.16) 100%),
    linear-gradient(to top,rgba(5,18,16,.85) 0%,transparent 26%);
}
.m3-nav{
  position:relative;display:flex;align-items:center;gap:4%;
  padding:2.6% 3.6%;border-bottom:1px solid rgba(237,230,214,.16);
  background:rgba(6,24,21,.52);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.m3-logo{font-family:var(--font-editorial);font-style:italic;font-size:clamp(12px,1.6vw,23px);color:#F4EDDD;white-space:nowrap;letter-spacing:.01em}
.m3-logo em{font-style:italic;color:#D3B47F}
.m3-links{display:flex;gap:clamp(8px,2.2vw,30px);margin-left:auto}
.m3-links u{
  text-decoration:none;font-size:clamp(6.5px,0.78vw,11px);font-weight:var(--fw-semibold);
  letter-spacing:.18em;text-transform:uppercase;color:rgba(237,230,214,.72);white-space:nowrap;
}
.m3-cta{
  background:linear-gradient(160deg,#DDC08A,#C2A166);color:#241A0E;border-radius:999px;
  padding:.7% 2.4%;font-size:clamp(7px,0.95vw,13px);font-weight:var(--fw-bold);letter-spacing:.02em;white-space:nowrap;
  box-shadow:0 8px 20px -6px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.4);
}
.m3-hero{position:relative;padding:6.5% 3.6% 4%;max-width:62%}
.m3-hero small{
  display:block;font-family:var(--font-mono);font-size:clamp(6.5px,0.78vw,11px);
  letter-spacing:.22em;text-transform:uppercase;color:#D3B47F;margin-bottom:1.3em;
}
.m3-hero b{
  display:block;font-family:var(--font-display);font-weight:var(--fw-semibold);
  font-size:clamp(17px,3vw,44px);line-height:1.0;letter-spacing:-.035em;color:#F7F1E3;
}
.m3-hero b em{font-family:var(--font-editorial);font-style:italic;font-weight:400;font-size:1.06em;color:#D9BC85}
.m3-hero p{margin-top:1em;font-size:clamp(8px,1vw,14px);line-height:1.55;color:rgba(237,230,214,.82);max-width:36ch}
.m3-row{display:flex;gap:5%;align-items:center;margin-top:1.4em;white-space:nowrap}
.m3-btn{
  background:linear-gradient(160deg,#DDC08A,#C2A166);color:#241A0E;border-radius:999px;
  padding:.65em 1.6em;font-size:clamp(8px,1vw,13.5px);font-weight:var(--fw-bold);letter-spacing:.02em;
  box-shadow:0 12px 28px -8px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.45);
}
.m3-link{
  color:#EDE6D6;font-size:clamp(8px,0.95vw,13px);font-weight:var(--fw-medium);
  border-bottom:1px solid rgba(211,180,127,.65);padding-bottom:2px;
}
.m3-foot{
  position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:3%;
  padding:2% 3.6% 2.4%;border-top:1px solid rgba(237,230,214,.14);
}
.m3-foot span{font-family:var(--font-mono);font-size:clamp(6.5px,0.78vw,11px);letter-spacing:.14em;text-transform:uppercase;color:rgba(211,180,127,.9);white-space:nowrap}
.m3-foot i{width:1px;height:1.2em;background:rgba(237,230,214,.22)}

/* ---------- Services index ---------- */
.index-list{display:flex;flex-direction:column;margin-top:var(--space-4)}
.index-row{
  position:relative;
  display:grid;grid-template-columns:88px minmax(0,5fr) minmax(0,6fr) 150px;gap:var(--space-8);
  align-items:center;padding:clamp(var(--space-8),3.5vw,var(--space-10)) var(--space-6);
  border-top:1px solid var(--border-hairline);border-radius:var(--radius-card);
  transition:background-color var(--dur-base) var(--ease-standard);
}
.index-row:hover{background:var(--teal-50)}
.index-row:last-child{border-bottom:1px solid var(--border-hairline)}
.index-row > i{
  font-family:var(--font-editorial);font-style:italic;font-size:clamp(1.6rem,2.4vw,2.2rem);
  color:var(--teal-600);line-height:1;
}
.index-row h3{font-size:clamp(1.6rem,2.6vw,2.1rem);line-height:1.06;letter-spacing:var(--ls-heading)}
.index-body{display:flex;flex-direction:column;gap:var(--space-4)}
.index-body p{max-width:52ch;color:var(--text-secondary)}
.index-meta{display:flex;gap:var(--space-5);flex-wrap:wrap}
.index-meta span{font-family:var(--font-mono);font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-muted)}

/* UI fragments — each service's artefact, drawn in HTML */
.index-art{
  display:grid;place-items:center;width:150px;height:104px;
  background:var(--enamel-000);border:1px solid var(--border-hairline);border-radius:var(--radius-md);
  opacity:.62;transform:rotate(1.6deg);
  transition:opacity var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-standard);
}
.index-row:nth-child(even) .index-art{transform:rotate(-1.6deg)}
.index-row:hover .index-art{opacity:1;transform:rotate(0) translateY(-3px);box-shadow:var(--shadow-md)}
.art-web,.art-serp,.art-form,.art-nodes{position:relative;display:flex;flex-direction:column;gap:7px;width:96px}
.art-web i{display:block;height:5px;border-radius:3px;background:var(--enamel-200);width:100%}
.art-web b{display:block;width:44px;height:14px;border-radius:999px;background:var(--teal-700);margin-top:3px}
.art-serp em{display:block;height:12px;border-radius:999px;border:1px solid var(--enamel-300);width:100%}
.art-serp i{display:block;height:6px;border-radius:3px;background:var(--enamel-200);width:82%}
.art-serp i.hit{background:var(--teal-500);width:100%}
.art-form i{display:block;height:11px;border-radius:4px;border:1px solid var(--enamel-300);width:100%}
.art-form b{width:22px;height:22px;border-radius:50%;background:var(--teal-700);color:var(--enamel-050);font-size:12px;display:grid;place-items:center;margin-top:2px}
.art-nodes{height:56px;flex-direction:row;align-items:center;justify-content:space-between}
.art-nodes s{width:16px;height:16px;border-radius:5px;background:var(--ink-800);text-decoration:none}
.art-nodes u{flex:1;height:1.5px;background:var(--teal-500);margin:0 4px;text-decoration:none}
.art-nodes u:nth-of-type(3){display:none}

/* ---------- Journey (ink card) ---------- */
.journey{
  position:relative;background:var(--ink-900);color:var(--text-inverse-muted);
  padding-block:clamp(var(--space-20),8vw,var(--space-32));overflow:clip;
  border-radius:var(--radius-panel);margin-inline:clamp(8px,1vw,16px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 40px 90px -40px rgba(7,22,30,.5);
}
.journey::before{content:"";position:absolute;inset:0;background:radial-gradient(1000px 600px at 85% 0%, rgba(18,145,132,.20), transparent 60%)}
.journey > *{position:relative}
.journey-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:var(--space-16);align-items:end;margin-bottom:var(--space-20)}
.journey-head > div{display:flex;flex-direction:column;gap:var(--space-7)}
.journey-head h2{color:var(--enamel-050)}
.journey-head h2 .acc{color:var(--teal-300)}
.journey-head > p{color:var(--text-inverse-muted);font-size:var(--fs-body-lg);line-height:1.55}
.journey-line{position:relative}
.journey-track{position:absolute;left:0;top:5px;width:100%;height:1px;background:var(--border-rule-inverse)}
.journey-progress{position:absolute;left:0;top:5px;width:100%;height:1px;background:var(--accent-inverse);transform:scaleX(0);transform-origin:left center;transition:transform 1600ms var(--ease-draw)}
.journey-line.in .journey-progress{transform:scaleX(1)}
.journey-steps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--space-8);list-style:none;margin:0;padding:0}
.journey-step{display:flex;flex-direction:column;gap:var(--space-6)}
.journey-node{
  width:11px;height:11px;flex:0 0 auto;border-radius:50%;background:var(--ink-900);
  border:2px solid var(--accent-inverse);opacity:0;transition:opacity var(--dur-base) var(--ease-standard);
}
.journey-step:last-child .journey-node{border-color:var(--signal-500);box-shadow:0 0 18px rgba(240,102,63,.5)}
.journey-line.in .journey-node{opacity:1}
.journey-meta{display:flex;flex-direction:column;gap:var(--space-3)}
.journey-meta i{font-family:var(--font-editorial);font-style:italic;font-size:1.1rem;color:var(--accent-inverse)}
.journey-step:last-child .journey-meta i{color:var(--signal-500)}
.journey-meta h4{font-size:var(--fs-h5);letter-spacing:var(--ls-heading);color:var(--enamel-050)}
.journey-meta p{font-size:var(--fs-small);line-height:1.55;color:var(--text-inverse-muted);max-width:260px}

/* ---------- Live work strip ---------- */
.live-list{display:flex;flex-direction:column}
.live-row{
  display:grid;grid-template-columns:220px minmax(0,1fr) minmax(0,1.2fr) 44px;gap:var(--space-8);
  align-items:center;padding:var(--space-6) var(--space-5);
  border-top:1px solid var(--border-hairline);border-radius:var(--radius-card);
  transition:background-color var(--dur-base) var(--ease-standard);
}
.live-row:last-child{border-bottom:1px solid var(--border-hairline)}
.live-row:hover{background:var(--enamel-000)}
.live-thumb{position:relative;display:block;border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--border-hairline);aspect-ratio:16/10;box-shadow:var(--shadow-sm)}
.live-thumb::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(7,22,30,.06)}
.live-thumb img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform 900ms var(--ease-out)}
.live-row:hover .live-thumb img{transform:scale(1.04)}
.live-name b{display:block;font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--fs-h4);letter-spacing:var(--ls-heading);color:var(--ink-900)}
.live-name small{display:block;margin-top:4px;font-family:var(--font-mono);font-size:var(--fs-eyebrow);letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
.live-meta{font-size:var(--fs-small);color:var(--text-secondary);line-height:1.6}
.live-arrow{
  display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--border-default);color:var(--teal-700);
  transition:background-color var(--dur-base) var(--ease-standard),color var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-out);
}
.live-row:hover .live-arrow{background:var(--teal-700);border-color:var(--teal-700);color:var(--enamel-050);transform:translate(2px,-2px)}

/* ---------- Studio ---------- */
.studio{background:var(--background-secondary);border-block:1px solid var(--border-hairline)}
.studio-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(var(--space-10),5vw,var(--space-16));align-items:start}
.studio-copy{display:flex;flex-direction:column;gap:var(--space-9)}
.studio-copy > p{max-width:52ch;color:var(--text-secondary);font-size:var(--fs-body-lg);line-height:1.55}
.spec-table{display:flex;flex-direction:column}
.spec-row{display:grid;grid-template-columns:110px 160px minmax(0,1fr);gap:var(--space-6);padding:var(--space-5) 0;border-top:1px solid var(--border-rule)}
.spec-row:last-child{border-bottom:1px solid var(--border-rule)}
.spec-row i{font-family:var(--font-mono);font-style:normal;font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-muted);padding-top:5px}
.spec-row b{font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--fs-h5);letter-spacing:var(--ls-heading);color:var(--text-primary)}
.spec-row p{font-size:var(--fs-small);line-height:1.55;color:var(--text-secondary)}
.studio-figs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6);padding-top:var(--space-8)}
.figure{margin:0}
.figure img{width:100%;object-fit:cover;filter:saturate(.85);border-radius:var(--radius-media)}
.figure figcaption{
  margin-top:10px;padding-top:8px;border-top:1px solid var(--border-hairline);
  display:flex;gap:12px;font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;color:var(--text-muted);
}
.figure figcaption b{font-weight:var(--fw-medium);color:var(--accent-primary);flex:0 0 auto}
.fig-offset{margin-top:var(--space-14)}
.studio-figs .sq img{aspect-ratio:1/1}

/* ---------- Review CTA ---------- */
.review{position:relative;background:var(--ink-900);padding-block:clamp(var(--space-24),10vw,var(--space-32));overflow:clip}
.review-bg{position:absolute;inset:0}
.review-bg img{width:100%;height:100%;object-fit:cover;opacity:.55;filter:saturate(.9)}
.review-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(7,22,30,.92) 28%,rgba(7,22,30,.42) 100%)}
.review .container{position:relative}
.review-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:var(--space-16);align-items:end}
.review-copy{display:flex;flex-direction:column;gap:var(--space-8)}
.review-copy h2{color:var(--enamel-050);font-size:clamp(2.6rem,5.4vw,4.5rem);line-height:1.01;letter-spacing:-0.045em}
.review-copy h2 .acc{color:var(--teal-300)}
.review-copy > p{font-size:var(--fs-body-lg);line-height:1.6;color:#B9CFCB;max-width:52ch}
.review-actions{display:flex;flex-direction:column;gap:var(--space-6);align-items:flex-start}
.review-actions .draw-rule{width:100%}
.review-cta-row{display:flex;gap:var(--space-4);flex-wrap:wrap}
.review-note{font-family:var(--font-mono);font-size:var(--fs-caption);letter-spacing:.02em;color:#8FB0AB}

/* The working review form */
.review-form{display:flex;flex-direction:column;gap:var(--space-5);width:100%;position:relative}
.rf-field{display:flex;flex-direction:column;gap:7px}
.rf-field > span{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#8FB0AB}
.rf-field input{
  height:50px;border-radius:12px;border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.07);color:#EAF6F3;padding:0 16px;font:inherit;font-size:var(--fs-small);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.2);
  transition:border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard);
}
.rf-field input::placeholder{color:rgba(168,196,192,.45)}
.rf-field input:focus{outline:none;border-color:var(--teal-400);box-shadow:0 0 0 3px rgba(58,175,161,.22),inset 0 2px 6px rgba(0,0,0,.2)}
.rf-field small{font-size:var(--fs-caption);color:#7FA09B}
.rf-botcheck{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.rf-submit{justify-content:center;margin-top:var(--space-2)}
.review-form.sending .rf-submit{opacity:.65;pointer-events:none}
.rf-error{font-family:var(--font-mono);font-size:var(--fs-caption);color:var(--signal-200)}
.review-sent{display:flex;flex-direction:column;gap:var(--space-4);align-items:flex-start;padding:var(--space-6) 0}
.rs-check{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:linear-gradient(160deg,var(--teal-500),var(--teal-700));color:#EAF6F3;box-shadow:0 12px 30px -10px rgba(18,145,132,.5)}
.review-sent b{font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--fs-h4);color:var(--enamel-050)}
.review-sent p{color:#B9CFCB}

/* Mobile menu service sub-links */
.mobile-sub{display:flex;flex-direction:column;gap:2px;padding:var(--space-4) 0 0 44px;border-top:1px solid var(--border-rule-inverse)}
.mobile-menu nav .mobile-sub a{
  font-family:var(--font-sans);font-weight:var(--fw-medium);font-size:var(--fs-body);letter-spacing:0;
  color:#A8C4C0;border-top:0;padding:10px 0;
}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink-900);border-top:1px solid var(--border-rule-inverse);color:var(--text-inverse-muted);padding:var(--space-16) 0 var(--space-7)}
.footer-giant{
  font-family:var(--font-display);font-weight:var(--fw-semibold);color:var(--enamel-050);
  font-size:clamp(3rem,8vw,7rem);letter-spacing:-0.045em;line-height:1;margin-bottom:var(--space-14);
}
.footer-giant .acc{color:var(--teal-300)}
.footer-grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:var(--space-10);margin-bottom:var(--space-14)}
.footer-brand{display:flex;flex-direction:column;gap:var(--space-6)}
.footer-brand .sub{font-family:var(--font-mono);font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-inverse-muted)}
.footer-brand p{font-size:var(--fs-small);max-width:300px;line-height:1.6}
.footer-contact{display:flex;flex-direction:column;gap:7px;font-family:var(--font-mono);font-size:var(--fs-caption);letter-spacing:.02em}
.footer-contact a:hover{color:var(--enamel-050)}
.footer-col{display:flex;flex-direction:column;gap:var(--space-5)}
.footer-col > span{font-family:var(--font-mono);font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--enamel-500);padding-bottom:var(--space-3);border-bottom:1px solid var(--border-rule-inverse)}
.footer-col nav{display:flex;flex-direction:column;gap:11px}
.footer-col a{font-size:var(--fs-small);color:var(--text-inverse-muted);transition:color var(--dur-fast) var(--ease-standard)}
.footer-col a:hover{color:var(--enamel-050)}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;gap:var(--space-7);
  padding-top:var(--space-6);border-top:1px solid var(--border-rule-inverse);
  font-family:var(--font-mono);font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--enamel-500);flex-wrap:wrap;
}
.footer-bottom a:hover{color:var(--enamel-050)}

/* ---------- Responsive ---------- */
@media (max-width:1240px){
  .anno-1{left:-6%}
  .anno-3{left:-5%}
  .anno-2{right:-4%}
}
@media (max-width:960px){
  .site-nav,.header-cta{display:none}
  .menu-btn{display:flex}
  .hero-grid{grid-template-columns:1fr;gap:var(--space-10)}
  .hero h1{font-size:clamp(2.6rem,9.5vw,4.4rem)}
  .hero-stage{padding:var(--space-4) 0 var(--space-8)}
  .theatre{max-width:560px}
  .anno{display:none}
  .section-intro{margin-bottom:var(--space-10)}
  .ba-frame{aspect-ratio:4/3;max-height:none}
  .index-row{grid-template-columns:52px minmax(0,1fr);grid-template-areas:"i t" "i b" "i a";row-gap:var(--space-5)}
  .index-row > i{grid-area:i}
  .index-row h3{grid-area:t}
  .index-body{grid-area:b}
  .index-art{grid-area:a;justify-self:start}
  .journey{border-radius:var(--radius-lg);margin-inline:6px}
  .journey-head{grid-template-columns:1fr;gap:var(--space-8);margin-bottom:var(--space-14)}
  .journey-track,.journey-progress{left:5px;top:0;width:1px;height:100%}
  .journey-progress{transform:scaleY(0);transform-origin:top center}
  .journey-line.in .journey-progress{transform:scaleY(1)}
  .journey-steps{display:flex;flex-direction:column;gap:var(--space-9)}
  .journey-step{flex-direction:row;gap:var(--space-7)}
  .live-row{grid-template-columns:132px minmax(0,1fr) 40px;gap:var(--space-5)}
  .live-meta{display:none}
  .live-arrow{width:40px;height:40px}
  .studio-grid{grid-template-columns:1fr}
  .studio-figs{padding-top:0}
  .review-grid{grid-template-columns:1fr;gap:var(--space-10)}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  :root{--section-y:var(--space-16)}
  .theatre{--t-row:58px;padding:var(--space-5)}
  .mb-nav,.m3-links{display:none}
  .ba-frame{aspect-ratio:3/3.2}
  .ba-before .ba-tag{display:none}
  .m3-hero{max-width:94%;padding-top:9%}
  .spec-row{grid-template-columns:96px minmax(0,1fr)}
  .spec-row p{grid-column:2}
  .footer-grid{grid-template-columns:1fr;gap:var(--space-8)}
  .studio-figs{grid-template-columns:1fr}
  .fig-offset{margin-top:0}
}