/* =====================================================================
   SEALUX — The Fine Line
   Design system: the joint. Two materials meeting at a precise seam.
   ===================================================================== */

/* ---------- tokens ---------- */
:root{
  --red:#C84449;
  --red-dp:#A5343A;
  --red-tint:rgba(200,68,73,.10);

  --ink:#14171A;
  --ink-2:#1D2226;
  --ink-3:#2B3136;
  --ink-4:#4A5157;

  --paper:#FFFFFF;
  --shell:#F3F2EF;
  --shell-2:#EAE8E3;
  --line:#E1DED8;
  --line-dk:rgba(255,255,255,.14);

  --muted:#7C766D;
  --muted-lt:rgba(255,255,255,.62);

  --ff-dsp:'Fraunces', 'Iowan Old Style', Georgia, serif;
  --ff-body:'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ff-mono:'IBM Plex Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  --wrap:1240px;
  --pad:clamp(20px,5vw,48px);
  --sec-y:clamp(72px,9vw,132px);
  --r:3px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow:0 1px 2px rgba(20,23,26,.05), 0 12px 34px -14px rgba(20,23,26,.20);
  --shadow-lg:0 2px 4px rgba(20,23,26,.06), 0 30px 70px -26px rgba(20,23,26,.38);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
/* flex/grid display rules below would otherwise beat the UA [hidden] rule */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px;overflow-x:clip}
body{
  margin:0;
  font-family:var(--ff-body);
  font-size:16px;
  line-height:1.62;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
table{border-collapse:collapse;width:100%}

:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:2px}

.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:#fff;padding:12px 20px}
.skip:focus{left:12px;top:12px}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}

/* ---------- the notch: recurring joint motif ---------- */
.notch{
  display:inline-block;width:26px;height:2px;background:var(--red);
  vertical-align:middle;margin-right:11px;flex:none;
}

.eyebrow{
  font-family:var(--ff-mono);font-size:11.5px;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;color:var(--muted);
  display:flex;align-items:center;margin-bottom:22px;
}
.eyebrow--light{color:rgba(255,255,255,.72)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--ff-body);font-size:14.5px;font-weight:600;letter-spacing:.01em;
  padding:14px 26px;border-radius:var(--r);
  background:var(--red);color:#fff;border:1px solid var(--red);
  transition:background .22s var(--ease), transform .22s var(--ease), box-shadow .22s var(--ease);
  white-space:nowrap;
}
.btn:hover{background:var(--red-dp);border-color:var(--red-dp);transform:translateY(-1px);box-shadow:0 8px 22px -8px rgba(200,68,73,.6)}
.btn:active{transform:translateY(0)}
.btn--lg{padding:17px 34px;font-size:15.5px}
.btn--sm{padding:11px 20px;font-size:13.5px}

.btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.34)}
.btn--ghost:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.6);box-shadow:none}
.btn--back{color:var(--ink);border-color:var(--line)}
.btn--back:hover{background:var(--shell);border-color:var(--ink-4)}

.lnk{
  display:inline-flex;align-items:center;gap:8px;
  font-size:14px;font-weight:600;color:var(--red);
  border-bottom:1px solid rgba(200,68,73,.32);padding-bottom:3px;
  transition:border-color .2s, gap .2s var(--ease);
}
.lnk:hover{border-color:var(--red);gap:12px}

/* =====================================================================
   HEADER
   ===================================================================== */
.hdr{
  position:fixed;inset:0 0 auto 0;z-index:100;
  transition:background .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
  border-bottom:1px solid transparent;
}
.hdr__in{
  width:100%;max-width:var(--wrap);margin-inline:auto;padding:0 var(--pad);
  height:78px;display:flex;align-items:center;gap:28px;
  transition:height .3s var(--ease);
}
.hdr__logo{height:34px;width:auto;transition:height .3s var(--ease)}
.hdr__brand{flex:none}

.hdr__nav{display:flex;gap:30px;margin-left:auto}
.hdr__nav a{
  font-size:14px;font-weight:500;color:rgba(255,255,255,.82);
  position:relative;padding:6px 0;transition:color .2s;
}
.hdr__nav a::after{
  content:'';position:absolute;left:0;right:100%;bottom:0;height:1.5px;
  background:var(--red);transition:right .28s var(--ease);
}
.hdr__nav a:hover{color:#fff}
.hdr__nav a:hover::after{right:0}

.hdr__act{display:flex;align-items:center;gap:18px}
.hdr__tel{display:flex;flex-direction:column;line-height:1.25;text-align:right}
.hdr__tel-lbl{font-family:var(--ff-mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.hdr__tel-num{font-size:15px;font-weight:700;color:#fff}
.hdr__tel:hover .hdr__tel-num{color:var(--red)}

/* scrolled state */
.hdr.is-stuck{background:#fff;border-bottom-color:var(--line);box-shadow:0 1px 24px -8px rgba(20,23,26,.18)}
.hdr.is-stuck .hdr__in{height:68px}
.hdr.is-stuck .hdr__logo{height:30px}
.hdr.is-stuck .hdr__nav a{color:var(--ink-4)}
.hdr.is-stuck .hdr__nav a:hover{color:var(--ink)}
.hdr.is-stuck .hdr__tel-lbl{color:var(--muted)}
.hdr.is-stuck .hdr__tel-num{color:var(--ink)}
.hdr.is-stuck .hdr__burger span{background:var(--ink)}

.hdr__burger{display:none;width:42px;height:42px;flex-direction:column;justify-content:center;gap:6px;align-items:center}
.hdr__burger span{display:block;width:21px;height:1.5px;background:#fff;transition:transform .3s var(--ease), opacity .2s}
.hdr__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(3.75px) rotate(45deg)}
.hdr__burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-3.75px) rotate(-45deg)}

/* mobile nav */
.mnav{position:fixed;inset:68px 0 auto 0;z-index:99;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:var(--shadow)}
.mnav nav{display:flex;flex-direction:column;padding:10px var(--pad) 26px}
.mnav a{padding:15px 0;border-bottom:1px solid var(--line);font-size:16px;font-weight:500}
.mnav__cta{margin-top:18px;border:0!important;background:var(--red);color:#fff;text-align:center;border-radius:var(--r);font-weight:600}

/* =====================================================================
   HERO
   ===================================================================== */
.hero{position:relative;background:var(--ink);padding-top:78px;isolation:isolate}
.hero__media{position:absolute;inset:0;z-index:-1;overflow:hidden}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.hero__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(100deg, rgba(15,18,20,.96) 0%, rgba(15,18,20,.90) 34%, rgba(15,18,20,.52) 62%, rgba(15,18,20,.42) 100%),
    linear-gradient(to bottom, rgba(15,18,20,.66) 0%, rgba(15,18,20,0) 26%);
}

.hero__in{
  width:100%;max-width:var(--wrap);margin-inline:auto;padding:clamp(56px,7vw,92px) var(--pad) clamp(64px,7vw,104px);
  display:grid;grid-template-columns:1fr minmax(400px,468px);gap:clamp(36px,5vw,80px);align-items:center;
  min-height:min(880px, calc(100svh - 78px));
}

.hero__copy{max-width:600px}
.hero__h1{
  font-family:var(--ff-dsp);
  font-size:clamp(44px,6.1vw,84px);
  line-height:1.02;letter-spacing:-.022em;font-weight:400;
  color:#fff;position:relative;
  font-variation-settings:'SOFT' 0,'WONK' 1,'opsz' 120;
}
.hero__h1 em{font-style:italic;color:#fff;font-variation-settings:'SOFT' 8,'WONK' 1}
/* the bead: a drawn silicone line */
.bead{
  display:block;height:3px;width:0;background:var(--red);margin-top:26px;border-radius:2px;
  animation:bead 1.15s .35s var(--ease) forwards;
  box-shadow:0 0 18px rgba(200,68,73,.55);
}
@keyframes bead{to{width:132px}}

.hero__sub{
  margin-top:24px;font-size:clamp(16px,1.35vw,18.5px);line-height:1.66;
  color:rgba(255,255,255,.80);max-width:53ch;
}

.hero__proof{
  display:grid;grid-template-columns:repeat(3,auto);justify-content:start;
  gap:12px clamp(24px,3.4vw,46px);margin-top:40px;
  padding-top:26px;border-top:1px solid rgba(255,255,255,.16);
}
.hero__proof li{
  font-family:var(--ff-mono);font-size:11.5px;letter-spacing:.06em;
  color:rgba(255,255,255,.62);text-transform:uppercase;
}
.hero__proof strong{
  display:block;font-family:var(--ff-dsp);font-size:26px;font-weight:500;
  color:#fff;letter-spacing:-.01em;margin-bottom:1px;text-transform:none;
}

/* =====================================================================
   SECTION SCAFFOLD
   ===================================================================== */
.sec{padding-block:var(--sec-y);position:relative}
.sec__hd{max-width:760px;margin-bottom:clamp(44px,5vw,68px)}
.sec__hd--center{margin-inline:auto;text-align:center}
.sec__hd--center .eyebrow{justify-content:center}

.sec__h2{
  font-family:var(--ff-dsp);font-weight:400;
  font-size:clamp(32px,4.1vw,54px);line-height:1.08;letter-spacing:-.02em;
  color:var(--ink);font-variation-settings:'SOFT' 0,'WONK' 1,'opsz' 110;
}
.sec__h2--light{color:#fff}
.sec__lede{margin-top:20px;font-size:clamp(15.5px,1.2vw,17.5px);line-height:1.66;color:var(--muted);max-width:60ch}
.sec__hd--center .sec__lede{margin-inline:auto}
.sec__lede--light{color:rgba(255,255,255,.66)}

/* =====================================================================
   SERVICES — two tracks
   ===================================================================== */
.sec--services{background:var(--shell);border-top:1px solid var(--line)}
.tracks{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(22px,2.6vw,34px)}
.track{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.track__img{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--shell-2)}
.track__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.track:hover .track__img img{transform:scale(1.045)}
.track__tag{
  position:absolute;left:0;bottom:0;
  font-family:var(--ff-mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  background:var(--red);color:#fff;padding:8px 16px;
}
.track__tag--alt{background:var(--ink)}

.track__body{padding:clamp(26px,3vw,40px);display:flex;flex-direction:column;flex:1}
.track__h3{font-family:var(--ff-dsp);font-size:clamp(22px,2.1vw,28px);font-weight:500;letter-spacing:-.012em;line-height:1.2}
.track__lede{margin-top:12px;color:var(--muted);font-size:15.5px;line-height:1.62}

.track__list{margin-top:26px;border-top:1px solid var(--line)}
.track__list li{padding:15px 0;border-bottom:1px solid var(--line);font-size:14.5px;color:var(--muted);line-height:1.55}
.track__list li span{display:block;font-weight:600;color:var(--ink);font-size:15px;margin-bottom:3px}

.track__meta{display:flex;flex-wrap:wrap;gap:7px;margin-top:22px}
.track__meta li{
  font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--line);padding:5px 10px;border-radius:2px;
}
.track__body .lnk{margin-top:auto;padding-top:26px;align-self:flex-start}

/* =====================================================================
   SIGNATURE — MATERIAL MATCH
   ===================================================================== */
.sec--match{background:var(--ink);overflow:hidden}
.match{max-width:1020px;margin-inline:auto}

.match__tabs{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:40px;
}
.match__tab{
  font-family:var(--ff-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.62);padding:10px 20px;border:1px solid var(--line-dk);border-radius:2px;
  transition:color .22s, background .22s, border-color .22s;
}
.match__tab:hover{color:#fff;border-color:rgba(255,255,255,.4)}
.match__tab.is-on{background:var(--red);border-color:var(--red);color:#fff}

.match__stage{
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,3vw,44px);
  align-items:stretch;
}

/* --- the joint cross-section --- */
.joint{
  position:relative;border-radius:var(--r);overflow:hidden;
  min-height:340px;display:flex;flex-direction:column;
  border:1px solid var(--line-dk);
}
.joint__upper,.joint__lower{flex:1;position:relative;transition:background-color .55s var(--ease)}
/* the substrate edges fall away into the joint recess, and the cut edge catches light */
.joint__upper{box-shadow:inset 0 -14px 16px -14px rgba(0,0,0,.55), inset 0 -1px 0 rgba(255,255,255,.20)}
.joint__lower{box-shadow:inset 0 14px 16px -14px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.16)}

/* one light source across the whole section — the single biggest thing that stops
   the two halves reading as two flat swatches stacked on each other */
.joint::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:
    radial-gradient(130% 62% at 24% -6%,rgba(255,255,255,.16),transparent 62%),
    radial-gradient(100% 70% at 92% 108%,rgba(0,0,0,.26),transparent 66%),
    linear-gradient(180deg,rgba(0,0,0,.05) 0,transparent 16%,transparent 82%,rgba(0,0,0,.14) 100%);
}

.joint__bead{
  height:calc(var(--beadH,20px) + 16px);position:relative;background:#0B0D0F;flex:none;
  display:flex;align-items:center;padding:0 22px;
  transition:height .55s var(--ease);
}
/* tooled silicone: rounded section, gloss along the top, shadow where it meets substrate */
.joint__bead i{
  display:block;width:100%;
  height:var(--beadH,20px);border-radius:calc(var(--beadH,20px) / 2);
  background:
    linear-gradient(180deg, rgba(255,255,255,.60) 0 7%, rgba(255,255,255,.26) 7% 24%,
                            rgba(255,255,255,.04) 42%, rgba(0,0,0,.09) 64%,
                            rgba(0,0,0,.28) 100%),
    linear-gradient(90deg, rgba(0,0,0,.20) 0 1%, transparent 5% 95%, rgba(0,0,0,.20) 99%),
    var(--bead,#CFCAC2);
  box-shadow:0 3px 10px rgba(0,0,0,.55), inset 0 -1px 2px rgba(0,0,0,.30);
  transition:background .55s var(--ease), height .55s var(--ease), border-radius .55s var(--ease);
}
.joint__dim{
  position:absolute;right:14px;bottom:calc(100% + 10px);z-index:3;
  font-family:var(--ff-mono);font-size:10px;letter-spacing:.08em;
  color:#fff;background:rgba(11,13,15,.85);padding:4px 8px;border-radius:2px;
  pointer-events:none;white-space:nowrap;
}
.joint__cap{
  position:absolute;left:14px;bottom:12px;z-index:3;
  font-family:var(--ff-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.78);background:rgba(14,17,19,.88);padding:5px 9px;border-radius:2px;
}

/* =====================================================================
   MATERIAL SURFACES

   Every substrate is built the same three ways up: a base colour, structural
   gradients (grout lines, board seams, veins, reflections), and a procedural
   noise layer blended over the top. The noise is the part that matters — it is
   the sand in the concrete, the grain in the timber, the glaze on the tile, and
   without it the surfaces read as flat vector art rather than material.

   The noise is an SVG feTurbulence rendered inline as a data URI. Alpha is
   forced to 1 and the RGB is centred on mid-grey, so blending it in `overlay`
   perturbs the layers underneath instead of washing them out — `slope` is the
   strength dial and the two baseFrequency values set how the grain is stretched.

   color-interpolation-filters='sRGB' is not optional. Filters run in linearRGB
   by default, which lands mid-grey at 0.73 once it is converted back for display
   and blows every surface out white. Keep `intercept` at 0.5 - slope/2 so the
   centre of the noise stays neutral under `overlay`.
   ===================================================================== */
.joint{
  /* isotropic fine grain — glaze, china, paint */
  --tex-fine:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='f' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='0.55' intercept='0.225'/%3E%3CfeFuncG type='linear' slope='0.55' intercept='0.225'/%3E%3CfeFuncB type='linear' slope='0.55' intercept='0.225'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23f)'/%3E%3C/svg%3E");
  /* tight streaks running along the board — timber grain */
  --tex-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='280'%3E%3Cfilter id='f' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.004 0.24' numOctaves='4' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='1.05' intercept='-0.025'/%3E%3CfeFuncG type='linear' slope='1.05' intercept='-0.025'/%3E%3CfeFuncB type='linear' slope='1.05' intercept='-0.025'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='560' height='280' filter='url(%23f)'/%3E%3C/svg%3E");
  /* broad cathedral figure sitting under the grain */
  --tex-figure:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='280'%3E%3Cfilter id='f' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.008 0.05' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='1.1' intercept='-0.05'/%3E%3CfeFuncG type='linear' slope='1.1' intercept='-0.05'/%3E%3CfeFuncB type='linear' slope='1.1' intercept='-0.05'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='560' height='280' filter='url(%23f)'/%3E%3C/svg%3E");
  /* marble: a steep gamma on alpha keeps only the peaks of the noise, which
     leaves sparse filaments instead of fog — veining, angled off the horizontal */
  --tex-vein:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='300'%3E%3Cfilter id='f' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.005 0.055' numOctaves='4' seed='9'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='gamma' exponent='9' amplitude='2.4'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Cg transform='rotate(-19 210 150)'%3E%3Crect x='-150' y='-150' width='720' height='600' filter='url(%23f)'/%3E%3C/g%3E%3C/svg%3E");
  /* concrete: dense sand plus a coarse blotch pass for the pour */
  --tex-sand:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='f' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='0.8' intercept='0.1'/%3E%3CfeFuncG type='linear' slope='0.8' intercept='0.1'/%3E%3CfeFuncB type='linear' slope='0.8' intercept='0.1'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23f)'/%3E%3C/svg%3E");
  --tex-blotch:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='260'%3E%3Cfilter id='f' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.014' numOctaves='4' seed='6' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='0.95' intercept='0.025'/%3E%3CfeFuncG type='linear' slope='0.95' intercept='0.025'/%3E%3CfeFuncB type='linear' slope='0.95' intercept='0.025'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='400' height='260' filter='url(%23f)'/%3E%3C/svg%3E");
}

/* porcelain tile — glazed face, ground grout joints, one raking sheen */
.joint[data-mat="tile"]     .joint__upper,
.joint[data-mat="tile"]     .joint__lower{
  background-color:#D6D2CA;
  background-image:
    var(--tex-fine),
    linear-gradient(112deg,rgba(255,255,255,.22) 0 9%,transparent 9% 41%,rgba(255,255,255,.11) 41% 47%,transparent 47%),
    radial-gradient(75% 65% at 28% 14%,rgba(255,255,255,.20),transparent 68%),
    radial-gradient(65% 60% at 82% 88%,rgba(112,105,94,.22),transparent 66%),
    repeating-linear-gradient(90deg,transparent 0 110px,rgba(0,0,0,.17) 110px 111px,rgba(172,165,154,.85) 111px 114px,rgba(255,255,255,.20) 114px 115px,transparent 115px 118px),
    repeating-linear-gradient(0deg,transparent 0 110px,rgba(0,0,0,.17) 110px 111px,rgba(172,165,154,.85) 111px 114px,rgba(255,255,255,.20) 114px 115px,transparent 115px 118px);
  background-size:160px 160px,100% 100%,100% 100%,100% 100%,118px 118px,118px 118px;
  background-blend-mode:overlay,normal,normal,normal,normal,normal;
}

/* honed marble — veining first, then the soft polish across it */
.joint[data-mat="stone"]    .joint__upper,
.joint[data-mat="stone"]    .joint__lower{
  background-color:#E7E1D5;
  background-image:
    var(--tex-fine),
    var(--tex-vein),
    linear-gradient(107deg,rgba(255,255,255,.42) 0 16%,transparent 16% 100%),
    radial-gradient(120% 90% at 22% 8%,rgba(255,255,255,.50),transparent 62%),
    radial-gradient(80% 70% at 86% 92%,rgba(146,132,110,.26),transparent 64%);
  background-size:160px 160px,100% 100%,100% 100%,100% 100%,100% 100%;
  background-blend-mode:overlay,multiply,normal,normal,normal;
}

/* oak boards — grain along the length, figure under it, seams between boards */
.joint[data-mat="timber"]   .joint__upper,
.joint[data-mat="timber"]   .joint__lower{
  background-color:#BD9765;
  background-image:
    var(--tex-grain),
    var(--tex-figure),
    repeating-linear-gradient(0deg,transparent 0 43px,rgba(58,35,13,.50) 43px 45px,rgba(255,255,255,.16) 45px 46px,transparent 46px 90px),
    linear-gradient(104deg,rgba(255,255,255,.20) 0 22%,transparent 22% 100%);
  background-size:560px 280px,560px 280px,90px 90px,100% 100%;
  background-blend-mode:soft-light,soft-light,normal,normal;
}

/* sanitaryware — glazed vitreous china, so specular gloss rather than grain */
.joint[data-mat="plumbing"] .joint__upper,
.joint[data-mat="plumbing"] .joint__lower{
  background-color:#EFEDE9;
  background-image:
    var(--tex-fine),
    radial-gradient(130% 95% at 16% 8%,rgba(255,255,255,.95),transparent 54%),
    linear-gradient(118deg,rgba(255,255,255,.55) 0 26%,transparent 26% 68%,rgba(255,255,255,.30) 68% 74%,transparent 74%),
    linear-gradient(158deg,rgba(255,255,255,.40),rgba(96,92,86,.10) 82%);
  background-size:160px 160px,100% 100%,100% 100%,100% 100%;
  background-blend-mode:soft-light,normal,normal,normal;
}

/* float glass — edge tint, hard reflection bands, almost no texture */
.joint[data-mat="glass"]    .joint__upper,
.joint[data-mat="glass"]    .joint__lower{
  background-color:#A6BEC5;
  background-image:
    var(--tex-fine),
    linear-gradient(118deg,rgba(255,255,255,.70) 0 15%,rgba(255,255,255,.14) 15% 31%,transparent 31% 58%,rgba(255,255,255,.44) 58% 66%,rgba(255,255,255,.08) 66% 72%,transparent 72%),
    linear-gradient(118deg,transparent 0 78%,rgba(255,255,255,.22) 78% 82%,transparent 82%),
    radial-gradient(110% 80% at 78% 96%,rgba(28,52,58,.34),transparent 64%);
  background-size:160px 160px,100% 100%,100% 100%,100% 100%;
  background-blend-mode:soft-light,normal,normal,normal;
}

/* off-form concrete — sand, aggregate blotching, faint formwork line */
.joint[data-mat="concrete"] .joint__upper,
.joint[data-mat="concrete"] .joint__lower{
  background-color:#A7A79F;
  background-image:
    var(--tex-sand),
    var(--tex-blotch),
    repeating-linear-gradient(0deg,transparent 0 118px,rgba(0,0,0,.10) 118px 119px,rgba(255,255,255,.07) 119px 120px,transparent 120px 240px),
    radial-gradient(75% 60% at 24% 26%,rgba(255,255,255,.24),transparent 66%),
    radial-gradient(65% 55% at 80% 78%,rgba(0,0,0,.16),transparent 62%);
  background-size:150px 150px,100% 100%,240px 240px,100% 100%,100% 100%;
  background-blend-mode:overlay,overlay,normal,normal,normal;
}

/* 2-pack polyurethane on board — dead smooth, just a trace of orange peel */
.joint[data-mat="joinery"]  .joint__upper,
.joint[data-mat="joinery"]  .joint__lower{
  background-color:#EDEAE4;
  background-image:
    var(--tex-fine),
    linear-gradient(114deg,rgba(255,255,255,.50) 0 20%,transparent 20% 100%),
    linear-gradient(160deg,rgba(255,255,255,.55),rgba(88,84,78,.10) 88%);
  background-size:220px 220px,100% 100%,100% 100%;
  background-blend-mode:soft-light,normal,normal;
}

/* --- spec readout --- */
.spec{
  border:1px solid var(--line-dk);border-radius:var(--r);
  padding:clamp(20px,2.2vw,28px);display:flex;flex-direction:column;justify-content:center;gap:2px;
  background:rgba(255,255,255,.026);
}
.spec__row{display:grid;grid-template-columns:104px 1fr;gap:14px;padding:13px 0;border-bottom:1px solid var(--line-dk);align-items:baseline}
.spec__row:last-child{border-bottom:0}
.spec dt{
  font-family:var(--ff-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.44);
}
.spec dd{font-size:14.5px;color:#fff;line-height:1.5;font-weight:500}
.spec__row--wide dd{color:rgba(255,255,255,.72);font-weight:400;font-size:13.5px}
.spec dd em{font-style:normal}

/* --- colour range: one dot per stock colour, click to run it --- */
.spec__row--sw{align-items:start}
.sw__set{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:11px}
.sw{
  width:19px;height:19px;border-radius:50%;flex:none;padding:0;
  background:var(--c,#CFCAC2);
  box-shadow:0 0 0 1px rgba(255,255,255,.26);
  transition:transform .22s var(--ease), box-shadow .22s var(--ease);
}
/* clear sealant reads as glass, not as a pale grey */
.sw--clear{
  background:
    linear-gradient(135deg,rgba(255,255,255,.85) 0 34%,rgba(255,255,255,.16) 34% 58%,rgba(255,255,255,.62) 58% 70%,rgba(255,255,255,.10) 70%),
    var(--c,#C9D6DB);
}
.sw:hover{transform:scale(1.16);box-shadow:0 0 0 1px rgba(255,255,255,.7)}
.sw.is-on{transform:scale(1.12);box-shadow:0 0 0 1.5px var(--ink),0 0 0 3.5px #fff}
.sw__name{font-size:14.5px;color:#fff;font-weight:500;line-height:1.4}
.sw__note{font-size:12.5px;color:rgba(255,255,255,.56);line-height:1.5;margin-top:4px}

/* =====================================================================
   WHY
   ===================================================================== */
.sec--why{background:var(--paper)}
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.why__i{background:var(--paper);padding:clamp(26px,2.8vw,38px);position:relative;transition:background .3s}
.why__i::before{
  content:'';position:absolute;top:0;left:0;width:0;height:2px;background:var(--red);
  transition:width .4s var(--ease);
}
.why__i:hover{background:var(--shell)}
.why__i:hover::before{width:46px}
.why__i h3{font-family:var(--ff-dsp);font-size:19.5px;font-weight:500;letter-spacing:-.01em;line-height:1.25;margin-bottom:11px}
.why__i p{font-size:14.5px;color:var(--muted);line-height:1.62}

/* =====================================================================
   STANDARD — pull quote
   ===================================================================== */
.standard{
  background:var(--shell);border-block:1px solid var(--line);
  padding-block:clamp(60px,7vw,96px);text-align:center;
}
.standard__eye{
  font-family:var(--ff-mono);font-size:11px;letter-spacing:.19em;text-transform:uppercase;
  color:var(--red);margin-bottom:26px;
}
.standard__q{
  font-family:var(--ff-dsp);font-weight:400;font-style:italic;
  font-size:clamp(23px,3.1vw,40px);line-height:1.28;letter-spacing:-.014em;
  max-width:19ch;margin-inline:auto;color:var(--ink);
  font-variation-settings:'SOFT' 10,'WONK' 1,'opsz' 100;
}
.standard__by{
  margin-top:28px;font-family:var(--ff-mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);
}

/* =====================================================================
   GALLERY
   ===================================================================== */
.sec--gal{background:var(--paper)}
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.5vw,20px)}
.gal__i{position:relative}
.gal__i img{
  width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r);
  background:var(--shell-2);transition:transform .7s var(--ease);
}
.gal__i{overflow:hidden;border-radius:var(--r)}
.gal__i:hover img{transform:scale(1.05)}
/* captions must hold on pale substrates (plaster, timber, sky) as well as dark ones */
.gal__i::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:56%;
  background:linear-gradient(to top,rgba(11,13,15,.82),rgba(11,13,15,.24) 46%,rgba(11,13,15,0));
  pointer-events:none;
}
.gal__cap{
  position:absolute;z-index:2;left:12px;bottom:12px;right:12px;
  font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.9);
  padding-left:16px;
}
.gal__cap::before{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:9px;height:2px;background:var(--red);
}

/* =====================================================================
   SEALANT SYSTEMS
   Cards on stone, not another edge-to-edge hairline grid — .why already
   owns that pattern and the two sections would otherwise read as one.
   ===================================================================== */
.sec--sys{background:var(--shell);border-block:1px solid var(--line)}
.sys{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,22px)}
.sys__i{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(22px,2.3vw,30px);display:flex;flex-direction:column;
  transition:border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.sys__i:hover{border-color:var(--ink-4);transform:translateY(-2px);box-shadow:var(--shadow)}
.sys__n{
  display:block;font-family:var(--ff-dsp);font-size:32px;font-weight:400;
  color:var(--red);line-height:1;margin-bottom:16px;letter-spacing:-.02em;
  font-variation-settings:'SOFT' 0,'WONK' 1;
}
.sys__i h3{
  font-family:var(--ff-dsp);font-size:19px;font-weight:500;
  letter-spacing:-.01em;line-height:1.25;margin-bottom:10px;
}
.sys__i p{font-size:14px;color:var(--muted);line-height:1.6;margin-bottom:16px}
/* Pinned to the bottom so the spec rule lands at the same height on every card.
   Two classes, so it outranks `.sys__i p` without reaching for !important. */
.sys__i .sys__spec{
  margin:auto 0 0;padding-top:16px;border-top:1px solid var(--line);
  font-family:var(--ff-mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);line-height:1.5;
}

.sys__note{margin-top:26px;font-size:14px;color:var(--muted)}
.sys__note a{color:var(--ink);font-weight:600;border-bottom:1px solid var(--line);padding-bottom:1px;transition:color .2s,border-color .2s}
.sys__note a:hover{color:var(--red);border-color:var(--red)}
/* .sys column counts live in the RESPONSIVE block below — they have to land after
   it or the wider breakpoints win the cascade. */

/* =====================================================================
   PROCESS
   ===================================================================== */
.sec--process{background:var(--ink-2)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-dk);border:1px solid var(--line-dk)}
.step{background:var(--ink-2);padding:clamp(26px,2.8vw,38px);position:relative;transition:background .3s}
.step:hover{background:var(--ink-3)}
.step__n{
  display:block;font-family:var(--ff-mono);font-size:11.5px;letter-spacing:.14em;
  color:var(--red);margin-bottom:22px;
}
.step h3{font-family:var(--ff-dsp);font-size:20px;font-weight:500;color:#fff;letter-spacing:-.01em;margin-bottom:11px;line-height:1.25}
.step p{font-size:14.5px;color:rgba(255,255,255,.60);line-height:1.62}

/* =====================================================================
   FAQ
   ===================================================================== */
.sec--faq{background:var(--paper);border-top:1px solid var(--line)}
.faq__wrap{display:grid;grid-template-columns:minmax(240px,340px) 1fr;gap:clamp(30px,5vw,80px);align-items:start}
.sec--faq .sec__hd{margin-bottom:0;position:sticky;top:110px}

.faq{border-top:1px solid var(--line)}
.faq__i{border-bottom:1px solid var(--line)}
.faq__i summary{
  list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;
  font-size:16.5px;font-weight:600;color:var(--ink);line-height:1.45;
  transition:color .2s;
}
.faq__i summary::-webkit-details-marker{display:none}
.faq__i summary:hover{color:var(--red)}
.faq__i summary::after{
  content:'';position:absolute;right:8px;top:31px;
  width:11px;height:11px;border-right:1.6px solid var(--muted);border-bottom:1.6px solid var(--muted);
  transform:rotate(45deg);transition:transform .3s var(--ease), border-color .2s;
}
.faq__i[open] summary::after{transform:rotate(-135deg);border-color:var(--red)}
.faq__i[open] summary{color:var(--red)}
.faq__a{padding:0 44px 24px 0}
.faq__a p{color:var(--muted);font-size:15px;line-height:1.68;max-width:62ch}

/* =====================================================================
   FINAL CTA
   ===================================================================== */
.cta{background:var(--ink);padding-block:var(--sec-y)}
.cta__in{display:grid;grid-template-columns:1fr minmax(400px,478px);gap:clamp(36px,5vw,84px);align-items:start}
.cta__h2{
  font-family:var(--ff-dsp);font-weight:400;color:#fff;
  font-size:clamp(34px,4.4vw,58px);line-height:1.05;letter-spacing:-.022em;
  font-variation-settings:'SOFT' 0,'WONK' 1,'opsz' 120;
}
.cta__lede{margin-top:20px;color:rgba(255,255,255,.66);font-size:16.5px;line-height:1.66;max-width:46ch}

.cta__contact{margin-top:38px;border-top:1px solid var(--line-dk)}
.cta__contact li{
  display:grid;grid-template-columns:92px 1fr;gap:16px;align-items:baseline;
  padding:14px 0;border-bottom:1px solid var(--line-dk);
}
.cta__lbl{font-family:var(--ff-mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.44)}
.cta__val{font-size:16px;color:#fff;font-weight:500}
/* no resting underline — the row already has a rule under it, and the two together read
   as a doubled line. The underline comes back in red on hover. */
.cta__val--lnk{border-bottom:1px solid transparent;padding-bottom:2px;transition:border-color .2s,color .2s}
.cta__val--lnk:hover{color:var(--red);border-color:var(--red)}

/* The form is now the taller of the two columns (the stock figure under the contact
   list is gone), so there is nothing for a sticky form to track. Left plain. */

/* =====================================================================
   QUOTE FORM
   ===================================================================== */
.qf{
  background:var(--paper);border-radius:var(--r);padding:clamp(24px,2.6vw,34px);
  box-shadow:var(--shadow-lg);position:relative;border-top:3px solid var(--red);
}
.qf__hd{margin-bottom:20px}
.qf__ttl{font-family:var(--ff-dsp);font-size:26px;font-weight:500;letter-spacing:-.015em;line-height:1.15}
.qf__sub{font-size:13.5px;color:var(--muted);margin-top:5px}

.qf__bar{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-bottom:26px}
.qf__bar span{height:3px;background:var(--shell-2);border-radius:2px;overflow:hidden;position:relative}
.qf__bar span::after{
  content:'';position:absolute;inset:0;background:var(--red);
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease);
}
.qf__bar span.is-done::after{transform:scaleX(1)}

.qf__step{border:0;padding:0;margin:0;display:none}
.qf__step.is-on{display:block;animation:fade .34s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

.qf__lg{
  display:flex;align-items:baseline;gap:11px;padding:0;margin-bottom:18px;
  font-size:17px;font-weight:600;color:var(--ink);line-height:1.35;
}
.qf__lg b{font-family:var(--ff-mono);font-size:11px;letter-spacing:.1em;color:var(--red);font-weight:500;flex:none}
.qf__hint{font-size:13px;color:var(--muted);margin:-8px 0 15px}

/* step 1 — big picks */
.qf__pick{display:grid;gap:10px}
.pick{cursor:pointer;display:block}
.pick input{position:absolute;opacity:0;width:0;height:0}
.pick__in{
  display:block;border:1px solid var(--line);border-radius:var(--r);padding:17px 19px;
  transition:border-color .22s, background .22s, box-shadow .22s;
}
.pick:hover .pick__in{border-color:var(--ink-4)}
.pick input:focus-visible + .pick__in{outline:2px solid var(--red);outline-offset:2px}
.pick input:checked + .pick__in{border-color:var(--red);background:var(--red-tint);box-shadow:inset 3px 0 0 var(--red)}
.pick__t{display:block;font-weight:600;font-size:16px;margin-bottom:3px}
.pick__d{display:block;font-size:13.5px;color:var(--muted);line-height:1.5}

/* step 2 — chips */
.qf__chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{cursor:pointer}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip span{
  display:block;border:1px solid var(--line);border-radius:2px;padding:9px 14px;
  font-size:13.5px;font-weight:500;color:var(--ink-4);
  transition:border-color .2s, background .2s, color .2s;
}
.chip:hover span{border-color:var(--ink-4);color:var(--ink)}
.chip input:focus-visible + span{outline:2px solid var(--red);outline-offset:2px}
.chip input:checked + span{background:var(--ink);border-color:var(--ink);color:#fff}

/* step 3/4 — fields */
.fld{display:block;margin-bottom:15px}
.fld__l{display:block;font-size:12.5px;font-weight:600;color:var(--ink);margin-bottom:7px;letter-spacing:.01em}
.fld__l i{font-style:normal;font-weight:400;color:var(--muted)}
.fld__i{
  display:block;width:100%;border:1px solid var(--line);border-radius:var(--r);
  padding:12px 14px;font-size:15px;background:var(--paper);
  transition:border-color .2s, box-shadow .2s;
}
.fld__i::placeholder{color:#ADA79E}
.fld__i:hover{border-color:var(--ink-4)}
.fld__i:focus{outline:0;border-color:var(--red);box-shadow:0 0 0 3px var(--red-tint)}
textarea.fld__i{resize:vertical;min-height:84px;line-height:1.55}
select.fld__i{
  appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%237C766D' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:12px;padding-right:38px;
}
.fld.is-bad .fld__i{border-color:var(--red);background:#FEF7F7}

.qf__priv{font-size:12.5px;color:var(--muted);margin-top:14px;display:flex;align-items:flex-start;gap:7px}
.qf__err{
  color:var(--red);font-size:13px;font-weight:500;margin-top:12px;
  display:none;
}
.qf__err.is-on{display:block}

/* Honeypot. Off-screen rather than display:none — some bots skip fields they
   can tell are hidden, and this one is meant to look fillable. */
.qf__hp{position:absolute;left:-9999px;top:0;width:1px;height:1px;overflow:hidden}

.qf__nav{display:flex;gap:10px;margin-top:24px}
.qf__nav .btn{flex:1}
.qf__back{flex:0 0 auto!important;padding-inline:20px}
.qf__send[disabled]{opacity:.62;cursor:progress}
.qf__send[disabled]:hover{background:var(--red);border-color:var(--red);transform:none;box-shadow:none}

.qf__alt{margin-top:16px;text-align:center;font-size:13.5px;color:var(--muted)}
.qf__alt a{color:var(--ink);font-weight:600;border-bottom:1px solid var(--line);padding-bottom:1px}
.qf__alt a:hover{color:var(--red);border-color:var(--red)}

/* success */
.qf__done{text-align:center;padding:22px 4px 10px;animation:fade .4s var(--ease)}
.qf__tick{
  display:inline-flex;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:50%;background:var(--red-tint);color:var(--red);margin-bottom:20px;
}
.qf__done-h{font-family:var(--ff-dsp);font-size:27px;font-weight:500;letter-spacing:-.015em;margin-bottom:11px}
.qf__done-p{font-size:15px;color:var(--muted);line-height:1.62;max-width:38ch;margin-inline:auto}
.qf__done-p b{color:var(--ink);font-weight:600}
.qf__again{margin-top:22px}

.qf.is-sent .qf__hd,.qf.is-sent .qf__bar,.qf.is-sent .qf__steps,.qf.is-sent .qf__nav,.qf.is-sent .qf__alt{display:none}

/* =====================================================================
   FOOTER
   ===================================================================== */
.ftr{background:var(--ink);color:rgba(255,255,255,.62);padding-top:clamp(56px,6vw,84px);border-top:1px solid var(--line-dk)}
.ftr__top{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.2fr;gap:clamp(28px,3.4vw,52px);padding-bottom:52px}
.ftr__logo{height:32px;width:auto;margin-bottom:20px}
.ftr__tag{font-size:14px;line-height:1.66;max-width:36ch}
.ftr__col h3{
  font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;font-weight:500;margin-bottom:17px;
}
.ftr__col a,.ftr__col p{display:block;font-size:14px;padding:5px 0;transition:color .2s}
.ftr__col a:hover{color:var(--red)}
.ftr__hrs{margin-top:12px!important;font-size:13px!important;color:rgba(255,255,255,.44)}

.ftr__bot{
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  border-top:1px solid var(--line-dk);padding:22px 0 26px;
  font-family:var(--ff-mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:rgba(255,255,255,.42);
}
.ftr__demo{color:rgba(255,255,255,.3)}

/* =====================================================================
   MOBILE STICKY BAR
   ===================================================================== */
.stick{
  position:fixed;left:0;right:0;bottom:0;z-index:95;display:none;gap:1px;
  background:var(--line);border-top:1px solid var(--line);
  box-shadow:0 -6px 24px -10px rgba(20,23,26,.3);
}
.stick a{
  flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
  padding:15px 10px;font-size:14.5px;font-weight:600;
}
.stick__call{background:var(--paper);color:var(--ink)}
.stick__quote{background:var(--red);color:#fff}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:1080px){
  .hero__in{grid-template-columns:1fr;min-height:0;gap:44px}
  .hero__copy{max-width:none}
  .hero__form{max-width:520px}
  .cta__in{grid-template-columns:1fr;gap:44px}
  .why{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .sys{grid-template-columns:repeat(2,1fr)}
  .faq__wrap{grid-template-columns:1fr;gap:34px}
  .sec--faq .sec__hd{position:static}
  .ftr__top{grid-template-columns:1fr 1fr}
}

@media (max-width:900px){
  .hdr__nav{display:none}
  .hdr__burger{display:flex}
  .hdr__act{margin-left:auto}
  .tracks{grid-template-columns:1fr}
  .match__stage{grid-template-columns:1fr}
  .joint{min-height:260px}
  .gal{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:680px){
  html{scroll-padding-top:74px}
  :root{--sec-y:clamp(54px,11vw,72px)}

  .hdr__tel{display:none}
  .hdr__in{gap:12px;height:66px}
  .hdr.is-stuck .hdr__in{height:62px}
  .hdr__logo{height:28px}
  .hdr.is-stuck .hdr__logo{height:26px}
  .mnav{inset:66px 0 auto 0}

  /* hero: get the form within reach without crushing the headline */
  .hero{padding-top:66px}
  .hero__in{padding-top:38px;padding-bottom:44px;gap:30px}
  .hero__h1{font-size:clamp(38px,10.6vw,48px)}
  .bead{margin-top:20px}
  .hero__sub{margin-top:18px;font-size:15.5px}
  /* the sticky bar at the bottom is the mobile CTA; a second one up here competes with it */
  .hdr__act .btn{display:none}
  .hero__proof{margin-top:28px;padding-top:20px;gap:10px 14px}
  .hero__proof li{font-size:10px;line-height:1.35}
  .hero__proof strong{font-size:20px;margin-bottom:3px}

  .track__body{padding:24px 20px}
  .why{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .gal{gap:10px}
  .gal__cap{font-size:9.5px;left:9px;bottom:9px;right:9px;padding-left:14px}

  .match__tabs{gap:6px;margin-bottom:28px}
  .match__tab{padding:9px 14px;font-size:11px}
  .spec__row{grid-template-columns:1fr;gap:4px}
  .spec dd{font-size:15px}
  .joint{min-height:210px}

  .sys{grid-template-columns:1fr;gap:10px}
  .sys__i{padding:22px 20px}
  .sys__n{font-size:27px;margin-bottom:12px}

  .qf{padding:22px 18px}
  .qf__ttl{font-size:23px}
  .qf__nav{flex-wrap:wrap}
  .qf__nav .btn{padding:15px 18px}
  .chip span{padding:10px 13px}          /* keep chips thumb-sized */
  .fld__i{font-size:16px}                /* 16px stops iOS zooming on focus */

  .faq__i summary{font-size:15.5px;padding:19px 36px 19px 0}
  .faq__i summary::after{top:27px}
  .faq__a{padding-right:36px}

  .cta__contact li{grid-template-columns:76px 1fr;gap:12px}
  .cta__val{font-size:15px}

  /* one column per block stacks into a very long scroll on a phone. Two columns keeps
     the whole footer inside about a screen and a half. */
  .ftr{padding-top:46px}
  .ftr__top{grid-template-columns:1fr 1fr;gap:26px 22px;padding-bottom:26px}
  .ftr__brand{grid-column:1/-1}
  .ftr__logo{height:27px;margin-bottom:13px}
  .ftr__tag{font-size:13.5px;line-height:1.6;max-width:46ch}
  .ftr__col h3{margin-bottom:11px}
  .ftr__col a,.ftr__col p{font-size:13.5px;padding:4px 0}
  .ftr__col--contact{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:0 22px}
  .ftr__col--contact h3,.ftr__hrs{grid-column:1/-1}
  .ftr__hrs{margin-top:8px!important}
  .ftr__bot{justify-content:flex-start;padding:16px 0 20px}
  .ftr__demo{display:none}   /* already in the contact column above */
  .stick{display:flex}
  body{padding-bottom:56px}
  .standard__q{max-width:none}
}

/* small phones — 360px and under */
@media (max-width:390px){
  .hero__proof{grid-template-columns:repeat(3,1fr)}
  .hero__proof li{font-size:9.5px}
  .gal{grid-template-columns:repeat(2,minmax(0,1fr))}
  .qf{padding:20px 16px}
  .sw{width:22px;height:22px}   /* thumb target on small phones */
}

/* =====================================================================
   MOTION PREFERENCES
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .bead{width:132px}
}

/* reveal-on-scroll */
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease), transform .7s var(--ease)}
.rv.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}}