/* ════════════════════════════════════════════════════════════════
   MorKlad™ Landing Page v3 · Morin by Kingspan
   Type: Kingspan Brown only (300 / 400 / 700)
   Color: flat brand palette. Gradient only in the logo, the entrance
   wipe and one soft background (final CTA).
   Design & build: Dois Z Publicidade
   ════════════════════════════════════════════════════════════════ */

/* ---------- fonts ---------- */
@font-face { font-family: 'Brown'; src: url('../fonts/brown-300-normal.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Brown'; src: url('../fonts/brown-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Brown'; src: url('../fonts/brown-700-normal.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

/* ---------- tokens ---------- */
:root {
  /* brand palette (client, 2026-09-14) */
  --navy: #202D59;
  --sky: #6DC0EC;
  --tan: #B59153;
  --orange: #F69A1B;
  --mist: #F4F6FA;
  --paper: #ffffff;
  --ink: #1A1A1A;              /* black 90%: every title */
  --copy: #2C303A;             /* near-black grey: explanatory copy of the system story (client, v2) */
  --body: #3F4557;
  --mute: #5A6178;
  --line: #DFE3EC;
  --line-soft: #EAEDF3;

  /* soft tints of the palette (card strips, hover states) */
  --navy-soft: #E7EAF3;
  --sky-soft: #E4F3FC;
  --tan-soft: #F3ECDE;
  --orange-soft: #FDEEDA;
  --grey-soft: #EEF0F4;

  /* the four layers of the system, same mapping as the Greenbuild hub */
  --ph-avb: var(--navy);
  --ph-ins: var(--sky);
  --ph-sub: var(--tan);
  --ph-pan: var(--orange);
  --ph-fire: #8A93A8;          /* fire block: complementary component, not a layer */

  /* campaign tagline colors */
  --c-navy: var(--navy);
  --c-sky: var(--sky);
  --c-orange: var(--orange);

  --sans: 'Brown', 'Helvetica Neue', Arial, system-ui, sans-serif;

  --fs-body: 1.0625rem;        /* 17px */
  --fs-small: .9375rem;        /* 15px */
  --fs-min: .875rem;           /* 14px: nothing on the page goes below this */

  --pad: clamp(1.5rem, 4.5vw, 4rem);
  --maxw: 1440px;
  --ease: cubic-bezier(.22, .9, .24, 1);

  /* motion vars driven by JS */
  --mb: 0px;                   /* scroll-velocity motion blur on the 3D */
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: initial; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--body);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
body.is-loading { overflow: hidden; }

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
b, strong { font-weight: 700; }
::selection { background: rgba(109, 192, 236, .35); color: var(--ink); }
/* the hidden attribute always wins over a display set further down */
[hidden] { display: none !important; }
/* read by screen readers, not shown */
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

h1, h2, h3, h4 {
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.015em;
  color: var(--ink);
}
h2 { font-size: clamp(1.9rem, 3.3vw, 2.85rem); }
h3 { font-size: 1.35rem; }

/* small uppercase labels: regular weight, wide tracking, never below 14px */
.label {
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--fs-min);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.eyebrow {
  display: flex; align-items: center; gap: .7rem;
  font-weight: 400; font-size: var(--fs-min); letter-spacing: .24em; text-transform: uppercase;
  color: var(--orange); margin-bottom: 1.2rem;
}
.eyebrow::before { content: ''; width: 26px; height: 3px; background: currentColor; flex: none; }
.c-navy { color: var(--c-navy); }
.c-sky { color: var(--c-sky); }
.c-orange { color: var(--c-orange); }

/* ---------- ambient ---------- */
.grain {
  position: fixed; inset: 0; z-index: 2400; pointer-events: none;
  opacity: .04; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}
.progressbar { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 3400; }
.progressbar span { display: block; height: 100%; background: var(--orange); transform: scaleX(0); transform-origin: 0 50%; }

/* entrance wipe: the one gradient moment of the page (brand sweep) */
.wipe {
  position: fixed; inset: -12%;
  z-index: 4600; pointer-events: none;
  background: linear-gradient(118deg, var(--navy) 0%, var(--navy) 26%, var(--sky) 54%, var(--tan) 76%, var(--orange) 100%);
  visibility: hidden;            /* GSAP owns the transform from a clean slate */
  will-change: transform;
}

/* ---------- loader (about one second) ---------- */
.loader { position: fixed; inset: 0; z-index: 5000; background: var(--paper); display: grid; place-items: center; }
.loader__inner { width: min(320px, 70vw); text-align: center; }
.loader__logo { height: 40px; margin: 0 auto 1.6rem; }
.loader__bar { height: 3px; background: var(--line); overflow: hidden; border-radius: 3px; }
.loader__bar i { display: block; height: 100%; background: var(--navy); transform: scaleX(0); transform-origin: 0 50%; }

/* ---------- nav ---------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 3000; transition: transform .55s var(--ease), background .4s, box-shadow .4s; }
.nav.is-hidden { transform: translateY(-110%); }
.nav.is-solid { background: rgba(255, 255, 255, .86); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 1px 0 var(--line-soft); }
.nav__inner { max-width: var(--maxw); margin: 0 auto; padding: 1.05rem var(--pad); display: flex; align-items: center; gap: 2.5rem; }
.nav__brand img { height: 26px; }
.nav__links { display: flex; gap: 2.1rem; margin-left: auto; }
.nav__links a { font-size: var(--fs-small); font-weight: 400; color: var(--ink); position: relative; padding: .3rem 0; }
.nav__links a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--orange); transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s var(--ease);
}
.nav__links a:hover::after, .nav__links a.is-active::after { transform: scaleX(1); }
.nav__toggle { display: none; }

.mnav {
  position: fixed; inset: 0; z-index: 2900;
  background: rgba(255, 255, 255, .94); backdrop-filter: blur(20px);
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  gap: 1.1rem; padding: var(--pad);
  transform: translateY(-102%); transition: transform .6s var(--ease);
}
.mnav.is-open { transform: translateY(0); }
.mnav > a:not(.btn) { font-size: 1.9rem; font-weight: 400; color: var(--ink); }
.mnav .btn { margin-top: 1.4rem; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .9rem 1.8rem; border-radius: 999px;
  font-size: var(--fs-small); font-weight: 400; line-height: 1.2;
  border: 1.5px solid transparent;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s, color .35s, border-color .35s;
  will-change: transform;
}
.btn--solid { color: #fff; background: var(--navy); border-color: var(--navy); }
.btn--solid:hover { background: #2B3B73; border-color: #2B3B73; transform: translateY(-2px); box-shadow: 0 14px 30px -16px rgba(32, 45, 89, .6); }
.btn--ghost { color: var(--navy); background: transparent; border-color: var(--navy); }
.btn--ghost:hover { background: var(--navy-soft); transform: translateY(-2px); }
.btn--light { color: #fff; background: transparent; border-color: var(--sky); }
.btn--light:hover { background: rgba(255, 255, 255, .08); transform: translateY(-2px); }
.btn--lg { padding: 1.05rem 2.3rem; font-size: 1rem; }
.btn:focus-visible, a:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; border-radius: 6px; }

/* ---------- section scaffold ---------- */
section { position: relative; z-index: 2; }
.section__head { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad) 3.2rem; }
.section__head h2 { max-width: 16em; }
.section__sub { max-width: 36em; margin-top: 1.1rem; font-size: var(--fs-body); color: var(--mute); }
.section__head--light h2 { color: #fff; }
.section__head--light .eyebrow { color: var(--sky); }
.section__head--light .section__sub { color: rgba(255, 255, 255, .72); }

/* ════════════ HERO ════════════ */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: clip; }
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(42% 55% at 78% 42%, rgba(109, 192, 236, .16), transparent 70%);
}
#wallCanvas {
  position: fixed; inset: 0; z-index: 1;
  width: 100%; height: 100svh;
  pointer-events: none;
  filter: blur(var(--mb));
  will-change: filter;
}
.hero__content { position: relative; z-index: 2; max-width: var(--maxw); width: 100%; margin: 0 auto; padding: 7rem var(--pad) 7.5rem; }
.hero__wordmark { height: clamp(62px, 8.6vw, 110px); margin: 1rem 0 2.4rem; }
.hero__title { font-size: clamp(2.2rem, 4.6vw, 3.9rem); font-weight: 400; letter-spacing: -.02em; line-height: 1.12; }
.hero__title .line { display: block; overflow: clip; }
.hero__title .line > span { display: inline-block; will-change: transform; }
.hero__sub { max-width: 30em; margin-top: 1.7rem; font-size: 1.125rem; }
.hero__cta { display: flex; gap: .9rem; margin-top: 2.3rem; flex-wrap: wrap; }
.hero__micro { margin-top: 1.5rem; font-size: var(--fs-small); color: var(--mute); max-width: 32em; }
.hero__foot {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad) 2rem;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem;
}
.hero__scrollcue { display: flex; flex-direction: column; align-items: flex-start; gap: .8rem; color: var(--mute); }
.hero__scrollcue i { width: 2px; border-radius: 2px; height: 46px; background: var(--navy); transform-origin: top; animation: cue 2.2s var(--ease) infinite; }
@keyframes cue { 0% { transform: scaleY(0); } 45% { transform: scaleY(1); transform-origin: top; } 46% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
/* the four indicators of the Greenbuild booth: value and icon in the booth
   color, caption in grey below, side by side at the right of the foot.
   Same color tokens as the tagline, so darkening --c-sky / --c-orange for
   contrast would fix both at once                                       */
.hero__stats { display: flex; align-items: flex-start; gap: clamp(1.75rem, 3.4vw, 3.5rem); }
.hstat--navy { --hs: var(--c-navy); }
.hstat--tan { --hs: var(--tan); }
.hstat--orange { --hs: var(--c-orange); }
.hstat--sky { --hs: var(--c-sky); }
.hstat__val {
  display: flex; align-items: center; gap: .3em;
  font-size: clamp(1.5rem, 2.1vw, 2rem); line-height: 1.1; letter-spacing: -.01em;
  color: var(--hs); white-space: nowrap;
}
.hstat__val svg { width: .95em; height: .95em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.hstat__cap { margin-top: .3rem; font-size: var(--fs-small); line-height: 1.35; color: var(--body); white-space: nowrap; }
/* short laptop screens (1366x768, 1280x720): the vertical rhythm follows the
   height so the booth indicators are on screen at first load             */
@media (min-width: 821px) and (max-height: 900px) {
  .hero__content { padding-top: clamp(5.5rem, 12vh, 7rem); padding-bottom: clamp(6.25rem, 14vh, 7.5rem); }
  .hero__wordmark { height: clamp(56px, min(8.6vw, 11.5vh), 110px); margin: .6rem 0 clamp(1.4rem, 3.4vh, 2.4rem); }
  .hero__title { font-size: clamp(2.2rem, min(4.6vw, 7.4vh), 3.9rem); }
  .hero__sub { margin-top: clamp(1.1rem, 2.4vh, 1.7rem); }
  .hero__cta { margin-top: clamp(1.4rem, 3vh, 2.3rem); }
  .hero__micro { margin-top: clamp(1rem, 2vh, 1.5rem); }
}

/* ════════════ SYSTEM (signature scroll) ════════════
   text column on the left, the 3D owns the right half of the stage.
   The columns are centred with auto margins, never with a transform: GSAP
   animates y on them and would drop a stylesheet translateY(-50%).      */
.system { height: 822vh; }   /* 106 s of story at the scroll speed of v1 (720vh for 91 s) */
.system__stage { position: sticky; top: 0; height: 100svh; overflow: clip; }
.system__col {
  position: absolute; z-index: 2; left: var(--pad); top: 0; bottom: 0; margin: auto 0; height: fit-content;
  width: min(470px, 40vw);
}
/* explanatory copy of the story in near-black grey, a step larger (client, v2) */
.system__title { font-size: clamp(2.1rem, 3.9vw, 3.35rem); }
.system__sub { margin-top: 1.3rem; font-size: clamp(1.0625rem, 1.25vw, 1.1875rem); line-height: 1.62; color: var(--copy); max-width: 30em; }
.system__rail { opacity: 0; }

/* four colored segments: the spine of the system */
.system__spine { display: flex; gap: 6px; margin-bottom: 1.5rem; }
.system__spine i { flex: 1; height: 4px; border-radius: 4px; background: var(--line); transition: background .5s var(--ease), transform .5s var(--ease); transform-origin: left; }
.system__spine i[data-phase="avb"].is-on { background: var(--ph-avb); }
.system__spine i[data-phase="ins"].is-on { background: var(--ph-ins); }
.system__spine i[data-phase="sub"].is-on { background: var(--ph-sub); }
.system__spine i[data-phase="pan"].is-on { background: var(--ph-pan); }
.system__spine i.is-now { transform: scaleY(1.75); }

/* the steps share one grid cell, so the box is as tall as the longest step */
.system__steps { position: relative; display: grid; }
.rstep { grid-area: 1 / 1; opacity: 0; transform: translateY(22px); transition: opacity .55s var(--ease), transform .55s var(--ease); pointer-events: none; }
.rstep.is-active { opacity: 1; transform: none; pointer-events: auto; }

/* each layer carries its own flat color; the panel clips are fixing
   components, not a fifth layer, so their band stays neutral          */
.rstep[data-phase="avb"] { --ph: var(--ph-avb); --ph-text: #fff; }
.rstep[data-phase="ins"] { --ph: var(--ph-ins); --ph-text: var(--navy); }
.rstep[data-phase="sub"] { --ph: var(--ph-sub); --ph-text: var(--navy); }
.rstep[data-phase="pan"] { --ph: var(--ph-pan); --ph-text: var(--navy); }
.rstep[data-phase="clip"] { --ph: var(--grey-soft); --ph-text: var(--navy); }
.rstep[data-phase="clip"] .rstep__band { box-shadow: inset 0 0 0 1px var(--line); }

.rstep__band { background: var(--ph); color: var(--ph-text); border-radius: 12px; padding: 1.15rem 1.4rem 1.25rem; }
.rstep__tag { font-size: var(--fs-min); letter-spacing: .16em; text-transform: uppercase; opacity: .9; margin-bottom: .45rem; }
.rstep__name { font-size: clamp(1.5rem, 2.2vw, 2rem); color: inherit; line-height: 1.12; }
.rstep__desc { margin-top: 1.15rem; font-size: 1.0625rem; line-height: 1.62; color: var(--copy); max-width: 36em; }

.rstep__hl { margin-top: .8rem; }
.rstep__hl li { position: relative; padding: .5rem 0 .5rem 1.3rem; border-top: 1px solid var(--line); font-size: 1rem; line-height: 1.55; color: var(--copy); }
.rstep__hl li:first-child { border-top: 0; }
.rstep__hl li::before { content: ''; position: absolute; left: 0; top: calc(.5rem + .775em - 4px); width: 8px; height: 8px; border-radius: 50%; background: var(--ph); }
.rstep__hl li b { color: var(--ink); }

/* sub-framing: second product, hover/tap reveals the bracket render */
.rstep__alt {
  position: relative; margin-top: 1rem; padding: .85rem 1rem;
  border: 1px solid var(--line); border-left: 3px solid var(--ph);
  border-radius: 10px; background: #fff; cursor: pointer; outline: none;
}
.rstep__alt-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-size: 1rem; color: var(--ink); }
.rstep__alt-head .label { color: var(--navy); flex: none; }
.rstep__alt-desc { font-size: var(--fs-small); line-height: 1.55; color: var(--copy); margin-top: .35rem; }
.rstep__alt-img {
  position: absolute; left: calc(100% + 1.4rem); bottom: -.6rem; width: 300px; padding: .8rem;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 30px 60px -25px rgba(26, 26, 26, .35);
  opacity: 0; transform: translateY(10px) scale(.97);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
  pointer-events: none;
}
.rstep__alt:hover .rstep__alt-img,
.rstep__alt:focus-visible .rstep__alt-img,
.rstep__alt.is-open .rstep__alt-img { opacity: 1; transform: none; }
.rstep__alt-img img { width: 100%; display: block; }

/* complementary component: the fire block beside the assembled wall, in the
   pause between the last step and the finale (main.js fades it in and out) */
.system__fire { opacity: 0; pointer-events: none; }
.system__fire a { pointer-events: auto; }
.system__fire .eyebrow { color: var(--navy); }
.system__fire h3 { font-size: clamp(1.5rem, 2.3vw, 2.05rem); max-width: 17em; }
.system__fire > p:not(.eyebrow) { margin-top: 1rem; font-size: clamp(1rem, 1.15vw, 1.0625rem); line-height: 1.62; color: var(--copy); }
.firecard {
  margin-top: 1.4rem; display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 1.2rem;
  background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--ph-fire); border-radius: 0 0 14px 14px;
  padding: 1rem 1.2rem 1.15rem 1rem;
}
/* the photo panel runs the full height of the card: no gap under the image */
.firecard__img { display: grid; place-items: center; min-height: 112px; background: var(--grey-soft); border-radius: 10px; overflow: clip; }
.firecard__img img { width: 100%; height: auto; padding: .55rem; }
.firecard__body h4 { font-size: 1.1rem; line-height: 1.25; }
.firecard__body ul { margin-top: .4rem; }
.firecard__body li { position: relative; padding: .4rem 0 .4rem 1.1rem; border-top: 1px solid var(--line); font-size: var(--fs-small); line-height: 1.45; color: var(--copy); }
.firecard__body li:first-child { border-top: 0; }
.firecard__body li::before { content: ''; position: absolute; left: 0; top: calc(.4rem + .725em - 3.5px); width: 7px; height: 7px; border-radius: 50%; background: var(--ph-fire); }
.firecard__body li b { color: var(--ink); }
.firecard__body a.label { display: inline-flex; align-items: center; gap: .5rem; margin-top: .65rem; color: var(--navy); }
.firecard__body a.label i { font-style: normal; transition: transform .4s var(--ease); }
.firecard__body a.label:hover { color: var(--orange); }
.firecard__body a.label:hover i { transform: translateX(5px); }

.system__finale { opacity: 0; pointer-events: none; }
.system__finale h3 { font-size: clamp(2rem, 3.6vw, 3.1rem); }
.system__finale p { margin-top: 1.1rem; font-size: clamp(1.0625rem, 1.25vw, 1.1875rem); line-height: 1.62; color: var(--copy); max-width: 26em; }
.system__finale .btn { margin-top: 2rem; pointer-events: auto; }

.hotspots { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hs { position: absolute; transform: translate(-13px, -50%); display: flex; align-items: center; gap: .55rem; opacity: 0; }
.hs.is-left { flex-direction: row-reverse; transform: translate(calc(13px - 100%), -50%); }
.hs b {
  width: 26px; height: 26px; flex: 0 0 26px;
  display: grid; place-items: center;
  color: #fff; font: 400 .875rem var(--sans);
  background: var(--navy);
  border-radius: 50%;
  box-shadow: 0 6px 18px -6px rgba(26, 26, 26, .5), 0 0 0 3px rgba(255, 255, 255, .8);
}
.hs span {
  font: 400 var(--fs-min) var(--sans); letter-spacing: .06em;
  color: var(--ink); background: rgba(255, 255, 255, .86); backdrop-filter: blur(6px);
  padding: .3rem .7rem; border-radius: 999px; border: 1px solid var(--line);
  white-space: nowrap;
}
.hs-legend { display: none; }
.hs-legend li { display: flex; align-items: center; gap: .5rem; font-size: var(--fs-min); line-height: 1.25; color: var(--body); }
.hs-legend b { width: 22px; height: 22px; flex: 0 0 22px; display: grid; place-items: center; border-radius: 50%; background: var(--navy); color: #fff; font: 400 .875rem var(--sans); }
/* squarish or portrait desktops: the wall is drawn small and the seven pills
   cannot all sit around it, so main.js switches the finale to numbered dots
   with the legend in the copy column (the same reading as on mobile)      */
.system.is-numbered .hs, .system.is-numbered .hs.is-left { transform: translate(-50%, -50%); flex-direction: row; }
.system.is-numbered .hs span { display: none; }
.system.is-numbered .system__finale { display: flex; flex-direction: column; }
.system.is-numbered .system__finale .btn { order: 2; align-self: flex-start; }
.system.is-numbered .hs-legend { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem 1.2rem; margin-top: 1.5rem; order: 1; }

/* ════════════ VIEWER · Morin's interactive 3D model (Vectary) ════════════
   white background: the section covers the fixed canvas of the story     */
.viewer { padding: 7rem 0 6rem; background: var(--paper); }
.viewer .section__head { padding-bottom: 2.4rem; }
.viewer__frame {
  position: relative; width: calc(100% - 2 * var(--pad)); max-width: calc(var(--maxw) - 2 * var(--pad)); margin: 0 auto;
  height: clamp(420px, 64vh, 620px);
  border-radius: 18px; overflow: clip; background: var(--mist);
  box-shadow: 0 0 0 1px var(--line), 0 30px 70px -40px rgba(26, 26, 26, .25);
}
.viewer__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.viewer__state { position: absolute; inset: 0; display: grid; place-items: center; padding: 1.5rem; text-align: center; }
.viewer__msg { font-size: var(--fs-small); color: var(--mute); max-width: 30em; }
.viewer__msg a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.viewer__msg a i { font-style: normal; }
/* until the visitor clicks, the wheel and the finger keep scrolling the page */
.viewer__shield {
  position: absolute; inset: 0; z-index: 2; display: grid; place-items: center;
  background: transparent; border: 0; cursor: pointer; font: inherit; color: var(--ink);
}
.viewer__shield span {
  display: inline-flex; align-items: center; gap: .65rem; padding: .8rem 1.35rem;
  background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-radius: 999px; box-shadow: 0 0 0 1px var(--line), 0 16px 34px -18px rgba(26, 26, 26, .45);
  font-size: var(--fs-small); transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.viewer__shield svg { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--navy); stroke-width: 1.5; stroke-linejoin: round; }
.viewer__shield b { font-weight: 400; }
.viewer__shield:hover span { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--line), 0 20px 40px -18px rgba(26, 26, 26, .5); }
.viewer__shield:focus-visible { outline: none; }
.viewer__shield:focus-visible span { outline: 2px solid var(--sky); outline-offset: 3px; }
.viewer__fs {
  position: absolute; top: .9rem; right: .9rem; z-index: 3; width: 44px; height: 44px;
  display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .92); box-shadow: 0 0 0 1px var(--line), 0 10px 24px -14px rgba(26, 26, 26, .45);
  transition: transform .35s var(--ease);
}
.viewer__fs svg { width: 20px; height: 20px; fill: none; stroke: var(--navy); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.viewer__fs:hover { transform: scale(1.06); }
.viewer__fs:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; }
.viewer__frame.is-fs, .viewer__frame:fullscreen { width: 100%; height: 100%; max-width: none; border-radius: 0; box-shadow: none; }
.viewer__foot {
  width: calc(100% - 2 * var(--pad)); max-width: calc(var(--maxw) - 2 * var(--pad)); margin: 1rem auto 0;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  font-size: var(--fs-small); color: var(--mute);
}
.viewer__foot .label { display: inline-flex; align-items: center; gap: .5rem; color: var(--navy); }
.viewer__foot .label i { font-style: normal; transition: transform .4s var(--ease); }
.viewer__foot .label:hover { color: var(--orange); }
.viewer__foot .label:hover i { transform: translateX(5px); }

/* ════════════ STATEMENT · the photo fades to white as the text gains color ════════════ */
.statement { position: relative; min-height: 135vh; display: grid; place-items: center; overflow: clip; background: var(--paper); }
.statement__media { position: absolute; inset: 0; }
.statement__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.18); }
.statement__veil { position: absolute; inset: 0; background: #fff; opacity: 0; will-change: opacity; }
.statement__body { position: relative; z-index: 1; text-align: center; padding: 0 var(--pad); }
.statement__title {
  position: relative;
  font-size: clamp(2.5rem, 6.2vw, 5.8rem);
  font-weight: 400; letter-spacing: -.02em; line-height: 1.1;
}
.statement__ghost { color: transparent; -webkit-text-stroke: 1.5px rgba(26, 26, 26, .4); }
.statement__fill { position: absolute; inset: 0; color: var(--navy); clip-path: inset(0 100% 0 0); will-change: clip-path; }
.statement__cap {
  position: absolute; left: var(--pad); bottom: 3.2rem; z-index: 1;
  display: flex; align-items: center; gap: 1rem;
  padding-left: 1.1rem; border-left: 3px solid var(--orange);
}
.statement__cap svg { width: 30px; height: 30px; fill: none; stroke: var(--navy); stroke-width: 1.3; }
.statement__cap b { display: block; font-size: 1rem; font-weight: 700; color: var(--ink); }
.statement__cap i { display: block; font-style: normal; font-size: var(--fs-min); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); margin-top: .25rem; }

/* ════════════ MARQUEE · brand campaign colors ════════════ */
.marquee { overflow: clip; border-block: 1px solid var(--line-soft); padding: 2rem 0; background: var(--paper); position: relative; z-index: 2; }
.marquee__track { display: flex; white-space: nowrap; will-change: transform; }
.marquee__track span { font-size: clamp(2.4rem, 5vw, 4.2rem); font-weight: 400; letter-spacing: -.02em; color: var(--line); padding-right: .35em; }
.marquee__track b { font-weight: 400; }

/* ════════════ PRODUCTS · compact cards, one color per layer ════════════ */
.products { padding: 7rem 0 7.5rem; background: var(--mist); }
.products__grid { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.pcard {
  --pc: var(--navy); --pc-soft: var(--navy-soft);
  position: relative;
  background: #fff; border-radius: 14px; border: 1px solid var(--line); border-top: 4px solid var(--pc);
  overflow: clip; display: flex; flex-direction: column;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
  opacity: 0; transform: translateY(30px);
}
.pcard[data-layer="avb"] { --pc: var(--ph-avb); --pc-soft: var(--navy-soft); }
.pcard[data-layer="ins"] { --pc: var(--ph-ins); --pc-soft: var(--sky-soft); }
.pcard[data-layer="sub"] { --pc: var(--ph-sub); --pc-soft: var(--tan-soft); }
.pcard[data-layer="pan"] { --pc: var(--ph-pan); --pc-soft: var(--orange-soft); }
.pcard[data-layer="fire"] { --pc: var(--ph-fire); --pc-soft: var(--grey-soft); }
.pcard.is-inview { opacity: 1; transform: none; }
.pcard:hover { transform: translateY(-4px); box-shadow: 0 30px 50px -30px rgba(26, 26, 26, .3); }
.pcard__strip { height: 150px; background: var(--pc-soft); display: grid; place-items: center; overflow: clip; }
/* the official product images (v2) are cut out on transparency: no blend needed */
.pcard__strip img { width: 100%; height: 100%; object-fit: contain; padding: .8rem 2rem; transition: transform .7s var(--ease); }
.pcard:hover .pcard__strip img { transform: scale(1.04); }
.pcard__body { padding: 1.3rem 1.5rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.pcard__kind { color: var(--pc); font-size: var(--fs-min); letter-spacing: .16em; text-transform: uppercase; margin-bottom: .4rem; }
.pcard[data-layer="ins"] .pcard__kind, .pcard[data-layer="sub"] .pcard__kind, .pcard[data-layer="pan"] .pcard__kind, .pcard[data-layer="fire"] .pcard__kind { color: var(--ink); opacity: .7; }
.pcard__body h3 { font-size: 1.35rem; }
.pcard__hl { margin-top: .8rem; }
.pcard__hl li { position: relative; padding: .5rem 0 .5rem 1.2rem; font-size: var(--fs-small); color: var(--body); border-top: 1px solid var(--line); }
.pcard__hl li:first-child { border-top: 0; }
.pcard__hl li::before { content: ''; position: absolute; left: 0; top: 1rem; width: 8px; height: 8px; border-radius: 50%; background: var(--pc); }
.pcard__link { margin-top: auto; padding-top: 1rem; color: var(--navy); display: inline-flex; align-items: center; gap: .5rem; }
.pcard__link i { font-style: normal; transition: transform .4s var(--ease); }
.pcard:hover .pcard__link i { transform: translateX(6px); }
.pcard:hover .pcard__link { color: var(--orange); }

/* ════════════ WHY (flat navy) ════════════ */
.why { background: var(--navy); padding: 7rem 0 7.5rem; }
.why__grid { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.wcard {
  padding: 1.8rem 1.7rem 2rem; border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04);
  transition: background .45s var(--ease), transform .45s var(--ease), border-color .45s var(--ease);
}
.wcard:hover { background: rgba(255, 255, 255, .09); border-color: var(--sky); transform: translateY(-4px); }
.wcard__icon { width: 42px; height: 42px; fill: none; stroke: var(--sky); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: stroke .4s; }
.wcard:hover .wcard__icon { stroke: var(--orange); }
.wcard h3 { color: #fff; font-size: 1.3rem; margin-top: 1.2rem; }
.wcard p { color: rgba(255, 255, 255, .74); font-size: 1rem; margin-top: .5rem; max-width: 30em; }

.why__warranty { max-width: var(--maxw); margin: 1.2rem auto 0; padding: 0 var(--pad); }
.why__warranty > div {
  border-radius: 12px; background: #fff; padding: 2rem 1.9rem;
  display: grid; grid-template-columns: 1fr 1.6fr; gap: 2.5rem; align-items: center;
}
.why__warranty h3 { font-size: 1.5rem; }
.why__warranty h3 b { font-weight: 700; color: var(--navy); }
.why__warranty ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.why__warranty li { position: relative; padding-left: 1.2rem; font-size: var(--fs-small); color: var(--body); }
.why__warranty li::before { content: ''; position: absolute; left: 0; top: .55rem; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }

/* ════════════ GALLERY · Morin projects ════════════ */
.gallery { padding: 7rem 0 6rem; background: var(--paper); overflow: clip; }
.projects {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad);
  display: grid; gap: 1.2rem;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 175px;
}
.proj { position: relative; display: block; border-radius: 14px; overflow: clip; background: var(--mist); color: #fff; }
.proj img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1s var(--ease); will-change: transform; }
.proj:hover img { transform: scale(1.12); }
.proj__cap {
  position: absolute; left: 1.1rem; bottom: 1.1rem; right: 1.1rem; z-index: 1;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem;
}
.proj__cap > div {
  background: rgba(32, 45, 89, .82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-radius: 10px; padding: .75rem 1rem .8rem;
  transition: background .5s;
}
.proj:hover .proj__cap > div { background: rgba(32, 45, 89, .94); }
.proj__name { font-size: 1.15rem; color: #fff; line-height: 1.2; }
.proj__meta { margin-top: .3rem; font-size: var(--fs-min); letter-spacing: .1em; text-transform: uppercase; color: var(--sky); }
.proj__go {
  flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--orange); color: var(--navy);
  opacity: 0; transform: translateX(8px); transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.proj__go svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.proj:hover .proj__go, .proj:focus-visible .proj__go { opacity: 1; transform: none; }
.p1 { grid-column: span 7; grid-row: span 2; }
.p2 { grid-column: span 5; grid-row: span 2; }
.p3, .p4, .p5 { grid-column: span 4; grid-row: span 2; }
.p6, .p7, .p8, .p9 { grid-column: span 3; grid-row: span 2; }
.gallery__foot { max-width: var(--maxw); margin: 2.6rem auto 0; padding: 0 var(--pad); display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap; color: var(--mute); }
.gallery__foot a { color: var(--navy); display: inline-flex; align-items: center; gap: .5rem; }
.gallery__foot a i { font-style: normal; transition: transform .4s var(--ease); }
.gallery__foot a:hover { color: var(--orange); }
.gallery__foot a:hover i { transform: translateX(5px); }

/* ════════════ BIM ════════════ */
.bim { max-width: var(--maxw); margin: 0 auto; padding: 7rem var(--pad) 8rem; display: grid; grid-template-columns: 1.05fr 1fr; gap: 4rem; align-items: center; }
.bim__media { position: relative; display: grid; place-items: center; border-radius: 18px; overflow: clip; background: var(--navy); min-height: 480px; }
/* width/height in the HTML reserve the box before the lazy image arrives (a
   late box pushed the #interest anchor down mid-scroll); contain keeps the
   render at the size the old auto box gave it when max-height clamps */
.bim__media img {
  position: relative; z-index: 1; width: 100%; height: auto; max-height: 520px; padding: 2rem; object-fit: contain;
  filter: grayscale(1) sepia(.3) hue-rotate(155deg) saturate(2.1) brightness(1.28) contrast(1.08) drop-shadow(0 30px 50px rgba(0, 0, 0, .5));
  mix-blend-mode: screen; opacity: .92;
}
.bim__copy h2 { margin-bottom: 1.2rem; }
.bim__copy > p { max-width: 34em; }
.bim__blocks { margin: 2.2rem 0 0; display: grid; }
.bimrow {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem;
  padding: 1.4rem 0; border-top: 1px solid var(--line);
  transition: transform .45s var(--ease);
}
.bimrow:last-child { border-bottom: 1px solid var(--line); }
.bimrow:hover { transform: translateX(8px); }
.bimrow h3 { font-size: 1.2rem; margin-bottom: .3rem; }
.bimrow p { font-size: 1rem; max-width: 30em; }
.bimrow__cta { color: var(--navy); white-space: nowrap; display: inline-flex; gap: .5rem; align-items: center; }
.bimrow__cta i { font-style: normal; transition: transform .4s var(--ease); }
.bimrow:hover .bimrow__cta { color: var(--orange); }
.bimrow:hover .bimrow__cta i { transform: translateX(5px); }

/* ════════════ VERSUS · drag to compare ════════════ */
.versus { padding: 7rem 0 6rem; background: var(--mist); }
.versus__stage {
  position: relative; max-width: var(--maxw); margin: 0 auto;
  height: clamp(420px, 60vh, 560px);
  border-radius: 18px; overflow: clip;
  box-shadow: 0 0 0 1px var(--line), 0 30px 70px -40px rgba(26, 26, 26, .25);
  touch-action: none; cursor: ew-resize; user-select: none;
  width: calc(100% - 2 * var(--pad));
}
.versus__pane { position: absolute; inset: 0; }
.versus__pane--old { background: #EEF0F4; }
.versus__pane--new { background: #ffffff; clip-path: inset(0 0 0 var(--vx, 50%)); }
.versus__net { position: absolute; inset: 12% 0; width: 100%; height: 76%; }
.versus__chaos path { fill: none; stroke: rgba(26, 26, 26, .45); stroke-width: 1.6; stroke-dasharray: 7 7; animation: dashflow 2.6s linear infinite; }
.versus__chaos path:nth-child(2) { animation-duration: 3.4s; stroke: rgba(26, 26, 26, .34); }
.versus__chaos path:nth-child(3) { animation-duration: 2.9s; stroke: rgba(26, 26, 26, .4); }
.versus__chaos path:nth-child(4) { animation-duration: 3.8s; stroke: rgba(26, 26, 26, .28); }
@keyframes dashflow { to { stroke-dashoffset: -28; } }
.versus__one { fill: none; stroke: var(--navy); stroke-width: 3.4; stroke-linecap: round; stroke-dasharray: 14 10; animation: dashflow 1.6s linear infinite; }
.vdot { position: absolute; left: var(--dx); top: var(--dy); width: 10px; height: 10px; border-radius: 50%; transform: translate(-50%, -50%); background: #3A4150; box-shadow: 0 0 0 3px rgba(255, 255, 255, .8); }
.vdot--lg { width: 16px; height: 16px; }
.vdot--brand { background: var(--orange); box-shadow: 0 0 0 3px rgba(255, 255, 255, .9); }
.versus__brand { position: absolute; top: 1.45rem; right: 1.8rem; height: 26px; width: auto; }
.versus__tag { position: absolute; top: 1.6rem; left: 1.8rem; font-size: var(--fs-min); letter-spacing: .2em; text-transform: uppercase; color: var(--mute); }
.versus__pane--new .versus__tag { left: auto; right: 1.8rem; }
.versus__facts { position: absolute; bottom: 1.6rem; left: 1.8rem; max-width: 36%; display: grid; gap: .55rem; }
.versus__facts li { font-size: 1rem; color: var(--body); padding-left: 1.2rem; position: relative; }
.versus__facts li::before { content: '×'; position: absolute; left: 0; color: #A34A3F; font-weight: 700; }
.versus__facts--new { left: auto; right: 1.8rem; text-align: right; }
.versus__facts--new li { padding-left: 0; padding-right: 1.2rem; }
.versus__facts--new li::before { content: '✓'; left: auto; right: 0; color: var(--navy); }
.versus__handle { position: absolute; top: 0; bottom: 0; left: var(--vx, 50%); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; pointer-events: none; z-index: 3; }
.versus__handle i { flex: 1; width: 2px; background: var(--navy); }
.versus__handle b {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; color: var(--navy);
  box-shadow: 0 10px 26px -8px rgba(26, 26, 26, .45), 0 0 0 1.5px rgba(32, 45, 89, .2);
}
.versus__handle b svg { width: 22px; height: 22px; }
.versus__endlab { position: absolute; top: 50%; transform: translateY(-160%); color: var(--mute); z-index: 2; }
.versus__endlab--l { left: 2rem; }
.versus__endlab--r { right: 2rem; }
.versus__hint { text-align: center; margin-top: 1.6rem; color: var(--mute); }

/* ════════════ CTA · copy left, 3D right, one soft blue background ════════════ */
.cta {
  position: relative; min-height: 100vh; display: grid; align-items: center;
  padding: 8rem 0; overflow: clip;
  background: linear-gradient(165deg, #ffffff 0%, var(--sky-soft) 60%, #EEF2FA 100%);
}
.cta__inner { max-width: var(--maxw); width: 100%; margin: 0 auto; padding: 0 var(--pad); display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.cta__body { position: relative; z-index: 1; max-width: 560px; }
.cta__title { font-size: clamp(2.2rem, 4.4vw, 3.9rem); letter-spacing: -.02em; }
.cta__sub { margin-top: 1.4rem; font-size: 1.125rem; color: var(--body); max-width: 28em; }
.cta__actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2.6rem; }
.cta__note { margin-top: 2.4rem; color: var(--mute); }
.cta__render { position: relative; justify-self: end; width: min(44vw, 700px); pointer-events: none; }
.cta__render img { width: 100%; height: auto; }

/* ════════════ INTEREST · the page's own form in front of Morin's Formstack ════════════
   same reading as Morin's own form pages (morincorp.com/coffee): white card,
   labelled fields, sky focus ring, orange submit with navy text, the error
   box with a red rule, the thank-you state with an orange check            */
.interest { padding: 7rem 0 7.5rem; background: var(--mist); scroll-margin-top: 1.5rem; }
.interest__inner {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad);
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 4rem; align-items: center;
}
.interest__copy h2 { max-width: 11em; }
.interest__copy > p:not(.eyebrow) { margin-top: 1.3rem; font-size: 1.125rem; line-height: 1.6; color: var(--copy); max-width: 26em; }
.interest__card {
  background: #fff; border-radius: 16px; padding: 2.2rem 2.3rem 2.1rem;
  box-shadow: 0 0 0 1px var(--line), 0 30px 60px -40px rgba(26, 26, 26, .25);
}
.iform__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1.2rem; }
.field { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.field label { font-size: var(--fs-min); line-height: 1.3; color: var(--ink); }
.field label i, .iform__req i { font-style: normal; color: #B5443A; }
.field .opt { color: var(--mute); }
/* 16 px in the fields: iOS zooms the page into any smaller input */
.field input, .field select {
  width: 100%; height: 46px; padding: 0 .9rem;
  font: 400 1rem/1.2 var(--sans); color: var(--ink);
  background: #fff; border: 1px solid #C5CBD8; border-radius: 8px;
  appearance: none; -webkit-appearance: none;
  transition: border-color .2s, box-shadow .2s;
}
.field select {
  padding-right: 2.4rem; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23202D59' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right .8rem center / 15px;
}
.field input:hover, .field select:hover { border-color: #9AA2B4; }
.field input:focus, .field select:focus { outline: none; border-color: var(--sky); box-shadow: 0 0 0 3px rgba(109, 192, 236, .3); }
.field .hint { font-size: var(--fs-min); line-height: 1.35; color: var(--mute); }
.field .msg { font-size: var(--fs-min); line-height: 1.35; color: #B5443A; }
.field .msg:empty { display: none; }
.field.bad input, .field.bad select { border-color: #B5443A; }
.field.bad input:focus, .field.bad select:focus { box-shadow: 0 0 0 3px rgba(181, 68, 58, .16); }

/* consent: the real checkbox sits invisible over the drawn box */
.chk {
  position: relative; display: flex; align-items: flex-start; gap: .75rem;
  margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--line-soft);
  font-size: var(--fs-min); line-height: 1.5; color: var(--body); cursor: pointer;
}
.chk input { position: absolute; left: 0; top: calc(1.2rem + 1px); width: 20px; height: 20px; margin: 0; opacity: 0; cursor: pointer; }
.chk__box {
  flex: none; width: 20px; height: 20px; margin-top: 1px; display: grid; place-items: center;
  border: 1.5px solid #8A93A8; border-radius: 5px; background: #fff; transition: background .2s, border-color .2s;
}
.chk__box::after {
  content: ''; width: 10px; height: 5.5px; margin-top: -2px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); opacity: 0;
}
.chk input:checked + .chk__box { background: var(--navy); border-color: var(--navy); }
.chk input:checked + .chk__box::after { opacity: 1; }
.chk input:focus-visible + .chk__box { outline: 2px solid var(--sky); outline-offset: 2px; }
.chk__text a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }
.chk__text a:hover { color: var(--orange); }

.errbox {
  margin-top: 1.2rem; padding: .8rem 1rem; border-left: 3px solid #B5443A; border-radius: 0 8px 8px 0;
  background: #FBF3F2; font-size: var(--fs-small); line-height: 1.5; color: #8E3128;
}
.errbox a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.iform__actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; flex-wrap: wrap; margin-top: 1.6rem; }
.iform__submit {
  min-width: 200px; min-height: 48px; padding: .8rem 2rem; border: 0; border-radius: 9px; cursor: pointer;
  font: 400 1rem/1.2 var(--sans); color: var(--navy); background: var(--orange);
  transition: background .25s, transform .35s var(--ease), box-shadow .35s var(--ease), opacity .25s;
}
.iform__submit:hover { background: #F2A73F; transform: translateY(-2px); box-shadow: 0 14px 28px -16px rgba(246, 154, 27, .8); }
.iform__submit:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.iform__submit:disabled, .iform__submit.is-busy { opacity: .7; cursor: progress; transform: none; box-shadow: none; }
.iform__req { font-size: var(--fs-min); color: var(--mute); }

/* thank-you state, in place of the form */
.state { padding: .6rem 0 .4rem; outline: none; }
.state__icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 1.1rem; border-radius: 50%; background: var(--orange); }
.state__icon svg { width: 22px; height: 22px; fill: none; stroke: var(--navy); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.state h3 { font-size: clamp(1.4rem, 2vw, 1.7rem); max-width: 18em; }
.state p { margin-top: .8rem; font-size: 1.0625rem; line-height: 1.6; color: var(--copy); max-width: 32em; }

/* ════════════ FOOTER · same structure as morincorp.com ════════════ */
.footer { background: var(--navy); color: rgba(255, 255, 255, .8); position: relative; z-index: 2; }
.footer__top {
  max-width: var(--maxw); margin: 0 auto; padding: 4rem var(--pad) 2.6rem;
  display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.footer__logo { height: 34px; }
.footer__social { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.footer__social p { color: #fff; }
.footer__social p b { font-weight: 700; }
.footer__social ul { display: flex; gap: .6rem; }
.footer__social li a {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid rgba(255, 255, 255, .35); color: #fff; transition: background .35s, border-color .35s, color .35s;
}
.footer__social li a:hover { background: #fff; border-color: #fff; color: var(--navy); }
.footer__social svg { width: 18px; height: 18px; fill: currentColor; }
.footer__grid {
  max-width: var(--maxw); margin: 0 auto; padding: 3rem var(--pad) 3rem;
  display: grid; grid-template-columns: 1.2fr 1.2fr 1.8fr 1fr; gap: 2rem;
}
.footer__grid h4 { color: #fff; font-size: 1.05rem; font-weight: 700; margin-bottom: .9rem; }
.footer__grid li { line-height: 2.05; }
.footer__grid a { color: rgba(255, 255, 255, .8); font-size: var(--fs-small); transition: color .3s; }
.footer__grid a:hover { color: var(--sky); }
.footer__country {
  display: inline-flex; align-items: center; gap: .7rem; padding: .85rem 1.5rem;
  border: 1.5px solid #fff; border-radius: 999px; color: #fff; font-size: var(--fs-small);
  transition: background .35s, color .35s;
}
.footer__country svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.footer__country:hover { background: #fff; color: var(--navy); }
.footer__base {
  border-top: 1px solid rgba(255, 255, 255, .14);
  max-width: var(--maxw); margin: 0 auto; padding: 1.7rem var(--pad) 2.4rem;
  display: flex; justify-content: space-between; gap: 1.2rem 2rem; flex-wrap: wrap;
  font-size: var(--fs-min); color: #B3C7DC;
}
.footer__base b { color: #fff; font-weight: 700; }
.footer__base a { color: #fff; }
.footer__base a:hover { color: var(--sky); }
.footer__legal { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad) 2.2rem; font-size: var(--fs-min); color: #B3C7DC; }

/* ════════════ responsive ════════════ */
@media (max-width: 1120px) {
  .interest__inner { grid-template-columns: 1fr; gap: 2.6rem; }
  .products__grid { grid-template-columns: repeat(2, 1fr); }
  .why__grid { grid-template-columns: repeat(2, 1fr); }
  .why__warranty > div { grid-template-columns: 1fr; gap: 1.4rem; }
  .why__warranty ul { grid-template-columns: 1fr; gap: .8rem; }
  .bim { grid-template-columns: 1fr; gap: 3rem; }
  .p1 { grid-column: span 12; }
  .p2 { grid-column: span 12; }
  .p3, .p4 { grid-column: span 6; }
  .p5 { grid-column: span 12; }
  .p6, .p7, .p8, .p9 { grid-column: span 6; }
  .cta__inner { grid-template-columns: 1fr; }
  .cta__render { justify-self: center; width: min(80vw, 640px); }
  .footer__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  body { font-size: 1rem; }
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: flex; flex-direction: column; gap: 5px; margin-left: auto; background: none; border: 0; padding: .5rem; cursor: pointer; }
  .nav__toggle span { width: 24px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .4s var(--ease); }
  .nav__toggle[aria-expanded="true"] span:first-child { transform: translateY(7px) rotate(45deg); }
  .nav__toggle[aria-expanded="true"] span:last-child { transform: translateY(-7px) rotate(-45deg); }

  .hero::after {
    content: ''; position: absolute; inset: 34% 0 0; z-index: 1; pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .78) 40%, rgba(255, 255, 255, .9));
  }
  .hero__content { padding-top: 6.4rem; padding-bottom: 2rem; }
  .hero__sub { font-size: 1rem; }
  .hero__foot { position: static; flex-direction: column; align-items: stretch; gap: 1.2rem; padding-bottom: 2.4rem; margin-top: auto; }
  .hero__scrollcue { display: none; }
  /* the four booth indicators in a 2 x 2 grid under the copy */
  .hero__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1.5rem; }
  .hstat__val { font-size: 1.45rem; }
  .hstat__cap { font-size: var(--fs-min); }
  .hero { padding-bottom: 0; }
  .hero__cta .btn--ghost { background: rgba(255, 255, 255, .82); }

  .viewer { padding: 5rem 0 4rem; }
  .viewer__frame { height: min(480px, max(220px, 62vh)); height: min(480px, max(220px, 62svh)); }
  .interest { padding: 5rem 0; }
  .interest__card { padding: 1.5rem 1.25rem; }
  .iform__grid { grid-template-columns: 1fr; }
  .iform__submit { width: 100%; }
  .statement { min-height: 110vh; }
  .statement__ghost { -webkit-text-stroke-width: 1px; }
  .products { padding: 5rem 0; }
  .products__grid { grid-template-columns: 1fr; }
  .why { padding: 5rem 0; }
  .why__grid { grid-template-columns: 1fr; }
  .gallery { padding: 5rem 0 4rem; }
  .projects { grid-auto-rows: 130px; gap: .9rem; }
  .p1, .p2, .p3, .p4, .p5, .p6, .p7, .p8, .p9 { grid-column: span 12; grid-row: span 2; }
  .p6, .p7, .p8, .p9 { grid-column: span 6; }
  .proj__go { display: none; }
  .bim { padding: 5rem var(--pad) 6rem; }
  .bim__media { min-height: 340px; }
  .versus { padding: 5rem 0 4rem; }
  .versus__stage { height: 420px; }
  .versus__tag { left: 1rem; max-width: calc(50% - 1.5rem); font-size: var(--fs-min); letter-spacing: .14em; line-height: 1.3; }   /* wraps to two lines, never under 14 px */
  .versus__tag .nowrap { white-space: nowrap; }   /* break between the words, never at the hyphen */
  .versus__pane--new .versus__tag { right: 1rem; }
  .versus__brand { right: 1rem; height: 20px; }
  .versus__facts { left: 1rem; max-width: calc(50% - 1.8rem); gap: .45rem; }
  .versus__facts--new { left: auto; right: 1rem; max-width: calc(42% - 1.8rem); }   /* the idle sweep parks the handle at 58% */
  .versus__facts { bottom: 1rem; }
  .versus__net { inset: 8% 0 auto; height: 44%; }
  .vdot { top: calc(8% + var(--dy) * .44); }
  .versus__facts li { font-size: var(--fs-min); }
  .versus__endlab { display: none; }
  .versus__handle i:first-child { flex: 0 0 calc(30% - 24px); }   /* knob on the line: the net sits at 8%..52% here */
  .statement__cap { bottom: 2rem; right: var(--pad); }
  .cta { padding: 6rem 0 4rem; min-height: 0; }
  .cta__actions { flex-direction: column; align-items: stretch; }
  .footer__grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer__base { flex-direction: column; }
}
/* tablets in portrait: the four indicators fit on one row */
@media (min-width: 700px) and (max-width: 820px) {
  .hero__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
}
/* the system section on mobile AND on short landscape viewports (a phone
   held sideways): copy column across the full width, anchored at the
   foot, with the wall framed into the free band (main.js setFrames)     */
@media (max-width: 820px), (max-height: 520px) and (orientation: landscape) {
  .system { height: 915vh; }   /* 106 s of story, as on desktop (was 800vh for 91 s) */
  .system__col {
    left: 0; right: 0; top: auto; bottom: 0; margin: 0; height: auto;
    width: 100%; padding: 1rem var(--pad) 1.2rem;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .92) 24%);
  }
  /* the opening copy carries the column's veil, mirrored: on short phones
     the top of the wall meets the paragraph, and the insulation boards
     rise behind it on their way out of frame as the wall opens          */
  .system__col.system__head { top: 0; bottom: auto; padding-top: 5.6rem; text-align: center; background: linear-gradient(0deg, transparent, rgba(255, 255, 255, .92) 1.2rem); }
  .system__title { font-size: clamp(1.7rem, 7vw, 2.2rem); }
  .system__sub { margin-left: auto; margin-right: auto; font-size: 1rem; }
  .system__spine { margin-bottom: 1rem; }
  .system__steps { height: auto; display: grid; }
  .rstep { position: relative; inset: auto; grid-area: 1 / 1; }
  .rstep__band { padding: .9rem 1.1rem 1rem; }
  .rstep__name { font-size: 1.4rem; }
  .rstep__desc { margin-top: .8rem; font-size: var(--fs-small); }
  .rstep__alt { margin-top: .7rem; padding: .7rem .85rem; }
  .rstep__hl li { font-size: var(--fs-min); padding: .4rem 0 .4rem 1.15rem; }
  .rstep__hl li::before { top: calc(.4rem + .775em - 4px); }
  /* fire block: the product name is already in the paragraph, so the card
     keeps the photo, the three facts and the data sheet link             */
  .system__fire .eyebrow { display: none; }
  .system__fire h3 { font-size: 1.25rem; }
  .system__fire > p:not(.eyebrow) { margin-top: .7rem; font-size: var(--fs-small); line-height: 1.55; }
  .firecard { margin-top: .9rem; grid-template-columns: 76px minmax(0, 1fr); gap: .85rem; padding: .7rem .8rem .8rem .7rem; }
  .firecard__img { min-height: 76px; border-radius: 8px; }
  .firecard__img img { padding: .3rem; }
  .firecard__body h4 { display: none; }
  .firecard__body ul { margin-top: 0; }
  .firecard__body li { font-size: var(--fs-min); padding: .3rem 0 .3rem 1rem; line-height: 1.4; }
  .firecard__body li::before { top: calc(.3rem + .7em - 3.5px); }
  .firecard__body a.label { margin-top: .4rem; }
  .rstep__alt-img { display: none; position: static; width: min(240px, 60vw); opacity: 1; transform: none; margin-top: .7rem; padding: 0; border: 0; box-shadow: none; background: transparent; pointer-events: auto; }
  .rstep__alt.is-open .rstep__alt-img { display: block; }
  .system__finale h3 { font-size: 1.6rem; }
  .system__finale p { font-size: var(--fs-small); }
  .system__finale .btn { margin-top: 1.4rem; }
  .hs, .hs.is-left { transform: translate(-50%, -50%); flex-direction: row; }
  .hs b { width: 22px; height: 22px; flex-basis: 22px; }
  .hs span { display: none; }
  .hs-legend { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem .8rem; margin-bottom: 1rem; }
}
/* short viewports: the bottom-anchored column would be taller than the
   screen, so the copy takes the left half beside the wall, the framing
   band is measured horizontally, and the highlights list is dropped    */
@media (max-height: 520px) and (orientation: landscape) {
  /* hero: the wordmark must end before the wall, which starts near mid-screen */
  .hero__content { padding-top: 5rem; }
  .hero__wordmark { height: clamp(48px, 8vw, 110px); margin: .6rem 0 1.4rem; }
  .system__col {
    left: var(--pad); right: auto; top: 0; bottom: 0; margin: auto 0; height: fit-content;
    width: 46%; padding: 0; background: none;
  }
  .system__col.system__head { top: 0; bottom: 0; padding-top: 0; text-align: left; background: none; }
  .system__col.system__finale { width: 56%; }   /* room for the legend's two columns */
  .system__col.system__fire { width: 56%; }
  /* fire block: like the steps, the facts list is dropped and the card
     keeps the photo, the product name and the data sheet link          */
  .system__fire h3 { font-size: 1.15rem; }
  .system__fire > p:not(.eyebrow) { margin-top: .5rem; line-height: 1.5; }
  .firecard { margin-top: .7rem; grid-template-columns: 64px minmax(0, 1fr); align-items: center; }
  .firecard__img { min-height: 64px; }
  .firecard__body h4 { display: block; font-size: 1rem; }
  .firecard__body ul { display: none; }
  .system__sub { margin-left: 0; margin-right: 0; }
  .system__spine { margin-bottom: .8rem; }
  .rstep__band { padding: .7rem .9rem .8rem; }
  .rstep__name { font-size: 1.2rem; }
  .rstep__desc { margin-top: .6rem; }
  .rstep__hl { display: none; }
  .rstep__alt { margin-top: .6rem; }
  .rstep__alt-desc { display: none; }
  .rstep__alt-img { width: min(150px, 28vh); margin-top: .5rem; }
  .system__finale .eyebrow { display: none; }   /* the legend already labels the block */
  .system__finale h3 { font-size: 1.3rem; }
  .system__finale p { margin-top: .7rem; }
  .system__finale .btn { margin-top: .8rem; }
  .hs-legend { margin-bottom: .9rem; gap: .2rem .6rem; }
  .viewer__frame { height: max(240px, 80vh); height: max(240px, 80svh); }
}
@media (max-width: 560px) {
  .versus__stage { height: 540px; }   /* the fact lists wrap to 4 lines each and must stay under the diagram */
  .hero__cta .btn { width: 100%; }
  .hero__title { font-size: clamp(1.9rem, 8.6vw, 2.35rem); }
  .statement__title { font-size: clamp(2rem, 9vw, 2.5rem); }
  .p6, .p7, .p8, .p9 { grid-column: span 12; }
}

/* ════════════ reduced motion ════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .system { height: auto; }
  .system__stage { position: relative; height: auto; padding: 6rem 0; }
  /* every offset, width and grid rule from the mobile and short-landscape
     blocks is reset here too, since those queries can match at the same time */
  .system__col { position: relative; top: auto; bottom: auto; left: auto; right: auto; height: auto; width: min(640px, 100%); margin: 0 auto; padding: 0 var(--pad); background: none; }
  .system__col.system__head { background: none; }
  .system__col.system__finale, .system__col.system__fire { width: min(640px, 100%); }
  .system__rail, .system__fire, .system__finale { opacity: 1; margin-top: 3rem; pointer-events: auto; }
  .firecard__body ul, .firecard__body h4 { display: block; }
  .system__fire .eyebrow { display: flex; }
  .rstep { position: relative; inset: auto; grid-area: auto; opacity: 1; transform: none; margin-bottom: 2.5rem; pointer-events: auto; }
  .system__steps { height: auto; display: block; }
  #wallCanvas, .wipe { display: none; }
  .pcard { opacity: 1; transform: none; }
  .statement__fill { clip-path: none; }
  .statement__veil { opacity: 1; }
}