/* ============================================================
   Indian Wells Glass & Mirror
   Design system - glass blue, warm desert neutrals
   Mission Hub 2026
   ============================================================ */

:root{
  /* Ink - deep glass navy. Drawn from looking through thick glass edge-on. */
  --ink:        #0F2430;
  --ink-2:      #16323F;
  --ink-3:      #1E4356;

  /* Glass blue - the accent Adam signed off on */
  --glass:      #3E8AA6;
  --glass-lt:   #6FB0C7;
  --glass-pale: #DCEBF1;
  --glass-mist: #F0F7F9;

  /* Warm desert neutrals - keeps it warm, never cold or harsh */
  --sand:       #FAF7F2;
  --sand-2:     #F2ECE1;
  --sand-3:     #E4DACA;
  --brass:      #B08D57;
  --brass-lt:   #C9A879;

  /* Type */
  --body:       #45535E;
  --body-lt:    #6B7883;
  --line:       #E1D9CC;

  --shadow-sm: 0 2px 8px rgba(15,36,48,.06);
  --shadow:    0 12px 32px -12px rgba(15,36,48,.16);
  --shadow-lg: 0 32px 64px -24px rgba(15,36,48,.28);

  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Fixed 1240px reads fine up to laptop widths but leaves huge dead margins
     on real desktop monitors and ultrawides - this scales the content column
     up on wider screens instead of leaving it stranded in the middle. */
  --wrap: clamp(1240px, 68vw + 200px, 1760px);
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--sand); color:var(--body);
  font-family:var(--sans); font-size:17px; line-height:1.72;
  font-weight:400; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}

/* ---------- Type ---------- */
h1,h2,h3,h4{
  font-family:var(--serif); color:var(--ink);
  font-weight:500; line-height:1.14; letter-spacing:-.012em; margin:0;
}
h1{font-size:clamp(2.6rem,5.4vw,4.5rem);line-height:1.06}
h2{font-size:clamp(2rem,3.6vw,3.05rem)}
h3{font-size:clamp(1.3rem,1.9vw,1.65rem);line-height:1.24}
h4{font-size:1.1rem;font-family:var(--sans);font-weight:600;letter-spacing:0}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}

.eyebrow{
  font-family:var(--sans); font-size:.72rem; font-weight:600;
  letter-spacing:.19em; text-transform:uppercase; color:var(--glass);
  margin:0 0 1.15rem; display:flex; align-items:center; gap:.85rem;
}
.eyebrow::before{
  content:""; width:30px; height:1px; background:var(--brass); flex:none;
}
.eyebrow.center{justify-content:center}
.lede{font-size:1.16rem;line-height:1.78;color:var(--body)}

/* ---------- Layout ---------- */
.wrap{width:min(var(--wrap),calc(100% - 3rem));margin-inline:auto}
.wrap-narrow{width:min(830px,calc(100% - 3rem));margin-inline:auto}
section{padding:clamp(4.5rem,9vw,8rem) 0;position:relative}
.sec-head{max-width:660px;margin-bottom:3.4rem}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head.center .eyebrow{justify-content:center}
.sec-head p{margin-top:1.15rem}

.tone-sand{background:var(--sand-2)}
.tone-mist{background:var(--glass-mist)}
.tone-ink{background:var(--ink);color:#C3D2DA}
.tone-ink h1,.tone-ink h2,.tone-ink h3{color:#fff}
.tone-ink .eyebrow{color:var(--glass-lt)}

/* ============================================================
   GLASS LIGHT SYSTEM
   Real glass is light, edges and refraction. These layers build
   that in CSS so the site reads as glass without stock photos.
   ============================================================ */
.glass-field{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.glass-field::before{
  content:"";position:absolute;inset:-30%;
  background:
    radial-gradient(46% 38% at 22% 18%, rgba(111,176,199,.30), transparent 62%),
    radial-gradient(38% 44% at 82% 26%, rgba(176,141,87,.16),  transparent 64%),
    radial-gradient(52% 46% at 62% 88%, rgba(62,138,166,.20),  transparent 66%);
  filter:blur(14px);
  animation:drift 26s var(--ease) infinite alternate;
}
@keyframes drift{
  0%  {transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(-2.5%,2%,0) scale(1.07)}
}

/* Mullion grid - the frame lines of a window wall */
.mullion{position:absolute;inset:0;pointer-events:none;opacity:.5}
.mullion::before{
  content:"";position:absolute;inset:0;
  background:
    repeating-linear-gradient(90deg, rgba(15,36,48,.055) 0 1px, transparent 1px 25%),
    repeating-linear-gradient(0deg,  rgba(15,36,48,.04)  0 1px, transparent 1px 50%);
}
.tone-ink .mullion::before{
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, transparent 1px 25%),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.05) 0 1px, transparent 1px 50%);
}

/* Caustic - the bright ripple light throws through glass */
.caustic{
  position:absolute;pointer-events:none;border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.55), transparent 68%);
  filter:blur(38px);mix-blend-mode:soft-light;
  animation:caustic 17s ease-in-out infinite alternate;
}
@keyframes caustic{
  0%  {transform:translate(0,0) scale(1);opacity:.5}
  100%{transform:translate(4%,-5%) scale(1.22);opacity:.82}
}

/* Edge - the green-blue glow at a cut glass edge */
.edge-glow{
  position:absolute;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--glass-lt),transparent);
  opacity:.55;
}

/* ---------- Header ---------- */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:1.15rem 0;
  transition:background .45s var(--ease),padding .45s var(--ease),
             box-shadow .45s var(--ease),backdrop-filter .45s var(--ease);
}
.hdr::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(15,36,48,.55),transparent);
  transition:opacity .45s var(--ease);
}
.hdr.stuck{
  padding:.62rem 0;background:rgba(250,247,242,.90);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  box-shadow:0 1px 0 var(--line),0 8px 30px -18px rgba(15,36,48,.28);
}
.hdr.stuck::after{opacity:0}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:2rem}
.brand{display:flex;align-items:center;flex:none}
.brand img{height:52px;width:auto;transition:height .45s var(--ease),opacity .3s}
.hdr.stuck .brand img{height:44px}
.brand .lg-white{display:block}
.brand .lg-ink{display:none}
.hdr.stuck .brand .lg-white{display:none}
.hdr.stuck .brand .lg-ink{display:block}

.nav{display:flex;align-items:center;gap:2.1rem}
.nav > a,.nav .drop > button{
  font-size:.83rem;font-weight:500;letter-spacing:.085em;text-transform:uppercase;
  color:#fff;background:none;border:0;padding:.4rem 0;cursor:pointer;
  position:relative;transition:color .3s var(--ease);display:flex;align-items:center;gap:.4rem;
}
.hdr.stuck .nav > a,.hdr.stuck .nav .drop > button{color:var(--ink)}
.nav > a::after,.nav .drop > button::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:var(--brass);transition:width .42s var(--ease);
}
.nav > a:hover::after,.nav .drop:hover > button::after{width:100%}
.nav .caret{width:8px;height:8px;border-right:1.4px solid currentColor;
  border-bottom:1.4px solid currentColor;transform:rotate(45deg) translateY(-2px);
  transition:transform .34s var(--ease);opacity:.75}
.nav .drop:hover .caret{transform:rotate(225deg) translateY(-4px)}

.drop{position:relative}
.drop-menu{
  position:absolute;top:calc(100% + .95rem);left:50%;transform:translateX(-50%) translateY(-8px);
  background:rgba(255,255,255,.97);backdrop-filter:blur(20px);
  border:1px solid var(--line);border-radius:3px;box-shadow:var(--shadow-lg);
  padding:.6rem;min-width:290px;opacity:0;visibility:hidden;
  transition:opacity .34s var(--ease),transform .34s var(--ease),visibility .34s;
}
.drop:hover .drop-menu,.drop:focus-within .drop-menu{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);
}
.drop-menu a{
  display:block;padding:.7rem .95rem;font-size:.9rem;color:var(--ink);
  border-radius:2px;transition:background .26s,color .26s,padding-left .26s var(--ease);
  text-transform:none;letter-spacing:0;font-weight:400;
}
.drop-menu a:hover{background:var(--glass-mist);color:var(--glass);padding-left:1.35rem}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.92rem 1.9rem;border-radius:2px;border:1px solid transparent;
  font-size:.79rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  cursor:pointer;position:relative;overflow:hidden;
  transition:transform .38s var(--ease),box-shadow .38s var(--ease),
             background .34s,color .34s,border-color .34s;
}
.btn::before{ /* light sweep, like sun crossing glass */
  content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.32),transparent);
  transform:skewX(-22deg);transition:left .78s var(--ease);
}
.btn:hover::before{left:135%}
.btn-primary{background:var(--glass);color:#fff;box-shadow:0 10px 26px -12px rgba(62,138,166,.7)}
.btn-primary:hover{background:var(--ink-3);transform:translateY(-2px);
  box-shadow:0 18px 38px -14px rgba(62,138,166,.6)}
.btn-ghost{border-color:rgba(255,255,255,.42);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.11);border-color:#fff;transform:translateY(-2px)}
.btn-ink{border-color:var(--ink);color:var(--ink)}
.btn-ink:hover{background:var(--ink);color:#fff;transform:translateY(-2px)}
.btn-sm{padding:.72rem 1.4rem;font-size:.73rem}

.burger{display:none;background:none;border:0;cursor:pointer;padding:.5rem;flex:none}
.burger span{display:block;width:26px;height:1.6px;background:#fff;margin:5.5px 0;
  transition:transform .4s var(--ease),opacity .3s,background .4s}
.hdr.stuck .burger span{background:var(--ink)}
.burger.on span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.on span:nth-child(2){opacity:0}
.burger.on span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- Hero ---------- */
.hero{
  position:relative;min-height:clamp(560px,88vh,880px);
  display:flex;align-items:center;background:var(--ink);
  overflow:hidden;padding-top:6rem;
}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{
  width:100%;height:100%;object-fit:cover;opacity:.42;
  transform:scale(1.06);
  transition:transform 1.8s var(--ease-out);
}
.hero.ready .hero-bg img{transform:scale(1)}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(15,36,48,.93) 0%,rgba(15,36,48,.74) 42%,rgba(30,67,86,.5) 100%);
}
.hero-in{position:relative;z-index:2;padding:3rem 0}
.hero h1{color:#fff;margin-bottom:1.5rem;max-width:720px}
.hero h1 .accent{
  font-style:italic;color:var(--glass-lt);
  display:inline-block;
}
.hero p{color:rgba(226,236,241,.9);font-size:1.18rem;max-width:560px;margin-bottom:2.4rem}
.hero-cta{display:flex;gap:1rem;flex-wrap:wrap}
.hero-meta{
  position:absolute;bottom:0;left:0;right:0;z-index:2;
  border-top:1px solid rgba(255,255,255,.13);
  background:rgba(15,36,48,.42);backdrop-filter:blur(8px);
}
.hero-meta-in{display:flex;flex-wrap:wrap}
.hero-meta div{
  flex:1;min-width:180px;padding:1.35rem 1.7rem;
  border-right:1px solid rgba(255,255,255,.1);
}
.hero-meta div:last-child{border-right:0}
.hero-meta dt{font-size:.68rem;letter-spacing:.17em;text-transform:uppercase;
  color:var(--glass-lt);margin-bottom:.3rem;font-weight:600}
.hero-meta dd{margin:0;color:#fff;font-size:.96rem;font-weight:500}

/* ---------- Page banner (interior pages) ---------- */
.banner{
  position:relative;background:var(--ink);padding:11rem 0 4.6rem;overflow:hidden;
}
.banner h1{color:#fff;max-width:16ch}
.banner p{color:rgba(210,224,231,.88);max-width:56ch;margin-top:1.15rem;font-size:1.1rem}
.crumb{
  display:flex;gap:.6rem;align-items:center;font-size:.76rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--glass-lt);margin-bottom:1.25rem;flex-wrap:wrap;
}
.crumb a{opacity:.75;transition:opacity .3s}
.crumb a:hover{opacity:1}
.crumb span{opacity:.42}

/* ---------- Reveal motion ----------
   Soft fade + rise only. The client explicitly disliked content
   "swiping in frame" on a competitor site, so nothing slides
   laterally and nothing travels far. */
[data-reveal]{
  opacity:0;transform:translate3d(0,16px,0);
  transition:opacity .95s var(--ease-out),transform .95s var(--ease-out);
  will-change:opacity,transform;
}
[data-reveal].in{opacity:1;transform:none}
[data-reveal][data-d="1"]{transition-delay:.09s}
[data-reveal][data-d="2"]{transition-delay:.18s}
[data-reveal][data-d="3"]{transition-delay:.27s}
[data-reveal][data-d="4"]{transition-delay:.36s}
[data-reveal][data-d="5"]{transition-delay:.45s}
[data-reveal][data-d="6"]{transition-delay:.54s}

/* ---------- Cards ---------- */
.grid{display:grid;gap:1.6rem}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

.grid > *{min-width:0}
.card{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:3px;
  overflow:hidden;
  display:flex;flex-direction:column;   /* equal card heights across a row */
  /* Pointer-driven tilt, written by site.js. No transition here on purpose -
     during active tracking the transform must map 1:1 to the cursor or it
     reads as laggy. The .tilt-ease class (added only on pointerleave) is
     what eases the card back to flat. */
  --rx:0deg; --ry:0deg;
  transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transition:box-shadow .5s var(--ease),border-color .5s var(--ease);
}
.card.tilt-ease{transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease)}
.card .card-body{flex:1;display:flex;flex-direction:column;position:relative;z-index:2}
.card .card-link{margin-top:auto}

/* Reflection sweep - a hover-triggered one-shot, not an idle loop. It sits
   parked off the leading edge until :hover starts the keyframe. */
.card::after{
  content:"";position:absolute;top:-30%;left:-45%;
  width:36%;height:160%;z-index:5;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.32),
             rgba(255,255,255,.88),rgba(255,255,255,.32),transparent);
  transform:skewX(-18deg);
  opacity:0;
}
.card:hover::after{
  animation:card-sheen 1.56s cubic-bezier(.22,.61,.36,1);
}
@keyframes card-sheen{
  0%   {left:-45%; opacity:0}
  12%  {opacity:.95}
  55%  {opacity:.95}
  100% {left:135%; opacity:0}
}

.card:hover{
  box-shadow:var(--shadow-lg);border-color:var(--glass-lt);
  transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-6px);
}
@media (hover:none){
  .card::after{display:none}
  .card{transform:none}
  .card:hover{transform:translateY(-4px)}
}
.card-body{padding:1.9rem 1.75rem}
.card h3{margin-bottom:.6rem}
.card p{font-size:.95rem;color:var(--body-lt);margin-bottom:1.1rem}
.card-fig{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--ink-2)}
.card-fig img{width:100%;height:100%;object-fit:cover;transition:transform 1.05s var(--ease)}
.card:hover .card-fig img{transform:scale(1.055)}
.card-link{
  font-size:.76rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--glass);display:inline-flex;align-items:center;gap:.5rem;
}
.card-link .arw{transition:transform .42s var(--ease);display:inline-block}
.card:hover .card-link .arw{transform:translateX(6px)}

/* Service card with generated glass art instead of a photo.
   Same 4/3 ratio as .card-fig so photo and generated cards align in a row. */
.svc-art{
  position:relative;aspect-ratio:4/3;overflow:hidden;
  background:
    radial-gradient(70% 55% at 26% 18%, rgba(111,176,199,.34), transparent 68%),
    radial-gradient(58% 50% at 82% 78%, rgba(176,141,87,.20), transparent 70%),
    linear-gradient(150deg,var(--ink) 0%,var(--ink-3) 100%);
}
.svc-art .pane{
  position:absolute;inset:12% 14%;
  border:1px solid rgba(255,255,255,.24);
  background:linear-gradient(140deg,rgba(111,176,199,.26),rgba(255,255,255,.05) 45%,rgba(176,141,87,.14));
  backdrop-filter:blur(2px);
  transition:transform .8s var(--ease),border-color .6s;
}
.card:hover .svc-art .pane{transform:scale(1.045) translateY(-2px);border-color:rgba(255,255,255,.44)}
.svc-art .pane::before{ /* mullion */
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent calc(50% - .5px),rgba(255,255,255,.24) 50%,transparent calc(50% + .5px));
}
.svc-art .pane::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,transparent calc(38% - .5px),rgba(255,255,255,.17) 38%,transparent calc(38% + .5px));
}
.svc-art .shine{
  position:absolute;width:150%;height:60%;top:-20%;left:-30%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);
  transform:rotate(-24deg);transition:transform 1.1s var(--ease);
}
.card:hover .svc-art .shine{transform:rotate(-24deg) translateX(28%)}

/* Per-service variants so eight generated panels never read as one asset
   repeated. Each changes the glazing pattern, light angle and pane geometry. */
.svc-art[data-v="3"] .pane{inset:9% 20%}
.svc-art[data-v="3"] .pane::before{background:linear-gradient(90deg,transparent calc(33.33% - .5px),rgba(255,255,255,.22) 33.33%,transparent calc(33.33% + .5px)),linear-gradient(90deg,transparent calc(66.66% - .5px),rgba(255,255,255,.22) 66.66%,transparent calc(66.66% + .5px))}
.svc-art[data-v="3"] .pane::after{background:none}
.svc-art[data-v="3"] .shine{transform:rotate(-14deg)}
.card:hover .svc-art[data-v="3"] .shine{transform:rotate(-14deg) translateX(30%)}

.svc-art[data-v="4"] .pane{inset:11% 16%}
.svc-art[data-v="4"] .pane::before{background:linear-gradient(90deg,transparent calc(50% - 1px),rgba(255,255,255,.3) 50%,transparent calc(50% + 1px))}
.svc-art[data-v="4"] .pane::after{background:linear-gradient(0deg,transparent calc(50% - .5px),rgba(255,255,255,.13) 50%,transparent calc(50% + .5px))}
.svc-art[data-v="4"] .shine{transform:rotate(-34deg)}
.card:hover .svc-art[data-v="4"] .shine{transform:rotate(-34deg) translateX(26%)}

.svc-art[data-v="5"] .pane{inset:14% 26%;border-width:1px 1px 0 1px}
.svc-art[data-v="5"] .pane::before{background:repeating-linear-gradient(90deg,transparent 0 calc(25% - .5px),rgba(255,255,255,.17) calc(25% - .5px) 25%)}
.svc-art[data-v="5"] .pane::after{background:linear-gradient(0deg,rgba(255,255,255,.14),transparent 30%)}
.svc-art[data-v="5"] .shine{transform:rotate(-8deg)}
.card:hover .svc-art[data-v="5"] .shine{transform:rotate(-8deg) translateX(32%)}

.svc-art[data-v="6"] .pane{inset:16% 30%;border-radius:50% 50% 4px 4px}
.svc-art[data-v="6"] .pane::before{background:linear-gradient(0deg,transparent calc(62% - .5px),rgba(255,255,255,.2) 62%,transparent calc(62% + .5px))}
.svc-art[data-v="6"] .pane::after{background:radial-gradient(60% 46% at 50% 8%,rgba(255,255,255,.24),transparent 70%)}
.svc-art[data-v="6"] .shine{transform:rotate(-42deg)}
.card:hover .svc-art[data-v="6"] .shine{transform:rotate(-42deg) translateX(24%)}

.svc-art[data-v="7"] .pane{inset:8% 9%}
.svc-art[data-v="7"] .pane::before{background:repeating-linear-gradient(90deg,transparent 0 calc(20% - .5px),rgba(255,255,255,.2) calc(20% - .5px) 20%)}
.svc-art[data-v="7"] .pane::after{background:repeating-linear-gradient(0deg,transparent 0 calc(33.33% - .5px),rgba(255,255,255,.14) calc(33.33% - .5px) 33.33%)}
.svc-art[data-v="7"] .shine{transform:rotate(-18deg)}
.card:hover .svc-art[data-v="7"] .shine{transform:rotate(-18deg) translateX(30%)}

.svc-art[data-v="8"] .pane{inset:18% 22%;transform:rotate(-2.5deg)}
.svc-art[data-v="8"] .pane::before{background:linear-gradient(115deg,rgba(255,255,255,.2),transparent 55%)}
.svc-art[data-v="8"] .pane::after{background:none}
.card:hover .svc-art[data-v="8"] .pane{transform:rotate(-2.5deg) scale(1.045)}
.svc-art[data-v="8"] .shine{transform:rotate(-52deg)}
.card:hover .svc-art[data-v="8"] .shine{transform:rotate(-52deg) translateX(22%)}
.svc-n{
  position:absolute;right:1.1rem;bottom:.75rem;z-index:2;
  font-family:var(--serif);font-size:2.6rem;color:rgba(255,255,255,.17);line-height:1;
}

/* ---------- Split feature ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,5vw,5rem);align-items:center}
.split-quote{grid-template-columns:1.35fr 1fr;align-items:start}
.split.rev .split-fig{order:2}
.split-fig{position:relative}
.split-fig img{border-radius:3px;box-shadow:var(--shadow-lg);width:100%}
.split-fig .frame{
  position:absolute;inset:20px -20px -20px 20px;border:1px solid var(--brass);
  border-radius:3px;z-index:0;opacity:.8;pointer-events:none;
}
.split-fig img{position:relative;z-index:1}
.split-body h2{margin-bottom:1.3rem}

/* ---------- Stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem;text-align:center}
.stat .n{
  font-family:var(--serif);font-size:clamp(2.6rem,4.4vw,3.7rem);
  color:var(--ink);line-height:1;display:block;
}
.tone-ink .stat .n{color:#fff}
.stat .l{
  font-size:.73rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--body-lt);margin-top:.75rem;display:block;
}
.tone-ink .stat .l{color:var(--glass-lt)}
.stat{position:relative;padding:0 1rem}
.stat::after{content:"";position:absolute;right:0;top:14%;height:72%;width:1px;background:var(--line)}
.tone-ink .stat::after{background:rgba(255,255,255,.14)}
.stat:last-child::after{display:none}

/* ---------- Gallery ---------- */
.gal{columns:3;column-gap:1.25rem}
.gal figure{
  break-inside:avoid;margin:0 0 1.25rem;position:relative;overflow:hidden;
  border-radius:3px;cursor:zoom-in;background:var(--ink-2);
}
.gal img{width:100%;transition:transform 1.1s var(--ease),filter .6s}
.gal figure:hover img{transform:scale(1.05)}
.gal figcaption{
  position:absolute;inset:auto 0 0 0;padding:1.5rem 1.15rem .95rem;
  background:linear-gradient(transparent,rgba(15,36,48,.9));
  color:#fff;font-size:.86rem;letter-spacing:.03em;
  opacity:0;transform:translateY(8px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.gal figure:hover figcaption{opacity:1;transform:none}
.gal .zoom{
  position:absolute;top:.85rem;right:.85rem;width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.92);display:grid;place-items:center;
  opacity:0;transform:scale(.8);transition:opacity .45s var(--ease),transform .45s var(--ease);
}
.gal figure:hover .zoom{opacity:1;transform:none}
.gal .zoom svg{width:15px;height:15px;stroke:var(--ink);fill:none;stroke-width:2}

.lightbox{
  position:fixed;inset:0;z-index:300;background:rgba(9,22,30,.96);
  display:grid;place-items:center;opacity:0;visibility:hidden;
  transition:opacity .45s var(--ease),visibility .45s;
  backdrop-filter:blur(6px);
}
.lightbox.on{opacity:1;visibility:visible}
.lightbox img{
  max-width:92vw;max-height:84vh;border-radius:3px;
  transform:scale(.95);transition:transform .5s var(--ease-out);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.8);
}
.lightbox.on img{transform:scale(1)}
.lb-cap{position:absolute;bottom:5.5vh;left:0;right:0;text-align:center;color:#fff;font-size:.92rem}
.lb-x{position:absolute;top:2rem;right:2rem;width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(255,255,255,.3);background:none;color:#fff;cursor:pointer;
  font-size:1.5rem;line-height:1;transition:background .3s,transform .3s}
.lb-x:hover{background:rgba(255,255,255,.14);transform:rotate(90deg)}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;
  border-radius:50%;border:1px solid rgba(255,255,255,.26);background:rgba(255,255,255,.05);
  color:#fff;cursor:pointer;font-size:1.3rem;transition:background .3s,border-color .3s}
.lb-nav:hover{background:rgba(255,255,255,.16);border-color:#fff}
.lb-prev{left:2.2rem}.lb-next{right:2.2rem}

/* ---------- Forms ---------- */
.form-card{
  background:#fff;border:1px solid var(--line);border-radius:3px;
  padding:clamp(1.9rem,3.6vw,3.1rem);box-shadow:var(--shadow);
}
.field{margin-bottom:1.35rem}
.field label{
  display:block;font-size:.74rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink);margin-bottom:.55rem;
}
.field .req{color:var(--glass)}
.field input,.field select,.field textarea{
  width:100%;padding:.92rem 1.05rem;border:1px solid var(--line);border-radius:2px;
  background:var(--sand);font-family:inherit;font-size:1rem;color:var(--ink);
  transition:border-color .34s,box-shadow .34s,background .34s;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--glass);background:#fff;
  box-shadow:0 0 0 3px rgba(62,138,166,.13);
}
.field textarea{min-height:145px;resize:vertical}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1.35rem}
.hp{position:absolute;left:-9999px;opacity:0;pointer-events:none}
.form-note{font-size:.84rem;color:var(--body-lt);margin-top:1.2rem}

.chips{display:flex;flex-wrap:wrap;gap:.6rem}
.chip{position:relative}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip span{
  display:block;padding:.6rem 1.05rem;border:1px solid var(--line);border-radius:2px;
  font-size:.87rem;cursor:pointer;background:var(--sand);
  transition:all .32s var(--ease);
}
.chip input:checked + span{background:var(--ink);color:#fff;border-color:var(--ink)}
.chip span:hover{border-color:var(--glass);color:var(--glass)}
.chip input:checked + span:hover{color:#fff}
.chip input:focus-visible + span{box-shadow:0 0 0 3px rgba(62,138,166,.3)}

/* ---------- Contact / info blocks ---------- */
.info-row{display:flex;gap:1.15rem;align-items:flex-start;margin-bottom:1.9rem}
.info-row .ic{
  width:42px;height:42px;border:1px solid var(--glass);border-radius:50%;flex:none;
  display:grid;place-items:center;color:var(--glass);
  transition:background .4s var(--ease),color .4s;
}
.info-row:hover .ic{background:var(--glass);color:#fff}
.info-row .ic svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7}
.info-row h4{margin-bottom:.2rem}
.info-row a,.info-row p{font-size:.97rem;color:var(--body)}
.info-row a{transition:color .3s}
.info-row a:hover{color:var(--glass)}

.map-wrap{
  position:relative;border-radius:3px;overflow:hidden;border:1px solid var(--line);
  box-shadow:var(--shadow);background:var(--glass-mist);
}
.map-wrap iframe{display:block;width:100%;height:430px;border:0;filter:grayscale(.35) contrast(1.04)}

.area-list{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.6rem}
.area-list span{
  padding:.5rem 1rem;border:1px solid var(--line);border-radius:2px;
  font-size:.85rem;background:#fff;transition:all .34s var(--ease);
}
.area-list span:hover{border-color:var(--glass);color:var(--glass);transform:translateY(-2px)}

/* ---------- Manufacturer wall ----------
   Every logo ships pre-flattened to --ink on transparent, so there is no
   grayscale filter here - the tone is baked into the asset. What varies
   wildly is proportion: NanaWall is a long wordmark, CwDoors is nearly
   square. Fixed cells with a max-height cap (rather than a fixed height)
   let each mark sit at its own size inside a common footprint, which is
   what keeps the rows level. */
.brands{
  list-style:none;margin:0 auto;padding:0;max-width:1060px;
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(.9rem,2vw,2rem) clamp(1.2rem,3vw,3rem);
}
.brands li{
  flex:0 0 auto;width:clamp(116px,13.5vw,164px);height:86px;
  display:flex;align-items:center;justify-content:center;
  transition:transform .5s var(--ease);
}
.brands img{
  max-width:100%;max-height:52px;width:auto;height:auto;
  opacity:.44;transition:opacity .45s var(--ease);
}
.brands li:hover{transform:translateY(-3px)}
.brands li:hover img{opacity:.92}

/* ---------- Spec list ---------- */
.speclist{list-style:none;padding:0;margin:0}
.speclist li{
  padding:1.05rem 0 1.05rem 2.1rem;border-bottom:1px solid var(--line);position:relative;
  font-size:.98rem;
}
.speclist li::before{
  content:"";position:absolute;left:0;top:1.55rem;width:9px;height:9px;
  border:1px solid var(--glass);background:var(--glass-pale);transform:rotate(45deg);
}
.speclist li:last-child{border-bottom:0}

/* ---------- CTA band ---------- */
.cta-band{position:relative;overflow:hidden;background:var(--ink);text-align:center}
.cta-band h2{color:#fff;max-width:20ch;margin-inline:auto}
.cta-band p{color:rgba(205,220,228,.86);max-width:52ch;margin:1.2rem auto 2.3rem}
.cta-band .hero-cta{justify-content:center}

/* ---------- Footer ---------- */
.ftr{background:var(--ink);color:#9FB3BF;padding:5rem 0 0;position:relative;overflow:hidden}
.ftr-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:3rem;
  position:relative;z-index:2}
.ftr img.flogo{height:84px;width:auto;margin-bottom:1.5rem}
.ftr h4{color:#fff;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;
  margin-bottom:1.3rem;font-weight:600}
.ftr a{display:block;padding:.32rem 0;font-size:.93rem;transition:color .3s,padding-left .3s var(--ease)}
.ftr a:hover{color:#fff;padding-left:.4rem}
.ftr p{font-size:.93rem;line-height:1.75}
.ftr-btm{
  margin-top:4rem;border-top:1px solid rgba(255,255,255,.1);padding:1.7rem 0;
  display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  font-size:.83rem;position:relative;z-index:2;
}
.ftr-btm a{display:inline;padding:0}
.lic{color:#7E96A4;font-size:.83rem}

/* ---------- Scroll progress ---------- */
.prog{position:fixed;top:0;left:0;height:2px;background:var(--brass);z-index:200;width:0;
  transition:width .12s linear}

/* ---------- Mobile ---------- */
@media (max-width:1020px){
  .g4{grid-template-columns:repeat(2,1fr)}
  .gal{columns:2}
  .ftr-grid{grid-template-columns:1fr 1fr;gap:2.4rem}
  .stats{grid-template-columns:repeat(2,1fr);gap:2.4rem}
  .stat:nth-child(2)::after{display:none}
}
@media (max-width:860px){
  body{font-size:16px}
  .burger{display:block}
  .nav{
    position:fixed;inset:0 0 0 auto;width:min(85vw,370px);
    background:var(--sand);flex-direction:column;align-items:stretch;
    padding:6.5rem 1.8rem 2.5rem;gap:0;overflow-y:auto;
    transform:translateX(100%);transition:transform .5s var(--ease);
    box-shadow:-20px 0 60px -20px rgba(15,36,48,.3);
  }
  .nav.open{transform:none}
  .nav > a,.nav .drop > button{
    color:var(--ink);font-size:.95rem;padding:1rem 0;
    border-bottom:1px solid var(--line);width:100%;justify-content:space-between;
    text-transform:none;letter-spacing:.02em;
  }
  .nav > a::after,.nav .drop > button::after{display:none}
  .drop{width:100%}
  /* The :hover and :focus-within rules above are BOTH more specific than a
     bare .drop-menu, and a media query adds no specificity - so on a phone,
     tapping Services focused the button, :focus-within won, and the panel
     kept the desktop `translateX(-50%)`. The submenu slid half its own width
     off the left edge of the nav sheet and the service names were sheared in
     half. That is the broken dropdown Adam reported. These selectors have to
     stay matched to the ones they are overriding. */
  .drop-menu,
  .drop:hover .drop-menu,
  .drop:focus-within .drop-menu{
    position:static;transform:none;opacity:1;visibility:visible;
    box-shadow:none;border:0;background:none;padding:0;min-width:0;
    max-height:0;overflow:hidden;transition:max-height .5s var(--ease);
  }
  .drop.open .drop-menu{max-height:640px}
  .drop.open .caret{transform:rotate(225deg) translateY(-4px)}
  .drop-menu a{padding:.72rem 0 .72rem 1.1rem;border-bottom:1px solid var(--line);
    font-size:.9rem;color:var(--body)}
  .drop-menu a:hover{background:none;padding-left:1.5rem}
  .nav .btn{margin-top:1.5rem;width:100%}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .split{grid-template-columns:1fr;gap:2.6rem}
  .split.rev .split-fig{order:0}
  .field-row{grid-template-columns:1fr}
  .gal{columns:1}
  /* .hero is display:flex on desktop. Once .hero-meta drops to position:static
     it becomes a flex ITEM and lands beside the hero copy, so the hero has to
     stop being a flex container at this breakpoint. */
  .hero{display:block;min-height:auto;padding:9rem 0 0}
  .hero-in{padding:1rem 0 3.5rem;max-width:none}
  .hero-meta{position:static;background:rgba(15,36,48,.6)}
  .hero-meta div{flex:1 1 50%;border-bottom:1px solid rgba(255,255,255,.1)}
  .banner{padding:8.5rem 0 3.4rem}
  .ftr-grid{grid-template-columns:1fr}
  .lb-prev{left:.7rem}.lb-next{right:.7rem}
  .lb-x{top:1rem;right:1rem}
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .btn{width:100%}
}
@media (max-width:520px){
  .stats{grid-template-columns:1fr}
  .stat::after{display:none}
  .hero-meta div{flex:1 1 100%;border-right:0}
}

/* ---------- Accessibility ---------- */
:focus-visible{outline:2px solid var(--glass);outline-offset:3px}
.skip{
  position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;
  padding:.9rem 1.5rem;z-index:400;
}
.skip:focus{left:0}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  [data-reveal]{opacity:1;transform:none}
  .hero-bg img{transform:none}
}
@media print{
  .hdr,.ftr,.cta-band,.prog,.lightbox{display:none}
  body{background:#fff}
}