/* =====================================================================================
 * Haikotek prototype v1.2 — "like the real site".
 * Load order: haikotek.css (repo globals.css, verbatim) → style.css (v1.0.1 layout port) → v12.css.
 * Every rule below re-creates a pattern from the live repo (HaikoTek/haikotek-web, develop):
 *   Navbar.tsx + use-past-home-hero.ts + header-styles.ts · HeaderServicesMenu.tsx · HomeHero.tsx ·
 *   HomeSectionShell.tsx · LookbookRail · HomeWorkStrip · PillarPage.tsx · SiteFooter.tsx + footer-styles.ts ·
 *   editorial-styles.ts (cta-outline, cta-hero-*, editorial-link, type-*) · globals.css spacing tokens.
 * Additions that do NOT exist on live are marked [v1.2+] — port them as new components.
 * ===================================================================================== */

/* ---------- 0. Tokens (live values; only [v1.2+] extras added) ---------- */
:root{
  --ease:var(--ease-out-expo);
  /* [v1.2+] one arrow for the whole site: lucide arrow-right geometry, drawn as a mask so it takes currentColor */
  --arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15.5'/%3E%3Cpath d='m13.5 6 6 6-6 6'/%3E%3C/svg%3E");
  --arrow-size:1.05em; --arrow-gap:.5em;
  /* [v1.2+] price display */
  --price-num:clamp(1.375rem,1.9vw,1.75rem);
}
html.prices-muted{--price-num:1.0625rem}

/* ---------- 1. Base: live type, no mono voice ---------- */
body.v12{font-size:15px;line-height:1.55}
.v12 h1,.v12 h2,.v12 h3,.v12 .hero-title{text-wrap:balance;hyphens:none}
.v12 p,.v12 li{text-wrap:pretty}
.v12 .mono,.v12 .mono-n,.v12 .price{font-family:inherit;font-variant-numeric:tabular-nums;letter-spacing:inherit}
.v12 code{font-family:var(--font-geist-mono),ui-monospace,monospace}
.v12 .kicker{font-size:var(--type-eyebrow);font-weight:500;line-height:1.35;letter-spacing:var(--type-eyebrow-tracking);text-transform:uppercase;color:var(--type-eyebrow-ink)}
@media(min-width:768px){.v12 .kicker{font-size:var(--type-eyebrow-md)}}

/* ---------- 2. ARROW STANDARD [v1.2+] — one glyph, one weight, one hover, everywhere ---------- *
 * Text links stay the live .editorial-link (11–12px caps, 0.18em tracking, 1px underline @30%, offset 5px).
 * Where a link points onward (cards, rows, "read more") it gets the same thin arrow, 1.25 stroke, muted 70%. */
.v12 .ar,
.v12 .lookbook-plate-cta::after,.v12 a.editorial-link.arrow::after,.v12 .who-arrow,.v12 .sv-all::after{
  content:"";display:inline-block;flex:none;width:var(--arrow-size);height:var(--arrow-size);vertical-align:-.2em;
  background:currentColor;-webkit-mask:var(--arrow) center/contain no-repeat;mask:var(--arrow) center/contain no-repeat;
  opacity:.7;transition:transform var(--duration-base) var(--ease),opacity var(--duration-base) var(--ease)}
.v12 .lookbook-plate-cta::after,.v12 a.editorial-link.arrow::after,.v12 .sv-all::after{margin-left:var(--arrow-gap)}
.v12 .lookbook-plate-cta,.v12 a.editorial-link.arrow{text-decoration-thickness:1px;text-decoration-color:rgba(20,17,14,.3)}
.v12 .lookbook-plate-cta:hover::after,.v12 a.editorial-link.arrow:hover::after,.v12 a:hover>.who-arrow,.v12 a:hover .ar,.v12 .sv-all:hover::after{transform:translateX(2px);opacity:1}
.v12 .editorial-link,.v12 .lookbook-plate-cta,.v12 .editorial-link-on-dark{transition:text-decoration-color var(--duration-base) var(--ease)}
.v12 .editorial-link:hover,.v12 .lookbook-plate-cta:hover{text-decoration-color:rgba(20,17,14,.6)}
.v12 .editorial-link-on-dark:hover{text-decoration-color:rgba(250,248,245,.8)}
/* live underline restored (style.css a{text-decoration:none} is unlayered and beat it in v1.1) */
.v12 a.editorial-link{text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:rgba(20,17,14,.3);text-underline-offset:5px}
.v12 a.editorial-link:hover{text-decoration-color:rgba(20,17,14,.6)}
.v12 a.editorial-link-on-dark{text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:rgba(250,248,245,.45);text-underline-offset:5px}
.v12 .rail-cta-row a.editorial-link,.v12 p>a.editorial-link{display:inline-block}
/* the underline must not run under the arrow */
.v12 .lookbook-plate-cta,.v12 a.editorial-link.arrow{display:inline;text-decoration-skip-ink:auto}

/* ---------- 3. CTAs & pills (live editorial-styles.ts) ---------- */
/* .cta-outline, .cta-hero-primary/secondary, .cta-hero-cream-* come verbatim from haikotek.css.
 * v1.1 primary buttons are mapped back onto live classes: */
.v12 .btn-primary{display:inline-flex;min-height:2.65rem;min-width:11rem;align-items:center;justify-content:center;border-radius:9999px;
  border:1px solid var(--accent);background:var(--accent);padding:.625rem 2rem;font-size:11px;font-weight:400;letter-spacing:var(--type-link-tracking);
  text-transform:uppercase;color:var(--logo-cream);cursor:pointer}
.v12 .btn-text{font-size:var(--type-link);letter-spacing:var(--type-link-tracking);text-transform:uppercase;color:var(--muted);background:none;border:0;padding:0;cursor:pointer;transition:color .5s var(--ease)}
.v12 .btn-text:hover{color:var(--foreground)}
@media(min-width:768px){.v12 .btn-text{font-size:var(--type-link-md)}}
.v12 .hs-act-row,.v12 .act{gap:.5rem 1.25rem}
.v12 .hs-act-row{gap:.5rem}
.v12 .hs-act-row .editorial-link{margin-left:.75rem}

/* ---------- 4. Header (Navbar.tsx) ---------- */
#hdr{transition:background-color .5s var(--ease),backdrop-filter .5s var(--ease),box-shadow .5s var(--ease)}
.v12 .hbar{column-gap:1.5rem}
.v12 .hnav{gap:.5rem 2rem}
.v12 .hright{gap:.5rem 2rem}
.v12 .sv-caret{display:none}
/* "Talk to us" slot: plain nav-link like live, plus a 5px ember dot [v1.2+] */
.v12 .hdr-book{display:inline-flex;align-items:center;gap:.5rem}
.v12 .hdr-book::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent)}
/* state 1 — top of home: transparent on the hero ground (live overlay) */
/* state 2 — [v1.2+] still over the hero but scrolled: espresso frost so hero copy never shows through */
#hdr.overlay.hdr-tint:not(.menu-open){background:rgba(84,52,40,.72);backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3);box-shadow:inset 0 -1px 0 rgba(255,255,255,.08)}
/* state 3 — past the hero / interior pages: live headerFrostClassName (cream 55% + blur-xl + saturate-150) */
/* open menu: always cream frost (legible panel on top of the hero) */
#hdr.menu-open{background:rgba(250,248,245,.94);box-shadow:0 1px 0 var(--hairline),0 24px 48px -28px rgba(20,17,14,.18)}

/* ---------- 5. Services mega menu (HeaderServicesMenu.tsx, elevated) ---------- */
.v12 #sv-row{padding:0 var(--gutter-x)}
.v12 #sv-row[hidden]{display:none}
.v12 .sv-grid{display:grid;grid-template-columns:minmax(14rem,1fr) minmax(0,3.6fr);gap:3rem;padding:1.25rem 0 2.25rem;border-top:1px solid var(--hairline)}
.v12 .sv-intro{display:flex;flex-direction:column;gap:1rem;padding-top:.25rem}
.v12 .sv-intro .sv-lede{font-size:var(--type-display-sm);font-weight:400;line-height:1.22;letter-spacing:var(--type-display-tracking);color:var(--foreground);max-width:16rem}
.v12 .sv-intro .sv-links{display:flex;flex-direction:column;gap:.85rem;margin-top:auto}
.v12 #sv-row .sv-items{display:grid;flex-wrap:nowrap;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--page-grid-gap)}
.v12 #sv-row .sv-items li{display:block}
.v12 #sv-row a.sv-item{display:flex}
.v12 .sv-item{display:flex;flex-direction:column;height:100%;color:var(--foreground)}
.v12 .sv-art{display:block;aspect-ratio:var(--pillar-frame-aspect);overflow:hidden;background:var(--lookbook-plate-bg);position:relative}
.v12 .sv-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.v12 .sv-item:hover .sv-art img{transform:scale(1.03)}
.v12 .sv-t{margin-top:1rem;font-size:var(--type-rail-title);font-weight:400;line-height:1.35;letter-spacing:var(--type-rail-title-tracking);text-transform:uppercase}
.v12 .sv-c{margin-top:.5rem;font-size:var(--type-rail-caption);line-height:1.5;color:color-mix(in srgb,var(--foreground) 74%,transparent);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.v12 .sv-m{margin-top:.75rem;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-variant-numeric:tabular-nums}
.v12 .sv-item.active .sv-t{color:var(--accent)}
.v12 .sv-all{display:inline-flex;align-items:center}
@media(max-width:1279px){.v12 .sv-grid{grid-template-columns:1fr;gap:1.5rem}.v12 .sv-intro{flex-direction:row;align-items:baseline;justify-content:space-between}.v12 .sv-intro .sv-lede{max-width:none}.v12 .sv-intro .sv-links{flex-direction:row;gap:2rem;margin-top:0}}
/* mobile menu (HeaderMobileMenu.tsx): group heading + item + one-line description */
.v12 #mob .mgrp{margin-top:2.5rem}
.v12 #mob .mgrp>.type-label{font-size:15px;letter-spacing:.025em;text-transform:none;color:var(--foreground);font-weight:400}
.v12 #mob .mgrp .sub{margin-top:.75rem;display:flex;flex-direction:column}
.v12 #mob .mgrp .sub a{padding:.7rem 0 .7rem 1rem;font-size:15px;color:var(--foreground);letter-spacing:0}
.v12 #mob .mgrp .sub a .d{display:block;margin-top:.35rem;font-size:12px;line-height:1.55;color:var(--muted)}
.v12 #mob .mgrp>a{font-size:15px;letter-spacing:.025em;padding:.85rem 0}

/* ---------- 6. Home hero slider (HomeHero.tsx) ---------- */
.v12 #site-home-hero{height:auto;min-height:max(560px,var(--home-hero-h))}
.v12 #site-home-hero .hero-in{height:auto;min-height:max(560px,var(--home-hero-h))}
.v12 #site-home-hero .hero-copy{padding-top:calc(7.75rem + var(--proto-h,0px))}
.v12 .hero-stage{display:grid;width:100%;max-width:56rem;margin:0 auto}
.v12 .hero-stage>.hslide{grid-area:1/1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}
.v12 .hslide[aria-hidden="true"]{visibility:hidden}
.v12 .hero-copy{max-width:min(92vw,72rem)}
.v12 .hero-title{font-size:clamp(2rem,1.3rem + 3.2vw,3.5rem);font-weight:600;line-height:1.1;letter-spacing:-.035em;text-transform:none;max-width:none}
html[lang=vi] .v12 .hero-title{font-size:clamp(1.9rem,1.2rem + 2.8vw,3.2rem);line-height:1.14;letter-spacing:-.025em}
.v12 .hero-copy .type-hero-sub{margin:1.5rem auto 0;max-width:38rem;font-size:clamp(1rem,.9rem + .5vw,1.25rem);font-weight:400;line-height:1.5;letter-spacing:0;text-transform:none;color:rgba(255,255,255,.68)}
.v12 .hero-ctas{margin-top:2.5rem;gap:.75rem 1rem}
@media(min-width:640px){.v12 .hero-ctas{margin-top:3rem}}
.v12 .hero-eyebrow,.v12 .hero-steps,.v12 .hero-cue{display:none}
.v12 .hero-dots{position:relative;z-index:10;display:flex;justify-content:center;gap:.375rem;padding:.5rem var(--gutter-x) 1.25rem}
@media(min-width:768px){.v12 .hero-dots{padding-bottom:1.5rem}}
.v12 .hero-dots button{display:flex;align-items:center;justify-content:center;height:2.75rem;min-width:4.5rem;cursor:pointer}
@media(min-width:640px){.v12 .hero-dots button{min-width:5.5rem}}
.v12 .hero-dots .trk{position:relative;display:block;height:1px;width:4.5rem;overflow:hidden;border-radius:9999px;background:rgba(255,255,255,.35)}
@media(min-width:640px){.v12 .hero-dots .trk{width:5.5rem}}
.v12 .hero-dots .fill{position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left center}
.v12 .hero-dots button[aria-pressed="true"] .fill{transform:scaleX(1)}
.v12 .hero-dots.run button[aria-pressed="true"] .fill{animation:haikotek-hero-progress linear forwards;animation-duration:var(--slide-ms,7000ms)}
.v12 .hero-dots.paused button[aria-pressed="true"] .fill{animation-play-state:paused}
/* announcement pill top-right (AnnouncementTicker tone="onDark") — carries the deck's proof line */
.v12 .hero-note{position:absolute;z-index:20;top:calc(4.25rem + var(--proto-h,0px));right:var(--gutter-x);display:flex;align-items:center;gap:.6rem;max-width:min(34rem,calc(100vw - 2*var(--gutter-x)));
  padding:.45rem .8rem;border:1px solid rgba(255,255,255,.28);border-radius:6px;background:rgba(250,248,245,.16);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  font-size:11px;line-height:1.35;color:rgba(255,255,255,.9);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v12 .hero-note .d{width:5px;height:5px;border-radius:50%;background:var(--accent);flex:none}
@media(min-width:768px){.v12 .hero-note{top:calc(4.75rem + var(--proto-h,0px))}}
@media(max-width:767px){.v12 .hero-note{left:var(--gutter-x);right:var(--gutter-x)}}
@media(prefers-reduced-motion:reduce){.v12 .hero-dots .fill{animation:none!important}}

/* ---------- 7. Home rhythm (globals.css .home-page-stack: gap 48 / 80 / 96px) ---------- */
.v12 .home-page-stack,html:not(.mode-review) .v12 .home-page-stack{display:flex;flex-direction:column;gap:var(--page-section-gap);padding-top:var(--page-section-gap)}
.v12 .home-page-stack>*{margin:0!important}
.v12 .home-page-stack>.review-only{order:-1}
html.mode-review .v12 .home-page-stack{padding-top:2rem}
.v12 .proof-strip{display:none}
.v12 .home-page-footer-gap{height:var(--page-section-gap)}
/* HomeSectionShell: eyebrow → display-sm → body; actions right */
.v12 .hs-head .txt .type-body{margin-top:var(--editorial-display-to-body);max-width:42rem}
.v12 .hs-body{margin-top:var(--page-section-header-to-content)}
.v12 .home-rail .rail{margin-top:var(--page-section-header-to-content)}
.v12 .home-rail{margin-bottom:0}
.v12 .rail-note{margin-top:0;text-align:center}
.v12 .more-band{margin-top:var(--page-section-item-gap);padding-top:var(--page-section-item-gap)}

/* ---------- 8. Prices [v1.2+] — live idiom: caps label · light tabular figure · caps meta ---------- */
.v12 .price-block{margin-top:var(--rail-title-to-caption);display:flex;flex-direction:column;gap:.35rem}
.v12 .price-big{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.5rem;row-gap:.15rem;line-height:1}
.v12 .price-big .pfx,.v12 .p-lbl{font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--type-eyebrow-ink)}
.v12 .price-big .pfx{flex-basis:100%;margin-bottom:.35rem}
.v12 .price-big .price{font-size:var(--price-num);font-weight:300;letter-spacing:.01em;color:var(--foreground);font-variant-numeric:tabular-nums lining-nums}
.v12 .pc{margin-left:.3em;font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);vertical-align:.35em}
.v12 .pc.pre{margin-left:0;margin-right:.15em}
.v12 .pu{margin-left:.35em;font-size:.6em;color:var(--muted);font-weight:400}
.v12 .price-meta{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-variant-numeric:tabular-nums}
.v12 .plate-price{margin-top:var(--rail-title-to-caption);font-family:inherit;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.v12 .plate-price .price{color:var(--muted)}
.v12 .rail-plate .lookbook-plate-caption,.v12 .plate .type-rail-caption{margin-top:var(--rail-title-to-caption)}

/* ---------- 9. Sound familiar + audience rows ---------- */
.v12 .prob-grid{gap:3rem}
@media(min-width:1024px){.v12 .prob-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:6rem}}
.v12 .prob-intro .type-body{margin-top:var(--editorial-display-to-body)}
.v12 .prob-intro .hs-act-row{margin-top:1.75rem}
.v12 .prob-list li{grid-template-columns:2.5rem 1fr;padding:1.1rem 0;font-size:var(--type-body-md);line-height:1.55;color:var(--foreground)}
.v12 .prob-list .n{font-size:13px;color:var(--muted);padding-top:0;font-variant-numeric:tabular-nums}
.v12 .who-inline{margin-top:3rem}
.v12 .who-inline ul{margin-top:1rem;border-top:1px solid var(--hairline)}
.v12 .who-inline a{display:grid;grid-template-columns:1fr auto;column-gap:1.5rem;row-gap:.3rem;align-items:center;padding:1.1rem 0;border-bottom:1px solid var(--hairline);transition:color var(--duration-base) var(--ease)}
.v12 .who-t{font-size:var(--type-body-md);font-weight:400;color:var(--foreground);line-height:1.45}
.v12 .who-c{grid-column:1;font-size:13px;line-height:1.5;color:var(--muted)}
.v12 .who-t::first-letter{text-transform:uppercase}
.v12 .who-arrow{grid-column:2;grid-row:1/span 2;color:var(--foreground);font-size:15px}

/* ---------- 10. Work (HomeWorkStrip type + image plates) ---------- */
.v12 .work-list{display:grid!important;grid-template-columns:1fr;gap:var(--page-section-item-gap) var(--page-grid-gap)}
@media(min-width:900px){.v12 .work-list{grid-template-columns:1fr 1fr}.v12 .work-list>.work-row:first-child{grid-column:1/-1}}
.v12 .work-row,.v12 .work-row:nth-child(even){display:flex!important;flex-direction:column;gap:0;align-items:stretch}
.v12 .work-row:nth-child(even) .work-img{order:0}
.v12 .work-img .lookbook-plate-frame{aspect-ratio:16/10!important;background:var(--lookbook-plate-bg);box-shadow:none}
.v12 .work-list>.work-row:first-child .work-img .lookbook-plate-frame{aspect-ratio:16/7.5!important}
.v12 .work-list>.work-row:first-child .work-img img{object-position:50% 12%}
.v12 .work-copy{max-width:42rem;padding-top:var(--rail-copy-pt-md)}
.v12 .work-copy .type-display-sm{margin-top:.75rem}
.v12 .work-copy .rail-cta-row{margin-top:var(--rail-caption-to-cta-md)}
.v12 .work-copy .type-rail-caption:empty{display:none}

/* ---------- 11. How a project works (EditorialRail "Engineering standards") ---------- */
.v12 .thread,.v12 .thread-wrap,.v12 .band-glow{display:none!important}
.v12 .std-row{gap:var(--lookbook-slide-gap)}
.v12 .std-fig .lookbook-plate-frame{aspect-ratio:var(--pillar-frame-aspect)!important;background:var(--lookbook-plate-bg);box-shadow:none}
.v12 .std-fig img{object-fit:cover!important}
.v12 .fig{display:none}
.v12 .step-row{margin-top:var(--rail-copy-pt-md);border-top:0;column-gap:var(--page-grid-gap)}
.v12 .step-row li{border-top:1px solid var(--hairline);padding:1.1rem 0 0;gap:0}
.v12 .step-row .n{font-size:13px;letter-spacing:0;text-transform:none;color:var(--muted);font-variant-numeric:tabular-nums}
.v12 .step-row li:first-child .n{color:var(--accent)}
.v12 .step-row .type-rail-title{margin-top:.75rem}
.v12 .step-row .type-rail-caption{margin-top:var(--rail-title-to-caption)}
.v12 .step-row .type-rail-caption::first-letter{text-transform:uppercase}
@media(max-width:767px){.v12 .step-row li{padding-bottom:1.1rem;border-bottom:0}}

/* ---------- 12. Team [v1.2+] — anonymous roles, sketch avatars ---------- */
.v12 .team-sec .hs-head .txt{max-width:42rem}
.v12 .roles{display:grid;grid-template-columns:1fr;gap:var(--page-section-item-gap) var(--page-grid-gap);margin-top:var(--page-section-header-to-content)}
@media(min-width:768px){.v12 .roles{grid-template-columns:repeat(3,minmax(0,1fr))}}
.v12 .role{display:flex;flex-direction:column}
.v12 .role-art{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--surface)}
.v12 .role-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.v12 .role-n{margin-top:var(--rail-copy-pt-md);font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.v12 .role-n.lead{color:var(--accent)}
.v12 .role .type-rail-title{margin-top:.6rem}
.v12 .role .type-rail-caption{margin-top:var(--rail-title-to-caption)}
.v12 .role-tag{display:inline-flex;align-self:flex-start;margin-top:1rem}
.v12 .team-commit{display:grid;gap:0;margin-top:var(--page-section-item-gap);border-top:1px solid var(--hairline)}
@media(min-width:768px){.v12 .team-commit{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--page-grid-gap);border-top:0}}
.v12 .team-commit li{padding:1rem 0;border-bottom:1px solid var(--hairline);font-size:var(--type-body-md);line-height:1.5;color:var(--foreground)}
@media(min-width:768px){.v12 .team-commit li{border-top:1px solid var(--hairline);border-bottom:0}}
/* compact "who you'll talk to" line — closing band + contact */
.v12 .talk{display:flex;align-items:center;gap:.9rem;margin-top:1.5rem}
.v12 .talk .faces{display:flex;flex:none}
.v12 .talk .faces img{width:2.5rem;height:2.5rem;border-radius:50%;object-fit:cover;background:var(--surface);border:1px solid var(--background);box-shadow:0 0 0 1px var(--hairline-strong)}
.v12 .talk .faces img+img{margin-left:-.6rem}
.v12 .talk p{font-size:13px;line-height:1.5;color:color-mix(in srgb,var(--foreground) 74%,transparent);max-width:28rem}
.v12 .talk p b{font-weight:500;color:var(--foreground)}
/* drop v1.1 team leftovers */
.v12 .team-band .team-h{font-size:var(--type-display-sm);font-weight:400;letter-spacing:var(--type-display-tracking);line-height:1.22}

/* ---------- 13. Lab + FAQ ---------- */
.v12 .apps-band .lookbook-plate-frame{background:var(--surface);padding:clamp(1rem,3vw,2.5rem);aspect-ratio:auto!important;box-shadow:none}
.v12 .apps-band .lookbook-plate-frame img{position:static;width:100%;height:auto;box-shadow:0 1px 2px rgba(20,17,14,.06),0 18px 40px -24px rgba(20,17,14,.35)}
.v12 .apps-band .type-display-sm{margin-top:var(--editorial-eyebrow-to-title)}
.v12 .apps-band .type-body{margin-top:var(--editorial-display-to-body)}
.v12 .faq summary{font-size:var(--type-body-md);padding:.1rem 0;align-items:baseline}
.v12 .faq details{padding:1.1rem 0}
.v12 .faq summary::after{content:"";flex:none;width:.7rem;height:.7rem;background:linear-gradient(currentColor,currentColor) center/100% 1px no-repeat,linear-gradient(currentColor,currentColor) center/1px 100% no-repeat;color:var(--muted);transition:transform var(--duration-base) var(--ease)}
.v12 .faq details[open] summary::after{content:"";transform:rotate(45deg)}
html:not(.mode-review) .v12 details.needs-answer{display:none}
html:not(.mode-review) .v12 .faq details:not(.needs-answer):nth-last-child(1 of :not(.needs-answer)){border-bottom:1px solid var(--hairline)}

/* ---------- 14. Closing call-to-action (replaces v1.1 brown band) ---------- */
.v12 .final-band,.v12 .closing{background:var(--background);color:var(--foreground);padding-top:0;padding-bottom:0}
.v12 .closing-in{display:grid;gap:2rem;padding:var(--page-section-item-gap) 0 0;border-top:1px solid var(--hairline)}
@media(min-width:1024px){.v12 .closing-in{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:3rem;align-items:end}}
.v12 .closing-h{font-size:var(--type-work-hero);font-weight:400;line-height:1.12;letter-spacing:var(--type-display-tracking);max-width:32rem;color:var(--foreground)}
.v12 .closing .type-body{margin-top:var(--editorial-display-to-body);max-width:32rem}
.v12 .closing-act{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
@media(min-width:1024px){.v12 .closing-act{justify-content:flex-end}}
.v12 .closing-act .editorial-link{margin-left:.75rem}
/* interior pages: closing sits inside the page rhythm */
.v12 .page+.closing{margin-top:calc(-1 * max(var(--section-y),4rem) + var(--page-section-gap))}
.v12 .closing+.site-footer,.v12 main:has(.closing:last-child)+.site-footer{margin-top:var(--page-section-gap)}

/* ---------- 15. Footer (SiteFooter.tsx — one bar, as live) ---------- */
.v12 .site-footer{border-top:0;background:var(--background)}
.v12 .site-footer-inner{padding-top:1.5rem}
@media(min-width:768px){.v12 .site-footer-inner{padding-top:2rem}}
.v12 .fbar{border-top:0;padding:0 0 1.25rem;gap:.5rem 1.5rem}
.v12 .fbar nav{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.5rem}
@media(min-width:768px){.v12 .fbar nav{gap:.5rem 2rem}.v12 .fbar{gap:.5rem 2rem}}
.v12 .fbar .nav-link{line-height:1.5;letter-spacing:0}
.v12 .fcopy{font-size:13px;line-height:1.5}
.v12 .flegal{padding:1rem 0 max(1.5rem,env(safe-area-inset-bottom));border-top:1px solid var(--hairline);font-size:11px;line-height:1.6;color:var(--muted);max-width:none}
@media(min-width:768px){.v12 .flegal{padding-bottom:max(1.75rem,env(safe-area-inset-bottom))}}
.v12 .fsoc{position:relative}
.v12 .fsoc-btn{font-size:13px;line-height:1.5;color:var(--nav-ink);cursor:pointer;transition:color .5s var(--ease)}
.v12 .fsoc-btn:hover,.v12 .fsoc-btn[aria-expanded="true"]{color:var(--nav-ink-hover)}
.v12 .fsoc-panel{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);z-index:50;min-width:10.5rem;padding-bottom:.625rem}
.v12 .fsoc-panel[hidden]{display:none}
.v12 .fsoc-panel ul{display:flex;flex-direction:column;gap:.125rem;background:var(--background);padding:.5rem .75rem;box-shadow:var(--shadow-elevated)}
.v12 .fsoc-panel a{display:block;white-space:nowrap;text-align:center;padding:.375rem .625rem;font-size:13px;color:var(--nav-ink);border-radius:2px}
.v12 .fsoc-panel a:hover{color:var(--nav-ink-hover)}
@media(max-width:767px){.v12 .fbar{flex-direction:column;align-items:flex-start}}

/* ---------- 16. Interior pages (PillarPage.tsx: pt-24/28, max-w 1100, mt-12/16 sections) ---------- */
.v12 .page,html:not(.mode-review) .v12 .page,html:not(.mode-review) body.has-proto.v12 .page{padding-top:6rem}
@media(min-width:768px){.v12 .page,html:not(.mode-review) .v12 .page,html:not(.mode-review) body.has-proto.v12 .page{padding-top:7rem}}
html.mode-review body.has-proto.v12 .page{padding-top:calc(7rem + 28px)}
.v12 .crumb{margin-bottom:2.5rem}
.v12 .pillar-head{max-width:42rem}
.v12 .pillar-head h1{margin-top:1.25rem}
.v12 .pillar-head>.type-body{margin-top:1.5rem;max-width:42rem}
.v12 .pillar-head .hs-act-row{margin-top:2rem}
.v12 .svc-hero{display:block}
.v12 .svc-hero .svc-art{margin-top:3rem;max-width:none!important;width:100%}
@media(min-width:768px){.v12 .svc-hero .svc-art{margin-top:4rem}}
.v12 .svc-hero .pillar-art-frame{aspect-ratio:var(--pillar-frame-aspect)!important;background:var(--surface);margin-top:0}
.v12 .svc-hero .pillar-art-frame img{object-fit:cover}
.v12 .mt-24,.v12 section.mt-24{margin-top:3.5rem}
@media(min-width:768px){.v12 .mt-24,.v12 section.mt-24{margin-top:4rem}}
.v12 .mt-16{margin-top:3rem}
@media(min-width:768px){.v12 .mt-16{margin-top:4rem}}
.v12 .psec{margin-top:3rem}
@media(min-width:768px){.v12 .psec{margin-top:4rem}}
.v12 .kv{padding:1.5rem 0}
@media(min-width:768px){.v12 .kv{grid-template-columns:14rem 1fr;gap:2rem}}
.v12 .endrow{margin-top:3.5rem;padding-top:2rem}
@media(min-width:768px){.v12 .endrow{margin-top:4rem}}
.v12 .endrow .hs-act-row,.v12 .endrow{gap:.5rem 1.25rem}
.v12 .team-band{margin-top:3.5rem;padding-top:2.5rem}
@media(min-width:768px){.v12 .team-band{margin-top:4rem}}
.v12 .caption{margin-top:1.25rem;font-size:13px;color:var(--muted)}
/* services index */
.v12[data-page="services"] #offers .hs-head{display:none}
.v12[data-page="services"] #offers .hs-body{margin-top:0}
.v12 .plates{gap:var(--page-section-item-gap) var(--page-grid-gap)}
.v12 .plate .pillar-art-frame{margin-top:0;aspect-ratio:var(--pillar-frame-aspect)!important}
.v12 .plate .rail-copy-block{margin-top:var(--rail-copy-pt-md)!important}
.v12 .svc-row{padding:1.75rem 0}
.v12 .svc-row.has-thumb{display:grid;grid-template-columns:8rem 1fr;column-gap:1.5rem;align-items:start}
.v12 .svc-row.has-thumb>*:not(.svc-thumb){grid-column:2}
.v12 .svc-thumb{grid-row:1/span 4;display:block;aspect-ratio:var(--pillar-frame-aspect);overflow:hidden;background:var(--lookbook-plate-bg)}
.v12 .svc-thumb img{width:100%;height:100%;object-fit:cover}
.v12 .svc-meta{margin-top:.75rem;font-size:13px;color:var(--muted)}
.v12 .svc-meta .price{color:var(--foreground)}
.v12 .svc-row .rail-cta-row{padding-top:1rem;margin-top:0}
@media(max-width:600px){.v12 .svc-row.has-thumb{grid-template-columns:5.5rem 1fr;column-gap:1rem}}

/* ---------- 17. Pricing sheet [v1.2+ layout on the live compare-panel] ---------- */
.v12 .compare-panel.ptable-wrap{border:0;border-radius:0;background:transparent;overflow:visible;border-top:1px solid var(--hairline-strong)}
.v12 .ptable{min-width:0;table-layout:auto}
.v12 .ptable thead th{background:transparent;border-bottom:1px solid var(--hairline)!important;padding:1rem 1.25rem 1rem 0;font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--type-eyebrow-ink);vertical-align:bottom}
.v12 .ptable th,.v12 .ptable td{padding:1.5rem 1.25rem 1.5rem 0;vertical-align:baseline;border-color:var(--hairline)!important}
.v12 .ptable tbody th{font-size:var(--type-rail-title-md);font-weight:400;letter-spacing:var(--type-rail-title-tracking);text-transform:uppercase;color:var(--foreground);padding-top:1.6rem}
.v12 .ptable tbody th a{transition:color var(--duration-base) var(--ease)}
.v12 .ptable tbody th a:hover{color:color-mix(in srgb,var(--foreground) 65%,transparent)}
.v12 .ptable td.price{white-space:nowrap;font-size:13px;color:var(--muted)}
.v12 .ptable td.price .p-lbl{display:block;margin-bottom:.45rem}
.v12 .ptable td.price>.price{display:inline-block;font-size:var(--price-num);font-weight:300;letter-spacing:.01em;color:var(--foreground);line-height:1}
.v12 .ptable td.price.usd>.price{font-size:1.0625rem;color:color-mix(in srgb,var(--foreground) 78%,transparent)}
.v12 .ptable td:last-child{font-size:13px;line-height:1.55;color:color-mix(in srgb,var(--foreground) 74%,transparent);white-space:normal}
.v12 .ptable td[colspan]{font-size:13px;color:var(--muted)}
.v12 .ptable td .price .price{font-size:inherit}
@media(max-width:767px){
  .v12 .ptable,.v12 .ptable tbody,.v12 .ptable tr,.v12 .ptable th,.v12 .ptable td{display:block;width:100%}
  .v12 .ptable thead{display:none}
  .v12 .ptable tr{display:grid;grid-template-columns:1fr 1fr;column-gap:1rem;padding:1.5rem 0;border-bottom:1px solid var(--hairline)}
  .v12 .ptable th{grid-column:1/-1;padding:0 0 1rem;border:0!important}
  .v12 .ptable td{padding:0;border:0!important}
  .v12 .ptable td:last-child{grid-column:1/-1;margin-top:1rem}
  .v12 .ptable td[colspan]{grid-column:1/-1}
  .v12 .ptable td.price::before{content:attr(data-label);display:block;margin-bottom:.45rem;font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--type-eyebrow-ink)}
  .v12 .ptable td.price .p-lbl{display:none}
}
.v12 .trio{margin-top:4rem}
.v12 .trio .type-label{font-size:var(--type-label)}

/* ---------- 18. About ---------- */
.v12 .team-grid{display:none}
.v12 .facts dt{font-size:11px;letter-spacing:.18em}
.v12 .facts dd.mono{font-family:inherit}

/* ---------- 19. Contact: two-step form (live LeadIntakeForm look) ---------- */
.v12 .cgrid{gap:3rem}
@media(min-width:1024px){.v12 .cgrid{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:2rem 5rem}}
.v12 .fstep{display:flex;flex-direction:column;gap:2rem}
.v12 .fstep[hidden]{display:none}
.v12 .fstep-k{display:flex;justify-content:space-between;gap:1rem;padding-bottom:1rem;border-bottom:1px solid var(--hairline);font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--type-eyebrow-ink)}
.v12 .fstep-k span{color:var(--foreground)}
.v12 #lead legend.type-label,.v12 #lead .fset>label.type-label{margin-bottom:.8rem}
.v12 .opts{gap:.5rem}
.v12 .opt{position:relative;min-height:2.25rem;padding:.45rem 1rem;border:1px solid var(--cta-border);border-radius:9999px;background:transparent;font-size:13px;color:var(--cta-ink);transition:border-color .2s,background-color .2s}
.v12 .opt input{position:absolute;opacity:0;pointer-events:none}
.v12 .opt:has(input:checked){border-color:color-mix(in srgb,var(--accent) 30%,transparent);background:color-mix(in srgb,var(--accent) 6%,transparent);color:var(--foreground)}
.v12 .opt:has(input:focus-visible){outline:var(--focus-ring);outline-offset:2px}
.v12 .opt.consent{padding:0;min-height:0;border:0;background:none!important;color:var(--muted)!important;font-size:13px}
.v12 .opt.consent input{position:static;opacity:1;pointer-events:auto}
.v12 .fmore{border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);padding:1rem 0}
.v12 .fmore summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;font-size:var(--type-link-md);letter-spacing:var(--type-link-tracking);text-transform:uppercase;color:var(--foreground)}
.v12 .fmore summary::-webkit-details-marker{display:none}
.v12 .fmore summary::after{content:"";width:.7rem;height:.7rem;background:linear-gradient(currentColor,currentColor) center/100% 1px no-repeat,linear-gradient(currentColor,currentColor) center/1px 100% no-repeat;color:var(--muted);transition:transform var(--duration-base) var(--ease)}
.v12 .fmore[open] summary::after{transform:rotate(45deg)}
.v12 .fmore-in{display:flex;flex-direction:column;gap:1.75rem;padding-top:1.5rem}
.v12 .fnav{display:flex;align-items:center;gap:1.5rem;margin-top:.5rem}
.v12 .side .tile{background:none;padding:0 0 1.5rem;border-bottom:1px solid var(--hairline)}
.v12 .side .tile+.tile{margin-top:1.5rem}
.v12 .quick .mono-n{color:var(--muted);font-size:13px}
.v12 #book .talk{margin-top:1rem}

/* ---------- 20. Mobile: sticky bar with one primary action ---------- */
.v12 .mbar.mbar-v11{display:none}
@media(max-width:767px){
  .v12 .mbar.mbar-v11{display:grid;grid-template-columns:1fr auto auto;gap:.5rem;align-items:center;padding:.55rem var(--gutter-x) calc(.55rem + env(safe-area-inset-bottom));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)}
  .v12 .mbar.mbar-v11 a{border:0}
  .v12 .mbar.mbar-v11 a+a{border-left:0}
  .v12 .mbar-pri{display:inline-flex!important;align-items:center;justify-content:center;min-height:2.75rem!important;border-radius:9999px;border:1px solid var(--accent)!important;background:var(--accent);color:var(--logo-cream)!important;font-size:11px!important;letter-spacing:var(--type-link-tracking)!important;text-transform:uppercase}
  .v12 .mbar-ic{width:2.75rem;height:2.75rem;min-height:0!important;border-radius:9999px;border:1px solid var(--cta-border)!important;color:var(--cta-ink)!important;display:flex;align-items:center;justify-content:center}
  body.v12{padding-bottom:4.25rem}
}

/* ---------- 21. Misc ---------- */
.v12 .lookbook-plate-frame,.v12 .pillar-art-frame,.v12 .app-frame{border-radius:0}
.v12 .rail-plate .lookbook-plate-frame{box-shadow:var(--lookbook-plate-shadow)}
.v12 .work-img .lookbook-plate-frame,.v12 .std-fig .lookbook-plate-frame{box-shadow:none}
.v12 .idx-row .n,.v12 .doc-toc .n{font-variant-numeric:tabular-nums}
.v12 .quote{font-style:italic}
.v12 [data-rv]{opacity:1!important;transform:none!important}