/* ==========================================================================
   GREENS ELITE — DESIGN SYSTEM
   Greens Coolers Inc. | Ontario's Premium Commercial Refrigeration Partner
   Single stylesheet. No framework. No builder bloat.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root{
  /* Core palette — sampled from the Greens logo, then built out for print-grade depth */
  --ink:            #0A0C0D;   /* near-black, slightly warm — not pure black */
  --ink-2:          #121618;   /* charcoal */
  --ink-3:          #1B2124;   /* elevated charcoal */
  --steel-900:      #232A2E;
  --steel-700:      #3C4550;
  --steel-500:      #6E7982;   /* stainless steel grey */
  --steel-300:      #A6AFB6;
  --steel-100:      #DCE0E2;

  --brand:          #008200;   /* exact logo green — accents only, never large fields */
  --green-950:      #04170D;
  --green-900:      #072616;
  --green-800:      #0C3A21;   /* deep forest — primary brand dark */
  --green-700:      #135A31;
  --green-600:      #1A7A3F;
  --green-400:      #4E9C68;   /* muted, for text on dark */

  --champagne-700:  #8F7742;
  --champagne:      #BFA875;   /* champagne — used sparingly */
  --champagne-300:  #D2BF95;
  --champagne-200:  #E5D8BA;

  --ivory:          #F4F1EA;   /* warm ivory */
  --ivory-2:        #FAF8F4;
  --white:          #FFFFFF;

  /* Semantic */
  --bg:             var(--white);
  --bg-alt:         var(--ivory-2);
  --fg:             #14191C;
  --fg-muted:       #525C63;
  --line:           rgba(16,23,28,.10);
  --line-strong:    rgba(16,23,28,.18);

  /* Typography */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Fraunces", "Playfair Display", Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* Fluid type scale */
  --fs-xs:    clamp(.72rem, .70rem + .10vw, .78rem);
  --fs-sm:    clamp(.82rem, .79rem + .14vw, .90rem);
  --fs-base:  clamp(1.00rem, .96rem + .18vw, 1.08rem);
  --fs-md:    clamp(1.09rem, 1.03rem + .28vw, 1.24rem);
  --fs-lg:    clamp(1.28rem, 1.16rem + .55vw, 1.65rem);
  --fs-xl:    clamp(1.50rem, 1.28rem + .92vw, 2.15rem);
  --fs-2xl:   clamp(1.80rem, 1.44rem + 1.45vw, 2.72rem);
  --fs-3xl:   clamp(2.10rem, 1.62rem + 2.05vw, 3.25rem);
  --fs-4xl:   clamp(2.45rem, 1.80rem + 2.85vw, 4.05rem);

  /* Space */
  --sp-1: .25rem; --sp-2: .5rem;  --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2rem;   --sp-7: 3rem;   --sp-8: 4rem;
  --sp-9: 6rem;   --sp-10: 8rem;
  --section-y: clamp(3.75rem, 2.2rem + 6vw, 8.5rem);
  --gutter: clamp(1.15rem, .55rem + 2.4vw, 3rem);
  --maxw: 1320px;
  --maxw-narrow: 780px;

  /* Radii + elevation */
  --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(10,12,13,.05), 0 2px 8px rgba(10,12,13,.04);
  --shadow-md: 0 1px 2px rgba(10,12,13,.06), 0 6px 16px rgba(10,12,13,.08), 0 16px 38px rgba(10,12,13,.07);
  --shadow-lg: 0 2px 4px rgba(10,12,13,.06), 0 12px 26px rgba(10,12,13,.10), 0 34px 70px rgba(10,12,13,.13);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,.07), inset 0 -1px 0 rgba(0,0,0,.35);

  /* Photographic grain — the single biggest thing that stops flat vector reading as CGI */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.26'/%3E%3C/svg%3E");

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur: .5s;
}

/* --------------------------------------------------------------------------
   2. RESET / BASE
   -------------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:104px; overflow-x:clip; }
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--font-sans); font-size:var(--fs-base); line-height:1.65;
  font-weight:400; letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}
img,svg,video{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
h1,h2,h3,h4,h5{ margin:0 0 .55em; font-weight:640; line-height:1.08; letter-spacing:-.028em; text-wrap:balance; }
h1{ font-size:var(--fs-3xl); }
h2{ font-size:var(--fs-2xl); }
h3{ font-size:var(--fs-lg); letter-spacing:-.02em; }
h4{ font-size:var(--fs-md); letter-spacing:-.015em; }
p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }
ul,ol{ margin:0 0 1.2em; padding-left:1.15em; }
li{ margin-bottom:.45em; }
strong{ font-weight:640; }
hr{ border:0; border-top:1px solid var(--line); margin:var(--sp-7) 0; }
::selection{ background:var(--champagne); color:var(--ink); }
:focus-visible{ outline:2px solid var(--green-500); outline-offset:3px; border-radius:3px; }

/* --------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.wrap-narrow{ max-width:var(--maxw-narrow); margin-inline:auto; }
.section{ padding-block:var(--section-y); position:relative; }
.section--tight{ padding-block:calc(var(--section-y) * .62); }
.section--alt{ background:var(--bg-alt); }
.section--ivory{ background:var(--ivory); }
.section--dark{ background:var(--ink); color:var(--steel-100); }
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4{ color:var(--white); }
.section--deep{
  background:
    linear-gradient(178deg, #0C1310 0%, var(--ink-2) 46%, var(--ink) 100%);
  color:var(--steel-100);
  position:relative; isolation:isolate;
}
.section--deep::after,.section--dark::after,.hero::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.55;
  background-image:var(--grain);
  background-size:180px 180px;
}
.section--deep h1,.section--deep h2,.section--deep h3,.section--deep h4{ color:var(--white); }
.grid{ display:grid; gap:var(--sp-5); }
.g-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.g-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.g-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.split{ display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(2rem,4vw,4.5rem); align-items:center; }
.split--wide-left{ grid-template-columns:1.25fr .75fr; }
@media (max-width:1024px){ .g-4{ grid-template-columns:repeat(2,minmax(0,1fr)); } .g-3{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:860px){ .split,.split--wide-left{ grid-template-columns:1fr; } }
@media (max-width:680px){ .g-2,.g-3,.g-4{ grid-template-columns:1fr; } }
.stack-sm > * + *{ margin-top:var(--sp-3); }
.center{ text-align:center; }
.center .sec-head{ margin-inline:auto; }

/* --------------------------------------------------------------------------
   4. TYPE UTILITIES
   -------------------------------------------------------------------------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.55rem; max-width:100%;
  font-size:var(--fs-xs); font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--champagne-700); margin-bottom:var(--sp-4);
}
.eyebrow::before{ content:""; width:26px; height:1px; background:currentColor; opacity:.65; }
.section--dark .eyebrow,.section--deep .eyebrow{ color:var(--champagne); }
.lede{ font-size:var(--fs-md); color:var(--fg-muted); line-height:1.62; max-width:62ch; }
.section--dark .lede,.section--deep .lede{ color:var(--steel-300); }
.sec-head{ max-width:74ch; margin-bottom:clamp(2rem,3.2vw,3.4rem); }
.sec-head h2{ margin-bottom:var(--sp-4); }
.display-serif{ font-family:var(--font-display); font-weight:500; font-style:normal; letter-spacing:-.03em; }
.hl{ color:var(--green-600); }
.section--dark .hl,.section--deep .hl{ color:var(--green-300); }
.hl-gold{ color:var(--champagne-700); }
.section--dark .hl-gold,.section--deep .hl-gold{ color:var(--champagne); }
.muted{ color:var(--fg-muted); }
.prose h2{ margin-top:1.9em; }
.prose h3{ margin-top:1.5em; }
.prose > *:first-child{ margin-top:0; }
.prose ul{ padding-left:1.05em; }
.prose li::marker{ color:var(--green-600); }

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.btn{
  --btn-bg:var(--green-800); --btn-fg:var(--white); --btn-bd:var(--green-800);
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.95rem 1.65rem; border-radius:var(--r-pill); border:1px solid var(--btn-bd);
  background:var(--btn-bg); color:var(--btn-fg);
  font-size:var(--fs-sm); font-weight:600; letter-spacing:.005em; line-height:1;
  cursor:pointer; overflow:hidden; isolation:isolate;
  transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out), background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
  box-shadow:0 1px 2px rgba(10,12,13,.08);
}
.btn::after{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:linear-gradient(110deg, transparent 20%, rgba(255,255,255,.22) 42%, transparent 62%);
  transform:translateX(-120%); transition:transform .75s var(--ease-out);
}
.btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn:hover::after{ transform:translateX(120%); }
.btn:active{ transform:translateY(0); }
.btn--gold{ --btn-bg:var(--champagne); --btn-bd:var(--champagne); --btn-fg:var(--ink); }
.btn--gold:hover{ --btn-bg:#D4BA83; }
.btn--ghost{ --btn-bg:transparent; --btn-fg:var(--fg); --btn-bd:var(--line-strong); }
.btn--ghost:hover{ --btn-bd:var(--green-800); --btn-fg:var(--green-800); }
.section--dark .btn--ghost,.section--deep .btn--ghost,.hero .btn--ghost,.ctaband .btn--ghost,.mobile-nav .btn--ghost,.formcard .btn--ghost,.section--dark .link-arrow{ --btn-fg:var(--white); --btn-bd:rgba(255,255,255,.34); --btn-bg:rgba(255,255,255,.05); }
.section--dark .btn--ghost:hover,.section--deep .btn--ghost:hover,.hero .btn--ghost:hover,.ctaband .btn--ghost:hover,.mobile-nav .btn--ghost:hover,.formcard .btn--ghost:hover{ --btn-bd:var(--champagne); --btn-fg:var(--champagne); --btn-bg:rgba(191,168,117,.08); }
.btn--lg{ padding:1.15rem 2.1rem; font-size:var(--fs-base); }
.btn--block{ width:100%; }
.btn-row{ display:flex; flex-wrap:wrap; gap:var(--sp-3) var(--sp-4); align-items:center; }
.link-arrow{
  display:inline-flex; align-items:center; gap:.5rem; font-weight:600; font-size:var(--fs-sm);
  color:var(--green-600); transition:gap .3s var(--ease-out), color .3s var(--ease);
}
.link-arrow svg{ transition:transform .3s var(--ease-out); }
.link-arrow:hover{ gap:.85rem; color:var(--green-800); }
.section--dark .link-arrow,.section--deep .link-arrow{ color:var(--champagne); }

/* --------------------------------------------------------------------------
   6. HEADER + MEGA MENU
   -------------------------------------------------------------------------- */
.topbar{
  background:var(--ink); color:var(--steel-300); font-size:var(--fs-xs);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.topbar__in{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); min-height:40px; }
.topbar__list{ display:flex; gap:var(--sp-5); list-style:none; margin:0; padding:0; }
.topbar__list li{ margin:0; display:flex; align-items:center; gap:.4rem; }
.topbar__list svg{ opacity:.75; }
.topbar a:hover{ color:var(--champagne); }
@media (max-width:860px){ .topbar__list--left{ display:none; } .topbar__in{ justify-content:center; } }

.site-header{ position:sticky; top:0; z-index:950; background:rgba(255,255,255,.86); backdrop-filter:saturate(160%) blur(14px); -webkit-backdrop-filter:saturate(160%) blur(14px); border-bottom:1px solid var(--line); transition:box-shadow .3s var(--ease), background .3s var(--ease); }
.site-header.is-stuck{ box-shadow:0 6px 30px rgba(10,12,13,.09); }
.header__in{ display:flex; align-items:center; gap:var(--sp-5); min-height:78px; }
.brand{ display:flex; align-items:center; flex:0 0 auto; }
.brand__lockup{ display:flex; align-items:center; gap:.72rem; }
.brand__mark{ width:auto; height:42px; flex:0 0 auto; display:block; }
.brand__txt{ display:flex; flex-direction:column; gap:.22rem; line-height:1; }
.brand__word{ height:17px; width:auto; display:block; }
.brand__name{ font-size:1.03rem; font-weight:680; letter-spacing:-.03em; color:var(--ink); }
.brand__tag{ font-size:.585rem; letter-spacing:.19em; text-transform:uppercase; color:var(--champagne-700); font-weight:650; }
.site-footer .brand__tag{ color:var(--champagne); }

.nav{ margin-left:auto; }
.nav__list{ display:flex; align-items:center; gap:.15rem; list-style:none; margin:0; padding:0; }
.nav__list > li{ margin:0; position:static; }
.nav__link{
  display:inline-flex; align-items:center; gap:.35rem; padding:.65rem .8rem; border-radius:var(--r-sm);
  font-size:var(--fs-sm); font-weight:550; color:var(--fg); position:relative; white-space:nowrap;
  transition:color .25s var(--ease);
}
.nav__link::after{
  content:""; position:absolute; left:.8rem; right:.8rem; bottom:.32rem; height:1.5px;
  background:var(--green-600); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease-out);
}
.nav__link:hover::after,.nav__item.is-open > .nav__link::after,.nav__item.current-menu-item > .nav__link::after{ transform:scaleX(1); }
.nav__link:hover{ color:var(--green-800); }
.nav__caret{ transition:transform .3s var(--ease-out); opacity:.55; }
.nav__item.is-open .nav__caret{ transform:rotate(180deg); }

.mega{
  position:absolute; left:0; right:0; top:100%;
  background:var(--white); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  box-shadow:0 30px 60px rgba(10,12,13,.13);
  opacity:0; visibility:hidden; transform:translateY(-10px);
  transition:opacity .3s var(--ease), transform .38s var(--ease-out), visibility .3s;
  z-index:920;
}
.nav__item.is-open .mega{ opacity:1; visibility:visible; transform:translateY(0); }
.mega__in{ display:grid; grid-template-columns:1fr 1fr 1fr .95fr; gap:clamp(1.5rem,2.6vw,3rem); padding-block:clamp(1.8rem,2.6vw,2.9rem); }
.mega__col h4{ font-size:var(--fs-xs); letter-spacing:.14em; text-transform:uppercase; color:var(--champagne-700); margin-bottom:var(--sp-4); font-weight:640; }
.mega__links{ list-style:none; margin:0; padding:0; }
.mega__links li{ margin:0; }
.mega__links a{
  display:block; padding:.42rem 0; font-size:var(--fs-sm); color:var(--fg-muted); font-weight:500;
  transition:color .22s var(--ease), transform .28s var(--ease-out);
}
.mega__links a:hover{ color:var(--green-800); transform:translateX(4px); }
.mega__promo{
  background:linear-gradient(150deg, var(--green-900), var(--ink) 78%);
  border-radius:var(--r-lg); padding:clamp(1.3rem,1.8vw,1.9rem); color:var(--steel-100);
  display:flex; flex-direction:column; justify-content:space-between; gap:var(--sp-5);
  border:1px solid rgba(191,168,117,.20);
}
.mega__promo h5{ color:var(--white); font-size:var(--fs-md); font-weight:640; letter-spacing:-.02em; margin:0 0 .5rem; }
.mega__promo p{ font-size:var(--fs-sm); color:var(--steel-300); margin:0; }
@media (max-width:1180px){ .mega__in{ grid-template-columns:1fr 1fr; } }

.header__cta{ display:flex; align-items:center; gap:var(--sp-3); flex:0 0 auto; margin-left:var(--sp-4); }
.header__phone{ display:inline-flex; align-items:center; gap:.5rem; font-weight:650; font-size:var(--fs-sm); letter-spacing:-.01em; white-space:nowrap; }
.header__phone svg{ color:var(--green-600); }
.header__phone:hover{ color:var(--green-800); }
@media (max-width:1140px){ .nav,.header__phone{ display:none; } .burger{ display:inline-flex; } .header__cta{ margin-left:auto; } }
@media (max-width:520px){ .header__cta .btn{ padding:.8rem 1.1rem; font-size:var(--fs-xs); } }

.burger{ display:none; width:44px; height:44px; align-items:center; justify-content:center; border:1px solid var(--line-strong); border-radius:var(--r-sm); background:transparent; cursor:pointer; }
.burger span{ display:block; width:19px; height:1.5px; background:var(--fg); position:relative; transition:background .2s; }
.burger span::before,.burger span::after{ content:""; position:absolute; left:0; width:19px; height:1.5px; background:var(--fg); transition:transform .35s var(--ease-out); }
.burger span::before{ top:-6px; } .burger span::after{ top:6px; }
.is-menu-open .burger span{ background:transparent; }
.is-menu-open .burger span::before{ transform:translateY(6px) rotate(45deg); }
.is-menu-open .burger span::after{ transform:translateY(-6px) rotate(-45deg); }

.mobile-nav{
  position:fixed; inset:0 0 0 0; z-index:940; background:var(--ink); color:var(--steel-100);
  transform:translateX(100%); visibility:hidden; transition:transform .45s var(--ease-out), visibility .45s; overflow-y:auto;
  padding:calc(78px + var(--sp-5)) var(--gutter) var(--sp-8); display:flex; flex-direction:column; gap:var(--sp-5);
}
.is-menu-open .mobile-nav{ transform:translateX(0); visibility:visible; }
.mobile-nav__group{ border-bottom:1px solid rgba(255,255,255,.1); padding-bottom:var(--sp-4); }
.mobile-nav__toggle{ display:flex; width:100%; align-items:center; justify-content:space-between; background:none; border:0; padding:.85rem 0; font-size:var(--fs-md); font-weight:600; color:var(--white); cursor:pointer; }
.mobile-nav__panel{ display:none; padding-bottom:var(--sp-3); }
.mobile-nav__group.is-open .mobile-nav__panel{ display:block; }
.mobile-nav__panel a{ display:block; padding:.5rem 0 .5rem .9rem; font-size:var(--fs-sm); color:var(--steel-300); border-left:1px solid rgba(255,255,255,.12); }
.mobile-nav__panel a:hover{ color:var(--champagne); }
.mobile-nav > a.mobile-nav__solo{ font-size:var(--fs-md); font-weight:600; color:var(--white); padding:.85rem 0; border-bottom:1px solid rgba(255,255,255,.1); }

/* --------------------------------------------------------------------------
   7. HERO
   -------------------------------------------------------------------------- */
.hero{ position:relative; overflow:hidden; background:var(--ink); color:var(--steel-100); isolation:isolate; }
.hero__bg{ position:absolute; inset:0; z-index:-2; }
.hero__bg::before{
  content:""; position:absolute; inset:-10% -5%;
  background:
    radial-gradient(900px 620px at 20% 12%, rgba(12,58,33,.42), transparent 66%),
    linear-gradient(166deg, #0B0F10 0%, #141A1C 40%, #0A0C0D 100%);
  transform:translate3d(0,var(--parallax,0px),0); will-change:transform;
}
.hero{ position:relative; }
.hero__grid{
  position:absolute; inset:0; z-index:-1; opacity:.16;
  background-image:linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size:96px 96px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 42%, #000 30%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 42%, #000 30%, transparent 78%);
}
.hero__in{ position:relative; padding-block:clamp(3.4rem,2.6rem + 4.2vw,6.6rem); display:grid; grid-template-columns:1.06fr .94fr; gap:clamp(2rem,4vw,4.5rem); align-items:center; }
@media (max-width:960px){ .hero__in{ grid-template-columns:1fr; } }
.hero h1{ font-size:var(--fs-4xl); color:var(--white); margin-bottom:var(--sp-5); letter-spacing:-.038em; line-height:1.02; }
.hero__sub{ font-size:var(--fs-md); color:var(--champagne-200); font-weight:500; letter-spacing:-.015em; line-height:1.42; margin-bottom:var(--sp-5); max-width:46ch; }
.hero__copy{ font-size:var(--fs-md); color:var(--steel-300); max-width:56ch; margin-bottom:var(--sp-6); }
.hero__meta{ display:flex; flex-wrap:wrap; gap:var(--sp-3) var(--sp-6); margin-top:var(--sp-6); padding-top:var(--sp-5); border-top:1px solid rgba(255,255,255,.12); }
.hero__meta-item{ display:flex; align-items:center; gap:.55rem; font-size:var(--fs-sm); color:var(--steel-300); }
.hero__meta-item svg{ color:var(--green-300); flex:0 0 auto; }
.hero--page .hero__in{ padding-block:clamp(2.6rem,2.1rem + 3.2vw,5rem); grid-template-columns:1.15fr .85fr; }
.hero--page h1{ font-size:var(--fs-3xl); }

/* text mask reveal */
.reveal-mask{ display:block; overflow:hidden; }
.reveal-mask > span{ display:block; transform:translateY(105%); opacity:0; transition:transform .95s var(--ease-out), opacity .8s var(--ease-out); }
.is-ready .reveal-mask > span{ transform:translateY(0); opacity:1; }
.is-ready .reveal-mask:nth-of-type(2) > span{ transition-delay:.09s; }
.is-ready .reveal-mask:nth-of-type(3) > span{ transition-delay:.18s; }

/* --------------------------------------------------------------------------
   8. 3D PRODUCT PANEL (hero visual)
   -------------------------------------------------------------------------- */
.panel3d{ perspective:1400px; position:relative; }
.panel3d__inner{
  position:relative; border-radius:var(--r-xl); overflow:hidden;
  background:linear-gradient(155deg, #16202A 0%, #0C1319 55%, #070B0F 100%);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 30px 60px rgba(0,0,0,.48), 0 4px 10px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.07);
  transform:rotateY(var(--ry,-7deg)) rotateX(var(--rx,3deg)) translateZ(0);
  transition:transform .6s var(--ease-out);
  will-change:transform;
}
.panel3d__inner::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(112deg, rgba(255,255,255,.09) 0%, transparent 28%, transparent 72%, rgba(255,255,255,.045) 100%),
    var(--grain);
  background-size:auto, 180px 180px;
  mix-blend-mode:normal;
}
.panel3d__badge{
  position:absolute; z-index:3; background:rgba(10,14,18,.72); backdrop-filter:blur(12px);
  border:1px solid rgba(191,168,117,.32); border-radius:var(--r-md);
  padding:.7rem .95rem; color:var(--white); box-shadow:var(--shadow-lg);
}
.panel3d__badge b{ display:block; font-size:var(--fs-sm); font-weight:650; letter-spacing:-.01em; }
.panel3d__badge span{ display:block; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--champagne); margin-top:2px; }
.panel3d__badge--tl{ top:6%; left:-5%; }
.panel3d__badge--br{ bottom:8%; right:-4%; }
@media (max-width:960px){ .panel3d__badge--tl{ left:2%; } .panel3d__badge--br{ right:2%; } }

/* --------------------------------------------------------------------------
   9. TRUST STRIP
   -------------------------------------------------------------------------- */
.trust{ background:var(--ink-2); color:var(--steel-300); border-top:1px solid rgba(255,255,255,.07); }
.trust__in{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--sp-4) var(--sp-6); padding-block:var(--sp-5); }
.trust__item{ display:flex; align-items:center; gap:.6rem; font-size:var(--fs-sm); font-weight:520; letter-spacing:-.005em; }
.trust__item svg{ color:var(--champagne); flex:0 0 auto; }
.trust__lead{ font-size:var(--fs-xs); letter-spacing:.16em; text-transform:uppercase; color:var(--steel-500); font-weight:600; }

/* --------------------------------------------------------------------------
   10. CARDS
   -------------------------------------------------------------------------- */
.card{
  position:relative; background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(1.4rem,1.9vw,2.1rem); overflow:hidden; isolation:isolate;
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .4s var(--ease);
  display:flex; flex-direction:column; gap:var(--sp-3);
}
.card::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:0;
  background:linear-gradient(168deg, rgba(12,58,33,.055), rgba(191,168,117,.035) 72%, transparent);
  transition:opacity .45s var(--ease);
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:rgba(12,58,33,.26); }
.card:hover::before{ opacity:1; }
.card__icon{
  width:52px; height:52px; border-radius:14px; display:grid; place-items:center; flex:0 0 auto;
  background:linear-gradient(152deg, var(--green-700), var(--green-900));
  color:var(--white); box-shadow:0 6px 16px rgba(7,38,22,.30), inset 0 1px 0 rgba(255,255,255,.10);
  transition:transform .5s var(--ease-out);
}
.card:hover .card__icon{ transform:translateY(-3px) rotate(-4deg); }
.card h3{ margin:0; font-size:var(--fs-md); }
.card p{ font-size:var(--fs-sm); color:var(--fg-muted); margin:0; }
.card__foot{ margin-top:auto; padding-top:var(--sp-3); }
.card--dark{ background:linear-gradient(160deg, var(--ink-3), var(--ink) 85%); border-color:rgba(255,255,255,.09); color:var(--steel-300); }
.card--dark h3{ color:var(--white); }
.card--dark p{ color:var(--steel-300); }
.card--dark:hover{ border-color:rgba(191,168,117,.34); }
.card--flat{ box-shadow:none; }
.card--flat:hover{ transform:none; box-shadow:var(--shadow-md); }

/* Solution card with 3D tilt + art */
.scard{
  position:relative; border-radius:var(--r-lg); overflow:hidden; isolation:isolate;
  background:linear-gradient(160deg, #171D1F 0%, #0D1113 60%, #0A0C0D 100%);
  border:1px solid rgba(255,255,255,.09); color:var(--steel-300);
  min-height:340px; display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(1.4rem,2vw,2.05rem);
  transform-style:preserve-3d;
  transition:transform .55s var(--ease-out), box-shadow .55s var(--ease-out), border-color .4s var(--ease);
}
.scard:hover{ transform:translateY(-8px); box-shadow:0 34px 74px rgba(0,0,0,.42); border-color:rgba(191,168,117,.34); }
.scard__art{ position:absolute; inset:0; z-index:-1; opacity:.85; transition:transform .8s var(--ease-out), opacity .5s; }
.scard:hover .scard__art{ transform:scale(1.045); opacity:1; }
.scard__scrim{ position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(10,12,13,.10) 0%, rgba(10,12,13,.62) 48%, rgba(10,12,13,.95) 100%); }
.scard h3{ color:var(--white); font-size:var(--fs-lg); margin-bottom:.4rem; }
.scard p{ font-size:var(--fs-sm); color:var(--steel-300); margin-bottom:var(--sp-4); }
.scard__tag{
  position:absolute; top:var(--sp-4); left:var(--sp-4); z-index:2;
  font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; font-weight:650;
  padding:.36rem .7rem; border-radius:var(--r-pill);
  background:rgba(191,168,117,.14); border:1px solid rgba(191,168,117,.35); color:var(--champagne-200);
  backdrop-filter:blur(8px);
}

/* --------------------------------------------------------------------------
   11. FEATURE / SPEC LISTS
   -------------------------------------------------------------------------- */
.feature-list{ list-style:none; margin:0; padding:0; display:grid; gap:var(--sp-4); }
.feature-list li{ display:grid; grid-template-columns:26px 1fr; gap:var(--sp-3); margin:0; align-items:start; }
.feature-list .tick{ width:22px; height:22px; border-radius:50%; background:rgba(26,122,63,.12); color:var(--green-600); display:grid; place-items:center; margin-top:2px; }
.section--dark .feature-list .tick,.section--deep .feature-list .tick{ background:rgba(78,156,104,.14); color:var(--green-300); }
.feature-list b{ display:block; font-weight:640; letter-spacing:-.015em; margin-bottom:.15rem; }
.feature-list span.d{ font-size:var(--fs-sm); color:var(--fg-muted); }
.section--dark .feature-list span.d,.section--deep .feature-list span.d{ color:var(--steel-300); }

.spec-table{ width:100%; border-collapse:collapse; font-size:var(--fs-sm); }
.spec-table th,.spec-table td{ text-align:left; padding:.85rem 1rem; border-bottom:1px solid var(--line); vertical-align:top; }
.spec-table th{ font-weight:640; color:var(--fg); width:38%; }
.spec-table td{ color:var(--fg-muted); }
.spec-table tr:last-child th,.spec-table tr:last-child td{ border-bottom:0; }
.table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-md); background:var(--white); }

.stat-row{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--sp-5); }
@media (max-width:760px){ .stat-row{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.stat{ border-left:2px solid rgba(191,168,117,.5); padding-left:var(--sp-4); }
.stat b{ display:block; font-size:var(--fs-xl); font-weight:660; letter-spacing:-.035em; line-height:1; margin-bottom:.4rem; }
.stat span{ font-size:var(--fs-sm); color:var(--fg-muted); }
.section--dark .stat span,.section--deep .stat span{ color:var(--steel-300); }

/* --------------------------------------------------------------------------
   12. PROCESS TIMELINE
   -------------------------------------------------------------------------- */
.timeline{ position:relative; display:grid; gap:var(--sp-6); }
.timeline::before{ content:""; position:absolute; left:23px; top:14px; bottom:14px; width:1px; background:linear-gradient(180deg, transparent, var(--line-strong) 12%, var(--line-strong) 88%, transparent); }
.section--dark .timeline::before,.section--deep .timeline::before{ background:linear-gradient(180deg, transparent, rgba(255,255,255,.16) 12%, rgba(255,255,255,.16) 88%, transparent); }
.tl-step{ display:grid; grid-template-columns:48px 1fr; gap:var(--sp-4); align-items:start; position:relative; }
.tl-step__num{
  width:48px; height:48px; border-radius:50%; display:grid; place-items:center; position:relative; z-index:2;
  background:var(--white); border:1px solid var(--line-strong); font-weight:660; font-size:var(--fs-sm);
  color:var(--green-800); transition:all .45s var(--ease-out);
}
.section--dark .tl-step__num,.section--deep .tl-step__num{ background:var(--ink-3); border-color:rgba(255,255,255,.16); color:var(--champagne); }
.tl-step.is-in .tl-step__num{ background:var(--green-800); color:var(--white); border-color:var(--green-800); box-shadow:0 0 0 6px rgba(26,122,63,.10); }
.tl-step h3{ font-size:var(--fs-md); margin-bottom:.3rem; }
.tl-step p{ font-size:var(--fs-sm); color:var(--fg-muted); margin:0; }
.section--dark .tl-step p,.section--deep .tl-step p{ color:var(--steel-300); }
@media (min-width:900px){
  .timeline--horizontal{ grid-template-columns:repeat(4,1fr); gap:var(--sp-5); }
  .timeline--horizontal::before{ left:24px; right:24px; top:24px; bottom:auto; width:auto; height:1px; background:linear-gradient(90deg, transparent, var(--line-strong) 10%, var(--line-strong) 90%, transparent); }
  .timeline--horizontal .tl-step{ grid-template-columns:1fr; }
}

/* --------------------------------------------------------------------------
   13. INDUSTRY / AREA PILLS
   -------------------------------------------------------------------------- */
.pill-grid{ display:flex; flex-wrap:wrap; gap:var(--sp-3); }
.pill{
  display:inline-flex; align-items:center; gap:.5rem; padding:.6rem 1.05rem; border-radius:var(--r-pill);
  border:1px solid var(--line-strong); font-size:var(--fs-sm); font-weight:520; background:var(--white);
  transition:all .3s var(--ease-out);
}
.pill:hover{ border-color:var(--green-600); color:var(--green-800); transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.section--dark .pill,.section--deep .pill{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.14); color:var(--steel-100); }
.section--dark .pill:hover,.section--deep .pill:hover{ border-color:var(--champagne); color:var(--champagne); }

.icard{
  display:flex; flex-direction:column; gap:var(--sp-3); padding:clamp(1.3rem,1.7vw,1.85rem);
  border:1px solid var(--line); border-radius:var(--r-md); background:var(--white);
  transition:all .45s var(--ease-out);
}
.icard:hover{ border-color:rgba(26,122,63,.3); box-shadow:var(--shadow-md); transform:translateY(-4px); }
.icard__ico{ color:var(--green-600); }
.icard h3{ font-size:var(--fs-base); font-weight:640; margin:0; }
.icard p{ font-size:var(--fs-sm); color:var(--fg-muted); margin:0; }

/* --------------------------------------------------------------------------
   14. FAQ
   -------------------------------------------------------------------------- */
.faq{ border-top:1px solid var(--line); }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__q{
  width:100%; display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-4);
  background:none; border:0; padding:1.35rem 0; text-align:left; cursor:pointer;
  font-size:var(--fs-md); font-weight:600; letter-spacing:-.018em; color:var(--fg); line-height:1.35;
  transition:color .25s var(--ease);
}
.faq__q:hover{ color:var(--green-800); }
.faq__ico{ flex:0 0 auto; width:26px; height:26px; border-radius:50%; border:1px solid var(--line-strong); display:grid; place-items:center; margin-top:2px; transition:all .4s var(--ease-out); }
.faq__item.is-open .faq__ico{ background:var(--green-800); border-color:var(--green-800); color:var(--white); transform:rotate(180deg); }
.faq__a{ overflow:hidden; height:0; transition:height .45s var(--ease-out); }
.faq__a-in{ padding-bottom:1.4rem; color:var(--fg-muted); font-size:var(--fs-sm); max-width:82ch; }
.section--dark .faq,.section--dark .faq__item,.section--deep .faq,.section--deep .faq__item{ border-color:rgba(255,255,255,.12); }
.section--dark .faq__q,.section--deep .faq__q{ color:var(--white); }
.section--dark .faq__a-in,.section--deep .faq__a-in{ color:var(--steel-300); }

/* --------------------------------------------------------------------------
   15. FORMS
   -------------------------------------------------------------------------- */
.formcard{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-xl);
  padding:clamp(1.5rem,2.4vw,2.6rem); box-shadow:var(--shadow-lg);
}
.section--dark .formcard,.section--deep .formcard{
  background:linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
  border-color:rgba(255,255,255,.13); backdrop-filter:blur(14px); color:var(--steel-100);
}
.formcard__head{ margin-bottom:var(--sp-5); }
.formcard__head h3{ font-size:var(--fs-lg); margin-bottom:.4rem; }
.formcard__head p{ font-size:var(--fs-sm); color:var(--fg-muted); margin:0; }
.section--dark .formcard__head p,.section--deep .formcard__head p{ color:var(--steel-300); }
.fgrid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4); }
@media (max-width:620px){ .fgrid{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; gap:.4rem; }
.field--full{ grid-column:1 / -1; }
.field label{ font-size:var(--fs-xs); font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--fg-muted); }
.section--dark .field label,.section--deep .field label{ color:var(--steel-300); }
.field .req{ color:#B3541E; }
.field input,.field select,.field textarea{
  width:100%; padding:.85rem 1rem; border-radius:var(--r-sm); border:1px solid var(--line-strong);
  background:var(--white); font-size:var(--fs-sm); transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.section--dark .field input,.section--dark .field select,.section--dark .field textarea,
.section--deep .field input,.section--deep .field select,.section--deep .field textarea{
  background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.16); color:var(--white);
}
.section--dark .field select option,.section--deep .field select option{ color:#10171C; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--green-600); box-shadow:0 0 0 3px rgba(26,122,63,.14); }
.field textarea{ min-height:118px; resize:vertical; }
.field input[type=file]{ padding:.6rem; font-size:var(--fs-xs); }
.consent{ display:flex; gap:.65rem; align-items:flex-start; font-size:var(--fs-xs); color:var(--fg-muted); line-height:1.5; }
.section--dark .consent,.section--deep .consent{ color:var(--steel-300); }
.consent input{ width:16px; height:16px; margin-top:2px; flex:0 0 auto; accent-color:var(--green-600); }
.form-note{ font-size:var(--fs-xs); color:var(--fg-muted); margin-top:var(--sp-3); }
.form-msg{ padding:.9rem 1.1rem; border-radius:var(--r-sm); font-size:var(--fs-sm); margin-bottom:var(--sp-4); }
.form-msg--ok{ background:rgba(26,122,63,.12); border:1px solid rgba(26,122,63,.34); color:#0D5B3F; }
.form-msg--err{ background:rgba(179,84,30,.10); border:1px solid rgba(179,84,30,.32); color:#8A3F16; }
.hp-field{ position:absolute !important; left:-9999px !important; opacity:0; height:0; overflow:hidden; }

/* --------------------------------------------------------------------------
   16. CTA BANDS + STICKY CTA
   -------------------------------------------------------------------------- */
.ctaband{
  position:relative; overflow:hidden; isolation:isolate; border-radius:var(--r-xl);
  background:linear-gradient(140deg, var(--green-900) 0%, #07100D 52%, var(--ink) 100%);
  color:var(--steel-100); padding:clamp(2rem,3.4vw,3.6rem);
  border:1px solid rgba(191,168,117,.20);
}
.ctaband::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(600px 320px at 88% 10%, rgba(191,168,117,.20), transparent 62%);
}
.ctaband h2{ color:var(--white); margin-bottom:var(--sp-4); }
.ctaband p{ color:var(--steel-300); max-width:60ch; }
.ctaband__in{ display:grid; grid-template-columns:1.35fr .65fr; gap:var(--sp-6); align-items:center; }
@media (max-width:860px){ .ctaband__in{ grid-template-columns:1fr; } }

.stickybar{
  position:fixed; left:0; right:0; bottom:0; z-index:880; display:none;
  background:rgba(10,12,13,.94); backdrop-filter:blur(14px); border-top:1px solid rgba(191,168,117,.28);
  padding:.6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom));
  transform:translateY(110%); transition:transform .45s var(--ease-out);
}
.stickybar.is-on{ transform:translateY(0); }
.stickybar__in{ display:grid; grid-template-columns:1fr 1fr; gap:.55rem; }
.stickybar .btn{ padding:.85rem .8rem; font-size:.8rem; }
@media (max-width:900px){ .stickybar{ display:block; } body{ padding-bottom:0; } }

.railcta{
  position:fixed; right:18px; bottom:22px; z-index:870; display:flex; flex-direction:column; gap:.6rem;
}
@media (max-width:900px){ .railcta{ bottom:78px; right:14px; } }
.fab{
  width:52px; height:52px; border-radius:50%; display:grid; place-items:center; color:var(--white);
  box-shadow:var(--shadow-lg); transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
  position:relative;
}
.fab:hover{ transform:translateY(-3px) scale(1.05); }
.fab--wa{ background:#25D366; }
.fab--tel{ background:var(--green-800); }
.fab__tip{
  position:absolute; right:62px; top:50%; transform:translateY(-50%) translateX(8px);
  background:var(--ink); color:var(--white); font-size:var(--fs-xs); font-weight:560; white-space:nowrap;
  padding:.45rem .75rem; border-radius:var(--r-sm); opacity:0; pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease-out);
}
.fab:hover .fab__tip{ opacity:1; transform:translateY(-50%) translateX(0); }
@media (max-width:900px){ .fab__tip{ display:none; } }

/* --------------------------------------------------------------------------
   17. BREADCRUMBS / SIDE NAV / MISC
   -------------------------------------------------------------------------- */
.crumbs{ font-size:var(--fs-xs); color:var(--steel-500); padding-top:var(--sp-5); }
.crumbs ol{ list-style:none; display:flex; flex-wrap:wrap; gap:.45rem; margin:0; padding:0; }
.crumbs li{ margin:0; display:flex; align-items:center; gap:.45rem; }
.crumbs li+li::before{ content:"/"; opacity:.5; }
.crumbs a:hover{ color:var(--champagne); }
.hero .crumbs{ color:var(--steel-500); }

.sidenav{ position:sticky; top:104px; }
.sidenav h4{ font-size:var(--fs-xs); letter-spacing:.14em; text-transform:uppercase; color:var(--champagne-700); margin-bottom:var(--sp-4); }
.sidenav ul{ list-style:none; margin:0; padding:0; border-left:1px solid var(--line); }
.sidenav li{ margin:0; }
.sidenav a{ display:block; padding:.5rem 0 .5rem 1rem; font-size:var(--fs-sm); color:var(--fg-muted); border-left:2px solid transparent; margin-left:-1px; transition:all .25s var(--ease); }
.sidenav a:hover,.sidenav a.is-active{ color:var(--green-800); border-left-color:var(--green-600); }

.tag{ display:inline-block; font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; font-weight:650; padding:.3rem .6rem; border-radius:var(--r-sm); background:rgba(26,122,63,.10); color:var(--green-600); }

.quote{
  border-left:3px solid var(--champagne); padding:.4rem 0 .4rem 1.4rem; font-size:var(--fs-md);
  font-family:var(--font-display); font-weight:400; letter-spacing:-.02em; line-height:1.45;
}
.quote cite{ display:block; margin-top:.8rem; font-family:var(--font-sans); font-size:var(--fs-xs); font-style:normal; letter-spacing:.09em; text-transform:uppercase; color:var(--fg-muted); font-weight:600; }

.notice{
  border:1px dashed var(--line-strong); border-radius:var(--r-md); padding:var(--sp-5);
  background:var(--ivory); font-size:var(--fs-sm); color:var(--fg-muted);
}

/* Gallery */
.gallery{ display:grid; grid-template-columns:repeat(12,1fr); gap:var(--sp-4); }
.gallery__cell{ position:relative; border-radius:var(--r-lg); overflow:hidden; min-height:220px; border:1px solid rgba(255,255,255,.08); }
.gallery__cell figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:1.1rem 1.2rem;
  background:linear-gradient(180deg, transparent, rgba(5,8,11,.9)); color:var(--white); font-size:var(--fs-sm); font-weight:560;
}
.gallery__cell figcaption span{ display:block; font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; color:var(--champagne); font-weight:650; margin-bottom:.2rem; }
.gc-6{ grid-column:span 6; } .gc-4{ grid-column:span 4; } .gc-8{ grid-column:span 8; } .gc-12{ grid-column:span 12; }
.gallery__cell--tall{ min-height:420px; }
@media (max-width:820px){ .gc-6,.gc-4,.gc-8{ grid-column:span 12; } .gallery__cell--tall{ min-height:280px; } }

/* Post cards */
.postcard{ display:flex; flex-direction:column; gap:var(--sp-3); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--white); transition:all .45s var(--ease-out); }
.postcard:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:rgba(26,122,63,.25); }
.postcard__art{ height:170px; position:relative; }
.postcard__body{ padding:0 clamp(1.2rem,1.6vw,1.6rem) clamp(1.4rem,1.8vw,1.8rem); display:flex; flex-direction:column; gap:.6rem; flex:1; }
.postcard h3{ font-size:var(--fs-base); margin:0; }
.postcard p{ font-size:var(--fs-sm); color:var(--fg-muted); margin:0; }
.postcard__meta{ font-size:var(--fs-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--champagne-700); font-weight:640; }

/* --------------------------------------------------------------------------
   18. FOOTER
   -------------------------------------------------------------------------- */
.site-footer{ background:var(--ink); color:var(--steel-300); padding-top:var(--section-y); }
.site-footer h4{ color:var(--white); font-size:var(--fs-xs); letter-spacing:.14em; text-transform:uppercase; margin-bottom:var(--sp-4); font-weight:640; }
.footer__top{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr 1.15fr; gap:clamp(1.5rem,2.6vw,3rem); padding-bottom:var(--sp-8); }
@media (max-width:1080px){ .footer__top{ grid-template-columns:1fr 1fr 1fr; } }
@media (max-width:680px){ .footer__top{ grid-template-columns:1fr 1fr; } }
@media (max-width:460px){ .footer__top{ grid-template-columns:1fr; } }
.footer__links{ list-style:none; margin:0; padding:0; }
.footer__links li{ margin:0; }
.footer__links a{ display:block; padding:.3rem 0; font-size:var(--fs-sm); color:var(--steel-300); transition:color .25s var(--ease), transform .28s var(--ease-out); }
.footer__links a:hover{ color:var(--champagne); transform:translateX(3px); }
.footer__brandcol p{ font-size:var(--fs-sm); color:var(--steel-500); max-width:38ch; }
.footer__nap{ font-size:var(--fs-sm); font-style:normal; line-height:1.9; }
.footer__nap a:hover{ color:var(--champagne); }
.footer__bottom{ border-top:1px solid rgba(255,255,255,.09); padding-block:var(--sp-5); display:flex; flex-wrap:wrap; gap:var(--sp-4); align-items:center; justify-content:space-between; font-size:var(--fs-xs); color:var(--steel-500); }
.footer__bottom nav{ display:flex; flex-wrap:wrap; gap:var(--sp-4); }
.footer__seo{ border-top:1px solid rgba(255,255,255,.09); padding-block:var(--sp-6); }
.footer__seo p{ font-size:var(--fs-xs); color:var(--steel-500); line-height:1.85; }
.footer__seo a{ color:var(--steel-300); }
.footer__seo a:hover{ color:var(--champagne); }
.social{ display:flex; gap:.6rem; margin-top:var(--sp-4); }
.social a{ width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.14); display:grid; place-items:center; transition:all .3s var(--ease-out); }
.social a:hover{ border-color:var(--champagne); color:var(--champagne); transform:translateY(-2px); }

/* --------------------------------------------------------------------------
   19. SCROLL REVEAL
   -------------------------------------------------------------------------- */
[data-anim]{ opacity:0; transform:translateY(26px); transition:opacity .85s var(--ease-out), transform .95s var(--ease-out); will-change:opacity,transform; }
[data-anim="fade"]{ transform:none; }
[data-anim="left"]{ transform:translateX(-30px); }
[data-anim="right"]{ transform:translateX(30px); }
[data-anim="zoom"]{ transform:scale(.965); }
[data-anim].is-in{ opacity:1; transform:none; }
[data-stagger] > *{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease-out), transform .9s var(--ease-out); }
[data-stagger].is-in > *{ opacity:1; transform:none; }
[data-stagger].is-in > *:nth-child(1){ transition-delay:.04s; }
[data-stagger].is-in > *:nth-child(2){ transition-delay:.11s; }
[data-stagger].is-in > *:nth-child(3){ transition-delay:.18s; }
[data-stagger].is-in > *:nth-child(4){ transition-delay:.25s; }
[data-stagger].is-in > *:nth-child(5){ transition-delay:.32s; }
[data-stagger].is-in > *:nth-child(6){ transition-delay:.39s; }
[data-stagger].is-in > *:nth-child(7){ transition-delay:.46s; }
[data-stagger].is-in > *:nth-child(8){ transition-delay:.53s; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  [data-anim],[data-stagger] > *{ opacity:1 !important; transform:none !important; }
  .reveal-mask > span{ transform:none !important; opacity:1 !important; }
}

/* --------------------------------------------------------------------------
   20. SKIP LINK / A11Y / PRINT
   -------------------------------------------------------------------------- */
.skip{ position:absolute; left:-9999px; top:0; background:var(--green-800); color:#fff; padding:.8rem 1.2rem; z-index:999; border-radius:0 0 var(--r-sm) 0; }
.skip:focus{ left:0; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media print{ .site-header,.stickybar,.railcta,.site-footer,.topbar{ display:none !important; } body{ color:#000; } }


/* --------------------------------------------------------------------------
   21. MOBILE REFINEMENTS
   -------------------------------------------------------------------------- */
.ico{ flex:0 0 auto; }
svg.art{ max-width:none; }
@media (max-width:1140px){
  .header__in{ min-height:66px; gap:var(--sp-3); }
  .header__cta{ gap:.5rem; margin-left:auto; }
}
@media (max-width:640px){
  .brand__mark{ width:34px; height:34px; flex:0 0 34px; }
  .brand__name{ font-size:.94rem; }
  .brand__tag{ font-size:.55rem; letter-spacing:.12em; }
  .header__cta .btn{ padding:.7rem .85rem; font-size:.72rem; white-space:nowrap; }
  .topbar__in{ min-height:34px; }
  .topbar__list{ gap:var(--sp-4); font-size:.66rem; }
  .hero__meta{ gap:.6rem var(--sp-4); }
  .hero__meta-item{ font-size:.8rem; }
  .btn-row .btn{ width:100%; }
  .panel3d__badge{ padding:.55rem .7rem; }
  .panel3d__badge b{ font-size:.8rem; }
  .panel3d__badge span{ font-size:.6rem; }
  .panel3d__badge--tl{ top:4%; left:3%; }
  .panel3d__badge--br{ bottom:5%; right:3%; }
  .trust__in{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem 1rem; }
  .trust__lead{ grid-column:1 / -1; }
  .trust__item{ font-size:.78rem; }
  .stat-row{ gap:var(--sp-4); }
  .faq__q{ font-size:var(--fs-base); padding:1.1rem 0; }
  .sidenav{ position:static; margin-bottom:var(--sp-6); }
  .gallery__cell{ min-height:190px; }
  .gallery__cell--tall{ min-height:240px; }
  .ctaband{ padding:1.6rem 1.25rem; }
  .footer__bottom{ flex-direction:column; align-items:flex-start; gap:.7rem; }
}
@media (max-width:420px){
  .header__cta .btn{ padding:.65rem .7rem; font-size:.68rem; }
}
.grid + .btn-row,.gallery + .btn-row,.timeline + .btn-row,.pill-grid + .btn-row{ margin-top:clamp(2rem,3vw,3.2rem); }

/* header stays above the mobile overlay so the close control is always reachable */
.is-menu-open .site-header{ background:var(--ink); border-bottom-color:rgba(255,255,255,.14); box-shadow:none; }
.is-menu-open .brand__name{ color:var(--white); }
.is-menu-open .burger{ border-color:rgba(255,255,255,.3); }
.is-menu-open .burger span::before,.is-menu-open .burger span::after{ background:var(--white); }
.is-menu-open .header__cta .btn--gold{ opacity:0; pointer-events:none; }

/* burger must beat the earlier base rule — declared last on purpose */
@media (max-width:1140px){
  .burger{ display:inline-flex !important; }
  .nav,.header__phone{ display:none !important; }
}
/* on mobile the sticky bar already carries Call — keep only WhatsApp floating */
@media (max-width:900px){
  .railcta .fab--tel{ display:none; }
  .railcta{ bottom:84px; right:12px; }
  .fab{ width:46px; height:46px; }
}
@media (max-width:400px){
  .trust__in{ grid-template-columns:1fr; }
}

/* nothing may push the viewport wider than itself */
html,body{ max-width:100%; overflow-x:clip; }
.section,.wrap,.hero,.footer__top,.gallery,.grid{ min-width:0; }
.table-wrap{ max-width:100%; }


/* --------------------------------------------------------------------------
   22. PHOTOGRAPHY SLOTS
   Real project photography drops straight into these. Until it arrives the
   slot renders generated art at the same aspect ratio, so nothing reflows.
   -------------------------------------------------------------------------- */
.shot{ position:relative; overflow:hidden; border-radius:var(--r-lg); background:var(--ink-2); isolation:isolate; }
.shot img{ width:100%; height:100%; object-fit:cover; display:block; }
.shot::after{ content:""; position:absolute; inset:0; pointer-events:none; background-image:var(--grain); background-size:180px 180px; opacity:.4; }
.shot--16x9{ aspect-ratio:16/9; } .shot--4x3{ aspect-ratio:4/3; }
.shot--3x2{ aspect-ratio:3/2; }  .shot--1x1{ aspect-ratio:1/1; }
.shot__cap{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:1.1rem 1.2rem;
  background:linear-gradient(180deg, transparent, rgba(10,12,13,.92)); color:#fff; font-size:var(--fs-sm); font-weight:560; }
.shot__cap span{ display:block; font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--champagne); font-weight:650; margin-bottom:.2rem; }

/* --------------------------------------------------------------------------
   23. CANADA COVERAGE MAP
   -------------------------------------------------------------------------- */
.camap{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,4vw,4rem); align-items:center; }
@media (max-width:900px){ .camap{ grid-template-columns:1fr; } }
.camap__fig{ position:relative; }
.camap__fig svg{ width:100%; height:auto; display:block; overflow:visible; }
.camap .prov{ fill:rgba(255,255,255,.045); stroke:rgba(255,255,255,.16); stroke-width:1.1; transition:fill .45s var(--ease), stroke .45s var(--ease); }
.camap .prov.is-core{ fill:rgba(26,122,63,.30); stroke:rgba(78,156,104,.55); }
.camap .prov:hover{ fill:rgba(26,122,63,.42); stroke:var(--champagne); cursor:default; }
.camap .pin{ fill:var(--champagne); }
.camap .pin--hq{ fill:#fff; }
.camap .ring{ fill:none; stroke:var(--champagne); stroke-opacity:.45; }
.camap__list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:.15rem .9rem; }
.camap__list li{ margin:0; padding:.42rem 0; font-size:var(--fs-sm); color:var(--steel-300); border-bottom:1px solid rgba(255,255,255,.07);
  display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
.camap__list b{ color:#fff; font-weight:560; }
.camap__list em{ font-style:normal; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--champagne); }
@media (max-width:520px){ .camap__list{ grid-template-columns:1fr; } }
.camap__note{ font-size:var(--fs-xs); color:var(--steel-500); margin-top:var(--sp-5); }

/* --------------------------------------------------------------------------
   24. INTERACTIVE INDUSTRY SELECTOR
   -------------------------------------------------------------------------- */
.isel{ display:grid; grid-template-columns:.28fr .72fr; gap:clamp(1.5rem,3vw,3rem); align-items:start; }
@media (max-width:860px){ .isel{ grid-template-columns:1fr; } }
.isel__tabs{ display:flex; flex-direction:column; gap:.2rem; border-left:1px solid var(--line); }
.section--dark .isel__tabs,.section--deep .isel__tabs{ border-color:rgba(255,255,255,.13); }
.isel__tab{ text-align:left; background:none; border:0; border-left:2px solid transparent; margin-left:-1px;
  padding:.72rem 0 .72rem 1rem; font-size:var(--fs-sm); font-weight:560; color:var(--fg-muted); cursor:pointer;
  display:flex; align-items:center; gap:.6rem; transition:all .3s var(--ease); }
.section--dark .isel__tab,.section--deep .isel__tab{ color:var(--steel-300); }
.isel__tab:hover{ color:var(--green-700); }
.section--dark .isel__tab:hover,.section--deep .isel__tab:hover{ color:var(--champagne); }
.isel__tab.is-on{ color:var(--green-800); border-left-color:var(--green-700); font-weight:640; }
.section--dark .isel__tab.is-on,.section--deep .isel__tab.is-on{ color:#fff; border-left-color:var(--champagne); }
.isel__panel{ display:none; }
.isel__panel.is-on{ display:block; animation:iselIn .5s var(--ease-out); }
@keyframes iselIn{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;} }
.isel__panel h3{ font-size:var(--fs-lg); margin-bottom:.6rem; }
.isel__panel .split{ grid-template-columns:1fr 1fr; align-items:start; }
@media (max-width:720px){ .isel__panel .split{ grid-template-columns:1fr; } }
.isel__panel .lede{ margin-bottom:var(--sp-5); }

/* --------------------------------------------------------------------------
   25. FILTERABLE PROJECT GALLERY
   -------------------------------------------------------------------------- */
.pfilter{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:clamp(1.6rem,2.4vw,2.4rem); }
.pfilter button{ padding:.5rem 1rem; border-radius:var(--r-pill); border:1px solid var(--line-strong); background:transparent;
  font-size:var(--fs-xs); font-weight:600; letter-spacing:.04em; cursor:pointer; transition:all .3s var(--ease); color:inherit; }
.section--dark .pfilter button,.section--deep .pfilter button{ border-color:rgba(255,255,255,.16); }
.pfilter button:hover{ border-color:var(--green-600); }
.pfilter button.is-on{ background:var(--green-800); border-color:var(--green-800); color:#fff; }
.section--dark .pfilter button.is-on,.section--deep .pfilter button.is-on{ background:var(--champagne); border-color:var(--champagne); color:var(--ink); }
.pgrid figure{ transition:opacity .4s var(--ease), transform .4s var(--ease-out); }
.pgrid figure.is-hidden{ display:none; }

/* --------------------------------------------------------------------------
   26. LOGO / CREDIBILITY WALL
   -------------------------------------------------------------------------- */
.logowall{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:1px; background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.09); border-radius:var(--r-md); overflow:hidden; }
@media (max-width:900px){ .logowall{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:480px){ .logowall{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.logowall__cell{ background:var(--ink-2); min-height:104px; display:grid; place-items:center; padding:1.2rem;
  transition:background .35s var(--ease); }
.logowall__cell:hover{ background:var(--ink-3); }
.logowall__cell img{ max-height:44px; width:auto; opacity:.82; filter:grayscale(1) brightness(1.7); transition:all .35s var(--ease); }
.logowall__cell:hover img{ opacity:1; filter:grayscale(0) brightness(1); }
.logowall__cell span{ font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; color:var(--steel-500); font-weight:600; text-align:center; }
.credline{ font-size:var(--fs-md); color:var(--steel-100); max-width:66ch; line-height:1.6; }
.section--dark .credline em,.section--deep .credline em{ font-style:normal; color:var(--champagne); }

/* --------------------------------------------------------------------------
   27. STICKY PRODUCT FEATURE PANEL
   -------------------------------------------------------------------------- */
.sticky-feat{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem,4vw,4.5rem); align-items:start; }
@media (max-width:900px){ .sticky-feat{ grid-template-columns:1fr; } }
.sticky-feat__media{ position:sticky; top:110px; }
@media (max-width:900px){ .sticky-feat__media{ position:static; } }
.sticky-feat__steps > * + *{ margin-top:clamp(2.4rem,4vw,4rem); }
.sticky-feat__step{ padding-left:1.4rem; border-left:2px solid var(--line); }
.section--dark .sticky-feat__step,.section--deep .sticky-feat__step{ border-color:rgba(255,255,255,.12); }
.sticky-feat__step.is-in{ border-left-color:var(--champagne); }
.sticky-feat__step h3{ font-size:var(--fs-md); margin-bottom:.45rem; }
.sticky-feat__step p{ font-size:var(--fs-sm); color:var(--fg-muted); margin:0; }
.section--dark .sticky-feat__step p,.section--deep .sticky-feat__step p{ color:var(--steel-300); }

/* --------------------------------------------------------------------------
   28. COUNTERS (verified figures only)
   -------------------------------------------------------------------------- */
.counter{ font-variant-numeric:tabular-nums; }

/* ==========================================================================
   29. POLISH PASS — depth, texture, accent discipline, editorial rhythm
   The brief: "premium, alive, not dull, not cluttered, not AI-looking."
   Everything below adds material presence without adding noise.
   ========================================================================== */

/* --- 29.1 Light sections get warmth and a hairline edge -------------------
   Stacked pure-white blocks are the single biggest cause of "dull". Light
   sections now carry a barely-there paper tone and a hairline top rule so
   the eye registers a boundary instead of one endless white sheet. */
.section:not(.section--dark):not(.section--deep){ position:relative; }
.section:not(.section--dark):not(.section--deep)::before{
  content:""; position:absolute; top:0; left:var(--gutter); right:var(--gutter); height:1px;
  background:linear-gradient(90deg, transparent, var(--line) 12%, var(--line) 88%, transparent);
  pointer-events:none;
}
.section--alt + .section--alt::before,
.section--dark + .section::before,
.section--deep + .section::before,
.hero + .section::before{ display:none; }
.section--alt{ background:linear-gradient(180deg, var(--ivory-2), #F7F4EE); }
.section--ivory{ background:linear-gradient(180deg, var(--ivory), #F1EDE4); }

/* --- 29.2 Dark → light transition edge ----------------------------------- */
.section--dark + .section:not(.section--dark):not(.section--deep),
.section--deep + .section:not(.section--dark):not(.section--deep){
  box-shadow:inset 0 14px 30px -18px rgba(10,12,13,.45);
}

/* --- 29.3 Buttons: real material, moving sheen ---------------------------- */
.btn--gold{
  --btn-bg:linear-gradient(160deg, #D3BC8A 0%, var(--champagne) 46%, #AD9257 100%);
  --btn-bd:rgba(255,255,255,.28); --btn-fg:#1A1408;
  box-shadow:0 1px 0 rgba(255,255,255,.34) inset, 0 1px 2px rgba(10,12,13,.16), 0 8px 20px rgba(143,119,66,.22);
  font-weight:640;
}
.btn--gold:hover{
  --btn-bg:linear-gradient(160deg, #DCC79B 0%, #CBB283 46%, #B79B60 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 3px 6px rgba(10,12,13,.18), 0 14px 32px rgba(143,119,66,.30);
}
.btn::after{
  background:linear-gradient(105deg, transparent 24%, rgba(255,255,255,.34) 46%, transparent 66%);
}
.btn--ghost{ backdrop-filter:blur(6px); }
.btn:focus-visible{ box-shadow:0 0 0 3px rgba(191,168,117,.45); }

/* --- 29.4 Cards: presence, corner accent, gradient edge on hover ---------- */
.card,.icard{ box-shadow:0 1px 2px rgba(10,12,13,.04); }
.card::after,.icard::after{
  content:""; position:absolute; top:0; left:0; width:0; height:2px;
  background:linear-gradient(90deg, var(--champagne), rgba(191,168,117,0));
  transition:width .55s var(--ease-out);
}
.icard{ position:relative; overflow:hidden; }
.card:hover::after,.icard:hover::after{ width:64%; }
.card:hover,.icard:hover{ box-shadow:var(--shadow-lg); }
.card--dark:hover{ border-color:rgba(191,168,117,.4); }

/* --- 29.5 Solution cards: editorial index + deeper reveal ----------------- */
.scard{ counter-increment:scard; }
.grid[data-stagger]{ counter-reset:scard; }
.scard::before{
  content:counter(scard, decimal-leading-zero);
  position:absolute; top:var(--sp-4); right:var(--sp-5); z-index:2;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.16em;
  color:rgba(255,255,255,.34); transition:color .4s var(--ease);
}
.scard:hover::before{ color:var(--champagne); }
.scard__art{ transform:scale(1.02); }
.scard:hover{ box-shadow:0 30px 64px rgba(0,0,0,.5), 0 4px 10px rgba(0,0,0,.4); }
.scard h3{ transition:transform .5s var(--ease-out); }
.scard:hover h3{ transform:translateY(-2px); }
.scard .link-arrow{ opacity:.72; transition:opacity .4s var(--ease), gap .3s var(--ease-out); }
.scard:hover .link-arrow{ opacity:1; }

/* --- 29.6 Section heads: editorial scale, gold rule ----------------------- */
.sec-head{ position:relative; }
.eyebrow::before{ width:34px; height:2px; background:var(--champagne); opacity:1; border-radius:1px; }
.section--dark .eyebrow::before,.section--deep .eyebrow::before{ background:var(--champagne); }
.sec-head h2{ letter-spacing:-.032em; }
.hero h1{ text-shadow:0 2px 30px rgba(0,0,0,.35); }

/* --- 29.7 Hero: vignette + edge light, so it reads photographic ----------- */
.hero__bg::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(120% 90% at 50% 40%, transparent 42%, rgba(0,0,0,.42) 100%);
}
.hero__in{ position:relative; z-index:1; }
.hero__meta{ border-top-color:rgba(191,168,117,.22); }
.hero__meta-item svg{ color:var(--champagne); }

/* --- 29.8 Image reveal: a wipe, not a fade ------------------------------- */
.shot,.panel3d__inner,.gallery__cell{
  clip-path:inset(0 0 0 0);
}
[data-anim="zoom"] .shot,[data-anim="zoom"] .panel3d__inner{
  transition:opacity .9s var(--ease-out), transform 1s var(--ease-out), clip-path 1.1s var(--ease-out);
}
[data-anim="zoom"]:not(.is-in) .shot,[data-anim="zoom"]:not(.is-in) .panel3d__inner{
  clip-path:inset(0 0 18% 0);
}
.shot img{ transition:transform 1.2s var(--ease-out); }
.shot:hover img{ transform:scale(1.03); }

/* --- 29.9 Feature list ticks: filled, not washed -------------------------- */
.feature-list .tick{
  background:linear-gradient(150deg, var(--green-700), var(--green-900));
  color:#fff; box-shadow:0 2px 6px rgba(7,38,22,.28);
}
.section--dark .feature-list .tick,.section--deep .feature-list .tick{
  background:linear-gradient(150deg, var(--champagne), var(--champagne-700)); color:var(--ink);
}

/* --- 29.10 Stats: display weight -------------------------------------- */
.stat{ border-left-width:3px; border-left-color:var(--champagne); }
.stat b{ font-size:var(--fs-2xl); letter-spacing:-.045em; color:var(--green-800); }
.section--dark .stat b,.section--deep .stat b{ color:var(--champagne); }

/* --- 29.11 Process timeline: gold progression ---------------------------- */
.tl-step.is-in .tl-step__num{
  background:linear-gradient(150deg, var(--green-700), var(--green-900));
  box-shadow:0 0 0 5px rgba(26,122,63,.10), 0 4px 12px rgba(7,38,22,.3);
}
.section--dark .tl-step.is-in .tl-step__num,.section--deep .tl-step.is-in .tl-step__num{
  background:linear-gradient(150deg, var(--champagne), var(--champagne-700)); color:var(--ink); border-color:transparent;
  box-shadow:0 0 0 5px rgba(191,168,117,.12);
}

/* --- 29.12 Form: premium instrument, easy to scan ------------------------ */
.formcard{ position:relative; overflow:hidden; }
.formcard::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--champagne), rgba(191,168,117,.15));
}
.formcard__head{ padding-bottom:var(--sp-4); border-bottom:1px solid var(--line); }
.section--dark .formcard__head,.section--deep .formcard__head{ border-bottom-color:rgba(255,255,255,.12); }
.formcard__brand{ display:flex; align-items:center; gap:.6rem; margin-bottom:var(--sp-4); }
.formcard__brand img{ height:30px; width:auto; }
.formcard__brand span{ font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--champagne); font-weight:650; }
.field input,.field select,.field textarea{ transition:border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease); }
.field input:hover,.field select:hover,.field textarea:hover{ border-color:var(--steel-500); }
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--champagne); box-shadow:0 0 0 3px rgba(191,168,117,.18);
}
.section--dark .field input:focus,.section--deep .field input:focus,
.section--dark .field select:focus,.section--deep .field select:focus,
.section--dark .field textarea:focus,.section--deep .field textarea:focus{ background:rgba(255,255,255,.09); }
.field select{ appearance:none; -webkit-appearance:none; padding-right:2.4rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%236E7982' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center; }
.field input[type=file]{ cursor:pointer; border-style:dashed; }
.field input[type=file]:hover{ border-color:var(--champagne); background:rgba(191,168,117,.05); }
.consent{ padding:.85rem 1rem; border:1px solid var(--line); border-radius:var(--r-sm); background:rgba(0,0,0,.015); }
.section--dark .consent,.section--deep .consent{ border-color:rgba(255,255,255,.12); background:rgba(255,255,255,.03); }

/* --- 29.13 CTA band: light sweep, stronger presence ---------------------- */
.ctaband{ border-color:rgba(191,168,117,.28); }
.ctaband::after{
  content:""; position:absolute; inset:0; z-index:-1; opacity:.5;
  background-image:var(--grain); background-size:180px 180px;
}
.ctaband h2{ letter-spacing:-.034em; }

/* --- 29.14 Sticky bars ---------------------------------------------------- */
.stickybar{ box-shadow:0 -8px 30px rgba(0,0,0,.42); }
.stickybar .btn--gold{ font-weight:660; }
.fab{ box-shadow:0 4px 10px rgba(0,0,0,.3), 0 14px 34px rgba(0,0,0,.28); }
.fab--wa{ background:linear-gradient(150deg, #2CE070, #17A34A); }
.fab--tel{ background:linear-gradient(150deg, var(--green-600), var(--green-900)); }

/* --- 29.15 Header: shrink on scroll ------------------------------------- */
.site-header .header__in{ transition:min-height .35s var(--ease); }
.site-header.is-stuck .header__in{ min-height:66px; }
.site-header .brand__mark{ transition:height .35s var(--ease); }
.site-header.is-stuck .brand__tag{ opacity:0; transition:opacity .25s var(--ease); }
.brand__tag{ transition:opacity .3s var(--ease); }

/* --- 29.16 Mobile menu brand + coverage line ---------------------------- */
.mobile-nav__brand{ margin-bottom:var(--sp-5); padding-bottom:var(--sp-5); border-bottom:1px solid rgba(255,255,255,.1); }
.mobile-nav__nap{ margin-top:var(--sp-6); color:var(--steel-500); }
.mobile-nav__cov{ display:inline-block; margin-top:.5rem; font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--champagne); font-weight:650; }

/* --- 29.17 Pills, tags, links ------------------------------------------- */
.pill{ box-shadow:0 1px 2px rgba(10,12,13,.03); }
.pill:hover{ border-color:var(--champagne); color:var(--green-800); }
.tag{ background:linear-gradient(150deg, rgba(26,122,63,.14), rgba(26,122,63,.06)); color:var(--green-700); }
.link-arrow::after{ content:""; }

/* --- 29.18 Prose: readable, with rhythm ---------------------------------- */
.prose h3{ position:relative; padding-left:1rem; }
.prose h3::before{
  content:""; position:absolute; left:0; top:.32em; bottom:.24em; width:3px; border-radius:2px;
  background:linear-gradient(180deg, var(--champagne), rgba(191,168,117,.2));
}
.prose a{ color:var(--green-700); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px;
  text-decoration-color:rgba(26,122,63,.34); transition:all .25s var(--ease); }
.prose a:hover{ color:var(--green-800); text-decoration-color:var(--champagne); }
.section--dark .prose a,.section--deep .prose a{ color:var(--champagne-200); text-decoration-color:rgba(191,168,117,.4); }
.prose table{ width:100%; border-collapse:collapse; font-size:var(--fs-sm); margin:1.6em 0; }
.prose th,.prose td{ text-align:left; padding:.8rem 1rem; border-bottom:1px solid var(--line); }
.prose th{ font-weight:640; background:var(--ivory-2); }

/* --- 29.19 FAQ ----------------------------------------------------------- */
.faq__item{ transition:background .35s var(--ease); }
.faq__item.is-open{ background:linear-gradient(90deg, rgba(191,168,117,.05), transparent 60%); }
.faq__q:hover .faq__ico{ border-color:var(--champagne); color:var(--champagne-700); }

/* --- 29.20 Gallery + credibility ---------------------------------------- */
.gallery__cell{ box-shadow:0 2px 6px rgba(0,0,0,.2); transition:transform .55s var(--ease-out), box-shadow .55s var(--ease-out); }
.gallery__cell:hover{ transform:translateY(-4px); box-shadow:0 20px 44px rgba(0,0,0,.34); }
.logowall__cell{ position:relative; }
.logowall__cell::after{ content:""; position:absolute; inset:0; background-image:var(--grain); background-size:180px 180px; opacity:.3; pointer-events:none; }

/* --- 29.21 Trust strip: give it weight ---------------------------------- */
.trust{ background:linear-gradient(180deg, var(--ink-2), var(--ink)); border-bottom:1px solid rgba(191,168,117,.16); }
.trust__item{ color:var(--steel-100); }
.trust__item svg{ color:var(--champagne); }

/* --- 29.22 Footer polish ------------------------------------------------- */
.site-footer{ border-top:2px solid var(--champagne); position:relative; }
.site-footer::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.4;
  background-image:var(--grain); background-size:180px 180px;
}
.site-footer > .wrap{ position:relative; }
.footer__brandcol .brand{ display:inline-flex; }

/* --- 29.23 Mobile: app-grade spacing and touch targets ------------------- */
@media (max-width:640px){
  .btn{ min-height:48px; }
  .field input,.field select,.field textarea{ min-height:48px; font-size:16px; } /* 16px stops iOS zoom */
  .faq__q{ min-height:52px; }
  .sec-head{ margin-bottom:1.8rem; }
  .formcard{ padding:1.3rem 1.15rem; }
  .stickybar__in{ gap:.5rem; }
  .stickybar .btn{ min-height:46px; font-size:.82rem; font-weight:640; }
  .scard{ min-height:300px; }
  .scard::before{ top:.9rem; right:1rem; }
  .prose h3{ padding-left:.8rem; }
  .camap__note,.form-note{ font-size:.76rem; }
}
@media (min-width:641px) and (max-width:1024px){
  .split{ gap:2rem; }
  .g-4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .camap{ grid-template-columns:1fr; }
  .isel{ grid-template-columns:1fr; }
  .isel__tabs{ flex-direction:row; flex-wrap:wrap; border-left:0; border-bottom:1px solid var(--line); }
  .isel__tab{ border-left:0; border-bottom:2px solid transparent; padding:.7rem .9rem; margin-left:0; }
  .isel__tab.is-on{ border-bottom-color:var(--green-700); }
  .section--dark .isel__tab.is-on,.section--deep .isel__tab.is-on{ border-bottom-color:var(--champagne); }
}

/* --- 29.24 Form card brand mark: light/dark aware ------------------------ */
.formcard__logo-dark{ display:none; }
.section--dark .formcard__logo-light,.section--deep .formcard__logo-light{ display:none; }
.section--dark .formcard__logo-dark,.section--deep .formcard__logo-dark{ display:block; }
.form-msg--ok .btn{ margin-top:.4rem; }
.form-msg--ok strong{ font-size:var(--fs-md); display:inline-block; margin-bottom:.2rem; }

/* --- 29.25 Solution cards: lift the art out of the murk ------------------
   The scrim was drowning the scene art on dark sections. Brighten the art,
   pull the scrim down the card, and add an edge highlight so each card
   separates from the section behind it. */
.scard{
  background:linear-gradient(160deg, #1E262A 0%, #12181A 58%, #0C1012 100%);
  border-color:rgba(255,255,255,.13);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 10px 26px rgba(0,0,0,.34);
}
.scard__art{ opacity:1; filter:brightness(1.5) contrast(1.06) saturate(1.05); }
.scard:hover .scard__art{ filter:brightness(1.68) contrast(1.08) saturate(1.1); }
.scard__scrim{
  background:linear-gradient(180deg,
    rgba(10,12,13,0) 0%,
    rgba(10,12,13,.16) 34%,
    rgba(10,12,13,.74) 62%,
    rgba(10,12,13,.96) 100%);
}
.scard:hover{ border-color:rgba(191,168,117,.45); }
.scard__tag{ background:rgba(10,12,13,.68); }

/* Same lift wherever scene art sits behind copy */
.gallery__cell .art{ filter:brightness(1.42) contrast(1.05); }
.gallery__cell{ background:#12181A; }
.shot .art{ filter:brightness(1.34) contrast(1.04); }
.panel3d__inner .art{ filter:brightness(1.22) contrast(1.03); }
.postcard__art .art{ filter:brightness(1.4); }
/* --- 29.26 Article sidebar ---------------------------------------------- */
.article-aside{ position:sticky; top:104px; }
@media (max-width:900px){ .article-aside{ position:static; } }

/* --- 29.27 Micro-label legibility floor ----------------------------------
   Uppercase wide-tracked labels are a design device, but below ~10.5px they
   stop being legible and start looking cheap. Floor them. */
.brand__tag{ font-size:.66rem; letter-spacing:.17em; }
@media (max-width:640px){ .brand__tag{ font-size:.62rem; letter-spacing:.14em; } }
.panel3d__badge span{ font-size:.7rem; }
.scard__tag{ font-size:.68rem; }
.logowall__cell span{ font-size:.7rem; line-height:1.35; }
.gallery__cell figcaption span,.shot__cap span{ font-size:.69rem; }
.postcard__meta{ font-size:.7rem; }
.tag{ font-size:.7rem; }
.camap__list em{ font-size:.7rem; }
.mobile-nav__cov{ font-size:.66rem; }
.formcard__brand span{ font-size:.66rem; }
.fab__tip{ font-size:.76rem; }

/* --- 29.28 Logo: intrinsic 3x assets, CSS-scaled, aspect locked ---------- */
/* Both dimensions are fixed in CSS so the box is reserved before decode.
   Ratios match the source files exactly (mark 132:202, wordmark 390:64). */
.brand__mark{ width:27.4px;  height:42px; object-fit:contain; }
.brand__word{ width:109.7px; height:18px; object-fit:contain; }
.site-footer .brand__mark{ width:31.4px;  height:48px; }
.site-footer .brand__word{ width:128px;   height:21px; }
.mobile-nav .brand__mark{ width:30.1px;   height:46px; }
.mobile-nav .brand__word{ width:121.9px;  height:20px; }
.site-header.is-stuck .brand__mark{ width:22.2px; height:34px; }
@media (max-width:640px){
  .brand__mark{ width:23.5px; height:36px; }
  .brand__word{ width:91.4px; height:15px; }
}

/* --- 29.29 Stop the flex column stretching the wordmark ------------------ */
.brand__txt{ align-items:flex-start; }
.brand__mark,.brand__word{ align-self:flex-start; flex:0 0 auto; max-width:none; }

/* --- 29.30 Brand lockup: fixed box, immune to font swap ------------------
   The tagline is set in Inter 700. Until that face lands the fallback metrics
   differ, which resized the brand block and shifted the whole header
   horizontally (measured CLS 0.219). Fixing the column width removes the
   dependency entirely — the tagline can swap without moving anything. */
.brand__txt{ width:132px; }
.brand__tag{ white-space:nowrap; overflow:hidden; text-overflow:clip; display:block; line-height:1.1; }
.site-footer .brand__txt{ width:152px; }
.mobile-nav .brand__txt{ width:146px; }
@media (max-width:640px){ .brand__txt{ width:114px; } }
@media (max-width:414px){ .header__cta .btn{ padding:.66rem .72rem; font-size:.7rem; } }
@media (max-width:374px){ .brand__txt{ display:none; } }
.cta-short{ display:none; }
@media (max-width:414px){ .cta-long{ display:none; } .cta-short{ display:inline; } }

/* ==========================================================================
   30. CREATIVE LAYER — mascot, cinematic hero, builder, journey, frost
   --------------------------------------------------------------------------
   Rules this section holds itself to:
   · nothing here animates layout properties (only transform / opacity / filter)
   · every motion has a prefers-reduced-motion resting state that is the
     finished frame, never a blank one
   · no decoration that does not sit next to a call to action
   ========================================================================== */

/* --- 30.1 Mascot ---------------------------------------------------------- */
.bear{ display:block; width:100%; height:auto; }
.bear__led{ animation:bearLed 4.6s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
@keyframes bearLed{ 0%,100%{ opacity:.55 } 50%{ opacity:1 } }

.bear__head{ transform-box:fill-box; transform-origin:50% 88%; }
.bear--cta .bear__head{ animation:bearBob 7s ease-in-out infinite; }
@keyframes bearBob{ 0%,100%{ transform:translateY(0) rotate(0deg) } 50%{ transform:translateY(-6px) rotate(-1.1deg) } }

.bear--cta .bear__arm{ transform-box:fill-box; transform-origin:6% 62%; animation:bearPoint 7s ease-in-out infinite; }
@keyframes bearPoint{ 0%,100%{ transform:rotate(0deg) } 42%{ transform:rotate(-7deg) } 58%{ transform:rotate(-5deg) } }

.bear__breath{ transform-box:fill-box; transform-origin:center; animation:bearBreath 5.2s ease-in-out infinite; }
@keyframes bearBreath{ 0%,100%{ opacity:.18; transform:translateY(0) scale(.9) } 50%{ opacity:.55; transform:translateY(10px) scale(1.18) } }

.bear__frost circle{ animation:bearSparkle 5s ease-in-out infinite; }
.bear__frost circle:nth-child(2n){ animation-delay:1.1s }
.bear__frost circle:nth-child(3n){ animation-delay:2.3s }
@keyframes bearSparkle{ 0%,100%{ opacity:.25 } 50%{ opacity:1 } }

/* --- 30.2 Cinematic hero scene -------------------------------------------- */
.hscene{
  position:relative; border-radius:var(--r-lg,18px); overflow:hidden;
  background:linear-gradient(160deg,#0A1712,#040A08);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.75), inset 0 0 0 1px rgba(159,176,182,.16);
  aspect-ratio:508/486;
}
.hscene__svg,.hscene__video{ display:block; width:100%; height:100%; object-fit:cover; }
.hscene::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:var(--grain); opacity:.5; mix-blend-mode:overlay;
}

/* Doors: hinged at the outer edge, swinging toward the viewer. */
.hscene__door{ transform-box:fill-box; backface-visibility:hidden; }
.hscene__door--l{ transform-origin:0% 50%; }
.hscene__door--r{ transform-origin:100% 50%; }
[data-hero-scene].is-live .hscene__door--l{ animation:doorL 1500ms cubic-bezier(.22,.85,.24,1) 480ms both; }
[data-hero-scene].is-live .hscene__door--r{ animation:doorR 1500ms cubic-bezier(.22,.85,.24,1) 560ms both; }
@keyframes doorL{ from{ transform:perspective(1400px) rotateY(0deg) } to{ transform:perspective(1400px) rotateY(-74deg) } }
@keyframes doorR{ from{ transform:perspective(1400px) rotateY(0deg) } to{ transform:perspective(1400px) rotateY(74deg) } }

.hscene__unit{ transform-box:fill-box; transform-origin:50% 60%; }
[data-hero-scene].is-live .hscene__unit{ animation:unitIn 1100ms cubic-bezier(.16,1,.3,1) both; }
@keyframes unitIn{ from{ transform:scale(.94) translateY(18px); opacity:0 } to{ transform:none; opacity:1 } }

.hscene__interior-glow{ opacity:0; }
[data-hero-scene].is-live .hscene__interior-glow{ animation:glowUp 1400ms ease-out 900ms both; }
@keyframes glowUp{ from{ opacity:0 } to{ opacity:1 } }

.hscene__roll{ transform-box:fill-box; transform-origin:50% 0%; }
[data-hero-scene].is-live .hscene__roll{ animation:rollOut 2600ms cubic-bezier(.2,.7,.3,1) 1150ms both, rollDrift 11s ease-in-out 3.6s infinite; }
@keyframes rollOut{ 0%{ opacity:0; transform:translateY(-26px) scaleX(.55) } 40%{ opacity:.85 } 100%{ opacity:.5; transform:translateY(6px) scaleX(1) } }
@keyframes rollDrift{ 0%,100%{ transform:translateY(6px) scaleX(1) } 50%{ transform:translateY(-4px) scaleX(1.05) } }

.hscene__vapour{ transform-box:fill-box; animation:vapourDrift 9s ease-in-out infinite; }
@keyframes vapourDrift{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-12px) } }

.hscene__bear{ opacity:0; transform-box:fill-box; transform-origin:50% 100%; }
[data-hero-scene].is-live .hscene__bear{ animation:bearIn 1200ms cubic-bezier(.16,1,.3,1) 1500ms both; }
@keyframes bearIn{ from{ opacity:0; transform:translateY(30px) } to{ opacity:1; transform:none } }

.hscene__spill{ opacity:0; }
[data-hero-scene].is-live .hscene__spill{ animation:glowUp 1600ms ease-out 1100ms both; }
.hscene__led{ animation:bearLed 3s ease-in-out infinite; }
.hscene__refl{ animation:bearLed 6s ease-in-out infinite; }

/* Floating spec chips */
.hscene__chip{
  position:absolute; z-index:3; padding:.7rem .95rem; border-radius:12px;
  background:rgba(10,18,15,.72); backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  border:1px solid rgba(191,168,117,.28);
  box-shadow:0 18px 40px -18px rgba(0,0,0,.8);
  opacity:0; transform:translateY(10px);
}
.hscene__chip b{ display:block; color:#fff; font-size:.86rem; font-weight:700; letter-spacing:-.01em; }
.hscene__chip span{ display:block; color:var(--champagne-300); font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; margin-top:.15rem; }
.hscene__chip--tl{ top:5%; left:2.5%; }
.hscene__chip--br{ right:2.5%; bottom:6%; }
[data-hero-scene].is-live .hscene__chip--tl{ animation:chipIn 800ms cubic-bezier(.16,1,.3,1) 1900ms both; }
[data-hero-scene].is-live .hscene__chip--br{ animation:chipIn 800ms cubic-bezier(.16,1,.3,1) 2150ms both; }
@keyframes chipIn{ to{ opacity:1; transform:none } }

/* Resting state for no-JS and reduced motion: the finished frame, not a blank one. */
[data-hero-scene]:not(.is-live) .hscene__door--l{ transform:perspective(1400px) rotateY(-74deg); }
[data-hero-scene]:not(.is-live) .hscene__door--r{ transform:perspective(1400px) rotateY(74deg); }
[data-hero-scene]:not(.is-live) .hscene__interior-glow,
[data-hero-scene]:not(.is-live) .hscene__spill,
[data-hero-scene]:not(.is-live) .hscene__bear{ opacity:1; }
[data-hero-scene]:not(.is-live) .hscene__roll{ opacity:.5; }
[data-hero-scene]:not(.is-live) .hscene__chip{ opacity:1; transform:none; }

/* --- 30.3 Frosted glass / brushed metal surfaces --------------------------- */
.shot--frosted{ position:relative; }
.shot--frosted::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:
    linear-gradient(180deg,rgba(190,230,247,.10),transparent 42%),
    radial-gradient(120% 60% at 50% 108%,rgba(190,230,247,.22),transparent 70%);
  box-shadow:inset 0 0 0 1px rgba(190,230,247,.16);
}
.shot--metal{ position:relative; }
.shot--metal::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:linear-gradient(105deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,0) 22%,rgba(255,255,255,.09) 46%,rgba(255,255,255,0) 68%,rgba(255,255,255,.12) 100%);
  mix-blend-mode:overlay;
}
.frost-edge{ position:relative; }
.frost-edge::before{
  content:""; position:absolute; inset:auto 0 0 0; height:38%; pointer-events:none;
  background:linear-gradient(0deg,rgba(190,230,247,.20),transparent);
  filter:blur(12px);
}

/* --- 30.4 Cooler builder --------------------------------------------------- */
.section--builder{ position:relative; overflow:hidden; }
.builder{ display:grid; grid-template-columns:minmax(240px,320px) 1fr; gap:clamp(1.25rem,2.4vw,2.75rem); align-items:start; }
.builder__rail{ display:flex; flex-direction:column; gap:.55rem; position:sticky; top:110px; }
.builder__tab{
  display:flex; align-items:center; gap:.85rem; width:100%; text-align:left; cursor:pointer;
  padding:.95rem 1rem; border-radius:14px; border:1px solid var(--line);
  background:rgba(255,255,255,.55); color:var(--fg);
  transition:border-color .28s, background .28s, transform .28s, box-shadow .28s;
}
.section--dark .builder__tab,.section--deep .builder__tab{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12); color:#fff; }
.builder__tab:hover{ transform:translateX(4px); border-color:var(--champagne); }
.builder__tab.is-on{
  background:linear-gradient(120deg,var(--green-800),var(--green-900));
  border-color:var(--champagne); color:#fff;
  box-shadow:0 18px 38px -20px rgba(12,58,33,.85);
}
.builder__tab-ico{ display:grid; place-items:center; width:40px; height:40px; flex:0 0 auto; border-radius:10px; background:rgba(0,130,0,.12); color:var(--brand); transition:background .28s,color .28s; }
.builder__tab.is-on .builder__tab-ico{ background:rgba(191,168,117,.18); color:var(--champagne-200); }
.builder__tab-txt{ flex:1 1 auto; min-width:0; }
.builder__tab-txt b{ display:block; font-size:.98rem; font-weight:650; letter-spacing:-.01em; }
.builder__tab-txt i{ display:block; font-style:normal; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; opacity:.62; margin-top:.12rem; }
.builder__tab-go{ opacity:0; transform:translateX(-6px); transition:opacity .28s,transform .28s; }
.builder__tab.is-on .builder__tab-go{ opacity:1; transform:none; color:var(--champagne); }

.builder__stage{ position:relative; min-height:420px; }
.builder__panel{ display:none; grid-template-columns:1fr 1fr; gap:clamp(1.15rem,2vw,2.1rem); align-items:center; }
.builder__panel.is-on{ display:grid; animation:panelIn 620ms cubic-bezier(.16,1,.3,1) both; }
@keyframes panelIn{ from{ opacity:0; transform:translateY(16px) } to{ opacity:1; transform:none } }
.builder__viz{ position:relative; border-radius:16px; overflow:hidden; }
.builder__stamp{
  position:absolute; left:.85rem; bottom:.85rem; z-index:2;
  padding:.4rem .7rem; border-radius:99px; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  background:rgba(10,18,15,.72); color:var(--champagne-200); border:1px solid rgba(191,168,117,.3);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.builder__meat h3{ font-size:var(--fs-xl); margin:0 0 .55rem; letter-spacing:-.02em; }
.builder__meat p{ color:var(--fg-muted); margin:0 0 1.1rem; }
.section--dark .builder__meat p,.section--deep .builder__meat p{ color:rgba(255,255,255,.72); }
.builder__specs{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; margin:0 0 1.15rem; }
.builder__specs div{ padding:.7rem .8rem; border-radius:10px; background:rgba(12,58,33,.06); border:1px solid var(--line); }
.section--dark .builder__specs div,.section--deep .builder__specs div{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.1); }
.builder__specs dt{ font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; opacity:.6; }
.builder__specs dd{ margin:.2rem 0 0; font-weight:650; font-size:.94rem; }
.builder__points{ list-style:none; padding:0; margin:0 0 1.35rem; display:grid; gap:.5rem; }
.builder__points li{ display:flex; align-items:flex-start; gap:.55rem; font-size:.94rem; }
.builder__points svg{ flex:0 0 auto; margin-top:.18rem; color:var(--brand); }
.section--dark .builder__points svg,.section--deep .builder__points svg{ color:var(--champagne); }

@media (max-width:960px){
  .builder{ grid-template-columns:1fr; }
  .builder__rail{ position:static; flex-direction:row; overflow-x:auto; padding-bottom:.4rem; scrollbar-width:none; }
  .builder__rail::-webkit-scrollbar{ display:none; }
  .builder__tab{ flex:0 0 auto; width:auto; }
  .builder__tab-txt i{ display:none; }
  .builder__tab-go{ display:none; }
  .builder__tab:hover{ transform:none; }
  .builder__panel.is-on{ grid-template-columns:1fr; }
  .builder__stage{ min-height:0; }
}

/* --- 30.5 Scroll journey --------------------------------------------------- */
.section--journey{ position:relative; }
.journey{ position:relative; padding-left:clamp(2rem,4vw,3.5rem); }
.journey__line{ position:absolute; left:clamp(.65rem,1.4vw,1.2rem); top:.6rem; bottom:.6rem; width:2px; background:var(--line-strong); border-radius:2px; overflow:hidden; }
.section--dark .journey__line,.section--deep .journey__line{ background:rgba(255,255,255,.14); }
.journey__fill{ display:block; width:100%; height:0%; background:linear-gradient(180deg,var(--champagne),var(--brand)); transition:height .18s linear; }
.journey__list{ list-style:none; margin:0; padding:0; display:grid; gap:clamp(.75rem,1.6vw,1.15rem); counter-reset:j; }
.journey__step{ position:relative; opacity:.42; transform:translateY(10px); transition:opacity .5s, transform .5s; }
.journey__step.is-in{ opacity:1; transform:none; }
/* The badge belongs to the card, not to the rail — anchoring it to the rail
   only lines up for the first column and left the even-numbered steps
   floating inside their own cards at two columns wide. */
.journey__num{
  position:absolute; left:-13px; top:-12px; z-index:2;
  width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
  font-size:.66rem; font-weight:700; letter-spacing:.02em; font-variant-numeric:tabular-nums;
  background:var(--bg); color:var(--fg-muted); border:2px solid var(--line-strong); transition:.45s;
}
.section--dark .journey__num,.section--deep .journey__num{ background:var(--green-950); color:rgba(255,255,255,.6); border-color:rgba(255,255,255,.18); }
.journey__step.is-in .journey__num{ background:var(--brand); border-color:var(--brand); color:#fff; }
.journey__card{
  display:grid; grid-template-columns:auto 1fr; gap:.35rem 1rem; align-items:start;
  padding:1.05rem 1.25rem; border-radius:14px; border:1px solid var(--line);
  background:rgba(255,255,255,.55); transition:border-color .45s, transform .45s, box-shadow .45s;
}
.section--dark .journey__card,.section--deep .journey__card{ background:rgba(255,255,255,.045); border-color:rgba(255,255,255,.1); }
.journey__step.is-in .journey__card{ border-color:rgba(191,168,117,.42); box-shadow:0 16px 40px -26px rgba(0,0,0,.6); }
.journey__ico{ grid-row:1 / span 2; display:grid; place-items:center; width:42px; height:42px; border-radius:11px; background:rgba(0,130,0,.10); color:var(--brand); }
.section--dark .journey__ico,.section--deep .journey__ico{ background:rgba(191,168,117,.14); color:var(--champagne); }
.journey__card h3{ margin:0; font-size:1.02rem; letter-spacing:-.01em; }
.journey__card p{ margin:.2rem 0 0; font-size:.9rem; color:var(--fg-muted); }
.section--dark .journey__card p,.section--deep .journey__card p{ color:rgba(255,255,255,.68); }

@media (min-width:900px){
  .journey__list{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:1.15rem; }
  .journey__step:nth-child(odd){ grid-column:1; }
  .journey__step:nth-child(even){ grid-column:2; }
}

/* --- 30.6 Mascot conversion band ------------------------------------------- */
.section--bearcta{ position:relative; overflow:hidden; }
.bearcta{ display:grid; grid-template-columns:minmax(200px,300px) 1fr; gap:clamp(1.5rem,3vw,3.5rem); align-items:center; }
.bearcta__art{ position:relative; }
.bearcta__frost{
  position:absolute; inset:-18% -14% -8%; border-radius:50%;
  background:radial-gradient(circle at 50% 55%,rgba(190,230,247,.20),transparent 68%);
  filter:blur(8px);
}
.bear--cta{ position:relative; filter:drop-shadow(0 26px 40px rgba(0,0,0,.45)); }
.bearcta__points{ list-style:none; padding:0; margin:0 0 1.5rem; display:grid; gap:.55rem; }
.bearcta__points li{ display:flex; align-items:flex-start; gap:.6rem; font-size:.98rem; }
.bearcta__points svg{ flex:0 0 auto; margin-top:.2rem; color:var(--champagne); }
@media (max-width:760px){
  .bearcta{ grid-template-columns:1fr; text-align:left; }
  .bearcta__art{ max-width:190px; }
}

/* --- 30.7 Detail strip ------------------------------------------------------ */
.detail{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:clamp(.9rem,1.8vw,1.5rem); }
.detail__cell{ margin:0; border-radius:14px; overflow:hidden; border:1px solid var(--line); background:rgba(255,255,255,.04); }
.detail__cell figcaption{ padding:.9rem 1rem 1.05rem; display:block; }
.detail__cell figcaption b{ display:block; font-size:.95rem; letter-spacing:-.01em; }
.detail__cell figcaption span{ display:block; font-size:.82rem; color:var(--fg-muted); margin-top:.2rem; }
.section--dark .detail__cell figcaption span,.section--deep .detail__cell figcaption span{ color:rgba(255,255,255,.66); }
.detail__cell:hover{ border-color:rgba(191,168,117,.4); }

/* --- 30.8 Desktop side quote tab -------------------------------------------- */
.sidetab{
  position:fixed; right:0; top:50%; z-index:930; display:none;
  transform:translateY(-50%) translateX(100%);
  transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.sidetab.is-on{ transform:translateY(-50%) translateX(0); }
.sidetab a{
  display:flex; align-items:center; gap:.5rem; padding:.85rem 1rem;
  writing-mode:vertical-rl; text-orientation:mixed;
  background:linear-gradient(180deg,var(--champagne),var(--champagne-700));
  color:#1B1405; font-weight:700; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase;
  border-radius:12px 0 0 12px; text-decoration:none;
  box-shadow:0 14px 34px -14px rgba(0,0,0,.6);
  transition:filter .25s, padding .25s;
}
.sidetab a:hover{ filter:brightness(1.08); padding-right:1.25rem; }
.sidetab svg{ transform:rotate(90deg); }
@media (min-width:1100px){ .sidetab{ display:block; } }

/* Mobile sticky bar — three actions, equal weight */
.stickybar__in{ gap:.5rem; }
.stickybar .btn{ flex:1 1 0; min-width:0; justify-content:center; }
.stickybar__wa{ background:#1FA855 !important; border-color:#1FA855 !important; color:#fff !important; }

/* Frosted bear on the floating action rail */
/* The fur uses currentColor and the eyewear is fixed #0B1012, so a light chip
   made the whole icon one dark blob. Dark chip, white fur, dark shades. */
.fab--bear{ background:linear-gradient(150deg,#123524,#08170F) !important; color:#FFFFFF !important;
  border:1px solid rgba(191,168,117,.34) !important; }
.fab--bear .bear{ width:27px; height:27px; }

/* --- 30.9 Reduced motion ----------------------------------------------------
   Everything above resolves to its finished frame. No one loses information. */
@media (prefers-reduced-motion:reduce){
  .bear__led,.bear--cta .bear__head,.bear--cta .bear__arm,.bear__breath,.bear__frost circle,
  .hscene__vapour,.hscene__led,.hscene__refl{ animation:none !important; }
  [data-hero-scene].is-live .hscene__door--l{ animation:none !important; transform:perspective(1400px) rotateY(-74deg); }
  [data-hero-scene].is-live .hscene__door--r{ animation:none !important; transform:perspective(1400px) rotateY(74deg); }
  [data-hero-scene].is-live .hscene__unit,
  [data-hero-scene].is-live .hscene__interior-glow,
  [data-hero-scene].is-live .hscene__spill,
  [data-hero-scene].is-live .hscene__bear,
  [data-hero-scene].is-live .hscene__roll,
  [data-hero-scene].is-live .hscene__chip{ animation:none !important; opacity:1; transform:none; }
  [data-hero-scene].is-live .hscene__roll{ opacity:.5; }
  .builder__panel.is-on{ animation:none !important; }
  .journey__step{ opacity:1; transform:none; }
  .journey__fill{ transition:none; }
  .sidetab{ transition:none; }
}

/* --- 30.10 Mobile: simplify the hero for performance ------------------------
   The turbulence filters are the expensive part. Below 720px the vapour layers
   come out entirely and the doors resolve without the 3D perspective pass. */
@media (max-width:720px){
  .hscene__roll,.hscene__vapour{ display:none; }
  .hscene__chip--tl{ top:6%; left:3%; }
  .hscene__chip--br{ right:3%; bottom:7%; }
  .hscene__chip b{ font-size:.76rem; }
  .hscene__chip span{ font-size:.58rem; }
  [data-hero-scene].is-live .hscene__door--l,
  [data-hero-scene]:not(.is-live) .hscene__door--l{ transform:translateX(-46%) scaleX(.5); }
  [data-hero-scene].is-live .hscene__door--r,
  [data-hero-scene]:not(.is-live) .hscene__door--r{ transform:translateX(46%) scaleX(.5); }
  [data-hero-scene].is-live .hscene__door--l{ animation:doorLm 1200ms cubic-bezier(.22,.85,.24,1) 420ms both; }
  [data-hero-scene].is-live .hscene__door--r{ animation:doorRm 1200ms cubic-bezier(.22,.85,.24,1) 480ms both; }
  @keyframes doorLm{ from{ transform:none } to{ transform:translateX(-46%) scaleX(.5) } }
  @keyframes doorRm{ from{ transform:none } to{ transform:translateX(46%) scaleX(.5) } }
}

/* --- 30.11 Hero stage (homepage) ------------------------------------------ */
.hero__stage{ position:relative; }
.hero__stage .hscene{ width:100%; }

/* --- 30.12 404 empty cooler ------------------------------------------------ */
.emptybox{
  position:relative; border-radius:18px; overflow:hidden;
  background:linear-gradient(170deg,#16232A,#080F12);
  box-shadow:inset 0 0 0 1px rgba(159,176,182,.2), 0 40px 80px -34px rgba(0,0,0,.8);
  aspect-ratio:5/4;
}
.emptybox__inner{ position:absolute; inset:8%; border-radius:10px; background:linear-gradient(180deg,#20323A,#0B171C); box-shadow:inset 0 0 60px rgba(0,0,0,.6); overflow:hidden; }
.emptybox__inner::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(70% 40% at 50% 0%,rgba(190,230,247,.28),transparent 70%);
}
.emptybox__shelf{ position:absolute; left:7%; right:7%; height:5px; border-radius:3px; background:rgba(190,230,247,.16); }
.emptybox__shelf:nth-child(1){ top:24%; }
.emptybox__shelf:nth-child(2){ top:44%; }
.emptybox__shelf:nth-child(3){ top:64%; }
.bear--404{ position:absolute; left:50%; bottom:0; width:56%; transform:translateX(-50%); z-index:2; }
.emptybox__temp{
  position:absolute; right:6%; top:6%; z-index:3; display:inline-flex; align-items:center; gap:.4rem;
  padding:.4rem .7rem; border-radius:99px; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  background:rgba(8,15,18,.8); color:#BEE6F7; border:1px solid rgba(190,230,247,.28);
}

/* --- 30.13 Thank-you state ------------------------------------------------- */
.thanks{ display:grid; grid-template-columns:88px 1fr; gap:1rem; align-items:center; }
.thanks__bear{ width:88px; }
.bear--thanks{ width:100%; filter:drop-shadow(0 10px 18px rgba(0,0,0,.35)); }
@media (max-width:520px){ .thanks{ grid-template-columns:1fr; } .thanks__bear{ width:74px; } }

/* --- 30.14 Spacing corrections found in review ----------------------------- */
.bearcta .prose{ margin-bottom:1.15rem; }
.bearcta .sec-head{ margin-bottom:1rem; }
.journey .btn-row{ margin-top:clamp(1.5rem,2.5vw,2.25rem); }
.section--detail .detail{ margin-top:.5rem; }

/* --- 30.15 Success state on a dark form card -------------------------------
   .form-msg--ok was written for the ivory card and set near-black green text.
   Dropped onto the dark quote card it rendered dark-on-dark (measured 1.6:1).
   Scoped light treatment brings it to 9.7:1. */
.formcard .form-msg--ok{
  background:rgba(80,200,130,.10);
  border-color:rgba(120,220,160,.34);
  color:#DFF6E8;
}
.formcard .form-msg--ok strong{ color:#FFFFFF; }
.formcard .form-msg--ok a:not(.btn){ color:#BFE9D2; }
.thanks__body{ min-width:0; }

/* --- 30.16 Header shrink without the layout shift --------------------------
   The scroll-shrink changed .header__in min-height (80px → 66px) and the logo
   mark's width/height. Both are layout properties, so every scroll past the
   trigger reflowed the whole document — measured 0.020 of the page's 0.024
   CLS, and it fired on literally every visit because everyone scrolls.

   Same visual result, no layout involvement: the header keeps one height and
   the mark shrinks on a transform. Compositor-only, so it is also cheaper. */
.site-header .header__in,
.site-header.is-stuck .header__in{ min-height:80px; transition:none; }
.site-header .brand__mark,
.site-header.is-stuck .brand__mark{ width:30.1px; height:46px; transition:transform .35s var(--ease); }
.site-header .brand__lockup{ transform-origin:left center; transition:transform .35s var(--ease); }
.site-header.is-stuck .brand__lockup{ transform:scale(.84); }
@media (max-width:640px){
  .site-header .header__in,
  .site-header.is-stuck .header__in{ min-height:68px; }
  .site-header .brand__mark,
  .site-header.is-stuck .brand__mark{ width:23.5px; height:36px; }
}
@media (prefers-reduced-motion:reduce){
  .site-header .brand__lockup{ transition:none; }
}

/* --- 30.17 Builder: progressive enhancement --------------------------------
   Tabs are a JS affordance. Until JS marks the builder ready, every panel is
   simply shown in sequence and the tab rail is hidden — so with scripting off
   (or a crawler that does not execute it) all five systems' copy is visible
   rather than four-fifths of it sitting behind display:none. */
.builder__panel{ display:grid; }
[data-builder]:not(.is-ready) .builder__rail{ display:none; }
[data-builder]:not(.is-ready) .builder{ grid-template-columns:1fr; }
[data-builder]:not(.is-ready) .builder__panel{ margin-bottom:clamp(1.5rem,3vw,3rem); }
[data-builder].is-ready .builder__panel{ display:none; }
[data-builder].is-ready .builder__panel.is-on{ display:grid; }

/* --- 30.18 Brand lockup: stop the tagline spilling out of its column --------
   §29.30 fixed .brand__txt to a 132px column to kill a font-swap CLS, and put
   overflow:hidden on .brand__tag. But an element's own overflow does not clip
   its own box — the 183px tagline simply rendered past the 114px mobile
   column and slid under the Get a Quote button. The clip belongs on the
   parent. Below 700px the tagline is dropped outright: scaled to fit it would
   be ~5px tall, and the wordmark carries the brand on its own at that size. */
.brand__txt{ overflow:hidden; }
@media (max-width:700px){
  .site-header .brand__tag{ display:none; }
  .site-header .brand__txt{ width:auto; max-width:132px; }
}

/* --- 30.19 Sticky bar: three actions in one row ----------------------------
   The bar was a 2-column grid. Adding WhatsApp made it a third item, which
   grid dropped onto a second row — Call clipped, Quote orphaned underneath.
   One nowrap flex row, equal thirds, labels sized to fit 360px. */
.stickybar__in{ display:flex; flex-wrap:nowrap; align-items:stretch; gap:.45rem; }
.stickybar .btn{
  flex:1 1 0; min-width:0; justify-content:center; white-space:nowrap;
  padding:.8rem .5rem; font-size:.8rem; gap:.34rem;
}
.stickybar .btn svg{ flex:0 0 auto; }
@media (max-width:420px){
  .stickybar .btn{ font-size:.74rem; padding:.8rem .35rem; gap:.28rem; }
}
@media (max-width:340px){
  .stickybar .btn svg{ display:none; }
}

/* --- 30.20 Hero chips must not cover the scene on small screens ------------
   At 390px the two spec chips sat across the cooler doors and the mascot.
   They shrink, tuck into the corners, and the upper one steps aside entirely
   on the narrowest phones where there is simply no room for both. */
@media (max-width:720px){
  .hscene__chip{ padding:.5rem .65rem; border-radius:10px; max-width:52%; }
  .hscene__chip b{ font-size:.72rem; line-height:1.2; }
  .hscene__chip span{ font-size:.54rem; letter-spacing:.1em; }
  .hscene__chip--tl{ top:3%; left:2%; }
  .hscene__chip--br{ right:2%; bottom:3%; }
}
@media (max-width:480px){
  .hscene__chip--tl{ display:none; }
  .hscene__chip--br{ max-width:66%; }
}

/* --- 30.21 Sticky bar ghost button contrast --------------------------------
   .btn--ghost inherits dark ink for use on light sections. On the sticky bar
   (rgba(10,12,13,.94)) that rendered Call at 1.1:1 — invisible, on the single
   most-used mobile CTA. Light treatment scoped to the bar only: 13.6:1. */
.stickybar .btn--ghost{
  color:#F4F7F8;
  border-color:rgba(255,255,255,.36);
  background:rgba(255,255,255,.07);
}
.stickybar .btn--ghost svg{ color:currentColor; }
.stickybar .btn--ghost:hover,
.stickybar .btn--ghost:focus-visible{ background:rgba(255,255,255,.13); border-color:rgba(255,255,255,.5); }

/* --- 30.22 Eyebrow contrast on light sections ------------------------------
   --champagne-700 (#8F7742) as eyebrow text measured 4.30:1 on white and
   3.81:1 on ivory, against a 4.5 requirement at 12.5px. #7E6836 keeps the
   same champagne character and clears it everywhere: 5.36 / 5.05 / 4.75.
   Dark sections are untouched — the light champagne there is already 8:1+. */
.eyebrow{ color:#7E6836; }
.section--dark .eyebrow,
.section--deep .eyebrow,
.hero .eyebrow,
.section--bearcta .eyebrow,
.ctaband .eyebrow{ color:var(--champagne-300); }

/* --- 30.23 "BUILT FOR" label contrast ---------------------------------------
   --steel-500 (#6E7982) on the trust band's #0F1214 measured 4.23:1 at
   12.5px. --steel-300 takes it to 8.44:1 and still reads as a quiet label. */
.trust__lead{ color:var(--steel-300); }

/* ==========================================================================
   31. BRIGHTNESS PASS
   --------------------------------------------------------------------------
   31% of all sections were dark or deep, and on the homepage they ran three
   deep in a row twice. The fix is not "make the dark lighter" — it is fewer
   dark sections, never consecutive, and genuinely bright light ones with a
   cool refrigeration cast rather than flat warm grey.
   ========================================================================== */

:root{
  /* Cool blue-white — the colour of light inside a running cooler. This is
     the new alternate section background; it reads as refrigeration rather
     than as "grey box". */
  --frost-50:  #F6FAFB;
  --frost-100: #EDF4F7;
  --frost-200: #DFEBF0;
  --frost-300: #C7DBE3;
  --glow-cool: rgba(155, 210, 235, .55);

  /* Brighter, higher-chroma CTA. The old champagne was elegant but sleepy
     against a light section. */
  --gold-400: #E8D3A0;
  --gold-500: #D4B978;
  --gold-600: #B99A55;

  --bg-alt: var(--frost-50);
}

/* --- 31.1 Light sections, actually bright --------------------------------- */
.section--alt{
  background:
    radial-gradient(900px 480px at 82% -10%, rgba(155,210,235,.20), transparent 62%),
    linear-gradient(180deg, var(--frost-50) 0%, #FFFFFF 100%);
}
.section--ivory{
  background:
    radial-gradient(760px 420px at 12% -8%, rgba(191,168,117,.14), transparent 60%),
    linear-gradient(180deg, var(--ivory-2) 0%, #FFFFFF 92%);
}
.section{ background-color:#FFFFFF; }

/* A hairline between adjacent light sections keeps the rhythm legible
   without needing a dark band to separate them. */
.section + .section:not(.section--dark):not(.section--deep){
  border-top:1px solid rgba(16,23,28,.055);
}
.section--dark + .section,
.section--deep + .section{ border-top:0; }

/* --- 31.2 Dark sections: lit, not murky ----------------------------------- */
.section--dark{
  background:
    radial-gradient(1000px 520px at 78% 0%, rgba(120,180,205,.16), transparent 64%),
    radial-gradient(700px 400px at 10% 100%, rgba(26,122,63,.18), transparent 66%),
    linear-gradient(172deg, #131A1C 0%, #0C1113 58%, #0A0E0F 100%);
}
.section--deep{
  background:
    radial-gradient(900px 500px at 20% -6%, rgba(120,180,205,.14), transparent 62%),
    linear-gradient(178deg, #14201C 0%, #101719 48%, #0B1012 100%);
}

/* --- 31.3 Hero: lit from inside the cooler -------------------------------- */
.hero__bg::before{
  background:
    radial-gradient(1100px 700px at 68% 34%, rgba(150,205,230,.26), transparent 62%),
    radial-gradient(900px 620px at 16% 8%, rgba(20,92,52,.44), transparent 66%),
    linear-gradient(166deg, #16211F 0%, #182225 42%, #0C1113 100%);
}
.hero__grid{ opacity:.22; }
.hero__copy{ color:#C6D2D8; }
.hero::before{
  /* cool light spilling from the hero panel across the copy side */
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(760px 520px at 72% 52%, rgba(160,215,240,.13), transparent 68%);
}

/* --- 31.4 Cards: lift them off the page ----------------------------------- */
.scard,.icard,.card,.journey__card,.detail__cell,.builder__tab{
  box-shadow:0 1px 2px rgba(16,23,28,.04), 0 10px 26px -18px rgba(16,23,28,.30);
}
.section:not(.section--dark):not(.section--deep) .scard:hover,
.section:not(.section--dark):not(.section--deep) .icard:hover,
.section:not(.section--dark):not(.section--deep) .detail__cell:hover{
  box-shadow:0 2px 4px rgba(16,23,28,.05), 0 26px 54px -26px rgba(16,23,28,.40);
  transform:translateY(-4px);
}
.scard,.icard,.detail__cell{ transition:transform .42s var(--ease), box-shadow .42s var(--ease), border-color .42s var(--ease); }

/* Frosted-glass surface for cards on light sections */
.section:not(.section--dark):not(.section--deep) .journey__card,
.section:not(.section--dark):not(.section--deep) .builder__tab{
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-color:rgba(16,23,28,.09);
}

/* --- 31.5 Brighter primary CTA + shine ------------------------------------ */
.btn--gold{
  background:linear-gradient(135deg, var(--gold-400) 0%, var(--gold-500) 52%, var(--gold-600) 100%);
  color:#1B1405;
  box-shadow:0 2px 0 rgba(255,255,255,.28) inset, 0 14px 30px -14px rgba(185,154,85,.68);
  position:relative; overflow:hidden;
}
.btn--gold::after{
  content:""; position:absolute; top:0; bottom:0; left:-120%; width:55%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform:skewX(-18deg); pointer-events:none;
}
.btn--gold:hover::after{ animation:btnShine 900ms ease-out; }
@keyframes btnShine{ to{ left:135%; } }
.btn--gold:hover{ filter:brightness(1.05); box-shadow:0 2px 0 rgba(255,255,255,.34) inset, 0 20px 40px -16px rgba(185,154,85,.8); }

/* --- 31.6 More breathing room on light sections --------------------------- */
.section:not(.section--dark):not(.section--deep){
  padding-block:clamp(4.25rem, 2.4rem + 6.6vw, 9.5rem);
}

@media (prefers-reduced-motion:reduce){
  .btn--gold:hover::after{ animation:none; }
  .section:not(.section--dark):not(.section--deep) .scard:hover,
  .section:not(.section--dark):not(.section--deep) .icard:hover,
  .section:not(.section--dark):not(.section--deep) .detail__cell:hover{ transform:none; }
}

/* --- 31.7 Keep the selected builder tab selected ---------------------------
   §31.4 gave every .builder__tab a frosted white background on light
   sections. It landed after .builder__tab.is-on in the cascade and at equal
   weight, so the active tab lost its dark green fill and rendered as an empty
   white box. Re-assert the active state after it. */
.section:not(.section--dark):not(.section--deep) .builder__tab.is-on{
  background:linear-gradient(120deg, var(--green-800), var(--green-900));
  border-color:var(--champagne);
  color:#fff;
  backdrop-filter:none; -webkit-backdrop-filter:none;
  box-shadow:0 18px 38px -20px rgba(12,58,33,.85);
}
.section:not(.section--dark):not(.section--deep) .builder__tab.is-on .builder__tab-ico{
  background:rgba(191,168,117,.20); color:var(--champagne-200);
}
.section:not(.section--dark):not(.section--deep) .builder__tab.is-on .builder__tab-go{ color:var(--champagne); }

/* ==========================================================================
   32. ANIMATION ADDITIONS
   All transform/opacity only. Nothing here can move layout, so none of it
   can cost CLS. Every rule has a reduced-motion resting state.
   ========================================================================== */

/* --- 32.1 Logo reveal on load --------------------------------------------- */
/* The mark draws in, the wordmark slides out from behind it. The lockup box
   is fixed width (§29.30/§30.18), so this cannot shift the header. */
.site-header .brand__mark{ transform-origin:center; }
/* The lockup animates from inside its own keyframes; it is never hidden by
   a :not(.is-ready) rule, so a JS failure cannot cost us the logo. */
html.is-ready .site-header .brand__mark{
  animation:markIn 760ms cubic-bezier(.16,1,.3,1) 60ms both;
}
html.is-ready .site-header .brand__txt{
  animation:wordIn 700ms cubic-bezier(.16,1,.3,1) 220ms both;
}
@keyframes markIn{ from{ opacity:0; transform:scale(.72) rotate(-8deg) } to{ opacity:1; transform:none } }
@keyframes wordIn{ from{ opacity:0; transform:translateX(-10px) } to{ opacity:1; transform:none } }

/* --- 32.2 Hover image treatment on industry / solution / gallery cards ----- */
.icard,.scard,.gallery__cell,.pgallery__cell{ overflow:hidden; }
.icard .shot,.scard .shot,.gallery__cell .shot,.pgallery__cell .shot,
.icard figure,.scard figure{ overflow:hidden; }
.icard .shot > *,.scard .shot > *,.gallery__cell .shot > *,.pgallery__cell .shot > *{
  transition:transform .72s cubic-bezier(.16,1,.3,1), filter .5s var(--ease);
  will-change:transform;
}
.icard:hover .shot > *,.scard:hover .shot > *,
.gallery__cell:hover .shot > *,.pgallery__cell:hover .shot > *{
  transform:scale(1.07);
  filter:brightness(1.12) saturate(1.06);
}
/* Cool refrigeration wash sweeps across on hover — the "image swap" read
   without needing a second image file. */
.icard .shot::before,.gallery__cell .shot::before,.pgallery__cell .shot::before{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(115deg, transparent 30%, rgba(180,225,245,.24) 50%, transparent 70%);
  transform:translateX(-110%); transition:transform .85s cubic-bezier(.22,.8,.28,1);
}
.icard:hover .shot::before,.gallery__cell:hover .shot::before,.pgallery__cell:hover .shot::before{
  transform:translateX(110%);
}

/* --- 32.3 Parallax on project / product images ---------------------------- */
/* JS sets --py per figure from its viewport position. The inner art is
   pre-scaled so the drift never reveals an edge. */
.shot[data-parallax] > *{
  transform:translate3d(0, var(--py, 0px), 0) scale(1.10);
  will-change:transform;
}

/* --- 32.4 Quote form reveal ----------------------------------------------- */
.formcard{ transition:transform .8s cubic-bezier(.16,1,.3,1), opacity .8s var(--ease), box-shadow .8s var(--ease); }
/* Hidden ONLY when JS has confirmed it can reveal it again (html.js-reveal).
   A form that animates in is nice; a form nobody can see is a lost lead, so
   the default state is visible and the animation is the enhancement. */
html.js-reveal .formcard:not(.is-in){ opacity:0; transform:translateY(26px) scale(.985); }
.formcard.is-in{ opacity:1; transform:none; }
.formcard.is-in .field{ animation:fieldIn 520ms cubic-bezier(.16,1,.3,1) both; }
.formcard.is-in .field:nth-child(1){ animation-delay:.10s } .formcard.is-in .field:nth-child(2){ animation-delay:.15s }
.formcard.is-in .field:nth-child(3){ animation-delay:.20s } .formcard.is-in .field:nth-child(4){ animation-delay:.25s }
.formcard.is-in .field:nth-child(5){ animation-delay:.30s } .formcard.is-in .field:nth-child(6){ animation-delay:.35s }
@keyframes fieldIn{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }

@media (prefers-reduced-motion:reduce){
  html.is-ready .site-header .brand__mark,
  html.is-ready .site-header .brand__txt{ animation:none !important; opacity:1; transform:none; }
  html:not(.is-ready) .site-header .brand__mark,
  html:not(.is-ready) .site-header .brand__txt{ opacity:1; transform:none; }
  .icard:hover .shot > *,.scard:hover .shot > *,
  .gallery__cell:hover .shot > *,.pgallery__cell:hover .shot > *{ transform:none; filter:none; }
  .icard .shot::before,.gallery__cell .shot::before,.pgallery__cell .shot::before{ display:none; }
  .shot[data-parallax] > *{ transform:none; }
  .formcard,html.js-reveal .formcard:not(.is-in){ opacity:1 !important; transform:none !important; transition:none; }
  .formcard.is-in .field{ animation:none !important; }
}

/* --- 32.5 Spec label contrast on light sections ----------------------------
   The builder moved from a deep section to a light one in §31, which put its
   opacity:.6 labels at 4.49:1 — 0.01 short of AA at 10.5px. Raising the
   opacity to .74 clears it at 5.9:1 without changing the visual hierarchy. */
.section:not(.section--dark):not(.section--deep) .builder__specs dt{ opacity:.74; }

/* --- 32.6 Decorative art must never eat a click ----------------------------
   On /projects/ the scene art sits above the card's own anchor, so 30 of the
   gallery links were unclickable at their centre point — elementFromPoint
   returned the SVG <path>/<rect>, not the <a>. Decorative vector art and
   icons are presentation only; nothing in them is interactive. */
.shot svg,
.panel3d__inner svg,
.gallery__cell svg,
.pgallery__cell svg,
.hscene__svg,
.emptybox svg,
.bear,
.detail__cell svg,
.builder__viz svg,
.btn svg,
.icard svg,
.scard svg{
  pointer-events:none;
}

/* ==========================================================================
   33. MOTION & 3D LAYER
   --------------------------------------------------------------------------
   Rules, unchanged from the rest of the build:
   · transform / opacity / filter only — nothing here can move layout
   · pointer-driven 3D binds only on fine pointers, so phones never pay for it
   · every block has a prefers-reduced-motion resting state
   · no content, copy, headings, links or schema are touched by any of it
   ========================================================================== */

/* --- 33.1 Hero: pointer perspective + glass reflection --------------------- */
.hero__stage{ perspective:1600px; perspective-origin:50% 45%; }
.hero__stage .hscene{
  transform:
    rotateY(calc(var(--mx, 0) * 5.2deg))
    rotateX(calc(var(--my, 0) * -3.6deg))
    translateZ(0);
  transform-style:preserve-3d;
  transition:transform 620ms cubic-bezier(.16,1,.3,1);
  will-change:transform;
}
.hero__stage .hscene__chip{
  transform:translateZ(58px) translate3d(calc(var(--mx,0) * -9px), calc(var(--my,0) * -7px), 0);
  transition:transform 620ms cubic-bezier(.16,1,.3,1), opacity .8s var(--ease);
}
[data-hero-scene].is-live .hscene__chip--tl,
[data-hero-scene].is-live .hscene__chip--br{ animation-fill-mode:both; }

/* Glass sheen travelling across the unit — reads as a reflection on the door */
.hero__stage .hscene::before{
  content:""; position:absolute; inset:0; z-index:4; pointer-events:none;
  background:linear-gradient(104deg,
    transparent 34%,
    rgba(210,240,255,.10) 45%,
    rgba(255,255,255,.20) 50%,
    rgba(210,240,255,.10) 55%,
    transparent 66%);
  transform:translateX(-60%);
  opacity:0;
}
[data-hero-scene].is-live.hscene::before,
[data-hero-scene].is-live .hscene::before{ animation:heroSheen 5200ms cubic-bezier(.4,0,.2,1) 2600ms both; }
@keyframes heroSheen{
  0%{ transform:translateX(-60%); opacity:0 }
  12%{ opacity:1 }
  46%{ transform:translateX(60%); opacity:0 }
  100%{ transform:translateX(60%); opacity:0 }
}

/* --- 33.2 3D solution cards ------------------------------------------------ */
.scard{
  transform-style:preserve-3d;
  transition:transform 560ms cubic-bezier(.16,1,.3,1), box-shadow 560ms var(--ease), border-color .4s var(--ease);
}
[data-tilt3d] .scard,[data-tilt3d].scard{
  transform:
    perspective(1100px)
    rotateY(calc(var(--tx, 0) * 6deg))
    rotateX(calc(var(--ty, 0) * -5deg))
    translateY(var(--lift, 0px));
}
.scard__art,.scard .shot{ transition:transform 700ms cubic-bezier(.16,1,.3,1); }
.scard:hover .scard__art{ transform:translateZ(38px) scale(1.06); }
.scard h3,.scard p,.scard .link-arrow,.scard__tag{ transition:transform 560ms cubic-bezier(.16,1,.3,1); }
.scard:hover h3{ transform:translateZ(30px); }
.scard:hover .scard__tag{ transform:translateZ(42px); }
.scard:hover .link-arrow{ transform:translateZ(26px); }

/* Border glow + background wash on hover */
.scard::after{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none; border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(191,168,117,0), 0 0 0 0 rgba(155,210,235,0);
  background:radial-gradient(420px 260px at var(--gx,50%) var(--gy,50%), rgba(155,210,235,.14), transparent 62%);
  opacity:0; transition:opacity .45s var(--ease), box-shadow .45s var(--ease);
}
.scard:hover::after{
  opacity:1;
  box-shadow:inset 0 0 0 1px rgba(191,168,117,.55), 0 0 34px -6px rgba(155,210,235,.35);
}
.scard .link-arrow{ opacity:.72; }
.scard:hover .link-arrow{ opacity:1; }
.scard .link-arrow svg{ transition:transform .42s cubic-bezier(.16,1,.3,1); }
.scard:hover .link-arrow svg{ transform:translateX(6px); }

/* --- 33.3 Builder: lighting shifts as the system changes ------------------- */
.section--builder{ position:relative; }
.section--builder::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(760px 460px at var(--lx, 22%) 34%, rgba(155,210,235,.16), transparent 66%);
  transition:background-position 900ms var(--ease), opacity .9s var(--ease);
}
.section--builder > .wrap{ position:relative; z-index:1; }
.builder__viz{ transform-style:preserve-3d; }
.builder__panel.is-on .builder__viz{ animation:vizIn 760ms cubic-bezier(.16,1,.3,1) both; }
@keyframes vizIn{ from{ opacity:0; transform:perspective(1200px) rotateY(-7deg) translateX(22px) } to{ opacity:1; transform:none } }
.builder__panel.is-on .builder__meat > *{ animation:meatIn 560ms cubic-bezier(.16,1,.3,1) both; }
.builder__panel.is-on .builder__meat > *:nth-child(1){ animation-delay:.06s }
.builder__panel.is-on .builder__meat > *:nth-child(2){ animation-delay:.11s }
.builder__panel.is-on .builder__meat > *:nth-child(3){ animation-delay:.16s }
.builder__panel.is-on .builder__meat > *:nth-child(4){ animation-delay:.21s }
.builder__panel.is-on .builder__meat > *:nth-child(5){ animation-delay:.26s }
@keyframes meatIn{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }

/* --- 33.4 Canada map: routes draw, pins land ------------------------------- */
/* Default state is DRAWN. The dash offset only exists while the animation
   runs, so with no JS (or a dead observer) the routes are simply present
   rather than sitting at dashoffset 600 and rendering as nothing. */
.camap__routes .route{ opacity:.5; }
.camap.is-live .camap__routes .route{
  stroke-dasharray:var(--len, 600);
  animation:routeDraw 1500ms cubic-bezier(.32,.72,.28,1) both;
}
.camap.is-live .camap__routes .route:nth-child(1){ animation-delay:.15s }
.camap.is-live .camap__routes .route:nth-child(2){ animation-delay:.26s }
.camap.is-live .camap__routes .route:nth-child(3){ animation-delay:.37s }
.camap.is-live .camap__routes .route:nth-child(4){ animation-delay:.48s }
.camap.is-live .camap__routes .route:nth-child(5){ animation-delay:.59s }
.camap.is-live .camap__routes .route:nth-child(6){ animation-delay:.70s }
.camap.is-live .camap__routes .route:nth-child(7){ animation-delay:.81s }
.camap.is-live .camap__routes .route:nth-child(8){ animation-delay:.92s }
.camap.is-live .camap__routes .route:nth-child(9){ animation-delay:1.03s }
.camap.is-live .camap__routes .route:nth-child(10){ animation-delay:1.14s }
@keyframes routeDraw{ from{ stroke-dashoffset:var(--len,600); opacity:0 } 30%{ opacity:.55 } to{ stroke-dashoffset:0; opacity:.5 } }

.camap .pins .pin{ transform-box:fill-box; transform-origin:center; opacity:1; }
.camap.is-live .pins .pin{ animation:pinIn 520ms cubic-bezier(.2,1.4,.4,1) both; }
.camap.is-live .pins .pin:nth-of-type(2){ animation-delay:.45s }
.camap.is-live .pins .pin:nth-of-type(3){ animation-delay:.56s }
.camap.is-live .pins .pin:nth-of-type(4){ animation-delay:.67s }
.camap.is-live .pins .pin:nth-of-type(5){ animation-delay:.78s }
.camap.is-live .pins .pin:nth-of-type(6){ animation-delay:.89s }
.camap.is-live .pins .pin:nth-of-type(7){ animation-delay:1.00s }
.camap.is-live .pins .pin:nth-of-type(8){ animation-delay:1.11s }
.camap.is-live .pins .pin:nth-of-type(9){ animation-delay:1.22s }
.camap.is-live .pins .pin:nth-of-type(10){ animation-delay:1.33s }
.camap.is-live .pins .pin:nth-of-type(11){ animation-delay:1.44s }
@keyframes pinIn{ from{ opacity:0; transform:scale(.2) } to{ opacity:1; transform:scale(1) } }

/* Ontario glow pulse, outward from the home market */
.camap__fig{ position:relative; }
.camap__fig::after{
  content:""; position:absolute; left:52.4%; top:74.4%; width:14px; height:14px;
  margin:-7px 0 0 -7px; border-radius:50%; pointer-events:none;
  box-shadow:0 0 0 0 rgba(46,156,92,.5);
}
.camap.is-live .camap__fig::after{ animation:onPulse 4.2s cubic-bezier(.2,.6,.3,1) 1.5s infinite; }
@keyframes onPulse{
  0%{ box-shadow:0 0 0 0 rgba(46,156,92,.5) }
  70%{ box-shadow:0 0 0 90px rgba(46,156,92,0) }
  100%{ box-shadow:0 0 0 0 rgba(46,156,92,0) }
}
/* These are city names — real content. Visible by default; the entrance
   animation supplies its own from-state so nothing is ever hidden waiting
   for a class that may never arrive. */
.camap__list li{ opacity:1; }
.camap.is-live .camap__list li{ animation:listIn 520ms cubic-bezier(.16,1,.3,1) both; }
.camap.is-live .camap__list li:nth-child(1){ animation-delay:.5s }
.camap.is-live .camap__list li:nth-child(2){ animation-delay:.62s }
.camap.is-live .camap__list li:nth-child(3){ animation-delay:.74s }
.camap.is-live .camap__list li:nth-child(4){ animation-delay:.86s }
.camap.is-live .camap__list li:nth-child(5){ animation-delay:.98s }
.camap.is-live .camap__list li:nth-child(6){ animation-delay:1.10s }
.camap.is-live .camap__list li:nth-child(7){ animation-delay:1.22s }
.camap.is-live .camap__list li:nth-child(8){ animation-delay:1.34s }
@keyframes listIn{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }

/* --- 33.5 Journey: current step highlight + icon pop ----------------------- */
.journey__ico{ transition:transform .5s cubic-bezier(.2,1.3,.4,1), background .5s var(--ease), color .5s var(--ease); }
.journey__step.is-in .journey__ico{ transform:translateZ(0) scale(1); }
.journey__step:not(.is-in) .journey__ico{ transform:scale(.82); }
.journey__step.is-current .journey__card{
  border-color:rgba(191,168,117,.7);
  box-shadow:0 20px 46px -24px rgba(12,58,33,.42);
  transform:translateY(-2px);
}
.journey__step.is-current .journey__ico{
  background:linear-gradient(140deg,var(--brand),var(--green-700));
  color:#fff; transform:scale(1.07);
}
.journey__step.is-current .journey__num{ background:var(--champagne); border-color:var(--champagne); color:#1B1405; }

/* --- 33.6 Project gallery: overlay, detail slide, CTA ---------------------- */
.pgallery__cell,.gallery__cell{ position:relative; overflow:hidden; }
.pgallery__cell::after,.gallery__cell::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(180deg, transparent 38%, rgba(6,12,10,.78) 100%);
  opacity:.72; transition:opacity .5s var(--ease);
}
.pgallery__cell:hover::after,.gallery__cell:hover::after{ opacity:.94; }
.pgallery__cell figcaption,.gallery__cell figcaption{
  position:relative; z-index:3;
  transition:transform .55s cubic-bezier(.16,1,.3,1);
}
.pgallery__cell:hover figcaption,.gallery__cell:hover figcaption{ transform:translateY(-4px); }
.pgallery__cell .cell-cta,.gallery__cell .cell-cta{
  display:inline-flex; align-items:center; gap:.35rem;
  opacity:0; transform:translateY(8px);
  transition:opacity .45s var(--ease), transform .45s cubic-bezier(.16,1,.3,1);
}
.pgallery__cell:hover .cell-cta,.gallery__cell:hover .cell-cta{ opacity:1; transform:none; }

/* --- 33.7 Frosted CTA + form field focus ----------------------------------- */
.formcard{ position:relative; isolation:isolate; }
.formcard::before{
  content:""; position:absolute; inset:-1px; z-index:-1; border-radius:inherit; pointer-events:none;
  background:linear-gradient(135deg, rgba(191,168,117,.55), rgba(46,156,92,.32) 46%, rgba(155,210,235,.42));
  opacity:.5; transition:opacity .6s var(--ease);
}
.formcard:focus-within::before{ opacity:.95; }
.formcard::after{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none;
  background:radial-gradient(520px 300px at 80% -8%, rgba(155,210,235,.14), transparent 62%);
}
.field input,.field select,.field textarea{
  transition:border-color .32s var(--ease), box-shadow .32s var(--ease), background .32s var(--ease), transform .32s var(--ease);
}
.field input:focus,.field select:focus,.field textarea:focus{
  box-shadow:0 0 0 3px rgba(155,210,235,.20), 0 8px 22px -14px rgba(0,0,0,.6);
  transform:translateY(-1px);
}
.field label{ transition:color .3s var(--ease); }
.field:focus-within label{ color:var(--champagne-200); }

/* --- 33.8 Sticky CTA motion ------------------------------------------------ */
/* Call / WhatsApp / assessment. If JS never runs these must still be there. */
.railcta .fab{ opacity:1; }
html.is-ready .railcta .fab{ animation:fabIn 620ms cubic-bezier(.16,1,.3,1) both; }
html.is-ready .railcta .fab:nth-child(1){ animation-delay:1.1s }
html.is-ready .railcta .fab:nth-child(2){ animation-delay:1.22s }
html.is-ready .railcta .fab:nth-child(3){ animation-delay:1.34s }
@keyframes fabIn{ from{ opacity:0; transform:translateY(14px) scale(.9) } to{ opacity:1; transform:none } }
/* One pulse, once — never a loop. */
.fab--tel.pulse-once{ animation:telPulse 1500ms cubic-bezier(.2,.6,.3,1) 1; }
@keyframes telPulse{
  0%{ box-shadow:0 0 0 0 rgba(46,156,92,.55) }
  70%{ box-shadow:0 0 0 22px rgba(46,156,92,0) }
  100%{ box-shadow:0 0 0 0 rgba(46,156,92,0) }
}
.stickybar{ transition:transform .5s cubic-bezier(.16,1,.3,1); }

/* --- 33.9 Section transitions: light sweep + steel edge -------------------- */
.section--dark,.section--deep{ position:relative; }
.section--dark::before,.section--deep::before{
  content:""; position:absolute; left:0; right:0; top:0; height:1px; z-index:2; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(191,168,117,.5) 22%, rgba(210,240,255,.7) 50%, rgba(191,168,117,.5) 78%, transparent);
  transform:scaleX(0); transform-origin:50% 50%;
  transition:transform 1.1s cubic-bezier(.16,1,.3,1);
}
.section--dark.is-seen::before,.section--deep.is-seen::before{ transform:scaleX(1); }

/* --- 33.10 Button micro-interactions --------------------------------------- */
.btn{ transition:transform .28s cubic-bezier(.16,1,.3,1), box-shadow .32s var(--ease), background .32s var(--ease), border-color .32s var(--ease), filter .28s var(--ease); }
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); transition-duration:.08s; }
.btn svg:last-child{ transition:transform .38s cubic-bezier(.16,1,.3,1); }
.btn:hover svg:last-child{ transform:translateX(5px); }
.btn--ghost{ position:relative; overflow:hidden; }
.btn--ghost::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(120deg, rgba(155,210,235,.18), rgba(191,168,117,.14));
  transform:translateX(-101%); transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.btn--ghost:hover::before{ transform:none; }
.btn:focus-visible{ outline:3px solid rgba(155,210,235,.75); outline-offset:3px; }

/* --- 33.11 FAQ motion ------------------------------------------------------- */
.faq__q{ transition:background .38s var(--ease), padding-left .38s var(--ease), color .3s var(--ease); }
.faq__q:hover{ background:linear-gradient(90deg, rgba(155,210,235,.12), transparent 70%); }
.faq__item.is-open > h3 > .faq__q{ background:linear-gradient(90deg, rgba(191,168,117,.16), transparent 72%); }
.faq__ico{ display:inline-grid; place-items:center; transition:transform .45s cubic-bezier(.16,1,.3,1), color .3s var(--ease); }
.faq__q[aria-expanded="true"] .faq__ico{ transform:rotate(180deg); color:var(--champagne); }

/* --- 33.12 Clip-path image reveal ------------------------------------------ */
.shot,.panel3d__inner,.gallery__cell,.pgallery__cell{ overflow:hidden; }
[data-reveal]{ clip-path:inset(0 0 100% 0); opacity:0; }
[data-reveal].is-revealed{
  clip-path:inset(0 0 0 0); opacity:1;
  transition:clip-path 1.05s cubic-bezier(.16,1,.3,1), opacity .7s var(--ease);
}

/* --- 33.13 Reduced motion: everything rests in its finished state ---------- */
@media (prefers-reduced-motion:reduce){
  .hero__stage .hscene,.hero__stage .hscene__chip{ transform:none !important; transition:none !important; }
  .hero__stage .hscene::before{ display:none; }
  [data-tilt3d] .scard,[data-tilt3d].scard,.scard{ transform:none !important; }
  .scard:hover .scard__art,.scard:hover h3,.scard:hover .scard__tag,.scard:hover .link-arrow{ transform:none !important; }
  .builder__panel.is-on .builder__viz,.builder__panel.is-on .builder__meat > *{ animation:none !important; opacity:1; transform:none; }
  .camap.is-live .camap__routes .route{ animation:none !important; stroke-dashoffset:0; opacity:.5; }
  .camap__routes .route{ stroke-dashoffset:0; opacity:.5; }
  .camap.is-live .pins .pin,.camap .pins .pin{ animation:none !important; opacity:1; transform:none; }
  .camap.is-live .camap__fig::after{ animation:none !important; }
  .camap__list li,.camap.is-live .camap__list li{ animation:none !important; opacity:1; transform:none; }
  .journey__step:not(.is-in) .journey__ico{ transform:none; }
  .journey__step.is-current .journey__card{ transform:none; }
  .pgallery__cell:hover figcaption,.gallery__cell:hover figcaption{ transform:none; }
  .pgallery__cell .cell-cta,.gallery__cell .cell-cta{ opacity:1; transform:none; }
  .field input:focus,.field select:focus,.field textarea:focus{ transform:none; }
  .railcta .fab,html.is-ready .railcta .fab{ animation:none !important; opacity:1; transform:none; }
  .fab--tel.pulse-once{ animation:none !important; }
  .section--dark::before,.section--deep::before{ transform:scaleX(1); transition:none; }
  .btn:hover{ transform:none; }
  .btn:hover svg:last-child{ transform:none; }
  .btn--ghost::before{ display:none; }
  .faq__ico{ transition:none; }
  [data-reveal]{ clip-path:none !important; opacity:1 !important; }
}

/* --- 33.14 Mobile: no pointer 3D, lighter effects -------------------------- */
@media (hover:none), (max-width:820px){
  .hero__stage .hscene{ transform:none !important; }
  .hero__stage .hscene__chip{ transform:none !important; }
  [data-tilt3d] .scard,[data-tilt3d].scard{ transform:none !important; }
  .scard:hover .scard__art{ transform:none; }
  .scard::after{ display:none; }
  .section--builder::before{ display:none; }
  .btn:hover{ transform:none; }
}