/* ============================================================
   Build With Alivio — assets/style.css
   Hand-written. No framework, no build step, no dependencies.
   ============================================================ */

/* ---------- 1. Tokens ------------------------------------- */

:root {
  /* Palette follows the structural reference: near-black over warm cream, with
     a split accent. Lime is far too light to read as text on cream (~1.3:1), so
     it is confined to dark surfaces and button fills, and violet carries accent
     duty on light ones. That split is how the reference does it too. */
  --ink:         #1B1B1C;   /* near-black — dominant surface and body text */
  --ink-2:       #343436;   /* secondary dark */
  --ink-deep:    #1B1B1C;   /* hero, header, dark bands */
  --ink-deeper:  #121213;   /* top bar, footer */

  --accent:      #5708D3;   /* violet — accent on LIGHT surfaces: links, eyebrows */
  --accent-2:    #8C58E0;   /* mid violet — gradient partner */
  --accent-soft: #A67AEC;   /* light violet — accent text on DARK surfaces */
  --lime:        #BAE533;   /* lime — button fills and accent on dark only */
  --lime-ink:    #1B1B1C;   /* the only text colour legible on lime */

  --paper:       #FCF7F3;   /* warm cream */
  --paper-2:     #F1EBE5;   /* tinted cream */

  /* Derived */
  --line:       rgba(255, 255, 255, .16);
  --line-dark:  rgba(27, 27, 28, .14);

  /* Three-step text scale per surface, following the shadcn
     foreground / muted-foreground convention. The site previously had only
     two steps — heading and body — which left captions, labels, metric
     subtitles and form hints all sharing the body colour and flattening the
     hierarchy. Every value below is AA-verified against its own surface.  */
  --text-1:      #FCF7F3;                    /* headings on dark */
  --text-2:      rgba(252, 247, 243, .74);   /* body on dark */
  --text-3:      rgba(252, 247, 243, .56);   /* captions, labels on dark */

  --text-d1:     #1B1B1C;                    /* headings on light */
  --text-d2:     rgba(27, 27, 28, .74);      /* body on light */
  --text-d3:     rgba(27, 27, 28, .62);      /* captions, labels on light */

  /* Kept as aliases so existing rules keep working. */
  --muted:      var(--text-2);
  --muted-dark: var(--text-d2);

  /* Type */
  --font-head: "Avenir Next", Avenir, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --h-xl: clamp(2.9rem, 7.4vw, 6.1rem);
  --h-lg: clamp(2.3rem, 4.9vw, 3.9rem);
  --h-md: clamp(1.75rem, 3.1vw, 2.6rem);
  --h-sm: clamp(1.25rem, 2vw, 1.55rem);

  /* Rhythm — measured off the structural reference, which runs a 1440 container
     and 80–100px band padding rather than the airier values used at first. */
  --shell: 1380px;
  --gutter: clamp(20px, 5vw, 56px);
  --band: clamp(64px, 7vw, 104px);
  --band-tight: clamp(48px, 5vw, 76px);

  /* Motion */
  --ease: cubic-bezier(.22, .61, .36, 1);

  /* Radii — the reference is square-ish throughout: 4px buttons, 8px tiles,
     and no pills at all. Softer corners were the single biggest thing making
     this read as a different design language. */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-pill: 4px;
}

/* ---------- 2. Reset -------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: 164px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

/* Light and open rather than heavy and condensed — the reference sets its 76px
   h1 at weight 400 with normal tracking and 1.2 leading, and that airiness is
   most of what makes it feel editorial instead of shouty. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -.012em;
  margin: 0;
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

img, svg, video, canvas { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

input, select, textarea {
  font: inherit;
  color: inherit;
}

hr { border: 0; border-top: 1px solid var(--line-dark); margin: 0; }

/* Focus — visible everywhere, never removed. */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
.on-dark :focus-visible,
.hero :focus-visible,
.site-header :focus-visible,
.topbar :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--accent-soft);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--accent);
  color: #fff;
  padding: 12px 20px;
  font-family: var(--font-head);
  font-weight: 700;
  border-radius: 0 0 var(--r-sm) 0;
}
.skip-link: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;
}

/* ---------- 3. Layout primitives -------------------------- */

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

.band { padding-block: var(--band); }
.band-tight { padding-block: var(--band-tight); }

.on-dark { background: var(--ink-deep); color: var(--paper); }
.on-ink { background: var(--ink); color: var(--paper); }
.on-tint { background: var(--paper-2); }

.eyebrow {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}
.on-dark .eyebrow, .on-ink .eyebrow { color: var(--lime); }

.label-track {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}

.h-xl { font-size: var(--h-xl); }
.h-lg { font-size: var(--h-lg); }
.h-md { font-size: var(--h-md); }
.h-sm { font-size: var(--h-sm); }

.lede {
  font-size: clamp(1.05rem, 1.4vw, 1.22rem);
  line-height: 1.6;
  color: var(--muted-dark);
}
.on-dark .lede, .on-ink .lede { color: var(--muted); }

.measure-34 { max-width: 34ch; }
.measure-52 { max-width: 52ch; }
.measure-60 { max-width: 60ch; }
.measure-15 { max-width: 15ch; }

/* ---------- 4. Buttons ------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .97rem;
  letter-spacing: -.01em;
  padding: 15px 26px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  transition: transform .3s var(--ease), background-color .3s var(--ease),
              border-color .3s var(--ease), color .3s var(--ease);
  will-change: transform;
}

.btn svg { transition: transform .3s var(--ease); flex: none; }
.btn:hover { transform: translateY(-2px); }
.btn:hover svg { transform: translateX(4px); }

/* Lime fill with near-black text — the reference's signature call to action.
   Lime is only ever a background or a mark on dark; never body text. */
.btn-primary { background: var(--lime); color: var(--lime-ink); }
.btn-primary:hover { background: #C9EE55; }

.btn-violet { background: var(--accent); color: #fff; }
.btn-violet:hover { background: var(--accent-2); }

.btn-ghost {
  border-color: var(--line);
  color: var(--paper);
}
.btn-ghost:hover { border-color: var(--lime); background: rgba(186, 229, 51, .12); }

.btn-ghost-dark {
  border-color: var(--line-dark);
  color: var(--ink);
}
.btn-ghost-dark:hover { border-color: var(--accent); background: rgba(87, 8, 211, .07); }

.btn-white { background: #fff; color: var(--ink); }
.btn-white:hover { background: var(--paper-2); }

.btn-sm { padding: 11px 20px; font-size: .88rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

.link-underline {
  color: var(--accent-soft);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  transition: color .25s var(--ease);
}
.link-underline:hover { color: #fff; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--accent);
  transition: gap .25s var(--ease);
}
.link-arrow:hover { gap: 13px; }
.on-dark .link-arrow, .on-ink .link-arrow { color: var(--accent-soft); }

/* ---------- 5. Dot grids (decorative) --------------------- */

.dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(166, 122, 236, .5) 1px, transparent 1px);
  background-size: 16px 16px;
  opacity: .32;
}

/* Faint square grid — the reference uses ruled lines behind its hero rather
   than a dot field, which reads as engineered rather than decorative. */
.grid-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(166, 122, 236, .16) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(166, 122, 236, .16) 1px, transparent 1px);
  background-size: 118px 118px;
  opacity: .8;
}

.dots-dark {
  background-image: radial-gradient(rgba(27, 27, 28, .3) 1px, transparent 1px);
  opacity: .5;
}

.dots-mask-hero {
  -webkit-mask-image: linear-gradient(105deg, transparent 8%, #000 46%, transparent 86%);
  mask-image: linear-gradient(105deg, transparent 8%, #000 46%, transparent 86%);
}

.dots-mask-radial {
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 68%);
  mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 68%);
}

.dots-white {
  background-image: radial-gradient(rgba(255, 255, 255, .55) 1px, transparent 1px);
  background-size: 14px 14px;
  opacity: .3;
}

/* ---------- 6. Top bar ------------------------------------ */

.topbar {
  background: var(--ink-deeper);
  color: var(--muted);
  font-size: .8rem;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.topbar-inner {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.topbar-links { display: flex; align-items: center; gap: 26px; }
.topbar-links a { transition: color .25s var(--ease); }
.topbar-links a:hover { color: var(--accent-soft); }

/* ---------- 7. Header ------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--ink-deep);
  color: var(--paper);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .35s var(--ease);
}
.site-header.is-scrolled { box-shadow: 0 14px 40px rgba(0, 6, 28, .45); }

.header-inner {
  min-height: 120px;
  display: flex;
  align-items: center;
  gap: 28px;
}

/* Logo lockup */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  flex: none;
  font-family: var(--font-head);
  font-size: 1.42rem;
  letter-spacing: -.03em;
  line-height: 1;
}
.logo-mark { width: 42px; height: 42px; flex: none; overflow: visible; }
.logo-mark path { stroke: var(--lime); }
.logo-mark circle { fill: var(--accent-soft); }
.logo-word { font-weight: 700; color: var(--paper); }
.logo-word span { font-weight: 400; color: var(--accent-soft); margin-left: .3em; }

/* Logo draw-in */
.logo-mark[data-draw] path {
  stroke-dasharray: var(--dash, 200);
  stroke-dashoffset: var(--dash, 200);
  animation: draw 1.5s var(--ease) forwards;
}
.logo-mark[data-draw] circle {
  transform-origin: 57px 32px;
  transform: scale(0);
  animation: pop .5s var(--ease) 1.35s forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pop  { 60% { transform: scale(1.3); } to { transform: scale(1); } }

/* Nav */
/* The nav items span the bar's full height so the mega menu hangs off the bar's
   bottom edge instead of off the link. Anchoring it to the link means it drifts
   into the bar whenever the bar's height changes. */
.primary-nav { margin-inline: auto; align-self: stretch; display: flex; }
.nav-list { display: flex; align-items: stretch; gap: 4px; }
.nav-list > li { display: flex; align-items: center; }

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .97rem;
  padding: 10px 15px;
  border-radius: var(--r-sm);
  color: var(--paper);
  transition: color .25s var(--ease), background-color .25s var(--ease);
}
.nav-link:hover { color: var(--accent-soft); background: rgba(255, 255, 255, .05); }
.nav-link[aria-current="page"] { color: var(--accent-soft); }
.nav-link .caret { transition: transform .3s var(--ease); }

.header-actions { display: flex; align-items: center; gap: 12px; flex: none; }

/* Mega menu */
.has-mega { position: relative; }

.mega {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  width: 760px;
  max-width: calc(100vw - 40px);
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 32px;
  box-shadow: 0 30px 70px rgba(0, 6, 28, .55);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
  z-index: 95;
}

.has-mega:hover .mega,
.has-mega:focus-within .mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.has-mega:hover .caret,
.has-mega:focus-within .caret { transform: rotate(180deg); }

.mega-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
}
.mega-col h3 {
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-soft);
  margin-bottom: 16px;
}
.mega-col li + li { margin-top: 2px; }
.mega-col a {
  display: block;
  padding: 10px 12px;
  margin-left: -12px;
  border-radius: var(--r-sm);
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 1rem;
  color: var(--paper);
  transition: background-color .22s var(--ease), color .22s var(--ease);
}
.mega-col a:hover { background: rgba(186, 229, 51, .14); color: var(--lime); }

.mega-cta {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.mega-cta p { color: var(--muted); font-size: .94rem; max-width: 40ch; }

/* Hamburger */
.nav-toggle {
  display: none;
  width: 46px;
  height: 46px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  place-items: center;
  flex: none;
  margin-left: auto;
}
.nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--paper);
  border-radius: 2px;
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.nav-toggle span + span { margin-top: 5px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer — the only fixed-position element on the site. */
.drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(420px, 88vw);
  background: var(--ink-deep);
  border-left: 1px solid var(--line);
  padding: 28px var(--gutter) 40px;
  overflow-y: auto;
  transform: translateX(100%);
  visibility: hidden;
  pointer-events: none;
  transition: transform .38s var(--ease), visibility 0s linear .38s;
  z-index: 120;
  display: none;
}
.drawer.is-open {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.drawer-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 6, 28, .6);
  opacity: 0;
  pointer-events: none;
  transition: opacity .38s var(--ease);
  z-index: 110;
  display: none;
}
.drawer-scrim.is-open { opacity: 1; pointer-events: auto; }

.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
}
.drawer-close {
  width: 42px; height: 42px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  color: var(--paper);
}
.drawer nav a {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.28rem;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  color: var(--paper);
}
.drawer nav a[aria-current="page"] { color: var(--accent-soft); }
.drawer-sub { padding: 6px 0 14px; }
.drawer-sub a {
  font-size: .98rem !important;
  font-weight: 400 !important;
  padding: 9px 0 !important;
  border-bottom: 0 !important;
  color: var(--muted) !important;
}
.drawer-actions { margin-top: 30px; display: grid; gap: 12px; }
.drawer-actions .btn { justify-content: center; }

/* ---------- 8. Hero --------------------------------------- */

.hero {
  position: relative;
  min-height: clamp(620px, 92vh, 940px);
  display: flex;
  align-items: center;
  background: var(--ink-deep);
  color: var(--paper);
  overflow: hidden;
  isolation: isolate;
}

.hero-canvas,
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -3;
}
.hero-video { z-index: -2; opacity: 0; transition: opacity 1.1s var(--ease); }
.hero-video.is-live { opacity: 1; }

.hero .dots { z-index: -1; }

/* Two scrims: one darkens the lower-left where the copy sits, one darkens the
   bottom edge. Both stay clear of the upper-right so the animation reads there.
   The stops are set by measurement, not taste — particles composite with
   'lighter' and can saturate toward white, so the copy column has to stay dark
   enough for hero text to hold AA contrast against the brightest frame. */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(100deg, rgba(27, 27, 28, .97) 0%, rgba(27, 27, 28, .95) 42%, rgba(27, 27, 28, .86) 64%, rgba(27, 27, 28, .34) 84%, transparent 100%),
    linear-gradient(to top, rgba(27, 27, 28, .94) 0%, rgba(27, 27, 28, .34) 46%, transparent 76%);
}

/* Narrow viewports have no bright upper-right to protect — the copy spans the
   full width, so the scrim covers the full width too. */
@media (max-width: 900px) {
  .hero-scrim {
    background:
      linear-gradient(100deg, rgba(27, 27, 28, .97) 0%, rgba(27, 27, 28, .95) 55%, rgba(27, 27, 28, .90) 100%),
      linear-gradient(to top, rgba(27, 27, 28, .94) 0%, rgba(27, 27, 28, .55) 55%, rgba(27, 27, 28, .3) 100%);
  }
}

.hero-inner { position: relative; z-index: 1; width: 100%; padding-block: clamp(56px, 8vw, 104px); }

/* The copy block sits against a vertical gradient rail, as in the structural
   reference — it anchors the left edge and gives the band a spine. */
.hero-copy {
  position: relative;
  padding-left: clamp(22px, 3vw, 44px);
}
.hero-copy::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 5px;
  border-radius: 3px;
  background: linear-gradient(to bottom, var(--lime) 0%, var(--accent-soft) 42%, var(--accent) 78%, rgba(87, 8, 211, 0) 100%);
}

.hero h1 { font-size: var(--h-xl); max-width: 15ch; margin-bottom: 30px; }
.hero h1 em { font-style: normal; color: var(--lime); }

/* Services read as a headline in their own right, directly under the h1 —
   not as a small label above it. This is the reference's key hero move. */
.hero-services {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: clamp(1.22rem, 2.35vw, 2.05rem);
  line-height: 1.34;
  letter-spacing: -.022em;
  color: var(--muted);
  max-width: 42ch;
  margin-bottom: 30px;
}
.hero-services a {
  color: var(--paper);
  text-decoration: underline;
  text-decoration-color: rgba(186, 229, 51, .55);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  transition: color .25s var(--ease), text-decoration-color .25s var(--ease);
}
.hero-services a:hover { color: var(--lime); text-decoration-color: var(--lime); }

.hero-sub {
  font-size: clamp(1.02rem, 1.35vw, 1.16rem);
  line-height: 1.62;
  color: var(--muted);
  max-width: 52ch;
  margin-bottom: 32px;
}

/* Hero stats */
.hero-stats {
  margin-top: clamp(52px, 7vw, 84px);
  padding-top: 34px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.hero-stat .n {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.9rem, 3.3vw, 2.75rem);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--paper);
  margin-bottom: 8px;
}
.hero-stat .t { font-size: .9rem; color: var(--text-3); line-height: 1.45; max-width: 22ch; }

/* Scroll cue */
.scroll-cue {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
}
.scroll-cue .rail {
  width: 1px;
  height: 46px;
  background: var(--line);
  position: relative;
  overflow: hidden;
}
.scroll-cue .rail::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  height: 18px;
  background: var(--lime);
  animation: cue 2.2s var(--ease) infinite;
}
@keyframes cue {
  0%   { transform: translateY(-20px); opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: translateY(46px); opacity: 0; }
}

/* ---------- 9. Marquee ------------------------------------ */

.marquee-band {
  background: var(--ink);
  color: var(--paper);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-block: 40px;
  overflow: hidden;
}
.marquee-band .label-track { text-align: center; margin-bottom: 26px; }

.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
           mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track {
  display: flex;
  width: max-content;
  animation: slide 34s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }

.marquee-item {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.25rem, 2.4vw, 1.9rem);
  letter-spacing: -.025em;
  color: var(--paper);
  padding-inline: clamp(24px, 3vw, 44px);
  display: inline-flex;
  align-items: center;
  gap: clamp(24px, 3vw, 44px);
  white-space: nowrap;
}
.marquee-item::after {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--lime);
  flex: none;
}
.marquee-icon {
  width: 30px; height: 30px;
  flex: none;
  color: var(--lime);
  opacity: .85;
}

/* ---------- 10. Why Alivio (indigo panel) ------------------ */

.why {
  position: relative;
  background: var(--accent);
  color: #fff;
  overflow: hidden;
}
.why-ring {
  position: absolute;
  top: -220px;
  right: -160px;
  width: 620px;
  height: 620px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  pointer-events: none;
}
.why-ring::after {
  content: "";
  position: absolute;
  inset: 84px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 50%;
}
.why .shell { position: relative; z-index: 1; }
.why .eyebrow { color: rgba(255, 255, 255, .78); }
.why h2 { max-width: 20ch; margin-bottom: 52px; }

.why-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-bottom: 44px;
}
.why-card {
  background: rgba(255, 255, 255, .11);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--r-lg);
  padding: 32px 30px;
  transition: transform .35s var(--ease), background-color .35s var(--ease);
}
.why-card:hover { transform: translateY(-6px); background: rgba(255, 255, 255, .16); }
.why-card h3 { font-size: var(--h-sm); margin-bottom: 14px; }
.why-card p { color: rgba(255, 255, 255, .84); font-size: .98rem; }

/* ---------- 11. Process ----------------------------------- */

.split-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 90px);
  align-items: end;
  margin-bottom: clamp(48px, 6vw, 76px);
}
.split-head h2 { max-width: 17ch; }

/* Process: a dashed rail ties the phases into one continuous run, with the
   CTA sitting at its head. Straight from the structural reference — and it
   makes the copy's "one continuous relationship" claim visible. */
.process-track {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: clamp(16px, 2.4vw, 34px);
  align-items: start;
}

.process-rail { position: relative; align-self: stretch; padding-top: 8px; }
.process-rail::after {
  content: "";
  position: absolute;
  left: 74px;
  top: 156px;
  bottom: 24px;
  width: 0;
  border-left: 2px dashed rgba(166, 122, 236, .45);
}

.rail-cta {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 148px;
  height: 148px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  padding: 0 26px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.16rem;
  line-height: 1.18;
  letter-spacing: -.02em;
  transition: transform .32s var(--ease), background-color .32s var(--ease);
}
.rail-cta svg { margin-top: 8px; transition: transform .32s var(--ease); }
.rail-cta:hover { transform: translateY(-3px); background: var(--accent-2); }
.rail-cta:hover svg { transform: translate(3px, -3px); }

/* The first column flexes rather than sitting at a fixed width — the homepage
   phases are one word, the approach page's run to three. */
.process-row {
  display: grid;
  grid-template-columns: minmax(140px, .8fr) minmax(0, 1.5fr) minmax(0, 1.25fr);
  gap: clamp(20px, 2.6vw, 40px);
  padding-block: clamp(34px, 4vw, 54px);
  border-top: 1px solid var(--line-dark);
  align-items: start;
}
.process-row:first-child { border-top: 0; }
.process-row:last-child { border-bottom: 0; }
.on-dark .process-row, .on-ink .process-row { border-color: var(--line); }
.process-track .process-row:first-child { padding-top: 0; }

.process-n {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .12em;
  color: rgba(186, 229, 51, .6);
  margin-bottom: 10px;
}
.process-title {
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  line-height: 1.08;
  color: var(--lime);
  text-wrap: balance;
}
.process-body { color: var(--muted-dark); }
.on-dark .process-body, .on-ink .process-body { color: var(--muted); }

/* Services as underlined links rather than pills — the reference lists them
   as scannable text, which carries more of them without visual noise. */
.svc-list li + li { margin-top: 13px; }
.svc-list a {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: clamp(1rem, 1.35vw, 1.14rem);
  color: var(--paper);
  text-decoration: underline;
  text-decoration-color: rgba(186, 229, 51, .34);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 5px;
  transition: color .24s var(--ease), text-decoration-color .24s var(--ease);
}
.svc-list a::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 1.5px;
  background: var(--lime);
  flex: none;
  transform: translateY(-3px);
  transition: transform .24s var(--ease), background-color .24s var(--ease);
}
.svc-list a:hover { color: var(--lime); text-decoration-color: var(--lime); }
.svc-list a:hover::before { background: var(--lime); transform: translateY(-3px) rotate(45deg); }

.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: .87rem;
  padding: 9px 17px;
  border-radius: var(--r-pill);
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line-dark);
  transition: transform .28s var(--ease), background-color .28s var(--ease),
              color .28s var(--ease), border-color .28s var(--ease);
}
a.chip:hover, .chip:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  transform: translateY(-2px);
}
.on-dark .chip, .on-ink .chip {
  background: rgba(255, 255, 255, .07);
  color: var(--paper);
  border-color: var(--line);
}

/* ---------- 12. The Shift --------------------------------- */

.shift { position: relative; overflow: hidden; }
.shift-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(36px, 6vw, 84px);
  align-items: center;
}
.shift h2 { max-width: 13ch; margin-bottom: 22px; }

.mosaic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.tile {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  padding: 30px 26px;
  min-height: 216px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #fff;
  transition: transform .35s var(--ease);
}

/* Line artwork sits in the upper half, above the bottom-anchored text.
   Decorative only: aria-hidden in markup, and kept faint enough that the
   label below never loses contrast against the gradient. */
.tile-art {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 96px;
  height: 96px;
  opacity: .55;
  pointer-events: none;
  transition: opacity .35s var(--ease), transform .45s var(--ease);
}
.tile:hover .tile-art { opacity: .85; transform: translateY(-2px) scale(1.04); }
.tile h3, .tile p { position: relative; z-index: 1; }
.tile:hover { transform: translateY(-5px); }
.mosaic .tile:nth-child(2),
.mosaic .tile:nth-child(4) { transform: translateY(32px); }
.mosaic .tile:nth-child(2):hover,
.mosaic .tile:nth-child(4):hover { transform: translateY(27px); }

.tile h3 { font-size: 1.16rem; margin-bottom: 7px; }
.tile p { font-size: .92rem; color: rgba(255, 255, 255, .72); }

.tile-a { background: linear-gradient(150deg, var(--accent) 0%, var(--accent-2) 100%); }
.tile-b { background: linear-gradient(150deg, var(--ink) 0%, var(--ink-2) 100%); }
.tile-c { background: linear-gradient(150deg, var(--ink-2) 0%, var(--accent-2) 100%); }
.tile-d { background: linear-gradient(150deg, var(--ink-deep) 0%, var(--ink) 100%); }

/* ---------- 13. Testimonial ------------------------------- */

.quote-band { text-align: center; }
.quote-mark {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(4.5rem, 9vw, 7rem);
  line-height: .6;
  color: var(--lime);
  margin-bottom: 26px;
}
.quote-band blockquote {
  margin: 0 auto 26px;
  max-width: 26ch;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.1vw, 2.3rem);
  line-height: 1.24;
  letter-spacing: -.025em;
}
.quote-attr {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--lime);
}

/* ---------- 14. Partner ----------------------------------- */

.partner-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(36px, 6vw, 84px);
  align-items: center;
}
.partner-grid h2 { max-width: 15ch; margin-bottom: 22px; }
.partner-grid p + p { margin-top: 18px; }

/* ---------- 15. Metric strip ------------------------------ */

.metric-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
}
.metric-cell {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(38px, 5vw, 62px) clamp(24px, 3vw, 40px);
}
.metric-cell .n {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(2.2rem, 4vw, 3.3rem);
  line-height: 1;
  letter-spacing: -.035em;
  color: var(--lime);
  margin-bottom: 12px;
}
.metric-cell .t { font-size: .93rem; color: var(--text-3); max-width: 24ch; }

/* ---------- 16. Standards / generic card grid ------------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.card-grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: #fff;
  border: 1px solid var(--line-dark);
  border-radius: var(--r-lg);
  padding: 34px 30px;
  transition: transform .35s var(--ease), border-color .35s var(--ease);
}
.card:hover { transform: translateY(-6px); border-color: rgba(87, 8, 211, .45); }
.card h3 { font-size: var(--h-sm); margin-bottom: 13px; }
.card p { color: var(--text-d2); font-size: .98rem; }

.card-dark {
  background: rgba(255, 255, 255, .05);
  border-color: var(--line);
}
.card-dark p { color: var(--muted); }

.glyph {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-md);
  background: linear-gradient(150deg, var(--ink) 0%, var(--ink-2) 100%);
  display: grid;
  place-items: center;
  margin-bottom: 22px;
  overflow: hidden;
}
.glyph svg { width: 92px; height: 92px; opacity: .8; }

/* ---------- 17. Stack pills ------------------------------- */

.stack-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: end;
  margin-bottom: 42px;
}
/* Platforms as a tile grid rather than a pill row — the reference gives each
   platform its own cell, which reads as a capability list instead of tags. */
.stack-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 12px;
}
.stack-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  min-height: 108px;
  padding: 16px 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .04);
  font-family: var(--font-head);
  font-weight: 500;
  font-size: .95rem;
  letter-spacing: -.012em;
  color: var(--paper);
  transition: border-color .28s var(--ease), background-color .28s var(--ease), transform .28s var(--ease);
}
.stack-tile:hover {
  border-color: rgba(186, 229, 51, .5);
  background: rgba(186, 229, 51, .1);
  transform: translateY(-4px);
}

/* Real brand marks where they exist. Several platforms have no mark in the
   open logo library, so those tiles carry the wordmark alone — the fixed tile
   height keeps the grid rhythm even across the mix. */
.stack-logo {
  width: 26px;
  height: 26px;
  object-fit: contain;
  opacity: .92;
  transition: opacity .28s var(--ease);
}
.stack-tile:hover .stack-logo { opacity: 1; }

/* The open library only ships Next.js as a black mark, which disappears on a
   near-black tile. Inverting it yields the white-circle form the brand itself
   uses on dark backgrounds. Every other mark is already coloured or white. */
.stack-logo--invert { filter: invert(1); }

/* ---------- 18. Case study cards -------------------------- */

.case-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.case-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line-dark);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.case-card:hover { transform: translateY(-7px); box-shadow: 0 18px 44px rgba(27, 27, 28, .16); }

.case-head {
  position: relative;
  height: 178px;
  overflow: hidden;
  background: var(--ink);
}

/* The gradient stays as the backdrop the photograph sits on, so a missing or
   slow image degrades to the old treatment rather than a white gap. */
.case-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .82;
  transition: transform .6s var(--ease), opacity .4s var(--ease);
}
.case-card:hover .case-photo { transform: scale(1.05); opacity: .95; }
.case-head::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(27, 27, 28, .55), rgba(27, 27, 28, 0) 60%);
  pointer-events: none;
}
.case-head-a { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%); }
.case-head-b { background: linear-gradient(135deg, var(--ink) 0%, var(--accent-2) 100%); }
.case-head-c { background: linear-gradient(135deg, var(--ink-2) 0%, var(--accent) 100%); }

.case-body { padding: 28px 26px 24px; display: flex; flex-direction: column; flex: 1; }
.case-tag {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}
.case-card h3 { font-size: 1.3rem; margin-bottom: 12px; }
.case-card p { color: var(--text-d2); font-size: .96rem; margin-bottom: 24px; }

.case-metric {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--line-dark);
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.case-metric .n {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.85rem;
  letter-spacing: -.035em;
  color: var(--ink);
  line-height: 1;
}
.case-metric .t { font-size: .86rem; color: var(--text-d3); }

/* ---------- 19. CTA band ---------------------------------- */

.cta-band {
  position: relative;
  text-align: center;
  overflow: hidden;
}
.cta-band .shell { position: relative; z-index: 1; }
.cta-band h2 { max-width: 18ch; margin: 0 auto 30px; }
.cta-band .btn-row { justify-content: center; }

.cycler {
  color: var(--accent-soft);
  display: inline-block;
  min-width: 5ch;
  transition: opacity .26s var(--ease);
}
.cycler.is-out { opacity: 0; }

/* ---------- 20. Footer ------------------------------------ */

.site-footer {
  background: var(--ink-deeper);
  color: var(--paper);
  padding-top: clamp(58px, 7vw, 88px);
}
.footer-cols {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.35fr;
  gap: clamp(28px, 4vw, 56px);
  padding-bottom: clamp(46px, 5vw, 68px);
}
.footer-brand .logo { margin-bottom: 20px; }
.footer-tag {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.16rem;
  letter-spacing: -.02em;
  color: var(--accent-soft);
  margin-bottom: 12px;
}
.footer-brand p { color: var(--muted); font-size: .94rem; max-width: 34ch; margin-bottom: 24px; }

.socials { display: flex; gap: 10px; }
.socials a {
  width: 40px; height: 40px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  color: var(--muted);
  transition: border-color .25s var(--ease), color .25s var(--ease), background-color .25s var(--ease);
}
.socials a:hover { border-color: var(--lime); color: var(--lime); background: rgba(186, 229, 51, .12); }
.socials svg { width: 17px; height: 17px; }

.footer-col h3 {
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-soft);
  margin-bottom: 18px;
}
.footer-col li + li { margin-top: 10px; }
.footer-col a { color: var(--muted); font-size: .95rem; transition: color .22s var(--ease); }
.footer-col a:hover { color: #fff; }

.footer-contact li + li { margin-top: 10px; }
.footer-contact a { color: var(--paper); font-family: var(--font-head); font-weight: 700; }

.newsletter { margin-top: 24px; }
.newsletter form {
  display: flex;
  gap: 8px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 6px 6px 6px 20px;
}
.newsletter input {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  color: var(--paper);
  font-size: .93rem;
  padding: 9px 0;
}
.newsletter input::placeholder { color: rgba(250, 251, 255, .45); }
.newsletter input:focus { outline: none; }
.newsletter form:focus-within { border-color: var(--accent-soft); }
.newsletter button {
  background: var(--accent);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .88rem;
  padding: 10px 20px;
  border-radius: var(--r-pill);
  flex: none;
  transition: background-color .25s var(--ease);
}
.newsletter button:hover { background: var(--accent-2); }
.newsletter .note { font-size: .8rem; color: var(--text-3); margin-top: 10px; }

.footer-bottom {
  border-top: 1px solid var(--line);
  padding-block: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-size: .87rem;
  color: var(--muted);
}
.footer-bottom nav { display: flex; gap: 24px; flex-wrap: wrap; }
.footer-bottom a { transition: color .22s var(--ease); }
.footer-bottom a:hover { color: #fff; }
.footer-consent-link {
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: color .22s var(--ease);
}
.footer-consent-link:hover { color: #fff; }

.consent-banner {
  position: fixed;
  z-index: 1000;
  inset: auto 20px 20px;
  margin-inline: auto;
  max-width: 1120px;
  border: 1px solid rgba(87, 8, 211, .25);
  border-radius: var(--r-md);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 22px 70px rgba(16, 4, 34, .22);
}
.consent-banner[hidden] { display: none; }
.consent-banner__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  padding: 22px;
}
.consent-banner__title {
  margin-bottom: 5px;
  font-family: var(--font-head);
  font-weight: 800;
}
.consent-banner p:not(.consent-banner__title) { max-width: 68ch; color: var(--text-d2); font-size: .9rem; }
.consent-banner a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.consent-banner__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.consent-banner__actions .btn { min-height: 46px; }

@media (max-width: 760px) {
  .consent-banner { inset: auto 10px 10px; }
  .consent-banner__inner { grid-template-columns: 1fr; padding: 18px; }
  .consent-banner__actions { display: grid; grid-template-columns: 1fr; }
}

/* Legal pages are unwritten placeholders — rendered as text, not dead links,
   so the site ships with zero broken internal links. See README checklist. */
.pending { color: rgba(252, 247, 243, .55); cursor: default; }

/* ---------- 21. Page hero (inner pages) ------------------- */

.page-hero {
  position: relative;
  background: var(--ink-deep);
  color: var(--paper);
  padding-block: clamp(64px, 8vw, 118px);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

/* Optional ambient video behind inner-page heroes. Same contract as the
   homepage: the source lives in data-src, nothing loads until the script
   assigns it, and any failure removes the element rather than showing a gap. */
.page-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0;
  transition: opacity 1.1s var(--ease);
}
.page-hero-video.is-live { opacity: .55; }

/* Scrim over the video so heading contrast never depends on which frame
   happens to be showing. */
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(100deg, rgba(27, 27, 28, .95) 0%, rgba(27, 27, 28, .88) 55%, rgba(27, 27, 28, .74) 100%);
}
.page-hero .dots { z-index: 1; }
.page-hero .shell { position: relative; z-index: 2; }
.page-hero h1 { font-size: var(--h-lg); max-width: 18ch; margin-bottom: 22px; }
.page-hero .lede { max-width: 58ch; }

.crumbs {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: .84rem;
  color: var(--text-3);
  margin-bottom: 26px;
}
.crumbs a { transition: color .22s var(--ease); }
.crumbs a:hover { color: var(--accent-soft); }
.crumbs span[aria-hidden] { opacity: .5; }
.crumbs [aria-current] { color: var(--accent-soft); }

/* ---------- 22. Accordion --------------------------------- */

.acc-group + .acc-group { margin-top: clamp(48px, 6vw, 78px); }
.acc-group > h2 { font-size: var(--h-md); margin-bottom: 8px; }
.acc-group > p { color: var(--muted-dark); max-width: 60ch; margin-bottom: 28px; }

.acc-item { border-top: 1px solid var(--line-dark); }
.acc-item:last-child { border-bottom: 1px solid var(--line-dark); }

.acc-trigger {
  width: 100%;
  display: grid;
  grid-template-columns: 68px 1fr 34px;
  gap: 16px;
  align-items: center;
  text-align: left;
  padding-block: 26px;
  transition: color .25s var(--ease);
}
.acc-trigger:hover { color: var(--accent); }
.acc-num {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1rem;
  color: var(--accent);
  letter-spacing: -.01em;
}
.acc-title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.12rem, 1.9vw, 1.4rem);
  letter-spacing: -.025em;
  line-height: 1.2;
}
.acc-icon {
  width: 34px; height: 34px;
  border: 1px solid var(--line-dark);
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  transition: transform .35s var(--ease), background-color .3s var(--ease),
              border-color .3s var(--ease), color .3s var(--ease);
}
.acc-trigger[aria-expanded="true"] .acc-icon {
  transform: rotate(45deg);
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* visibility keeps collapsed copy out of the accessibility tree; it flips
   only after the height transition finishes so the animation still reads. */
.acc-panel {
  max-height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: max-height .45s var(--ease), visibility 0s linear .45s;
}
.acc-trigger[aria-expanded="true"] + .acc-panel {
  visibility: visible;
  transition: max-height .45s var(--ease), visibility 0s linear 0s;
}
.acc-panel-inner {
  padding: 0 0 34px 84px;
  max-width: 74ch;
}
.acc-panel-inner > p { color: var(--muted-dark); margin-bottom: 22px; }

.caps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 26px;
}
.caps li {
  position: relative;
  padding-left: 22px;
  font-size: .95rem;
  color: var(--text-d3);
}
.caps li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

/* ---------- 23. Work page --------------------------------- */

.case-detail {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  padding-block: clamp(46px, 5.5vw, 74px);
  border-top: 1px solid var(--line-dark);
  align-items: start;
}
.case-detail:last-of-type { border-bottom: 1px solid var(--line-dark); }
.case-detail h2 { font-size: var(--h-md); margin-bottom: 22px; max-width: 20ch; }
.case-detail h3 {
  font-size: .76rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.case-sub + .case-sub { margin-top: 26px; }
.case-sub p { color: var(--muted-dark); }

.metric-stack {
  display: grid;
  gap: 1px;
  background: var(--line-dark);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.metric-stack div { background: var(--paper); padding: 26px 28px; }
.metric-stack .n {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 2.1rem;
  line-height: 1;
  letter-spacing: -.035em;
  color: var(--accent);
  margin-bottom: 8px;
}
.metric-stack .t { font-size: .9rem; color: var(--text-d3); }

/* ---------- 24. Contact page ------------------------------ */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.contact-aside dl { margin: 0; }
.contact-aside dt {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 7px;
}
.contact-aside dd { margin: 0 0 26px; color: var(--text-d2); }
.contact-aside dd a {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--ink);
  transition: color .22s var(--ease);
}
.contact-aside dd a:hover { color: var(--accent); }
.contact-aside ol { counter-reset: step; }
.contact-aside ol li {
  counter-increment: step;
  position: relative;
  padding-left: 30px;
  margin-bottom: 10px;
  font-size: .96rem;
  color: var(--muted-dark);
}
.contact-aside ol li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 1px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: rgba(87, 8, 211, .1);
  color: var(--accent);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .72rem;
  display: grid;
  place-items: center;
}

.aside-note {
  margin-top: 34px;
  padding: 24px;
  background: var(--paper-2);
  border-radius: var(--r-md);
}
.aside-note h3 { font-size: 1.05rem; margin-bottom: 8px; }
.aside-note p { font-size: .94rem; color: var(--muted-dark); }

.form-card {
  background: #fff;
  border: 1px solid var(--line-dark);
  border-radius: var(--r-lg);
  padding: clamp(28px, 3.4vw, 44px);
}
.field { margin-bottom: 20px; }
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.field label {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .88rem;
  margin-bottom: 8px;
}
.field .opt { font-weight: 400; color: var(--text-d3); }
.field input,
.field select,
.field textarea {
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-sm);
  padding: 13px 15px;
  font-size: 1rem;
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(87, 8, 211, .16);
}
.field select { appearance: none; background-image: none; cursor: pointer; }

.form-note {
  display: none;
  margin-top: 20px;
  padding: 20px 22px;
  background: rgba(87, 8, 211, .07);
  border: 1px solid rgba(87, 8, 211, .28);
  border-radius: var(--r-md);
  font-size: .95rem;
  color: var(--ink);
}
.form-note.is-shown { display: block; }
.form-note strong { font-family: var(--font-head); }

/* ---------- 25. Scroll reveal ----------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- 26. Responsive -------------------------------- */

@media (max-width: 1080px) {
  .primary-nav, .header-actions { display: none; }
  .nav-toggle { display: grid; }
  .drawer, .drawer-scrim { display: block; }
  .header-inner { justify-content: space-between; }
}

@media (max-width: 1180px) {
  .stack-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .process-row { grid-template-columns: minmax(120px, .7fr) minmax(0, 1.4fr) minmax(0, 1.1fr); }
}

@media (max-width: 1000px) {
  .why-cards, .card-grid, .case-grid { grid-template-columns: repeat(2, 1fr); }
  .card-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .metric-strip { grid-template-columns: repeat(2, 1fr); }
  .stack-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* The rail has nothing left to connect once the rows stack, so the CTA
     detaches and sits above them. */
  .process-track { grid-template-columns: 1fr; gap: 0; }
  .process-rail { padding-top: 0; margin-bottom: 36px; }
  .process-rail::after { display: none; }
  .rail-cta { width: 124px; height: 124px; font-size: 1.05rem; }
  .process-track .process-row:first-child { padding-top: clamp(34px, 4vw, 54px); border-top: 1px solid var(--line); }
}

@media (max-width: 900px) {
  .process-row { grid-template-columns: 110px 1fr; }
  .process-row .svc-list { grid-column: 2; margin-top: 22px; }
  .split-head, .stack-head, .shift-grid, .partner-grid,
  .contact-grid, .case-detail { grid-template-columns: 1fr; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 26px 22px; }
  .acc-panel-inner { padding-left: 0; }
  .shift-grid > *:first-child { order: -1; }
  .mosaic .tile:nth-child(2),
  .mosaic .tile:nth-child(4) { transform: none; }
  .mosaic .tile:nth-child(2):hover,
  .mosaic .tile:nth-child(4):hover { transform: translateY(-5px); }
}

@media (max-width: 860px) {
  .topbar { display: none; }
  .scroll-cue { display: none; }
  html { scroll-padding-top: 136px; }
}

@media (max-width: 700px) {
  body { font-size: 16px; }
  .why-cards, .card-grid, .card-grid-4, .case-grid { grid-template-columns: 1fr; }
  .caps { grid-template-columns: 1fr; }
  .stack-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stack-tile { min-height: 76px; font-size: .88rem; }
  .hero-copy { padding-left: 18px; }
  .hero-copy::before { width: 4px; }
  .field-row { grid-template-columns: 1fr; }
  .acc-trigger { grid-template-columns: 48px 1fr 30px; gap: 12px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .why-ring { width: 400px; height: 400px; top: -150px; right: -120px; }
}

@media (max-width: 560px) {
  .hero-stats { grid-template-columns: 1fr; gap: 22px; }
  .metric-strip { grid-template-columns: 1fr; }
  .footer-cols { grid-template-columns: 1fr; }
  .process-row { grid-template-columns: 1fr; gap: 14px; }
  .process-row .svc-list { grid-column: 1; margin-top: 4px; }
  .stack-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rail-cta { width: 112px; height: 112px; font-size: .98rem; }
  .btn { width: 100%; justify-content: center; }
  .btn-row { flex-direction: column; }
  .newsletter button { padding: 10px 16px; }
  /* Phones keep the compact bar, so they keep the matching scroll offset
     rather than the taller one set for the 120px desktop header. */
  .header-inner { min-height: 68px; }
  html { scroll-padding-top: 96px; }
  .logo { font-size: 1.2rem; }
  .logo-mark { width: 34px; height: 34px; }
}

/* ---------- 27. Home-service ROI homepage ---------------- */

.hero .eyebrow { color: var(--lime); }
.hero .trust-note {
  margin-top: 18px;
  color: var(--text-3);
  font-size: .9rem;
  letter-spacing: .02em;
}
[data-home-section] .reveal { opacity: 1; transition-property: transform; }

.leak-grid,
.offer-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: clamp(34px, 5vw, 58px);
}
.leak-card,
.offer-card,
.proof-card,
.industry-card {
  border: 1px solid var(--line-dark);
  border-radius: var(--r-md);
  background: #fff;
  padding: clamp(24px, 2.8vw, 34px);
}
.leak-card h3,
.offer-card h3,
.proof-card h3,
.industry-card h3 { font-size: var(--h-sm); margin-bottom: 13px; }
.leak-card > p,
.offer-card > p,
.proof-card > p,
.industry-card > p { color: var(--text-d2); }
.card-number,
.offer-step {
  display: block;
  margin-bottom: 28px;
  color: var(--accent);
  font-family: var(--font-head);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .14em;
}
.leak-card .baseline {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--line-dark);
  color: var(--text-d1);
  font-size: .92rem;
}

.calculator-layout {
  display: grid;
  grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr);
  gap: clamp(30px, 5vw, 70px);
  margin-top: clamp(38px, 5vw, 64px);
  align-items: start;
}
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.calculator-inputs .field { display: block; margin: 0; }
.calculator-inputs .field > span,
.form-field > label,
.field-label {
  display: block;
  margin-bottom: 7px;
  font-family: var(--font-head);
  font-size: .88rem;
  font-weight: 700;
}
.calculator-inputs input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .08);
  color: var(--paper);
  padding: 12px 14px;
}
.calculator-inputs input:focus {
  outline: none;
  border-color: var(--lime);
  box-shadow: 0 0 0 3px rgba(186, 229, 51, .16);
}
.calculator-inputs input[aria-invalid="true"] {
  border-color: #FF8E8E;
  background: rgba(166, 27, 27, .22);
  box-shadow: 0 0 0 3px rgba(255, 142, 142, .18);
}
.calculator-error {
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid #FF8E8E;
  border-radius: var(--r-sm);
  background: rgba(166, 27, 27, .18);
  color: #FFF1F1;
  font-size: .9rem;
}
.calculator-error[hidden] { display: none; }
.calculator-inputs small,
.form-field small {
  display: block;
  margin-top: 6px;
  color: var(--text-3);
  font-size: .78rem;
  line-height: 1.35;
}
.scenario-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.scenario-card {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .05);
  padding: 22px;
}
.scenario-featured { border-color: var(--lime); background: rgba(186, 229, 51, .08); }
.scenario-label {
  color: var(--lime);
  font-family: var(--font-head);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.scenario-card dl { margin: 0; }
.scenario-card dl div { padding-block: 12px; border-top: 1px solid var(--line); }
.scenario-card dt { color: var(--text-3); font-size: .78rem; }
.scenario-card dd {
  margin: 3px 0 0;
  color: var(--paper);
  font-family: var(--font-head);
  font-size: clamp(1rem, 1.55vw, 1.3rem);
  font-weight: 700;
  overflow-wrap: anywhere;
}
.formula-box {
  margin-block: 18px;
  padding: 22px;
  border-left: 4px solid var(--accent-soft);
  background: rgba(255, 255, 255, .05);
}
.formula-box h3 { font-size: 1rem; margin-bottom: 8px; }
.formula-box p { color: var(--text-2); font-size: .9rem; }
.formula-box .fine-print,
.fine-print { margin-top: 10px; color: var(--text-3); font-size: .8rem; }

.timeline-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(34px, 5vw, 58px);
  background: var(--line-dark);
  border: 1px solid var(--line-dark);
}
.timeline-grid li { background: var(--paper); padding: clamp(24px, 3vw, 36px); }
.timeline-grid span {
  display: block;
  color: var(--accent);
  font-family: var(--font-head);
  font-size: .85rem;
  font-weight: 700;
  margin-bottom: 22px;
}
.timeline-grid p { color: var(--text-d2); }

.offer-card { background: var(--paper); }
.offer-card .offer-price {
  color: var(--accent);
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 14px;
}

.proof-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 16px;
  margin-top: clamp(34px, 5vw, 58px);
}
.proof-anchor { border-top: 5px solid var(--accent); }
.proof-type,
.evidence-label {
  margin-bottom: 18px;
  color: var(--accent) !important;
  font-family: var(--font-head);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.industry-band { background: #E8E1F4; }
.industry-intro { max-width: 76ch; margin-top: 18px; }
.industry-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: clamp(34px, 5vw, 54px);
}
.industry-card { border-color: rgba(87, 8, 211, .24); }
.industry-card > p + p { margin-top: 13px; }
.industry-card .limitation { font-size: .9rem; }
.source-link {
  display: inline-block;
  margin-top: 24px;
  color: var(--accent);
  font-family: var(--font-head);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.industry-card .source-date { margin-top: 8px; color: var(--text-d3); font-size: .78rem; }

.process-simple { max-width: 980px; margin-top: clamp(34px, 5vw, 58px); }
.process-simple li {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 22px;
  padding-block: 26px;
  border-top: 1px solid var(--line);
}
.process-simple li:last-child { border-bottom: 1px solid var(--line); }
.process-simple > li > span { color: var(--lime); font-family: var(--font-head); font-weight: 700; }
.process-simple h3 { font-size: var(--h-sm); margin-bottom: 6px; }
.process-simple p { color: var(--text-2); }

.faq-layout { display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(32px, 7vw, 90px); }
.faq-item { border-top: 1px solid var(--line-dark); }
.faq-item:last-child { border-bottom: 1px solid var(--line-dark); }
.faq-list .acc-trigger {
  display: block;
  padding: 24px 46px 24px 0;
  position: relative;
  font-family: var(--font-head);
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  font-weight: 700;
}
.faq-list .acc-trigger::after { content: "+"; position: absolute; right: 5px; top: 22px; color: var(--accent); font-size: 1.4rem; }
.faq-list .acc-trigger[aria-expanded="true"]::after { content: "−"; }
.faq-list .acc-panel p { max-width: 68ch; padding: 0 40px 24px 0; color: var(--text-d2); }

.review-band { background: var(--paper-2); }
.review-layout { display: grid; grid-template-columns: minmax(240px, .65fr) minmax(0, 1.35fr); gap: clamp(34px, 6vw, 90px); align-items: start; }
.review-copy { position: sticky; top: 170px; }
.review-notes { margin-top: 26px; }
.review-notes li { padding: 10px 0 10px 22px; border-top: 1px solid var(--line-dark); position: relative; color: var(--text-d2); }
.review-notes li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.lead-form {
  background: #fff;
  border: 1px solid var(--line-dark);
  border-radius: var(--r-lg);
  padding: clamp(24px, 4vw, 46px);
}
.form-summary {
  margin-bottom: 22px;
  padding: 16px 18px;
  border: 1px solid #A61B1B;
  border-radius: var(--r-sm);
  background: #FFF1F1;
  color: #741111;
}
.form-summary[hidden] { display: none; }
.no-script-summary a {
  color: var(--accent);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.no-script-summary a:hover { color: var(--ink); }
.no-script-summary a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.form-field-wide { grid-column: 1 / -1; }
.industry-form-group {
  grid-column: 1 / -1;
  min-inline-size: 0;
  margin: 4px 0;
  padding: 22px 0 4px;
  border: 0;
  border-top: 1px solid var(--line-dark);
}
.industry-form-group > legend {
  padding: 0 12px 0 0;
  color: var(--ink);
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 700;
}
.industry-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  border: 1px solid var(--line-dark);
  border-radius: var(--r-sm);
  background: var(--paper);
  padding: 12px 14px;
}
.form-field textarea { resize: vertical; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(87, 8, 211, .14);
}
.form-field [aria-invalid="true"],
.consent-field input[aria-invalid="true"],
.turnstile-wrap [aria-invalid="true"] {
  border-color: #A61B1B;
  box-shadow: 0 0 0 3px rgba(166, 27, 27, .14);
}
.form-field small { color: var(--text-d3); }
.form-field-error {
  margin-top: 7px;
  color: #8D1515;
  font-size: .82rem;
  font-weight: 700;
}
.form-field-error[hidden] { display: none; }
.honeypot { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.consent-field {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  margin-top: 24px;
  color: var(--text-d2);
  font-size: .9rem;
}
.consent-field input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--accent); }
.turnstile-wrap { margin-top: 24px; min-height: 78px; }
.lead-submit { margin-top: 18px; }
.lead-form .fine-print { color: var(--text-d3); }
.lead-form .fine-print a { color: var(--accent); text-decoration: underline; }

.footer-compact {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 44px;
  align-items: end;
  padding-bottom: 54px;
}
.footer-compact > div > p { max-width: 46ch; margin-top: 18px; color: var(--text-2); }
.footer-compact a { color: var(--paper); }
.footer-label { font-family: var(--font-head); font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.footer-contact-links { display: grid; gap: 7px; margin-top: 12px; }
.footer-contact-links a { width: fit-content; }

/* Primary home-service funnel pages */
.funnel-page { overflow: clip; }
.funnel-hero {
  position: relative;
  padding: clamp(76px, 9vw, 132px) 0;
  background:
    radial-gradient(circle at 80% 18%, rgba(73, 92, 255, .22), transparent 30rem),
    linear-gradient(135deg, var(--ink-deeper), var(--ink-deep));
}
.funnel-hero .shell { position: relative; z-index: 1; }
.funnel-hero h1 { max-width: 15ch; margin: 22px 0 24px; font-size: clamp(2.7rem, 6vw, 5.8rem); line-height: .96; letter-spacing: -.055em; }
.funnel-hero .lede { max-width: 67ch; color: var(--text-2); }
.funnel-hero-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, .55fr); gap: clamp(42px, 7vw, 96px); align-items: end; }
.funnel-hero .crumbs { margin-bottom: clamp(36px, 7vw, 72px); }
.hero-measure-card { padding: 28px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.055); backdrop-filter: blur(12px); }
.hero-measure-card ol, .hero-measure-card ul { margin: 22px 0 0; padding-left: 1.25rem; color: var(--paper); }
.hero-measure-card li + li { margin-top: 12px; }
.hvac-workflow-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 48px; }
.hvac-workflow-card { padding: clamp(24px, 3vw, 38px); background: var(--paper); border: 1px solid var(--line-dark); box-shadow: 0 18px 42px rgba(18,18,19,.06); }
.hvac-workflow-card h3 { margin: 18px 0 10px; font-size: clamp(1.35rem, 2vw, 1.8rem); }
.hvac-workflow-card > p { color: var(--text-d2); }
.hvac-workflow-card dl { display: grid; grid-template-columns: minmax(106px, .3fr) 1fr; gap: 10px 18px; margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line-dark); }
.hvac-workflow-card dt { font-family: var(--font-head); font-weight: 700; }
.hvac-workflow-card dd { margin: 0; color: var(--text-d2); }
.property-scale-note {
  max-width: 72ch;
  margin-top: 28px;
  color: var(--text-d2);
}
.property-workflow-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 36px;
}
.property-safety-note {
  max-width: 84ch;
  margin-top: 30px;
  padding: 20px 24px;
  border-left: 4px solid var(--accent);
  background: var(--paper);
  color: var(--text-d2);
}
.property-workflow-card > p { max-width: 68ch; }
.property-review-button { margin-top: 24px; }
.property-pilot-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.property-evidence-stack article { max-width: 92ch; }
.property-evidence-stack article > p + p { margin-top: 13px; color: var(--text-d2); }
.property-evidence-stack .limitation { font-size: .9rem; }
.property-source-date { margin-top: 8px !important; color: var(--text-d3) !important; font-size: .78rem; }
.industry-grid-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cta-panel { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(240px, .55fr); gap: 52px; align-items: center; }
.cta-panel .text-link { display: block; margin-top: 18px; color: var(--accent); font-weight: 700; }
.review-fit-grid, .contact-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.review-fit-grid article, .contact-choice { padding: clamp(28px, 4vw, 48px); border: 1px solid var(--line-dark); background: var(--paper); }
.review-fit-grid h2, .contact-choice h2 { margin: 18px 0; }
.check-list, .x-list { display: grid; gap: 13px; margin-top: 24px; padding: 0; list-style: none; }
.check-list li, .x-list li { position: relative; padding-left: 28px; }
.check-list li::before, .x-list li::before { position: absolute; left: 0; top: 0; font-weight: 800; }
.check-list li::before { content: "✓"; color: var(--accent); }
.x-list li::before { content: "—"; color: var(--text-2); }
.review-detail-grid, .outcome-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 44px; }
.review-detail-grid article, .outcome-grid article { padding: 28px; background: var(--paper); border: 1px solid var(--line-dark); }
.review-detail-grid h3, .outcome-grid h3 { margin: 18px 0 10px; }
.review-detail-grid p, .review-detail-grid ol, .outcome-grid p { color: var(--text-d2); }
.review-detail-grid ol { padding-left: 1.25rem; }
.review-detail-grid li + li { margin-top: 8px; }
.managed-note { max-width: 78ch; margin-top: 26px; padding: 22px 24px; border-left: 3px solid var(--accent); background: var(--paper-2); }
.form-success { margin-bottom: 18px; padding: 14px 16px; color: #123b2a; background: #e1f6ea; border: 1px solid #a9dbc0; }
.contact-choice-primary { background: var(--ink-deep); color: var(--paper); border-color: var(--ink-deep); }
.contact-choice-primary p, .contact-choice-primary li { color: var(--text-2); }
.contact-choice .btn { margin-top: 28px; }
.contact-direct-links { display: grid; justify-items: start; gap: 16px; margin-top: 28px; }
.contact-direct-links .btn { margin-top: 0; }
.contact-direct-links > a:not(.btn) { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.consent-field a { text-decoration: underline; text-underline-offset: 2px; }

/* Shared narrative pages */
.systems-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: clamp(38px, 6vw, 66px);
}
.system-card,
.principle-grid article {
  padding: clamp(24px, 3.2vw, 38px);
  border: 1px solid var(--line-dark);
  background: var(--paper);
}
.system-card h3 { max-width: 23ch; font-size: clamp(1.35rem, 2vw, 1.85rem); }
.system-card dl { margin-top: 28px; }
.system-card dl div {
  display: grid;
  grid-template-columns: minmax(120px, .45fr) minmax(0, 1fr);
  gap: 18px;
  padding: 14px 0;
  border-top: 1px solid var(--line-dark);
}
.system-card dt { font-family: var(--font-head); font-weight: 700; }
.system-card dd { margin: 0; color: var(--text-d2); }
.offer-grid > article {
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid var(--line-dark);
  background: var(--paper);
}
.offer-grid > article h3 { font-size: clamp(1.15rem, 1.7vw, 1.45rem); }
.offer-grid > article p { margin-top: 14px; color: var(--text-d2); }
.process-stack { display: grid; margin-top: clamp(38px, 6vw, 66px); border-top: 1px solid var(--line-dark); }
.process-step {
  display: grid;
  grid-template-columns: minmax(90px, .22fr) minmax(0, 1fr);
  gap: clamp(22px, 5vw, 70px);
  padding: clamp(28px, 4vw, 48px) 0;
  border-bottom: 1px solid var(--line-dark);
}
.process-step .card-number { margin: 0; }
.process-step h3 { font-size: clamp(1.45rem, 2.6vw, 2.2rem); }
.process-step p { max-width: 74ch; margin-top: 12px; color: var(--text-d2); }
.principle-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: clamp(38px, 5vw, 58px);
}
.principle-grid article p { margin-top: 12px; color: var(--text-d2); }
.work-examples { display: grid; gap: 0; border-top: 1px solid var(--line-dark); }
.work-example {
  display: grid;
  grid-template-columns: minmax(220px, .65fr) minmax(0, 1.35fr);
  gap: clamp(30px, 7vw, 100px);
  padding: clamp(38px, 6vw, 72px) 0;
  border-bottom: 1px solid var(--line-dark);
}
.work-example h2 { font-size: clamp(2rem, 4vw, 4rem); }
.work-example h3 { margin-bottom: 10px; font-size: 1rem; text-transform: uppercase; letter-spacing: .08em; }
.work-example h3:not(:first-child) { margin-top: 30px; }
.work-example p { max-width: 72ch; color: var(--text-d2); }
.proof-note { max-width: 82ch; }
.proof-note h2 { margin: 18px 0 24px; }
.about-founder { display: grid; grid-template-columns: minmax(240px, .8fr) minmax(0, 1.2fr); gap: clamp(38px, 8vw, 110px); }
.about-founder .lede + .lede { margin-top: 24px; }

/* Resource library — an operating ledger rather than a generic blog. */
.resource-hero,
.article-hero-inner { max-width: 1040px; }

.resource-index-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, .7fr);
  gap: clamp(36px, 7vw, 100px);
  align-items: end;
  margin-bottom: clamp(42px, 6vw, 72px);
}

.resource-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line-dark);
  border-left: 1px solid var(--line-dark);
}

.resource-card {
  min-height: 330px;
  padding: clamp(28px, 4vw, 52px);
  border-right: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: var(--paper);
}

.resource-card:nth-child(2),
.resource-card:nth-child(3) { background: var(--paper-2); }
.resource-topics,
.evidence-label {
  font-family: var(--font-head);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
}
.resource-card h3 { max-width: 19ch; margin: 24px 0 16px; font-size: clamp(1.6rem, 2.8vw, 2.45rem); }
.resource-card p:not(.resource-topics) { max-width: 58ch; color: var(--text-d2); }
.resource-card .text-link { margin-top: auto; padding-top: 30px; }

.article-hero { padding: clamp(68px, 8vw, 112px) 0; }
.article-hero .crumbs { margin-bottom: clamp(36px, 6vw, 68px); }
.article-hero h1 { max-width: 18ch; font-size: clamp(2.75rem, 6.7vw, 5.8rem); }
.article-hero .lede { max-width: 72ch; margin-top: 26px; }
.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-top: 38px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  color: var(--text-3);
  font-size: .86rem;
}

.article-layout {
  display: grid;
  grid-template-columns: minmax(220px, .38fr) minmax(0, 1fr);
  gap: clamp(40px, 8vw, 120px);
  align-items: start;
  padding-block: var(--band);
}
.article-aside {
  position: sticky;
  top: 150px;
  padding: 24px 0;
  border-top: 3px solid var(--accent);
  border-bottom: 1px solid var(--line-dark);
}
.article-aside p + p,
.article-aside p + a { margin-top: 14px; }
.article-aside p:not(.label-track) { color: var(--text-d2); }
.article-copy { max-width: 820px; }
.article-copy > section + section { margin-top: clamp(54px, 7vw, 86px); }
.article-copy h2 { margin-bottom: 20px; font-size: clamp(1.8rem, 3.6vw, 3rem); }
.article-copy h3 { font-size: clamp(1.12rem, 2vw, 1.4rem); }
.article-copy p { color: var(--text-d2); }
.article-copy p + p { margin-top: 16px; }
.article-copy a:not(.btn) { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

.audit-list { display: grid; border-top: 1px solid var(--line-dark); }
.audit-check {
  display: grid;
  grid-template-columns: 50px minmax(160px, .55fr) minmax(0, 1fr);
  gap: 18px 28px;
  padding: 28px 0;
  border-bottom: 1px solid var(--line-dark);
}
.audit-check > span,
.workflow-line span,
.estimate-stages > li > span { font-family: var(--font-head); color: var(--accent); font-weight: 700; }
.audit-check dl { grid-column: 3; margin: 0; }
.audit-check dl div { display: contents; }
.audit-check dt { margin-top: 12px; font-family: var(--font-head); font-weight: 700; }
.audit-check dd { margin: 2px 0 0; color: var(--text-d2); }

.definition-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line-dark);
  border-left: 1px solid var(--line-dark);
}
.definition-grid article { padding: 26px; border-right: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.definition-grid p { margin-top: 10px; }
.article-steps { padding-left: 1.4rem; list-style: decimal; }
.article-steps li { padding-left: 8px; color: var(--text-d2); }
.article-steps li + li { margin-top: 14px; }
.workflow-line { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line-dark); }
.workflow-line article { padding: 24px 18px 24px 0; border-bottom: 1px solid var(--line-dark); }
.workflow-line h3 { margin: 18px 0 8px; }

.estimate-stages { display: grid; border-top: 1px solid var(--line-dark); }
.estimate-stages li { display: grid; grid-template-columns: 54px 1fr; gap: 18px; padding: 24px 0; border-bottom: 1px solid var(--line-dark); }
.estimate-stages p { margin-top: 8px; }
.formula-block { padding: clamp(24px, 4vw, 42px); background: var(--ink); color: var(--paper); border-left: 5px solid var(--lime); }
.formula-block p { color: var(--text-2); font-family: var(--font-head); }
.formula-block p + p { margin-top: 12px; }
.formula-block strong { color: var(--lime); }
.formula-block + p { margin-top: 24px; }
.input-definitions { margin: 0; border-top: 1px solid var(--line-dark); }
.input-definitions div { display: grid; grid-template-columns: minmax(170px, .42fr) 1fr; gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--line-dark); }
.input-definitions dt { font-family: var(--font-head); font-weight: 700; }
.input-definitions dd { margin: 0; color: var(--text-d2); }
.evidence-note { padding: 20px 24px; border-left: 4px solid var(--accent); background: var(--paper-2); }
.evidence-stack { display: grid; margin-top: 28px; border-top: 1px solid var(--line-dark); }
.evidence-stack article { padding: 30px 0; border-bottom: 1px solid var(--line-dark); }
.evidence-stack h3 { margin: 12px 0; font-size: clamp(1.35rem, 2.5vw, 1.9rem); }
.evidence-stack .source-link { display: inline-block; margin-top: 16px; }
.article-review-cta { margin-top: clamp(60px, 8vw, 100px); padding: clamp(30px, 5vw, 54px); background: var(--ink); color: var(--paper); }
.article-review-cta h2 { max-width: 20ch; color: var(--paper); }
.article-review-cta p:not(.eyebrow) { max-width: 58ch; color: var(--text-2); }
.article-review-cta .btn { margin-top: 28px; color: var(--lime-ink); }

@media (max-width: 1024px) {
  .review-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .outcome-grid { grid-template-columns: 1fr; }
  .principle-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .funnel-hero-grid, .hvac-workflow-grid, .property-workflow-grid, .industry-grid-two, .cta-panel, .review-fit-grid, .contact-choice-grid { grid-template-columns: 1fr; }
  .funnel-hero { padding: 64px 0 80px; }
  .funnel-hero .crumbs { margin-bottom: 42px; }
  .review-detail-grid { grid-template-columns: 1fr; }
  .hvac-workflow-card dl { grid-template-columns: 1fr; gap: 4px; }
  .hvac-workflow-card dd + dt { margin-top: 12px; }
  .systems-grid, .principle-grid, .work-example, .about-founder { grid-template-columns: 1fr; }
  .system-card dl div { grid-template-columns: 1fr; gap: 5px; }
  .resource-index-intro, .resource-grid, .article-layout { grid-template-columns: 1fr; }
  .resource-card:nth-child(3) { background: var(--paper); }
  .resource-card:nth-child(4) { background: var(--paper-2); }
  .article-aside { position: static; }
  .audit-check { grid-template-columns: 42px 1fr; }
  .audit-check > p, .audit-check dl { grid-column: 2; }
  .definition-grid, .workflow-line { grid-template-columns: 1fr; }
  .input-definitions div { grid-template-columns: 1fr; gap: 5px; }
}

@media (max-width: 360px) {
  .funnel-hero h1 { font-size: 2.45rem; }
  .hvac-workflow-card, .review-fit-grid article, .contact-choice, .review-detail-grid article, .outcome-grid article { padding: 22px; }
}

@media (max-width: 1100px) {
  .leak-grid, .offer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calculator-layout, .review-layout { grid-template-columns: 1fr; }
  .review-copy { position: static; }
}

@media (max-width: 900px) {
  .scenario-grid, .proof-grid, .industry-grid { grid-template-columns: 1fr; }
  .timeline-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq-layout { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .leak-grid, .offer-grid, .timeline-grid, .field-grid, .form-grid, .industry-form-grid { grid-template-columns: 1fr; }
  .form-field-wide { grid-column: auto; }
  .process-simple li { grid-template-columns: 46px 1fr; gap: 12px; }
  .footer-compact { grid-template-columns: 1fr; align-items: start; }
  .scenario-card { padding: 18px; }
}

/* ---------- Legal review drafts --------------------------- */

.legal-hero { max-width: 920px; }

.legal-layout {
  display: grid;
  grid-template-columns: minmax(230px, .42fr) minmax(0, 1fr);
  gap: clamp(34px, 7vw, 96px);
  align-items: start;
}

.legal-review-notice {
  position: sticky;
  top: 150px;
  padding: 24px;
  border: 2px solid var(--accent);
  background: var(--paper-2);
}

.legal-review-notice strong {
  display: block;
  font-family: var(--font-head);
  font-size: 1.05rem;
  line-height: 1.35;
}

.legal-review-notice p { margin-top: 12px; color: var(--text-d2); }
.legal-copy { max-width: 76ch; }
.legal-copy h2 { margin-top: 42px; font-size: clamp(1.45rem, 2.4vw, 2rem); }
.legal-copy h2:first-child { margin-top: 0; }
.legal-copy p { margin-top: 12px; color: var(--text-d2); }
.legal-copy a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 768px) {
  .legal-layout { grid-template-columns: 1fr; }
  .legal-review-notice { position: static; }
}

/* ---------- 28. Reduced motion ---------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  .reveal { opacity: 1; transform: none; }
  .marquee-track { animation: none; transform: none; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .scroll-cue .rail::after { animation: none; opacity: .6; transform: none; }
  .logo-mark[data-draw] path { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
  .logo-mark[data-draw] circle { transform: none; animation: none; }
  .cycler { transition: none; }

  .btn:hover, .card:hover, .why-card:hover, .case-card:hover,
  .tile:hover, .chip:hover, .stack-pill:hover { transform: none; }
  .mosaic .tile:nth-child(2),
  .mosaic .tile:nth-child(4) { transform: translateY(32px); }
}

/* ---------- 28. Print ------------------------------------- */

@media print {
  .topbar, .site-header, .drawer, .drawer-scrim,
  .hero-canvas, .hero-video, .scroll-cue, .cta-band { display: none !important; }
  body { background: #fff; color: #000; }
  .reveal { opacity: 1; transform: none; }
}