:root{--font-sans:var(--font-geist-sans),"Geist";--font-mono:var(--font-geist-mono),"Geist Mono"}
/*
 * style.css — prototype LAYOUT only. Brand tokens + component classes come from haikotek.css
 * (verbatim repo globals.css). Everything here re-creates the Tailwind utility layout used by
 * repo components (Navbar, HomeHero, HomeSectionShell, LookbookRail, PillarPage, EditorialPageShell,
 * SiteFooter, LeadIntakeForm, FloatingWhatsApp). Review-only layers are at the bottom (.proto, .ph, .rv, .chg).
 */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:6rem}
body{margin:0;min-height:100dvh;font-size:15px;line-height:1.55}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
ul{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
@layer base{button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;z-index:100;background:var(--foreground);color:#fff;padding:.5rem 1rem}
.skip:focus{left:1rem;top:1rem}
.gx{padding-left:var(--gutter-x);padding-right:var(--gutter-x)}
.cmax{max-width:var(--content-max);margin:0 auto;width:100%}
.mono,.price{font-family:var(--font-geist-mono);font-variant-numeric:tabular-nums;letter-spacing:0}
.muted{color:var(--muted)}
.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.mt-10{margin-top:2.5rem}.mt-12{margin-top:3rem}
.row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}

/* ---------- header (Navbar.tsx) ---------- */
#hdr{position:fixed;inset:0 0 auto 0;top:var(--proto-h,0px);z-index:50;transition:background-color .5s var(--ease-out-expo),box-shadow .5s var(--ease-out-expo)}
#hdr{background:rgba(250,248,245,.55);backdrop-filter:blur(24px) saturate(1.5);-webkit-backdrop-filter:blur(24px) saturate(1.5);box-shadow:var(--shadow-frost)}
#hdr.overlay:not(.menu-open){background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
.hbar{position:relative;display:flex;align-items:center;justify-content:space-between;min-height:3.25rem;padding:.75rem 0}
@media(min-width:768px){.hbar{min-height:0;padding:1rem 0}}
@media(min-width:1024px){.hbar{display:grid;grid-template-columns:1fr auto 1fr;padding:1.25rem 0}}
.hnav{display:none;align-items:center;gap:.5rem 2rem;flex-wrap:wrap}
.hright{display:none;justify-content:flex-end;align-items:center;gap:.5rem 2rem}
@media(min-width:1024px){.hnav,.hright{display:flex}.hmob{display:none!important}}
.logo{display:flex;align-items:center;gap:.875rem;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
@media(min-width:768px){.logo{gap:1rem}}
@media(min-width:1024px){.logo{position:relative;left:auto;top:auto;transform:none;justify-self:center}}
.logo .mk{height:2.25rem;width:2.25rem;display:flex;align-items:center;justify-content:center}
.logo .mk img{max-width:2.1rem;max-height:100%}
@media(min-width:768px){.logo .mk{height:2.5rem;width:2.5rem}.logo .mk img{max-width:2.35rem}}
.logo .logo-wordmark{color:var(--foreground);transition:color .5s}
#hdr.overlay:not(.menu-open) .logo{filter:drop-shadow(0 2px 16px rgba(0,0,0,.45))}
#hdr.overlay:not(.menu-open) .logo .logo-wordmark{color:#fff}
#hdr.overlay:not(.menu-open) .nav-link{color:var(--nav-on-dark-ink)}
#hdr.overlay:not(.menu-open) .nav-link:hover{color:#fff}
#hdr.overlay:not(.menu-open) .locale-link{color:#fff;text-decoration-color:rgba(255,255,255,.55)}
#hdr.overlay:not(.menu-open) .hmob{color:#fff}
.nav-link[aria-current=page],.nav-link.active{color:var(--accent)!important}
#hdr.overlay:not(.menu-open) .nav-link.active{color:#fff!important}
.sv-caret{display:inline-block;margin-left:.35rem;font-size:9px;transform:translateY(-1px)}
.locale{display:inline-flex;align-items:baseline;gap:.35rem;font-size:13px}
.locale .pre{color:inherit;opacity:.85}
#sv-row{padding:.25rem 0 .75rem}
#sv-row ul{display:flex;flex-wrap:wrap;gap:.5rem 2rem}
#sv-row a{display:block}
#sv-row .hint{display:block;margin-top:.35rem;font-size:12px;color:var(--muted);letter-spacing:0}
.hmob{display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;margin-left:-.75rem;color:var(--foreground)}
.hmob.r{margin-left:0;margin-right:-.5rem;font-size:13px;width:auto;padding:0 .5rem}
#mob{position:fixed;inset:0;z-index:70;background:var(--background);padding:1rem var(--gutter-x) 6rem;overflow:auto}
#mob .mtop{display:flex;justify-content:space-between;align-items:center;min-height:3.25rem}
#mob .mgrp{margin-top:2rem}
#mob .mgrp a{display:block;padding:.6rem 0;font-size:1.125rem;letter-spacing:.02em}
#mob .mgrp .sub a{font-size:.9375rem;padding:.45rem 0 .45rem 1rem;color:var(--muted)}
body.mob-open{overflow:hidden}

/* ---------- home hero (HomeHero.tsx + HeroBannerField.tsx) ---------- */
#site-home-hero{position:relative;isolation:isolate;height:var(--home-hero-h);min-height:560px;width:100%;overflow:hidden;background:var(--hero-ground);color:#fff}
#hero-field{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;background:var(--hero-ground)}
.hero-in{position:relative;z-index:10;display:flex;flex-direction:column;height:100%}
.hero-copy{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;text-align:center;padding:0 var(--gutter-x) 1.5rem;max-width:min(92vw,72rem);margin:0 auto;width:100%}
@media(min-width:768px){.hero-copy{padding-bottom:2rem}}
.hero-eyebrow{font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.72);margin-bottom:1.5rem}
.hero-title{max-width:46rem;text-wrap:balance;font-size:clamp(1.65rem,4.8vw,3.35rem);font-weight:500;text-transform:uppercase;line-height:1.08;letter-spacing:.12em;color:#fff}
.hero-title.vi{font-size:clamp(1.5rem,4.2vw,2.9rem);letter-spacing:.08em;line-height:1.16}
.hero-copy .type-hero-sub{margin-top:1.25rem;max-width:40rem}
.hero-ctas{margin-top:2.5rem;display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center}
@media(min-width:640px){.hero-ctas{margin-top:3rem;gap:1rem}}
.hero-proof{margin-top:1.75rem;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.hero-steps{position:relative;z-index:10;display:flex;justify-content:center;gap:.375rem;padding:.5rem var(--gutter-x) 1.25rem}
@media(min-width:768px){.hero-steps{padding-bottom:1.5rem}}
.hero-steps li{display:flex;flex-direction:column;align-items:center;gap:.6rem;min-width:4.5rem}
@media(min-width:640px){.hero-steps li{min-width:7.5rem}}
.hero-steps .bar{display:block;height:1px;width:4.5rem;background:rgba(255,255,255,.35)}
@media(min-width:640px){.hero-steps .bar{width:7.5rem}}
.hero-steps li:first-child .bar{background:#fff}
.hero-steps .lbl{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.7);white-space:nowrap}
@media(max-width:639px){.hero-steps .lbl{display:none}}
#site-home-hero-sentinel{position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none}

/* ---------- home sections (HomeSectionShell, LookbookRail, HomeWorkStrip) ---------- */
.home-page-stack{padding-top:var(--page-section-gap)}
.hs-head{display:flex;flex-direction:column;gap:2rem}
@media(min-width:1024px){.hs-head{flex-direction:row;align-items:flex-start;justify-content:space-between;gap:3rem}}
.hs-head .txt{max-width:36rem}
@media(min-width:1024px){.hs-head .txt{max-width:42rem}}
.hs-head .act{display:flex;flex-wrap:wrap;gap:.5rem;flex-shrink:0}
.hs-body{margin-top:var(--page-section-header-to-content)}
.kicker-row{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.plates{display:grid;gap:var(--lookbook-slide-gap);grid-template-columns:1fr}
@media(min-width:768px){.plates{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.plates.c3{grid-template-columns:repeat(3,1fr)}.plates.c4{grid-template-columns:repeat(4,1fr)}}
.plate{display:flex;flex-direction:column;background:var(--background)}
.lookbook-plate-frame img,.plate .pillar-art-frame img,.pillar-art-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.plate .rail-copy-block{display:flex;flex-direction:column;align-items:flex-start}
.plate .meta{margin-top:.75rem;display:flex;flex-wrap:wrap;gap:.25rem 1rem;font-size:.8125rem;color:color-mix(in srgb,var(--foreground) 74%,transparent)}
.plate .meta .price{color:var(--foreground)}
.plate .rail-cta-row{margin-top:1rem}
.caption{margin-top:1.5rem;font-size:.8125rem;color:var(--muted);max-width:42rem}
.list-rail{max-width:42rem}
.list-rail .rail-stack-item{border-top:1px solid var(--hairline);padding-top:var(--page-section-item-gap)}
.list-rail .rail-stack-item:first-child{border-top:0;padding-top:0}
.bul{display:flex;flex-direction:column;gap:.75rem}
.bul li{position:relative;padding-left:1.25rem}
.bul li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--accent)}
.grid2{display:grid;gap:3rem}
@media(min-width:768px){.grid2{grid-template-columns:1fr 1fr;gap:4rem}}
.grid3{display:grid;gap:2.5rem}
@media(min-width:768px){.grid3{grid-template-columns:repeat(3,1fr);gap:2rem}}
.grid4{display:grid;gap:2rem}
@media(min-width:768px){.grid4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.grid4{grid-template-columns:repeat(4,1fr)}}
.step .n{font-family:var(--font-geist-mono);font-size:.75rem;color:var(--muted);letter-spacing:.06em}
.step .type-rail-title{margin-top:.75rem}
.step .type-rail-caption{margin-top:.5rem}
.tile{background:color-mix(in srgb,var(--surface) 35%,transparent);padding:1.5rem}
@media(min-width:768px){.tile{padding:1.75rem}}
.hair{border-top:1px solid var(--hairline)}
.faq{display:flex;flex-direction:column;max-width:48rem}
.faq details{border-top:1px solid var(--hairline);padding:1.25rem 0}
.faq details:last-child{border-bottom:1px solid var(--hairline)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;font-size:var(--type-body-md);color:var(--foreground)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:300;color:var(--muted)}
.faq details[open] summary::after{content:"–"}
.faq .a{margin-top:.75rem;max-width:40rem}
.final{background:var(--surface);padding:var(--section-y) 0}
.final .row{margin-top:2rem}
.avatar{width:3.5rem;height:3.5rem;border-radius:50%;background:var(--surface);border:1px solid var(--hairline-strong);display:flex;align-items:center;justify-content:center;color:var(--muted)}
.avatar svg{width:1.5rem;height:1.5rem}
.home-page-footer-gap{display:block;height:var(--page-section-gap)}

/* ---------- interior shells (EditorialPageShell / PillarPage / DocumentEditorialPage) ---------- */
.page{padding-top:7rem;padding-bottom:max(var(--section-y),4rem)}
@media(min-width:768px){.page{padding-top:8rem}}
@media(min-width:1024px){.page{padding-top:9rem}}
.m640{max-width:640px;margin:0 auto}.m720{max-width:720px;margin:0 auto}.m1100{max-width:1100px;margin:0 auto}.m2000{max-width:var(--content-max);margin:0 auto}
.crumb{display:flex;flex-wrap:wrap;gap:.5rem;font-size:12px;color:var(--muted);margin-bottom:2.5rem}
.crumb a{color:var(--muted)}.crumb a:hover{color:var(--foreground)}
.crumb span[aria-hidden]{opacity:.5}
.pillar-head{max-width:42rem}
.pillar-head h1{margin-top:1.25rem}
.pillar-head .type-body{margin-top:1.5rem;max-width:42rem}
.pillar-art-frame{margin-top:3rem}
@media(min-width:768px){.pillar-art-frame{margin-top:4rem}}
.psec{margin-top:3.5rem}
@media(min-width:768px){.psec{margin-top:4rem}}
.psec>.type-label+*{margin-top:1.25rem}
.kv{display:grid;gap:.6rem;padding:1.5rem 0;border-bottom:1px solid var(--hairline)}
.kv:first-child,:not(.kv)+.kv{border-top:1px solid var(--hairline)}
.kv>h2,.kv>h3{padding-top:.2rem}
.kv .type-body+.type-body,.kv .bul{margin-top:.5rem}
@media(min-width:768px){.kv{grid-template-columns:14rem 1fr;gap:2rem}}
.urgent{margin-top:1.5rem;border-left:2px solid var(--accent);padding:.25rem 0 .25rem 1rem;max-width:42rem}
.endrow{margin-top:3.5rem;display:flex;flex-direction:column;gap:1rem;padding-top:2rem;border-top:1px solid var(--hairline)}
@media(min-width:768px){.endrow{flex-direction:row;align-items:center;justify-content:space-between}}
.doc-section{margin-top:2.5rem}
.doc-section .doc-prose{margin-top:1rem}
.doc-facts{display:grid;gap:.25rem 2rem;margin-top:1rem}
@media(min-width:640px){.doc-facts{grid-template-columns:12rem 1fr}}
.doc-facts dt{color:var(--muted);font-size:.875rem}
.doc-facts dd{font-size:1rem;color:var(--doc-ink)}
.compare-panel td.price,.compare-panel td .price{white-space:nowrap}
.compare-panel td small{display:block;color:var(--muted);font-size:.8125rem;margin-top:.25rem}
.tags{display:flex;flex-wrap:wrap;gap:.5rem}
.quote{border-left:1px solid var(--hairline-strong);padding-left:1.25rem;font-size:var(--type-work-subtitle);font-style:italic;color:color-mix(in srgb,var(--foreground) 55%,transparent);max-width:40rem}
.work-shot{margin-top:3rem;aspect-ratio:16/10;background:var(--lookbook-plate-bg);overflow:hidden;position:relative}
.work-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ill-ph{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:.75rem;color:var(--muted);font-size:11px;letter-spacing:.18em;text-transform:uppercase;background:var(--surface)}
.ill-ph svg{width:40%;max-width:220px;height:auto;opacity:.75}
.lab-grid{display:grid;gap:var(--page-grid-gap)}
@media(min-width:768px){.lab-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.lab-grid{grid-template-columns:repeat(3,1fr)}}
.app-frame{aspect-ratio:4/3;background:var(--lookbook-plate-bg);position:relative;overflow:hidden}
.app-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.app-frame.contain img{object-fit:contain;padding:8%}

/* ---------- contact form (LeadIntakeForm + form-styles.ts) ---------- */
.cgrid{display:grid;gap:3rem}
@media(min-width:1024px){.cgrid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:2rem 4rem;align-items:start}}
.lbl{display:block;font-size:.6875rem;font-weight:500;text-transform:uppercase;letter-spacing:.28em;color:var(--foreground)}
.lbl .opt{color:var(--muted);letter-spacing:.18em}
.fset{border:0;margin:0;padding:0;min-width:0}
.fset legend{padding:0}
.fld{display:block}
.fld>.lbl+*,.fset>legend+*{margin-top:.6rem}
.fstack{display:flex;flex-direction:column;gap:1.75rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chips label{position:relative}
.chips input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.chips label:has(input:checked) .filter-chip{border-color:color-mix(in srgb,var(--accent) 30%,transparent);background-color:color-mix(in srgb,var(--accent) 6%,transparent);color:var(--foreground)}
.chips label:has(input:focus-visible) .filter-chip{outline:var(--focus-ring);outline-offset:2px}
.chips .filter-chip{font-size:10.5px;min-height:2rem;text-align:left}
.two{display:grid;gap:1.25rem}
@media(min-width:640px){.two{grid-template-columns:1fr 1fr}}
.consent{display:flex;gap:.75rem;align-items:flex-start;font-size:.8125rem;line-height:1.6;color:var(--muted)}
.consent input{margin-top:.25rem;accent-color:var(--foreground);width:1rem;height:1rem;flex-shrink:0}
.err{display:none;margin-top:.5rem;font-size:.8125rem;color:#b42318}
.invalid .err{display:block}
.invalid .form-field,.invalid .form-textarea{border-color:#b42318}
.hint{font-size:.8125rem;color:var(--muted);margin-top:.5rem}
#form-wrap .ty{display:none}
#form-wrap.sent form{display:none}
#form-wrap.sent .ty{display:block}
.ty-box{border:1px solid rgba(20,17,14,.18);border-radius:1rem;padding:1.5rem 1.75rem}
.side{display:flex;flex-direction:column;gap:2rem}
@media(min-width:1024px){.side{position:sticky;top:7rem}}
.side .blk{border-top:1px solid var(--hairline);padding-top:1.25rem}
.chan{display:flex;flex-direction:column;gap:.6rem;margin-top:.75rem}
.chan a{display:flex;justify-content:space-between;gap:1rem;font-size:.9375rem}
.chan a span:last-child{font-family:var(--font-geist-mono);font-size:.8125rem;color:var(--muted)}

/* ---------- footer (SiteFooter.tsx + deck footer block) ---------- */
.site-footer{border-top:1px solid var(--hairline);background:var(--background)}
.ftop{display:grid;gap:2.5rem;padding:3.5rem 0 2.5rem}
@media(min-width:768px){.ftop{grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem}}
.ftop h2{margin-bottom:1rem}
.ftop ul{display:flex;flex-direction:column;gap:.7rem}
.ftop .fdesc{max-width:22rem}
.flegal{font-size:12px;line-height:1.6;color:var(--muted);padding-bottom:1.5rem;max-width:56rem}
.fbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1.5rem;padding:1.5rem 0 max(1.5rem,env(safe-area-inset-bottom));border-top:1px solid var(--hairline)}
.fbar nav{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem}
@media(min-width:768px){.fbar nav{gap:.5rem 2rem}}
.fcopy{font-size:13px;color:var(--foreground);font-variant-numeric:tabular-nums}

/* ---------- floating chat + mobile contact bar ---------- */
.cta-fab{text-decoration:none}
.cta-fab svg{width:19px;height:19px}
@media(max-width:767px){.cta-fab{display:none}}
.mbar{display:none}
@media(max-width:767px){
  .mbar{display:grid;grid-template-columns:repeat(3,1fr);position:fixed;left:0;right:0;bottom:0;z-index:60;background:rgba(250,248,245,.86);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border-top:1px solid var(--hairline-strong);padding-bottom:env(safe-area-inset-bottom)}
  .mbar a{display:flex;align-items:center;justify-content:center;gap:.4rem;min-height:3.25rem;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--foreground)}
  .mbar a+a{border-left:1px solid var(--hairline)}
  .mbar a.pri{color:var(--accent)}
  body{padding-bottom:3.5rem}
}

/* ---------- 404 ---------- */
.nf{min-height:70vh;display:flex;align-items:center}


/* ---------- additions: pricing table, studio strip, people, form options, docs ---------- */
.bg-background{background:var(--background)}.text-foreground{color:var(--foreground)}
.mt-16{margin-top:4rem}.mt-24{margin-top:6rem}
.mono-n{font-family:var(--font-geist-mono);font-variant-numeric:tabular-nums;font-size:.9em;letter-spacing:0}
.ptable-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ptable{width:100%;border-collapse:collapse;font-size:.9375rem;min-width:720px}
.ptable .price{font-size:.9375rem;color:var(--foreground)}
.studio-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--lookbook-slide-gap,1rem);margin-top:3rem}
.studio-strip img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--lookbook-plate-bg)}
@media(max-width:639px){.studio-strip{grid-template-columns:1fr 1fr}.studio-strip img:nth-child(3){display:none}}
.commit{gap:.75rem 4rem}
.person{display:flex;flex-direction:column;align-items:flex-start}
.ph-link{cursor:not-allowed}
.opts{display:flex;flex-wrap:wrap;gap:.5rem}
.opt{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--hairline-strong);border-radius:999px;padding:.45rem .9rem;font-size:.875rem;cursor:pointer;background:var(--background);transition:border-color .2s,background-color .2s}
.opt input{accent-color:var(--foreground);margin:0}
.opt:has(input:checked){border-color:var(--foreground);background:color-mix(in srgb,var(--surface) 60%,transparent)}
.opt:has(input:focus-visible){outline:var(--focus-ring);outline-offset:2px}
.opt.consent{border:0;border-radius:0;padding:0;background:none;display:flex;align-items:flex-start;font-size:.8125rem;color:var(--muted)}
.opt-l{color:var(--muted);letter-spacing:.14em}
#lead{display:flex;flex-direction:column;gap:2rem}
#lead .fset>label.type-label,#lead legend.type-label{display:block;margin-bottom:.7rem}
#lead .form-field,#lead .form-textarea{width:100%}
.fgrid{gap:2rem}
@media(min-width:768px){.fgrid{gap:2rem 2.5rem}}
.quick{display:flex;flex-direction:column;gap:.7rem}
.quick li{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.quick .mono-n{color:var(--muted);font-size:.8125rem}
.doc-sec{margin-top:2.5rem}
.doc-sec .doc-section-title{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}
.doc-sec .doc-list,.doc-sec>div{margin-top:1rem}
.doc-sec .status-chip{font-size:10px}
.chg-sec{border-left:2px solid color-mix(in srgb,var(--accent) 45%,transparent);padding-left:1rem;margin-left:-1rem}
body.clean .chg-sec{border-left:0}
body.clean .doc-sec .status-chip{display:none}
.hub{background:var(--background);color:var(--foreground)}
.hubt{min-width:0}.hubt th.g{padding-top:2rem;color:var(--foreground)}
.hubt td:first-child{font-weight:400;min-width:0}.hubt code{font-family:var(--font-geist-mono);font-size:.8125rem;color:var(--muted)}
.hubt a{text-decoration:underline;text-underline-offset:4px}

/* ======================= REVIEW LAYERS (prototype only — not for production) ======================= */
.proto{position:fixed;top:0;left:0;right:0;z-index:80;height:28px;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:0 var(--gutter-x);background:#14110e;color:rgba(250,248,245,.86);font-family:var(--font-geist-mono);font-size:10.5px;letter-spacing:.06em}
.proto .l{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.proto .l b{color:#fff;font-weight:500;letter-spacing:.14em}
.proto .r{display:flex;gap:1rem;flex-shrink:0;align-items:center}
.proto a,.proto button{color:rgba(250,248,245,.86);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(250,248,245,.35);font:inherit}
.proto .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:.5rem}
body.has-proto{--proto-h:28px}
body.has-proto .page{padding-top:calc(7rem + 28px)}
.proto.hidden{display:none}
body.has-proto:has(.proto.hidden){--proto-h:0px}
@media(max-width:767px){.proto .hide-sm{display:none}}
/* yellow = placeholder that must be filled before launch */
.ph{background:#fff1a8;color:#14110e;box-shadow:0 0 0 2px #fff1a8;border-radius:1px;font-style:normal}
#site-home-hero .ph,.on-dark .ph{color:#14110e}
/* review note: why/what — hidden by "Hide review notes" */
.rv{display:block;margin-top:.75rem;padding:.5rem .75rem;border:1px dashed rgba(20,17,14,.28);border-radius:2px;background:rgba(255,255,255,.5);font-family:var(--font-geist-mono);font-size:11px;line-height:1.55;color:#4a443e;letter-spacing:0;text-transform:none;font-style:normal;font-weight:400;max-width:48rem}
.rv::before{content:"REVIEW · ";color:var(--accent);font-weight:500}
span.rv{display:inline-block}
#site-home-hero .rv{background:rgba(20,17,14,.35);border-color:rgba(255,255,255,.3);color:rgba(255,255,255,.85)}
mark.chg{background:transparent;color:inherit;border-bottom:1px dashed var(--accent)}
body.clean .rv{display:none!important}
body.clean mark.chg{border-bottom:0}
/* pricing table: compare-panel (repo) handles padding/borders */
.ptable thead th{font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.ptable tbody th{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;padding-top:19px}
.ptable{min-width:44rem}
.filter-chip{white-space:nowrap}
/* review-note strip under the hero: compact, gone in clean view */
.home-page-stack:has(>section.rvwrap:first-child){padding-top:1.5rem}
body.clean .home-page-stack{padding-top:var(--page-section-gap)}
.home-page-stack>section.rvwrap .cmax{display:flex;flex-direction:column;gap:.5rem}
body.clean section.rvwrap{display:none}
/* services: text list (overview) + hero with art beside copy (service pages) */
.svc-list{display:grid;border-top:1px solid var(--hairline)}
@media(min-width:768px){.svc-list{grid-template-columns:1fr 1fr;column-gap:3rem}}
.svc-row{padding:2rem 0;border-bottom:1px solid var(--hairline);display:flex;flex-direction:column}
.svc-row .rail-cta-row{margin-top:auto;padding-top:1.25rem}
.svc-meta{margin-top:.75rem;font-size:.8125rem;line-height:1.6;color:color-mix(in srgb,var(--foreground) 74%,transparent)}
.svc-meta .price{color:var(--foreground)}
.svc-hero{display:grid;gap:2.5rem}
.svc-hero .svc-art{align-self:start}
@media(min-width:1024px){.svc-hero{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:4rem;align-items:center}.svc-hero .pillar-head{margin-bottom:0}}
.hs-act-row{display:flex;flex-wrap:wrap;gap:1rem 1.75rem;align-items:center}
@media(min-width:768px){.endrow.endrow-start{justify-content:flex-start;gap:2.25rem}}
.type-body .price{font-size:.92em}

/* ===================================================================== VIEW MODES
 * html.mode-site (default) = looks exactly like the launched site; html.mode-review = prototype bar, notes, yellow placeholders.
 * Everything below .mode-review-only is a prototype artifact; the dev should NOT port it. */
html:not(.mode-review) .proto,html:not(.mode-review) .rv,html:not(.mode-review) .rv-panel,html:not(.mode-review) section.rvwrap,
html:not(.mode-review) .review-only,html:not(.mode-review) .v-rv,html:not(.mode-review) .ph,html:not(.mode-review) .site-hidden,
html:not(.mode-review) .art-missing{display:none!important}
html.mode-review .v-site{display:none!important}
html:not(.mode-review) body.has-proto{--proto-h:0px}
html:not(.mode-review) body.has-proto .page{padding-top:7rem}
html:not(.mode-review) mark.chg{border-bottom:0}
html:not(.mode-review) .home-page-stack{padding-top:var(--page-section-gap)}
html:not(.mode-review) .svc-hero:has(.art-missing){grid-template-columns:minmax(0,1fr)}
html:not(.mode-review) .ph-link{color:inherit}
.view-switch{position:fixed;left:max(12px,env(safe-area-inset-left));bottom:calc(12px + env(safe-area-inset-bottom));z-index:90;display:flex;align-items:center;gap:.35rem;padding:.32rem .7rem;border:1px solid var(--hairline-strong,rgba(20,17,14,.18));border-radius:999px;background:rgba(250,248,245,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);font-family:var(--font-geist-mono);font-size:10px;letter-spacing:.12em;color:var(--muted,#6b645c);box-shadow:0 1px 3px rgba(20,17,14,.06)}
.view-switch button{font:inherit;letter-spacing:inherit;color:inherit;padding:.1rem .15rem;border-radius:2px;opacity:.6}
.view-switch button[aria-pressed="true"]{color:var(--foreground,#14110e);opacity:1;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--accent)}
.view-switch button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.view-switch .vs-k{color:var(--foreground,#14110e)}
html.no-switch .view-switch{display:none}
@media(max-width:767px){.view-switch{bottom:calc(64px + env(safe-area-inset-bottom))}}
@media print{.view-switch{display:none}}

/* ===================================================================== HOME (rebuild)
 * Hero headline: ≤3 lines, slightly smaller than before. */
.hero-title{font-size:clamp(1.5rem,3.7vw,2.75rem);max-width:48rem;line-height:1.1}
.hero-title.vi{font-size:clamp(1.4rem,3.4vw,2.45rem);max-width:50rem}
.anchor{display:block;position:relative;top:-6rem;visibility:hidden}
/* review notes: one collapsed panel (Review mode only) */
.rv-panel{margin:0 0 2rem;font-family:var(--font-geist-mono);font-size:11px;color:#4a443e}
.rv-panel summary{cursor:pointer;display:inline-block;padding:.3rem .65rem;border:1px dashed rgba(20,17,14,.28);border-radius:2px;letter-spacing:.06em}
.rv-panel summary::before{content:"REVIEW · ";color:var(--accent)}
.rv-panel[open] summary{margin-bottom:.25rem}
html.mode-review .home-page-stack{padding-top:2rem}
/* offers rail (repo LookbookRail) */
.home-rail{margin-bottom:var(--page-section-gap)}
.home-rail .rail{margin-top:3rem;outline:none}
.home-rail .rail:focus-visible{box-shadow:inset 0 0 0 2px var(--accent)}
.home-rail .lookbook-scroller{display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;align-items:flex-start}
.home-rail .lookbook-scroller::-webkit-scrollbar{display:none}
@media(prefers-reduced-motion:reduce){.home-rail .lookbook-scroller{scroll-behavior:auto}}
.rail-slide{flex:0 0 var(--lookbook-plate-w);min-width:0;scroll-snap-align:start;scroll-snap-stop:always}
.rail-plate{display:flex;flex-direction:column;background:var(--background)}
.rail-plate .lookbook-plate-frame{background:var(--lookbook-plate-bg);width:100%}
.rail-plate .lookbook-plate-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.rail-plate .rail-copy-block{padding-left:var(--gutter-x);padding-right:var(--gutter-x);display:flex;flex-direction:column;align-items:flex-start;max-width:42rem}
.plate-price{margin-top:.6rem;font-family:var(--font-geist-mono);font-size:12px;letter-spacing:.02em;color:var(--muted,#6b645c);font-variant-numeric:tabular-nums}
.plate-price .price{color:var(--foreground)}
.plate-price .sep{color:var(--muted)}
.rail-plate .lookbook-plate-caption{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:.6rem}
.plate-cta-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1.75rem;margin-top:1.1rem}
.plate-cta-row .lookbook-plate-cta{margin-top:0}
.plate-sample{font-size:12px}
.rail-nav{display:flex;align-items:center;justify-content:center;gap:1.25rem;padding-top:1.5rem;padding-bottom:1.5rem}
@media(min-width:768px){.rail-nav{gap:2rem;padding-top:2rem;padding-bottom:2rem}}
.rail-thumbs{display:flex;gap:6px}
.rail-thumb{position:relative;width:40px;aspect-ratio:4/3;overflow:hidden;border-radius:4px;border:1px solid var(--hairline);background:var(--lookbook-plate-bg);opacity:.55;transition:opacity .3s ease-out;padding:0}
@media(min-width:768px){.rail-thumb{width:44px}}
.rail-thumb[aria-pressed="true"],.rail-thumb:hover{opacity:1}
.rail-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rail-note{margin-top:.5rem;text-align:center}
.more-band{display:grid;gap:2.5rem;margin-top:var(--page-section-item-gap,5rem);padding-top:3rem;border-top:1px solid var(--hairline)}
@media(min-width:1024px){.more-band{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:5rem}}
.more-h{max-width:28rem}
.more-list{display:grid;gap:0;border-top:1px solid var(--hairline)}
@media(min-width:768px){.more-list{grid-template-columns:1fr 1fr;column-gap:3rem;border-top:0}}
.more-list li{padding:1.5rem 0;border-bottom:1px solid var(--hairline);display:flex;flex-direction:column;gap:.6rem}
@media(min-width:768px){.more-list li{border-top:1px solid var(--hairline);border-bottom:0;padding-top:1.25rem}}
.more-list li>p:last-child{margin-top:auto;padding-top:.4rem}
/* sound familiar */
.prob-grid{display:grid;gap:3rem}
@media(min-width:1024px){.prob-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:6rem;align-items:start}}
.prob-intro{max-width:30rem}
.prob-list{border-top:1px solid var(--hairline)}
.prob-list li{display:grid;grid-template-columns:2.5rem 1fr;gap:1rem;padding:1.05rem 0;border-bottom:1px solid var(--hairline)}
.prob-list .n{font-size:11px;color:var(--muted);padding-top:.3rem}
/* selected work */
.work-list{display:flex;flex-direction:column;gap:var(--page-section-item-gap,5rem);max-width:none}
.work-row{display:grid;gap:2rem;align-items:center}
@media(min-width:1024px){.work-row{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:4.5rem}.work-row:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,1.55fr)}.work-row:nth-child(even) .work-img{order:2}}
.work-img{display:block}
.work-img .lookbook-plate-frame{background:var(--lookbook-plate-bg)}
.work-img img{transition:transform .9s var(--ease-out-expo)}
.work-img:hover img{transform:scale(1.015)}
.work-copy{max-width:28rem}
/* how a project works */
.std-row{display:grid;gap:var(--lookbook-slide-gap,8px);grid-template-columns:1fr}
@media(min-width:768px){.std-row{grid-template-columns:repeat(3,1fr)}}
@media(max-width:767px){.std-row .std-fig:not(:first-child){display:none}}
.std-fig{margin:0}
.std-fig .lookbook-plate-frame{background:var(--lookbook-plate-bg)}
.std-fig img{object-fit:contain!important}
.step-row{display:grid;gap:0;margin-top:2.5rem;border-top:1px solid var(--hairline)}
@media(min-width:768px){.step-row{grid-template-columns:repeat(4,1fr);column-gap:2rem;border-top:0}}
.step-row li{padding:1.25rem 0;border-bottom:1px solid var(--hairline);display:flex;flex-direction:column;gap:.5rem}
@media(min-width:768px){.step-row li{border-top:1px solid var(--hairline);border-bottom:0}}
.step-row .n{font-size:11px;letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
.step-row li:first-child .n{color:var(--accent)}
.team-band{display:grid;gap:2.5rem;margin-top:var(--page-section-item-gap,5rem);padding-top:3rem;border-top:1px solid var(--hairline)}
@media(min-width:1024px){.team-band{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:5rem}}
.team-h{max-width:30rem}
.team-band .commit{display:grid;gap:0;border-top:1px solid var(--hairline)}
.team-band .commit li{padding:.95rem 0 .95rem 1.4rem;border-bottom:1px solid var(--hairline);position:relative}
.team-band .commit li::before{content:"—";position:absolute;left:0;color:var(--muted)}
/* who + apps + faq */
.who-row{display:grid;gap:0;margin-top:2.5rem;border-top:1px solid var(--hairline)}
@media(min-width:768px){.who-row{grid-template-columns:repeat(3,1fr);column-gap:2.5rem;border-top:0}}
.who-row li{padding:1.5rem 0;border-bottom:1px solid var(--hairline);display:flex;flex-direction:column;gap:.6rem}
@media(min-width:768px){.who-row li{border-top:1px solid var(--hairline);border-bottom:0}}
.who-row li>p:last-child{margin-top:auto;padding-top:.4rem}
.apps-band{display:grid;gap:2rem;align-items:center}
@media(min-width:1024px){.apps-band{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4.5rem}}
.apps-band .lookbook-plate-frame{background:var(--lookbook-plate-bg)}
.faq-grid{display:grid;gap:2rem}
@media(min-width:1024px){.faq-grid{grid-template-columns:minmax(0,.6fr) minmax(0,1.4fr);gap:5rem}}
/* final CTA band */
.final-band{background:#14110e;color:#faf8f5;padding:clamp(5rem,11vw,9rem) 0}
.final-h{font-size:clamp(1.75rem,4.2vw,3.25rem);line-height:1.08;letter-spacing:-.01em;font-weight:500;max-width:46rem;text-wrap:balance}
.final-sub{margin-top:1.5rem;max-width:36rem;color:rgba(250,248,245,.72);font-size:1.0625rem;line-height:1.6}
.final-row{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;margin-top:2.75rem}
.cta-band-primary{display:inline-flex;align-items:center;height:3rem;padding:0 1.5rem;border-radius:999px;background:var(--accent);color:#14110e;font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500}
.cta-band-primary:focus-visible,.band-link:focus-visible{outline:2px solid #faf8f5;outline-offset:3px}
.band-link{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:#faf8f5;text-decoration:underline;text-underline-offset:5px;text-decoration-color:rgba(250,248,245,.4)}
.final-band .ph{color:#14110e}
.art-missing{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:.75rem;background:var(--lookbook-plate-bg);color:var(--muted)}
.art-missing svg{width:40%;height:auto;opacity:.35}

/* ===== STAND-INS (Website: shown normally · Review: outlined + labelled) ===== */
.person-photo,.face{position:relative;overflow:hidden;background:var(--color-surface-muted,#efe9df)}
.person-photo{aspect-ratio:4/5;border-radius:4px;max-width:16rem}
.person-photo img,.face img{width:100%;height:100%;object-fit:cover;display:block}
.team-faces{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin:0 0 2rem;padding:0;list-style:none;max-width:30rem}
.team-faces .face{aspect-ratio:4/5;border-radius:4px}
.team-faces .type-label{margin-top:.6rem;font-size:10px;letter-spacing:.14em;line-height:1.5}
.si-link .si-target{display:none}
html.mode-review [data-stand-in]{outline:2px dashed var(--accent);outline-offset:3px}
html.mode-review [data-si="img"]{position:relative}
html.mode-review [data-si="img"]::after{content:attr(data-si-label);position:absolute;left:.5rem;top:.5rem;z-index:2;background:#fff3a8;color:#14110e;font:600 10px/1.3 var(--font-geist-mono),ui-monospace,monospace;letter-spacing:.06em;padding:.25rem .4rem;border-radius:2px;max-width:calc(100% - 1rem)}
html.mode-review [data-si="link"]::after{content:"LINK TẠM";margin-left:.35rem;background:#fff3a8;color:#14110e;font:600 9px/1 var(--font-geist-mono),ui-monospace,monospace;letter-spacing:.06em;padding:.15rem .3rem;border-radius:2px;vertical-align:middle}
html.mode-review .si-link .si-target{display:inline}
@media print{[data-stand-in]{outline:none!important}}
.rail-plate .rail-copy-block{margin-top:1.5rem}
.work-copy .rail-cta-row{margin-top:1.5rem}

/* ===== BATCH 3: inner pages (same editorial bar as Home) ===== */
.svc-hero .svc-art .pillar-art-frame{margin-top:0;background:var(--lookbook-plate-bg)}
@media(min-width:1024px){.svc-hero.no-art{grid-template-columns:minmax(0,1fr)}.svc-hero.no-art .pillar-head{max-width:46rem}}
.page-hero .pillar-head .type-body{max-width:34rem}
@media(min-width:1024px){.page-hero.hero-photo .svc-art{max-width:30rem;justify-self:end;width:100%}}
@media(max-width:1023px){.page-hero.hero-photo .svc-art{max-width:26rem}}
/* three editorial columns with hairline tops (pricing notes) */
.trio{display:grid;gap:0;border-top:1px solid var(--hairline)}
@media(min-width:900px){.trio{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:3rem;border-top:0}}
.trio>li{padding:1.75rem 0;border-bottom:1px solid var(--hairline)}
@media(min-width:900px){.trio>li{border-top:1px solid var(--hairline);border-bottom:0;padding-top:1.5rem}}
.trio .commit{border-top:0}
.trio .commit li{padding:.55rem 0 .55rem 1.4rem;position:relative}
.trio .commit li::before{content:"—";position:absolute;left:0;color:var(--muted)}
/* pull figure (segment illustration) */
.pull{margin-left:0;margin-right:0;padding-top:2rem;border-top:1px solid var(--hairline);max-width:52rem}
.pull-q{margin:0;font-size:clamp(1.25rem,2.3vw,1.75rem);line-height:1.35;letter-spacing:-.005em;text-wrap:pretty}
/* company facts (about) */
.facts{margin:0;border-top:1px solid var(--hairline)}
.facts .fact{display:grid;gap:.3rem;padding:1rem 0;border-bottom:1px solid var(--hairline)}
@media(min-width:640px){.facts .fact{grid-template-columns:10rem 1fr;gap:2rem;align-items:baseline}}
.facts dt{color:var(--muted);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase}
.facts dd{margin:0;font-size:1rem}
.facts dd.mono{font-family:var(--font-geist-mono),ui-monospace,monospace;font-size:.9375rem}
.team-band .commit a{text-decoration:none}
.team-grid{row-gap:3.5rem}
/* index lists (guides / insights) */
.idx-list{border-top:1px solid var(--hairline)}
.idx-row{display:grid;gap:.75rem;padding:2.25rem 0;border-bottom:1px solid var(--hairline)}
@media(min-width:900px){.idx-row{grid-template-columns:3.5rem minmax(0,1.15fr) minmax(0,1fr);gap:3rem;align-items:start;padding:2.75rem 0}}
.idx-row .n{font-size:11px;color:var(--muted);padding-top:.55rem}
.idx-row .rail-cta-row{margin-top:1.25rem}
/* case pages */
.next-case{padding-top:3rem;border-top:1px solid var(--hairline)}
.case-start .work-img .lookbook-plate-frame img{object-fit:cover}
/* legal docs: sticky contents + prose */
.doc-head{max-width:46rem}
.doc-layout{display:grid;gap:2.5rem}
@media(min-width:1024px){.doc-layout{grid-template-columns:15rem minmax(0,44rem);gap:5rem;align-items:start}.doc-toc{position:sticky;top:7rem}}
.doc-toc ol{border-top:1px solid var(--hairline)}
.doc-toc li a{display:flex;gap:.75rem;padding:.55rem 0;border-bottom:1px solid var(--hairline);font-size:.875rem;line-height:1.4;text-decoration:none}
.doc-toc .n{font-size:11px;color:var(--muted);padding-top:.15rem}
@media(max-width:1023px){.doc-toc{display:none}}
.doc-sec{scroll-margin-top:7rem}