:root {
  --bg: #f5f1ec;
  --bg-soft: #ece6dd;
  --surface: rgba(255, 255, 255, 0.78);
  --surface-strong: #fffdfa;
  --text: #1A2B3A;
  --text-soft: #4c5a67;
  --line: rgba(26, 43, 58, 0.12);
  --line-strong: rgba(26, 43, 58, 0.2);
  --navy: #1A2B3A;
  --navy-deep: #1A2B3A;
  --green: #009352;
  --green-soft: #ddf3e9;
  --cream: #fbf8f3;
  --shadow: 0 24px 70px rgba(26, 43, 58, 0.12);
  --shadow-strong: 0 34px 90px rgba(26, 43, 58, 0.2);
  --radius-sm: 16px;
  --radius-md: 24px;
  --radius-lg: 36px;
  --cut-radius-sm: 0 var(--radius-sm) 0 var(--radius-sm);
  --cut-radius-md: 0 var(--radius-md) 0 var(--radius-md);
  --cut-radius-lg: 0 var(--radius-lg) 0 var(--radius-lg);
  --cut-radius-pill: 0 999px 0 999px;
  --container: min(1180px, calc(100vw - 40px));
  --section-space: clamp(60px, 7vw, 84px);
  --transition: 220ms ease;
  --hero-load-ease: cubic-bezier(0.13, 1.08, 0.18, 1);
  --grid-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%231A2B3A' stroke-opacity='.04' stroke-width='1'%3E%3Cpath d='M0 .5H120M0 30.5H120M0 60.5H120M0 90.5H120M.5 0V120M30.5 0V120M60.5 0V120M90.5 0V120'/%3E%3C/g%3E%3C/svg%3E");
  --grid-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='white' stroke-opacity='.08' stroke-width='1'%3E%3Cpath d='M0 .5H120M0 30.5H120M0 60.5H120M0 90.5H120M.5 0V120M30.5 0V120M60.5 0V120M90.5 0V120'/%3E%3C/g%3E%3C/svg%3E");
  --chevron-mark: url("../img/brand/chevron-mark.svg");
}

@font-face {
  font-family: "Noe Display";
  src: url("../fonts/noe-display-medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noe Display";
  src: url("../fonts/noe-display-bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noe Display";
  src: url("../fonts/noe-display-regular-italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Nord";
  src: url("../fonts/nord-book.woff2") format("woff2");
  font-weight: 350;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Nord";
  src: url("../fonts/nord-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Nord";
  src: url("../fonts/nord-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Nord";
  src: url("../fonts/nord-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter Tight";
  src: url("../fonts/inter-tight-400.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter Tight";
  src: url("../fonts/inter-tight-500.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter Tight";
  src: url("../fonts/inter-tight-600.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter Tight";
  src: url("../fonts/inter-tight-700.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

[id] {
  scroll-margin-top: 96px;
}

body {
  margin: 0;
  background:
    radial-gradient(circle at top left, rgba(0, 147, 82, 0.08), transparent 32%),
    linear-gradient(180deg, #f8f5f0 0%, #f5f1ec 55%, #eee7de 100%);
  color: var(--text);
  font-family: "Inter Tight", "Helvetica Neue", sans-serif;
  line-height: 1.65;
  letter-spacing: -0.015em;
  overflow-x: clip;
}

img {
  display: block;
  max-width: 100%;
}

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

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

.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;
}

.container {
  width: var(--container);
  margin: 0 auto;
}

.site-shell {
  min-height: 100vh;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  background: rgba(255, 255, 255, 0.84);
  border-bottom: 1px solid rgba(26, 43, 58, 0.08);
  box-shadow: 0 8px 24px rgba(26, 43, 58, 0.04);
}

.is-safari .site-header {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: rgba(255, 255, 255, 0.94);
}

.header-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
  min-height: 76px;
}

.brand,
.site-nav a,
.header-actions > *,
.menu-toggle,
.hero-copy > .eyebrow,
.hero-copy h1,
.hero-rotator-line,
.hero-lede,
.hero-actions .button {
  animation-fill-mode: both;
}

.brand {
  animation: hero-load-left 1500ms var(--hero-load-ease, cubic-bezier(0.16, 1, 0.22, 1)) 90ms both;
}

.brand {
  width: min(182px, 36vw);
}

.brand img {
  width: 100%;
}

.site-nav {
  display: flex;
  justify-content: center;
  gap: 28px;
  font-family: "Nord", "Helvetica Neue", sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--text-soft);
}

.site-nav a {
  animation: hero-load-down 1350ms var(--hero-load-ease, cubic-bezier(0.16, 1, 0.22, 1)) both;
}

.site-nav a:nth-child(1) {
  animation-delay: 180ms;
}

.site-nav a:nth-child(2) {
  animation-delay: 260ms;
}

.site-nav a:nth-child(3) {
  animation-delay: 340ms;
}

.site-nav a,
.header-phone,
.footer-links a {
  position: relative;
  transition: color var(--transition);
}

.site-nav a::after,
.header-phone::after,
.footer-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}

.site-nav a:hover,
.header-phone:hover,
.footer-links a:hover {
  color: var(--navy);
}

.site-nav a:hover::after,
.header-phone:hover::after,
.footer-links a:hover::after {
  transform: scaleX(1);
}

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

.header-actions > * {
  animation: hero-load-right 1450ms var(--hero-load-ease, cubic-bezier(0.16, 1, 0.22, 1)) both;
}

.header-actions > *:nth-child(1) {
  animation-delay: 300ms;
}

.header-actions > *:nth-child(2) {
  animation-delay: 400ms;
}

.header-phone {
  color: var(--text-soft);
  font-family: "Nord", "Helvetica Neue", sans-serif;
  letter-spacing: 0.03em;
}

.header-actions .header-phone {
  display: none;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: "Nord", "Helvetica Neue", sans-serif;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition:
    transform var(--transition),
    box-shadow var(--transition),
    border-color var(--transition),
    background-color var(--transition),
    color var(--transition);
}

.button:hover {
  transform: translateY(-1px);
}

.button-primary {
  background: var(--navy);
  color: #fff;
  box-shadow: 0 20px 40px rgba(26, 43, 58, 0.16);
}

.button-primary:hover {
  background: var(--navy-deep);
  box-shadow: 0 24px 50px rgba(26, 43, 58, 0.22);
}

.button-secondary {
  background: rgba(255, 255, 255, 0.5);
  color: var(--navy);
  border-color: rgba(26, 43, 58, 0.14);
}

.button-secondary:hover {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(26, 43, 58, 0.22);
}

.button-on-dark {
  background: rgba(255, 255, 255, 0.94);
  color: var(--navy);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.2);
}

.button-on-dark:hover {
  background: #fff;
  border-color: rgba(255, 255, 255, 0.36);
  box-shadow: 0 22px 52px rgba(0, 0, 0, 0.26);
}

.button-ghost-dark {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.24);
}

.button-ghost-dark:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.42);
}

.button-block {
  width: 100%;
}

.hero {
  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
  overflow-x: clip;
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(56px, 8svh, 96px) 0;
}

.hero-backdrop {
  position: absolute;
  z-index: 0;
  inset: -80px 0 -100px;
  background:
    radial-gradient(circle at 10% 12%, rgba(255, 255, 255, 0.72), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.6), transparent 55%);
  pointer-events: none;
}

.hero-dot-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  opacity: 0;
  transition: opacity 900ms ease;
}

.hero-dot-canvas.is-ready {
  opacity: 1;
}

/* When the canvas successfully activates, suppress the CSS fallback dot grid. */
.hero-backdrop.has-canvas-dots::before,
.hero-backdrop.has-canvas-dots::after {
  display: none;
}

.hero-backdrop::before {
  content: "";
  position: absolute;
  inset: 10% -4% -8%;
  background-image: radial-gradient(circle, rgba(26, 43, 58, 0.1) 1.05px, transparent 1.75px);
  background-size: 22px 22px;
  background-position: 0 0;
  opacity: 0.5;
}

.hero-backdrop::after {
  content: "";
  position: absolute;
  inset: 6% -8% -12%;
  background-image: radial-gradient(circle, rgba(0, 147, 82, 0.2) 1px, transparent 1.7px);
  background-size: 23px 23px;
  background-position: 10px 4px;
  opacity: 0.28;
  transform-origin: center;
  animation: hero-dot-wave 18s ease-in-out infinite alternate;
}

.is-safari .hero-backdrop::after {
  -webkit-mask-image: none;
  mask-image: none;
  animation: none;
  opacity: 0.14;
  transform: none;
}

@supports ((mask-image: radial-gradient(white, transparent)) or (-webkit-mask-image: radial-gradient(white, transparent))) {
  .hero-backdrop::after {
    -webkit-mask-image:
      linear-gradient(180deg, transparent 0%, black 16%, black 84%, transparent 100%),
      repeating-radial-gradient(
        ellipse 145% 92% at 50% 54%,
        transparent 0 6.5%,
        black 7.2% 8.1%,
        transparent 9% 13.8%
      );
    -webkit-mask-size: auto, 100% 100%;
    -webkit-mask-position: center, center;
    -webkit-mask-repeat: no-repeat, no-repeat;
    mask-image:
      linear-gradient(180deg, transparent 0%, black 16%, black 84%, transparent 100%),
      repeating-radial-gradient(
        ellipse 145% 92% at 50% 54%,
        transparent 0 6.5%,
        black 7.2% 8.1%,
        transparent 9% 13.8%
      );
    mask-size: auto, 100% 100%;
    mask-position: center, center;
    mask-repeat: no-repeat, no-repeat;
  }
}

@keyframes hero-dot-wave {
  0% {
    transform: translate3d(-1.5%, 0.8%, 0) scale(1.01, 0.98);
    opacity: 0.22;
  }
  50% {
    transform: translate3d(1.2%, -1.2%, 0) scale(1.045, 1.015);
    opacity: 0.32;
  }
  100% {
    transform: translate3d(-0.8%, 1.4%, 0) scale(1.015, 1.03);
    opacity: 0.24;
  }
}

@keyframes values-marquee-scroll {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(calc(-1 * var(--marquee-loop-width, 50%)), 0, 0);
  }
}

@keyframes hero-load-down {
  0% {
    opacity: 0;
    transform: translate3d(0, -34px, 0) scale(0.96);
    filter: blur(10px);
  }
  58% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
}

@keyframes hero-load-left {
  0% {
    opacity: 0;
    transform: translate3d(-44px, 10px, 0) scale(0.97);
    filter: blur(12px);
  }
  58% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
}

@keyframes hero-load-right {
  0% {
    opacity: 0;
    transform: translate3d(38px, -8px, 0) scale(0.98);
    filter: blur(10px);
  }
  58% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
}

@keyframes hero-load-right-strong {
  0% {
    opacity: 0;
    transform: translate3d(76px, 18px, 0) scale(0.94);
    filter: blur(14px);
  }
  54% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
}

@keyframes hero-load-up {
  0% {
    opacity: 0;
    transform: translate3d(0, 42px, 0) scale(0.98);
    filter: blur(10px);
  }
  58% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
}

@keyframes hero-load-up-strong {
  0% {
    opacity: 0;
    transform: translate3d(0, 54px, 0) scale(0.94);
    filter: blur(12px);
  }
  56% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}

/* ----- Hero chevron mark ----- */
.hero-mark {
  position: relative;
  z-index: 1;
  justify-self: end;
  align-self: center;
  /* Scaled up so the mark carries more visual weight next to the headline. */
  width: clamp(343px, 34.3vw, 515px);
  /* Nudge the whole mark so its optical centre lines up with the
     headline block — the tall diagonal silhouette reads centred about
     60% down, so this clamped offset rebalances it against the
     left-column copy while sitting slightly lower on the page. */
  margin-top: clamp(-28px, calc(-3.2vw + 16px), -4px);
  pointer-events: none;
  /* Chevron aspect-ratio is 18.09 × 29.727; match it so the
     absolutely-positioned canvas sibling overlays the SVG pixel-perfectly
     even before the SVG's intrinsic height resolves. */
  aspect-ratio: 18.09 / 29.727;
}

.hero-chevron {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 28px 44px rgba(26, 43, 58, 0.17))
          drop-shadow(0 2px 4px rgba(26, 43, 58, 0.08));
}

/* WebGL liquid — three per-chevron canvases stacked over the SVG mark.
   Each canvas is full hero-mark size and masked via CSS mask-image to ONE
   polygon, so it can be translated independently with cursor parallax
   without dragging the others. All three render the same domain-warped
   fBm shader with shared time+cursor uniforms, so the fluid appears to
   flow continuously across the three windows. When any of them init the
   .has-gl-liquid class goes on .hero-mark and the SVG bars + legacy
   liquid are hidden so nothing pokes through the canvas mask edges. If
   WebGL init fails the canvases are removed and the SVG fallback shows
   through. */
.hero-chevron .hcg-legacy-liquid { pointer-events: none; }

.hero-mark.has-gl-liquid .hcg-legacy-liquid { display: none; }

/* When WebGL is live the SVG bars themselves are hidden — otherwise their
   solid gradient fills peek out along the canvas mask edges (sub-pixel
   rounding differs between canvas bitmap masking and SVG vector
   rasterisation). The canvas stack carries the full silhouette plus its
   own drop-shadow, so nothing is lost visually. */
.hero-mark.has-gl-liquid .hcg-bars { visibility: hidden; }

/* Stack wrapper — opacity transition only, no shadow. Shadows live on
   the individual canvases so each chevron casts its OWN elevation
   shadow, which (a) reads more physical than a single giant shadow and
   (b) lets shadows fall naturally between bars for depth. */
.hero-mark .hcg-liquid-gl-stack {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 1;
}

/* Film-grain overlay — one per chevron slot so the texture inherits the
   slot's parallax transform (the grain drifts with the cursor exactly
   like the WebGL canvas inside the same slot). Each slot exposes a
   --chev-mask custom property holding its single-polygon mask URL; the
   ::after picks it up via inheritance, as does the canvas itself. */
.hero-mark.has-gl-liquid .hcg-chev-slot::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
  background-repeat: repeat;
  mix-blend-mode: overlay;
  opacity: 0.55;
  -webkit-mask-image: var(--chev-mask);
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-image: var(--chev-mask);
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
}

/* Slot wrapper — one per chevron. Holds the drop-shadow filter AND the
   per-chevron parallax CSS transform. The filter has to live on the
   PARENT of the masked canvas because on a single element CSS applies
   `mask` after `filter`; a filter-on-masked-element loses its shadow to
   the mask itself. With the mask on the child canvas and the filter on
   this parent, the shadow traces the masked silhouette (the chevron
   polygon) and spills outside it correctly. */
.hero-mark .hcg-chev-slot {
  --hero-chev-shadow:
    drop-shadow(0 1px 1.5px rgba(14, 28, 42, 0.18))
    drop-shadow(0 6px 14px rgba(14, 28, 42, 0.16))
    drop-shadow(0 18px 32px rgba(14, 28, 42, 0.12));
  position: absolute;
  inset: 0;
  opacity: 1;
  pointer-events: none;
  will-change: transform, opacity, filter;
  /* Layered realistic elevation shadow.
       1) Tight 1px/1.5px contact shadow — anchors each bar to the
          surface, prevents the "floating cutout" look.
       2) Medium 6px/14px ambient shadow — the main elevation read.
       3) Long 18px/32px soft cast — low-alpha falloff that makes the
          elevation feel real, not sharp.
     Tints are pulled from brand navy at low alpha so the shadows stay
     warm against the off-white page (a neutral-grey shadow reads
     synthetic here). */
  filter:
    var(--hero-chev-shadow);
}

.hero-mark .hcg-liquid-gl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  -webkit-mask-image: var(--chev-mask);
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-image: var(--chev-mask);
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
}

/* Per-chevron mask URLs live on the slot so both the canvas inside it
   AND the slot's ::after grain inherit the same single-polygon mask. */
.hero-mark .hcg-chev-slot[data-gl-chev="1"] {
  --chev-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18.09 29.727' preserveAspectRatio='xMidYMid meet'><polygon points='0 11.76 0 16.15 17.96 4.39 17.96 0' fill='white'/></svg>");
}
.hero-mark .hcg-chev-slot[data-gl-chev="2"] {
  --chev-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18.09 29.727' preserveAspectRatio='xMidYMid meet'><polygon points='.14 18.548 .14 22.938 18.09 11.178 18.09 6.788' fill='white'/></svg>");
}
.hero-mark .hcg-chev-slot[data-gl-chev="3"] {
  --chev-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18.09 29.727' preserveAspectRatio='xMidYMid meet'><polygon points='.14 25.327 .14 29.727 18.09 17.967 18.09 13.577' fill='white'/></svg>");
}

.hero-chevron .hcg-bar {
  transform-box: fill-box;
  transform-origin: 0% 100%;
  will-change: transform, opacity, filter;
}

/* Grain layer sits on top of everything so the speckle texture modulates
   both the bars and the liquid blobs, keeping the whole mark on one
   unified "material" rather than letting blobs read as clean gradient
   circles floating over textured bars. */
.hero-chevron .hcg-grain-layer {
  mix-blend-mode: overlay;
  opacity: 0.45;
  pointer-events: none;
}

/* Parallax wrapper inside each bar — transform is updated from JS. GPU
   hint via will-change so the per-frame transform updates stay cheap. */
.hero-chevron .hcg-parallax {
  will-change: transform;
}

/* Liquid colour field — split blend modes for contrast. Navy blobs on
   multiply darken the base (strongest over green bars); green blobs on
   screen brighten it (strongest over navy bars). Result: each blob reads
   as a distinct moving puddle regardless of what colour the bar is
   cycling through. */
.hero-chevron .hcg-liquid-dark {
  mix-blend-mode: multiply;
  pointer-events: none;
}

.hero-chevron .hcg-liquid-light {
  mix-blend-mode: screen;
  pointer-events: none;
}

/* Lead highlight — pale mint-cream, screen blend at moderate opacity so
   the hot spot clearly reads as a moving highlight against the saturated
   bars. Still gentler than pure-white screen because the gradient colour
   is tinted mint. */
.hero-chevron .hcg-shine-group {
  mix-blend-mode: screen;
  opacity: 0.7;
  pointer-events: none;
}

.is-safari .hero-chevron {
  filter: drop-shadow(0 18px 34px rgba(26, 43, 58, 0.1));
}

.is-safari .hero-mark .hcg-legacy-liquid,
.is-safari .hero-mark .hcg-grain-layer,
.is-safari .hero-mark .hcg-shine-group,
.is-safari .hero-mark .hcg-liquid-gl-stack {
  display: none;
}

.is-safari .hero-mark .hcg-fill {
  fill: none;
  stroke: rgba(26, 43, 58, 0.86);
  stroke-width: 2.2px;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.js .hero-mark .hcg-liquid-dark,
.js .hero-mark .hcg-liquid-light,
.js .hero-mark .hcg-grain-layer,
.js .hero-mark .hcg-shine-group,
.js .hero-mark .hcg-chev-slot {
  opacity: 0;
}

.js .hero-mark .hcg-chev-slot {
  filter: blur(14px) var(--hero-chev-shadow);
}

.js .hero-mark.is-revealed .hcg-liquid-dark,
.js .hero-mark.is-revealed .hcg-liquid-light {
  animation: hero-chev-field-in 1600ms cubic-bezier(0.22, 1, 0.36, 1) 820ms forwards;
}

.js .hero-mark.is-revealed .hcg-grain-layer {
  animation: hero-chev-grain-in 1400ms cubic-bezier(0.22, 1, 0.36, 1) 920ms forwards;
}

@keyframes hero-chev-grain-in {
  from { opacity: 0; }
  to   { opacity: 0.45; }
}

.js .hero-mark.is-revealed .hcg-shine-group {
  animation: hero-chev-shine-in 1400ms cubic-bezier(0.22, 1, 0.36, 1) 1000ms forwards;
}

@keyframes hero-chev-field-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes hero-chev-shine-in {
  from { opacity: 0; }
  to   { opacity: 0.7; }
}

/* Pre-reveal state — only applied when JS is active so a no-JS render still
   shows the mark immediately. */
.js .hero-mark .hcg-bar {
  opacity: 0;
  transform: translate(-6%, 12%) scale(0.92);
  filter: blur(14px);
}

/* Bars enter bottom-to-top and use the same blurred load language as the
   rest of the hero, while JS owns the ongoing cursor-position transforms. */
.js .hero-mark.is-revealed .hcg-bar-3 {
  animation: hero-chev-enter 1500ms var(--hero-load-ease) 420ms forwards;
}
.js .hero-mark.is-revealed .hcg-bar-2 {
  animation: hero-chev-enter 1500ms var(--hero-load-ease) 560ms forwards;
}
.js .hero-mark.is-revealed .hcg-bar-1 {
  animation: hero-chev-enter 1500ms var(--hero-load-ease) 700ms forwards;
}

.js .hero-mark.is-revealed .hcg-chev-slot[data-gl-chev="3"] {
  animation: hero-chev-slot-in 1500ms var(--hero-load-ease) 420ms forwards;
}
.js .hero-mark.is-revealed .hcg-chev-slot[data-gl-chev="2"] {
  animation: hero-chev-slot-in 1500ms var(--hero-load-ease) 560ms forwards;
}
.js .hero-mark.is-revealed .hcg-chev-slot[data-gl-chev="1"] {
  animation: hero-chev-slot-in 1500ms var(--hero-load-ease) 700ms forwards;
}

@keyframes hero-chev-enter {
  0% {
    opacity: 0;
    transform: translate(-6%, 12%) scale(0.92);
    filter: blur(14px);
  }
  55% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
    filter: blur(0);
  }
}

@keyframes hero-chev-slot-in {
  0% {
    opacity: 0;
    filter: blur(14px) var(--hero-chev-shadow);
  }
  55% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    filter: blur(0) var(--hero-chev-shadow);
  }
}

.hero-copy,
.hero-panel,
.step-card,
.split-panel,
.faq-card,
.cta-card,
.band-card,
.intake-copy {
  position: relative;
  z-index: 1;
}

.hero-copy {
  max-width: 860px;
}

@media (min-width: 1081px) {
  .hero-copy {
    margin-top: clamp(-148px, calc(18svh - 220px), -56px);
  }
}

.hero-copy > .eyebrow {
  animation: hero-load-left 1500ms var(--hero-load-ease) 420ms both;
}

.hero-copy h1 {
  animation: none;
}

.js .hero-copy h1[data-animate] {
  opacity: 1;
  transform: none;
  transition: none;
}

/* Soft radial halo behind the hero copy so the headline and paragraph rest
   on a legible cushion even when a bright wave of dots rolls through. The
   canvas-side text-safe attenuator already dims dots here; this gradient
   finishes the job without making the region feel like a hard panel. */
.hero-copy::before {
  content: "";
  position: absolute;
  inset: -12% -14% -10% -18%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 62% 68% at 40% 52%,
      rgba(248, 245, 240, 0.92) 0%,
      rgba(248, 245, 240, 0.72) 35%,
      rgba(248, 245, 240, 0.35) 62%,
      rgba(248, 245, 240, 0) 85%
    );
  filter: blur(10px);
}

.eyebrow {
  margin: 0 0 18px;
  color: var(--green);
  font-family: "Nord", "Helvetica Neue", sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.eyebrow-mark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.eyebrow-mark::before {
  content: "";
  width: 15px;
  height: 20px;
  flex: 0 0 15px;
  background: var(--chevron-mark) center / contain no-repeat;
  opacity: 0.92;
  transform: translateY(-1px);
}

.hero h1,
.section h2,
.split-panel h2,
.cta-card h2,
.panel-topline + h2 {
  margin: 0;
  font-family: "Noe Display", Georgia, serif;
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.03em;
}

.hero h1 {
  max-width: 18ch;
  font-size: clamp(3.5rem, 6.45vw, 6.6rem);
}

.hero-headline-strong,
.hero-headline-italic {
  display: block;
}

.hero-headline-strong {
  font-size: 0.88em;
  font-weight: 700;
  white-space: nowrap;
}

.hero-headline-italic {
  font-style: italic;
  font-weight: 400;
}

.hero-lede,
.story-copy p,
.section-heading,
.step-card p,
.faq-card p,
.split-panel p,
.cta-card p,
.hero-panel p {
  color: var(--text-soft);
}

.hero-lede {
  max-width: 60ch;
  margin: 26px 0 0;
  font-size: 1.08rem;
}

.hero-rotator-line {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 0;
  color: var(--text-soft);
  font-family: "Nord", "Helvetica Neue", sans-serif;
  font-size: clamp(1.12rem, 1.55vw, 1.38rem);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  animation: hero-load-left 1600ms var(--hero-load-ease) 760ms both;
}

.word-rotator {
  display: inline-block;
  height: var(--roller-word-height, 1.12em);
  overflow: hidden;
  vertical-align: bottom;
  color: var(--green);
  min-width: var(--roller-word-width, 0px);
}

.word-rotator-track {
  display: flex;
  flex-direction: column;
  transition: transform 500ms cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: transform;
}

.word-rotator-track span {
  display: block;
  height: var(--roller-word-height, 1.12em);
  line-height: var(--roller-word-height, 1.12em);
  white-space: nowrap;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

.hero-lede {
  animation: hero-load-up 1600ms var(--hero-load-ease) 900ms both;
}

.hero-actions .button {
  animation: hero-load-up-strong 1700ms var(--hero-load-ease) both;
}

.hero-actions .button:nth-child(1) {
  animation-delay: 1080ms;
}

.hero-actions .button:nth-child(2) {
  animation-delay: 1200ms;
}

.trust-points {
  display: grid;
  gap: 10px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  color: var(--text);
  font-family: "Nord", "Helvetica Neue", sans-serif;
  font-size: 1rem;
}

.trust-points li {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding-left: 48px;
}

.trust-points li::before,
.trust-points li::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: var(--green);
  transform-origin: center;
}

.trust-points li::before {
  opacity: 0;
  transform: translate3d(0, -50%, 0) scale(0.42);
  animation: trust-dot-ring 4.2s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}

.trust-points li::after {
  opacity: 0.96;
  transform: translate3d(0, -50%, 0) scale(0.7);
  animation: trust-dot-core 4.2s cubic-bezier(0.2, 0.72, 0.22, 1) infinite;
}

.trust-points li:nth-child(2)::before {
  animation-delay: 0.4s;
}

.trust-points li:nth-child(2)::after {
  animation-delay: 0.4s;
}

.trust-points li:nth-child(3)::before {
  animation-delay: 0.8s;
}

.trust-points li:nth-child(3)::after {
  animation-delay: 0.8s;
}

.hero-panel,
.band-card,
.step-card-inner,
.split-panel,
.faq-card,
.cta-card,
.page-shell,
.page-card {
  border: 1px solid rgba(26, 43, 58, 0.1);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.94));
  box-shadow: var(--shadow);
}

.hero-panel {
  padding: 32px 28px;
  border-radius: var(--cut-radius-lg);
  background: #fff;
  box-shadow: none;
}

.intake-form .button,
.intake-form .button:hover {
  box-shadow: none;
}

.frame-accent::before,
.frame-accent::after {
  content: "";
  position: absolute;
  pointer-events: none;
  opacity: 0.34;
}

.frame-accent::before {
  top: 18px;
  left: 18px;
  width: 58px;
  height: 58px;
  border-top: 1px solid rgba(0, 147, 82, 0.24);
  border-left: 1px solid rgba(26, 43, 58, 0.12);
  transform-origin: top left;
}

.frame-accent::after {
  right: 18px;
  bottom: 18px;
  width: 72px;
  height: 72px;
  border-right: 1px solid rgba(0, 147, 82, 0.2);
  border-bottom: 1px solid rgba(26, 43, 58, 0.12);
  transform-origin: bottom right;
}

.js .frame-accent::before,
.js .frame-accent::after {
  opacity: 0;
  transition:
    transform 900ms cubic-bezier(0.2, 0.7, 0.2, 1) 180ms,
    opacity 900ms cubic-bezier(0.2, 0.7, 0.2, 1) 180ms;
}

.js .frame-accent::before {
  transform: scale(0.7);
}

.js .frame-accent::after {
  transform: scale(0.78);
}

.js .frame-accent.is-visible::before,
.js .frame-accent.is-visible::after {
  opacity: 0.34;
  transform: scale(1);
}

.panel-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
  color: var(--text-soft);
  font-family: "Nord", "Helvetica Neue", sans-serif;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.panel-topline a {
  color: var(--navy);
  font-weight: 600;
}

.hero-panel h2,
.section h2 {
  font-size: clamp(2rem, 4vw, 3.3rem);
}

.hero-panel h2 {
  font-family: "Noe Display", Georgia, serif;
  font-size: clamp(1.9rem, 2.7vw, 2.45rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 0.98;
}

.hero-panel p {
  margin: 14px 0 0;
}

.intake-form {
  display: grid;
  gap: 14px;
  margin-top: 24px;
}

.intake-form-status {
  display: flex;
  justify-content: space-between;
  color: var(--green);
  font-family: "Nord", "Helvetica Neue", sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.intake-form-window {
  overflow: hidden;
}

.intake-form-track {
  display: flex;
  align-items: stretch;
  transform: translate3d(calc(var(--active-page, 0) * -100%), 0, 0);
  transition: transform 620ms cubic-bezier(0.2, 0.72, 0.18, 1);
  will-change: transform;
}

.intake-form-page {
  flex: 0 0 100%;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 16px;
}

.form-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 12px;
}

.form-field-full {
  grid-column: 1 / -1;
}

.form-page-actions {
  display: flex;
  align-self: end;
  gap: 12px;
}

.form-page-actions .button {
  flex: 1;
  white-space: nowrap;
}

.conditional-field[hidden] {
  display: none;
}

.intake-form label,
.form-field {
  display: grid;
  gap: 8px;
  font-family: "Nord", "Helvetica Neue", sans-serif;
  font-size: 0.92rem;
  color: var(--navy);
  letter-spacing: 0.03em;
}

.intake-form input,
.intake-form select,
.intake-form textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid rgba(26, 43, 58, 0.12);
  border-radius: var(--cut-radius-sm);
  background: rgba(255, 255, 255, 0.92);
  color: var(--text);
  font-size: 1rem;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.intake-form select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 52px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%231A2B3A' stroke-width='2.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position: right 18px center;
  background-repeat: no-repeat;
  background-size: 24px 24px;
}

.intake-form input:focus,
.intake-form select:focus,
.intake-form textarea:focus {
  border-color: rgba(0, 147, 82, 0.5);
  box-shadow: 0 0 0 4px rgba(0, 147, 82, 0.12);
}

.form-note {
  margin: 2px 0 0;
  font-size: 0.9rem;
  color: var(--text-soft);
}

.section {
  padding: var(--section-space) 0;
}

/* Keep one consistent vertical gap between stacked homepage sections instead
   of compounding top and bottom padding on every adjacent section pair.
   The post-marquee sections live inside `.content-rail-host` (the wrapper
   that hosts the chevron rail), so the rule now targets that parent. */
main > .section + .section,
.content-rail-host > .section + .section {
  padding-top: 0;
}

.content-rail-host > .section {
  padding-top: 0;
}

.section-intake {
  padding-top: 0;
}

.intake-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(360px, 1fr);
  gap: clamp(18px, 2.4vw, 28px);
  align-items: start;
}

.intake-copy {
  display: grid;
  gap: 18px;
  padding-top: 16px;
}

.intake-copy h2 {
  max-width: 11ch;
}

.intake-copy p {
  margin: 0;
  max-width: 42ch;
  color: var(--text-soft);
}

.intake-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 6px;
}

.intake-collage {
  width: min(100%, 510px);
  margin: clamp(38px, 7vw, 82px) 0 0;
}

.intake-collage-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr);
  grid-template-rows: repeat(2, clamp(152px, 12vw, 210px));
  gap: 12px;
}

.intake-collage-tile {
  border-radius: var(--cut-radius-sm);
  box-shadow:
    0 1px 2px rgba(26, 43, 58, 0.05),
    0 12px 24px rgba(26, 43, 58, 0.09),
    0 28px 48px rgba(26, 43, 58, 0.05);
}

.intake-collage-tile::after {
  background:
    radial-gradient(circle at 100% 0%, rgba(0, 147, 82, 0.32) 0, rgba(0, 147, 82, 0.16) 12%, transparent 28%),
    radial-gradient(circle at 0% 100%, rgba(0, 147, 82, 0.24) 0, rgba(0, 147, 82, 0.10) 10%, transparent 24%);
}

.intake-collage-tile-trees {
  grid-column: 1;
  grid-row: 1;
  --photo-scale: 1.04;
  --photo-hover-scale: 1.1;
  --reveal-delay: 0ms;
}

.intake-collage-tile-girls {
  grid-column: 1;
  grid-row: 2;
  --photo-scale: 1.02;
  --photo-hover-scale: 1.08;
  --reveal-delay: 120ms;
}

.intake-collage-tile-man {
  grid-column: 2;
  grid-row: 1 / span 2;
  --photo-scale: 1.01;
  --photo-hover-scale: 1.06;
  --reveal-delay: 220ms;
}

.values-marquee {
  position: relative;
  z-index: 2;
  padding: 0;
  overflow: hidden;
  background: #fff;
}

.values-marquee-viewport {
  position: relative;
  z-index: 1;
  width: 100%;
  overflow: hidden;
  border-top: 1px solid rgba(26, 43, 58, 0.08);
  border-bottom: 1px solid rgba(26, 43, 58, 0.08);
  background: #fff;
}

.values-marquee-track {
  display: flex;
  width: max-content;
  animation: values-marquee-scroll 34s linear infinite;
  will-change: transform;
}

.values-marquee-group {
  display: flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
  min-width: max-content;
  padding: 14px 0;
}

.values-marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  margin-right: 18px;
  border: 1px solid rgba(26, 43, 58, 0.08);
  border-radius: 0 18px 0 18px;
  background: rgba(255, 255, 255, 0.58);
  color: var(--navy);
  font-family: "Nord", "Helvetica Neue", sans-serif;
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.values-marquee-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--green);
  flex: 0 0 32px;
}

.values-marquee-icon svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* Chevron rail — a continuously scrolling column of brand-green chevron
   outlines that runs down the right gutter of the page, behind every
   content section between the values marquee and the footer.

   Implementation: the rail is a single absolutely-positioned div inside
   `.content-rail-host`, which wraps the post-marquee / pre-footer
   sections. The host has `isolation: isolate` so the rail's z-index:-1
   stays scoped to it (and never escapes behind page-level backgrounds);
   the host's overflow: hidden also keeps the rail from leaking up into
   the marquee or down into the footer if either ever changes height.

   The chevron polygon is the same shape as bar 1 of the hero chevron
   mark (points='0 11.76 0 16.15 17.96 4.39 17.96 0'), embedded as an
   inline SVG data-URL. `repeat-y` tiles it down the rail's height; a
   linear keyframe animation translates `background-position-y` by
   exactly one tile height per cycle so the loop is seamless. Tile
   height is computed from the rail's current width via a custom
   property, which keeps the loop correct when the width changes at
   media-query breakpoints. */
.content-rail-host {
  position: relative;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  /* Horizontal-only clip: the rail is wider than the gutter on most
     desktops so we still need to prevent horizontal scrollbars, but
     we deliberately leave overflow-y as visible so the rail can extend
     below the wrapper's bottom edge into the footer's margin-top gap.
     (The rail bottoms out at -68px, exactly where the navy footer
     begins — see `.site-footer { margin-top: 68px }`.) */
  overflow-x: clip;
}

.content-rail-host > .section.section-intake {
  order: 1;
  padding-top: var(--section-space);
}

.content-rail-host > .section-band {
  order: 2;
}

.content-rail-host > #how-it-works {
  order: 3;
}

.content-rail-host > .section-story {
  order: 4;
}

.content-rail-host > .section-split {
  order: 5;
}

.content-rail-host > .section-cta {
  order: 6;
}

.chevron-rail {
  --rail-width: clamp(450px, 54vw, 840px);
  /* Tile height tracks the SVG viewBox aspect (18.5 / 18.96). The
     viewBox is now barely taller than the chevron bar itself, so the
     gap between consecutive bars is ~2 vb units — chevrons read as a
     tight cascading column rather than widely-spaced marks. */
  --rail-tile-h: calc(var(--rail-width) * 18.5 / 18.96);
  position: absolute;
  /* The rail starts right after the values marquee (top of wrapper)
     and extends 68px past the wrapper's bottom edge so it lands on
     the navy footer's actual top edge. The 68px matches the footer's
     `margin-top` — that margin creates a tan gap between the wrapper
     and the footer that we want the chevrons to flow through. */
  top: 0;
  bottom: -68px;
  /* Centre the rail on the container's right edge: gutter offset is
     `(100vw - 1180px) / 2` (clamped to 24px so it never goes negative
     at narrow viewports), then we shift left by half the rail width
     so the rail's centre lands on the container edge. Result: about
     half the rail sits behind content, the other half in the gutter. */
  right: calc(max(24px, (100vw - 1180px) / 2) - var(--rail-width) / 2);
  width: var(--rail-width);
  pointer-events: none;
  z-index: -1;
  /* Reduce overall visual weight so the rail reads as quiet background
     texture, more in line with the dot field's average alpha. */
  opacity: 0.75;
  /* Stroke colour `#6e7882` matches the INK constant used by the hero
     dot canvas (rgb 110,120,130 — the trough/baseline slate that the
     dots sit at most of the time). Stroke-width 0.0315 in viewBox
     units (30% thinner than 0.045) lands at ~0.75–1.4px on screen. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-0.5 -0.5 18.96 18.5'><polygon points='0,11.76 0,16.15 17.96,4.39 17.96,0' fill='none' stroke='%236e7882' stroke-width='0.0315'/></svg>");
  background-repeat: repeat-y;
  background-size: 100% var(--rail-tile-h);
  animation: chevron-rail-scroll 24s linear infinite;
}

/* Animate background-position upward (negative Y) so chevrons appear to
   scroll up the page. One tile of travel per cycle keeps the loop
   seamless because the next tile starts exactly where the previous
   one ended. */
@keyframes chevron-rail-scroll {
  from { background-position: 0 0; }
  to   { background-position: 0 calc(-1 * var(--rail-tile-h)); }
}

@media (max-width: 780px) {
  .chevron-rail {
    display: none;
  }
}

.section-story {
  padding-top: var(--section-space);
  overflow-x: clip;
}

.story-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: 44px;
  align-items: stretch;
}

.story-copy {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  max-width: 58ch;
}

.story-copy .eyebrow {
  margin-bottom: 16px;
}

.story-copy h2 {
  margin-bottom: 22px;
}

.story-copy p {
  margin: 0 0 18px;
  font-size: 1.02rem;
}

.story-copy p:last-of-type {
  margin-bottom: 0;
}

.story-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-self: end;
  margin-top: auto;
}

.story-collage {
  position: relative;
  width: 100%;
  margin: 0;
  padding-block: 12px;
}

/* Explicit row sizing: the top two rows are 80% of the bottom two so
   the dollars + beach photos read shorter than the bottom-half tiles
   without changing aspect within the grid layout. */
.story-collage-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows:
    repeat(2, clamp(96px, 8.8vw, 126px))
    repeat(2, clamp(120px, 11vw, 158px));
  gap: 14px;
  align-items: stretch;
}

.story-collage-tile {
  --rot: 0deg;
  --ox: 0px;
  --oy: 0px;
  --z: 1;
  --photo-scale: 1;
  --photo-hover-scale: 1.06;
  position: relative;
  overflow: hidden;
  border: 0;
  background: rgba(255, 255, 255, 0.86);
  border-radius: var(--cut-radius-md);
  transform:
    translate3d(var(--ox), var(--oy), 0)
    rotate(var(--rot));
  box-shadow:
    0 1px 2px rgba(26, 43, 58, 0.06),
    0 14px 28px rgba(26, 43, 58, 0.10),
    0 38px 64px rgba(26, 43, 58, 0.06);
  z-index: var(--z);
}

.story-collage-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 100% 0%, rgba(0, 147, 82, 0.42) 0, rgba(0, 147, 82, 0.22) 12%, transparent 28%),
    radial-gradient(circle at 0% 100%, rgba(0, 147, 82, 0.30) 0, rgba(0, 147, 82, 0.14) 10%, transparent 24%);
  pointer-events: none;
  z-index: 1;
}

.story-collage-tile picture,
.process-photo-chip picture,
.split-photo-chip picture {
  display: block;
  width: 100%;
  height: 100%;
}

.story-collage-tile img {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.94) contrast(1.02);
  /* Image-only zoom on hover — the tile itself stays put (no lift, no
     rotation snap), just the photo inside scales gently. The
     transform-origin sits at the centre so the crop expands evenly
     under the tile's clipped frame. */
  transform: scale(var(--photo-scale));
  transform-origin: 50% 50%;
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.story-collage-tile:hover img {
  transform: scale(var(--photo-hover-scale));
}

.js .story-collage-tile[data-animate] {
  opacity: 0;
  transform:
    translate3d(var(--ox), calc(var(--oy) + 36px), 0)
    rotate(var(--rot));
  transition:
    opacity 720ms cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms),
    transform 820ms cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms);
}

.js .story-collage-tile[data-animate].is-visible {
  opacity: 1;
  transform:
    translate3d(var(--ox), var(--oy), 0)
    rotate(var(--rot));
}

/* Per-tile placements on a 3-col × 4-row grid. All gaps are uniform
   (single grid `gap` value). Top half: LARGE feature photo flanked by
   PORTRAIT. Bottom half: DOCS portrait on the left, two split tiles
   (MONEY square + TRANSIT square) on the right of row 3, then LIFE
   wide landscape on row 4. The split-then-merge cadence on the right
   side breaks the otherwise-uniform row alignment. */
.story-collage-tile-large {
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
  --photo-scale: 1.38;
  --photo-hover-scale: 1.44;
  --reveal-delay: 0ms;
}

.story-collage-tile-portrait {
  grid-column: 3;
  grid-row: 1 / span 2;
  --reveal-delay: 100ms;
}

.story-collage-tile-docs {
  grid-column: 1;
  grid-row: 3 / span 2;
  --reveal-delay: 200ms;
}

.story-collage-tile-money {
  grid-column: 2;
  grid-row: 3;
  --reveal-delay: 300ms;
}

.story-collage-tile-transit {
  grid-column: 3;
  grid-row: 3;
  --reveal-delay: 400ms;
}

.story-collage-tile-life {
  grid-column: 2 / span 2;
  grid-row: 4;
  --reveal-delay: 500ms;
}

.stock-photo-frame {
  position: relative;
}

.stock-photo-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(26, 43, 58, 0.06), rgba(0, 147, 82, 0.18)),
    radial-gradient(circle at 78% 22%, rgba(0, 147, 82, 0.28), transparent 48%);
  pointer-events: none;
}

.section-band {
  padding-top: 0;
}

.band-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  gap: 34px;
  align-items: center;
  padding: 34px 38px;
  border-radius: var(--cut-radius-lg);
  background:
    var(--grid-dark),
    radial-gradient(circle at top left, rgba(0, 147, 82, 0.22), transparent 28%),
    linear-gradient(180deg, #1A2B3A 0%, rgba(26, 43, 58, 0.96) 100%);
  background-size: 120px 120px, auto, auto;
  color: #fff;
}

.band-mark {
  width: min(320px, 100%);
  margin-left: auto;
}

.band-copy h2,
.section-heading h2 {
  max-width: 14ch;
}

.band-copy .eyebrow,
.band-copy p {
  color: rgba(255, 255, 255, 0.76);
}

.band-copy h2 {
  color: #fff;
}

.band-headline-strong,
.band-headline-italic {
  display: block;
}

.band-headline-strong {
  font-weight: 700;
}

.band-headline-italic {
  font-style: italic;
  font-weight: 400;
}

.section-heading {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
  margin-bottom: 28px;
}

.section-heading::after {
  content: "";
  display: block;
  width: min(180px, 18vw);
  min-width: 120px;
  height: 1px;
  margin: 0 0 14px auto;
  background: linear-gradient(90deg, rgba(0, 147, 82, 0.75), rgba(26, 43, 58, 0.14));
  transform-origin: left center;
  opacity: 0.42;
}

.js .section-heading::after {
  transform: scaleX(0.08);
  transition:
    transform 900ms cubic-bezier(0.2, 0.7, 0.2, 1) 140ms,
    opacity 900ms cubic-bezier(0.2, 0.7, 0.2, 1) 140ms;
}

.js .section-heading.is-visible::after {
  transform: scaleX(1);
  opacity: 0.88;
}

.process-shell {
  position: relative;
  padding: 34px;
  border: 1px solid rgba(26, 43, 58, 0.1);
  border-radius: var(--cut-radius-lg);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.94));
  box-shadow: var(--shadow);
}

.process-intro {
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(26, 43, 58, 0.08);
}

.process-kicker {
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
  font-family: "Nord", "Helvetica Neue", sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 1px 4px rgba(26, 43, 58, 0.34);
}

.process-photo-chip {
  position: relative;
  margin: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border-radius: 0 var(--radius-md) 0 var(--radius-md);
  border: 0;
  background: rgba(26, 43, 58, 0.08);
  box-shadow: 0 18px 38px rgba(26, 43, 58, 0.1);
}

.process-photo-chip .process-kicker {
  display: none;
}

.process-photo-chip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
  filter: saturate(0.9) contrast(1.02);
}

.process-photo-chip::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(26, 43, 58, 0.08) 0%, rgba(26, 43, 58, 0.02) 46%, transparent 100%);
  pointer-events: none;
}

.process-photo-chip.stock-photo-frame::after {
  z-index: 2;
  border-radius: inherit;
  background:
    radial-gradient(circle at 100% 0%, rgba(0, 147, 82, 0.28) 0, rgba(0, 147, 82, 0.12) 10%, transparent 24%),
    radial-gradient(circle at 0% 100%, rgba(0, 147, 82, 0.20) 0, rgba(0, 147, 82, 0.08) 9%, transparent 21%);
}

.process-intro-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.44fr);
  gap: clamp(34px, 6vw, 78px);
  align-items: start;
}

.process-intro-copy > div:first-child {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  min-height: clamp(320px, 21vw, 400px);
}

.process-copy-main {
  display: grid;
  gap: 18px;
}

.process-intro-copy h2 {
  max-width: 12ch;
}

.process-intro-copy p {
  margin: 0;
  max-width: 34ch;
  color: var(--text-soft);
}

.process-side {
  display: flex;
  justify-content: flex-end;
  align-self: stretch;
}

.process-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: flex-start;
  align-items: center;
  margin-top: clamp(36px, 6vw, 84px);
}

.process-actions .button {
  flex: 0 0 auto;
}

.process-steps-wrap {
  position: relative;
  isolation: isolate;
  margin-top: 28px;
  padding-top: 10px;
}

.process-steps-wrap::before {
  content: "";
  position: absolute;
  left: calc(16.666% + 44px);
  right: calc(16.666% + 44px);
  top: calc(50% + 5px);
  height: 2px;
  transform: translateY(-50%);
  z-index: 0;
  background-image: linear-gradient(
    90deg,
    rgba(0, 147, 82, 0.78) 0 8px,
    transparent 8px 16px
  );
  background-size: 16px 2px;
  background-repeat: repeat-x;
  opacity: 0.8;
  animation: process-dash-flow 4s linear infinite;
}

.process-steps-wrap::after {
  content: "";
  display: none;
  position: absolute;
  left: 50%;
  top: 34px;
  bottom: 34px;
  width: 2px;
  transform: translateX(-50%);
  z-index: 0;
  background-image: linear-gradient(
    to bottom,
    rgba(0, 147, 82, 0.54) 0 8px,
    transparent 8px 16px
  );
  background-size: 2px 16px;
  background-repeat: repeat-y;
  opacity: 0.68;
  animation: process-dash-flow-y 4s linear infinite;
  pointer-events: none;
}

.steps-grid,
.faq-preview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.steps-grid {
  gap: 40px;
}

.faq-preview {
  gap: 20px;
}

.step-card-inner,
.faq-card {
  padding: 28px;
  border-radius: var(--cut-radius-md);
}

.step-card {
  position: relative;
  z-index: 1;
}

.step-card-inner {
  position: relative;
  z-index: 1;
  height: 100%;
  padding-top: 26px;
  background: #fff;
  transform-origin: center;
  transition:
    transform 320ms cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 320ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.step-top {
  position: relative;
  min-height: 54px;
  margin-bottom: 18px;
}

.step-icon {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 58px;
  width: 58px;
  height: 58px;
  min-width: 58px;
  min-height: 58px;
  max-width: 58px;
  max-height: 58px;
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  background: var(--navy);
  border: none;
  color: #fff;
  box-shadow: 0 16px 32px rgba(26, 43, 58, 0.12);
  overflow: hidden;
}

.step-icon svg {
  width: 25px;
  height: 25px;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

@keyframes trust-dot-ring {
  0% {
    opacity: 0;
    transform: translate3d(0, -50%, 0) scale(0.42);
  }
  18% {
    opacity: 0.18;
    transform: translate3d(0, -50%, 0) scale(0.88);
  }
  36% {
    opacity: 0.14;
    transform: translate3d(0, -50%, 0) scale(1.06);
  }
  72% {
    opacity: 0.05;
    transform: translate3d(0, -50%, 0) scale(1.46);
  }
  100% {
    opacity: 0;
    transform: translate3d(0, -50%, 0) scale(1.62);
  }
}

@keyframes trust-dot-core {
  0% {
    opacity: 0.96;
    transform: translate3d(0, -50%, 0) scale(0.72);
  }
  20% {
    opacity: 1;
    transform: translate3d(0, -50%, 0) scale(0.96);
  }
  34% {
    opacity: 1;
    transform: translate3d(0, -50%, 0) scale(1);
  }
  62% {
    opacity: 0.84;
    transform: translate3d(0, -50%, 0) scale(0.98);
  }
  100% {
    opacity: 0.9;
    transform: translate3d(0, -50%, 0) scale(0.72);
  }
}

@keyframes process-dash-flow {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 16px 0;
  }
}

@keyframes process-dash-flow-y {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 16px;
  }
}

@media (hover: hover) {
  .step-card:hover .step-card-inner {
    transform: translateY(-8px) scale(1.03);
    box-shadow: 0 24px 48px rgba(26, 43, 58, 0.14);
  }
}

.step-number {
  display: inline-block;
  padding-top: 6px;
  color: var(--green);
  font-family: "Nord", "Helvetica Neue", sans-serif;
  font-size: clamp(0.9rem, 0.95vw, 1rem);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.step-card h3,
.faq-card h3,
.page-card h3 {
  margin: 0 0 12px;
  font-family: "Nord", "Helvetica Neue", sans-serif;
  font-size: clamp(1.28rem, 1.55vw, 1.5rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.step-card p,
.faq-card p {
  margin: 0;
}

.section-split {
  padding-top: 0;
}

.split-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.split-panel {
  padding: 32px;
  border-radius: var(--cut-radius-lg);
  overflow: hidden;
}

.split-panel-dark {
  background:
    var(--grid-dark),
    radial-gradient(circle at top left, rgba(0, 147, 82, 0.22), transparent 28%),
    linear-gradient(180deg, #1A2B3A 0%, #1A2B3A 100%);
  background-size: 120px 120px, auto, auto;
  color: #fff;
}

.split-panel-dark::before {
  content: "";
  position: absolute;
  top: -8px;
  right: -18px;
  width: 180px;
  height: 220px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)),
    repeating-linear-gradient(
      90deg,
      rgba(0, 147, 82, 0.2) 0 18px,
      rgba(251, 248, 243, 0.1) 18px 36px
    );
  opacity: 0.22;
  mask-image: linear-gradient(180deg, black 0%, rgba(0, 0, 0, 0.35) 72%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, black 0%, rgba(0, 0, 0, 0.35) 72%, transparent 100%);
  pointer-events: none;
}

.split-panel-dark > * {
  position: relative;
  z-index: 1;
}

.split-panel-dark .eyebrow,
.split-panel-dark p {
  color: rgba(255, 255, 255, 0.76);
}

.split-panel-focus {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(300px, 0.62fr);
  grid-template-rows: auto auto auto minmax(48px, 1fr) auto;
  column-gap: clamp(34px, 5vw, 76px);
  row-gap: clamp(14px, 1.8vw, 22px);
  align-items: start;
  min-height: clamp(390px, 36vw, 470px);
  padding: 34px;
}

.split-panel-focus .eyebrow {
  grid-column: 1;
  grid-row: 1;
  margin-bottom: 0;
}

.split-panel-focus h2 {
  grid-column: 1;
  grid-row: 2;
  max-width: 13ch;
  color: #fff;
}

.split-panel-focus .feature-list {
  grid-column: 1;
  grid-row: 3;
  align-self: start;
  max-width: 44ch;
  margin-top: 0;
}

.split-photo-chip {
  position: relative;
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: stretch;
  margin: 0;
  min-height: clamp(300px, 27vw, 420px);
  overflow: hidden;
  border-radius: 0 var(--radius-md) 0 var(--radius-md);
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.22);
}

.split-photo-chip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.9) contrast(1.02);
}

.split-photo-chip.stock-photo-frame::after {
  border-radius: inherit;
  background:
    radial-gradient(circle at 100% 0%, rgba(0, 147, 82, 0.30) 0, rgba(0, 147, 82, 0.12) 10%, transparent 24%),
    radial-gradient(circle at 0% 100%, rgba(0, 147, 82, 0.20) 0, rgba(0, 147, 82, 0.08) 9%, transparent 21%);
}

.split-panel-focus .feature-list li {
  color: rgba(255, 255, 255, 0.84);
}

.section-home-faq {
  scroll-margin-top: 96px;
}

.home-faq-panel {
  display: grid;
  gap: clamp(24px, 4vw, 44px);
  padding: clamp(28px, 5vw, 54px);
}

.home-faq-heading {
  max-width: 760px;
}

.home-faq-heading h2 {
  max-width: 13ch;
  color: #fff;
}

.home-faq-heading p:not(.eyebrow) {
  max-width: 58ch;
  margin: 18px 0 0;
  color: rgba(255, 255, 255, 0.76);
}

.home-faq-panel .faq-accordion {
  margin-top: 0;
}

.faq-accordion-on-dark .faq-item {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.08);
}

.faq-accordion-on-dark .faq-item:not(.is-closing)[open] {
  border-color: rgba(0, 147, 82, 0.32);
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.14);
}

.split-panel-actions {
  grid-column: 1;
  grid-row: 5;
  justify-self: start;
  align-self: end;
  margin-top: 0;
}

.need-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.need-cloud span {
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--cut-radius-pill);
  background: rgba(255, 255, 255, 0.08);
  font-family: "Nord", sans-serif;
  font-size: 0.96rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.panel-photo-chip {
  position: relative;
  width: min(260px, 100%);
  margin: 28px 0 0 auto;
  border-radius: var(--cut-radius-md);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.22);
}

.panel-photo-chip::after {
  background:
    linear-gradient(180deg, rgba(26, 43, 58, 0.08), rgba(0, 147, 82, 0.2)),
    radial-gradient(circle at 75% 18%, rgba(0, 147, 82, 0.34), transparent 46%);
}

.panel-photo-chip img {
  width: 100%;
  aspect-ratio: 0.92;
  object-fit: cover;
  filter: saturate(0.85) contrast(1.02);
}

.feature-list {
  display: grid;
  gap: 14px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.feature-list li {
  padding-left: 18px;
  position: relative;
}

.feature-list li::before {
  content: "";
  position: absolute;
  top: 0.72em;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--green);
}

.section-actions {
  margin-top: 24px;
}

.section-cta {
  padding-top: 0;
}

.cta-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  padding: 36px;
  border-radius: var(--cut-radius-lg);
  background:
    var(--grid-light),
    radial-gradient(circle at right top, rgba(0, 147, 82, 0.12), transparent 25%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 245, 240, 0.98));
  background-size: 120px 120px, auto, auto;
}

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.site-footer {
  margin-top: 68px;
  padding: 52px 0 36px;
  background: linear-gradient(180deg, #1A2B3A 0%, rgba(26, 43, 58, 0.96) 100%);
  color: rgba(255, 255, 255, 0.78);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 26px;
  align-items: start;
}

.footer-brand {
  width: min(240px, 52vw);
  display: inline-block;
  margin-bottom: 18px;
}

.footer-links {
  display: grid;
  gap: 10px;
  justify-items: start;
  font-family: "Nord", "Helvetica Neue", sans-serif;
}

.footer-meta {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.9rem;
}

.menu-toggle {
  display: none;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(26, 43, 58, 0.12);
  border-radius: var(--cut-radius-sm);
  background: rgba(255, 255, 255, 0.64);
  cursor: pointer;
}

.menu-toggle span:not(.sr-only) {
  display: block;
  width: 20px;
  height: 2px;
  margin: 4px auto;
  background: var(--navy);
  transition: transform var(--transition), opacity var(--transition);
}

.menu-toggle[aria-expanded="true"] span:not(.sr-only):nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] span:not(.sr-only):nth-child(2) {
  opacity: 0;
}

.menu-toggle[aria-expanded="true"] span:not(.sr-only):nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.js [data-animate] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 700ms cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.js [data-animate="fade-left"] {
  transform: translateX(28px);
}

.js [data-animate="reveal"] {
  transform: translateY(26px) scale(0.98);
}

.js [data-animate].is-visible {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

.page-hero {
  padding: 74px 0 42px;
}

.page-shell {
  padding: 34px;
  border-radius: var(--cut-radius-lg);
}

.page-shell h1 {
  max-width: 12ch;
  margin: 0;
  font-family: "Noe Display", Georgia, serif;
  font-size: clamp(3rem, 6vw, 5.4rem);
  font-weight: 500;
  line-height: 0.98;
}

.page-shell p {
  max-width: 58ch;
  color: var(--text-soft);
}

.page-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-top: 24px;
}

.page-card {
  padding: 28px;
  border-radius: var(--cut-radius-md);
}

.page-card p,
.page-card li {
  color: var(--text-soft);
}

.page-card ul {
  margin: 0;
  padding-left: 20px;
}

.faq-accordion {
  display: grid;
  gap: 14px;
  margin-top: 24px;
}

.faq-item {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(26, 43, 58, 0.1);
  border-radius: var(--cut-radius-md);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.98));
  box-shadow:
    0 1px 2px rgba(26, 43, 58, 0.04),
    0 18px 42px rgba(26, 43, 58, 0.07);
  transition:
    border-color var(--transition),
    box-shadow var(--transition);
}

.faq-item::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--green), rgba(0, 147, 82, 0));
  opacity: 0;
  transition: opacity var(--transition);
}

.faq-item:not(.is-closing)[open]::before {
  opacity: 1;
}

.faq-item:not(.is-closing)[open] {
  border-color: rgba(0, 147, 82, 0.18);
  box-shadow:
    0 1px 2px rgba(26, 43, 58, 0.04),
    0 22px 50px rgba(26, 43, 58, 0.09);
}

.faq-item summary {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  gap: 18px;
  align-items: center;
  min-height: 84px;
  padding: 24px 28px;
  cursor: pointer;
  color: var(--navy);
  font-family: "Nord", "Helvetica Neue", sans-serif;
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.24;
  text-transform: uppercase;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(26, 43, 58, 0.12);
  border-radius: 999px;
  background: #fff;
  color: var(--green);
  font-family: "Nord", "Helvetica Neue", sans-serif;
  font-size: 1.25rem;
  line-height: 1;
  transition:
    transform var(--transition),
    background var(--transition),
    color var(--transition);
}

.faq-item:not(.is-closing)[open] summary::after {
  content: "-";
  transform: rotate(180deg);
  background: var(--navy);
  color: #fff;
}

.faq-answer {
  height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transition:
    height 420ms cubic-bezier(0.2, 0.7, 0.2, 1),
    opacity 320ms ease,
    transform 420ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.faq-item:not(.is-closing)[open] .faq-answer {
  height: auto;
  opacity: 1;
  transform: translateY(0);
}

.faq-item.is-closing .faq-answer {
  opacity: 0;
  transform: translateY(-8px);
}

.faq-answer p {
  max-width: 78ch;
  margin: 0;
  padding: 0 28px 28px;
  color: var(--text-soft);
}

.page-cta-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(24px, 5vw, 64px);
  align-items: end;
  margin-top: 28px;
  padding: clamp(30px, 5vw, 54px);
  overflow: hidden;
  border-radius: var(--cut-radius-lg);
  background:
    var(--grid-dark),
    radial-gradient(circle at 92% 8%, rgba(0, 147, 82, 0.12), transparent 34%),
    radial-gradient(circle at 0% 100%, rgba(0, 147, 82, 0.08), transparent 30%),
    linear-gradient(180deg, #1A2B3A 0%, #142433 100%);
  background-size: 120px 120px, auto, auto, auto;
  box-shadow: 0 26px 70px rgba(26, 43, 58, 0.22);
  color: #fff;
}

.page-cta-panel > * {
  position: relative;
  z-index: 1;
}

.page-cta-panel .eyebrow {
  color: rgba(255, 255, 255, 0.78);
}

.page-cta-panel h2 {
  max-width: 14ch;
  margin: 0;
  color: #fff;
  font-family: "Noe Display", Georgia, serif;
  font-size: clamp(2.2rem, 4.7vw, 4.4rem);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.03em;
}

.page-cta-panel p:not(.eyebrow) {
  max-width: 48ch;
  margin: 18px 0 0;
  color: rgba(255, 255, 255, 0.76);
}

.page-cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 14px;
}

@media (max-width: 1080px) {
  .header-inner,
  .hero-grid,
  .intake-grid,
  .band-card,
  .split-grid,
  .cta-card,
  .page-cta-panel,
  .footer-grid,
  .page-grid {
    grid-template-columns: 1fr;
  }

  .hero-mark {
    justify-self: center;
    width: clamp(281px, 52.8vw, 374px);
    margin-top: 8px;
  }

  .story-grid {
    grid-template-columns: 1fr;
  }

  .process-intro-copy {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .process-intro-copy > div:first-child {
    min-height: 0;
  }

  .process-side {
    justify-content: flex-start;
    justify-items: start;
  }

  .process-photo-chip {
    width: min(100%, 430px);
    height: auto;
    min-height: 210px;
    aspect-ratio: 16 / 9;
  }

  .process-actions {
    margin-top: 8px;
  }

  .process-intro-copy p {
    max-width: 58ch;
  }

  .intake-copy {
    padding-top: 0;
  }

  .intake-collage {
    width: min(100%, 560px);
    margin-top: 42px;
  }

  .intake-collage-grid {
    grid-template-rows: repeat(2, clamp(148px, 22vw, 210px));
  }

  .process-steps-wrap::before {
    left: calc(25% + 44px);
    right: calc(25% + 44px);
  }

  .story-collage-grid {
    grid-template-rows:
      repeat(2, clamp(88px, 12.8vw, 120px))
      repeat(2, clamp(110px, 16vw, 150px));
    gap: 12px;
  }

  .site-nav {
    justify-content: start;
  }

  .hero h1 {
    max-width: 14ch;
  }

  .hero-headline-strong {
    white-space: normal;
  }

  .steps-grid,
  .faq-preview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .steps-grid {
    gap: 24px;
  }

  .process-steps-wrap::before {
    display: none;
  }

  .split-panel-focus {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    min-height: 0;
  }

  .split-panel-focus h2,
  .split-panel-focus .feature-list,
  .split-photo-chip,
  .split-panel-actions {
    grid-column: 1;
    grid-row: auto;
  }

  .split-panel-focus .feature-list {
    margin-top: 8px;
  }

  .split-photo-chip {
    width: min(100%, 430px);
    min-height: 230px;
    aspect-ratio: 16 / 10;
  }

  .section-heading {
    display: block;
  }
}

@media (max-width: 780px) {
  :root {
    --container: min(calc(100vw - 40px), 1180px);
    --section-space: 48px;
  }

  .site-header {
    position: sticky;
  }

  .header-inner {
    grid-template-columns: 1fr auto;
    gap: 16px;
    min-height: 76px;
    padding: 12px 0;
  }

  .brand {
    width: min(170px, 48vw);
  }

  .menu-toggle {
    display: inline-block;
  }

  .site-nav,
  .header-actions {
    display: none;
  }

  .site-nav.is-open,
  .header-actions.is-open {
    display: grid;
    grid-column: 1 / -1;
    gap: 12px;
    padding: 16px;
    border: 1px solid rgba(26, 43, 58, 0.1);
    background: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
  }

  .is-safari .site-nav.is-open,
  .is-safari .header-actions.is-open {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(255, 255, 255, 0.96);
  }

  .site-nav.is-open {
    margin-top: 2px;
    border-bottom: 0;
    border-radius: var(--cut-radius-md) var(--cut-radius-md) 0 0;
    padding-bottom: 8px;
  }

  .header-actions.is-open {
    margin-top: -16px;
    border-top: 0;
    border-radius: 0 0 var(--cut-radius-md) var(--cut-radius-md);
    padding-top: 8px;
  }

  .site-nav.is-open a,
  .header-actions.is-open a {
    width: 100%;
  }

  .site-nav.is-open a {
    min-height: 42px;
    display: flex;
    align-items: center;
  }

  .header-actions.is-open .header-phone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    border: 1px solid rgba(26, 43, 58, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.62);
    color: var(--navy);
  }

  .header-actions.is-open .header-phone {
    display: none;
  }

  .hero {
    padding: clamp(32px, 6svh, 56px) 0;
  }

  .hero-grid {
    justify-items: center;
  }

  .hero-panel,
  .process-shell,
  .split-panel,
  .faq-card,
  .page-shell,
  .page-card,
  .cta-card {
    padding: 24px;
  }

  main picture,
  .story-collage,
  .process-side,
  .intake-collage,
  .split-photo-chip,
  .band-mark {
    display: none;
  }

  .faq-item summary {
    grid-template-columns: minmax(0, 1fr) 38px;
    min-height: 74px;
    padding: 22px 24px;
  }

  .faq-item summary::after {
    width: 38px;
    height: 38px;
  }

  .faq-answer {
    padding: 0;
  }

  .faq-answer p {
    padding: 0 24px 24px;
  }

  .page-cta-actions {
    justify-content: flex-start;
  }

  .hero h1,
  .page-shell h1 {
    font-size: clamp(2.55rem, 11.4vw, 3.55rem);
  }

  .hero h1 {
    max-width: 100%;
    font-size: clamp(3.2rem, 16.2vw, 4.8rem);
    line-height: 0.91;
    text-align: center;
  }

  .hero-headline-strong {
    font-size: 0.82em;
    white-space: nowrap;
  }

  .hero-headline-italic {
    font-size: 1.12em;
  }

  .section h2,
  .split-panel h2,
  .cta-card h2,
  .page-shell h1,
  .page-cta-panel h2 {
    font-size: clamp(2.45rem, 11.6vw, 4.15rem);
    line-height: 0.95;
  }

  .hero-panel h2 {
    font-size: clamp(2.05rem, 9.5vw, 3.1rem);
  }

  .step-card h3,
  .faq-card h3,
  .page-card h3 {
    font-size: clamp(1.28rem, 6vw, 1.72rem);
  }

  .story-copy h2 {
    max-width: 10.5ch;
  }

  .hero-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 100%;
    text-align: center;
  }

  .hero-copy > .eyebrow {
    display: none;
  }

  .hero-lede {
    max-width: 32ch;
    margin-inline: auto;
  }

  .hero-actions,
  .story-actions,
  .process-actions,
  .cta-actions,
  .page-cta-actions,
  .section-actions {
    width: 100%;
  }

  .hero-actions .button,
  .story-actions .button,
  .process-actions .button,
  .cta-actions .button,
  .page-cta-actions .button,
  .section-actions .button,
  .intake-actions .button,
  .page-card .button {
    width: 100%;
  }

  .story-actions,
  .process-actions {
    margin-top: 24px;
  }

  .step-card-inner {
    padding: 16px;
  }

  .hero-actions {
    justify-content: center;
  }

  .hero-actions .button {
    width: auto;
    min-width: min(240px, 72vw);
    padding-inline: 34px;
  }

  .hero-actions .button-secondary {
    display: none;
  }

  .hero-mark {
    display: none;
  }

  .band-card {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 30px clamp(26px, 8vw, 34px);
  }

  .band-mark {
    display: none;
  }

  .band-copy .eyebrow {
    gap: 9px;
    width: 100%;
    max-width: 100%;
    font-size: clamp(0.68rem, 3.2vw, 0.82rem);
    letter-spacing: 0.16em;
    white-space: nowrap;
  }

  .band-copy .eyebrow::before {
    width: 12px;
    height: 16px;
    flex-basis: 12px;
  }

  .process-intro {
    padding-bottom: 22px;
  }

  .process-side {
    display: none;
  }

  .process-kicker {
    font-size: 0.8rem;
  }

  .values-marquee-item {
    padding: 9px 16px;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
  }

  .intake-collage {
    width: 100%;
    margin-top: 30px;
  }

  .intake-collage-grid {
    grid-template-rows: repeat(2, clamp(124px, 34vw, 176px));
    gap: 10px;
  }

  .form-field-grid {
    grid-template-columns: 1fr;
  }

  .hero-rotator-line {
    order: -1;
    display: inline-grid;
    grid-template-columns: max-content minmax(var(--roller-word-width, 0px), max-content);
    align-items: center;
    column-gap: clamp(8px, 2.4vw, 12px);
    font-size: clamp(0.78rem, 3.6vw, 1rem);
    line-height: 1.15;
    margin: 0 0 clamp(16px, calc(8vw - 10px), 28px) clamp(8px, 2.5vw, 14px);
    white-space: nowrap;
  }

  .hero-rotator-line .word-rotator {
    flex: 0 0 auto;
    min-width: var(--roller-word-width, auto);
    text-align: left;
  }

  .hero-copy h1 {
    order: 0;
  }

  .hero-lede {
    order: 1;
  }

  .hero-actions {
    order: 2;
  }

  .story-grid {
    grid-template-columns: 1fr;
  }

  .story-collage {
    padding-block: 8px;
  }

  .story-collage-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: 124px;
    gap: 12px;
  }

  .story-collage-tile,
  .story-collage-tile-large,
  .story-collage-tile-portrait,
  .story-collage-tile-docs,
  .story-collage-tile-money,
  .story-collage-tile-life,
  .story-collage-tile-transit {
    grid-column: auto;
    grid-row: auto;
  }

  .story-collage-tile-large,
  .story-collage-tile-docs {
    grid-row: span 2;
  }

  .intake-collage-tile-trees {
    grid-column: 1;
    grid-row: 1;
  }

  .intake-collage-tile-girls {
    grid-column: 1;
    grid-row: 2;
  }

  .intake-collage-tile-man {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .steps-grid,
  .faq-preview {
    grid-template-columns: 1fr;
  }

  .process-steps-wrap {
    margin-top: 24px;
    padding-top: 0;
  }

  .process-steps-wrap::after {
    display: block;
  }

  .footer-meta {
    flex-direction: column;
  }
}

@media (max-width: 360px) {
  :root {
    --container: min(calc(100vw - 32px), 1180px);
  }
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  [data-animate] {
    opacity: 1;
    transform: none;
  }

  .hero-backdrop::after {
    animation: none;
  }

  .js .hero-mark .hcg-bar {
    opacity: 1;
    transform: none;
    filter: none;
  }

  .js .hero-mark .hcg-chev-slot {
    opacity: 1;
    filter: var(--hero-chev-shadow);
  }

  .js .hero-mark .hcg-liquid-dark,
  .js .hero-mark .hcg-liquid-light {
    opacity: 1;
  }

  .js .hero-mark .hcg-grain-layer {
    opacity: 0.45;
  }

  .js .hero-mark .hcg-shine-group {
    opacity: 0.7;
  }

  .js .hero-mark.is-revealed,
  .js .hero-mark.is-revealed .hcg-bar-1,
  .js .hero-mark.is-revealed .hcg-bar-2,
  .js .hero-mark.is-revealed .hcg-bar-3,
  .js .hero-mark.is-revealed .hero-chevron,
  .js .hero-mark.is-revealed .hcg-liquid-dark,
  .js .hero-mark.is-revealed .hcg-liquid-light,
  .js .hero-mark.is-revealed .hcg-grain-layer,
  .js .hero-mark.is-revealed .hcg-shine-group,
  .js .hero-mark.is-revealed .hcg-chev-slot {
    animation: none;
  }

  .values-marquee-track {
    animation: none;
    width: auto;
  }

  .values-marquee-group[data-marquee-clone] {
    display: none;
  }

  .trust-points li::before,
  .trust-points li::after {
    animation: none;
  }
}