/* replicates the Artifact host's wrapper reset — nothing else changed */
    :root { color-scheme: light; }
    body { margin: 0; font: 14px system-ui, -apple-system, "Segoe UI", sans-serif; background: #FBFAF9; }
    img { max-width: 100%; }
    [hidden] { display: none !important; }

/* ═══ tokens ═══════════════════════════════════════════════ */
:root{
  /* ── Refit8 palette · values read off refit8.io (see Refit8-Design-System.md) ── */
  --paper:#FBFAF9;  --paper-2:#FFFFFF;  --paper-3:#F0F0F0;   /* [SITE] section / card / recessed */
  --line:#EBEBEB;   --line-soft:#F4F4F4;                     /* [SITE] ramp — Refit8 uses fills, not borders */
  --ink:#1B1B1B;    --ink-2:#404040;    --ink-3:#7F7F7F;     /* 17.22 / 10.37 / 4.00 (large text only) */
  --accent:#EF7416;                                          /* [SITE] THE accent — fills only */
  --accent-2:#DE6C14; --accent-3:#D26613;                    /* [DERIVED] hover / pressed */
  --accent-ink:#FFFFFF;                                      /* label ON accent — 2.92:1, client direction, matches refit8.io */
  --accent-text:#EF7416;                                     /* accent AS TEXT — 2.81:1 light / 6.69:1 dark, client direction */
  --accent-wash:#FDEEE3;                                     /* [DERIVED] chip fill */
  --notice:#FFF4DC; --notice-ink:#7A5309;                    /* [SITE] cream + [DERIVED] ink — 6.26:1 */
  --danger:#8E1D12;                                          /* [DERIVED] destructive only — 3.08 vs accent */
  --mark:#23225F;                                            /* logo lines + start dot — Refit8 navy */
  --mark-dot:#EF7416;                                        /* logo end dot — Refit8 orange */
  --ttl:rgba(27,27,27,.20);
  /* elevation — [SITE] one level, 7% black, 2px/2px offset */
  --shadow:rgba(0,0,0,.07) 2px 2px 15px 0px;
  --shadow-pill:rgba(0,0,0,.07) 2px 2px 15px 0px;
  /* type — [SITE] Geist + Chivo Mono, weight 400, 500 on button labels only */
  --display:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --body:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Chivo Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --maxw:1320px; --gut:24px;
  --ease:cubic-bezier(.2,.7,.3,1);
  /* fixed ink bands — identical in both themes */
  --dk:#0C0C0C; --dk-2:#1B1B1B; --dk-line:rgba(251,250,249,.14); --dk-ink:#FBFAF9; --dk-ink-2:rgba(251,250,249,.6);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0C0C0C; --paper-2:#1B1B1B; --paper-3:#070707;    /* separation 1.14:1 — matches the 1.12 rule */
    --line:#2E2E2E; --line-soft:#232323;
    --ink:#FBFAF9; --ink-2:#B4B2AE; --ink-3:#8C8A86;          /* 18.76 / 9.24 / 5.68 — faint now clears AA */
    --accent:#EF7416;                                         /* 6.69:1 on ground — no dark variant needed */
    --accent-2:#F68A33; --accent-3:#DE6C14;
    --accent-ink:#FFFFFF; --accent-text:#EF7416;
    --accent-wash:#2C1B0D;
    --notice:#2C2313; --notice-ink:#E0B562;
    --danger:#F08E80;
    --mark:#FBFAF9;  /* navy is 1.37:1 on the dark ground — the mark reverses */
    --mark-dot:#EF7416;
    --ttl:rgba(251,250,249,.17);
    --shadow:rgba(0,0,0,.5) 2px 2px 18px 0px;
    --shadow-pill:rgba(0,0,0,.5) 2px 2px 18px 0px;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#0C0C0C; --paper-2:#1B1B1B; --paper-3:#070707;
  --line:#2E2E2E; --line-soft:#232323;
  --ink:#FBFAF9; --ink-2:#B4B2AE; --ink-3:#8C8A86;
  --accent:#EF7416; --accent-2:#F68A33; --accent-3:#DE6C14;
  --accent-ink:#FFFFFF; --accent-text:#EF7416;
  --accent-wash:#2C1B0D;
  --notice:#2C2313; --notice-ink:#E0B562;
  --danger:#F08E80;
  --mark:#FBFAF9;  /* navy is 1.37:1 on the dark ground — the mark reverses */
  --mark-dot:#EF7416;
  --ttl:rgba(251,250,249,.17);
  --shadow:rgba(0,0,0,.5) 2px 2px 18px 0px;
  --shadow-pill:rgba(0,0,0,.5) 2px 2px 18px 0px;
  color-scheme:dark;
}

/* ═══ base ═════════════════════════════════════════════════ */
*{box-sizing:border-box;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:400 16px/1.6 var(--body); -webkit-font-smoothing:antialiased;
  overflow-x:hidden; transition:background .2s var(--ease), color .25s var(--ease);
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
button{font:inherit; color:inherit; cursor:pointer; border:0; background:none;}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px;}
h1,h2,h3,h4,h5{margin:0; font-family:var(--display); font-weight:500; text-wrap:balance;}
p{margin:0;}
ul{margin:0; padding:0; list-style:none;}
.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:var(--gut);}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);}

/* grain */
.grain{position:fixed; inset:0; z-index:90; pointer-events:none; opacity:.04; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");}
:root[data-theme="dark"] .grain{mix-blend-mode:screen; opacity:.055;}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .grain{mix-blend-mode:screen; opacity:.055;}}

/* ═══ atoms ════════════════════════════════════════════════ */
.mono{font:400 12px/1.5 var(--mono); letter-spacing:.075em; text-transform:uppercase; color:var(--ink-3);}
.mono-code{font:400 12px/1 var(--mono); letter-spacing:.075em; color:var(--ink-3); opacity:.7;}

/* square accent icon button — the template's signature control */
.sq{
  width:52px; height:52px; border-radius:12px; background:var(--accent); color:var(--accent-ink);
  display:grid; place-items:center; flex-shrink:0;
  transition:background .2s var(--ease), transform .25s var(--ease);
}
.sq svg{width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s var(--ease);}
.sq:hover{background:var(--accent-2); transform:translateY(-2px);}
.sq:hover svg{transform:translate(3px,-3px);}
.sq-sm{width:40px; height:40px; border-radius:12px;}
.sq-sm svg{width:15px; height:15px;}
.sq-ghost{background:transparent; color:var(--ink); border:1px solid var(--line);}
.sq-ghost:hover{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}

.pill{
  display:inline-flex; align-items:center; gap:9px; padding:13px 20px; border-radius:99px;
  background:var(--accent); color:var(--accent-ink); font:500 14px/1 var(--body);
  transition:background .2s var(--ease), transform .25s var(--ease);
}
.pill svg{width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s var(--ease);}
.pill:hover{background:var(--accent-2); transform:translateY(-2px);}
.pill:hover svg{transform:translateX(4px);}
.pill-ghost{background:transparent; color:var(--ink); border:1px solid var(--line);}
.pill-ghost:hover{background:var(--paper-2); color:var(--ink);}
.pill-lg{padding:16px 26px; font-size:15.5px;}

/* ═══ nav ══════════════════════════════════════════════════ */
.nav{position:fixed; inset:0 0 auto; z-index:80; transition:background .2s var(--ease), border-color .25s;
  border-bottom:1px solid transparent;}
.nav.stuck{background:color-mix(in srgb, var(--paper) 85%, transparent); backdrop-filter:blur(16px) saturate(1.4); border-bottom-color:var(--line);}
.nav-in{max-width:var(--maxw); margin:0 auto; padding:15px var(--gut); display:flex; align-items:center; gap:22px;}
.brand{display:flex; align-items:center; gap:10px; margin-right:auto; min-width:0;}
.brand svg{width:20px; height:auto; flex-shrink:0; color:var(--mark);}
.mk-dot{fill:var(--mark-dot);}
.brand-name{font:500 18px/1 var(--display); letter-spacing:-.05em; white-space:nowrap;}
.brand-name i{font-style:normal; color:var(--accent-text);}
.brand-by{font:400 12px/1 var(--mono); letter-spacing:.075em; color:var(--ink-3); border-left:1px solid var(--line); padding-left:10px; white-space:nowrap;}
@media (max-width:760px){.brand-by{display:none;}}
.nav-links{display:none; gap:24px;}
@media (min-width:1000px){.nav-links{display:flex;}}
.nav-links a{font:500 12.5px/1 var(--body); color:var(--ink-2); position:relative; padding-bottom:3px; transition:color .2s;}
.nav-links a::after{content:''; position:absolute; inset:auto 0 0; height:1.5px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .2s var(--ease);}
.nav-links a:hover{color:var(--ink);} .nav-links a:hover::after{transform:scaleX(1);}
.nav-right{display:flex; align-items:center; gap:10px;}
.toggle{width:54px; height:29px; border-radius:99px; border:1px solid var(--line); background:var(--paper-2); position:relative; padding:0; flex-shrink:0; transition:border-color .2s, background .25s;}
.toggle-knob{position:absolute; top:3px; left:3px; width:21px; height:21px; border-radius:99px; background:var(--ink); display:grid; place-items:center; transition:transform .2s var(--ease), background .25s;}
:root[data-theme="dark"] .toggle-knob{transform:translateX(25px); background:var(--accent);}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .toggle-knob{transform:translateX(25px); background:var(--accent);}}
.toggle-knob svg{width:11px; height:11px; stroke:var(--paper); fill:none; stroke-width:2; stroke-linecap:round;}
@media (max-width:620px){.nav .pill{display:none;}}

/* ═══ HERO OPTIONS A / B ═══════════════════════════════════ */
@keyframes fade{from{opacity:0; transform:translateY(18px);} to{opacity:1; transform:none;}}
@keyframes rise{to{transform:translateY(0);}}

/* local theme tokens (3-state) */
.hA,.hB{--warm:#FBFAF9; --washA:rgba(27,27,27,.035); --washB:rgba(27,27,27,.02); --bez:#1B1B1B;}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hA,:root:not([data-theme="light"]) .hB{--warm:#0C0C0C; --washA:rgba(244,242,238,.04); --washB:rgba(244,242,238,.02);}}
:root[data-theme="dark"] .hA,:root[data-theme="dark"] .hB{--warm:#0C0C0C; --washA:rgba(244,242,238,.04); --washB:rgba(244,242,238,.02);}

/* option marker bar — review device, not part of either design */

/* ───────── HERO A · product-led ───────── */
.hA{position:relative; overflow:hidden; background:var(--paper); padding-top:78px;}
.hA::before{content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(900px 620px at 88% 6%, var(--washA), transparent 62%),
             radial-gradient(680px 520px at 62% 78%, var(--washB), transparent 64%);}
.hA-in{position:relative; max-width:var(--maxw); margin:0 auto; padding-left:var(--gut);
  display:grid; gap:clamp(34px,4vw,52px); grid-template-columns:1fr; align-items:center;}
.hA-in>*{min-width:0;}
@media (min-width:1000px){.hA-in{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); padding-right:0;}}
@media (max-width:999px){.hA-in{padding-right:var(--gut);}}
.hA-l{padding-block:clamp(26px,3.2vw,46px); position:relative;}
.hA-dots{position:absolute; left:-10px; top:64px; width:min(420px,86%); height:260px; pointer-events:none; opacity:.5;
  background-image:radial-gradient(var(--ink-3) 1px, transparent 1px); background-size:11px 11px;
  -webkit-mask-image:linear-gradient(105deg,#000,transparent 72%); mask-image:linear-gradient(105deg,#000,transparent 72%);}

.hA-badges{display:flex; align-items:center; gap:14px; flex-wrap:wrap; position:relative; margin-bottom:clamp(24px,3vw,38px);}
.hA-trust{display:inline-flex; align-items:center; gap:11px; padding:6px 20px 6px 6px; border-radius:99px;
  border:1px solid var(--line); background:var(--paper-2);}
.hA-trust b{background:var(--accent); color:var(--accent-ink); border-radius:99px; padding:8px 15px; font:500 13px/1 var(--body);}
.hA-trust span{font:500 14.5px/1 var(--body); color:var(--ink);}
.hA h1{position:relative; font-family:var(--display); font-weight:500; letter-spacing:-.05em; line-height:1;
  font-size:clamp(2.3rem,4.2vw,3.9rem); color:var(--ink); max-width:14ch;}
.hA h1 .ln{display:block; overflow:hidden;}
.hA h1 .ln>span{display:block; transform:translateY(108%); animation:rise .45s var(--ease) forwards;}
.hA h1 .ln:nth-child(1)>span{animation-delay:.05s;}
.hA h1 .ln:nth-child(2)>span{animation-delay:.14s;}
.hA h1 .ln:nth-child(3)>span{animation-delay:.23s;}
.hA h1 .ln:nth-child(4)>span{animation-delay:.32s;}
.hA-sub{position:relative; margin-top:clamp(22px,2.6vw,32px); font-size:17px; line-height:1.6; color:var(--ink-2); max-width:46ch;
  opacity:0; animation:fade .3s var(--ease) .45s forwards;}
.hA-cta{position:relative; display:inline-flex; align-items:center; gap:10px; margin-top:clamp(26px,3vw,38px);
  background:var(--accent); color:var(--accent-ink); border-radius:12px; padding:18px 28px; font:500 17px/1 var(--body);
  opacity:0; animation:fade .3s var(--ease) .56s forwards; transition:transform .2s var(--ease), box-shadow .25s;}
.hA-cta:hover{background:var(--accent-2); box-shadow:var(--shadow-pill);}
.hA-cta svg{width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s var(--ease);}
.hA-cta:hover svg{transform:translateX(4px);}
.hA-foot{position:relative; margin-top:clamp(34px,4.5vw,56px); padding-top:24px; border-top:1px solid var(--line);
  display:flex; gap:clamp(18px,3vw,38px); flex-wrap:wrap; opacity:0; animation:fade .3s var(--ease) .68s forwards;}
.hA-foot div{display:flex; align-items:center; gap:10px; font-size:15.5px; color:var(--ink);}
.hA-foot svg{width:19px; height:19px; stroke:var(--ink-2); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;}

/* device */
.hA-dev{position:relative; opacity:0; animation:fade .3s var(--ease) .25s forwards;}
.hA-dev .frame{background:var(--bez); border-radius:16px 0 0 26px; padding:13px 0 13px 13px; box-shadow:var(--shadow);}
@media (max-width:999px){.hA-dev .frame{border-radius:16px; padding:11px; margin-right:0;}}
.hA-dev .screen{background:#FBFAF9; border-radius:16px 0 0 16px; overflow:hidden; min-height:380px; padding:16px 0 16px 16px;}
@media (max-width:999px){.hA-dev .screen{border-radius:12px; padding:13px; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;}}

/* ── app mock: fixed to the product's own palette in both themes ── */
.ap{--ap-p:#FBFAF9; --ap-s:#F0F0F0; --ap-w:#fff; --ap-b:#EBEBEB; --ap-i:#1B1B1B; --ap-t:#EF7416; --ap-td:#EF7416; --ap-tw:#FDEEE3; --ap-m:#404040; --ap-f:#7F7F7F;
  color:var(--ap-i); font-family:var(--body); min-width:640px;}
.ap-top{display:flex; align-items:center; gap:8px; padding-right:16px;}
.ap-np{display:flex; align-items:center; gap:7px; background:var(--ap-w); border:1px solid var(--ap-b); border-radius:99px; padding:9px 15px; font:500 12.5px/1 var(--body); white-space:nowrap;}
.ap-np svg{width:13px; height:13px; stroke:var(--ap-i); fill:none; stroke-width:1.7;}
.ap-circ{width:34px; height:34px; border-radius:99px; background:var(--ap-w); border:1px solid var(--ap-b); display:grid; place-items:center; position:relative; flex-shrink:0;}
.ap-circ svg{width:15px; height:15px; stroke:var(--ap-i); fill:none; stroke-width:1.7; stroke-linecap:round;}
.ap-circ.dot::after{content:''; position:absolute; top:6px; right:7px; width:6px; height:6px; border-radius:99px; background:#8E1D12; border:1.5px solid var(--ap-w);}
.ap-av{width:34px; height:34px; border-radius:99px; background:linear-gradient(140deg,#EF7416,#F79445); display:grid; place-items:center; color:#1B1B1B; font:500 12px/1 var(--body); flex-shrink:0;}
.ap-main{display:grid; grid-template-columns:46px 1fr; gap:14px; margin-top:16px;}
.ap-rail{background:var(--ap-s); border-radius:99px; padding:8px 0; display:flex; flex-direction:column; align-items:center; gap:16px;}
.ap-rail i{width:30px; height:30px; border-radius:99px; display:grid; place-items:center;}
.ap-rail i.on{background:var(--ap-i);}
.ap-rail svg{width:15px; height:15px; stroke:var(--ap-m); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;}
.ap-rail i.on svg{stroke:var(--ap-p);}
.ap-hd{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding-right:16px; flex-wrap:wrap;}
.ap-hd h4{font:500 21px/1.1 var(--display); letter-spacing:-.05em;}
.ap-crumb{display:flex; gap:14px; margin-top:8px; font:400 12px/1 var(--body); color:var(--ap-m);}
.ap-crumb span{display:flex; align-items:center; gap:5px;}
.ap-crumb svg{width:11px; height:11px; stroke:var(--ap-f); fill:none; stroke-width:1.6;}
.ap-ctl{display:flex; gap:7px; flex-wrap:wrap;}
.ap-ctl span{display:inline-flex; align-items:center; gap:6px; background:var(--ap-s); border-radius:99px; padding:8px 13px; font:400 12px/1 var(--body); color:var(--ap-i); white-space:nowrap;}
.ap-ctl svg{width:12px; height:12px; stroke:var(--ap-m); fill:none; stroke-width:1.7;}
.ap-grid{display:grid; grid-template-columns:1.05fr .95fr 1.1fr; gap:10px; margin-top:14px;}
.ap-c{background:var(--ap-s); border-radius:12px; padding:13px;}
.ap-photo{position:relative; border-radius:12px; overflow:hidden; background:var(--ap-s); min-height:230px;}
.ap-photo>img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0;}
.ap-float{position:absolute; left:9px; right:9px; bottom:9px; background:var(--ap-w); border-radius:12px; padding:12px;}
.ap-float .r{display:flex; align-items:flex-start; justify-content:space-between; gap:8px;}
.ap-float .lbl{font:400 12px/1 var(--body); color:var(--ap-m);}
.ap-float .big{font:500 17px/1 var(--display); letter-spacing:-.035em; margin-top:6px;}
.ap-float .go{width:22px; height:22px; border-radius:99px; background:var(--ap-s); display:grid; place-items:center;}
.ap-float .go svg{width:10px; height:10px; stroke:var(--ap-i); fill:none; stroke-width:2;}
.ap-bars{display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:11px; align-items:end; height:72px;}
.ap-bars div{border-radius:12px; display:flex; flex-direction:column; justify-content:flex-start; padding:7px 0 0; align-items:center; font:500 12px/1 var(--body); color:var(--ap-i);}
.ap-bars em{font-style:normal; font:400 12px/1 var(--body); color:var(--ap-f); margin-top:auto; padding-bottom:4px;}
.ap-btn{display:block; text-align:center; background:var(--ap-tw); color:var(--ap-td); border-radius:12px; padding:9px; font:500 12px/1 var(--body); margin-top:9px;}
.ap-ch h5{font:400 12px/1 var(--body); color:var(--ap-m);}
.ap-ch .v{display:flex; align-items:center; gap:6px; font:500 16px/1 var(--display); letter-spacing:-.035em; margin-top:7px;}
.ap-ch .v i{width:15px; height:15px; border-radius:99px; background:#FDEEE3; display:grid; place-items:center;}
.ap-ch .v i svg{width:8px; height:8px; stroke:var(--ap-td); fill:none; stroke-width:2.4;}
.ap-team{display:flex; flex-direction:column; gap:11px;}
.ap-team .r{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.ap-team .r b{font:500 13px/1 var(--display); letter-spacing:-.03em;}
.ap-team .r span{font:400 12px/1 var(--body); color:var(--ap-td);}
.ap-stack{display:flex;}
.ap-stack i{width:32px; height:32px; border-radius:12px; margin-right:-7px; border:2px solid var(--ap-s); display:grid; place-items:center; font:500 12px/1 var(--body); color:#fff;}
.ap-stack i.add{background:var(--ap-t); border-color:var(--ap-s); margin-right:0; margin-left:11px;}
.ap-team .tot{display:flex; align-items:center; justify-content:space-between; gap:8px; background:var(--ap-w); border-radius:99px; padding:8px 10px 8px 13px;}
.ap-team .tot b{font:500 13px/1 var(--display); letter-spacing:-.03em;}
.ap-team .tot i{width:24px; height:24px; border-radius:99px; background:var(--ap-i); display:grid; place-items:center;}
.ap-team .tot i svg{width:11px; height:11px; stroke:var(--ap-p); fill:none; stroke-width:1.8;}
.ap-as{background:var(--ap-w); border-radius:12px; padding:14px; display:flex; flex-direction:column; gap:11px;}
.ap-as .hd{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.ap-as .hd b{font:500 14px/1 var(--display); letter-spacing:-.035em;}
.ap-as .hd svg{width:13px; height:13px; stroke:var(--ap-m); fill:none; stroke-width:1.7;}
.ap-as .row{display:flex; align-items:center; justify-content:space-between; gap:8px; font:400 12px/1 var(--body);}
.ap-as .row .t{color:var(--ap-td);} .ap-as .row .n{color:var(--ap-td); font-weight:500;}
.ap-as .row .pillx{background:#FFF4DC; color:#7A5309; border-radius:99px; padding:5px 10px; font:500 12px/1 var(--body);}
.ap-as .ln{height:5px; border-radius:99px; background:var(--ap-s);}
.ap-as .ln.s{width:62%;}
.ap-card{background:linear-gradient(135deg,#EF7416,#F79445); border-radius:12px; padding:14px; color:#FFFFFF;}
.ap-card .t{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.ap-card .t span{display:flex; align-items:center; gap:7px; font:400 12px/1 var(--body);}
.ap-card .t svg{width:13px; height:13px; stroke:#fff; fill:none; stroke-width:1.6;}
.ap-card .t i{width:17px; height:17px; border-radius:64px; background:rgba(255,255,255,.85); display:block;}
.ap-card .n{font:500 26px/1 var(--display); letter-spacing:-.05em; margin-top:16px;}
.ap-card .n em{font-style:normal; font-size:.45em; font-weight:400; margin-left:5px; opacity:.8;}
.ap-card .s{font:400 12px/1.4 var(--body); opacity:.82; margin-top:9px;}
.ap-as .who{display:flex; align-items:center; gap:8px; font:400 12px/1 var(--body);}
.ap-as .who .a{width:22px; height:22px; border-radius:99px; background:linear-gradient(140deg,#2E2E2E,#5A5A5A); color:#fff; display:grid; place-items:center; font:500 12px/1 var(--body);}
.ap-as .who .g{color:var(--ap-t); margin-left:auto;}
.ap-as .who .q{background:var(--ap-i); color:var(--ap-p); border-radius:99px; padding:4px 8px; font:500 12px/1 var(--body);}
.ap-as .who .q2{background:var(--ap-s); border-radius:99px; padding:4px 8px; font:500 12px/1 var(--body);}
.ap-chips{display:flex; gap:5px; flex-wrap:wrap;}
.ap-chips span{display:inline-flex; align-items:center; gap:5px; border:1px solid var(--ap-b); border-radius:99px; padding:6px 9px; font:400 12px/1 var(--body); color:var(--ap-m);}
.ap-chips span.dk{background:var(--ap-i); color:var(--ap-p); border-color:var(--ap-i);}

/* ───────── HERO B · story-led ───────── */
.hB{background:var(--warm); padding-block:clamp(32px,3.6vw,56px) clamp(26px,3vw,42px);}
.hB-head{display:grid; gap:clamp(26px,3.4vw,48px); grid-template-columns:1fr; align-items:start;}
@media (min-width:940px){.hB-head{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);}}
.hB-eyebrow{font:400 14.5px/1 var(--body); color:var(--ink-2); margin-bottom:20px; display:block;}
.hB h1{font-family:var(--display); font-weight:500; letter-spacing:-.05em; line-height:1.02;
  font-size:clamp(2.1rem,4.2vw,3.6rem); color:var(--ink); max-width:16ch;}
.hB h1 .grad{
  color:var(--accent-text);}
.hB-r{display:flex; flex-direction:column; gap:20px; align-items:flex-start;}
.hB-people{display:flex; align-items:center; gap:14px; width:100%;}
.hB-faces{display:flex;}
.hB-faces i{width:34px; height:34px; border-radius:99px; margin-right:-10px; border:2px solid var(--warm); display:grid; place-items:center; font:500 12px/1 var(--body); color:#fff;}
.hB-faces i.ok{background:var(--accent); margin-right:0;}
.hB-faces i.ok svg{width:14px; height:14px; stroke:var(--accent-ink); fill:none; stroke-width:2.8; stroke-linecap:round; stroke-linejoin:round;}
.hB-people b{font:500 16px/1 var(--display); letter-spacing:-.035em;}
.hB-people .kebab{margin-left:auto; display:flex; flex-direction:column; gap:3px;}
.hB-people .kebab i{width:3.5px; height:3.5px; border-radius:99px; background:var(--ink-3); display:block;}
.hB-r p{font-size:16px; line-height:1.58; color:var(--ink-2); max-width:46ch;}
.hB-cta{display:inline-flex; align-items:center; gap:10px; background:var(--accent); color:var(--accent-ink); border-radius:12px; padding:18px 28px; font:500 16px/1 var(--body); transition:transform .2s var(--ease), box-shadow .25s;}
.hB-cta:hover{background:var(--accent-2); box-shadow:var(--shadow-pill);}
.hB-cta svg{width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s var(--ease);}
.hB-cta:hover svg{transform:translateX(4px);}

.hB-media{position:relative; width:100%; margin:32px 0 0; border-radius:16px; overflow:hidden; background:var(--paper-3); aspect-ratio:16/5.5;}
@media (max-width:860px){.hB-media{aspect-ratio:16/9; margin-top:28px;}}
@media (max-width:560px){.hB-media{aspect-ratio:4/3.4;}}
.hB-media video,.hB-media img.poster{object-position:50% 40%;}
/* every media box is a definite-size frame; its image fills and crops, never letterboxes */
.card-media,.svc-feature .shot,.proc-media,.plan-shot,.trial-media,.carou-media,.walk,.ap-photo,.film button,.hB-media{position:relative;}
.card-media img,.svc-feature .shot img,.proc-media img,.plan-shot img,.trial-media img,
.carou-media img,.walk img,.ap-photo>img,.film button img,.hB-media video,.hB-media img{
  width:100%; height:100%; object-fit:cover; display:block;}
.hB-vtag{position:absolute; left:18px; top:18px; display:flex; align-items:center; gap:9px;
  background:rgba(12,12,12,.58); backdrop-filter:blur(9px); color:#FBFAF9; border-radius:99px; padding:9px 15px;
  font:400 12px/1 var(--mono); letter-spacing:.075em; text-transform:uppercase;}
.hB-vtag i{width:7px; height:7px; border-radius:99px; background:#EF7416; animation:pulseDot 2.4s infinite;}
@keyframes pulseDot{0%,100%{opacity:1;} 50%{opacity:.3;}}
.hB-card{position:absolute; right:16px; bottom:16px; width:min(322px,72%); background:var(--paper-2);
  border-radius:12px; padding:20px 22px; box-shadow:var(--shadow);}
@media (max-width:520px){.hB-card{left:16px; right:16px; width:auto; padding:16px 18px;}}
.hB-card h5{font:500 16px/1 var(--display); letter-spacing:-.035em;}
.hB-card .up{display:flex; align-items:center; gap:5px; font:400 13px/1 var(--body); color:var(--accent-text); margin-top:12px;}
.hB-card .up svg{width:11px; height:11px; stroke:currentColor; fill:none; stroke-width:2.2;}
.hB-card .big{font:500 30px/1 var(--display); letter-spacing:-.05em; margin-top:9px;}
.hB-card .hB-mrow{display:flex; align-items:center; gap:12px; margin-top:14px; font:400 13.5px/1.4 var(--body); color:var(--ink-2);}
.hB-card .hB-mrow>span{flex-shrink:0; width:90px; font:400 13.5px/1.4 var(--body);}
.hB-card .track{flex:1; min-width:0; height:30px; border-radius:12px; position:relative; overflow:hidden; background:var(--paper-3);}
.hB-card .track i{position:absolute; inset:0 auto 0 0; width:0; border-radius:12px; display:flex; align-items:center; padding-left:10px;
  font:500 12.5px/1 var(--body); color:var(--ink); transition:width .2s var(--ease) .25s;}
.hB-media.in .track i{width:var(--w);}
.hB-card .track i.g{background:var(--accent-wash); color:var(--accent-text);}
.hB-card .track i.a{background:var(--accent); color:var(--accent-ink);}

.hB-strip{border-top:1px solid var(--line); margin-top:clamp(34px,4.5vw,56px); padding-top:clamp(26px,3vw,38px);
  display:flex; align-items:center; gap:clamp(22px,4vw,54px); flex-wrap:wrap; justify-content:space-between;}
.hB-strip .lbl{font:400 12px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); flex-shrink:0;}
.hB-strip ul{display:flex; align-items:center; gap:clamp(20px,3.6vw,46px); flex-wrap:wrap;}
.hB-strip li{font:500 clamp(1rem,1.6vw,1.3rem)/1 var(--display); letter-spacing:-.05em; color:var(--ink-3); opacity:.62; transition:opacity .2s, color .25s;}
.hB-strip li:hover{opacity:1; color:var(--ink);}

/* ═══ STATEMENT BAND ═══════════════════════════════════════ */
.statement{position:relative; padding-block:clamp(48px,6vw,88px); overflow:hidden;}
.statement h2{font-family:var(--display); font-weight:500; letter-spacing:-.05em; line-height:1.08;
  font-size:clamp(1.7rem,3.8vw,3.1rem); max-width:19ch;}
.statement .route-obj{position:absolute; right:-4%; top:22%; width:min(34%,340px); opacity:.09; color:var(--accent); pointer-events:none;}
@media (max-width:780px){.statement .route-obj{width:52%; right:-14%; top:auto; bottom:-6%;}}
.rw w{display:inline-block; opacity:.17; transition:opacity .2s var(--ease);}
.rw w.lit{opacity:1;}

/* ═══ SECTION SKELETON (the template's real structure) ═════ */
.sec{padding-block:clamp(34px,3.6vw,56px);}
.sec-title{
  font-family:var(--display); font-weight:400; letter-spacing:-.05em; line-height:.92;
  font-size:clamp(2.2rem,5.6vw,4.2rem); color:var(--ttl);
  margin-bottom:clamp(16px,1.8vw,26px); transition:color .2s var(--ease);
}
.sec.in .sec-title{color:var(--ink);}
.sec-head{
  display:grid; gap:22px; grid-template-columns:1fr;
  padding-bottom:clamp(20px,2.2vw,30px); border-bottom:1px solid var(--line);
  margin-bottom:clamp(20px,2.4vw,32px);
}
@media (min-width:900px){.sec-head{grid-template-columns:140px minmax(0,1fr) minmax(0,250px); gap:34px;}}
.sec-num b{display:block; font:400 12px/1 var(--mono); letter-spacing:.07em; color:var(--accent-text);}
.sec-num span{display:block; font:400 12px/1 var(--mono); letter-spacing:.2em; color:var(--ink-3); margin-top:8px; text-transform:lowercase;}
.sec-lead{font:400 clamp(1.1rem,2vw,1.5rem)/1.32 var(--display); letter-spacing:-.035em; color:var(--ink); max-width:26ch;}
.sec-note{font-size:13.5px; line-height:1.6; color:var(--ink-2);}
@media (min-width:900px){.sec-note{text-align:right;}}

.sec-foot{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin-top:clamp(18px,2.2vw,30px); padding-top:18px; border-top:1px solid var(--line);}
.sec-foot .right{display:flex; align-items:center; gap:14px; margin-left:auto;}
.sec-foot .right a{font:500 14px/1 var(--body); color:var(--ink);}

/* reveal */
.rv{opacity:0; transform:translateY(24px); transition:opacity .2s var(--ease), transform .25s var(--ease);}
.rv.in{opacity:1; transform:none;}
.d1{transition-delay:.08s;} .d2{transition-delay:.16s;} .d3{transition-delay:.24s;} .d4{transition-delay:.32s;}

/* ═══ cards ════════════════════════════════════════════════ */
.card{background:var(--paper-2); border-radius:16px; overflow:hidden; position:relative; box-shadow:var(--shadow)}
.card-media{position:relative; overflow:hidden; background:var(--paper-3);}
.card-media img{width:100%; height:100%; object-fit:cover; transition:transform .2s var(--ease);}
.card:hover .card-media img{transform:scale(1.05);}
.card-tag{position:absolute; top:14px; left:14px; font:400 12px/1 var(--mono); letter-spacing:.075em; text-transform:uppercase;
  color:#FBFAF9; background:rgba(12,12,12,.6); backdrop-filter:blur(8px); padding:8px 11px; border-radius:12px;}
.card-btn{position:absolute; right:14px; bottom:14px;}
.card-body{padding:20px 22px;}
.card-body h4{font:500 1.12rem/1.25 var(--display); letter-spacing:-.035em;}
.card-body p{font-size:14px; color:var(--ink-2); line-height:1.55; margin-top:8px;}

.panel-accent{background:var(--accent); color:var(--accent-ink); border-radius:16px; padding:clamp(24px,3vw,36px);
  display:flex; flex-direction:column; gap:16px; position:relative; overflow:hidden;}
.panel-accent .mono{color:color-mix(in srgb,var(--accent-ink) 70%,transparent);}
.panel-accent h3{font:500 clamp(1.4rem,2.5vw,2rem)/1.12 var(--display); letter-spacing:-.05em;}
.panel-accent p{font-size:14.5px; line-height:1.6; color:color-mix(in srgb,var(--accent-ink) 82%,transparent);}
.dots{position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:radial-gradient(currentColor .9px, transparent .9px); background-size:13px 13px;
  color:color-mix(in srgb,var(--accent-ink) 26%,transparent);
  -webkit-mask-image:linear-gradient(200deg,transparent 42%,#000 100%); mask-image:linear-gradient(200deg,transparent 42%,#000 100%);}
.meter{margin-top:auto; padding-top:18px; border-top:1px solid color-mix(in srgb,var(--accent-ink) 26%,transparent);}
.meter-bar{height:4px; border-radius:99px; background:color-mix(in srgb,var(--accent-ink) 24%,transparent); overflow:hidden; margin-top:11px;}
.meter-bar i{display:block; height:100%; background:var(--accent-ink); width:0; transition:width .2s var(--ease) .25s;}
.sec.in .meter-bar i{width:var(--pct,60%);}
.meter-row{display:flex; justify-content:space-between; gap:10px; font:400 12px/1 var(--mono); letter-spacing:.075em; text-transform:uppercase; color:color-mix(in srgb,var(--accent-ink) 78%,transparent);}

/* ═══ 001 bento ════════════════════════════════════════════ */
.bento{display:grid; gap:12px; grid-template-columns:1fr;}
@media (min-width:900px){.bento{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); align-items:stretch;}}
.bento .big{min-height:0;} .bento .big .card-media{width:100%; height:100%; min-height:260px; aspect-ratio:16/11;}
.trio{display:grid; gap:12px; grid-template-columns:1fr; margin-top:12px;}
@media (min-width:680px){.trio{grid-template-columns:repeat(3,1fr);}}
.trio .card-media{width:100%; aspect-ratio:16/10;}

/* ═══ 002 services grid ════════════════════════════════════ */
.svc{display:grid; gap:12px; grid-template-columns:1fr;}
@media (min-width:900px){.svc{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);}}
.svc-feature{border-radius:16px; overflow:hidden; background:var(--accent); color:var(--accent-ink); display:flex; flex-direction:column; position:relative;}
.svc-feature .top{padding:26px 26px 20px; position:relative; z-index:1;}
.svc-feature .n{font:400 12px/1 var(--mono); letter-spacing:.075em; color:color-mix(in srgb,var(--accent-ink) 66%,transparent);}
.svc-feature h3{font:500 clamp(1.5rem,2.8vw,2.15rem)/1.08 var(--display); letter-spacing:-.05em; margin-top:14px; max-width:14ch;}
.svc-feature .shot{flex:1; min-height:150px; max-height:230px; overflow:hidden; position:relative;}
.svc-feature .shot img{width:100%; height:100%; object-fit:cover; opacity:.94;}
.svc-feature .btm{padding:18px 26px; display:flex; align-items:center; justify-content:space-between; gap:12px; position:relative; z-index:1;
  border-top:1px solid color-mix(in srgb,var(--accent-ink) 24%,transparent);}
.svc-feature .btm span{font:400 12px/1 var(--mono); letter-spacing:.075em; text-transform:uppercase; color:color-mix(in srgb,var(--accent-ink) 76%,transparent);}
.svc-list{display:grid; gap:12px; grid-template-columns:1fr;}
@media (min-width:600px){.svc-list{grid-template-columns:repeat(2,1fr);}}
.svc-i{border-radius:16px; padding:24px; background:var(--paper-2); position:relative; overflow:hidden;
  display:flex; flex-direction:column; gap:12px; min-height:186px; transition:border-color .2s, transform .25s var(--ease); box-shadow:var(--shadow)}
.svc-i:hover{border-color:var(--accent); transform:translateY(-3px);}
.svc-i .griddots{position:absolute; inset:0; opacity:.55; pointer-events:none;
  background-image:radial-gradient(var(--ink-3) .8px, transparent .8px); background-size:14px 14px;
  -webkit-mask-image:radial-gradient(120% 90% at 100% 0%, #000 0%, transparent 70%); mask-image:radial-gradient(120% 90% at 100% 0%, #000 0%, transparent 70%);}
.svc-i .n{font:400 12px/1 var(--mono); letter-spacing:.07em; color:var(--accent-text); position:relative;}
.svc-i h4{font:500 1.18rem/1.16 var(--display); letter-spacing:-.05em; position:relative;}
.svc-i p{font-size:13.8px; line-height:1.55; color:var(--ink-2); position:relative;}
.svc-i .tagw{margin-top:auto; font:400 12px/1 var(--mono); letter-spacing:.075em; text-transform:uppercase; color:var(--ink-3); position:relative;}

/* ═══ 003 process ══════════════════════════════════════════ */
.proc{display:grid; gap:12px; grid-template-columns:1fr;}
@media (min-width:900px){.proc{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);}}
.proc-media{width:100%; border-radius:16px; overflow:hidden; background:var(--paper-3); aspect-ratio:4/3.1; position:relative;}
.proc-media img{width:100%; height:100%; object-fit:cover;}
.proc-panel{background:var(--paper-2); border-radius:16px; padding:clamp(24px,3vw,34px); display:flex; flex-direction:column; box-shadow:var(--shadow)}
.proc-top{display:flex; align-items:center; justify-content:space-between; gap:14px; padding-bottom:20px; border-bottom:1px solid var(--line);}
.proc-top h3{font:500 1.1rem/1 var(--display); letter-spacing:-.035em;}
.proc-nav{display:flex; gap:8px;}
.pstep{display:none;} .pstep.on{display:block; animation:fade .2s var(--ease);}
.pstep .n{font:400 12px/1 var(--mono); letter-spacing:.07em; color:var(--accent-text); display:block; margin:26px 0 14px;}
.pstep h4{font:500 clamp(1.35rem,2.4vw,1.9rem)/1.1 var(--display); letter-spacing:-.05em; max-width:18ch;}
.pstep p{font-size:15px; line-height:1.62; color:var(--ink-2); margin-top:16px; max-width:52ch;}
.proc-metric{margin-top:auto; padding-top:26px; display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap;}
.proc-metric b{font:500 clamp(2.1rem,4vw,3.2rem)/1 var(--display); letter-spacing:-.05em; color:var(--ink);}
.proc-metric span{font:500 12px/1.5 var(--mono); letter-spacing:.075em; text-transform:uppercase; color:var(--ink-3); display:block; margin-top:8px;}
.proc-dots{display:flex; gap:6px;}
.proc-dots i{width:22px; height:3px; border-radius:99px; background:var(--line); transition:background .2s;}
.proc-dots i.on{background:var(--accent);}

/* ═══ 004 report dashboard ═════════════════════════════════ */
.dash{background:var(--paper-2); border:1px solid var(--line); border-radius:16px; padding:clamp(16px,2vw,22px);
  display:grid; gap:12px; grid-template-columns:1fr;}
@media (min-width:960px){.dash{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);}}
.dash-doc{background:var(--paper); border-radius:16px; overflow:hidden; box-shadow:var(--shadow)}
.doc-top{padding:16px 18px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.doc-logo{display:flex; align-items:center; gap:9px;}
.doc-logo .ph{width:26px; height:26px; border-radius:12px; background:var(--ink); color:var(--paper); display:grid; place-items:center; font:500 12px/1 var(--display);}
.doc-logo b{font:500 13.5px/1.2 var(--display); display:block; letter-spacing:-.01em;}
.doc-logo em{font-style:normal; font:400 12px/1.4 var(--mono); letter-spacing:.075em; color:var(--ink-3); display:block; margin-top:3px; text-transform:uppercase;}
.doc-meta{font:400 12px/1.7 var(--mono); letter-spacing:.1em; color:var(--ink-3); text-align:right; text-transform:uppercase;}
.doc-rows{padding:6px 18px 14px;}
.doc-row{display:grid; grid-template-columns:46px 1fr; gap:13px; padding:13px 0; border-bottom:1px solid var(--line-soft);}
.doc-row:last-child{border-bottom:0;}
.doc-thumb{width:46px; height:46px; border-radius:12px; overflow:hidden; background:var(--paper-3);}
.doc-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.doc-row h5{font:500 13.5px/1.35 var(--body); margin-bottom:5px;}
.doc-f{font:400 12px/1.6 var(--mono); letter-spacing:.06em; color:var(--ink-3); text-transform:uppercase;}
.doc-f b{color:var(--ink-2); font-weight:500;}
.chip{display:inline-flex; align-items:center; gap:5px; margin-top:8px; font:400 12px/1 var(--mono); letter-spacing:.075em; text-transform:uppercase; padding:5px 8px; border-radius:99px; border:1px solid var(--line);}
.chip.act{color:var(--notice-ink); border-color:var(--notice); background:var(--notice);}
.chip.ok{color:var(--accent-text); border-color:var(--accent-wash); background:var(--accent-wash);}
.doc-foot{padding:12px 18px; border-top:1px solid var(--line); background:var(--paper-3); font:400 12px/1.5 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap;}

.dash-side{display:grid; gap:12px; grid-template-rows:auto auto;}
.tile{background:var(--paper); border-radius:16px; padding:18px 20px; box-shadow:var(--shadow)}
.tile h5{font:400 12px/1 var(--mono); letter-spacing:.075em; text-transform:uppercase; color:var(--ink-3); margin-bottom:4px;}
.tile .sub{font-size:12px; color:var(--ink-3); margin-bottom:16px;}
.donut-row{display:flex; align-items:center; gap:20px; flex-wrap:wrap;}
.donut{width:108px; height:108px; flex-shrink:0;}
.legend{display:flex; flex-direction:column; gap:9px; min-width:0;}
.legend li{display:flex; align-items:center; gap:9px; font-size:13px; color:var(--ink-2);}
.legend i{width:9px; height:9px; border-radius:64px; flex-shrink:0;}
.legend b{margin-left:auto; color:var(--ink); font-weight:500; font-variant-numeric:tabular-nums; padding-left:10px;}
.bars{display:flex; align-items:flex-end; gap:10px; height:112px; margin-top:6px;}
.bar{flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:8px; min-width:0;}
.bar i{display:block; width:100%; border-radius:64px 5px 0 0; background:var(--accent); height:0; transition:height .2s var(--ease);}
.bar.dim i{background:color-mix(in srgb,var(--accent) 34%,transparent);}
.sec.in .bar i{height:var(--h);}
.bar span{font:400 12px/1 var(--mono); letter-spacing:.08em; color:var(--ink-3); white-space:nowrap;}
.bar em{font-style:normal; font:400 12px/1 var(--mono); color:var(--ink); font-variant-numeric:tabular-nums;}
.dash-chips{grid-column:1/-1; display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:16px; overflow:hidden;
  grid-template-columns:repeat(2,1fr);}
@media (min-width:760px){.dash-chips{grid-template-columns:repeat(4,1fr);}}
.dchip{background:var(--paper); padding:18px 20px;}
.dchip b{display:block; font:500 clamp(1.4rem,2.4vw,1.95rem)/1 var(--display); letter-spacing:-.05em; font-variant-numeric:tabular-nums;}
.dchip span{display:block; font:400 12px/1.5 var(--mono); letter-spacing:.075em; text-transform:uppercase; color:var(--ink-3); margin-top:9px;}

/* ═══ 005 plans ════════════════════════════════════════════ */
.plans{display:grid; gap:12px; grid-template-columns:1fr;}
@media (min-width:880px){.plans{grid-template-columns:repeat(3,1fr);}}
.plan{border-radius:16px; background:var(--paper-2); overflow:hidden; display:flex; flex-direction:column;
  transition:border-color .2s, transform .25s var(--ease); box-shadow:var(--shadow)}
.plan:hover{transform:translateY(-3px); border-color:var(--ink-3);}
.plan.hot{border-color:var(--accent);}
.plan-shot{width:100%; aspect-ratio:16/6; overflow:hidden; background:var(--paper-3); position:relative;}
.plan-shot img{width:100%; height:100%; object-fit:cover; filter:grayscale(.5); transition:filter .2s, transform .25s var(--ease);}
.plan:hover .plan-shot img{filter:none; transform:scale(1.05);}
.plan-shot .badge{position:absolute; top:12px; right:12px; font:400 12px/1 var(--mono); letter-spacing:.075em; text-transform:uppercase;
  background:var(--accent); color:var(--accent-ink); padding:7px 10px; border-radius:99px;}
.plan-in{padding:24px; display:flex; flex-direction:column; gap:15px; flex:1;}
.plan-in h3{font:500 1.45rem/1 var(--display); letter-spacing:-.05em;}
.plan-who{font-size:14px; color:var(--ink-2); line-height:1.55;}
.plan-price{font:500 12px/1.5 var(--mono); letter-spacing:.075em; text-transform:uppercase; color:var(--ink-3); padding-block:14px; border-block:1px dashed var(--line);}
.plan ul{display:flex; flex-direction:column; gap:9px;}
.plan ul li{display:flex; gap:10px; font-size:14px; color:var(--ink-2);}
.plan ul svg{width:13px; height:13px; flex-shrink:0; margin-top:4px; stroke:var(--accent-text); fill:none; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round;}
.plan .pill{margin-top:auto; justify-content:center;}
.ent{margin-top:12px; border-radius:16px; padding:22px 26px; background:var(--paper-2);
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; box-shadow:var(--shadow)}
.ent p{font:500 1.05rem/1.3 var(--display); letter-spacing:-.035em;}
.ent span{display:block; font-size:13.5px; color:var(--ink-2); margin-top:6px; font-family:var(--body); font-weight:400; letter-spacing:0;}

/* ═══ 006 faq ══════════════════════════════════════════════ */
.faq details{border-bottom:1px solid var(--line);}
.faq details:first-child{border-top:1px solid var(--line);}
.faq summary{list-style:none; cursor:pointer; padding:24px 0; display:flex; gap:18px; align-items:flex-start; justify-content:space-between;
  font:500 clamp(1rem,1.9vw,1.35rem)/1.3 var(--display); letter-spacing:-.05em; transition:color .2s;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary:hover{color:var(--accent-text);}
.faq-ic{flex-shrink:0; width:20px; height:20px; position:relative; margin-top:3px;}
.faq-ic::before,.faq-ic::after{content:''; position:absolute; background:var(--ink-3); left:50%; top:50%; transition:transform .2s var(--ease), background .25s;}
.faq-ic::before{width:13px; height:1.6px; transform:translate(-50%,-50%);}
.faq-ic::after{width:1.6px; height:13px; transform:translate(-50%,-50%);}
details[open] .faq-ic::after{transform:translate(-50%,-50%) rotate(90deg);}
details[open] .faq-ic::before,details[open] .faq-ic::after{background:var(--accent);}
.faq-a{padding:0 0 26px; max-width:72ch; color:var(--ink-2); font-size:15.5px; line-height:1.65;}
details[open] .faq-a{animation:fade .2s var(--ease);}
.faq-cta{margin-top:22px; border-radius:16px; padding:22px 26px; background:var(--paper-2);
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; box-shadow:var(--shadow)}

/* ═══ 007 field trial ══════════════════════════════════════ */
.trial{display:grid; gap:clamp(22px,3vw,40px); grid-template-columns:1fr; align-items:start;}
@media (min-width:900px){.trial{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);}}
.trial-media{width:100%; border-radius:16px; overflow:hidden; background:var(--paper-3); aspect-ratio:4/3.2;}
.trial-media img{width:100%; height:100%; object-fit:cover;}
.trial h3{font:500 clamp(1.9rem,4vw,3.1rem)/1 var(--display); letter-spacing:-.05em;}
.trial .role{font:400 12px/1 var(--mono); letter-spacing:.07em; text-transform:uppercase; color:var(--accent-text); margin-top:14px; display:block;}
.trial p{font-size:15.5px; line-height:1.68; color:var(--ink-2); margin-top:20px; max-width:58ch;}
.trial-facts{display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:16px; overflow:hidden; margin-top:28px; grid-template-columns:repeat(2,1fr);}
@media (min-width:640px){.trial-facts{grid-template-columns:repeat(4,1fr);}}
.trial-facts div{background:var(--paper); padding:16px 18px;}
.trial-facts b{display:block; font:500 1.35rem/1 var(--display); letter-spacing:-.05em; font-variant-numeric:tabular-nums;}
.trial-facts span{display:block; font:500 12px/1.4 var(--mono); letter-spacing:.075em; text-transform:uppercase; color:var(--ink-3); margin-top:8px;}

/* ═══ 008 interface carousel ═══════════════════════════════ */
.carou{border-radius:16px; background:var(--paper-2); overflow:hidden; box-shadow:var(--shadow)}
.carou-in{display:grid; gap:0; grid-template-columns:1fr;}
@media (min-width:820px){.carou-in{grid-template-columns:minmax(0,.42fr) minmax(0,1fr);}}
.carou-media{width:100%; background:var(--paper-3); overflow:hidden; min-height:230px; position:relative;}
.carou-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .2s var(--ease);}
.carou-media img.on{opacity:1;}
.carou-body{padding:clamp(26px,3.4vw,44px); display:flex; flex-direction:column; border-left:1px solid var(--line);}
@media (max-width:819px){.carou-body{border-left:0; border-top:1px solid var(--line);}}
.qmark{width:30px; height:30px; color:var(--accent-text); opacity:.9;}
.cslide{display:none;} .cslide.on{display:block; animation:fade .2s var(--ease);}
.cslide p{font:400 clamp(1.15rem,2.1vw,1.6rem)/1.38 var(--display); letter-spacing:-.022em; color:var(--ink); margin-top:20px; max-width:34ch;}
.cslide .who{margin-top:26px;}
.cslide .who b{display:block; font:500 1.1rem/1 var(--display); letter-spacing:-.035em;}
.cslide .who span{display:block; font:400 12px/1.5 var(--mono); letter-spacing:.075em; text-transform:uppercase; color:var(--ink-3); margin-top:8px;}
.carou-ctl{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:auto; padding-top:28px;}
.film{display:flex; gap:8px; border-top:1px solid var(--line); padding:14px; overflow-x:auto; background:var(--paper);}
.film button{width:76px; height:56px; border-radius:12px; overflow:hidden; flex-shrink:0; border:1.5px solid transparent; opacity:.45; transition:opacity .2s, border-color .25s;}
.film button img{width:100%; height:100%; object-fit:cover; filter:grayscale(1);}
.film button.on{opacity:1; border-color:var(--accent);}
.film button.on img{filter:none;}
.film button:hover{opacity:.85;}

/* ═══ 009 walk types ═══════════════════════════════════════ */
.walks{display:grid; gap:12px; grid-template-columns:1fr;}
@media (min-width:760px){.walks{grid-template-columns:repeat(2,1fr);}}
.walk{width:100%; border-radius:16px; overflow:hidden; position:relative; background:var(--paper-3); aspect-ratio:16/10; display:flex; flex-direction:column; justify-content:flex-end;}
.walk img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .2s var(--ease);}
.walk::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(12,12,12,.72) 0%,rgba(12,12,12,.25) 42%,rgba(12,12,12,.86) 100%);}
.walk:hover img{transform:scale(1.06);}
.walk-top{position:absolute; top:0; left:0; right:0; padding:20px 22px; z-index:2; display:flex; justify-content:space-between; gap:12px;
  font:400 12px/1.5 var(--mono); letter-spacing:.075em; text-transform:uppercase; color:rgba(251,250,249,.72);}
.walk-btm{position:relative; z-index:2; padding:22px; display:flex; align-items:flex-end; justify-content:space-between; gap:16px;}
.walk-btm h4{font:500 clamp(1.25rem,2.2vw,1.65rem)/1.14 var(--display); letter-spacing:-.05em; color:#FBFAF9; max-width:15ch;}
.walk-btm p{font-size:13.5px; line-height:1.5; color:rgba(251,250,249,.68); margin-top:9px; max-width:34ch;}

/* ═══ MARQUEE BAND ═════════════════════════════════════════ */
.marq{background:var(--accent); color:var(--accent-ink); padding-block:clamp(30px,4.5vw,56px); overflow:hidden;}
.marq .mrow{display:flex; width:max-content; align-items:baseline;}
.marq .mrow span{font:300 clamp(2.6rem,8.6vw,6.6rem)/1 var(--display); letter-spacing:-.05em; padding-right:.28em; white-space:nowrap;}
.marq .mrow.a{animation:mleft 30s linear infinite;}
.marq .mrow.b{animation:mright 34s linear infinite;}
.marq .mrow.faint span{opacity:.42;}
.marq .mrow.outline span{color:transparent; -webkit-text-stroke:1.4px color-mix(in srgb,var(--accent-ink) 55%,transparent);}
@keyframes mleft{to{transform:translateX(-50%);}}
@keyframes mright{from{transform:translateX(-50%);} to{transform:translateX(0);}}
.mtag{display:flex; width:max-content; animation:mleft 44s linear infinite; padding-block:10px;}
.mtag span{font:400 12px/1 var(--mono); letter-spacing:.075em; text-transform:uppercase; padding-right:46px; white-space:nowrap; color:color-mix(in srgb,var(--accent-ink) 78%,transparent);}

/* ═══ LET'S WALK / contact ═════════════════════════════════ */
.talk{background:var(--dk); color:var(--dk-ink); padding-block:clamp(40px,4.6vw,72px); position:relative; overflow:hidden;}
.talk h2{font:300 clamp(2.6rem,8.4vw,6.4rem)/.94 var(--display); letter-spacing:-.05em; text-align:center; margin-bottom:clamp(30px,3.6vw,52px);}
.talk-grid{display:grid; gap:clamp(28px,4vw,56px); grid-template-columns:1fr;}
@media (min-width:880px){.talk-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);}}
.talk-l h5{font:400 12px/1 var(--mono); letter-spacing:.075em; text-transform:uppercase; color:var(--dk-ink-2); margin-bottom:20px;}
.talk-l .big{font:400 clamp(1.2rem,2.2vw,1.65rem)/1.3 var(--display); letter-spacing:-.05em; margin-bottom:26px; max-width:20ch;}
.talk-l ul{display:flex; flex-direction:column; gap:12px;}
.talk-l ul li{font-size:14.5px; color:var(--dk-ink-2); display:flex; gap:11px;}
.talk-l ul svg{width:15px; height:15px; flex-shrink:0; margin-top:4px; stroke:var(--accent); fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;}
.tform{display:grid; gap:10px; grid-template-columns:1fr;}
@media (min-width:620px){.tform{grid-template-columns:1fr 1fr;} .tform .full{grid-column:1/-1;}}
.tform input,.tform textarea,.tform select{
  width:100%; padding:15px 17px; border-radius:12px; background:rgba(251,250,249,.06);
  border:1px solid rgba(251,250,249,.16); color:var(--dk-ink); font:400 15px/1.4 var(--body); outline:none;
  transition:border-color .2s, background .25s;}
.tform textarea{min-height:112px; resize:vertical;}
.tform input::placeholder,.tform textarea::placeholder{color:rgba(251,250,249,.38);}
.tform input:focus,.tform textarea:focus,.tform select:focus{border-color:var(--accent); background:rgba(251,250,249,.08);}
.tform select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ECEFE9' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 15px center; background-size:15px; padding-right:44px;}
.tform select option{background:#1B1B1B; color:#FBFAF9;}
.tform-btm{grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:4px;}
.tform-btm small{font-size:12.5px; color:rgba(251,250,249,.5);}
.tform .sq{background:var(--accent); color:var(--accent-ink);}
.tform .sq:hover{background:var(--accent-2);}
.tform-ok{grid-column:1/-1; padding:15px 18px; border-radius:16px; background:var(--accent-wash); border:1px solid var(--accent); color:var(--accent-text); font-size:14px; line-height:1.5;}

/* ═══ suite row ════════════════════════════════════════════ */
.suite{border-block:1px solid var(--line); padding-block:30px;}
.suite-in{display:flex; align-items:center; gap:clamp(24px,5vw,60px); flex-wrap:wrap; justify-content:center;}
.suite-i{display:flex; align-items:center; gap:9px; opacity:.42; transition:opacity .2s;}
.suite-i:hover,.suite-i.live{opacity:1;}
.suite-i svg{width:15px; height:auto; color:var(--mark);}
.suite-i b{font:500 15px/1 var(--display); letter-spacing:-.035em;}
.suite-i.live b i{font-style:normal; color:var(--accent-text);}
.suite-i em{font-style:normal; font:400 12px/1 var(--mono); letter-spacing:.075em; text-transform:uppercase; color:var(--accent-text); border:1px solid var(--accent-text); border-radius:99px; padding:4px 7px;}

/* ═══ footer ═══════════════════════════════════════════════ */
footer{padding-block:clamp(46px,6vw,80px) 28px;}
.f-top{display:grid; gap:clamp(28px,4vw,44px); grid-template-columns:1fr; padding-bottom:clamp(36px,5vw,56px); border-bottom:1px solid var(--line);}
@media (min-width:820px){.f-top{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,.8fr); align-items:start;}}
.f-badge{width:112px; height:112px; position:relative; flex-shrink:0;}
.f-badge .spin{width:100%; height:100%; animation:spin 22s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.f-badge .core{position:absolute; inset:0; display:grid; place-items:center;}
.f-badge .core span{width:17px; height:17px; border-radius:99px; background:var(--accent); display:block;}
.f-tag{font:400 clamp(1.1rem,1.9vw,1.45rem)/1.28 var(--display); letter-spacing:-.05em; margin-top:26px; max-width:22ch;}
.f-addr{font-size:14px; line-height:1.75; color:var(--ink-2);}
.f-mail{font:400 clamp(1.05rem,1.8vw,1.35rem)/1.3 var(--display); letter-spacing:-.035em;}
.f-mail:hover{color:var(--accent-text);}
.f-mid{display:grid; gap:30px; grid-template-columns:repeat(2,1fr); padding-block:clamp(34px,4.5vw,52px); border-bottom:1px solid var(--line);}
@media (min-width:820px){.f-mid{grid-template-columns:repeat(2,minmax(0,.55fr)) minmax(0,1.4fr);}}
.f-col h5{font:400 12px/1 var(--mono); letter-spacing:.075em; text-transform:uppercase; color:var(--ink-3); margin-bottom:16px;}
.f-col ul{display:flex; flex-direction:column; gap:10px;}
.f-col a{font-size:14px; color:var(--ink-2); transition:color .2s;}
.f-col a:hover{color:var(--accent-text);}
.f-news h5{font:400 12px/1 var(--mono); letter-spacing:.075em; text-transform:uppercase; color:var(--ink-3); margin-bottom:9px;}
.f-news p{font-size:13.5px; color:var(--ink-2); margin-bottom:16px;}
.f-news form{display:flex; gap:9px; flex-wrap:wrap;}
.f-news input{flex:1 1 190px; min-width:0; padding:13px 16px; border-radius:12px; border:1px solid var(--line); background:var(--paper-2); color:var(--ink); font:400 14px/1 var(--body); outline:none; transition:border-color .2s;}
.f-news input::placeholder{color:var(--ink-3);}
.f-news input:focus{border-color:var(--accent);}
.f-news small{display:block; font-size:12px; color:var(--ink-3); margin-top:12px;}
.f-bar{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-top:22px;
  font:400 10px/1.6 var(--mono); letter-spacing:.075em; text-transform:uppercase; color:var(--ink-3);}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
  .rv{opacity:1 !important; transform:none !important;}
  .rw w{opacity:1 !important;}
  .hero h1 .ln>span{transform:none !important;}
  .hero-mid,.hero-stats{opacity:1 !important;}
  .sec-title{color:var(--ink) !important;}
}