/* Xerxes v2. Tokens follow docs/apple-design-audit.md:
   8-step type scale, 8pt spacing grid (4pt half-step), motion <= 300ms, AA contrast. */
/* Self-hosted fonts (copied from @fontsource by jsbuild/build.mjs; SIL OFL, see fonts/LICENSE-*.txt).
   Manrope is one variable file covering weights 200-800. latin-ext only downloads when a page uses those characters. */
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url(fonts/manrope-latin-wght-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url(fonts/manrope-latin-ext-wght-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/instrument-serif-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/instrument-serif-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/instrument-serif-latin-400-italic.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/instrument-serif-latin-ext-400-italic.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{
  /* brand */
  --blue:#0079AF; --blue-d:#005f8a; --blue-ink:#0070A3;
  --orange:#E89823; --orange-lg:#B4700F; --orange-ink:#9E6008;
  --ink:#0B1F2E; --ink-2:#12303F; --ink-3:#07141e; --sand:#F4F1EC; --sand-2:#E4D7CE; --white:#fff;
  --muted:#5b6b76; --line:rgba(11,31,46,.12); --line-d:rgba(255,255,255,.14);
  --serif:'Instrument Serif',Georgia,serif; --sans:'Manrope',system-ui,-apple-system,sans-serif;
  /* type scale (px): 12 14 17 21 28 40 56 80 */
  --t-12:.75rem; --t-14:.875rem; --t-17:1.0625rem; --t-21:1.3125rem; --t-28:1.75rem; --t-40:2.5rem;
  --t-56:clamp(2.25rem,1.25rem + 3.4vw,3.5rem); --t-80:clamp(2.75rem,1.2rem + 5.4vw,5rem);
  /* spacing (px): 4 8 12 16 24 32 40 48 64 80 96 128 */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-6:24px; --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px; --s-20:80px; --s-24:96px; --s-32:128px;
  --section:clamp(64px,8vw,96px);
  /* motion */
  --dur-1:160ms; --dur-2:220ms; --dur-3:300ms; --ease:cubic-bezier(.2,.8,.2,1);
  /* layout */
  --max:1240px; --gut:clamp(16px,4vw,48px); --r:16px; --r-lg:24px;
  --shadow-1:0 1px 2px rgba(11,31,46,.06),0 8px 24px rgba(11,31,46,.08);
  --shadow-2:0 2px 4px rgba(11,31,46,.06),0 24px 64px rgba(11,31,46,.16);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);font-size:var(--t-17);color:var(--ink);background:var(--sand);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.04;letter-spacing:-.015em;text-wrap:balance}
h1{font-size:var(--t-80)} h2{font-size:var(--t-56)} h3{font-size:var(--t-28);line-height:1.1}
p{text-wrap:pretty}
em{font-style:italic;color:var(--orange-lg)}
.dark em,.hero em,.cta-band em{color:var(--orange)}
.eyebrow{display:inline-flex;align-items:center;gap:var(--s-3);font-size:var(--t-12);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-ink)}
.eyebrow::before{content:"";width:24px;height:2px;background:var(--orange)}
.dark .eyebrow{color:#7fd0f2}
.lead{font-size:var(--t-21);line-height:1.45;color:var(--muted);max-width:56ch}
.dark .lead{color:rgba(255,255,255,.78)}
section{padding:var(--section) 0}
[id]{scroll-margin-top:96px}
section+section:not(.dark):not(.cta-band):not(.metal-band){padding-top:0}
.dark{background:var(--ink);color:#fff}
.dark+section:not(.dark){padding-top:var(--section)}
.skip{position:absolute;left:-999px;top:8px;background:#fff;padding:8px 16px;z-index:400;border-radius:8px}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:4px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);padding:12px 24px;min-height:48px;border-radius:999px;font:700 var(--t-17)/1 var(--sans);border:2px solid transparent;cursor:pointer;
  transition:background-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),transform var(--dur-1) var(--ease),box-shadow var(--dur-2) var(--ease)}
.btn:active{transform:scale(.97)}
.btn-o{background:var(--orange);color:var(--ink)} .btn-o:hover{background:#f5ab3b;box-shadow:0 8px 24px rgba(232,152,35,.35)}
.btn-b{background:var(--blue);color:#fff} .btn-b:hover{background:var(--blue-d)}
.btn-g{border-color:rgba(255,255,255,.6);color:#fff} .btn-g:hover{background:#fff;color:var(--ink)}
.btn-l{border-color:var(--ink);color:var(--ink)} .btn-l:hover{background:var(--ink);color:#fff}
.btn svg{width:18px;height:18px;transition:transform var(--dur-1) var(--ease)}
.btn:hover svg{transform:translateX(3px)}
@media(hover:hover){.btn-o:hover,.btn-b:hover{transform:translateY(-1px)}}

/* header: floating bar. Liquid glass (main.js) sits behind it; the ::before layer is the
   solid fallback and, once glass is running, the brand tint + contrast scrim. */
.hdr{position:fixed;top:12px;left:0;right:0;z-index:100;padding:0 var(--gut);pointer-events:none}
.bar{pointer-events:auto;position:relative;isolation:isolate;max-width:var(--max);margin:0 auto;height:64px;border-radius:32px;display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);padding:0 8px 0 24px}
.bar::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:1;pointer-events:none;
  background:rgba(11,31,46,.9);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 12px 32px rgba(0,0,0,.22);transition:background-color var(--dur-3) var(--ease)}
.bar>.glass-container{position:absolute;inset:0;padding:0;z-index:0;gap:0}
.hdr.glass-on .bar::before{background:linear-gradient(rgba(var(--glass-tint),var(--glass-tint-a)),rgba(var(--glass-tint),var(--glass-tint-a))),rgba(11,31,46,var(--glass-scrim));-webkit-backdrop-filter:none;backdrop-filter:none}
:root{--glass-tint:0,121,175; --glass-tint-a:.12; --glass-scrim:.64}
.bar>.logo{position:relative;z-index:2}
.bar>.burger{position:relative;z-index:3}
.bar>.nav{z-index:2}
@media(min-width:1121px){.bar>.nav{position:relative}}
.logo img{height:40px;width:auto}
.nav{display:flex;align-items:center;gap:var(--s-1)}
.nav a{white-space:nowrap;color:#fff;font-size:var(--t-14);font-weight:600;padding:8px 12px;border-radius:999px;transition:background-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.nav a:not(.btn):hover{background:rgba(255,255,255,.12)}
.nav a[aria-current=page]:not(.btn){color:var(--orange)}
.nav a.btn{margin-left:var(--s-2);padding:8px 16px;min-height:44px;font-size:var(--t-14);color:var(--ink)}
.nav a.btn:hover{background:#f5ab3b}
.burger{display:none;background:none;border:0;width:48px;height:48px;cursor:pointer;color:#fff;border-radius:50%}
.burger span{display:block;width:24px;height:2px;background:currentColor;margin:6px auto;transition:transform var(--dur-2) var(--ease)}
.burger[aria-expanded=true] span:first-child{transform:translateY(4px) rotate(45deg)}
.burger[aria-expanded=true] span:last-child{transform:translateY(-4px) rotate(-45deg)}
@media(max-width:1120px){
  .burger{display:block;z-index:3}
  .nav{position:fixed;inset:0;background:var(--ink);flex-direction:column;justify-content:center;gap:var(--s-2);transform:translateX(100%);visibility:hidden;
    transition:transform 280ms var(--ease),visibility 0s 280ms}
  .nav.open{transform:none;visibility:visible;transition:transform 280ms var(--ease)}
  .nav a{font-size:var(--t-28);font-family:var(--serif);font-weight:400;padding:8px 16px}
  .nav a.btn{font-family:var(--sans);font-size:var(--t-17);margin:var(--s-4) 0 0;padding:12px 24px}
}
@media(max-width:560px){.bar{height:56px;padding:0 4px 0 16px}.logo img{height:34px}.lead{font-size:var(--t-17)}}

/* hero (shared) */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;color:#fff;padding:0;background:var(--ink);overflow:hidden}
.hero>img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,31,46,.6) 0%,rgba(11,31,46,.2) 30%,rgba(11,31,46,.62) 62%,rgba(11,31,46,.9) 100%)}
.hero .wrap{position:relative;z-index:2;padding-bottom:var(--s-16);padding-top:128px;width:100%}
.hero h1{max-width:15ch;margin:var(--s-4) 0 var(--s-6)}
.hero .lead{color:rgba(255,255,255,.9);margin-bottom:var(--s-8)}
.hero .eyebrow,.hero h1,.hero .lead{text-shadow:0 2px 24px rgba(0,0,0,.4)}
.hero .eyebrow{color:#fff}
.cta{display:flex;flex-wrap:wrap;gap:var(--s-3)}
.page-hero{min-height:44svh}
.page-hero h1{font-size:var(--t-80);max-width:18ch}

/* home hero: animated gradient + floating render */
.hero-x{align-items:center;background:
  radial-gradient(60% 70% at 85% 20%,rgba(0,95,138,.85) 0%,transparent 60%),
  radial-gradient(50% 60% at 70% 95%,rgba(180,112,15,.55) 0%,transparent 65%),
  radial-gradient(80% 90% at 10% 40%,#0B1F2E 0%,#0B1F2E 40%,transparent 80%),#0d2638}
.hero-x::after{background:linear-gradient(180deg,rgba(11,31,46,0) 62%,rgba(11,31,46,.7) 100%),linear-gradient(90deg,rgba(11,31,46,.72) 0%,rgba(11,31,46,.45) 45%,rgba(11,31,46,0) 75%)}
#gradient{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity 600ms var(--ease)}
#gradient.ready{opacity:1}
#gradient canvas{pointer-events:none!important}
.hero-x .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:var(--s-12);align-items:center;padding-top:144px}
.hero-x h1{max-width:12ch}
.hero-visual{position:relative;perspective:1200px}
.hero-visual .card3d{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:0 40px 96px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.08);
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-style:preserve-3d;will-change:transform}
.hero-visual img{width:100%;aspect-ratio:4/3.1;object-fit:cover}
.hero-visual .tag{position:absolute;left:var(--s-4);bottom:var(--s-4);background:rgba(11,31,46,.72);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding:8px 16px;border-radius:999px;font-size:var(--t-14);font-weight:600;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.hero-visual .tag b{color:var(--orange);font-weight:700}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-6);margin-top:var(--s-12);padding-top:var(--s-6);border-top:1px solid rgba(255,255,255,.2);grid-column:1/-1}
.stats b{display:block;font-size:var(--t-21);font-weight:700;line-height:1.2;color:#fff}
.stats span{font-size:var(--t-14);color:rgba(255,255,255,.86)}
@media(max-width:960px){.hero-x .wrap{grid-template-columns:1fr;padding-top:120px}.hero-x::after{background:linear-gradient(180deg,rgba(11,31,46,.55),rgba(11,31,46,.75))}}
@media(max-width:700px){.stats{grid-template-columns:1fr 1fr}}

/* intro */
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(32px,6vw,96px);align-items:center}
@media(max-width:860px){.split{grid-template-columns:1fr}}
.frame{position:relative;border-radius:var(--r-lg)}
.frame img{width:100%;border-radius:var(--r-lg);aspect-ratio:4/3.4;object-fit:cover;box-shadow:var(--shadow-1)}
.frame .badge{position:absolute;right:-16px;bottom:24px;background:var(--blue);color:#fff;padding:16px 24px;border-radius:var(--r);font-family:var(--serif);font-size:var(--t-21);line-height:1.2;box-shadow:var(--shadow-2)}
.frame .badge small{display:block;font-family:var(--sans);font-size:var(--t-12);letter-spacing:.14em;text-transform:uppercase;opacity:.9}
@media(max-width:560px){.frame .badge{right:12px}}
.checks{list-style:none;margin:var(--s-6) 0 var(--s-8);display:grid;gap:var(--s-4)}
.checks li{display:flex;gap:var(--s-3);align-items:flex-start;color:var(--muted)}
.checks li::before{content:"";flex:none;width:20px;height:20px;margin-top:4px;background:var(--orange);clip-path:polygon(0 0,45% 0,100% 100%,55% 100%)}
.checks li b{display:block;color:var(--ink)}
.h2-gap{margin:var(--s-4) 0 var(--s-6)}

/* pointer spotlight: main.js sets --mx/--my on hover-capable devices */
.spot{position:relative}
.spot::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity var(--dur-2) var(--ease);
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.16),transparent 60%)}
@media(hover:hover){.spot:hover::before{opacity:1}}

/* services */
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s-8);flex-wrap:wrap;margin-bottom:var(--s-12)}
.head h2{margin-top:var(--s-3);max-width:16ch}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-6)}
@media(max-width:900px){.cards{grid-template-columns:1fr}}
.card{background:#fff;border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;border:1px solid var(--line);box-shadow:var(--shadow-1);
  transition:transform var(--dur-3) var(--ease),box-shadow var(--dur-3) var(--ease)}
@media(hover:hover){.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)}}
.card .im{aspect-ratio:16/11;overflow:hidden}
.card .im.split2{display:grid;grid-template-rows:1fr 1fr;gap:4px;background:var(--line)}
.card .im img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-3) var(--ease)}
@media(hover:hover){.card:hover .im img{transform:scale(1.03)}}
.card .tx{padding:var(--s-6) var(--s-6) var(--s-8);display:flex;flex-direction:column;gap:var(--s-3);flex:1}
.card .num{font-size:var(--t-12);font-weight:800;letter-spacing:.16em;color:var(--orange-ink)}
.card p{color:var(--muted)}
.card ul{list-style:none;font-size:var(--t-14);display:grid;gap:var(--s-2);margin-top:auto;padding-top:var(--s-2)}
.card ul li::before{content:"— ";color:var(--blue-ink);font-weight:800}

/* process */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
@media(max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}
.step{padding:var(--s-8) var(--s-8) var(--s-8) 0;border-top:2px solid var(--line);position:relative}
.step::before{content:"";position:absolute;top:-2px;left:0;width:64px;height:2px;background:var(--orange)}
.step .n{font-family:var(--serif);font-size:var(--t-56);color:var(--orange-lg);line-height:1;display:block;margin-bottom:var(--s-3)}
.dark .step .n{color:var(--orange)}
.step h3{margin-bottom:var(--s-2)}
.step p{color:var(--muted)}
.dark .step p{color:rgba(255,255,255,.74)}
.dark .step{border-top-color:var(--line-d)}

/* projects grid */
.filters{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-bottom:var(--s-8)}
.filters button{font:700 var(--t-14)/1 var(--sans);padding:8px 16px;border-radius:999px;border:1.5px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer;min-height:44px;
  transition:background-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.filters button:hover{background:rgba(11,31,46,.08)}
.filters button.on{background:var(--ink);color:#fff}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s-6)}
.proj{grid-column:span 4;position:relative;border-radius:var(--r-lg);overflow:hidden;cursor:pointer;background:var(--ink);aspect-ratio:4/3.3;border:0;text-align:left;color:#fff;font:inherit;display:block;width:100%;
  transition:transform var(--dur-3) var(--ease),box-shadow var(--dur-3) var(--ease)}
@media(hover:hover){.proj:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)}}
.proj.big{grid-column:span 8;aspect-ratio:auto}
.grid.bento .proj:nth-child(1){grid-column:span 8;grid-row:span 2;aspect-ratio:auto}
.proj img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform var(--dur-3) var(--ease)}
@media(hover:hover){.proj:hover img{transform:scale(1.03)}}
.proj::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(11,31,46,.92))}
.proj .cap{position:absolute;left:0;right:0;bottom:0;padding:var(--s-6);z-index:2}
.proj .cap small{display:block;font-size:var(--t-12);font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--orange);margin-bottom:var(--s-1)}
.proj .cap span{display:block;font-size:var(--t-14);color:rgba(255,255,255,.86);max-height:0;opacity:0;transform:translateY(8px);
  transition:opacity var(--dur-2) var(--ease),transform var(--dur-2) var(--ease),max-height var(--dur-3) var(--ease),margin var(--dur-2) var(--ease)}
.proj:hover .cap span,.proj:focus-visible .cap span{opacity:1;transform:none;max-height:64px;margin-top:var(--s-1)}
.proj .count{position:absolute;top:var(--s-4);right:var(--s-4);z-index:2;background:rgba(11,31,46,.75);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:4px 12px;border-radius:999px;font-size:var(--t-12);font-weight:700}
.proj.hide{display:none}
@media(max-width:900px){.proj,.proj.big,.grid.bento .proj:nth-child(1){grid-column:span 6;grid-row:auto;aspect-ratio:4/3.3}}
@media(max-width:580px){.proj,.proj.big,.grid.bento .proj:nth-child(1){grid-column:span 12}}
@media(hover:none){.proj .cap span{opacity:1;transform:none;max-height:64px;margin-top:var(--s-1)}}

/* 3D visualisation */
.viz{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,5vw,80px);align-items:center}
@media(max-width:900px){.viz{grid-template-columns:1fr}}
.viz-copy .lead{margin:var(--s-6) 0 var(--s-8)}
.viz-copy ul{list-style:none;display:grid;gap:var(--s-3);margin-bottom:var(--s-8)}
.viz-copy li{display:flex;gap:var(--s-3);color:var(--muted)}
.viz-copy li b{color:var(--ink)}
.viz-copy li::before{content:"";flex:none;width:8px;height:8px;margin-top:10px;border-radius:50%;background:var(--orange)}
.stage{position:relative;aspect-ratio:5/4;border-radius:var(--r-lg);overflow:hidden;background:linear-gradient(180deg,#fdfcfa 0%,#ece6dd 100%);box-shadow:var(--shadow-2);border:1px solid var(--line)}
.stage .fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity var(--dur-3) var(--ease)}
.stage.live .fallback{opacity:0;pointer-events:none}
.stage .r3f{position:absolute;inset:0;touch-action:pan-y;cursor:grab;outline:none}
.stage .r3f:active{cursor:grabbing}
.stage .r3f:focus-visible{box-shadow:inset 0 0 0 3px var(--orange)}
.stage .loading{position:absolute;inset:0;display:grid;place-content:center;gap:var(--s-3);justify-items:center;font-size:var(--t-14);font-weight:600;color:var(--ink);background:rgba(244,241,236,.6);transition:opacity var(--dur-3) var(--ease)}
.stage .loading i{width:32px;height:32px;border-radius:50%;border:3px solid rgba(11,31,46,.15);border-top-color:var(--blue);animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.stage.live .loading,.stage.static .loading{opacity:0;pointer-events:none}
.stage .label{position:absolute;left:var(--s-4);top:var(--s-4);z-index:2;background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--ink);font-size:var(--t-12);font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:8px 12px;border-radius:999px;box-shadow:var(--shadow-1)}
.stage .hint{position:absolute;right:var(--s-4);bottom:var(--s-4);z-index:2;background:var(--ink);color:#fff;font-size:var(--t-12);font-weight:700;padding:8px 12px;border-radius:999px;opacity:.92}
.stage.static .hint{display:none}

/* liquid-metal brand band */
.metal-band{background:radial-gradient(70% 120% at 85% 50%,#163a52 0%,var(--ink) 55%,var(--ink-3) 100%);color:#fff;overflow:hidden}
.metal-band .wrap{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:var(--s-12);align-items:center}
@media(max-width:860px){.metal-band .wrap{grid-template-columns:1fr}.metal-band .mark{order:-1;max-width:240px}}
.metal-band h2{margin:var(--s-4) 0 var(--s-6);max-width:16ch}
.metal-band .lead{margin-bottom:var(--s-8)}
.mark{position:relative;width:100%;max-width:360px;aspect-ratio:1;justify-self:center}
.mark img,.mark .metal{position:absolute;inset:0;width:100%;height:100%}
.mark img{object-fit:contain;transition:opacity var(--dur-3) var(--ease)}
.mark .metal{opacity:0;transition:opacity 600ms var(--ease)}
.mark.live .metal{opacity:1}
.mark.live img{opacity:0}

/* lightbox */
.lb{position:fixed;inset:0;background:rgba(6,16,24,.96);z-index:300;display:none;flex-direction:column;color:#fff}
.lb.open{display:flex;animation:fade var(--dur-2) var(--ease)}
@keyframes fade{from{opacity:0}}
.lb-top{display:flex;justify-content:space-between;align-items:center;padding:var(--s-4) var(--gut);gap:var(--s-4)}
.lb-top h3{font-size:var(--t-28)}
.lb-top p{font-size:var(--t-14);opacity:.72}
.lb button{background:rgba(255,255,255,.12);border:0;color:#fff;width:48px;height:48px;border-radius:50%;cursor:pointer;font-size:1.4rem;display:grid;place-items:center;flex:none;transition:background-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.lb button:hover{background:var(--orange);color:var(--ink)}
.lb-stage{flex:1;position:relative;display:flex;align-items:center;justify-content:center;min-height:0;padding:0 64px}
.lb-stage img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px}
.lb-stage.zoomable{overflow:auto;display:block;padding:0}
.lb-stage.zoomable img{max-width:none;max-height:none;width:auto;height:auto;min-width:100%}
.lb .prev,.lb .next{position:absolute;top:50%;transform:translateY(-50%)}
.lb .prev{left:12px}.lb .next{right:12px}
.lb-strip{display:flex;gap:var(--s-2);padding:var(--s-4) var(--gut);overflow-x:auto;justify-content:center}
.lb-strip img{height:56px;width:84px;object-fit:cover;border-radius:8px;opacity:.5;cursor:pointer;border:2px solid transparent;flex:none;transition:opacity var(--dur-1) var(--ease)}
.lb-strip img:hover{opacity:.8}
.lb-strip img.on{opacity:1;border-color:var(--orange)}
@media(max-width:640px){.lb-stage{padding:0 8px}.lb .prev{left:4px}.lb .next{right:4px}}

/* floor plans */
.plan-img{position:relative;border-radius:var(--r);overflow:hidden;background:#fff;cursor:zoom-in;border:0;display:block;width:100%;padding:0;font:inherit;box-shadow:var(--shadow-1);transition:box-shadow var(--dur-3) var(--ease)}
@media(hover:hover){.plan-img:hover{box-shadow:var(--shadow-2)}}
.plan-img img{width:100%}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4);margin-top:var(--s-6)}
@media(max-width:700px){.tiles{grid-template-columns:1fr}}
.tile{background:#fff;padding:var(--s-6);border-radius:var(--r);border:1px solid var(--line)}
.tile b{font-family:var(--serif);font-size:var(--t-28);font-weight:400;display:block;margin-bottom:var(--s-2)}
.tile p{font-size:var(--t-14);color:var(--muted)}
.dark .tile{background:var(--ink-2);border-color:var(--line-d)} .dark .tile p{color:rgba(255,255,255,.72)}
.plan-rows{display:flex;flex-direction:column;gap:var(--s-4)}
.plan-row{display:flex;gap:var(--s-4);align-items:flex-start}
.plan-row .plan-img{flex:var(--ar) 1 0%;min-width:0}
.plan-row .plan-img img{display:block;width:100%;height:auto}
@media(max-width:700px){.plan-row{flex-direction:column}.plan-row .plan-img{flex:none;width:100%}}

/* interiors + photo grids */
.masonry{columns:3 280px;column-gap:var(--s-4)}
.masonry button{display:block;width:100%;margin:0 0 var(--s-4);padding:0;border:0;border-radius:var(--r);overflow:hidden;cursor:zoom-in;position:relative;background:var(--ink)}
.masonry img{width:100%;transition:transform var(--dur-3) var(--ease)}
@media(hover:hover){.masonry button:hover img{transform:scale(1.03)}}
.photogrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4)}
@media(max-width:860px){.photogrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.photogrid{grid-template-columns:1fr}}
.photogrid button{display:block;width:100%;padding:0;border:0;border-radius:var(--r);overflow:hidden;cursor:zoom-in;position:relative;background:var(--ink);aspect-ratio:4/3}
.photogrid img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-3) var(--ease)}
@media(hover:hover){.photogrid button:hover img{transform:scale(1.03)}}
.photogrid .fill{position:absolute;inset:-24px;width:calc(100% + 48px);height:calc(100% + 48px);object-fit:cover;filter:blur(24px) brightness(.72);z-index:0}
.photogrid img:not(.fill){position:relative;z-index:1;object-fit:contain}
.palette{display:flex;border-radius:var(--r);overflow:hidden;margin:var(--s-6) 0 var(--s-2);max-width:520px;box-shadow:var(--shadow-1)}
.palette div{flex:1;padding:64px 8px 12px;font-size:var(--t-12);font-weight:700;text-align:center;letter-spacing:.04em}

/* values */
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-6);margin-top:var(--s-10)}
@media(max-width:800px){.values{grid-template-columns:1fr}}
.value{padding:var(--s-8);border-radius:var(--r-lg);background:var(--ink-2);border:1px solid var(--line-d)}
.value h3{color:var(--orange);margin-bottom:var(--s-3)}
.value p{color:rgba(255,255,255,.76)}
.about-lead p+p{margin-top:var(--s-4)}
.about-lead p:first-child{font-size:var(--t-21);color:var(--ink)}
.about-lead p:not(:first-child){font-size:var(--t-17);color:var(--muted)}

/* CTA band */
.cta-band{background:var(--blue);color:#fff;position:relative;overflow:hidden}
.cta-band::before,.cta-band::after{content:"";position:absolute;width:38%;height:180%;background:var(--orange);opacity:.14;transform:skewX(-28deg);top:-40%}
.cta-band::before{left:-8%}.cta-band::after{right:-14%;background:#fff;opacity:.07}
.cta-band .wrap{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:var(--s-8);flex-wrap:wrap}
.cta-band h2{max-width:18ch;margin-top:var(--s-3)}
.cta-band .eyebrow{color:#fff}

/* contact */
.contact{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(32px,5vw,80px);align-items:start}
@media(max-width:900px){.contact{grid-template-columns:1fr}}
.clist{list-style:none;display:grid;gap:var(--s-3);margin:var(--s-8) 0}
.clist a{display:flex;gap:var(--s-4);align-items:center;padding:16px 24px;background:#fff;border-radius:var(--r);border:1px solid var(--line);transition:border-color var(--dur-1) var(--ease),transform var(--dur-1) var(--ease),box-shadow var(--dur-2) var(--ease)}
@media(hover:hover){.clist a:hover{border-color:var(--orange);transform:translateX(4px);box-shadow:var(--shadow-1)}}
.clist li.primary a{background:var(--ink);color:#fff;border-color:var(--ink)}
.clist li.primary small{color:rgba(255,255,255,.72)}
.clist .ic{width:48px;height:48px;border-radius:50%;background:var(--ink);color:var(--orange);display:grid;place-items:center;flex:none}
.clist li.primary .ic{background:#25D366;color:#053b1a}
.clist .ic svg{width:20px;height:20px}
.clist small{display:block;font-size:var(--t-12);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700}
.clist b{font-size:var(--t-17)}
form{background:#fff;padding:clamp(24px,4vw,48px);border-radius:var(--r-lg);border:1px solid var(--line);box-shadow:var(--shadow-2);display:grid;gap:var(--s-4)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)}
@media(max-width:560px){.row{grid-template-columns:1fr}}
label{display:grid;gap:var(--s-2);font-size:var(--t-12);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
input,select,textarea{font:500 var(--t-17)/1.4 var(--sans);padding:12px 16px;min-height:48px;border:1.5px solid #c9d1d6;border-radius:12px;background:var(--sand);color:var(--ink);width:100%;text-transform:none;letter-spacing:0;
  transition:border-color var(--dur-1) var(--ease),background-color var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);background:#fff;box-shadow:0 0 0 4px rgba(0,121,175,.15)}
textarea{min-height:128px;resize:vertical}
.err{border-color:#c0392b!important}
.fbtn{display:flex;gap:var(--s-3);flex-wrap:wrap}
.fbtn .btn{flex:1}
.wa{background:#25D366;color:#053b1a} .wa:hover{background:#3fe07c}
.note{font-size:var(--t-14);color:var(--muted)}
.msg{font-size:var(--t-14);font-weight:700;color:#c0392b;min-height:1.2em}

/* footer */
footer{background:var(--ink-3);color:rgba(255,255,255,.76);padding:var(--s-16) 0 var(--s-6);font-size:var(--t-14)}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:var(--s-10);padding-bottom:var(--s-12);border-bottom:1px solid var(--line-d)}
@media(max-width:860px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.fgrid{grid-template-columns:1fr}}
footer img{height:48px;width:auto;margin-bottom:var(--s-4)}
footer h4{color:#fff;font-size:var(--t-12);letter-spacing:.16em;text-transform:uppercase;margin-bottom:var(--s-4)}
footer ul{list-style:none;display:grid;gap:var(--s-2)}
footer a{transition:color var(--dur-1) var(--ease)}
footer a:hover{color:var(--orange)}
.fbot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--s-2);padding-top:var(--s-6);font-size:var(--t-12)}
.wa-float{position:fixed;right:16px;bottom:16px;z-index:90;width:56px;height:56px;border-radius:50%;background:#25D366;display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.3);transition:transform var(--dur-2) var(--ease)}
@media(hover:hover){.wa-float:hover{transform:scale(1.08)}}
.wa-float svg{width:28px;height:28px;fill:#fff}

/* reveal */
.rv{opacity:0;transform:translateY(16px);transition:opacity var(--dur-3) var(--ease),transform var(--dur-3) var(--ease)}
.rv.in{opacity:1;transform:none}
.d1{transition-delay:40ms}.d2{transition-delay:80ms}.d3{transition-delay:120ms}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.rv{opacity:1;transform:none}.hero-visual .card3d{transform:none}}
@media print{.rv{opacity:1!important;transform:none!important}.hdr{position:absolute}.wa-float,.lb{display:none!important}}

/* ====== Glassy black theme ======
   One continuous near-black page with a soft specular sheen; surfaces are frosted glass
   panels (translucent white, blur, hairline rim, top highlight). Tune it here:
   --gb-base (page black), --gb-glass (panel fill), --gb-rim (panel edge), --gb-sheen (glare). */
:root{
  --gb-base:#050608; --gb-base-rgb:5,6,8;
  --gb-glass:rgba(255,255,255,.045); --gb-glass-2:rgba(255,255,255,.075);
  --gb-rim:rgba(255,255,255,.10); --gb-sheen:rgba(255,255,255,.055);
  --gb-blur:blur(20px) saturate(1.3);
  --gb-panel-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 24px 64px rgba(0,0,0,.45);
  --muted:rgba(255,255,255,.68); --line:rgba(255,255,255,.10);
  --shadow-1:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
  --shadow-2:0 2px 4px rgba(0,0,0,.4),0 24px 64px rgba(0,0,0,.55);
  color-scheme:dark;
}
body{color:rgba(255,255,255,.92);background:
  radial-gradient(1100px 620px at 12% -8%,var(--gb-sheen),transparent 62%),
  radial-gradient(900px 760px at 105% 38%,rgba(0,121,175,.09),transparent 62%),
  radial-gradient(800px 600px at -10% 92%,rgba(232,152,35,.05),transparent 60%),
  linear-gradient(180deg,#08090c 0%,var(--gb-base) 40%,#030405 100%);background-attachment:fixed;background-color:var(--gb-base)}
/* diagonal glare across the whole viewport, like light on a black glass sheet */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.035) 42%,rgba(255,255,255,.012) 50%,transparent 62%)}
/* shared glass surface */
.card,.tile,.dark .tile,.value,.clist a,form,.step-glass{background:var(--gb-glass);border:1px solid var(--gb-rim);box-shadow:var(--gb-panel-shadow);
  -webkit-backdrop-filter:var(--gb-blur);backdrop-filter:var(--gb-blur)}
@media(hover:hover){.card:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 32px 80px rgba(0,0,0,.6);border-color:rgba(255,255,255,.16)}}

/* sections: no more sand or navy blocks, the page black runs through */
.dark,.metal-band,footer{background:transparent}
.metal-band{background:radial-gradient(60% 110% at 85% 50%,rgba(22,58,82,.5) 0%,transparent 62%)}
footer{border-top:1px solid var(--gb-rim);background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(0,0,0,.35))}
.cta-band{background:linear-gradient(135deg,rgba(0,121,175,.26) 0%,rgba(255,255,255,.035) 48%,rgba(232,152,35,.14) 100%);
  border-top:1px solid var(--gb-rim);border-bottom:1px solid var(--gb-rim);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.cta-band::before{opacity:.08}.cta-band::after{opacity:.04}

/* heroes melt into the black instead of navy */
.hero:not(.hero-x){background:var(--gb-base)}
.hero::after{background:linear-gradient(180deg,rgba(var(--gb-base-rgb),.55) 0%,rgba(var(--gb-base-rgb),.15) 30%,rgba(var(--gb-base-rgb),.6) 62%,rgba(var(--gb-base-rgb),1) 100%)}
.hero-x::after{background:linear-gradient(180deg,rgba(var(--gb-base-rgb),0) 70%,rgba(var(--gb-base-rgb),1) 100%),linear-gradient(90deg,rgba(11,31,46,.72) 0%,rgba(11,31,46,.45) 45%,rgba(11,31,46,0) 75%)}
@media(max-width:960px){.hero-x::after{background:linear-gradient(180deg,rgba(11,31,46,.55),rgba(var(--gb-base-rgb),.85) 85%,rgba(var(--gb-base-rgb),1))}}

/* type on black */
em{color:var(--orange)}
.eyebrow{color:#7fd0f2}
.checks li b,.viz-copy li b,.about-lead p:first-child{color:#fff}
.card .num{color:var(--orange)}
.card ul li::before{color:#7fd0f2}
.step{border-top-color:var(--line)}
.step .n{color:var(--orange)}
.btn-l{border-color:rgba(255,255,255,.7);color:#fff} .btn-l:hover{background:#fff;color:var(--ink)}
.filters button{border-color:rgba(255,255,255,.4);color:#fff}
.filters button:hover{background:rgba(255,255,255,.08)}
.filters button.on{background:#fff;color:var(--ink);border-color:#fff}

/* header, mobile menu, small glass pills */
.bar::before{background:rgba(var(--gb-base-rgb),.72);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),inset 0 1px 0 rgba(255,255,255,.1),0 12px 32px rgba(0,0,0,.45)}
.hdr.glass-on .bar::before{background:linear-gradient(rgba(var(--glass-tint),var(--glass-tint-a)),rgba(var(--glass-tint),var(--glass-tint-a))),rgba(var(--gb-base-rgb),var(--glass-scrim))}
@media(max-width:1120px){.nav{background:rgba(var(--gb-base-rgb),.94);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}}
.hero-visual .tag,.proj .count{background:rgba(var(--gb-base-rgb),.6);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.proj,.masonry button,.photogrid button{background:#0b0d10}
.proj::after{background:linear-gradient(180deg,transparent 40%,rgba(var(--gb-base-rgb),.92))}

/* 3D stage: dark glass box, the pale villa reads like a lit model on a black table */
.stage{background:radial-gradient(80% 70% at 50% 35%,#1b2128 0%,#0d1014 60%,#07080a 100%);border-color:var(--gb-rim);box-shadow:var(--gb-panel-shadow)}
.stage .loading{color:#fff;background:rgba(var(--gb-base-rgb),.55)}
.stage .loading i{border-color:rgba(255,255,255,.15);border-top-color:#7fd0f2}
.stage .label{background:rgba(255,255,255,.1);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.stage .hint{background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);opacity:1}

/* contact */
.clist a{color:#fff}
.clist li.primary a{background:var(--gb-glass-2);color:#fff;border-color:rgba(255,255,255,.18)}
.clist .ic{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.clist small{color:rgba(255,255,255,.6)}
label{color:rgba(255,255,255,.82)}
input,select,textarea{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.18);color:#fff}
input::placeholder,textarea::placeholder{color:rgba(255,255,255,.45)}
input:focus,select:focus,textarea:focus{background:rgba(255,255,255,.08);border-color:#7fd0f2;box-shadow:0 0 0 4px rgba(127,208,242,.18)}
select option{background:#0b0d10;color:#fff}
.err{border-color:#ff6b5b!important}
.msg{color:#ff8a7d}

/* ====== Polish fixes ====== */
/* contact: grid columns may shrink below their content (long email no longer widens the page on phones) */
.contact{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
@media(max-width:900px){.contact{grid-template-columns:minmax(0,1fr)}}
.clist a>span:last-child{min-width:0}
.clist b{overflow-wrap:anywhere}
/* send buttons keep their label on one line; they stack when the form is narrow */
.fbtn .btn{flex:1 1 220px;white-space:nowrap}
/* project type + budget stacked so long options aren't cut off */
.row.one{grid-template-columns:1fr}
/* palette swatch labels: dark text by default (light swatches), the inline style sets white where needed */
.palette div{color:var(--ink)}
/* project captions stay readable over bright renders, also on touch where the description is always shown */
.proj::after{background:linear-gradient(180deg,transparent 35%,rgba(var(--gb-base-rgb),.55) 62%,rgba(var(--gb-base-rgb),.94) 100%)}
.tile .btn{white-space:nowrap}
/* home: functional-plan feature (the v1 "Plans that work as hard as they look" panel), drawing on white */
.plan-feature{display:block;background:#fff;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--gb-rim);box-shadow:var(--gb-panel-shadow);
  transition:transform var(--dur-3) var(--ease),box-shadow var(--dur-3) var(--ease)}
.plan-feature img{width:100%;aspect-ratio:16/10;object-fit:contain;transform:scale(1.18);transition:transform var(--dur-3) var(--ease)}
@media(hover:hover){.plan-feature:hover{transform:translateY(-4px);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 32px 80px rgba(0,0,0,.6)}.plan-feature:hover img{transform:scale(1.22)}}
/* 404 / 500 pages: big code in the same silver chrome as the metal X */
.err .wrap{text-align:center}
.err-code{font-family:var(--serif);font-size:clamp(5rem,16vw,10rem);line-height:1;font-weight:400;margin-bottom:var(--s-3);
  background:linear-gradient(180deg,#ffffff 0%,#dfe5ea 38%,#7d8992 52%,#c9d1d8 64%,#f4f6f8 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 12px 32px rgba(0,0,0,.5))}
.err .lead{max-width:52ch;margin:0 auto var(--s-8)}
.err-cta{justify-content:center;margin-bottom:var(--s-16)}
.err .tile{display:flex;flex-direction:column;align-items:flex-start;text-align:left}
.err .tile .btn{margin-top:auto}
.err .tile p{margin-bottom:var(--s-4)}
.tiles.two{grid-template-columns:repeat(2,1fr);max-width:600px;margin-inline:auto}
@media(max-width:700px){.tiles.two{grid-template-columns:1fr}}

/* ====== Device fixes (cross-device sweep) ====== */
/* logo link meets the 44px touch-target size without changing how it looks */
.bar>.logo{display:inline-flex;align-items:center;min-height:44px}
/* very narrow phones (Galaxy Fold, 280px): grid and palette children may shrink, so nothing pushes the page sideways */
.split>*,.viz>*,.contact>*{min-width:0}
.palette div{min-width:0;overflow-wrap:anywhere;padding-inline:4px}
/* phones turned sideways: the hero must fit in ~375px of height so its call to action stays above the fold */
@media (orientation:landscape) and (max-height:560px){
  .hero{min-height:auto}
  .hero .wrap,.hero-x .wrap{padding-top:88px;padding-bottom:var(--s-6)}
  .hero h1,.hero-x h1,.page-hero h1{font-size:clamp(1.9rem,9.5vh,2.75rem);margin:var(--s-2) 0 var(--s-3)}
  .hero .lead{font-size:var(--t-17);margin-bottom:var(--s-4);max-width:62ch}
  .hero-x .wrap{grid-template-columns:1fr}
  .hero-x .hero-visual{display:none}  /* no room for the render beside the copy at ~375px tall */
  .hero-x h1{max-width:none}
  .hero-x .stats{margin-top:var(--s-6)}
}
/* lightbox: horizontal swipes belong to the gallery (main.js), not the browser's swipe-back navigation */
.lb{overscroll-behavior:contain}
.lb-stage:not(.zoomable){touch-action:pan-y pinch-zoom}
/* floating WhatsApp: hidden on small/short screens while the hero buttons are visible (main.js adds .wa-auto / .show) */
@media (max-width:900px),(max-height:560px){
  .wa-auto .wa-float{transition:opacity var(--dur-2) var(--ease),transform var(--dur-2) var(--ease),visibility 0s}
  .wa-auto .wa-float:not(.show){opacity:0;transform:scale(.6);visibility:hidden;pointer-events:none;transition:opacity var(--dur-2) var(--ease),transform var(--dur-2) var(--ease),visibility 0s linear var(--dur-2)}
}

/* home hero: AV Square full-bleed, caption bottom-right */
.hero-tag{position:absolute;right:var(--gut);top:96px;z-index:3;background:rgba(11,31,46,.72);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#fff;padding:8px 16px;border-radius:999px;font-size:var(--t-14);font-weight:600;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);transition:background-color var(--dur-1) var(--ease)}
.hero-tag b{color:var(--orange);font-weight:700}
.hero-tag:hover{background:rgba(11,31,46,.9)}
.hero .stats{margin-top:var(--s-12)}
@media(max-width:860px){.hero-tag{display:none}}
.hero:has(.hero-tag)::after{background:linear-gradient(90deg,rgba(11,31,46,.88) 0%,rgba(11,31,46,.78) 45%,rgba(11,31,46,.55) 62%,rgba(11,31,46,.1) 85%),linear-gradient(180deg,rgba(11,31,46,.45) 0%,rgba(11,31,46,0) 28%,rgba(11,31,46,.88) 100%)}
.hero:has(.hero-tag)>img.bg{object-position:68% 50%}
@media(max-width:700px){.hero:has(.hero-tag)>img.bg{object-position:62% 50%}}

/* ====== launch kit: sticky mobile CTA, cookie banner, form errors, legal + thank-you pages ====== */
/* sticky call / WhatsApp / quote bar on phones (replaces the floating WhatsApp bubble there) */
.mcta{display:none}
@media(max-width:760px){
  .mcta{position:fixed;left:0;right:0;bottom:0;z-index:95;display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:8px;
    padding:8px 12px calc(8px + env(safe-area-inset-bottom));background:rgba(var(--gb-base-rgb),.88);
    -webkit-backdrop-filter:var(--gb-blur);backdrop-filter:var(--gb-blur);border-top:1px solid var(--gb-rim)}
  .mcta a{display:flex;align-items:center;justify-content:center;gap:6px;min-height:48px;border-radius:999px;font:700 var(--t-14)/1 var(--sans);
    color:#fff;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
  .mcta a svg{width:18px;height:18px;flex:none}
  .mcta a[data-track=whatsapp] svg{fill:#25D366}
  .mcta a.go{background:var(--orange);color:var(--ink);box-shadow:none}
  .mcta a:active{transform:scale(.97)}
  .wa-float{display:none!important}
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .cookie{bottom:calc(76px + env(safe-area-inset-bottom))!important}
}
@media print{.mcta,.cookie{display:none!important}}

/* cookie banner */
.cookie{position:fixed;left:16px;right:16px;bottom:16px;z-index:96;max-width:560px;margin-left:auto;display:grid;gap:var(--s-4);
  padding:var(--s-6);border-radius:var(--r-lg);background:rgba(14,16,20,.94);-webkit-backdrop-filter:var(--gb-blur);backdrop-filter:var(--gb-blur);
  box-shadow:var(--gb-panel-shadow);border:1px solid var(--gb-rim);color:rgba(255,255,255,.86);font-size:var(--t-14);line-height:1.55;
  animation:cookie-in var(--dur-3) var(--ease)}
.cookie[hidden]{display:none}
.cookie b{display:block;color:#fff;font-size:var(--t-17);margin-bottom:4px}
.cookie a{color:var(--orange);text-decoration:underline}
.cookie-b{display:flex;gap:var(--s-3);justify-content:flex-end;flex-wrap:wrap}
.cookie-b .btn{min-height:44px;padding:10px 20px;font-size:var(--t-14)}
@keyframes cookie-in{from{opacity:0;transform:translateY(12px)}}
@media(min-width:761px){.cookie{right:88px}}  /* clear of the WhatsApp bubble */
.linkbtn{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer}

/* footer legal links */
.flegal{display:flex;gap:var(--s-4);flex-wrap:wrap;align-items:center}
.flegal a,.flegal .linkbtn{color:rgba(255,255,255,.72);text-decoration:none}
.flegal a:hover,.flegal .linkbtn:hover{color:#fff;text-decoration:underline}

/* form error states: red edge + message under the field, summary at the top, consent checkbox */
.field{position:relative}
.ferr{display:block;font-size:var(--t-14);font-weight:600;letter-spacing:0;text-transform:none;color:#ff8a7d;min-height:0}
.ferr:empty{display:none}
.ferr::before{content:"! ";font-weight:800}
[aria-invalid=true]{border-color:#ff6b5b!important;background:rgba(255,107,91,.07)!important}
[aria-invalid=true]:focus{box-shadow:0 0 0 4px rgba(255,107,91,.22)!important}
[aria-invalid=false].touched{border-color:rgba(108,214,140,.6)}
.errsum{border:1.5px solid #ff6b5b;background:rgba(255,107,91,.08);border-radius:12px;padding:var(--s-4);font-size:var(--t-14);color:#fff}
.errsum[hidden]{display:none}
.errsum ul{margin:var(--s-2) 0 0;padding-left:1.2em;list-style:disc}
.errsum a{color:#ff8a7d;text-decoration:underline}
.check{display:flex;gap:var(--s-3);align-items:flex-start;font:500 var(--t-14)/1.5 var(--sans);letter-spacing:0;text-transform:none;cursor:pointer}
.check input{width:22px;height:22px;min-height:0;flex:none;margin-top:1px;accent-color:var(--orange);padding:0}
.check a{color:var(--orange);text-decoration:underline}
.check.bad input{outline:2px solid #ff6b5b;outline-offset:2px}

/* legal pages */
.legal{display:grid;grid-template-columns:240px minmax(0,1fr);gap:var(--s-16);align-items:start}
.legal aside{position:sticky;top:112px}
.legal aside ol{list-style:none;padding:0;margin:var(--s-4) 0 0;display:grid;gap:var(--s-2);font-size:var(--t-14)}
.legal aside a{color:rgba(255,255,255,.72)} .legal aside a:hover{color:var(--orange)}
.legal article{max-width:68ch}
.legal article section{padding:0 0 var(--s-8);scroll-margin-top:112px}
.legal article h2{font-size:var(--t-28);margin-bottom:var(--s-3)}
.legal article p{color:rgba(255,255,255,.8);line-height:1.7;margin-bottom:var(--s-3)}
.legal article a,.legal .linkbtn{color:var(--orange);text-decoration:underline}
.legal code{font-size:.9em;background:rgba(255,255,255,.08);padding:1px 6px;border-radius:6px}
@media(max-width:860px){.legal{grid-template-columns:1fr;gap:var(--s-8)}.legal aside{position:static}}

/* thank-you page */
.thanks .lead{max-width:60ch;margin-bottom:var(--s-8)}
.thanks-steps{margin-top:var(--s-16);grid-template-columns:repeat(3,1fr)}
@media(max-width:860px){.thanks-steps{grid-template-columns:1fr}}

/* ====== mobile breakpoint fixes ====== */
@media(max-width:560px){
  .hero .cta{display:grid;grid-template-columns:1fr;gap:var(--s-3)}
  .hero .cta .btn{width:100%}
  .page-hero{min-height:0}
  .page-hero .wrap{padding-top:112px;padding-bottom:var(--s-10)}
  .page-hero h1{font-size:clamp(2.25rem,9vw,2.75rem)}
  .cta-band .cta{flex-direction:column;align-items:stretch}
  .fbot{flex-direction:column;gap:var(--s-3);align-items:flex-start}
}
@media(max-width:380px){.mcta{grid-template-columns:1fr 1fr 1.2fr;gap:6px;padding-left:8px;padding-right:8px}.mcta a{font-size:var(--t-12)}}