/* Home page: cinematic scroll hero and sections. Loaded only by index.html.
   Section order mirrors index.html. Animations use transform and opacity only,
   and everything is switched off for visitors who prefer reduced motion. */
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden;overflow-x:clip;background:var(--canvas);scroll-padding-top:var(--nav-h);-webkit-text-size-adjust:100%}
body{margin:0;overflow-x:hidden;overflow-x:clip;background:var(--canvas);color:var(--text);font-family:var(--f-body);font-size:15.5px;line-height:1.7;-webkit-font-smoothing:antialiased;animation:pagein .9s var(--ease-out) both}
@keyframes pagein{from{opacity:0}to{opacity:1}}
img,svg,video{display:block;max-width:100%}
h1,h2,h3,p,ul,ol,figure,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:fixed;left:16px;top:-60px;z-index:110;background:var(--btn-fill);color:var(--btn-ink);padding:10px 16px;font-weight:600;transition:top .3s var(--ease-out)}
.skip:focus{top:12px}
[hidden]{display:none!important}

/* ---------- buttons (home) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 24px;font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;border-radius:1px;border:1px solid transparent;cursor:pointer;transition:background .35s var(--ease-out),color .35s var(--ease-out),border-color .35s var(--ease-out),transform .35s var(--ease-out),translate .5s var(--ease-out);text-shadow:none}
.btn-solid{background:var(--btn-fill);color:var(--btn-ink)}
.btn-solid:hover{background:var(--btn-fill-hover);transform:translateY(-1px)}
.btn-line{border-color:rgba(238,234,227,.42);color:var(--text-primary);background:rgba(15,16,17,.25)}
.btn-line:hover{border-color:var(--text-primary);transform:translateY(-1px)}
.btn .arr{transition:transform .35s var(--ease-out)}
.btn:hover .arr{transform:translateX(4px)}
.btn[disabled]{opacity:.6;cursor:progress}
.nav .btn{padding:11px 18px}

/* ---------- hero: three slits open, the pillars slide up out of them, then the call to action ----------
   Sequence: the floor seam draws, three slits open with light rising out of them, the
   faceted steel pillars slide up out of them, a glint runs up each one, then the copy and the estimate button. Pure CSS, so it plays before any script runs. Every entrance animation ends on the
   element's normal style and uses fill-mode backwards, so hover effects still work
   afterwards and reduced motion only has to switch the animations off. */
.w{display:inline-block;white-space:nowrap}
.c{display:inline-block}
.kicker{font-family:var(--f-label);font-weight:500;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--text-secondary)}
.kicker em{font-style:normal;color:var(--text-secondary)}
/* Layout. Phones and portrait tablets: the scene on top, the copy below it on the floor.
   Landscape screens from 700px: the copy on the left, the scene on the right.
   --rh is the pillars' height; the floor starts exactly where they stand. */
.hero{--rh:clamp(170px,30vh,290px);--top:5vh;--px:50%;--pn:.5;position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;padding:calc(var(--nav-h) + var(--top)) var(--gutter) 56px;text-align:center;overflow:hidden;isolation:isolate;background:linear-gradient(180deg,#0B0C0D 0%,#121315 100%)}
.hero::before{content:"";position:absolute;left:var(--px);top:calc(var(--nav-h) + var(--top) + var(--rh));width:min(1100px,140vw);aspect-ratio:2/1;translate:-50% -55%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(212,163,115,.11),rgba(212,163,115,0) 70%);animation:h-fade 2.4s var(--ease-out) .4s backwards}
.hero-floor{position:absolute;left:0;right:0;bottom:0;top:calc(var(--nav-h) + var(--top) + var(--rh));z-index:-1;overflow:hidden;pointer-events:none;background:radial-gradient(ellipse 34% 70% at var(--px) 0,rgba(212,163,115,.13),rgba(212,163,115,0) 70%),linear-gradient(180deg,#191A1D 0%,#101113 40%,#0B0C0D 100%)}
/* the seam where floor meets wall, drawn outward from under the pillars */
.hero-floor::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;z-index:1;transform-origin:var(--px) 0;background:linear-gradient(90deg,rgba(212,163,115,0),rgba(212,163,115,.55) 25%,rgba(226,185,142,.9) var(--px),rgba(212,163,115,.55) 75%,rgba(212,163,115,0));animation:h-ground 1s var(--ease-io) backwards}
/* stone slab joints receding into the floor */
.hero-floor::after{content:"";position:absolute;left:-60%;right:-60%;top:0;height:240%;--gx:calc((.6 + var(--pn)) / 2.2 * 100%);transform-origin:var(--gx) 0;transform:perspective(420px) rotateX(78deg);background-image:linear-gradient(90deg,rgba(238,234,227,.055) 1px,transparent 1px),linear-gradient(180deg,rgba(238,234,227,.055) 1px,transparent 1px);background-size:150px 150px;background-position:var(--gx) 0;-webkit-mask-image:radial-gradient(ellipse 30% 40% at var(--gx) 0,#000 25%,transparent 100%);mask-image:radial-gradient(ellipse 30% 40% at var(--gx) 0,#000 25%,transparent 100%);animation:h-fade 1.6s var(--ease-out) .3s backwards}
@keyframes h-ground{from{transform:scaleX(0)}}

.rise{position:relative;flex:none;height:var(--rh);aspect-ratio:27/51}
.rise-mark{display:block;width:100%;height:100%;overflow:visible}

/* 1. light shafts rise out of the slits, behind the pillars */
.beam{opacity:.32;animation:h-beam 2.2s var(--ease-out) backwards}
.b1{animation-delay:.4s}.b2{animation-delay:.55s}.b3{animation-delay:.7s}
@keyframes h-beam{0%{opacity:0}30%{opacity:1}100%{opacity:.32}}

/* 2. three slits open in the floor, one by one, with light leaking out of them */
.slit{transform-box:fill-box;transform-origin:50% 0;animation:h-slit .5s var(--ease-io) backwards}
.slit .hole{fill:url(#slit-hole)}
.slit .lip{fill:#CFC9BE;opacity:.55}
.slit .leak{fill:url(#slit-leak);opacity:.5;animation:h-leak 1.6s var(--ease-out) backwards}
.s1,.s1 .leak{animation-delay:.3s}.s2,.s2 .leak{animation-delay:.45s}.s3,.s3 .leak{animation-delay:.6s}
@keyframes h-slit{0%{transform:scaleX(0) scaleY(.2)}60%{transform:scaleX(1) scaleY(.2)}100%{transform:none}}
@keyframes h-leak{0%{opacity:0}35%{opacity:1}100%{opacity:.5}}

/* 3. the pillars slide up out of the slits: steady and mechanical, no bounce.
   Each is faceted brushed steel: a lit face, a shadow side, fine grain and a rim of warm light. */
.pillar{animation:h-pillar .85s cubic-bezier(.65,0,.3,1) backwards}
.p1{--d:37px;animation-delay:.8s}.p2{--d:52px;animation-delay:1.05s}.p3{--d:35px;animation-delay:1.3s}
@keyframes h-pillar{from{transform:translateY(var(--d))}}
.ridge{stroke:#FFF;stroke-opacity:.4;stroke-width:.09}
.rim{fill:none;stroke:#F2C894;stroke-width:.2;stroke-linejoin:round;stroke-linecap:round;opacity:.5;animation:h-rim 1.5s var(--ease-out) backwards}
.p1 .rim{animation-delay:1.6s}.p2 .rim{animation-delay:1.85s}.p3 .rim{animation-delay:2.1s}
@keyframes h-rim{0%{opacity:0}30%{opacity:1}100%{opacity:.5}}

/* 4. once each pillar locks in place, one glint of light runs up the steel */
.glint{transform:translateY(0);animation:h-glint .9s var(--ease-io) backwards}
.p1 .glint{animation-delay:1.6s}.p2 .glint{animation-delay:1.85s}.p3 .glint{animation-delay:2.1s}
@keyframes h-glint{from{transform:translateY(0)}to{transform:translateY(-64px)}}

/* light flaring out of each slit while its pillar rises */
.rise-glow{position:absolute;bottom:-14px;width:clamp(64px,8vh,110px);height:26px;translate:-50% 0;border-radius:50%;pointer-events:none;background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(226,185,142,.7),rgba(212,163,115,0) 70%);opacity:.25;animation:h-glow 1.7s var(--ease-out) backwards}
.g1{left:12%;animation-delay:.8s}.g2{left:50%;animation-delay:1.05s}.g3{left:87%;animation-delay:1.3s}
@keyframes h-glow{0%{opacity:0;transform:scale(.5)}30%{opacity:1;transform:scale(1.2)}100%{opacity:.25;transform:none}}

.hero-copy{position:relative;max-width:760px;margin-top:clamp(56px,9vh,96px)}
.hero .kicker{display:block;animation:h-up .8s var(--ease-out) 2s backwards}
.hero h1{margin-top:20px;font-family:var(--f-body);font-weight:300;text-transform:uppercase;letter-spacing:.22em;font-size:clamp(1.3rem,2.5vw,2.2rem);line-height:1.5;color:#EAE3D7;animation:h-up .9s var(--ease-out) 2.1s backwards}
.hero .sub{margin:18px auto 0;max-width:46ch;font-size:15px;line-height:1.7;color:var(--text);animation:h-up .9s var(--ease-out) 2.25s backwards}
.hero .cta{margin-top:32px;display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.hero .btn-line{animation:h-up .7s var(--ease-out) 2.75s backwards}
@keyframes h-up{from{opacity:0;transform:translateY(14px)}}
@keyframes h-fade{from{opacity:0}}

@media (min-height:900px) and (orientation:portrait){.hero{--rh:clamp(170px,34vh,440px);--top:8vh}}
@media (min-width:700px) and (orientation:landscape){
  .hero{--rh:clamp(260px,52vh,560px);--base:72%;--px:71%;--pn:.71;display:block;padding:0;text-align:left}
  .hero::before{top:var(--base)}
  .hero-floor{top:var(--base)}
  .rise{position:absolute;left:var(--px);top:calc(var(--base) - var(--rh));translate:-50% 0}
  .hero-copy{position:absolute;left:max(var(--gutter),calc((100% - var(--maxw)) / 2 + var(--gutter)));top:calc((var(--base) + var(--nav-h)) / 2);translate:0 -50%;max-width:min(560px,46vw);margin:0}
  .hero h1{font-size:clamp(1.5rem,2.7vw,2.6rem);max-width:15ch}
  .hero .sub{margin-left:0}
  .hero .cta{justify-content:flex-start}
}

/* the estimate button pops up last, with one ring of warm light */
.btn-pop{position:relative;animation:h-pop .75s cubic-bezier(.3,1.5,.5,1) 2.55s backwards}
.btn-pop::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;box-shadow:0 0 0 0 rgba(212,163,115,0);animation:h-ring 1.3s var(--ease-out) 2.95s backwards}
@keyframes h-pop{0%{opacity:0;transform:translateY(10px) scale(.86)}100%{opacity:1;transform:none}}
@keyframes h-ring{0%{box-shadow:0 0 0 0 rgba(212,163,115,.6)}100%{box-shadow:0 0 0 16px rgba(212,163,115,0)}}

.cue{position:absolute;left:50%;bottom:28px;translate:-50% 0;display:flex;flex-direction:column;align-items:center;gap:10px;font-family:var(--f-label);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--text-secondary);animation:h-fade 1s var(--ease-out) 3.2s backwards}
.cue i{display:block;width:1px;height:32px;background:linear-gradient(var(--text-primary),transparent);transform-origin:top;animation:cue 2.6s var(--ease-io) infinite;animation-delay:-.6s}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
@media (max-height:600px){.cue,.hero .sub,.hero .kicker{display:none}.hero{--rh:44vh;--base:80%}.hero h1{margin-top:0}.hero .cta{margin-top:18px}}
@media (max-width:520px){.cue{display:none}.hero h1{letter-spacing:.16em}.hero .cta .btn{flex:1 1 100%}}
@media (prefers-reduced-motion: reduce){
  .hero::before,.hero *,.hero *::after{animation:none!important}
}

/* ---------- service index (replaces the old ticker) ---------- */
.svc-index{position:relative;border-block:1px solid var(--line);background:rgba(22,23,26,.5)}
.svc-index ol{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.svc-index li{position:relative}
.svc-index li+li::before{content:"";position:absolute;left:0;top:50%;width:5px;height:12px;margin-top:-6px;background:var(--line-strong);clip-path:polygon(0 30%,100% 0,100% 100%,0 100%);transition:background .5s var(--ease-out)}
.svc-index a{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:30px 0 30px clamp(18px,2vw,30px);overflow:hidden;isolation:isolate}
.svc-index li:first-child a{padding-left:0}
.svc-index .n{font-size:10px;font-weight:600;letter-spacing:.2em;color:var(--text-secondary);transition:color .5s var(--ease-out)}
.svc-index .t{font-family:var(--f-display);font-weight:500;font-size:clamp(1.15rem,1.55vw,1.5rem);line-height:1.15;color:var(--text);transition:color .5s var(--ease-out),transform .6s var(--ease-out)}
/* a warm floor-light under the hovered service, and a hairline that draws beneath it */
.svc-index a::before{content:"";position:absolute;z-index:-1;left:-10%;right:-10%;bottom:-60%;height:120%;background:radial-gradient(closest-side,rgba(212,163,115,.16),rgba(212,163,115,0));opacity:0;transform:translateY(20%);transition:opacity .7s var(--ease-out),transform .9s var(--ease-out)}
.svc-index a::after{content:"";position:absolute;left:clamp(18px,2vw,30px);right:24px;bottom:22px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease-out)}
.svc-index li:first-child a::after{left:0}
.svc-index a:hover::before,.svc-index a:focus-visible::before{opacity:1;transform:none}
.svc-index a:hover::after,.svc-index a:focus-visible::after{transform:scaleX(1)}
.svc-index a:hover .t,.svc-index a:focus-visible .t{color:var(--text-primary);transform:translateY(-2px)}
.svc-index a:hover .n,.svc-index a:focus-visible .n{color:var(--accent)}
.svc-index li:hover+li::before,.svc-index li:hover::before{background:var(--accent)}
/* entrance: the five settle in, left to right */
.svc-index li{opacity:0;transform:translateY(14px);transition:opacity .9s var(--ease-out),transform 1s var(--ease-out)}
.svc-index.in li{opacity:1;transform:none}
.svc-index.in li:nth-child(2){transition-delay:.08s}.svc-index.in li:nth-child(3){transition-delay:.16s}.svc-index.in li:nth-child(4){transition-delay:.24s}.svc-index.in li:nth-child(5){transition-delay:.32s}
.svc-index.in.settled li{transition-delay:0s!important}
/* arriving from the index: the chosen service row gets one sweep of light */
.course.arrive::before{animation:arrive 1.8s var(--ease-io) .2s both}
@keyframes arrive{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@media (max-width:900px){
  .svc-index ol{grid-template-columns:1fr 1fr;column-gap:24px;padding:8px var(--gutter)}
  .svc-index li+li::before{display:none}
  .svc-index a,.svc-index li:first-child a{padding:18px 0}
  .svc-index a::after,.svc-index li:first-child a::after{left:0;bottom:12px}
  .svc-index li:last-child{grid-column:1/-1}
}
@media (prefers-reduced-motion: reduce){.svc-index li{opacity:1;transform:none}}
.index-row{max-width:var(--maxw);margin:0 auto;padding:22px var(--gutter);display:flex;align-items:center;gap:24px;font-family:var(--f-label);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--text-secondary)}
.index-row i{flex:1;height:1px;background:var(--line)}

/* ---------- sections, shared ---------- */
main{display:block}
section{position:relative}
.pad{padding:clamp(96px,12vw,170px) 0}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px 48px;flex-wrap:wrap}
.head h2{margin-top:28px}
.eyebrow{display:flex;align-items:center;gap:16px}
.eyebrow .hl{display:block;width:56px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease-out) .15s}
.in .eyebrow .hl{transform:scaleX(1)}
h2.display{font-family:var(--f-display);font-weight:500;color:var(--text-primary);font-size:clamp(2.4rem,4.6vw,4.4rem);line-height:1.04;letter-spacing:.005em}
h2.display.huge{font-size:clamp(3.4rem,8vw,7.6rem);line-height:.96}
.lede{font-size:clamp(1rem,.94rem + .25vw,1.12rem);color:var(--text);max-width:52ch}
.muted{color:var(--text-secondary)}
.text-link{display:inline-flex;gap:10px;align-items:baseline;padding-bottom:4px;font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--text);border-bottom:1px solid var(--line-strong);transition:color .3s var(--ease-out),border-color .3s var(--ease-out)}
.text-link:hover{color:var(--text-primary);border-color:var(--accent)}
.text-link span{transition:transform .35s var(--ease-out)}
.text-link:hover span{transform:translateX(4px)}
/* reveal choreography */
[data-reveal] .rv{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease-out),transform 1.1s var(--ease-out);transition-delay:calc(var(--i,0)*110ms)}
[data-reveal].in .rv{opacity:1;transform:none}
[data-reveal].in.settled .rv{transition-delay:0s!important}
/* joint divider */
.joint{height:1px;max-width:var(--maxw);margin:0 auto;position:relative}
.joint::before{content:"";position:absolute;left:var(--gutter);right:var(--gutter);top:0;height:1px;background:linear-gradient(90deg,transparent,var(--line) 12%,var(--line) 88%,transparent)}
.joint svg{position:absolute;left:50%;top:-9px;translate:-50% 0;width:28px;height:18px}
/* photo parallax frames */
[data-parallax]{will-change:transform}

/* ---------- 01 foundation ---------- */
.problem .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(48px,7vw,120px);align-items:start}
.problem h2{max-width:14ch;margin-top:28px}
.problem .lede{margin-top:26px}
.problem .lede+.lede{margin-top:16px;color:var(--text-secondary)}
.problem .close{margin-top:40px;font-family:var(--f-display);font-size:clamp(1.4rem,2vw,1.8rem);color:var(--text-primary)}
.problem .text-link{margin-top:22px}
.plaques{display:grid;gap:14px;padding-top:64px}
.plaque{position:relative;padding:26px 28px 24px 30px;background:var(--panel);border:1px solid var(--line);font-family:var(--f-display);font-size:clamp(1.3rem,1.8vw,1.65rem);line-height:1.25;color:var(--text-primary)}
.plaque::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:2px;background:var(--line-strong)}
.plaque small{display:block;margin-top:10px;font-family:var(--f-label);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-secondary)}
.plaque:nth-child(2){margin-left:clamp(0px,4vw,56px)}
.plaque:nth-child(3){margin-left:clamp(0px,2vw,24px)}
.plaque:nth-child(4){margin-left:clamp(0px,6vw,84px)}
.live .plaque:first-child::before{animation:glint 6s var(--ease-io) infinite;animation-delay:-2s}
@keyframes glint{0%,100%{opacity:1}50%{opacity:.35}}

/* ---------- 02 services ---------- */
.services .head h2{max-width:16ch}
.courses{margin-top:clamp(56px,6vw,88px);border-top:1px solid var(--line)}
.course{position:relative;display:grid;grid-template-columns:64px 36px minmax(0,1.1fr) minmax(0,1fr) auto;column-gap:24px;align-items:baseline;padding:34px 0 32px;border-bottom:1px solid var(--line);overflow:hidden}
.course::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(212,163,115,0),rgba(212,163,115,.06) 50%,rgba(212,163,115,0));transform:translateX(-100%);transition:transform 1.2s var(--ease-out);pointer-events:none}
.course:hover::before{transform:translateX(100%)}
.course .num{font-family:var(--f-label);font-size:12px;color:var(--text-secondary)}
.course .ico{width:26px;height:26px;fill:none;stroke:var(--text-secondary);stroke-width:1.2;align-self:center;transition:stroke .4s var(--ease-out)}
.course:hover .ico,.course.open .ico{stroke:var(--accent)}
.course h3{font-family:var(--f-display);font-weight:500;font-size:clamp(1.6rem,2.6vw,2.4rem);line-height:1.1;color:var(--text-primary)}
.course>p{color:var(--text)}
.more-btn{display:inline-flex;align-items:center;gap:12px;justify-self:end;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--text);padding:8px 0;white-space:nowrap;transition:color .3s var(--ease-out)}
.more-btn:hover{color:var(--text-primary)}
.more-btn i{position:relative;width:12px;height:12px}
.more-btn i::before,.more-btn i::after{content:"";position:absolute;left:0;top:5.5px;width:12px;height:1px;background:currentColor;transition:transform .45s var(--ease-out)}
.more-btn i::after{transform:rotate(90deg)}
.more-btn[aria-expanded="true"] i::after{transform:rotate(0)}
.more{grid-column:3/-1;display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease-out)}
.course.open .more{grid-template-rows:1fr}
.more>div{overflow:hidden;min-height:0}
.more .kicker{display:block;padding-top:26px}
.more ul{margin-top:14px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 32px}
.more li{position:relative;padding-left:22px;color:var(--text);opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.more li::before{content:"";position:absolute;left:0;top:.8em;width:10px;height:1px;background:var(--accent)}
.course.open .more li{opacity:1;transform:none}
.course.open .more li:nth-child(2){transition-delay:.06s}.course.open .more li:nth-child(3){transition-delay:.12s}.course.open .more li:nth-child(4){transition-delay:.18s}.course.open .more li:nth-child(5){transition-delay:.24s}
.capabilities{margin-top:48px;display:flex;align-items:baseline;gap:20px 40px;flex-wrap:wrap}
.capabilities ul{display:flex;flex-wrap:wrap;gap:12px}
.capabilities li{padding:9px 16px;border:1px solid var(--line);background:rgba(22,23,26,.6);font-size:13px;color:var(--text)}
.live .courses .course:nth-child(1) .ico{animation:glint 7s var(--ease-io) infinite;animation-delay:-3s}

/* ---------- 03 work: three equal browser frames ---------- */
.work h2{max-width:12ch}
.work .edition{font-family:var(--f-label);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-secondary);text-align:right;line-height:2}
.cases{margin-top:clamp(48px,6vw,80px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.2vw,32px);align-items:start}
.case{display:flex;flex-direction:column}
.case .shot{position:relative;display:block;background:#121315;border:1px solid var(--line);border-radius:3px;overflow:hidden;box-shadow:0 30px 60px -40px rgba(0,0,0,.9);transition:border-color .6s var(--ease-out),box-shadow .8s var(--ease-out)}
.case .bar{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-bottom:1px solid var(--line);background:#141518}
.case .bar i{width:7px;height:7px;border-radius:50%;background:#3A3936;transition:background .5s var(--ease-out)}
.case .bar span{margin-left:10px;font-size:11px;letter-spacing:.04em;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.case .frame{position:relative;display:block;aspect-ratio:16/10;overflow:hidden}
.case .frame img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform 1.4s var(--ease-out)}
.case:hover .shot{border-color:rgba(212,163,115,.45);box-shadow:0 40px 80px -40px rgba(0,0,0,.95),0 0 0 1px rgba(212,163,115,.08)}
.case:hover .bar i:first-child{background:var(--accent)}
.case:hover .frame img{transform:scale(1.03)}
.case .meta{margin-top:22px}
.case .tag{font-family:var(--f-label);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-secondary)}
.case h3{font-family:var(--f-display);font-weight:500;font-size:clamp(1.5rem,2vw,1.9rem);line-height:1.15;color:var(--text-primary);margin-top:8px}
.case h3 a{background:linear-gradient(var(--accent),var(--accent)) left bottom/0 1px no-repeat;transition:background-size .5s var(--ease-out)}
.case h3 a:hover,.case:hover h3 a{background-size:100% 1px}
.case p{margin-top:8px;font-size:14.5px;color:var(--text);max-width:40ch}
.more-link{margin-top:48px}
@media (max-width:980px){.cases{grid-template-columns:1fr;gap:44px}.case .meta{margin-top:18px}}

/* ---------- 04 why kaldrin ---------- */
.why{background:linear-gradient(180deg,rgba(22,23,26,0),rgba(22,23,26,.7) 22%,rgba(22,23,26,.7) 78%,rgba(22,23,26,0))}
.why .grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(48px,7vw,120px);align-items:start}
.why-intro{position:sticky;top:calc(var(--nav-h) + 48px)}
.why h2{margin-top:28px}
.why .lede{margin-top:30px}
.why .text-link{margin-top:26px}
.draw-mark{margin-top:56px;width:64px;height:118px;overflow:visible}
.draw-mark path{fill:none;stroke:var(--accent);stroke-width:.5;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.4s var(--ease-io)}
.draw-mark path:nth-child(2){transition-delay:.35s}.draw-mark path:nth-child(3){transition-delay:.7s}
.why.in .draw-mark path{stroke-dashoffset:0}
.principles{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.principles li{position:relative;padding:clamp(28px,3vw,44px);border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-height:250px;display:flex;flex-direction:column}
.principles li::before{content:"";position:absolute;left:-1px;top:-1px;width:1px;height:0;background:var(--accent);transition:height 1s var(--ease-out)}
.principles li:hover::before{height:calc(100% + 1px)}
.principles .num{font-family:var(--f-display);font-size:3rem;line-height:1;color:var(--line-strong);transition:color .5s var(--ease-out)}
.principles li:hover .num{color:var(--accent)}
.principles h3{margin-top:auto;padding-top:34px;font-family:var(--f-display);font-weight:500;font-size:clamp(1.5rem,2vw,1.9rem);line-height:1.15;color:var(--text-primary)}
.principles p{margin-top:12px;font-size:14.5px;color:var(--text)}

/* ---------- 05 system demonstration ---------- */
.demo h2{max-width:20ch}
.notice{max-width:44ch;font-size:13.5px;color:var(--text-secondary)}
.notice em{font-style:normal;color:var(--text)}
.badge{display:inline-block;margin-right:10px;padding:4px 9px;border:1px solid var(--accent);font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);vertical-align:1px}
.demo-body{margin-top:clamp(48px,6vw,80px);display:grid;grid-template-columns:240px 1fr;border:1px solid var(--line);background:rgba(22,23,26,.7)}
.tabs{display:flex;flex-direction:column;border-right:1px solid var(--line);padding:10px 0}
.tab{position:relative;display:flex;align-items:baseline;gap:16px;padding:16px 26px;text-align:left;font-family:var(--f-display);font-size:1.35rem;color:var(--text-secondary);transition:color .3s var(--ease-out),background .3s var(--ease-out)}
.tab span{font-family:var(--f-label);font-size:10.5px;letter-spacing:.16em;color:var(--text-secondary)}
.tab::before{content:"";position:absolute;left:-1px;top:10px;bottom:10px;width:2px;background:var(--accent);transform:scaleY(0);transition:transform .45s var(--ease-out)}
.tab:hover{color:var(--text-primary)}
.tab[aria-selected="true"]{color:var(--text-primary);background:rgba(238,234,227,.03)}
.tab[aria-selected="true"]::before{transform:scaleY(1)}
.tab[aria-selected="true"] span{color:var(--accent)}
.panel{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,4vw,56px);padding:clamp(28px,4vw,56px);align-items:center;min-height:460px}
.panel.entering .info,.panel.entering .visual{animation:panel-in .7s var(--ease-out) both}
.panel.entering .visual{animation-delay:.08s}
@keyframes panel-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.panel:focus-visible{outline-offset:-4px}
.info h3{font-family:var(--f-display);font-weight:500;font-size:clamp(2rem,3vw,2.8rem);line-height:1.05;color:var(--text-primary)}
.info p{margin-top:16px;color:var(--text)}
.info ul{margin-top:22px;display:grid;gap:10px}
.info li{position:relative;padding-left:22px;font-size:14.5px;color:var(--text)}
.info li::before{content:"";position:absolute;left:0;top:.8em;width:10px;height:1px;background:var(--accent)}
/* mocks */
.mock{background:#121315;border:1px solid var(--line);padding:22px}
.mock-bar{display:flex;justify-content:space-between;padding-bottom:14px;margin-bottom:22px;border-bottom:1px solid var(--line);font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--text-secondary)}
.nl{width:40px;height:40px;fill:none;stroke:currentColor;stroke-width:3}
.logo-mock{display:grid;gap:18px}
.logo-mock .primary{display:flex;flex-direction:column;align-items:center;gap:8px;padding:30px;background:#0C0D0E;border:1px solid var(--line);color:var(--text-primary)}
.logo-mock .primary .nl{width:56px;height:56px;color:var(--accent)}
.logo-mock .primary b{font-family:var(--f-display);font-weight:500;font-size:2rem;letter-spacing:.06em}
.logo-mock .primary small{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--text-secondary)}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.tiles span{aspect-ratio:1.4;display:grid;place-items:center;background:#0C0D0E;border:1px solid var(--line);color:var(--text-primary)}
.tiles .light{background:#EEEAE3;color:#1F2A30}
.tiles b{font-family:var(--f-display);font-size:1.8rem;font-weight:500}
.swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.swatches span{font-size:11px;line-height:1.5;color:var(--text-secondary)}
.swatches i{display:block;aspect-ratio:1;background:var(--c);border:1px solid var(--line);margin-bottom:10px}
.type-spec{margin-top:22px;display:flex;align-items:center;gap:26px;padding-top:20px;border-top:1px solid var(--line)}
.aa{font-family:var(--f-display);font-size:4rem;line-height:1;color:var(--text-primary)}
.type-spec dl{display:grid;gap:8px}
.type-spec dl div{display:flex;gap:14px;align-items:baseline}
.type-spec dt{width:64px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-secondary)}
.type-spec dd{color:var(--text-primary)}
.browser{padding:0}
.chrome{display:flex;align-items:center;gap:6px;padding:12px 14px;border-bottom:1px solid var(--line)}
.chrome i{width:8px;height:8px;border-radius:50%;background:#33322F}
.chrome span{margin-left:12px;padding:3px 12px;background:#0C0D0E;font-size:11px;color:var(--text-secondary)}
.msite{background:#F1EDE6;color:#1F2A30;padding:16px 18px 18px}
.mnav{display:flex;align-items:center;gap:14px;font-size:11px}
.mnav b{font-family:var(--f-display);font-size:1.15rem;margin-right:auto}
.mbtn{padding:5px 10px;background:#1F2A30;color:#F1EDE6}
.mhero{padding:30px 0 22px}
.mk{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:#8F6A52}
.mh{margin-top:10px;font-family:var(--f-display);font-size:clamp(1.6rem,2.4vw,2.2rem);line-height:1.05}
.mcta{margin-top:16px;display:flex;gap:8px;font-size:10.5px}
.mcta span{padding:7px 12px;border:1px solid #1F2A30}
.mcta span:first-child{background:#1F2A30;color:#F1EDE6}
.mcards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mcards span,.pcards span{padding:12px;background:#E3DCD0;font-size:11px}
.phone{width:min(250px,80%);margin:0 auto;padding:12px;border-radius:30px;background:#0C0D0E;border:1px solid var(--line-strong)}
.phone .msite{border-radius:20px;min-height:420px;padding-top:22px}
.pmenu{display:grid;gap:4px;width:16px}
.pmenu i{height:1px;background:#1F2A30}
.pcards{display:grid;gap:8px}
.gfx{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:center}
.post{aspect-ratio:1;padding:22px;background:#1F2A30;color:#F1EDE6;display:flex;flex-direction:column}
.pk{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:#CFC6B8}
.ph{margin-top:auto;font-family:var(--f-display);font-size:clamp(1.8rem,2.6vw,2.4rem);line-height:1}
.pf{margin-top:14px;font-size:10px;color:#CFC6B8}
.bizcard{aspect-ratio:1.75;padding:18px;background:#F1EDE6;color:#1F2A30;display:flex;align-items:center;gap:14px;transform:rotate(-4deg);box-shadow:0 20px 40px rgba(0,0,0,.4)}
.bizcard .nl{color:#8F6A52;flex:none}
.bizcard p{font-size:10.5px;line-height:1.5}
.bizcard .bn{font-family:var(--f-display);font-size:1.3rem}
/* the hold, inside the Infrastructure tab */
.hold{margin-top:30px;display:flex;align-items:center;gap:20px}
.hold-btn{position:relative;width:88px;height:88px;border-radius:50%;border:1px solid rgba(238,234,227,.32);background:rgba(15,16,17,.6);display:grid;place-items:center;touch-action:none;-webkit-user-select:none;user-select:none;transition:border-color .4s var(--ease-out),transform .4s var(--ease-out)}
.hold-btn:hover{border-color:var(--text-primary)}
.hold-btn.holding{transform:scale(.96)}
.hold-btn svg.pr{position:absolute;inset:-1px;width:90px;height:90px;transform:rotate(-90deg)}
.hold-btn svg.pr circle{fill:none;stroke:var(--accent);stroke-width:2;stroke-dasharray:301.6;stroke-dashoffset:calc(301.6*(1 - var(--p,0)))}
.hold-btn .mk{width:17px;height:32px}
.hold-btn .mk path{fill:var(--text-primary)}
.hold-label{font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--text)}
.hold-label b{display:block;font-weight:400;color:var(--text-secondary);margin-top:6px;letter-spacing:.14em}
.rig .tower{height:130px;display:flex;align-items:flex-end;justify-content:center;gap:12px;border-bottom:1px solid var(--line);margin-bottom:18px}
.rig .fin{width:30px;background:linear-gradient(180deg,#3A3936,#24242A);transform-origin:50% 100%;transform:scaleY(calc(.16 + .84*var(--s,0)));opacity:calc(.5 + .5*var(--s,0));transition:background .8s var(--ease-out)}
.rig .fin:nth-child(1){height:86px;clip-path:polygon(0 18%,100% 0,100% 100%,0 100%);--s:clamp(0,var(--p,0)*3,1)}
.rig .fin:nth-child(2){height:126px;clip-path:polygon(0 0,100% 12%,100% 100%,0 100%);--s:clamp(0,(var(--p,0) - .333)*3,1)}
.rig .fin:nth-child(3){height:80px;clip-path:polygon(0 0,100% 16%,100% 100%,0 100%);--s:clamp(0,(var(--p,0) - .666)*3,1)}
.rig.done .fin{background:linear-gradient(180deg,#E2B98E,#8F6A52)}
.status li{display:grid;grid-template-columns:12px auto 1fr;gap:12px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.status li:last-child{border-bottom:0}
.status .dot{width:7px;height:7px;border-radius:50%;background:#3A3936;transition:background .5s var(--ease-out);align-self:center}
.status .val{justify-self:end;text-align:right;font-size:11.5px;color:var(--text-secondary);opacity:.55;transition:opacity .5s var(--ease-out),color .5s var(--ease-out)}
.rig.done .status .dot{background:var(--accent)}
.rig.done .status .val{opacity:1;color:var(--text-primary)}
.rig.done .status li:nth-child(1) *{transition-delay:.1s}
.rig.done .status li:nth-child(2) *{transition-delay:.35s}
.rig.done .status li:nth-child(3) *{transition-delay:.6s}
.rig.done .status li:nth-child(4) *{transition-delay:.85s}
.rig .online{margin-top:16px;font-family:var(--f-display);font-size:1.5rem;color:var(--text-primary);opacity:0;transform:translateY(8px);transition:opacity .8s var(--ease-out) 1.1s,transform .8s var(--ease-out) 1.1s}
.rig.done .online{opacity:1;transform:none}
.live .rig.done .status li:first-child .dot{animation:glint 4.5s var(--ease-io) infinite;animation-delay:-1s}

/* ---------- 06 process ---------- */
.process h2{max-width:14ch}
.path{position:relative;margin-top:clamp(56px,7vw,96px);display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(16px,2.4vw,36px)}
.path .rail{position:absolute;left:0;right:0;top:27px;height:1px;background:var(--line)}
.path .rail i{position:absolute;inset:0;background:var(--accent);transform-origin:left;transform:scaleX(var(--draw,0))}
.step{position:relative}
.step .glyph{position:relative;width:56px;height:56px;border:1px solid var(--line-strong);background:var(--canvas);display:grid;place-items:center;transition:border-color .6s var(--ease-out)}
.step.lit .glyph{border-color:var(--accent)}
.step .glyph svg{width:26px;height:26px;stroke:var(--text-primary);fill:none;stroke-width:1.2}
.step .n{display:block;margin-top:26px;font-family:var(--f-label);font-size:11px;color:var(--text-secondary);letter-spacing:.16em}
.step h3{font-family:var(--f-display);font-weight:500;font-size:clamp(1.6rem,2.2vw,2.1rem);color:var(--text-primary);margin-top:6px}
.step p{margin-top:10px;font-size:14.5px;color:var(--text)}
.live .step.lit:last-of-type .glyph{animation:glint 5s var(--ease-io) infinite;animation-delay:-2s}
/* plays once on entry (js/home.js): the rail draws, each step pops in as the line reaches it */
.path.armed .rail i{transition:transform 1.25s var(--ease-io) .1s}
.path.armed .step{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease-out),transform .6s var(--ease-out)}
.path.armed .step .glyph{transform:scale(.6);transition:transform .55s cubic-bezier(.34,1.56,.64,1),border-color .6s var(--ease-out)}
.path.armed .step.lit{opacity:1;transform:none}
.path.armed .step.lit .glyph{transform:none}

/* ---------- 07 care plans ---------- */
.plans h2{max-width:12ch}
.range{display:flex;flex-direction:column;align-items:flex-end;gap:8px;text-align:right}
.range b{font-family:var(--f-display);font-weight:500;font-size:clamp(2.6rem,4.4vw,4rem);line-height:1;color:var(--text-primary)}
.range>span{font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--text-secondary)}
.tplans{margin-top:clamp(48px,6vw,80px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.tplan{position:relative;display:flex;flex-direction:column;padding:clamp(26px,2.6vw,36px);background:var(--panel);border:1px solid var(--line);transition:border-color .5s var(--ease-out),transform .5s var(--ease-out)}
.tplan::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease-out)}
.tplan:hover{border-color:var(--line-strong);transform:translateY(-3px)}
.tplan:hover::before{transform:scaleX(1)}
.tname{font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--text-secondary)}
.tprice{margin-top:22px;display:flex;align-items:baseline;gap:8px}
.tprice b{font-family:var(--f-display);font-weight:500;font-size:3.4rem;line-height:1;color:var(--text-primary)}
.tprice span{font-size:12px;color:var(--text-secondary)}
.ttag{margin-top:14px;font-size:14px;color:var(--text);min-height:3.4em}
.tlist{margin:22px 0 28px;padding-top:20px;border-top:1px solid var(--line);display:grid;gap:9px}
.tlist li{position:relative;padding-left:20px;font-size:13.5px;color:var(--text)}
.tlist li::before{content:"";position:absolute;left:0;top:.8em;width:9px;height:1px;background:var(--accent)}
.tplan .text-link{margin-top:auto;align-self:flex-start}
.tplan.custom{background:linear-gradient(160deg,rgba(212,163,115,.12),rgba(22,23,26,.9) 55%);border-color:rgba(212,163,115,.35)}
.tplan.custom h3{margin-top:22px;font-family:var(--f-display);font-weight:500;font-size:2.2rem;line-height:1.05;color:var(--text-primary)}
.tplan.custom .ttag{min-height:0;margin-bottom:28px}
.tplan.custom .btn{margin-top:auto}
.included{margin-top:40px;display:flex;align-items:baseline;gap:16px 40px;flex-wrap:wrap}
.included ul{display:flex;flex-wrap:wrap;gap:10px}
.included li{padding:8px 14px;border:1px solid var(--line);font-size:13px;color:var(--text)}

/* ---------- 08 questions ---------- */
.faq .grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(40px,6vw,96px);align-items:start}
.faq .side{position:sticky;top:calc(var(--nav-h) + 40px)}
.faq h2{margin-top:28px;max-width:9ch}
.faq .side p{margin-top:24px}
.qa{border-top:1px solid var(--line)}
.qa details{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr 24px;gap:20px;align-items:baseline;padding:26px 0;font-family:var(--f-display);font-size:clamp(1.35rem,1.9vw,1.7rem);line-height:1.25;color:var(--text-primary);transition:color .3s var(--ease-out)}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:#fff}
.qa .pm{position:relative;width:14px;height:14px;justify-self:end}
.qa .pm::before,.qa .pm::after{content:"";position:absolute;left:0;top:6.5px;width:14px;height:1px;background:var(--text-primary);transition:transform .45s var(--ease-out)}
.qa .pm::after{transform:rotate(90deg)}
.qa details[open] .pm::after{transform:rotate(0deg)}
.qa .ans{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease-out)}
.qa details[open] .ans{grid-template-rows:1fr}
.qa .ans>div{overflow:hidden}
.qa .ans p{padding:0 40px 28px 0;color:var(--text);max-width:60ch}

/* ---------- 09 about ---------- */
.about .grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,96px);align-items:stretch}
.about figure{position:relative;overflow:hidden;border:1px solid var(--line);min-height:520px}
.about .pframe{position:absolute;inset:-8% 0}
.about .pframe img{width:100%;height:100%;object-fit:cover}
.about figure::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,16,17,0) 60%,rgba(15,16,17,.55))}
.about h2{margin-top:28px;max-width:13ch}
.about .lede{margin-top:26px}
.about .lede+.lede{margin-top:16px;color:var(--text-secondary)}
.founders{margin-top:44px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.founder{display:flex;align-items:center;gap:18px;padding:20px;background:var(--panel);border:1px solid var(--line)}
.mono,.founder .photo{position:relative;flex:none;width:58px;height:58px;display:grid;place-items:center;border:1px solid var(--line-strong);font-family:var(--f-display);font-size:28px;color:var(--text-primary);object-fit:cover}
.mono::after{content:"";position:absolute;inset:-1px;box-shadow:0 0 22px rgba(212,163,115,.35);opacity:0}
.live .founder .mono::after{animation:glow 6s var(--ease-io) infinite;animation-delay:-2.5s}
.live .founder:nth-child(2) .mono::after{animation-delay:-5.5s}
@keyframes glow{0%,100%{opacity:0}50%{opacity:1}}
.founder .who b{display:block;font-family:var(--f-display);font-weight:500;font-size:1.5rem;color:var(--text-primary);line-height:1.1}
.founder .role{display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-secondary)}
.founder .bio{display:block;margin-top:8px;font-size:13.5px;color:var(--text)}
.founder .bio:empty{display:none}

/* ---------- 10 contact ---------- */
.contact{overflow:hidden}
.contact .bg{position:absolute;inset:0;z-index:-1;overflow:hidden}
.contact .bg img{position:absolute;inset:-10% 0;width:100%;height:120%;object-fit:cover;opacity:.32}
.contact .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--canvas) 0%,rgba(15,16,17,.72) 30%,rgba(15,16,17,.86) 70%,var(--canvas) 100%)}
.contact .grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(40px,6vw,96px);align-items:start}
.contact h2{margin-top:28px;max-width:12ch}
.contact .lede{margin-top:26px}
.next{margin-top:40px;display:grid;gap:18px}
.next li{display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:baseline;color:var(--text)}
.next li span{font-size:11px;color:var(--accent)}
form{position:relative;padding:clamp(28px,3.4vw,48px);background:rgba(22,23,26,.86);border:1px solid var(--line);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.summary{margin-bottom:24px;padding:18px 20px;border:1px solid var(--error);background:rgba(230,179,162,.06);font-size:14px;color:var(--text-primary)}
.summary p{font-weight:600}
.summary ul{margin-top:8px;display:grid;gap:4px}
.summary a{color:var(--error);border-bottom:1px solid rgba(230,179,162,.4)}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field{display:flex;flex-direction:column;gap:9px}
.field.full{grid-column:1/-1}
.field label{font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--text)}
.field label span{color:var(--accent)}
.field input,.field select,.field textarea{width:100%;background:rgba(15,16,17,.7);border:1px solid #5F5B55;border-radius:1px;padding:14px 15px;font-size:15px;color:var(--text-primary);transition:border-color .3s var(--ease-out),background .3s var(--ease-out)}
.field select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--text) 50%),linear-gradient(135deg,var(--text) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:40px}
.field select option{background:#16171A}
.field textarea{min-height:140px;resize:vertical}
.field input:hover,.field select:hover,.field textarea:hover{border-color:#8A857D}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);background:rgba(15,16,17,.92)}
.field [aria-invalid="true"]{border-color:var(--error)}
.hint{font-size:12.5px;color:var(--text-secondary)}
.err{font-size:12.5px;color:var(--error)}
.err:empty{display:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-foot{margin-top:26px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.form-foot small{font-size:12.5px;color:var(--text-secondary);max-width:38ch}
.form-foot small a{color:var(--text);border-bottom:1px solid var(--line-strong);transition:color .3s var(--ease-out),border-color .3s var(--ease-out)}
.form-foot small a:hover{color:var(--text-primary);border-color:var(--accent)}
.form-msg{margin-top:16px;font-size:14px;color:var(--error)}
.form-msg:empty{display:none}
.thanks{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:clamp(28px,3.4vw,48px);background:rgba(22,23,26,.97);opacity:0;visibility:hidden;transition:opacity .7s var(--ease-out),visibility .7s}
form.sent .thanks{opacity:1;visibility:visible}
.thanks h3{font-family:var(--f-display);font-weight:500;font-size:clamp(2rem,3vw,2.8rem);color:var(--text-primary);line-height:1.1;margin-top:20px}
.thanks p{margin-top:16px;color:var(--text);max-width:40ch}

/* ---------- closing ---------- */
.closing{position:relative;overflow:hidden;min-height:min(86vh,820px);display:flex;align-items:flex-end;padding:clamp(80px,10vw,140px) 0 clamp(56px,7vw,96px)}
.cbg{position:absolute;inset:0;z-index:-1;overflow:hidden}
.cbg img{position:absolute;inset:-10% 0;width:100%;height:120%;object-fit:cover;object-position:center 40%}
.cbg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--canvas) 0%,rgba(15,16,17,.25) 30%,rgba(15,16,17,.4) 60%,rgba(15,16,17,.92) 100%)}
.cin{width:100%;display:flex;justify-content:space-between;align-items:flex-end;gap:32px 64px;flex-wrap:wrap}
.closing h2{max-width:9ch;text-shadow:var(--tshadow)}
.cside{display:grid;gap:22px;justify-items:start;padding-bottom:12px}
.cside p{font-size:10.5px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--text)}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .tplans{grid-template-columns:repeat(2,minmax(0,1fr))}
  .demo-body{grid-template-columns:1fr}
  .tabs{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line);padding:0 10px;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tab{flex:none;padding:16px 18px;font-size:1.15rem}
  .tab::before{left:12px;right:12px;top:auto;bottom:-1px;width:auto;height:2px;transform:scaleX(0)}
  .tab[aria-selected="true"]::before{transform:scaleX(1)}
}
@media (max-width:980px){
  .problem .grid,.faq .grid,.about .grid,.contact .grid,.why .grid{grid-template-columns:1fr}
  .plaques{padding-top:0}
  .faq .side,.why-intro{position:static}
  .path{grid-template-columns:1fr;gap:34px}
  .path .rail{left:27px;right:auto;top:0;bottom:0;width:1px;height:auto}
  .path .rail i{transform-origin:top;transform:scaleY(var(--draw,0))}
  .step{display:grid;grid-template-columns:56px 1fr;column-gap:24px}
  .step .glyph{grid-row:1/4}
  .step .n{margin-top:0}
  .about figure{min-height:380px}
  .panel{grid-template-columns:1fr}
  .range{align-items:flex-start;text-align:left}
  .draw-mark{display:none}
}
@media (max-width:640px){
  .course{grid-template-columns:36px 1fr auto;column-gap:14px;row-gap:8px}
  .course .ico{display:none}
  .course>p{grid-column:2/-1}
  .course h3{grid-column:2}
  .course .more-btn{grid-row:1;grid-column:3}
  .more{grid-column:2/-1}
  .more ul{grid-template-columns:1fr}
  .fgrid,.founders,.tplans,.principles{grid-template-columns:1fr}
  .work .head{display:block}
  .work .edition{text-align:left;margin-top:16px}
  .plaque:nth-child(n){margin-left:0}
  .principles li{min-height:0}
  .gfx{grid-template-columns:1fr}
  .swatches{grid-template-columns:repeat(2,1fr)}
}
@media (pointer:coarse){.btn{min-height:44px}.more-btn,.tab{min-height:44px;display:inline-flex;align-items:center}}

/* ---------- checkup form (inside 04 Local SEO) ---------- */
.cb-form{display:flex;gap:10px;padding:0;background:none;border:0;backdrop-filter:none;-webkit-backdrop-filter:none}
.cb-form input{flex:1;min-width:0;min-height:52px;background:rgba(15,16,17,.7);border:1px solid #5F5B55;padding:0 16px;font-size:16px;color:var(--text-primary);transition:border-color .3s var(--ease-out)}
.cb-form input:focus{outline:none;border-color:var(--accent)}
.cb-form .btn{flex:none}

/* ---------- book a call (inside the contact form) ---------- */
.book{border:1px solid var(--line);background:rgba(22,23,26,.6);padding:18px 18px 16px;margin:0;min-width:0}
.book legend{padding:0 8px;margin-left:-8px;font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--text)}
.book legend span{color:var(--text-secondary);letter-spacing:.1em;text-transform:none}
.book .hint{margin-top:-2px}
.book-days{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;margin-top:4px}
.book-days::-webkit-scrollbar{display:none}
.book-days button,.book-times button{background:none;border:1px solid #4A4844;color:var(--text);cursor:pointer;transition:border-color .3s var(--ease-out),background-color .3s var(--ease-out),color .3s var(--ease-out),transform .3s var(--ease-out)}
.book-days button{flex:none;width:64px;padding:10px 0 9px;display:grid;justify-items:center;gap:3px}
.book-days small,.book-times small{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-secondary)}
.book-days b{font-family:var(--f-display);font-weight:500;font-size:1.5rem;line-height:1;color:var(--text-primary)}
.book-times{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:10px}
.book-times button{padding:11px 8px;display:grid;gap:3px;text-align:center;font-size:13px}
.book-times b{font-weight:600}
.book-days button:hover,.book-times button:hover{border-color:#8A857D}
.book [aria-checked="true"]{border-color:var(--accent);background:rgba(212,163,115,.1);color:var(--text-primary)}
.book [aria-checked="true"] small{color:var(--accent)}
.book-days{-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent);padding-right:24px}
.book-pick{min-height:1.3em;margin-top:12px;font-size:13.5px;color:var(--accent)}
.book-pick button{margin-left:10px;background:none;border:0;padding:0;font:inherit;font-size:12px;color:var(--text-secondary);text-decoration:underline;cursor:pointer}
@media (max-width:620px){.book-times{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- 03 AI receptionist + 04 Local SEO: the two "pillar" sections ---------- */
.pillar{border-top:1px solid var(--line)}
.pillar .head h2{max-width:15ch}
.pillar-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(36px,5vw,80px);align-items:start;margin-top:clamp(40px,5vw,64px)}
.pillar-h{font-family:var(--f-label);font-size:10.5px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--text-secondary)}
.ticks{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:22px 32px}
.ticks li{position:relative;padding-left:22px;font-size:14.5px;line-height:1.6;color:var(--text)}
.ticks li::before{content:"";position:absolute;left:0;top:.7em;width:10px;height:1px;background:var(--accent)}
.ticks b{display:block;color:var(--text-primary);font-weight:600;margin-bottom:2px}
.who{margin-top:32px;padding-top:22px;border-top:1px solid var(--line);font-size:14.5px;color:var(--text);max-width:60ch}
.who b{color:var(--text-primary);font-weight:600}

/* call → text summary card */
.callcard{margin:0;background:var(--panel);border:1px solid var(--line);padding:22px}
.cc-call{display:flex;gap:14px;align-items:center}
.cc-call b{display:block;font-size:14px;font-weight:600;color:var(--text-primary)}
.cc-call small{display:block;margin-top:3px;font-size:12.5px;color:var(--text-secondary)}
.cc-ring{flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--accent);position:relative}
.cc-ring svg{width:18px;height:18px;fill:none;stroke:var(--accent);stroke-width:1.5;stroke-linejoin:round}
.cc-ring::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid var(--accent);opacity:0}
.in .cc-ring::after{animation:cc-ping 2.4s var(--ease-out) .6s 2}
@keyframes cc-ping{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.7)}}
.cc-line{height:34px;margin-left:20px;width:1px;background:var(--line);position:relative;overflow:hidden}
.cc-line i{position:absolute;inset:0;background:var(--accent);transform:scaleY(0);transform-origin:top;transition:transform .7s var(--ease-io) .9s}
.in .cc-line i{transform:none}
.cc-text{margin-left:0;background:rgba(212,163,115,.06);border:1px solid var(--accent-muted);padding:14px 16px;opacity:0;transform:translateY(8px);transition:opacity .6s var(--ease-out) 1.4s,transform .6s var(--ease-out) 1.4s}
.in .cc-text{opacity:1;transform:none}
.cc-from{font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.cc-msg{margin-top:8px;font-size:14px;line-height:1.6;color:var(--text)}
.cc-msg b{color:var(--text-primary);font-weight:600}
.callcard figcaption{margin-top:14px;font-size:11.5px;color:var(--text-secondary)}

/* 3 steps */
.steps3{list-style:none;margin:clamp(48px,6vw,80px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 28px;border-top:1px solid var(--line)}
.steps3 li{padding-top:22px;font-size:14.5px;line-height:1.6;color:var(--text)}
.steps3 span{display:block;font-family:var(--f-label);font-size:11px;letter-spacing:.16em;color:var(--accent);margin-bottom:12px}
.steps3 b{display:block;font-family:var(--f-display);font-weight:500;font-size:1.5rem;line-height:1.2;color:var(--text-primary);margin-bottom:6px}
.pillar-cta{margin-top:clamp(36px,4vw,52px);display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}
.pillar-cta p{font-size:13.5px;color:var(--text-secondary);max-width:40ch}

/* SEO cards + pay-for-results */
.seo-cards{list-style:none;margin:clamp(40px,5vw,64px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.seo-cards li{background:var(--panel);border:1px solid var(--line);padding:22px 20px 24px}
.seo-cards .n{display:block;font-family:var(--f-label);font-size:11px;letter-spacing:.16em;color:var(--accent)}
.seo-cards b{display:block;margin-top:14px;font-family:var(--f-display);font-weight:500;font-size:1.45rem;line-height:1.2;color:var(--text-primary)}
.seo-cards p{margin-top:8px;font-size:14px;line-height:1.6;color:var(--text)}
.payfor{margin-top:clamp(28px,3vw,40px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border:1px solid var(--accent-muted);background:linear-gradient(90deg,rgba(212,163,115,.06),transparent 70%)}
.payfor-lead,.payfor-start{padding:clamp(24px,3vw,40px)}
.payfor-start{border-left:1px solid var(--line)}
.payfor h3{margin-top:14px;font-family:var(--f-display);font-weight:500;font-size:clamp(1.8rem,1.3rem + 1.6vw,2.6rem);line-height:1.08;color:var(--text-primary)}
.payfor h4{margin-top:12px;font-family:var(--f-display);font-weight:500;font-size:1.5rem;color:var(--text-primary)}
.payfor p:not(.kicker){margin-top:12px;font-size:14.5px;line-height:1.6;color:var(--text);max-width:48ch}
.payfor .cb-form{margin-top:18px}
.payfor .text-link{display:inline-block;margin-top:16px}
.course .more .text-link{display:inline-block;margin-top:14px}
@media (max-width:1100px){.seo-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:899px){.pillar-grid,.payfor{grid-template-columns:1fr}.payfor-start{border-left:0;border-top:1px solid var(--line)}.steps3{grid-template-columns:1fr;gap:0}.steps3 li{padding-bottom:18px}}
@media (max-width:620px){.ticks,.seo-cards{grid-template-columns:1fr}.cb-form{flex-direction:column}}
@media (prefers-reduced-motion:reduce){.cc-line i,.cc-text{transition:none;transform:none;opacity:1}.in .cc-ring::after{animation:none}}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important}
  [data-reveal] .rv{opacity:1!important;transform:none!important}
  .eyebrow .hl{transform:none!important}
  .draw-mark path{stroke-dashoffset:0!important}
  .more li{opacity:1!important;transform:none!important}
}

/* ---------- polish ---------- */
/* The custom plan's button fills its card so the label never wraps */
.tplan.custom .btn{width:100%;justify-content:space-between;padding:14px 18px;letter-spacing:.16em}
/* The services "sunlight" sweep, carried to the question rows and the demo tabs */
.qa details{position:relative;overflow:hidden}
.qa details::before,.tab::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(212,163,115,0),rgba(212,163,115,.06) 50%,rgba(212,163,115,0));transform:translateX(-100%);transition:transform 1.2s var(--ease-out)}
.qa details:hover::before,.tab:hover::after{transform:translateX(100%)}
.tab{overflow:hidden}
@media (prefers-reduced-motion: reduce){.qa details::before,.tab::after{display:none}}

/* Care plans: SEO pitch, featured plan, changes note */
.seo-pitch{margin-top:clamp(40px,5vw,64px);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:start;padding:clamp(26px,3vw,40px);background:linear-gradient(160deg,rgba(212,163,115,.10),var(--panel) 55%);border:1px solid rgba(212,163,115,.3)}
.seo-pitch h3{margin-top:10px;font-family:var(--f-display);font-weight:500;font-size:clamp(2rem,3.2vw,2.8rem);line-height:1.02;color:var(--text-primary)}
.seo-pitch__lead p:last-child{margin-top:14px;max-width:48ch;font-size:15px;line-height:1.7;color:var(--text-secondary)}
.seo-pitch__points{display:grid;gap:0;border-top:1px solid var(--line)}
.seo-pitch__points li{display:grid;gap:3px;padding:14px 0;border-bottom:1px solid var(--line)}
.seo-pitch__points b{font-weight:500;font-size:14px;color:var(--text-primary)}
.seo-pitch__points span{font-size:13px;color:var(--text-secondary)}
.seo-pitch__link{grid-column:2;justify-self:start}
.tplans{margin-top:clamp(40px,5vw,64px)}
.tplan.featured{border-color:rgba(212,163,115,.45);background:linear-gradient(180deg,rgba(212,163,115,.08),var(--panel) 45%)}
.tplan.featured::before{transform:scaleX(1)}
.tbadge{position:absolute;top:-11px;left:clamp(26px,2.6vw,36px);padding:3px 10px;font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#0a0a0a;background:var(--accent)}
.tlist li.spec{color:var(--text-primary);font-weight:500}
.tlist li.none{color:var(--text-secondary);opacity:.6;text-decoration:line-through}
.tspec{display:inline-block;margin-left:8px;padding:1px 6px;vertical-align:1px;font-size:9px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);border:1px solid currentColor}
.changes-note{margin-top:28px;max-width:72ch;font-size:14px;line-height:1.7;color:var(--text-secondary)}
.changes-note b{font-weight:500;color:var(--text-primary)}
@media (max-width:899px){.seo-pitch{grid-template-columns:1fr}.seo-pitch__link{grid-column:auto}}
.tplan:not(.featured) .tbadge{color:var(--text-primary);background:transparent;border:1px solid var(--line-strong)}


/* ---------- hero film (2026-11 redo): replaces the CSS pillars ---------- */
.hero .hero-floor,.hero .rise{display:none}
.hero::before{display:none}
.hero{background:#0B0C0D}
.hero-film{position:absolute;inset:0;z-index:-1;overflow:hidden}
.hero-film video{width:100%;height:100%;object-fit:cover;object-position:72% 50%;display:block}
/* keep the left side calm so the copy reads, without putting shadows on the text */
.hero-film::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(11,12,13,.85) 0%,rgba(11,12,13,.55) 30%,rgba(11,12,13,0) 55%)}
@media (min-width:700px) and (orientation:landscape){
  .hero-copy{top:50%}
}
@media (max-width:699px), (orientation:portrait){
  .hero{justify-content:flex-end;padding-bottom:64px}
  .hero-film video{object-position:50% 20%;height:72%}
  .hero-film::after{background:linear-gradient(180deg,rgba(11,12,13,0) 38%,rgba(11,12,13,.92) 70%,#0B0C0D 100%)}
  .hero-copy{margin-top:0}
}


/* ---------- About (2026-11): copy on the left, two big founder portraits side by side ---------- */
.about .grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
.about .founders{margin-top:0;grid-template-columns:1fr 1fr;gap:16px}
.about .founder{flex-direction:column;align-items:stretch;gap:16px;padding:14px 14px 18px}
.about .founder .mono,.about .founder .photo{width:100%;height:auto;aspect-ratio:4/5;font-size:clamp(56px,6vw,96px);background:radial-gradient(ellipse 70% 60% at 50% 40%,rgba(212,163,115,.08),transparent 70%)}
.about .founder .who{padding:0 4px}
@media (max-width:899px){.about .grid{grid-template-columns:1fr}.about .founders{margin-top:36px}}


/* ---------- psychology pass (2026-11) ---------- */
.hero .btn-line .sm{opacity:.6;font-size:.85em;margin-left:2px}
.promise-strip{margin:0;padding:16px var(--gutter);display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#0E0F10;font-size:14px;letter-spacing:.02em;color:var(--text)}
.promise-strip a{color:#D4A373;text-decoration:none;font-family:var(--f-label);font-size:11px;letter-spacing:.2em;text-transform:uppercase;align-self:center}
.promise-strip a:hover{text-decoration:underline}