/* fonts (generated from src/fonts.mjs) */
@font-face{font-family:'Jost';src:url(/assets/fonts/jost-latin-var.235d8f8964.woff2) format('woff2');font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:'Jost Fallback';src:local('Arial');size-adjust:96%;ascent-override:107%;descent-override:37%}
@font-face{font-family:'Inter';src:url(/assets/fonts/inter-latin-var.c940764593.woff2) format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:'Inter Fallback';src:local('Arial');size-adjust:107%;ascent-override:90%;descent-override:22%}
:root{--font-display:'Jost', 'Jost Fallback', 'Avenir Next', 'Century Gothic', 'Segoe UI', system-ui, sans-serif;--font-body:'Inter', 'Inter Fallback', 'Segoe UI', system-ui, -apple-system, sans-serif;}
/* 00-tokens.css */
/* ============================================================================
   TOKENS (DESIGN §2). Every ratio in DESIGN.md was measured. The site is FLAT:
   no gradient anywhere (BRIEF §1.3) — scrims are one colour at one opacity.
   ========================================================================== */
:root{
  /* ink (dark) */
  --ink-950:#0B1E26; --ink-900:#10262F; --ink-800:#173C4C; --ink-700:#22536A;
  /* glass + brand family (EcoTuffSA logo, measured) */
  --glass:#3FB4E6; --glass-hover:#6CC7EE; --glass-active:#2EA3D6; --glass-ink:#0F6E97; --ice:#B0E2FA;
  /* aluminium neutrals */
  --alu-300:#C6CFD4; --alu-400:#A9B4BA; --alu-600:#5E6B72;
  /* surfaces + text */
  --surface:#F3F5F6; --surface-2:#E8ECEE; --card:#FFFFFF;
  --text:#13232B; --muted:#4A5A62; --on-dark:#F4F7F8; --muted-dark:#A9BCC5;
  --line:#D5DCE0; --line-dark:#22404D; --line-input:#7C8A91;
  --amber:#F2B63D; --wa:#25D366; --err:#B42318; --err-dark:#FF9C8F;
  /* CTA */
  --cta:var(--glass); --cta-hover:var(--glass-hover); --cta-active:var(--glass-active); --cta-label:var(--ink-950);
  --focus-light:var(--glass-ink); --focus-dark:var(--glass);
  /* scrim — ONE colour, ONE opacity (measured over 10 frames: worst white-text ≈ 5.1:1) */
  --scrim-hero:rgba(11,30,38,.66);       /* phones/tablets: text spans the whole width */
  --scrim-hero-light:rgba(11,30,38,.30); /* desktop: the video outside the text pane */
  --scrim-pane:rgba(11,30,38,.56);       /* desktop: the flat pane behind the text column */

  /* type */
  --fs-hero:clamp(2rem, 1.2rem + 2.6vw, 3.25rem);
  --fs-h1:clamp(1.85rem, 1.25rem + 1.9vw, 2.75rem);
  --fs-h2:clamp(1.55rem, 1.15rem + 1.3vw, 2.3rem);
  --fs-h3:1.25rem;
  --fs-lead:clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  --fs-body:1rem; --fs-sm:.9375rem; --fs-label:.8125rem; --fs-btn:1rem;

  /* layout */
  --wrap:1200px; --gutter:clamp(16px, 4vw, 32px); --section-y:clamp(64px, 9vw, 112px);
  --nav-h:72px; --proof-h:96px;
  --r-btn:4px; --r-card:10px; --r-img:14px; --r-pill:999px;
  --ease-std:cubic-bezier(.2,.7,.2,1); --ease-out:cubic-bezier(.16,1,.3,1); --ease-io:cubic-bezier(.65,0,.35,1);
  --t:.2s; --reveal-y:24px;
  --shadow-hover:0 18px 40px -18px rgba(11,30,38,.32);
  --shadow-card:0 1px 2px rgba(11,30,38,.06);
}
@media (max-width:1023px){ :root{ --nav-h:64px; } }

/* 10-base.css */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:auto; background:var(--ink-950); }
body{ margin:0; font:400 var(--fs-body)/1.7 var(--font-body); color:var(--text); background:var(--surface);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; }
img,video{ display:block; max-width:100%; height:auto; }
svg{ display:block; }
.ic{ display:inline-block; flex:none; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:500; margin:0; color:var(--fg, var(--text)); text-wrap:balance; }
h1{ font-size:var(--fs-h1); line-height:1.1; letter-spacing:-.02em; }
h2{ font-size:var(--fs-h2); line-height:1.14; letter-spacing:-.018em; }
h3{ font-size:var(--fs-h3); line-height:1.3; letter-spacing:-.005em; font-weight:600; }
p{ margin:0; text-wrap:pretty; }
ul,ol{ margin:0; padding:0; list-style:none; }
address{ font-style:normal; }
a{ color:var(--link, var(--glass-ink)); text-decoration-thickness:1px; text-underline-offset:3px; }
button{ font:inherit; color:inherit; }
::selection{ background:var(--glass); color:var(--ink-950); }
:focus-visible{ outline:3px solid var(--focus, var(--focus-light)); outline-offset:3px; border-radius:2px; }
.email{ overflow-wrap:anywhere; }
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.skip{ position:fixed; left:16px; top:-80px; z-index:80; background:var(--cta); color:var(--cta-label); padding:12px 20px; border-radius:var(--r-btn);
  font:700 1rem/1.25 var(--font-display); text-decoration:none; }
.skip:focus{ top:12px; }

/* sections: light by default; dark ones set their own --bg/--fg */
section{ position:relative; }
.sec{ padding-block:var(--section-y); background:var(--bg, var(--surface)); color:var(--fg, var(--text)); }
.sec--alt{ --bg:var(--surface-2); }
.sec p{ color:var(--fg-muted, var(--muted)); }
.dark{ --bg:var(--ink-950); --fg:var(--on-dark); --fg-muted:var(--muted-dark); --link:var(--glass); --focus:var(--focus-dark); --line:var(--line-dark); }
.wrap{ width:min(100% - 2*var(--gutter), var(--wrap)); margin-inline:auto; }
.narrow{ max-width:760px; }
.lead{ font-size:var(--fs-lead); line-height:1.6; max-width:42rem; }
.sec__h2{ margin-bottom:32px; }
.center-row{ display:flex; justify-content:center; margin-top:40px; }

/* ---------------------------------------------------------------- eyebrow */
.eyebrow, .sec p.eyebrow{ display:flex; align-items:center; gap:10px; margin:0 0 12px; color:var(--eyebrow, var(--glass-ink));
  font:600 var(--fs-label)/1.3 var(--font-body); letter-spacing:.16em; text-transform:uppercase; }
.eyebrow__bar{ width:14px; height:3px; border-radius:1px; background:currentColor; flex:none; }
.dark .eyebrow, .page-hero .eyebrow, .hero .eyebrow, .asm .eyebrow, .cta-band .eyebrow, .footer .eyebrow, .replace .eyebrow, .post__ask .eyebrow, .commit__i .eyebrow, .details .eyebrow, .nf .eyebrow, .post__head .eyebrow{ --eyebrow:var(--glass); }
.sechead{ margin-bottom:48px; max-width:46rem; }
.sechead h2{ max-width:24ch; }
.sechead .lead{ margin-top:16px; }
.sechead--c{ text-align:center; margin-inline:auto; }
.sechead--c .eyebrow{ justify-content:center; }
.sechead--c h2{ margin-inline:auto; }
@media (max-width:1023px){ .sechead{ margin-bottom:32px; } }

/* ---------------------------------------------------------------- buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; font:700 var(--fs-btn)/1.25 var(--font-display);
  letter-spacing:.01em; border-radius:var(--r-btn); text-decoration:none; border:1.5px solid transparent; cursor:pointer;
  transition:background-color var(--t) var(--ease-std), border-color var(--t) var(--ease-std), color var(--t) var(--ease-std); white-space:nowrap; }
.btn--sm{ min-height:44px; padding:0 18px; font-size:.9375rem; }
.btn--md{ min-height:52px; padding:0 26px; }
.btn--lg{ min-height:56px; padding:0 30px; }
.btn--full{ width:100%; }
.btn--primary{ background:var(--cta); color:var(--cta-label); }
.btn--primary:hover{ background:var(--cta-hover); }
.btn--primary:active{ background:var(--cta-active); }
.btn--ghost{ background:transparent; color:var(--on-dark); border-color:rgba(244,247,248,.6); }
.btn--ghost:hover{ background:rgba(244,247,248,.1); border-color:var(--on-dark); }
.btn--secondary{ background:transparent; color:var(--text); border-color:var(--text); }
.btn--secondary:hover{ background:var(--text); color:var(--surface); }
.dark .btn--secondary{ color:var(--on-dark); border-color:rgba(244,247,248,.6); }
.dark .btn--secondary:hover{ background:var(--on-dark); color:var(--ink-950); }
.btnrow{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.btnrow--c{ justify-content:center; }
@media (max-width:767px){
  .btnrow{ flex-direction:column; align-items:stretch; }
  .btnrow > .btn{ width:100%; white-space:normal; text-align:center; }
  .btnrow > .tlink{ justify-content:center; }
}
.tlink{ display:inline-flex; align-items:center; gap:6px; min-height:44px; color:var(--link, var(--glass-ink));
  font:600 .9375rem/1.3 var(--font-display); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; }
.tlink:hover{ text-decoration-thickness:2px; }
.tlink--dark{ color:var(--glass); }

/* ------------------------------------------------------------------- chips + badges */
.chip{ display:inline-flex; align-items:center; min-height:36px; padding:0 14px; border-radius:var(--r-pill);
  font:600 .875rem/1.2 var(--font-body); border:1px solid var(--line); background:var(--card); color:var(--text); }
.chip--link{ min-height:44px; text-decoration:none; }
.chip--link:hover{ border-color:var(--glass-ink); color:var(--glass-ink); }
.badge{ display:inline-flex; align-items:center; min-height:26px; padding:0 10px; border-radius:var(--r-pill); font:700 .8125rem/1 var(--font-body); letter-spacing:.02em; }
.badge--guide{ background:var(--ink-800); color:var(--on-dark); }
.badge--job{ background:var(--glass); color:var(--ink-950); }
.badge--example{ background:var(--amber); color:var(--ink-950); }

/* ------------------------------------------------------------------- lists */
.ticks{ display:grid; gap:12px; }
.ticks li{ display:grid; grid-template-columns:20px minmax(0,1fr); gap:12px; align-items:start; color:var(--fg, var(--text)); }
.ticks .ic{ color:var(--glass-ink); margin-top:3px; }
.numlist{ counter-reset:n; display:grid; gap:12px; margin-top:24px; }
.numlist li{ counter-increment:n; display:grid; grid-template-columns:36px minmax(0,1fr); gap:14px; align-items:start; color:var(--text); }
.numlist li::before{ content:counter(n); display:grid; place-items:center; width:32px; height:32px; border-radius:50%;
  background:var(--ink-800); color:var(--on-dark); font:600 .9375rem/1 var(--font-display); }
.plain{ display:grid; gap:10px; }
.plain li{ padding-left:18px; position:relative; color:var(--text); }
.plain li::before{ content:""; position:absolute; left:0; top:.7em; width:8px; height:2px; background:var(--glass-ink); }
.stretch::after{ content:""; position:absolute; inset:0; border-radius:inherit; }

/* ------------------------------------------------------------------- link rows */
.linkrows{ display:grid; gap:12px; grid-template-columns:minmax(0,1fr); }
@media (min-width:768px){ .linkrows{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1024px){ .linkrows--3{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.linkrow{ display:grid; grid-template-columns:40px minmax(0,1fr) auto; align-items:center; gap:16px; min-height:64px; padding:12px 20px;
  border:1px solid var(--line); border-radius:var(--r-card); background:var(--card); color:var(--text); text-decoration:none;
  font:600 1.0625rem/1.3 var(--font-display); transition:border-color var(--t) var(--ease-std), background-color var(--t) var(--ease-std); }
.linkrow__ic{ width:40px; height:40px; display:grid; place-items:center; color:var(--glass-ink); border-radius:8px; background:var(--surface-2); }
.linkrow__a{ color:var(--glass-ink); }
.linkrow:hover{ border-color:var(--glass-ink); }

/* ------------------------------------------------------------------- profile rule */
.prule{ width:100%; height:24px; }
.prule__l{ stroke:var(--alu-400); stroke-width:1.5; vector-effect:non-scaling-stroke; fill:none; }
.prule__l--2{ opacity:.45; }
.prule__sash{ fill:var(--glass); }

/* ------------------------------------------------------------------- brand */
.brand{ display:inline-flex; align-items:center; min-height:44px; text-decoration:none; }
.lockup{ display:inline-flex; align-items:center; gap:10px; color:var(--on-dark); }
.lockup__mark{ width:34px; height:34px; flex:none; }
.lockup__txt{ display:grid; line-height:1; }
.lockup__name{ font:600 1.3125rem/1 var(--font-display); letter-spacing:-.01em; }
.lockup__sub{ margin-top:4px; font:600 .625rem/1 var(--font-body); letter-spacing:.16em; text-transform:uppercase; color:var(--muted-dark); }
.lockup--lg .lockup__mark{ width:44px; height:44px; }
.lockup--lg .lockup__name{ font-size:1.5rem; }
.mark .m-frame, .mark .m-mull{ fill:currentColor; }
.mark .m-pane{ fill:var(--glass); }
.mark .m-mitre{ stroke:var(--ink-950); stroke-width:1.2; }

/* 20-nav.css */
/* --------------------------------------------------------------------- nav
   Solid everywhere — including over the home video, whose right side is only lightly scrimmed. */
.nav{ position:fixed; inset:0 0 auto; z-index:50; height:var(--nav-h); padding-inline:var(--gutter);
  background:rgba(11,30,38,.97); border-bottom:1px solid rgba(244,247,248,.08);
  transition:background-color .24s var(--ease-std), border-color .24s var(--ease-std); }
.nav__in{ height:100%; max-width:var(--wrap); margin-inline:auto; display:grid; align-items:center;
  grid-template-columns:auto minmax(0,1fr) auto; grid-template-areas:"brand links cta"; }
.nav .brand{ grid-area:brand; }
.nav__links{ grid-area:links; justify-self:end; display:flex; gap:2px; margin-right:20px; }
.nav__links a{ position:relative; display:flex; align-items:center; height:44px; padding:0 12px; color:var(--muted-dark);
  font:500 .9375rem/1 var(--font-display); text-decoration:none; transition:color .16s var(--ease-std); }
.nav__links a:hover, .nav__links a[aria-current="page"]{ color:var(--on-dark); }
.nav__links a[aria-current="page"]::after{ content:""; position:absolute; left:12px; right:12px; bottom:6px; height:2px; background:var(--glass); }
.nav__cta{ grid-area:cta; }
.nav__call, .burger{ display:none; }
.nav :focus-visible{ outline-color:var(--focus-dark); }
@media (min-width:1280px){ .nav__links a{ padding:0 16px; font-size:1rem; } .nav__links a[aria-current="page"]::after{ left:16px; right:16px; } }

@media (max-width:1023px){
  .nav__in{ grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); grid-template-areas:"call brand burger"; }
  .nav__links, .nav__cta{ display:none; }
  .nav .lockup__mark{ width:30px; height:30px; }
  .nav .lockup__name{ font-size:1.1875rem; }
  .nav__call{ grid-area:call; justify-self:start; display:grid; place-items:center; width:44px; height:44px; color:var(--on-dark); border-radius:50%; }
  .burger{ grid-area:burger; justify-self:end; align-self:center; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
    width:44px; height:44px; padding:0; border:0; background:transparent; cursor:pointer; }
  .burger span{ display:block; width:22px; height:2px; border-radius:2px; background:var(--on-dark); transition:transform .2s var(--ease-std), opacity .2s var(--ease-std); }
  .burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
  .burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }
}
@media (max-width:359px){ .nav .lockup__sub{ display:none; } }

/* ----------------------------------------------------------------- overlay */
.overlay{ position:fixed; inset:0; z-index:70; background:var(--ink-950); display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:80px 24px 64px; --focus:var(--focus-dark); opacity:0; transition:opacity .2s var(--ease-std); overflow-y:auto; }
.overlay[hidden]{ display:none; }
.overlay.is-open{ opacity:1; }
.overlay__brand{ position:absolute; top:10px; left:24px; }
.overlay__brand .lockup__mark{ width:30px; height:30px; }
.overlay__close{ position:absolute; top:10px; right:18px; width:44px; height:44px; display:grid; place-items:center; border:0; background:transparent; color:var(--on-dark); cursor:pointer; }
.overlay__links{ display:flex; flex-direction:column; align-items:center; gap:4px; }
.overlay__links a{ display:flex; align-items:center; gap:10px; min-height:52px; color:var(--on-dark); font:500 1.5rem/1.2 var(--font-display); text-decoration:none; }
.overlay__links a[aria-current="page"]{ color:var(--glass); }
.overlay__cta{ display:flex; flex-direction:column; align-items:center; gap:4px; width:min(100%, 320px); margin-top:32px; }
.overlay__cta .btn{ white-space:normal; text-align:center; }
.overlay__call{ display:flex; align-items:center; min-height:44px; color:var(--glass); font:600 1rem/1.3 var(--font-display); }
.overlay__tag{ position:absolute; bottom:28px; left:0; right:0; text-align:center; color:var(--muted-dark);
  font:600 var(--fs-label)/1.3 var(--font-body); letter-spacing:.16em; text-transform:uppercase; }
@media (max-height:640px){ .overlay{ justify-content:flex-start; } .overlay__tag{ position:static; margin-top:24px; } }
body.menu-open .wafloat{ display:none; }

/* ---------------------------------------------------------- whatsapp float */
.wafloat{ position:fixed; z-index:60; right:max(16px, env(safe-area-inset-right)); bottom:max(16px, env(safe-area-inset-bottom));
  width:56px; height:56px; border-radius:50%; background:var(--wa); color:var(--ink-950); display:grid; place-items:center;
  box-shadow:0 0 0 2px var(--ink-950), 0 10px 24px -8px rgba(11,30,38,.5); text-decoration:none; }
.wafloat__lbl{ position:absolute; right:calc(100% + 12px); top:50%; translate:0 -50%; height:36px; padding:0 14px; display:flex; align-items:center;
  white-space:nowrap; border-radius:var(--r-pill); background:var(--ink-800); border:1px solid var(--ink-700); color:var(--on-dark);
  font:600 .875rem/1 var(--font-display); opacity:0; pointer-events:none; transition:opacity .16s var(--ease-std); }
@media (min-width:1024px){ .wafloat{ right:24px; bottom:24px; width:60px; height:60px; } }
@media (hover:hover){ .wafloat:hover .wafloat__lbl, .wafloat:focus-visible .wafloat__lbl{ opacity:1; } }

/* ------------------------------------------------------------------ footer */
.footer{ background:var(--ink-950); color:var(--muted-dark); padding:64px 0 32px; border-top:1px solid var(--line-dark); }
.footer__grid{ display:grid; gap:48px; grid-template-columns:minmax(0,1.3fr) repeat(3, minmax(0,1fr)); padding-bottom:48px; }
.footer__brand p{ margin-top:20px; max-width:34ch; font-size:var(--fs-sm); color:var(--muted-dark); }
.footer .addr{ margin-top:16px; font-size:var(--fs-sm); line-height:1.6; color:var(--muted-dark); }
.footer__h{ margin-bottom:12px; color:var(--on-dark); font:600 var(--fs-label)/1.3 var(--font-body); letter-spacing:.16em; text-transform:uppercase; }
.footer ul{ display:grid; gap:2px; }
.footer li a{ display:inline-flex; align-items:center; min-height:44px; min-width:44px; color:var(--muted-dark); text-decoration:none; font-size:var(--fs-sm); }
.footer li a:hover{ color:var(--on-dark); text-decoration:underline; }
.footer__touch .btn{ margin-bottom:8px; }
.footer__bot{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px 24px; padding-top:24px; border-top:1px solid var(--line-dark); font-size:var(--fs-sm); }
.footer__bot p{ color:var(--muted-dark); }
.footer__bot a{ color:var(--muted-dark); display:inline-flex; align-items:center; min-height:44px; }
@media (min-width:1024px){ .footer__bot{ padding-right:96px; } }
@media (max-width:1023px){ .footer__grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:767px){
  .footer{ padding-bottom:96px; }
  .footer__grid{ grid-template-columns:minmax(0,1fr); gap:32px; }
  .footer__bot{ flex-direction:column; align-items:flex-start; }
}
.hours{ margin-top:16px; }
.hours__h{ font:600 var(--fs-label)/1.3 var(--font-body); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
.hours dl{ margin:0; display:grid; gap:2px; }
.hours dl div{ display:flex; gap:12px; font-size:var(--fs-sm); }
.hours dt{ min-width:72px; font-weight:600; }
.hours dd{ margin:0; }
.hours--dark .hours__h{ color:var(--on-dark); }
.hours--dark dt, .hours--dark dd{ color:var(--muted-dark); }

/* 30-hero.css */
/* ==================================================================== HERO
   Desktop: hero = one viewport MINUS the fact strip, so hero + strip land exactly on the fold.
   The scrim is ONE flat colour (no gradient). The H1 is restrained (≤52px) by design. */
.hero{ position:relative; min-height:100vh; min-height:100svh; display:flex; flex-direction:column; justify-content:center; overflow:hidden; isolation:isolate; background:var(--ink-950); color:var(--on-dark); }
@media (min-width:1024px){ .hero{ min-height:max(560px, calc(100vh - var(--proof-h))); min-height:max(560px, calc(100svh - var(--proof-h))); } }
.hero__media{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero__poster, .hero__poster img, .hero__video{ position:absolute; inset:0; width:100%; height:100%; }
.hero__poster img, .hero__video{ object-fit:cover; object-position:50% 50%; }
.hero__video{ opacity:0; transition:opacity .5s var(--ease-std); }
.hero__media[data-ready][data-state="playing"] .hero__video,
.hero__media[data-ready][data-state="paused-user"] .hero__video,
.hero__media[data-ready][data-state="paused-auto"] .hero__video{ opacity:1; }
.hero__scrim{ position:absolute; inset:0; background-color:var(--scrim-hero); }
/* Desktop: the text sits on a flat "glass pane" (one colour, one opacity, hard edge) and the rest of
   the montage stays bright. Composite over the text = 1 − (1 − .30)(1 − .56) ≈ .69 ≥ the measured .66. */
.hero__pane{ display:none; }
@media (min-width:1024px){
  .hero__scrim{ background-color:var(--scrim-hero-light); }
  .hero__pane{ display:block; position:absolute; top:0; bottom:0; left:0; width:calc(max(var(--gutter), (100% - var(--wrap)) / 2) + 808px);
    max-width:72%; background-color:var(--scrim-pane); border-right:1px solid rgba(169,180,186,.4); }
}

.hero__content{ position:relative; z-index:2; padding-top:calc(var(--nav-h) + 40px); padding-bottom:72px; }
.hero__content > *{ max-width:760px; }
.hero__h1{ font-size:var(--fs-hero); font-weight:500; line-height:1.08; letter-spacing:-.022em; color:var(--on-dark); max-width:17ch; }
.hero__h1 .w{ display:inline-block; overflow:hidden; padding-bottom:.12em; margin-bottom:-.12em; vertical-align:top; }
.hero__h1 .w > span{ display:inline-block; }
.hero .hero__eb{ color:var(--on-dark); }
.hero .hero__eb .eyebrow__bar{ background:var(--glass); }
.hero__sub{ margin-top:20px; font-size:var(--fs-lead); line-height:1.6; color:var(--on-dark); max-width:40rem; }
.hero__ctas{ margin-top:32px; }

.hero__toggle{ position:absolute; z-index:3; left:max(var(--gutter), calc((100% - var(--wrap)) / 2)); bottom:20px; width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center; background:transparent; border:1px solid rgba(244,247,248,.4); color:var(--on-dark); cursor:pointer;
  transition:background-color .16s var(--ease-std), border-color .16s var(--ease-std); }
.hero__toggle[hidden]{ display:none; }
.hero__toggle:hover{ background:rgba(244,247,248,.1); border-color:var(--on-dark); }
.hero__toggle .i-play{ display:none; }
.hero__toggle[aria-pressed="true"] .i-play{ display:block; }
.hero__toggle[aria-pressed="true"] .i-pause{ display:none; }
.hero__toggle span{ display:grid; }
@media (min-width:1024px) and (max-height:800px){ .hero__content{ padding-top:calc(var(--nav-h) + 24px); padding-bottom:48px; } .hero__ctas{ margin-top:24px; } }
@media (max-width:1023px){
  .hero{ justify-content:flex-end; min-height:max(560px, 100svh); }
  .hero__content{ padding-top:calc(var(--nav-h) + 24px); padding-bottom:84px; }
  .hero__sub{ margin-top:16px; } .hero__ctas{ margin-top:24px; }
}

/* entrance — CSS keyframes, desktop motion only; every final frame is opacity:1 + transform:none */
@media (min-width:1024px) and (prefers-reduced-motion:no-preference){
  .hero__eb{ animation:rise8 .5s var(--ease-out) 60ms both; }
  .hero__h1 .w > span{ animation:maskup .72s var(--ease-out) both; animation-delay:calc(120ms + var(--i) * 45ms); }
  .hero__sub{ animation:rise12 .56s var(--ease-out) 480ms both; }
  .hero__cta{ animation:rise10 .44s var(--ease-out) 580ms both; }
  .hero__cta2{ animation:rise10 .44s var(--ease-out) 660ms both; }
  .proof__i{ animation:rise10 .5s var(--ease-out) both; animation-delay:calc(700ms + var(--pi, 0) * 80ms); }
  .page-hero__in > *{ animation:rise12 .5s var(--ease-out) both; }
  .page-hero__in > :nth-child(2){ animation-delay:60ms; } .page-hero__in > :nth-child(3){ animation-delay:120ms; }
  .page-hero__in > :nth-child(4){ animation-delay:180ms; } .page-hero__in > :nth-child(5){ animation-delay:240ms; }
}
@keyframes rise8{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@keyframes rise10{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@keyframes rise12{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
@keyframes maskup{ from{ transform:translateY(105%); } to{ transform:none; } }

/* ============================================================ FACT STRIP */
.proof{ background:var(--ink-900); color:var(--on-dark); border-top:1px solid var(--line-dark); }
.proof__in{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); min-height:var(--proof-h); align-items:center; }
.proof__i{ display:grid; gap:4px; padding:16px 20px; border-left:1px solid var(--line-dark); }
.proof__i:first-child{ border-left:0; padding-left:0; }
.proof__i:nth-child(2){ --pi:1; } .proof__i:nth-child(3){ --pi:2; } .proof__i:nth-child(4){ --pi:3; }
.proof__t{ font:600 1.0625rem/1.25 var(--font-display); color:var(--on-dark); }
.proof__d{ font-size:var(--fs-sm); line-height:1.4; color:var(--muted-dark); }
@media (min-width:1024px){ .proof{ height:var(--proof-h); } }
@media (min-width:1024px) and (max-width:1400px){ .proof__in{ padding-right:88px; } }   /* clear the WhatsApp float */
@media (max-width:1023px){
  .proof__in{ grid-template-columns:repeat(2, minmax(0,1fr)); padding-block:12px; }
  .proof__i{ padding:14px 16px; border-left:0; border-top:1px solid var(--line-dark); }
  .proof__i:nth-child(-n+2){ border-top:0; }
  .proof__i:nth-child(odd){ padding-left:0; }
}
@media (max-width:479px){ .proof__in{ padding-block:6px; } .proof__i{ padding:10px 12px; } .proof__d{ display:none; } .proof__t{ font-size:1rem; } }

/* ============================================================== PAGE HERO
   Text on a SOLID ink panel; the photo in true colour beside it. No scrim, no tint. */
.page-hero{ position:relative; display:grid; grid-template-columns:minmax(0,46fr) minmax(0,54fr); min-height:clamp(480px, 72svh, 640px); background:var(--ink-800); color:var(--on-dark); }
.page-hero__panel{ display:flex; align-items:flex-end; padding:calc(var(--nav-h) + 40px) 48px 56px max(var(--gutter), calc((100vw - var(--wrap)) / 2)); }
.page-hero__in{ width:100%; max-width:560px; }
.page-hero__media{ position:relative; overflow:hidden; background:var(--ink-900); }
.page-hero__media picture, .page-hero__media img{ position:absolute; inset:0; width:100%; height:100%; }
.page-hero__media img{ object-fit:cover; }
.page-hero h1{ color:var(--on-dark); margin-top:4px; }
.page-hero .lead{ margin-top:16px; color:var(--on-dark); }
.page-hero .btnrow{ margin-top:28px; }
.page-hero--plain{ grid-template-columns:minmax(0,1fr); min-height:0; background:var(--ink-800); }
.page-hero--plain .page-hero__panel{ padding-right:max(var(--gutter), calc((100vw - var(--wrap)) / 2)); padding-bottom:64px; }
.page-hero--plain .page-hero__in{ max-width:780px; }
@media (max-width:1023px){
  .page-hero{ grid-template-columns:minmax(0,1fr); min-height:0; }
  .page-hero__panel{ padding:calc(var(--nav-h) + 24px) var(--gutter) 40px; }
  .page-hero__media{ aspect-ratio:16 / 10; }
}
.crumbs{ margin-bottom:8px; }
.crumbs ol{ display:flex; flex-wrap:nowrap; align-items:center; min-width:0; font:500 var(--fs-sm)/1.4 var(--font-body); color:var(--muted-dark); }
.crumbs li{ display:inline-flex; align-items:center; flex:none; }
.crumbs li:last-child{ flex:1 1 auto; min-width:0; }
.crumbs li:last-child span{ overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:var(--on-dark); }
.crumbs li + li::before{ content:""; width:10px; height:2px; margin:0 10px; background:var(--glass); flex:none; }
.crumbs a{ color:var(--muted-dark); text-decoration:none; display:inline-flex; align-items:center; min-height:44px; min-width:44px; }
.crumbs a:hover{ color:var(--on-dark); text-decoration:underline; }

/* the sliding sash: exists ONLY under the desktop motion gate (fail-open: no JS = no sash) */
.sash{ display:none; }

/* 40-sections.css */
/* ============================================================ PRODUCTS BENTO */
.bento{ display:grid; gap:20px; grid-template-columns:minmax(0,1fr); }
@media (min-width:600px){ .bento{ grid-template-columns:repeat(2,minmax(0,1fr)); } .bento .pcard--big{ grid-column:1 / -1; } }
@media (min-width:1024px){
  .bento{ grid-template-columns:repeat(6,minmax(0,1fr)); }
  .bento > .pcard{ grid-column:span 2; }
  .bento > .pcard--big{ grid-column:span 4; }
  .bento > .pcard--big + .pcard{ grid-column:span 2; }
  .bento--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .bento--2 > .pcard{ grid-column:auto; }
}
.pcard{ position:relative; display:grid; grid-template-rows:auto 1fr; border-radius:var(--r-card); overflow:hidden; background:var(--card);
  border:1px solid var(--line); transition:translate var(--t) var(--ease-std), box-shadow var(--t) var(--ease-std), border-color var(--t) var(--ease-std); }
.pcard__media{ position:relative; overflow:hidden; aspect-ratio:16 / 10; background:var(--ink-800); }
.pcard__media picture, .pcard__media img{ width:100%; height:100%; }
.pcard__media img{ object-fit:cover; transition:transform .6s var(--ease-out); }
@media (min-width:1024px){
  .bento > .pcard .pcard__media{ aspect-ratio:auto; height:240px; }
  .bento > .pcard--big .pcard__media, .bento > .pcard--big + .pcard .pcard__media{ height:360px; }
  .bento--2 > .pcard .pcard__media{ height:280px; }
}
.pcard__body{ position:relative; display:grid; grid-template-columns:44px minmax(0,1fr); grid-template-rows:auto auto 1fr; column-gap:14px; row-gap:6px; padding:22px 24px 24px; }
.pcard__ic{ grid-row:1 / span 2; width:44px; height:44px; border-radius:8px; display:grid; place-items:center; background:var(--ink-800); color:var(--on-dark); }
.pcard h3, .pcard h2{ font-size:1.25rem; line-height:1.25; align-self:end; }
.pcard p{ color:var(--muted); font-size:var(--fs-sm); }
.pcard__go{ grid-column:1 / -1; margin-top:14px; align-self:end; font:600 .9375rem/1.3 var(--font-display); color:var(--glass-ink); text-decoration:none; }
@media (hover:hover) and (min-width:1024px){
  .pcard:hover{ translate:0 -4px; box-shadow:var(--shadow-hover); border-color:var(--alu-400); }
  .pcard:hover .pcard__media img{ transform:scale(1.04); }
  .pcard:hover .pcard__go{ text-decoration:underline; text-underline-offset:4px; }
}

/* ============================================================ PRODUCTS HUB ROWS */
.rows{ display:grid; gap:clamp(48px, 7vw, 96px); }
.row{ display:grid; gap:32px; align-items:center; grid-template-columns:minmax(0,1fr); }
@media (min-width:1024px){ .row{ grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:64px; } .row--flip .row__media{ order:2; } }
.row__media{ position:relative; overflow:hidden; border-radius:var(--r-img); aspect-ratio:4 / 3; background:var(--ink-800); }
.row__media picture, .row__media img{ width:100%; height:100%; }
.row__media img{ object-fit:cover; }
.row__txt h2{ margin-bottom:12px; }
.row__txt .ticks{ margin-top:24px; }
.row__txt .btnrow{ margin-top:28px; }

/* ============================================================ CATEGORY ITEMS */
.items{ display:grid; gap:20px; grid-template-columns:minmax(0,1fr); }
@media (min-width:600px){ .items{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1024px){ .items{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.icard{ display:grid; grid-template-rows:auto 1fr; border:1px solid var(--line); border-radius:var(--r-card); background:var(--card); overflow:hidden; }
.icard__media{ aspect-ratio:3 / 2; overflow:hidden; background:var(--ink-800); }
.icard__media picture, .icard__media img{ width:100%; height:100%; }
.icard__media img{ object-fit:cover; }
.icard__body{ padding:20px 22px 24px; display:grid; gap:6px; align-content:start; }
.icard h3{ font-size:1.125rem; }
.icard p{ color:var(--muted); font-size:var(--fs-sm); }
.icard--plain{ grid-template-rows:auto 1fr; padding-top:22px; }
.icard__ic{ margin:0 22px; width:48px; height:48px; border-radius:8px; display:grid; place-items:center; background:var(--surface-2); color:var(--ink-800); }
.note-wrap{ margin-top:32px; }
.note{ display:grid; grid-template-columns:44px minmax(0,1fr); gap:16px; padding:24px 26px; background:var(--card); border:1px solid var(--line); border-left:4px solid var(--glass-ink); border-radius:var(--r-card); max-width:820px; }
.note__ic{ width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:var(--surface-2); color:var(--glass-ink); }
.note__h{ font-size:1.125rem; font-weight:600; margin-bottom:6px; }
.note p{ color:var(--text); }
.note .tlink{ margin-top:6px; }

/* ============================================================ GALLERY */
.gallery{ display:grid; gap:20px; grid-template-columns:minmax(0,1fr); }
@media (min-width:600px){ .gallery{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1024px){ .gallery:has(> :nth-child(3)){ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.gallery__f{ margin:0; }
.gallery__f picture{ display:block; position:relative; overflow:hidden; border-radius:var(--r-img); aspect-ratio:3 / 2; background:var(--ink-800); }
.gallery__f img{ width:100%; height:100%; object-fit:cover; }
.gallery__f figcaption{ margin-top:10px; font-size:var(--fs-sm); color:var(--muted); }

/* ============================================================ FAQ */
.faq-teaser{ display:grid; gap:32px; }
@media (min-width:1024px){ .faq-teaser{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:64px; align-items:start; } }
.faq-teaser h2{ margin-bottom:12px; }
.faq-teaser .lead{ margin-bottom:8px; }
.faq{ display:grid; gap:10px; }
.faq__i{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-card); }
.faq__i summary{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:60px; padding:14px 20px; cursor:pointer; list-style:none;
  font:600 1.0625rem/1.35 var(--font-display); color:var(--text); }
.faq__i summary::-webkit-details-marker{ display:none; }
.faq__pm{ position:relative; width:28px; height:28px; flex:none; border-radius:50%; background:var(--surface-2); }
.faq__pm::before, .faq__pm::after{ content:""; position:absolute; left:8px; right:8px; top:13px; height:2px; background:var(--ink-800); transition:transform .2s var(--ease-std); }
.faq__pm::after{ transform:rotate(90deg); }
.faq__i[open] .faq__pm::after{ transform:rotate(0); }
.faq__a{ padding:0 20px 20px; }
.faq__a p{ color:var(--muted); max-width:62ch; }
.faq-page{ display:grid; gap:48px; max-width:900px; }
.faq-group h2{ margin-bottom:20px; }

/* ============================================================ REPLACE + COMMIT + ABOUT */
.replace{ display:grid; gap:32px; align-items:center; padding:clamp(28px, 5vw, 56px); border-radius:var(--r-img); background:var(--ink-800); color:var(--on-dark); }
@media (min-width:1024px){ .replace{ grid-template-columns:120px minmax(0,1fr); gap:48px; } }
.replace__art{ width:96px; height:96px; border-radius:50%; display:grid; place-items:center; border:1.5px solid var(--alu-400); color:var(--glass); }
.replace h2{ color:var(--on-dark); margin-bottom:12px; }
.replace .lead{ color:var(--on-dark); }
.replace .btnrow{ margin-top:24px; }
.replace .tlink{ color:var(--glass); }
.replace2{ display:grid; gap:40px; }
@media (min-width:1024px){ .replace2{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:64px; align-items:start; } }
.replace2 h2{ margin-bottom:12px; }
.replace2 .btnrow{ margin-top:28px; }
.commit{ display:grid; gap:20px; grid-template-columns:minmax(0,1fr); }
@media (min-width:768px){ .commit{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.commit__i{ padding:32px; border-radius:var(--r-card); background:var(--ink-800); color:var(--on-dark); }
.commit__i h2{ color:var(--on-dark); font-size:1.5rem; margin:16px 0 8px; }
.commit__i p{ color:var(--muted-dark); }
.commit__ic{ width:48px; height:48px; border-radius:8px; display:grid; place-items:center; background:var(--ink-900); color:var(--glass); }
.about-what{ display:grid; gap:40px; }
@media (min-width:1024px){ .about-what{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:64px; } }
.about-what h2{ margin-bottom:16px; }
.about-what .lead + p{ margin-top:16px; }
.about-how{ display:grid; gap:14px; align-content:start; }
.about-how li{ display:grid; grid-template-columns:44px minmax(0,1fr); gap:16px; padding:20px; border:1px solid var(--line); border-radius:var(--r-card); background:var(--card); }
.about-how__ic{ width:44px; height:44px; border-radius:8px; display:grid; place-items:center; background:var(--ink-800); color:var(--on-dark); }
.about-how h3{ font-size:1.0625rem; margin-bottom:4px; }
.about-how p{ font-size:var(--fs-sm); }

/* ============================================================ HOW WE WORK STEPS */
.steps{ display:grid; gap:20px; grid-template-columns:minmax(0,1fr); }
@media (min-width:600px){ .steps{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1024px){ .steps{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.step{ display:grid; grid-template-rows:auto 1fr; border:1px solid var(--line); border-radius:var(--r-card); background:var(--card); overflow:hidden; }
.step__media{ aspect-ratio:4 / 3; overflow:hidden; background:var(--ink-800); }
.step__media picture, .step__media img{ width:100%; height:100%; }
.step__media img{ object-fit:cover; }
.step__body{ padding:20px 22px 24px; }
.step__n{ font:600 .875rem/1 var(--font-display); color:var(--glass-ink); letter-spacing:.08em; }
.step h3{ margin:8px 0 6px; font-size:1.125rem; }
.step p{ font-size:var(--fs-sm); }

/* ============================================================ COAST BAND */
.coast{ position:relative; min-height:clamp(520px, 80vh, 720px); display:flex; align-items:flex-end; padding-block:var(--section-y); overflow:hidden; background:var(--ink-800); }
.coast__media{ position:absolute; inset:0; overflow:hidden; }
.coast__media picture, .coast__media img{ width:100%; height:100%; }
.coast__media img{ object-fit:cover; }
.coast__in{ position:relative; z-index:1; }
.coast__card{ max-width:520px; padding:clamp(24px, 4vw, 40px); background:var(--card); border-radius:var(--r-img); box-shadow:0 30px 60px -30px rgba(11,30,38,.5); }
.coast__card h2{ margin-bottom:12px; }
.coast__card p{ color:var(--muted); }
.coast__card .tlink{ margin-top:12px; }
@media (max-width:767px){ .coast{ min-height:0; padding:0; display:block; } .coast__media{ position:relative; aspect-ratio:4 / 3; } .coast__in{ margin-top:-48px; padding-bottom:var(--section-y); } }

/* ============================================================ POSTS */
.posts{ display:grid; gap:24px; grid-template-columns:minmax(0,1fr); }
@media (min-width:600px){ .posts{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1024px){ .posts--3{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.post-card{ position:relative; display:grid; grid-template-rows:auto 1fr; border:1px solid var(--line); border-radius:var(--r-card); background:var(--card); overflow:hidden;
  transition:translate var(--t) var(--ease-std), box-shadow var(--t) var(--ease-std); }
.post-card__media{ aspect-ratio:16 / 10; overflow:hidden; background:var(--ink-800); }
.post-card__media picture, .post-card__media img{ width:100%; height:100%; }
.post-card__media img{ object-fit:cover; transition:transform .6s var(--ease-out); }
.post-card__body{ display:grid; grid-template-rows:auto auto 1fr auto; gap:10px; padding:20px 22px 22px; }
.post-card__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; font-size:var(--fs-sm); color:var(--muted); }
.post-card h3, .post-card h2{ font-size:1.1875rem; line-height:1.3; }
.post-card p{ font-size:var(--fs-sm); }
.post-card__go{ font:600 .9375rem/1.3 var(--font-display); color:var(--glass-ink); text-decoration:none; margin-top:4px; }
@media (hover:hover) and (min-width:1024px){ .post-card:hover{ translate:0 -4px; box-shadow:var(--shadow-hover); } .post-card:hover img{ transform:scale(1.04); } .post-card:hover .post-card__go{ text-decoration:underline; } }
.pfilter{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 12px; padding:0; border:0; min-width:0; }
.pfilter legend{ width:100%; margin-bottom:10px; font:600 var(--fs-label)/1.3 var(--font-body); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.pfilter input{ position:absolute; opacity:0; width:1px; height:1px; }
.pfilter label{ display:inline-flex; align-items:center; min-height:44px; padding:0 16px; border-radius:var(--r-pill); border:1px solid var(--line); background:var(--card);
  font:600 .9375rem/1 var(--font-body); color:var(--text); cursor:pointer; transition:background-color var(--t) var(--ease-std), color var(--t) var(--ease-std); }
.pfilter label:hover{ border-color:var(--ink-800); }
.pfilter input:checked + label{ background:var(--ink-800); border-color:var(--ink-800); color:var(--on-dark); }
.pfilter input:focus-visible + label{ outline:3px solid var(--focus-light); outline-offset:2px; }
.pfilter__live{ min-height:24px; margin-bottom:20px; font-size:var(--fs-sm); color:var(--muted); }

/* ---- a post page */
.post__head{ background:var(--ink-800); color:var(--on-dark); padding:calc(var(--nav-h) + 32px) 0 44px; }
.post__head-in{ max-width:880px; }
.post__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin:8px 0 14px; font-size:var(--fs-sm); color:var(--muted-dark); }
.post__head h1{ color:var(--on-dark); max-width:26ch; }
.post__example{ display:grid; grid-template-columns:20px minmax(0,1fr); gap:12px; align-items:start; margin-top:20px; padding:14px 18px; border-radius:var(--r-btn);
  background:var(--amber); color:var(--ink-950); font-size:var(--fs-sm); line-height:1.5; max-width:720px; }
.post__example .ic{ margin-top:1px; }
.post__chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.post__head .chip{ background:transparent; border-color:rgba(244,247,248,.35); color:var(--on-dark); }
.post__body{ max-width:880px; padding-block:40px var(--section-y); }
.post__cover{ margin:0 0 40px; }
.post__cover picture{ display:block; overflow:hidden; border-radius:var(--r-img); aspect-ratio:16 / 9; background:var(--ink-800); }
.post__cover img{ width:100%; height:100%; object-fit:cover; }
.post__cover figcaption{ margin-top:10px; font-size:var(--fs-sm); color:var(--muted); }
.toc{ margin:0 0 32px; padding:20px 24px; border:1px solid var(--line); border-radius:var(--r-card); background:var(--card); }
.toc__h{ font:600 var(--fs-label)/1.3 var(--font-body); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.toc ol{ display:grid; gap:2px; counter-reset:t; }
.toc li{ counter-increment:t; }
.toc a{ display:inline-flex; min-height:44px; min-width:44px; align-items:center; color:var(--glass-ink); font-weight:500; }
.prose{ max-width:68ch; }
.prose h2{ font-size:clamp(1.35rem, 1.1rem + .8vw, 1.75rem); margin:40px 0 12px; }
.prose h3{ margin:28px 0 8px; }
.prose p{ color:var(--text); margin:0 0 16px; }
.prose ul, .prose ol{ display:grid; gap:8px; margin:0 0 18px; padding-left:22px; }
.prose ul{ list-style:disc; } .prose ol{ list-style:decimal; }
.prose li{ color:var(--text); padding-left:4px; }
.prose em{ color:var(--muted); }
.prose code{ font-size:.9em; padding:1px 6px; border-radius:4px; background:var(--surface-2); }
.post__gallery{ margin-top:40px; }
.post__ask{ margin-top:48px; padding:32px; border-radius:var(--r-img); background:var(--ink-800); color:var(--on-dark); }
.post__ask h2{ color:var(--on-dark); font-size:1.5rem; margin-bottom:8px; }
.post__ask p{ color:var(--muted-dark); margin-bottom:20px; }
.post__nav{ display:grid; gap:12px; grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:40px; }
.post__nav a{ display:grid; gap:4px; min-height:64px; padding:14px 18px; border:1px solid var(--line); border-radius:var(--r-card); background:var(--card); color:var(--text); text-decoration:none; font:600 .9375rem/1.35 var(--font-display); }
.post__nav a span{ font:600 var(--fs-label)/1.2 var(--font-body); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.post__nav a[rel="next"]{ text-align:right; }
.post__nav a:hover{ border-color:var(--glass-ink); }
@media (max-width:599px){ .post__nav{ grid-template-columns:minmax(0,1fr); } .post__nav a[rel="next"]{ text-align:left; } }

/* ============================================================ CONTACT */
.contact__grid{ display:grid; gap:32px; grid-template-columns:minmax(0,1fr); align-items:start; }
@media (min-width:1024px){ .contact__grid{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:48px; } }
.formcard{ padding:clamp(24px, 4vw, 40px); background:var(--card); border:1px solid var(--line); border-radius:var(--r-img); }
.formcard h2{ margin-bottom:6px; }
.formcard__lead{ margin-bottom:24px; font-size:var(--fs-sm); }
.details{ padding:clamp(24px, 4vw, 36px); border-radius:var(--r-img); background:var(--ink-950); color:var(--on-dark); }
.wacard{ padding:24px; border-radius:var(--r-card); background:var(--ink-800); margin-bottom:24px; }
.wacard__disc{ width:48px; height:48px; border-radius:50%; display:grid; place-items:center; background:var(--wa); color:var(--ink-950); margin-bottom:14px; }
.wacard h2{ color:var(--on-dark); font-size:1.5rem; }
.wacard p{ color:var(--muted-dark); margin:6px 0 16px; }
.details__list{ display:grid; gap:6px; }
.details__list li{ display:grid; grid-template-columns:20px minmax(0,1fr); gap:12px; align-items:start; color:var(--muted-dark); }
.details__list .ic{ margin-top:12px; color:var(--glass); }
.details__list a{ display:inline-flex; align-items:center; min-height:44px; color:var(--on-dark); }
.details__list .addr{ padding-block:10px; line-height:1.55; color:var(--muted-dark); }
.help h2{ margin-bottom:24px; }
.help__list{ display:grid; gap:12px; grid-template-columns:minmax(0,1fr); }
@media (min-width:768px){ .help__list{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.help__list li{ display:grid; gap:12px; padding:20px; border:1px solid var(--line); border-radius:var(--r-card); background:var(--card); color:var(--text); font-weight:500; }
.help__list .ic{ color:var(--glass-ink); }

/* ============================================================ LEGAL + 404 */
.legal__grid{ display:grid; gap:32px; max-width:860px; }
.legal__draft{ padding:14px 18px; border-radius:var(--r-btn); background:var(--amber); color:var(--ink-950); }
.legal .toc details summary{ cursor:pointer; min-height:44px; display:flex; align-items:center; font-weight:600; }
.legal__body section{ margin-bottom:28px; }
.legal__body h2{ font-size:1.375rem; margin-bottom:8px; }
.legal__body p{ color:var(--text); }
.nf{ background:var(--ink-800); color:var(--on-dark); padding:calc(var(--nav-h) + 64px) 0 var(--section-y); }
.nf__top{ text-align:center; margin-bottom:48px; }
.nf__mark{ width:64px; height:64px; margin:0 auto 24px; color:var(--on-dark); }
.nf h1{ color:var(--on-dark); }
.nf .lead{ margin:16px auto 28px; color:var(--muted-dark); }
.nf .btn--secondary{ color:var(--on-dark); border-color:rgba(244,247,248,.6); }

/* ============================================================ CTA BAND */
.cta-band{ position:relative; overflow:hidden; padding-block:clamp(64px, 8vw, 104px); background:var(--ink-950); color:var(--on-dark); }
.cta-band--slim{ padding-block:clamp(48px, 6vw, 72px); }
.cta-band__art{ position:absolute; left:-10%; right:-10%; top:28px; opacity:.55; pointer-events:none; }
.cta-band__in{ position:relative; display:grid; gap:32px; align-items:end; }
@media (min-width:1024px){ .cta-band__in{ grid-template-columns:minmax(0,1fr) auto; gap:48px; } }
.cta-band h2{ color:var(--on-dark); max-width:22ch; }
.cta-band .lead{ margin-top:12px; color:var(--muted-dark); }
.cta-band .btnrow{ justify-content:flex-start; }
@media (min-width:1024px){ .cta-band .btnrow{ justify-content:flex-end; max-width:560px; } }
.asm__after{ display:flex; justify-content:flex-end; margin-top:-8px; }

/* 45-scenes.css */
/* ============================================================================
   ASSEMBLE — the signature scene (DESIGN §6b). Ships ASSEMBLED (final state).
   On desktop it is pinned and rewound by anim.js; captions never fade out
   (only colour changes), so there is no dead zone mid-pin.
   ========================================================================== */
.asm{ background:var(--ink-950); color:var(--on-dark); padding-block:var(--section-y); overflow:hidden; }
.asm__grid{ display:grid; gap:40px; grid-template-columns:minmax(0,1fr); align-items:center; }
@media (min-width:1024px){ .asm__grid{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:56px; } }
.asm h2{ color:var(--on-dark); max-width:18ch; }
.asm .lead{ margin-top:12px; color:var(--muted-dark); }
.asm__steps{ display:grid; gap:6px; margin-top:28px; }
.asm__steps li{ position:relative; display:grid; grid-template-columns:44px minmax(0,1fr); gap:12px; padding:12px 14px 12px 16px; border-radius:var(--r-btn);
  border-left:3px solid var(--line-dark); transition:border-color .3s var(--ease-std), background-color .3s var(--ease-std); }
.asm__n{ font:600 .9375rem/1.4 var(--font-display); color:var(--glass); letter-spacing:.06em; }
.asm__txt{ display:grid; gap:2px; }
.asm__h{ font:600 1.0625rem/1.35 var(--font-display); color:var(--on-dark); }
.asm__p{ font-size:var(--fs-sm); line-height:1.55; color:var(--muted-dark); }
.asm.is-pinned .asm__steps li{ border-left-color:var(--line-dark); }
.asm.is-pinned .asm__steps li .asm__h{ color:var(--muted-dark); }
.asm.is-pinned .asm__steps li.is-active{ border-left-color:var(--glass); background:var(--ink-900); }
.asm.is-pinned .asm__steps li.is-active .asm__h{ color:var(--on-dark); }
.asm__more{ margin-top:20px; }
.asm__fig{ margin:0; }
.asm-svg{ width:100%; height:auto; overflow:visible; }
/* pinned: one composed frame between the nav and the fold */
@media (min-width:1024px){
  .asm.is-pinned{ min-height:100vh; display:flex; align-items:center; padding:calc(var(--nav-h) + 20px) 0 24px; }
  .asm.is-pinned .asm__grid{ width:min(100% - 2*var(--gutter), var(--wrap)); }
  .asm.is-pinned .asm-svg{ max-height:calc(100vh - var(--nav-h) - 72px); }
}
@media (min-width:1024px) and (max-height:800px){ .asm.is-pinned .asm__steps{ margin-top:18px; } .asm.is-pinned .asm__steps li{ padding-block:8px; } .asm.is-pinned .lead{ display:none; } }

/* SVG parts — flat fills and strokes only */
.a-wall__fill{ fill:var(--ink-900); }
.a-wall__hatch{ fill:url(#asm-hatch); }
.asm-hatch-l{ stroke:var(--line-dark); stroke-width:2; }
.a-open{ fill:none; stroke:var(--glass); stroke-width:1.5; stroke-dasharray:1; stroke-dashoffset:0; opacity:.7; }
.a-dim{ fill:none; stroke:var(--ice); stroke-width:1.5; }
.a-dims > .a-dim[pathLength]{ stroke-dasharray:1; stroke-dashoffset:0; }
.a-lab{ fill:var(--muted-dark); font:500 19px/1 var(--font-body); letter-spacing:.04em; }
.a-m{ fill:var(--alu-400); stroke:var(--ink-950); stroke-width:1.5; }
.a-mitre{ fill:none; stroke:var(--ink-950); stroke-width:2; }
.a-s{ fill:var(--alu-300); stroke:var(--ink-950); stroke-width:1.5; }
.a-glass{ fill:var(--glass); fill-opacity:.26; stroke:none; }
.a-glint{ fill:none; stroke:var(--on-dark); stroke-width:3; stroke-linecap:round; opacity:.45; }
.a-lock{ fill:var(--alu-600); stroke:var(--ink-950); stroke-width:1.5; }
.a-rollers circle{ fill:var(--ink-950); stroke:var(--alu-400); stroke-width:2; }
.a-sect__p{ fill:none; stroke:var(--glass); stroke-width:2; stroke-dasharray:1; stroke-dashoffset:0; stroke-linejoin:round; }
.a-ok rect{ fill:var(--glass); }
.a-ok text{ fill:var(--ink-950); font:700 18px/1 var(--font-display); }
@media (max-width:639px){ .a-lab, .a-ok, .a-sect{ display:none; } }

/* 50-motion.css */
/* ============================================================================
   MOTION GATE. html.js-motion is added ONLY by the inline head script, and only when the
   desktop motion query matches — never typed into markup. `:not([data-done])` IS
   LOAD-BEARING: without it the gate re-applies itself when an inline transform is cleared.
   The SASH (a solid panel that slides off a photo) exists only under the gate, so with no
   JS, a failed bundle or the 3s timeout, every photo is simply visible.
   ========================================================================== */
html.js-motion [data-reveal]:not([data-done]){ opacity:0; }
html.js-motion [data-reveal="up"]:not([data-done]){ transform:translateY(var(--reveal-y)); }
html.js-motion [data-sash]:not([data-done]) .sash{ display:block; position:absolute; inset:0; z-index:2; background:var(--ink-800);
  border-left:6px solid var(--alu-400); }
.coast [data-sash] .sash, .coast__media .sash{ background:var(--ink-800); }
@media (max-width:1023px), (prefers-reduced-motion:reduce){
  html.js-motion [data-reveal]{ opacity:1 !important; transform:none !important; }
  html.js-motion .sash{ display:none !important; }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ transition-duration:.001ms !important; animation-duration:.001ms !important; animation-iteration-count:1 !important; }
}

/* 60-form.css */
.form__row{ display:grid; gap:0 20px; grid-template-columns:minmax(0,1fr); }
@media (min-width:640px){ .form__row{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.field{ display:grid; gap:8px; margin-bottom:20px; min-width:0; }
.field label{ font:600 .9375rem/1.3 var(--font-body); color:var(--text); }
.req{ color:var(--err); }
.field input, .field select, .field textarea{ width:100%; min-width:0; min-height:52px; padding:0 16px; font:400 1rem/1.5 var(--font-body); color:var(--text);
  background:var(--card); border:1px solid var(--line-input); border-radius:var(--r-btn); transition:border-color .16s var(--ease-std); }
.field textarea{ min-height:144px; padding:12px 16px; resize:vertical; }
.field input::placeholder{ color:var(--muted); }
.field input:hover, .field select:hover, .field textarea:hover{ border-color:var(--muted); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible{ border-color:var(--focus-light); outline:3px solid var(--focus-light); outline-offset:2px; }
.field [aria-invalid="true"]{ border:2px solid var(--err); }
.field__err{ display:flex; align-items:center; gap:6px; font:500 .875rem/1.4 var(--font-body); color:var(--err); }
.field__err[hidden]{ display:none; }
.select{ position:relative; }
.select select{ appearance:none; -webkit-appearance:none; padding-right:44px; text-overflow:ellipsis; }
.select__chev{ position:absolute; right:14px; top:50%; translate:0 -50%; rotate:90deg; color:var(--muted); pointer-events:none; }
.field--check{ margin-top:4px; }
.check{ position:relative; display:grid; grid-template-columns:24px minmax(0,1fr); gap:12px; align-items:start; min-height:44px; padding-top:10px; font:400 .9375rem/1.5 var(--font-body); color:var(--text); cursor:pointer; }
.check input{ position:absolute; opacity:0; width:24px; height:24px; margin:0; left:0; top:10px; }
.check__box{ width:24px; height:24px; border:1.5px solid var(--line-input); border-radius:var(--r-btn); display:grid; place-items:center; color:transparent; background:var(--card); }
.check input:checked + .check__box{ background:var(--glass-ink); border-color:var(--glass-ink); color:var(--card); }
.check input:focus-visible + .check__box{ outline:3px solid var(--focus-light); outline-offset:2px; }
.check input[aria-invalid="true"] + .check__box{ border:2px solid var(--err); }
.check a{ color:var(--glass-ink); }
.form__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:8px; }
@media (max-width:767px){ .form__actions{ flex-direction:column; } .form__actions .btn{ width:100%; } }
.form__status{ margin-top:20px; padding:16px 20px; background:var(--surface-2); border-left:4px solid var(--glass-ink); border-radius:var(--r-btn); }
.form__status p{ color:var(--text); }
.form__status[hidden]{ display:none; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.field__hint{ margin-top:-4px; font-size:var(--fs-sm); color:var(--muted); }
.field--radios{ border:0; padding:0; margin:0 0 20px; min-width:0; }
.field--radios legend{ padding:0; margin-bottom:8px; font:600 .9375rem/1.3 var(--font-body); color:var(--text); }
.radios{ display:flex; flex-wrap:wrap; gap:10px; }
.radio{ position:relative; display:inline-flex; align-items:center; min-height:48px; cursor:pointer; }
.radio input{ position:absolute; opacity:0; width:1px; height:1px; }
.radio span{ display:inline-flex; align-items:center; min-height:48px; padding:0 20px; border:1px solid var(--line-input); border-radius:var(--r-btn); background:var(--card); font-weight:600; color:var(--text); }
.radio input:checked + span{ background:var(--ink-800); border-color:var(--ink-800); color:var(--on-dark); }
.radio input:focus-visible + span{ outline:3px solid var(--focus-light); outline-offset:2px; }
.radio input[aria-invalid="true"] + span{ border:2px solid var(--err); }
.form__alt{ margin-top:14px; font-size:var(--fs-sm); }

/* generated: project filters */
.pfilter:has(#show-guide:checked) ~ .posts [data-post]:not([data-kind="guide"]){display:none}
.pfilter:has(#show-example:checked) ~ .posts [data-post]:not([data-kind="example"]){display:none}
.pfilter:has(#show-aluminium-windows:checked) ~ .posts [data-post]:not([data-products~="aluminium-windows"]){display:none}
.pfilter:has(#show-aluminium-doors:checked) ~ .posts [data-post]:not([data-products~="aluminium-doors"]){display:none}
.pfilter:has(#show-frameless-glass:checked) ~ .posts [data-post]:not([data-products~="frameless-glass"]){display:none}
.pfilter:has(#show-outdoor-and-enclosures:checked) ~ .posts [data-post]:not([data-products~="outdoor-and-enclosures"]){display:none}