/* Atlas Pro — pixel-faithful rebuild from Figma (1920×7461 canvas)
   Sizing rules:
   - widths/horizontal       → vw   ( val / 1920 * 100 )
   - heights/vertical        → vh   ( val / 1080 * 100 )
   - typography              → px
*/

/* ====== Xenon Nue — display/title typeface ====== */
@font-face {
  font-family: 'Xenon Nue';
  src: url('/fonts/XenonNue-Regular.woff2') format('woff2'),
       url('/fonts/XenonNue-Regular.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Xenon Nue';
  src: url('/fonts/XenonNue-Medium.woff2') format('woff2'),
       url('/fonts/XenonNue-Medium.woff') format('woff');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Xenon Nue';
  src: url('/fonts/XenonNue-SemiBold.woff2') format('woff2'),
       url('/fonts/XenonNue-SemiBold.woff') format('woff');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Xenon Nue';
  src: url('/fonts/XenonNue-Bold.woff2') format('woff2'),
       url('/fonts/XenonNue-Bold.woff') format('woff');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Xenon Nue';
  src: url('/fonts/XenonNue-ExtraBold.woff2') format('woff2'),
       url('/fonts/XenonNue-ExtraBold.woff') format('woff');
  font-weight: 800; font-style: normal; font-display: swap;
}

:root {
  --navy:       #002168;   /* brand dark navy */
  --blue:       #147FD4;   /* brand blue */
  --blue-deep:  #1A46A3;   /* brand deep blue */
  --bg:         #e8eef2;
  --bg-soft:    rgba(232,238,242,0.79);
  --bg-card:    rgba(232,238,242,0.97);
  --bg-card-2:  #ebf0f3;
  --green:      #5a8a5c;
  --gray:       #d9d9d9;
  --white:      #ffffff;
  --font-display: 'Poppins', 'Anton', 'grtsk-vf', 'Plus Jakarta Sans', 'Xenon Nue', 'Instrument Sans', 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, Segoe UI, sans-serif;

  /* one design-pixel in the chosen unit */
  --vw1: calc(100vw / 1920);
  --vh1: calc(100vh / 1080);

  /* one shared content margin everything aligns to (left + right edge) */
  --mx: calc(190 * var(--vw1));          /* left/right gutter */
  --cw: calc(1540 * var(--vw1));         /* content column width (1920 - 2*190) */

  /* ===== consistent spacing rhythm (flow-layout refactor) ===== */
  --title-gap: calc(28 * var(--vh1));    /* heading → its text/content */
  --block-gap: calc(64 * var(--vh1));    /* between sub-blocks inside a section */
  --sec-gap:   calc(150 * var(--vh1));   /* between top-level sections (final pass) */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/* overflow-x: clip (not hidden) prevents horizontal scroll WITHOUT creating a
   scroll container — so position:sticky (cost cards) keeps working. */
html, body { background: var(--bg-soft); overflow-x: clip; }

/* Lenis smooth-scroll required styles */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }

body {
  color: var(--navy);
  font-family: var(--font-body);
  font-size: calc(17 * var(--vw1));
  line-height: 1.55;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
p { margin: 0 0 calc(14 * var(--vh1)); }
p:last-child { margin-bottom: 0; }
h1, h2, h3, h4, h5 { margin: 0; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; }

/* ====== CANVAS ======
   one giant relative container; everything inside is positioned
   in Figma coords scaled to vw/vh. */
.canvas {
  position: relative;
  width: 100vw;
  /* flow layout: sections stack in normal document order */
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* white behind the hero, fading into the gray page bg before the next section */
.canvas.home2 {
  background: linear-gradient(to bottom,
    #f5f8f9 0,
    #f5f8f9 calc(900 * var(--vh1)),
    rgba(245, 248, 249, 0) calc(1160 * var(--vh1))) no-repeat;
}

/* helpers */
.abs    { position: absolute; }
.center { left: 50%; transform: translateX(-50%); }
.disp   { font-family: var(--font-display); font-weight: 800; line-height: 1.194; }
.body   { font-family: var(--font-body);    font-weight: 400; line-height: 1.435; }
.bold   { font-weight: 700; }
.tac    { text-align: center; }
.white  { color: var(--white); }
.blue   { color: var(--blue); }
.green  { color: var(--green); }
.navy   { color: var(--navy); }

/* ====== AMBIENT BACKGROUND VIDEO ====== */
.hero-bg-video {
  position: absolute;
  left: 0; top: 0;
  width: 100vw;
  height: calc(1000 * var(--vh1));
  object-fit: cover;
  opacity: .18;
  z-index: 0;
  pointer-events: none;
  filter: hue-rotate(-10deg) saturate(.7) blur(1px);
}

.phone-icon { width: 16px; height: 16px; filter: brightness(0) invert(1); }

/* ====== DECORATIVE WAVY LINES (line.svg × 5) ====== */
.hero-line {
  position: absolute;
  left: calc(-60 * var(--vw1));
  width: calc(2040 * var(--vw1));
  height: auto;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}
.hero-line.l1 { top: calc(40 * var(--vh1));  opacity: .9; }
.hero-line.l2 { top: calc(225 * var(--vh1)); opacity: .8; }
.hero-line.l3 { top: calc(420 * var(--vh1)); opacity: .7; }
.hero-line.l4 { top: calc(610 * var(--vh1)); opacity: .6; }
.hero-line.l5 { top: calc(820 * var(--vh1)); opacity: .5; }

/* ====== HERO ANIMATED CURVES (line2 + line3 stroke draw) ====== */
.hero-curve {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}
/* line2: navy curve sweeping across very top of hero */
.hero-curve.c-top {
  left: calc(-40 * var(--vw1));
  top: calc(40 * var(--vh1));
  width: calc(2000 * var(--vw1));
  height: calc(280 * var(--vh1));
}
/* line3: huge gradient swoop sitting below the headline */
.hero-curve.c-big {
  left: 0;
  top: calc(180 * var(--vh1));
  width: 100vw;
  height: calc(100vw * 1377 / 1920);
}
.hero-curve path {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
}
.hero-curve.c-top path { stroke: var(--navy); }
.hero-curve.c-big  path { stroke: url(#bigGradient); }

/* ====== WHITE ROUNDED SECTION + SCROLL-DRAW WAVES (line 4 / line 5) ====== */
/* white background with a curved ("round angle") top edge; sits behind the
   Services / Who-we-work-with content. Tune top/height to taste. */
.white-section {
  position: absolute;
  left: 0;
  top: calc(3983 * var(--vh1));
  width: 100vw;
  height: calc(1785 * var(--vh1));
  z-index: 0;
  pointer-events: none;
}
/* continues the white fill below the curved cap (so extending coverage does
   not stretch/deepen the curved top edge) — ends at the navy stats band */
.white-fill {
  position: absolute;
  left: 0;
  top: calc(5552 * var(--vh1));
  width: 100vw;
  height: calc(689 * var(--vh1));
  background: #fff;
  z-index: 0;
  pointer-events: none;
}
/* full-width decorative waves whose stroke draws on as they scroll into view */
.deco-curve {
  display: none;   /* removed: read as random/messy after the re-layout */
  position: absolute;
  left: 0;
  width: 100vw;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}
.deco-curve path { fill: none; stroke-width: 2; stroke-linecap: round; }
/* line 5 overlays the white section's top edge exactly (same viewBox/box) */
.deco-curve.l5 { top: calc(3983 * var(--vh1)); height: calc(1785 * var(--vh1)); }
/* non-scaling stroke keeps it a crisp 2px despite the SVG's vertical stretch */
.deco-curve.l5 path { stroke-width: 2.5px; }
/* line 4 — height in vh (not vw) so its trough tracks the vh-based content
   on every viewport (keeps the gap to Services responsive, not just at 16:9).
   z-index keeps it painted ON TOP of line 5 where they overlap. */
.deco-curve.l4 { top: calc(3388 * var(--vh1)); height: calc(850 * var(--vh1)); z-index: 1; }
.deco-curve.l4 path { stroke-width: 2.5px; }

/* ensure headings + buttons sit above curves */
.hero-h1, .hero-sub, .cta-group { z-index: 4; }
.h-section, .txt-section, .eyebrow { z-index: 3; }

.diag-lines {
  position: absolute;
  left: calc(-170 * var(--vw1));
  width: calc(2170 * var(--vw1));
  height: calc(2 * var(--vh1));
  background: rgba(255,255,255,.18);
  transform: rotate(-1.85deg);
  pointer-events: none;
  z-index: 1;
}

/* ====== HEADER / NAV — fixed frosted bar (was floating) ====== */
.nav {
  position: absolute;                            /* not sticky for now — scrolls with the page */
  top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  z-index: 100;
  padding: calc(12 * var(--vh1)) var(--mx);       /* tight, less space under header */
  height: auto;
  background: none;                              /* no background */
  border: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.nav-logo { width: calc(170 * var(--vw1)); height: auto; }
.nav-links {
  position: absolute;                           /* centered regardless of logo/button width */
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);             /* vertically centered → aligns with the button text */
  display: flex;
  gap: calc(46 * var(--vw1));
  margin: 0;
}
/* nav CTA reuses the green card button, minus its in-card spacing.
   Higher specificity so it beats .cta-card-btn (which is defined later). */
.nav .nav-btn { margin-top: 0; align-self: center; }

/* ====== SCROLL-TO-TOP BUTTON ====== */
.scroll-top {
  position: fixed;
  right: 28px;
  bottom: 28px;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--blue-deep);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .3s ease, transform .3s ease, background .2s ease;
  box-shadow: 0 8px 24px rgba(0, 33, 104, 0.25);
  z-index: 200;
}
.scroll-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.scroll-top:hover { background: var(--navy); }
.scroll-top svg { width: 22px; height: 22px; }
.nav-links a {
  font-size: calc(17 * var(--vw1));
  color: var(--navy);
  display: inline-block;
}
.nav-links a:hover .cta-btn-text > span { transform: translateY(-100%); }

/* ====== HERO ====== */
/* Hero title sits between the two navy slash decorations.
   Slash-left right edge ≈ 459, slash-right left edge ≈ 1471 → 934 wide gap.
   Hero-stack must fit inside that to feel balanced. */
.hero-stack {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  top: calc(400 * var(--vh1));
  width: calc(934 * var(--vw1));
  max-width: min(86vw, calc(934 * var(--vw1)));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(28 * var(--vh1));
  z-index: 4;
}
.hero-h1 {
  width: 100%;
  font-family: var(--font-display);  font-weight: 800;
  font-size: 55px;
  color: var(--navy);
  text-align: center;
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin: 0;
}
.hero-h1 .accent { color: var(--blue); display: inline; margin-right: 0.16em; }

.hero-sub {
  width: min(calc(690 * var(--vw1)), 70vw);
  text-align: center;
  font-size: calc(17 * var(--vw1));
  line-height: 1.55;
  color: var(--navy);
  margin: 0;
}

/* wrapper: invisible on desktop so children keep their absolute canvas layout */
.hero { display: contents; }

/* ====== HERO BACKDROP — soft brand glow + faint dot grid (gently animated) ====== */
.hero-glow {
  position: absolute;
  left: 50%; top: calc(330 * var(--vh1));
  transform: translateX(-50%);
  width: calc(1180 * var(--vw1));
  height: calc(640 * var(--vh1));
  background: radial-gradient(50% 50% at 50% 50%,
    rgba(74,155,216,.20), rgba(90,138,92,.09) 46%, transparent 72%);
  filter: blur(24px);
  z-index: 0;
  pointer-events: none;
}
.hero-dots {
  position: absolute;
  left: 0; top: 0;
  width: 100vw;
  height: calc(1200 * var(--vh1));
  background-image: radial-gradient(rgba(27,58,92,.14) 1.3px, transparent 1.4px);
  background-size: calc(30 * var(--vw1)) calc(30 * var(--vw1));
  -webkit-mask-image: radial-gradient(125% 88% at 50% 36%, #000 32%, transparent 78%);
  mask-image: radial-gradient(125% 88% at 50% 36%, #000 32%, transparent 78%);
  z-index: 0;
  pointer-events: none;
}
/* subtle ambient motion — only when motion is allowed */
.motion-ready .hero-glow { animation: glow-drift 17s ease-in-out infinite alternate; }
.motion-ready .hero-dots { animation: dot-drift 24s ease-in-out infinite alternate; }
@keyframes glow-drift {
  0%   { transform: translateX(-50%) translate(-3%, -2%) scale(1); }
  100% { transform: translateX(-50%) translate(3%,  3%) scale(1.07); }
}
@keyframes dot-drift {
  0%   { background-position: 0 0; }
  100% { background-position: calc(18 * var(--vw1)) calc(12 * var(--vh1)); }
}

/* ====== HOMEPAGE HERO — full-bleed dark banner w/ particle-sphere bg ======
   Scoped to .home-hero so it does NOT affect the /home2 clone. */
.home-hero {
  position: absolute;
  left: var(--mx);
  top: calc(100 * var(--vh1));           /* sits higher, closer to the header */
  width: calc(1540 * var(--vw1));        /* contained card, not full-bleed (matches --cw) */
  height: calc(940 * var(--vh1));
  background-color: #1f5ed0;
  background-image: url('/img/hero-dome.png');
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
  border-radius: calc(40 * var(--vw1));
  z-index: 1;
  overflow: hidden;
}
/* hero background video — fills the rounded banner, same crop as the image */
.home-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  z-index: 0;
}
.home-hero-inner {
  position: absolute;
  left: 50%;
  top: calc(170 * var(--vh1));
  transform: translateX(-50%);
  width: calc(1180 * var(--vw1));
  max-width: 92%;
  text-align: center;
  z-index: 2;
}
.home-hero-h1 {
  font-family: var(--font-display);  font-weight: 800;
  /* scale with the proportionally-sized hero box so line breaks stay identical
     across desktop/laptop widths (min 36px so it never gets too small) */
  font-size: max(36px, calc(55 * var(--vw1)));
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0;
}
.home-hero-sub {
  margin: calc(26 * var(--vh1)) auto 0;
  max-width: calc(560 * var(--vw1));
  font-size: max(15px, calc(17 * var(--vw1)));
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.86);
}

/* CTA button inside the dome hero — centered on the section, below the text.
   Higher specificity so position:relative beats the base .cta-group{position:absolute}. */
.home-hero-inner .home-hero-cta {
  position: relative;
  margin-top: calc(40 * var(--vh1));
}
.home-hero-cta.cta-group:active { transform: scale(.985); }

/* ====== HERO FRAME — rounded-rect track; service bubbles ride its border ====== */
.hero-frame {
  position: absolute;
  left: calc(120 * var(--vw1));
  top: calc(208 * var(--vh1));
  width: calc(1680 * var(--vw1));
  height: calc(742 * var(--vh1));     /* shorter → whole frame stays in the fold */
  border: calc(10 * var(--vw1)) solid rgba(27, 58, 92, 0.55);
  border-radius: calc(46 * var(--vw1));
  z-index: 1;
  pointer-events: none;
}
.track-chip {
  position: absolute;
  transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: calc(9 * var(--vw1));
  padding: calc(11 * var(--vh1)) calc(18 * var(--vw1));
  background: #fff;
  border: 1px solid rgba(27,58,92,.10);
  border-radius: 999px;
  font-size: calc(15 * var(--vw1));
  font-weight: 600;
  color: var(--navy);
  box-shadow: 0 8px 24px rgba(27,58,92,.12);
  white-space: nowrap;
  will-change: left, top;
}
.track-chip img { width: calc(16 * var(--vw1)); height: calc(16 * var(--vw1));
  /* recolour the dark source icon to brand blue */
  filter: brightness(0) saturate(100%) invert(55%) sepia(46%) saturate(563%) hue-rotate(166deg) brightness(91%) contrast(88%); }
/* pre-JS default; JS places them around the border (even under reduced motion) */
.track-chip { left: 50%; top: 0; }

/* ====== PRIMARY BUTTON — ONE oval pill with the icon inside it ====== */
.cta-group {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: calc(2 * var(--vw1));
  background: var(--navy);                     /* keep original color */
  border-radius: calc(12 * var(--vw1));       /* header style: rounded corners, not an oval */
  padding-right: 0;
  cursor: pointer;
  z-index: 4;
}
.cta-group.hero { left: 50%; transform: translateX(-50%); top: calc(660 * var(--vh1)); }
.cta-group.s2   { left: 50%; transform: translateX(-50%); top: calc(4412 * var(--vh1)); }
.cta-group.s3   { left: 50%; transform: translateX(-50%); top: calc(8287 * var(--vh1)); }

/* nav variant — sits inline inside the header, no absolute positioning */
.cta-group.nav-cta-group { position: static; }

/* Text rolls up: the visible label translates up out of view while a
   duplicate translates in from below — both move together at the same time. */
.cta-btn-text {
  display: inline-block;
  position: relative;
  height: 1.15em;
  line-height: 1.15;
  overflow: hidden;
  vertical-align: middle;
}
.cta-btn-text > span {
  display: block;
  transition: transform .45s cubic-bezier(.65, 0, .35, 1);
}
.cta-btn-text > span + span {
  position: absolute;
  left: 0; top: 100%; width: 100%;
}
.cta-group:hover .cta-btn-text > span {
  transform: translateY(-100%);
}

.cta-group:active { transform: scale(.985); transition: transform .09s; }
.cta-group.hero:active,
.cta-group.s2:active,
.cta-group.s3:active { transform: translateX(-50%) scale(.985); }

/* Text part — transparent, lives inside the oval */
.cta-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: calc(53 * var(--vw1));
  padding: 0 calc(4 * var(--vw1)) 0 calc(28 * var(--vw1));
  background: transparent;
  color: #fff;
  border: 0;
  font-size: calc(17 * var(--vw1));
  font-family: var(--font-body);
  cursor: pointer;
  white-space: nowrap;
  z-index: 1;
}

.cta-connector { display: none; }

/* Icon — sits INSIDE the oval (no separate shape) */
.cta-icon-box {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: calc(38 * var(--vw1));
  height: calc(38 * var(--vw1));
  background: transparent;
  cursor: pointer;
  border: 0;
  z-index: 1;
}
.cta-icon-box img,
.cta-icon-box svg {
  width: calc(22 * var(--vw1));
  height: calc(24 * var(--vw1));
  position: relative;
  z-index: 1;
}
/* icon is WHITE by default → flips to light blue on group hover */
.cta-icon-box img {
  filter: brightness(0) invert(1);
  transition: filter .35s cubic-bezier(.65, 0, .35, 1);
}
.cta-group:hover .cta-icon-box img {
  /* recolour from white to light blue ~#6EC1E4 */
  filter: brightness(0) saturate(100%)
          invert(72%) sepia(34%) saturate(627%) hue-rotate(166deg) brightness(94%) contrast(90%);
}
.cta-icon-box.arrow svg { stroke: #fff; fill: none; stroke-width: 2.4; }

/* ====== SECTION HEADLINES — centered & symmetric within the column ====== */
.h-section {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: calc(1120 * var(--vw1));
  font-family: var(--font-display);  font-weight: 800;
  font-size: 55px;
  color: var(--blue);
  text-align: center;
  line-height: 1.08;
  letter-spacing: -0.003em;
}
.h-section span { margin: 0 2px; }
.h-section .dark { color: var(--navy); }

.txt-section {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: calc(760 * var(--vw1));
  text-align: center; font-size: calc(17 * var(--vw1)); color: var(--navy);
  line-height: 1.65;
}

/* "Enter Atlas Pro." — larger statement closing the cost section */
.home2 .enter-atlas {
  font-family: var(--font-display);  font-weight: 800;
  font-size: calc(27 * var(--vw1));
  line-height: 1.45;
  max-width: calc(1540 * var(--vw1));
  color: var(--navy);
}
.home2 .enter-atlas strong { font-weight: 400; color: var(--blue); }

/* animated separator line that grows left→right when scrolled into view */
.enter-divider {
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--blue) 0%, var(--blue-deep) 100%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.2s cubic-bezier(.22, 1, .36, 1);
}
.enter-divider.is-in { transform: scaleX(1); }

/* ====== FLOW SECTION (refactor) — children flow with consistent spacing ======
   A .sec is anchored where its content used to start, but everything inside
   flows in normal order so the title→text/block gaps are uniform. */
.sec {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: var(--cw);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  z-index: 3;
}
.sec > * { margin: 0; }
/* default rhythm: heading → following element */
.sec > * + * { margin-top: var(--title-gap); }
/* neutralise the absolute placement on flowing children */
.sec .h-section,
.sec .txt-section,
.sec .plate-heading,
.sec .eyebrow,
.sec .plate-row {
  position: static;
  transform: none;
  left: auto; right: auto; top: auto;
  width: auto;
  max-width: 100%;
}
.sec .txt-section { margin-left: auto; margin-right: auto; }
/* a new sub-block (e.g. the "plate") opens with the larger gap */
.sec .plate-heading { margin-top: var(--block-gap); }
.sec .plate-row { width: 100%; margin-top: var(--block-gap); gap: calc(24 * var(--vw1)); align-items: stretch; }

/* "what we take off your plate" → cards (Image #14 style) */
/* white cards, navy outline, heading top, large icon bottom-left */
.plate-card {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);                          /* same as section bg */
  border: 1.5px solid var(--navy);
  border-radius: calc(16 * var(--vw1));
  padding: calc(28 * var(--vw1));
  text-align: left;
  min-height: calc(420 * var(--vh1));            /* taller rectangle */
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.plate-card:hover {
  background: #fff;                              /* turn white on hover */
  transform: translateY(calc(-8 * var(--vh1)));
  box-shadow: 0 calc(18 * var(--vh1)) calc(40 * var(--vh1)) rgba(0, 33, 104, 0.12);
}
.plate-card-title {
  font-family: var(--font-display);  font-weight: 800;
  font-size: calc(23 * var(--vw1));             /* a drop bigger */
  line-height: 1.2;
  color: var(--navy);
  margin: 0;
}
.plate-card-art {
  margin-top: auto;                              /* push icon to the bottom */
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;                   /* bottom-left */
}
.plate-card-art img {
  width: calc(142 * var(--vw1));                 /* larger icon */
  height: auto;
}

/* ====== SECTION 3 — BCBA quote on a navy block ====== */
.quote-sec {
  position: absolute;
  left: 0;
  width: 100vw;                                  /* full-bleed section */
  background: var(--navy);
  border-radius: 0;
  padding: calc(150 * var(--vh1)) var(--mx);     /* lots of top/bottom padding */
  text-align: left;
  z-index: 2;
}
.quote-text {
  font-family: var(--font-display);  font-weight: 800;
  font-size: calc(48 * var(--vw1));              /* larger */
  line-height: 1.25;
  color: #fff;                                   /* one colour */
  margin: 0;
  max-width: calc(720 * var(--vw1));             /* shorter lines */
}
.quote-mark { color: var(--blue); }              /* quote marks lighter */
.quote-cite {
  display: block;
  margin-top: calc(28 * var(--vh1));
  font-size: calc(15 * var(--vw1));
  color: rgba(255, 255, 255, 0.7);
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.22em;
}

/* ----- quote entrance: words mask up one after another ----- */
.q-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.14em;        /* room so descenders aren't clipped */
  margin-bottom: -0.14em;
}
.q-word > span {
  display: inline-block;
  transform: translateY(115%);
  transition: transform .8s cubic-bezier(.22, 1, .36, 1);
}
.quote-sec.q-in .q-word > span { transform: translateY(0); }
/* attribution fades up after the words */
.motion-ready .quote-cite { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s ease; transition-delay: .6s; }
.quote-sec.q-in .quote-cite { opacity: 1; transform: translateY(0); }

/* ----- quote variant: framed rounded-rect with process tags on the border ----- */
.quote-circle-sec {
  background: var(--navy);
  padding: calc(150 * var(--vh1)) 0;
  display: flex;
  justify-content: center;
}
.qc-stage {
  position: relative;
  width: calc(1400 * var(--vw1));        /* wide frame fills the band */
  height: calc(560 * var(--vh1));
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: calc(48 * var(--vw1));
  display: flex;
  align-items: center;
  justify-content: center;
}
.qc-center {
  text-align: center;
  max-width: calc(620 * var(--vw1));
}
.qc-quote {
  font-family: var(--font-display);  font-weight: 800;
  font-size: calc(40 * var(--vw1));
  line-height: 1.22;
  color: #fff;
  margin: 0;
}
.qc-cite {
  display: block;
  margin-top: calc(30 * var(--vh1));
  font-size: calc(13 * var(--vw1));
  color: rgba(255, 255, 255, 0.6);
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.22em;
}
/* filled white pill tags straddle the frame's border */
.qc-tag {
  position: absolute;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: calc(9 * var(--vw1));
  white-space: nowrap;
  font-size: calc(14 * var(--vw1));
  font-weight: 600;
  letter-spacing: 0.005em;
  padding: calc(13 * var(--vh1)) calc(24 * var(--vw1));
  border-radius: 999px;
  background: #fff;
  color: var(--navy);
  box-shadow: 0 calc(10 * var(--vh1)) calc(26 * var(--vh1)) rgba(0, 12, 48, 0.22);
  transition: box-shadow .35s ease;
  /* each pill drifts gently in place; per-pill timing set below desyncs them */
  animation: qcFloat 4.5s ease-in-out infinite;
}
/* keep the -50% Y centering while drifting left↔right */
@keyframes qcFloat {
  0%, 100% { transform: translate(calc(-50% - 7px), -50%); }
  50%      { transform: translate(calc(-50% + 7px), -50%); }
}
/* green variant — scattered among the white pills */
.qc-tag.green {
  background: #90CF74;
  color: var(--navy);
}
/* hover: settle the float and lift the shadow */
.qc-tag:hover {
  animation-play-state: paused;
  box-shadow: 0 calc(16 * var(--vh1)) calc(34 * var(--vh1)) rgba(0, 12, 48, 0.3);
}
/* scattered, unevenly-spaced — 3 ride the top line, 3 ride the bottom line.
   distinct durations + negative delays → each floats independently */
.qc-t1 { left: 13%; top: 0%;   animation-duration: 3.8s; animation-delay: -0.2s; }
.qc-t2 { left: 42%; top: 0%;   animation-duration: 4.5s; animation-delay: -1.4s; }
.qc-t3 { left: 74%; top: 0%;   animation-duration: 4.1s; animation-delay: -0.8s; }
.qc-t4 { left: 24%; top: 100%; animation-duration: 4.9s; animation-delay: -2.1s; }
.qc-t5 { left: 57%; top: 100%; animation-duration: 4.0s; animation-delay: -1.0s; }
.qc-t6 { left: 86%; top: 100%; animation-duration: 4.7s; animation-delay: -0.5s; }
@media (prefers-reduced-motion: reduce) {
  .qc-tag { animation: none; transform: translate(-50%, -50%); }
}

@media (max-width: 760px) {
  .quote-circle-sec { padding: 14vh 0; }
  .qc-stage {
    width: 88vw; height: auto;
    flex-direction: column;
    align-items: center;
    gap: 5vw;
    padding: 8vw 6vw;
    border-radius: 22px;
  }
  .qc-center { max-width: 100%; }
  .qc-quote { font-size: 24px; }
  .qc-cite { font-size: 11px; margin-top: 16px; }
  /* tags flow as chips under the quote instead of riding the border */
  .qc-tag {
    position: static; transform: none; animation: none;
    font-size: 11px; padding: 8px 14px; letter-spacing: 0.02em;
    white-space: normal; text-align: center;
  }
  .qc-tag:hover { transform: none; }
  .qc-tag svg { width: 14px; height: 14px; }
}

.eyebrow {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: calc(10 * var(--vw1));
  font-weight: 700; font-size: calc(25 * var(--vw1));
}
.eyebrow .dot {
  width: 14px; height: 14px; border-radius: 50%; background: currentColor;
  display: inline-block;
}
.eyebrow .slash {
  width: calc(20 * var(--vw1));
  height: calc(28 * var(--vw1));
  display: block;
  transform-origin: left center;
  will-change: clip-path, transform;
}
/* same diagonal wipe-in as the "What we take off your plate" slash */
.eyebrow .slash.is-in {
  animation: slash-reveal 1.05s cubic-bezier(.76, 0, .24, 1) both;
}

/* ====== "WHAT WE TAKE OFF YOUR PLATE" — centered heading + 4 equal columns ====== */
.plate-heading {
  position: absolute; left: 50%; transform: translateX(-50%);
  font-family: var(--font-display); font-weight: 800;
  font-size: calc(28 * var(--vw1)); color: var(--navy);
  text-align: center; margin: 0;
}
.plate-row {
  position: absolute;
  left: var(--mx);
  width: var(--cw);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: calc(44 * var(--vw1));
  z-index: 3;
}
.plate-item {
  flex: 1 1 0;
  max-width: calc(300 * var(--vw1));
  display: flex; flex-direction: column;
  align-items: center;
  gap: calc(20 * var(--vh1));
  text-align: center;
}
.plate-item .dot {
  width: calc(64 * var(--vw1));
  height: calc(64 * var(--vw1));
  background: var(--navy);
  border-radius: 50%;
  display: grid; place-items: center;
  flex-shrink: 0;
  box-shadow: 0 8px 20px rgba(27,58,92,.16);
}
.plate-item .dot img { width: 46%; height: auto; filter: brightness(0) invert(1); }
.plate-item p {
  font-size: calc(17 * var(--vw1));
  line-height: 1.5;
  color: var(--navy);
  margin: 0;
  text-align: center;
  max-width: calc(230 * var(--vw1));
}

/* === Slash is ALWAYS visible (steady state).
   If JS adds `.is-in`, a keyframe animation plays *from* an invisible
   start back to the visible end-state — sleek open-from-left effect. */
.plate-slash {
  transform-origin: left center;
  will-change: clip-path, transform;
}
.plate-slash.is-in {
  animation: slash-reveal 1.05s cubic-bezier(.76, 0, .24, 1) both;
}
/* Reveal wipes a parallelogram cut along the slash's own ~54° angle.
   Top edge advances right while the bottom edge trails behind at -90%,
   so the wipe travels along the slash's diagonal — not horizontally. */
@keyframes slash-reveal {
  0% {
    clip-path: polygon(0% 0%, 0% 0%, -90% 100%, -90% 100%);
    opacity: 0;
  }
  100% {
    clip-path: polygon(0% 0%, 190% 0%, 100% 100%, -90% 100%);
    opacity: 1;
  }
}

/* ====== DARK COST CARDS — sticky stack that slides over on scroll ====== */
/* Each card sticks near the top with a slightly larger offset than the one
   before it, so as you scroll the next card slides up and covers it, leaving
   a small peek of the card beneath. Left half = video, right half = text. */
.cost-stack {
  position: relative;
  width: 100%;
  display: block;
}
.stack-card {
  position: sticky;
  display: flex;
  width: 100%;
  height: calc(620 * var(--vh1));            /* shorter cards */
  margin-bottom: calc(60 * var(--vh1));
  top: calc(100 * var(--vh1));               /* all pin at the SAME spot → top card fully covers the one beneath */
  background: var(--navy);
  border-radius: 24px;
  color: #fff;
  overflow: hidden;
  box-shadow: 0 calc(20 * var(--vh1)) calc(50 * var(--vh1)) rgba(0, 12, 48, 0.28);
}
.stack-card:last-child { margin-bottom: 0; }
/* alternating: 2nd & 4th cards use a lighter brand blue */
.stack-card:nth-child(2n) { background: var(--blue-deep); }

/* video sits in the left half, with space on all sides, in an arch shape */
.sc-photo {
  position: relative;
  flex: none;
  width: 42%;                                /* narrower video → less wide arch */
  height: 100%;
  padding: calc(46 * var(--vh1)) calc(46 * var(--vw1));
  display: flex;
}
.sc-photo video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* arch only on the top-right; top-left corner stays regular */
  border-radius: calc(26 * var(--vw1)) 88% calc(26 * var(--vw1)) calc(26 * var(--vw1))
               / calc(26 * var(--vw1)) 80% calc(26 * var(--vw1)) calc(26 * var(--vw1));
}
/* title + text on the right half, left-aligned, vertically centered */
.sc-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* extra right padding → shorter paragraph lines */
  padding: calc(56 * var(--vh1)) calc(150 * var(--vw1)) calc(56 * var(--vh1)) calc(70 * var(--vw1));
  text-align: left;
}
.sc-h {
  font-family: var(--font-display);          /* Nagel */
  font-weight: 800;
  font-size: calc(40 * var(--vw1));
  line-height: 1.12;
  margin: 0 0 calc(24 * var(--vh1));
}
.sc-p {
  font-size: calc(18 * var(--vw1));
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
  margin: 0;
}

/* ====== SERVICES GRID ====== */
/* services intro paragraph: 3 lines (Figma) so the button sits clear below it */
.svc-para { width: calc(740 * var(--vw1)); line-height: 1.5; }

/* ====== SERVICES — single-column editorial list (lindmore-style) ====== */
.svc-pin {
  position: absolute;
  left: var(--mx);
  width: var(--cw);
  z-index: 3;
}
.svc-track {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-top: 1px solid rgba(0, 33, 104, 0.16);
}
.svc-card {
  display: flex;
  align-items: center;
  gap: calc(40 * var(--vw1));
  width: 100%;
  padding: calc(42 * var(--vh1)) calc(20 * var(--vw1));
  border-bottom: 1px solid rgba(0, 33, 104, 0.16);
  background: none;
  border-radius: 0;
  min-height: 0;
  text-align: left;
}
.svc-num {
  flex: 0 0 calc(82 * var(--vw1));
  display: flex; align-items: center; gap: calc(10 * var(--vw1));
  font-family: var(--font-display);  font-size: calc(24 * var(--vw1)); font-weight: 800; color: var(--green);
}
.svc-num .slash {
  width: calc(18 * var(--vw1)); height: calc(26 * var(--vw1)); display: block;
  transform-origin: left center; will-change: clip-path, transform;
}
.svc-num .slash.is-in { animation: slash-reveal 1.05s cubic-bezier(.76, 0, .24, 1) both; }
.svc-card:hover .svc-num .slash { animation: slash-reveal 1.05s cubic-bezier(.76, 0, .24, 1) both; }
.svc-card h4 {
  flex: 0 0 calc(440 * var(--vw1));
  font-family: var(--font-display);  font-size: calc(32 * var(--vw1)); font-weight: 800; color: var(--navy);
  line-height: 1.12;
}
.svc-card p {
  flex: 1;
  font-size: calc(17 * var(--vw1)); color: var(--navy); line-height: 1.55;
}

/* ====== SERVICES — feature card grid (3 columns, soft lift on hover) ====== */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(30 * var(--vh1)) calc(28 * var(--vw1));
  width: 100%;
  text-align: left;
}
.feature-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: calc(20 * var(--vw1));
  padding: calc(40 * var(--vh1)) calc(36 * var(--vw1));
  box-shadow: 0 calc(10 * var(--vh1)) calc(30 * var(--vh1)) rgba(0, 33, 104, 0.06);
  transition: transform .4s cubic-bezier(.22, 1, .36, 1), box-shadow .4s cubic-bezier(.22, 1, .36, 1);
}
.feature-card:hover {
  transform: translateY(calc(-12 * var(--vh1)));
  box-shadow: 0 calc(28 * var(--vh1)) calc(56 * var(--vh1)) rgba(0, 33, 104, 0.14);
}
/* lone last card (7th of 3-col grid) sits centered on its row */
.feature-card:last-child { grid-column: 2; }
.feature-tags {
  display: flex;
  flex-wrap: wrap;
  gap: calc(8 * var(--vw1));
  margin-bottom: calc(28 * var(--vh1));
}
.feature-tag {
  font-family: var(--font-body);
  font-size: calc(13 * var(--vw1));
  font-weight: 500;
  line-height: 1;
  padding: calc(8 * var(--vh1)) calc(15 * var(--vw1));
  border-radius: 999px;
  background: #d9ebfb;                /* blue (default) */
  color: #15619f;
  white-space: nowrap;
}
.feature-tag.navy  { background: #dde3f2; color: #002168; }
.feature-tag.green { background: #e0efd9; color: #41703f; }
.feature-title {
  font-family: var(--font-display);  font-weight: 800;
  font-size: calc(24 * var(--vw1));
  color: var(--navy);
  line-height: 1.16;
  margin-bottom: calc(16 * var(--vh1));
}
.feature-desc {
  font-size: calc(16 * var(--vw1));
  color: rgba(0, 33, 104, 0.62);
  line-height: 1.55;
  margin: 0;
}

/* ====== STEPS — sticky title (left) + scrolling process list (right) ====== */
.steps-sec { background: #fff; padding: calc(90 * var(--vh1)) 0 calc(110 * var(--vh1)); }
.steps-list { width: 100%; }
.step-row {
  display: flex;
  align-items: flex-start;
  gap: calc(28 * var(--vw1));
  padding: calc(64 * var(--vh1)) 0;
  border-top: 1px solid rgba(0, 33, 104, 0.16);
}
.step-row:last-child { border-bottom: 1px solid rgba(0, 33, 104, 0.16); }
.step-num {
  flex: 0 0 calc(48 * var(--vw1));
  font-family: var(--font-body);
  font-size: calc(14 * var(--vw1));
  font-weight: 300;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
  padding-top: calc(8 * var(--vh1));
}
.step-row-body h4 {
  font-family: var(--font-display);  font-weight: 800;
  font-size: calc(26 * var(--vw1));
  color: var(--navy);
  line-height: 1.15;
  margin-bottom: calc(12 * var(--vh1));
}
.step-row-body p {
  font-size: calc(16 * var(--vw1));
  color: rgba(0, 33, 104, 0.62);
  line-height: 1.55;
  margin: 0;
  max-width: calc(430 * var(--vw1));   /* ~10 words per line */
}
.step-phone {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  transition: color .2s ease;
}
.step-phone:hover { color: var(--blue-deep); }

/* ====== TESTIMONIALS — outlined cards in a slider (3 at a time) ====== */
.tm-slider { position: relative; width: 100%; overflow: hidden; }
.tm-track {
  display: flex;
  align-items: stretch;
  gap: calc(28 * var(--vw1));
  transition: transform .55s cubic-bezier(.22, 1, .36, 1);
}
.tm-card {
  flex: 0 0 calc((100% - 56 * var(--vw1)) / 3);   /* 3 visible (2 gaps of 28) */
  display: flex;
  align-items: flex-start;
  gap: calc(22 * var(--vw1));
  border: 1.5px solid rgba(0, 33, 104, 0.5);
  border-radius: calc(28 * var(--vw1));
  padding: calc(44 * var(--vh1)) calc(34 * var(--vw1));
  text-align: left;
}
.tm-ico {
  flex: 0 0 auto;
  font-family: var(--font-display);  font-weight: 800;
  font-size: calc(70 * var(--vw1));
  line-height: .8;
  color: var(--blue);
}
.tm-headline {
  font-family: var(--font-display);  font-weight: 800;
  font-size: calc(21 * var(--vw1));
  color: var(--blue);
  line-height: 1.15;
  margin-bottom: calc(14 * var(--vh1));
}
.tm-text {
  font-size: calc(15 * var(--vw1));
  color: var(--navy);
  line-height: 1.6;
  margin: 0;
}
.tm-author {
  display: block;
  margin-top: calc(16 * var(--vh1));
  font-size: calc(13 * var(--vw1));
  color: rgba(0, 33, 104, 0.6);
  font-style: normal;
}
.tm-track { cursor: grab; user-select: none; touch-action: pan-y; }
.tm-track.is-dragging { cursor: grabbing; transition: none; }
.tm-track.is-dragging .tm-card { pointer-events: none; }
/* dots-only pager under the slider */
.tm-pager {
  display: flex;
  justify-content: center;
  gap: calc(12 * var(--vw1));
  margin-top: calc(40 * var(--vh1));
}
.tm-pager-dot {
  width: calc(10 * var(--vw1));
  height: calc(10 * var(--vw1));
  border: 0;
  border-radius: 50%;
  background: rgba(0, 33, 104, 0.22);
  cursor: pointer;
  padding: 0;
  transition: background .25s ease, width .25s ease;
}
.tm-pager-dot.is-active {
  background: var(--blue);
  width: calc(26 * var(--vw1));
  border-radius: 999px;
}

/* small, all-caps, light labels (Services + Testimonials) */
.home2 .tm-eyebrow,
.home2 .svc-eyebrow {
  font-size: 14px;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

/* ====== WHO WE WORK WITH ====== */
.who-left {
  position: absolute;
  left: var(--mx);
  top: calc(5563 * var(--vh1));
  width: calc(560 * var(--vw1));
  height: calc(521 * var(--vh1));
  display: flex; flex-direction: column; justify-content: center;
}
.who-left h2 {
  font-family: var(--font-display);  font-weight: 800;
  font-size: 55px; line-height: 1.08;          /* match all section titles */
  letter-spacing: -0.003em;
  color: var(--blue);
  margin-bottom: calc(28 * var(--vh1));
}
.who-left h2 .dark { color: var(--navy); }
.who-left p { font-size: calc(17 * var(--vw1)); max-width: calc(498 * var(--vw1)); }

.who-card {
  position: absolute;
  left: calc(760 * var(--vw1));
  top: calc(5563 * var(--vh1));
  width: calc(970 * var(--vw1));
  height: calc(521 * var(--vh1));
  border: 2px solid var(--blue);
  border-radius: 20px;
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(2px);
  padding: calc(48 * var(--vh1)) calc(48 * var(--vw1));
}
.who-row {
  display: flex;
  align-items: flex-start;
  gap: calc(30 * var(--vw1));
  height: auto;
  padding: calc(20 * var(--vh1)) 0;
}
.who-ico { flex: 0 0 calc(64 * var(--vw1)); width: calc(64 * var(--vw1)); }
.who-ico img { width: 100%; height: auto; }
.who-row h3 { font-family: var(--font-display); font-weight: 800; font-size: calc(30 * var(--vw1)); color: var(--navy); margin-bottom: calc(14 * var(--vh1)); line-height: 1.2; }
.who-row p  { font-size: calc(17 * var(--vw1)); line-height: 1.6; }
.who-divider { height: 2px; background: var(--blue); opacity: .8; margin: calc(40 * var(--vh1)) 0; }

/* ====== STATS — sleek contained navy panel (animated counters) ====== */
.stats-panel {
  width: 100%;
  display: flex;
  align-items: stretch;
  position: relative;
  overflow: hidden;
  background: radial-gradient(135% 135% at 0% 0%, #123c88 0%, #002168 54%);
  border-radius: calc(28 * var(--vw1));
  padding: calc(70 * var(--vh1)) calc(30 * var(--vw1));
}
/* soft green glow accent in the corner */
.stats-panel::after {
  content: '';
  position: absolute;
  right: calc(-120 * var(--vw1)); bottom: calc(-160 * var(--vh1));
  width: calc(460 * var(--vw1)); height: calc(460 * var(--vw1));
  background: radial-gradient(circle, rgba(144, 207, 116, 0.16), transparent 70%);
  pointer-events: none;
}
.stat {
  flex: 1 1 0;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  text-align: center;
  padding: 0 calc(14 * var(--vw1));
  position: relative;
}
.stat + .stat::before {
  content: '';
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: calc(108 * var(--vh1));
  background: rgba(255, 255, 255, 0.16);
}
.stat {
  position: relative; z-index: 1;
}
.stat .num {
  font-family: var(--font-display);  font-weight: 800;
  font-size: calc(66 * var(--vw1)); line-height: 1;
  margin-bottom: calc(16 * var(--vh1));
  /* vibrant green gradient numerals */
  background: linear-gradient(160deg, #b7f29a 0%, #7bc457 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #90CF74;
  font-variant-numeric: tabular-nums;
}
@keyframes statPop { 0% { transform: scale(1); } 45% { transform: scale(1.09); } 100% { transform: scale(1); } }
.stat .num.counted { animation: statPop .55s cubic-bezier(.22, 1, .36, 1); }
.stat .label {
  font-size: calc(14 * var(--vw1));
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.5;
  max-width: calc(300 * var(--vw1));   /* wide enough for 2 lines each */
}

/* ====== STEPS BLOCK ====== */
.steps-block {
  position: absolute;
  left: var(--mx);
  top: calc(6717 * var(--vh1));
  width: var(--cw);
  height: calc(807 * var(--vh1));
  background: var(--bg-card-2);
  border-radius: 20px;
  z-index: 2;
}
.step-card {
  position: absolute;
  width: calc(320 * var(--vw1));
  background: #fff;
  border: 2px solid var(--navy);
  border-radius: 20px;
  padding: calc(32 * var(--vh1)) calc(30 * var(--vw1));
  text-align: center;
  z-index: 3;
  display: flex; flex-direction: column; gap: calc(14 * var(--vh1));
}
.step-card .n {
  font-family: var(--font-display);  font-weight: 800;
  font-size: calc(55 * var(--vw1)); color: var(--navy); line-height: 1;
}
.step-card h4 { font-size: calc(17 * var(--vw1)); font-weight: 700; }
.step-card p { font-size: calc(17 * var(--vw1)); line-height: 1.55; }
.step-card { width: calc(420 * var(--vw1)); }
.step-card.s1 { left: calc(250 * var(--vw1));  top: calc(6939 * var(--vh1)); height: calc(276 * var(--vh1)); }
.step-card.s2 { left: calc(750 * var(--vw1));  top: calc(7018 * var(--vh1)); height: calc(331 * var(--vh1)); }
.step-card.s3 { left: calc(1250 * var(--vw1)); top: calc(7092 * var(--vh1)); height: calc(343 * var(--vh1)); }

.get-started-pill {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  top: calc(7479 * var(--vh1));
  width: calc(580 * var(--vw1));
  height: calc(63 * var(--vh1));
  background: var(--bg-card-2);
  border-radius: 999px;
  display: grid; place-items: center;
  font-size: calc(17 * var(--vw1)); font-weight: 700; color: var(--navy);
  z-index: 4;
}
.get-started-link {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  transition: color .2s ease;
}
.get-started-link:hover { color: var(--blue-deep); }
/* phone icon on the right side of the get-started pill */
.gs-phone {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(46 * var(--vw1));
  height: calc(46 * var(--vw1));
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  transition: transform .2s ease, filter .2s ease;
}
.gs-phone svg { width: calc(22 * var(--vw1)); height: calc(22 * var(--vw1)); }
.gs-phone:hover { filter: brightness(1.08); transform: scale(1.05); }

/* ====== TESTIMONIAL ====== */
.tm-quote {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: calc(7790 * var(--vh1));
  width: calc(900 * var(--vw1));
  text-align: center; font-size: calc(21 * var(--vw1)); line-height: 1.55;
}
.tm-name {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: calc(7948 * var(--vh1));
  font-size: calc(17 * var(--vw1)); font-weight: 700;
}
.tm-dots {
  position: absolute; left: var(--mx);
  top: calc(7972 * var(--vh1));
  display: flex; gap: 6px;
}
.tm-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--navy); opacity: .3; }
.tm-dot.on { opacity: 1; }

/* ====== FINAL CTA CARD — solid navy card + deep-blue accent panel ======
   Dimensions/colors sampled from the approved screenshot (1006-wide). */
.cta-card {
  position: absolute;
  left: var(--mx);                           /* site content margin */
  top: calc(8010 * var(--vh1));
  width: var(--cw);                          /* site content width */
  height: calc(636 * var(--vh1));            /* ≈ 2.42:1 card aspect */
  background: linear-gradient(125deg, #001a52 0%, #002168 52%, #15347e 100%); /* slight navy gradient */
  border-radius: calc(52 * var(--vw1));
  display: flex;
  align-items: stretch;
  overflow: hidden;
  z-index: 2;
}
.cta-card-photo {
  position: relative;
  flex: none;
  width: calc(740 * var(--vw1));
}
.cta-card-arch {
  position: absolute;
  left: calc(70 * var(--vw1));
  bottom: 0;
  width: calc(545 * var(--vw1));
  height: auto;
  z-index: 0;
}
.cta-card-person {
  position: absolute;
  left: calc(125 * var(--vw1));
  bottom: 0;
  width: calc(545 * var(--vw1));
  height: auto;
  z-index: 1;
}
.cta-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 calc(80 * var(--vw1)) 0 calc(40 * var(--vw1));
}
.cta-card-h {
  font-family: var(--font-display);  font-weight: 800;
  font-size: calc(52 * var(--vw1));
  line-height: 1.1;
  letter-spacing: -0.005em;
  color: #fff;
  margin: 0;
}
.cta-card-h-accent { color: #4aa6ec; }
.cta-card-p {
  margin: calc(40 * var(--vh1)) 0 0;
  font-size: calc(16 * var(--vw1));
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
}
.cta-card-btn {
  align-self: flex-start;
  margin-top: calc(38 * var(--vh1));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: calc(46 * var(--vw1));
  padding: 0 calc(26 * var(--vw1));
  background: #90CF74;
  color: var(--navy);
  border-radius: calc(12 * var(--vw1));       /* rounded corners, not a full oval */
  font-family: var(--font-body);
  font-size: calc(16 * var(--vw1));
  font-weight: 400;
  white-space: nowrap;
  cursor: pointer;
  transition: filter .2s ease, transform .09s ease;
}
.cta-card-btn:hover { filter: brightness(1.05); }
/* same vertical text-roll hover as the other buttons */
.cta-card-btn:hover .cta-btn-text > span { transform: translateY(-100%); }
.cta-card-btn:active { transform: scale(.98); }

/* ===== All buttons share the header button STYLE (shape/size), keep their own colors ===== */
.cta-group.hero,
.home-hero-cta { background: var(--blue-deep); }   /* hero stays blue */
.cta-group .cta-connector,
.cta-group .cta-icon-box { display: none; }         /* no attached icon */
.cta-group .cta-btn {
  height: calc(46 * var(--vw1));
  padding: 0 calc(26 * var(--vw1));
  color: #fff;
  font-weight: 400;
  font-size: calc(16 * var(--vw1));
}
.cta-group:hover { filter: brightness(1.08); }

/* ====== FOOTER ====== */
.site-footer {
  position: absolute;
  left: var(--mx);
  top: calc(8730 * var(--vh1));
  width: var(--cw);
  color: var(--navy);
}
.site-footer-top {
  display: flex;
  align-items: flex-start;                    /* tagline, socials, newsletter all start at one height */
  gap: calc(70 * var(--vw1));
}
.footer-brand img { width: calc(270 * var(--vw1)); height: auto; }
.footer-tagline {
  font-family: var(--font-display);  font-weight: 800;
  font-size: calc(26 * var(--vw1));
  line-height: 1.18;
  color: var(--navy);
  margin-top: calc(44 * var(--vh1));          /* dropped down a drop more */
}
.footer-social {
  margin-left: auto;                          /* shares free space with the newsletter → centered */
  margin-top: calc(26 * var(--vh1));          /* same start height as the tagline */
  display: flex;
  align-items: center;
  gap: calc(22 * var(--vw1));
}
.footer-social a { color: var(--blue-deep); transition: color .2s ease; }
.footer-social a:hover { color: var(--navy); }
.footer-social svg { width: calc(34 * var(--vw1)); height: calc(34 * var(--vw1)); display: block; }

/* newsletter signup (right side of the footer top row) */
.footer-news {
  margin-left: auto;
  margin-top: calc(26 * var(--vh1));          /* label starts at the same height */
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--vh1));
  width: calc(300 * var(--vw1));
}
.footer-news-label {
  font-size: calc(15 * var(--vw1));
  color: var(--navy);
  text-align: center;
}
.footer-news-field {
  position: relative;
  display: flex;
  align-items: center;
}
.footer-news-field input {
  width: 100%;
  height: calc(48 * var(--vw1));
  padding: 0 calc(54 * var(--vw1)) 0 calc(20 * var(--vw1));
  border: 0;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid rgba(0, 33, 104, 0.12);
  color: var(--navy);
  font-family: var(--font-body);
  font-size: calc(15 * var(--vw1));
  outline: none;
}
.footer-news-field input::placeholder { color: rgba(0, 33, 104, 0.5); }
.footer-news-field button {
  position: absolute;
  right: calc(5 * var(--vw1));
  width: calc(38 * var(--vw1));
  height: calc(38 * var(--vw1));
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--blue-deep);               /* darker blue, same as social icons */
  color: #fff;
  cursor: pointer;
  transition: background .2s ease;
}
.footer-news-field button:hover { background: var(--navy); }
/* paper-plane tilted to face up-right */
.footer-news-field button svg { width: calc(18 * var(--vw1)); height: calc(18 * var(--vw1)); transform: rotate(-45deg); }

.footer-divider {
  margin: calc(34 * var(--vh1)) 0;
  border: none;
  border-top: 1px solid rgba(27, 58, 92, 0.13);
}
.site-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  color: var(--navy);
}
.footer-nav { display: flex; gap: calc(44 * var(--vw1)); }
.footer-legal { display: inline-flex; align-items: center; gap: calc(10 * var(--vw1)); font-size: 15px; }
.footer-mascot { width: calc(22 * var(--vw1)); height: auto; display: inline-block; }
.footer-nav a, .footer-byline { color: var(--navy); transition: color .2s ease; }
.footer-nav a:hover, .footer-byline:hover { color: var(--blue); }

/* ===== all titles render at regular (400) weight, never bolder ===== */
.hero-h1, .home-hero-h1, .h-section, .cta-card-h, .sc-h,
.plate-heading, .who-left h2, .who-row h3,
.svc-card h4, .step-card h4, .eyebrow, .tm-name {
  font-weight: 400;
}

/* ====== CALM REVEAL (opacity-only; safe with translateX(-50%) centering) ====== */
/* hidden initial state applies ONLY when JS is present (.motion-ready) so the
   page renders fully without JS and under prefers-reduced-motion. */
.motion-ready .rise { opacity: 0; transition: opacity .7s cubic-bezier(.22,1,.36,1); }
.motion-ready .rise.rise-in { opacity: 1; }

/* ============================================================
   EXPERT POLISH — consistent card depth + micro-interactions
   ============================================================ */
.stack-card, .svc-card, .step-card {
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s cubic-bezier(.22,1,.36,1), border-color .35s;
}
.svc-card        { box-shadow: 0 4px 18px rgba(27,58,92,.06); }
.svc-card:hover  { transform: translateY(-6px); box-shadow: 0 16px 34px rgba(27,58,92,.13); }
.stack-card      { box-shadow: 0 10px 30px rgba(27,58,92,.16); }
.stack-card:hover{ transform: translateY(-5px); box-shadow: 0 20px 46px rgba(27,58,92,.26); }
.step-card       { box-shadow: 0 6px 20px rgba(27,58,92,.07); }
.step-card:hover { transform: translateY(-6px); box-shadow: 0 16px 34px rgba(27,58,92,.14); border-color: var(--blue); }
.who-card        { box-shadow: 0 10px 34px rgba(27,58,92,.07); }

/* "what we take off your plate" — slightly larger badges with soft depth */
.plate-item .dot {
  width: calc(56 * var(--vw1)); height: calc(56 * var(--vw1));
  box-shadow: 0 8px 20px rgba(27,58,92,.16);
}

/* testimonial — centered quote mark, drop the misleading carousel dots */
.tm-dots { display: none; }
.tm-quote::before {
  content: '\201C';
  position: absolute; left: 50%; transform: translateX(-50%); top: calc(-64 * var(--vh1));
  font-family: var(--font-display); font-weight: 800;
  font-size: calc(100 * var(--vw1)); line-height: 1;
  color: var(--blue); opacity: .22;
}

/* ====== DECORATIVE BACKGROUND WAVES ====== */
.bg-wave-a {
  position: absolute;
  left: calc(-200 * var(--vw1));
  top: calc(1100 * var(--vh1));
  width: calc(2400 * var(--vw1));
  height: calc(1800 * var(--vh1));
  z-index: 0;
  pointer-events: none;
  opacity: .9;
}
.bg-wave-a svg { width: 100%; height: 100%; }

.bg-wave-b {
  position: absolute;
  left: calc(-100 * var(--vw1));
  top: calc(2800 * var(--vh1));
  width: calc(2200 * var(--vw1));
  height: calc(1600 * var(--vh1));
  z-index: 0;
  pointer-events: none;
}

/* Stats banner extra deco curves above/below */
.stats-band-deco {
  position: absolute;
  left: 0; right: 0;
  height: calc(80 * var(--vh1));
  background: var(--navy);
  opacity: .12;
  pointer-events: none;
  z-index: 1;
}

/* ============================================================
   DESKTOP FLOW LAYOUT (refactor)
   Sections now stack in normal document order — no absolute
   "pixel-canvas" coordinates. Editing one section pushes the
   rest down automatically instead of overlapping them.
   Setting position:static on the old elements neutralises their
   legacy top/left/transform placement; this block then lays them
   out with flexbox + margins. Scoped to ≥761px so the mobile
   layout below is untouched.
   ============================================================ */
@media (min-width: 761px) {

  /* ---- top-level rhythm between sections ---- */
  .canvas.home2 > .home-hero { margin-top: calc(4 * var(--vh1)); }
  .canvas.home2 > .flow-sec,
  .canvas.home2 > .white-wrap { margin-top: var(--sec-gap); }
  /* who-sec already fades out with big bottom padding → tighten the gap to the counter */
  .canvas.home2 > .stats-sec { margin-top: calc(30 * var(--vh1)); }
  .canvas.home2 > .site-footer { margin-top: calc(60 * var(--vh1)); margin-bottom: calc(60 * var(--vh1)); }

  /* every flow section spans the viewport; .wrap re-centers the content column */
  .canvas.home2 > .flow-sec,
  .canvas.home2 > .white-wrap { width: 100%; }
  .flow-sec { position: relative; }

  /* centered content column — a flex column so children auto-center */
  .flow-sec > .wrap {
    width: var(--cw);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  /* spacing rhythm inside a section */
  .flow-sec > .wrap > * { margin: 0; }
  .flow-sec > .wrap > * + * { margin-top: var(--title-gap); }
  .flow-sec > .wrap > .plate-row,
  .flow-sec > .wrap > .cost-stack,
  .flow-sec > .wrap > .svc-pin,
  .flow-sec > .wrap > .steps-inner,
  .flow-sec > .wrap > .get-started-pill,
  .flow-sec > .wrap > .enter-atlas,
  .flow-sec > .wrap > .enter-divider,
  .flow-sec > .wrap > .cta-group { margin-top: var(--block-gap); }
  /* extra breathing room under the Enter-Atlas statement before the line */
  .home2 .flow-sec > .wrap > .enter-divider { margin-top: calc(120 * var(--vh1)); }

  /* ---- neutralise legacy absolute placement on flow children ---- */
  .home2 .h-section,
  .home2 .txt-section,
  .home2 .eyebrow,
  .home2 .tm-quote,
  .home2 .tm-name,
  .home2 .get-started-pill,
  .home2 .cta-group.s2,
  .home2 .cta-group.s3,
  .home2 .plate-row,
  .home2 .cost-stack,
  .home2 .svc-pin,
  .home2 .stats-row {
    position: relative;
    left: auto; right: auto; top: auto;
    transform: none;
    width: auto;
    max-width: 100%;
  }

  /* headings + body copy: centered, sensible measure */
  .home2 .h-section { width: 100%; max-width: calc(1120 * var(--vw1)); }
  .home2 .txt-section { width: 100%; max-width: calc(760 * var(--vw1)); }
  .home2 .svc-para   { max-width: calc(740 * var(--vw1)); }

  /* full-width children that must fill the column */
  .home2 .plate-row,
  .home2 .cost-stack,
  .home2 .svc-pin { width: 100%; }
  .home2 .svc-pin { height: auto; }
  .home2 .cost-stack { height: auto; }
  /* services list: drop the old card box hover/motion, add a clean row hover */
  .home2 .svc-card { box-shadow: none; transition: background .4s ease, padding .4s ease; }
  .home2 .svc-card:hover { transform: none; box-shadow: none; background: rgba(0, 33, 104, 0.04); padding-left: calc(36 * var(--vw1)); }
  .home2 .svc-card h4 { transition: color .3s ease; }
  .home2 .svc-card:hover h4 { color: var(--blue); }
  .home2 .svc-card:hover .svc-num,
  .home2 .svc-card:hover p { transform: none; }
  /* sticky stacking cards: scale is scroll-driven (JS), so no transform
     transition (would lag the scroll); shrink toward the pinned top edge */
  .home2 .stack-card { transition: box-shadow .35s cubic-bezier(.22,1,.36,1); transform-origin: center top; }
  .home2 .stack-card:hover { transform: none; }

  /* centred CTA button keeps only its press-scale */
  .home2 .cta-group.s2:active { transform: scale(.985); }

  /* ---- HERO ---- */
  .home2 .home-hero {
    position: relative;
    left: auto; top: auto;
    margin: calc(4 * var(--vh1)) auto 0;
    width: var(--cw);
  }

  /* ---- NAV (relative so its absolute-centred links still center) ---- */
  .home2 .nav { position: relative; width: 100%; }

  /* ---- SECTION 3 / 7: full-bleed colour bands ---- */
  .home2 .flow-sec.full-bleed { width: 100vw; }
  .home2 .quote-sec {
    position: relative;
    left: auto; top: auto;
    min-height: calc(900 * var(--vh1));           /* much taller */
    display: flex;
    align-items: center;                          /* center the quote vertically */
    padding: calc(80 * var(--vh1)) 0;
    overflow: hidden;
    /* navy on the left (for text contrast) fading into the abstract texture */
    background:
      linear-gradient(90deg,
        var(--navy) 0%, var(--navy) 34%,
        rgba(0, 33, 104, 0.72) 52%,
        rgba(0, 33, 104, 0.25) 100%),
      url('/img/quote-bg.jpg') center right / cover no-repeat,
      var(--navy);
  }
  /* collaboration photo on the right side of the band, aligned to the margin */
  .home2 .quote-photo {
    position: absolute;
    right: var(--mx);
    top: 50%;
    transform: translateY(-50%);
    width: calc(560 * var(--vw1));
    height: auto;
    z-index: 1;
    pointer-events: none;
  }
  .home2 .quote-sec > .wrap { position: relative; z-index: 2; }
  .home2 .quote-sec > .wrap { align-items: flex-start; text-align: left; }
  .home2 .quote-text { max-width: calc(720 * var(--vw1)); }

  /* ---- WHITE SECTION wrapping Services + Who ---- */
  .home2 .white-wrap {
    background: transparent;        /* page gray shows → white feature cards pop */
    border-radius: 0;
    padding: 0;
  }
  .home2 .white-wrap > .who-sec { margin-top: var(--sec-gap); }
  /* sits on the light-gray page bg → white feature/cards pop against it */
  .home2 .who-sec {
    background: transparent;
    padding: calc(100 * var(--vh1)) 0 calc(60 * var(--vh1));
  }

  /* ---- WHITE BAND: counter (Stats) → Steps. Eases out of the gray page
     with a gradient at the top, then stays solid white through the Steps
     section. Stats + Steps butt together (no gray gap) for one band. ---- */
  .home2 .stats-sec {
    /* gray stays solid down to the middle of the counter, then fades very
       softly to white, reaching pure white exactly at the section bottom so
       it meets the white steps section with no seam line */
    background: linear-gradient(180deg,
      rgba(255, 255, 255, 0) 0,
      rgba(255, 255, 255, 0) calc(190 * var(--vh1)),
      #ffffff 100%);
    padding: calc(60 * var(--vh1)) 0 calc(60 * var(--vh1));
  }
  .canvas.home2 > .steps-sec { margin-top: 0; }

  /* ---- SECTION 5: Services header — title left, copy + button right ---- */
  .home2 .svc-head {
    display: flex;
    width: 100%;
    gap: calc(80 * var(--vw1));
    align-items: flex-start;
    text-align: left;
  }
  .home2 .svc-head-left { flex: 1 1 0; }
  .home2 .svc-head-right {
    flex: 1 1 0;
    display: flex; flex-direction: column; align-items: flex-start;
    padding-top: calc(63 * var(--vh1));   /* center copy vertically against the title block */
  }
  .home2 .svc-head .h-section { text-align: left; width: auto; max-width: 100%; margin-top: calc(16 * var(--vh1)); }
  .home2 .svc-head .svc-para { text-align: left; width: auto; max-width: 100%; margin: 0 0 calc(30 * var(--vh1)); }
  .home2 .svc-head .cta-group.s2 { position: relative; left: auto; top: auto; transform: none; margin: 0; }

  /* ---- SECTION 6: Who we work with — title (top-aligned) left, box right ---- */
  .home2 .who-wrap {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: calc(80 * var(--vw1));         /* left column a drop closer to the box */
  }
  .home2 .who-left {
    position: relative; left: auto; top: auto;
    width: calc(540 * var(--vw1)); height: auto;
    flex: 0 0 calc(540 * var(--vw1));
    justify-content: flex-start;
    padding-top: calc(96 * var(--vh1));   /* lower title to align with first box heading */
  }
  .home2 .who-card {
    position: relative; left: auto; top: auto;
    width: auto; height: auto;
    flex: 1 1 auto;
    padding: calc(76 * var(--vh1)) calc(100 * var(--vw1));   /* generous padding all around */
  }


  /* ---- SECTION 8: Steps — sticky title left, scrolling process list right ---- */
  .home2 .steps-wrap {
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;            /* center the title + list group */
    text-align: left;
    gap: calc(90 * var(--vw1));
  }
  .home2 .steps-wrap > * + * { margin-top: 0; }
  .home2 .steps-head {
    flex: 0 0 calc(440 * var(--vw1));
    position: sticky;
    top: calc(150 * var(--vh1));
  }
  .home2 .steps-sec .h-section { text-align: left; width: auto; max-width: 100%; }
  .home2 .steps-list { flex: 0 1 calc(720 * var(--vw1)); }   /* shorter rows (~half width) */
  .home2 .steps-head .get-started-pill {
    width: calc(398 * var(--vw1));   /* end where "With Atlas Pro," ends */
    max-width: 100%;
    height: auto;
    padding: calc(22 * var(--vh1)) calc(28 * var(--vw1));
    margin-top: calc(32 * var(--vh1));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(24 * var(--vw1));
    text-align: left;
    line-height: 1.4;
    background: rgba(20, 127, 212, 0.12);   /* opacity blue box */
    color: var(--navy);
    border-radius: calc(16 * var(--vw1));
    font-weight: 500;
  }

  /* ---- SECTION 9: Testimonial ---- */
  .home2 .tm-quote { position: relative; width: 100%; max-width: calc(900 * var(--vw1)); margin-top: calc(80 * var(--vh1)); }
  .home2 .tm-name  { margin-top: var(--title-gap); }

  /* ---- SECTION 10: Final CTA card ---- */
  .home2 .cta-card {
    position: relative;
    left: auto; top: auto;
    margin: 0 auto;
    width: var(--cw);
  }

  /* ---- FOOTER ---- */
  .home2 .site-footer {
    position: relative;
    left: auto; top: auto;
    width: var(--cw);
    margin-left: auto; margin-right: auto;
  }
}

/* ====== MOBILE ≤760px — authored vertical layout (not a scaled desktop) ====== */
@media (max-width: 760px) {
  :root { --vw1: calc(100vw / 760); --vh1: calc(100vh / 1080); }

  /* abandon the absolute desktop canvas → clean single-column flow */
  .canvas { height: auto; display: flex; flex-direction: column; gap: 6vh;
    padding: 14vh 6vw 9vh; }
  .canvas > * { position: static !important; transform: none !important;
    inset: auto !important; left: auto !important; right: auto !important; top: auto !important;
    width: 100% !important; max-width: 100% !important; }

  /* hide ALL desktop-only decoration + empty background boxes (pixel-placed) */
  .hero-line, .hero-curve, .hero-curl,
  .white-section, .white-fill, .deco-curve,
  .stats, .steps-block, .final-cta { display: none !important; }

  /* fixed header clears content via canvas top padding already set */
  .nav { height: 9vh; }

  /* ===== MOBILE HERO — the frame + traveling pills, adapted for phones ===== */
  .hero { position: relative !important; display: block !important;
    width: 100% !important; left: auto !important; top: auto !important;
    margin: 12vh 0 4vh; padding: 13vw 9vw; min-height: 0; }
  .hero-dots { display: block !important; position: absolute !important;
    inset: 0 !important; width: 100% !important; height: 100% !important;
    background-size: 24px 24px;
    -webkit-mask-image: radial-gradient(130% 80% at 50% 42%, #000 38%, transparent 86%);
    mask-image: radial-gradient(130% 80% at 50% 42%, #000 38%, transparent 86%); }
  .hero-glow { display: block !important; position: absolute !important;
    left: 0 !important; top: 14% !important; width: 100% !important; height: 58% !important;
    transform: none !important; animation: none !important; }
  .hero-frame { display: block !important; position: absolute !important;
    inset: 2vw 4vw !important; width: auto !important; height: auto !important;
    border-width: 4px !important; border-radius: 26px !important; }
  /* pills ride the border beautifully on desktop, but on a phone the frame is
     too tight against the copy — keep the framed hero, drop the traveling pills */
  .track-chip { display: none !important; }
  /* hero content rides above the frame, in normal flow inside .hero */
  .hero-stack { position: static !important; transform: none !important;
    left: auto !important; top: auto !important; width: 100% !important;
    z-index: 2; padding-top: 7vh; gap: 2.5vh; align-items: flex-start; }
  .cta-group.hero { position: static !important; transform: none !important;
    left: auto !important; top: auto !important; align-self: flex-start;
    z-index: 2; margin-top: 4vh; }

  /* opacity reveals stay; never let a reveal trap content hidden on mobile */
  .motion-ready .rise { opacity: 1 !important; }

  /* NAV — fixed bar: logo + click-to-call */
  .nav { position: fixed !important; inset: 0 0 auto 0 !important; height: 9vh;
    padding: 0 6vw; background: var(--bg-soft); backdrop-filter: blur(8px);
    z-index: 50; justify-content: space-between; }
  .nav-logo { width: 40vw; }
  .nav-links { display: none; }
  .nav-cta-group { transform: scale(.95); }

  /* typography */
  body { font-size: 16px; }
  .hero-h1 { font-size: 30px; line-height: 1.22; text-align: left; }
  .hero-sub { font-size: 16px; text-align: left; }

  /* dome hero → centered card on phones */
  .home-hero { height: 70vh !important; min-height: 460px; margin-top: 10vh !important;
    border-radius: 18px; background-position: center bottom; }
  .home-hero-inner { position: absolute !important; left: 6vw !important; right: 6vw;
    top: 12% !important; transform: none !important; max-width: 100% !important;
    text-align: center; }
  .home-hero-h1 { font-size: 28px; line-height: 1.2; }
  .home-hero-sub { font-size: 15px; max-width: 100%; margin: 3vh auto 0; }
  .h-section, .who-left h2, .final-cta-h { font-size: 25px !important; text-align: left; }
  .h-section span, .who-left h2 span, .final-cta-h span { margin: 0; }
  .txt-section, .svc-card p, .who-row p, .step-card p, .stat .label,
  .sc-p, .tm-quote, .final-cta-p { font-size: 16px; }
  .eyebrow { font-size: 18px; justify-content: flex-start; }

  /* hero */
  .hero-stack { gap: 2.5vh; align-items: flex-start; }
  .cta-group { display: inline-flex !important; align-self: flex-start; }
  .cta-btn { height: 48px; padding: 0 22px; font-size: 16px; border-radius: 10px; }
  .cta-icon-box { width: 50px; height: 50px; border-radius: 10px; }
  .cta-icon-box img { width: 22px; height: 24px; }
  .cta-connector { width: 18px; height: 12px; margin: 0 -3px; }

  /* "what we take off your plate" → vertical list */
  .plate-row { flex-direction: column; align-items: flex-start; gap: 3vh; }
  .plate-row > .plate-item:first-of-type { margin-left: 0; }
  .plate-title-col { flex-basis: auto; }
  .plate-title { font-size: 20px; }
  .plate-item { flex-direction: row; align-items: center; gap: 4vw; }
  .plate-item .dot { width: 46px; height: 46px; }
  .plate-item p { min-height: 0; font-size: 16px; }
  .plate-item p br { display: none; }

  /* cost cards → simple stacked cards */
  .cost-stack { height: auto !important; gap: 4vh; }
  .stack-card { height: auto !important; padding: 6vw; display: flex; flex-direction: column; gap: 4vw; }
  .sc-photo { position: static !important; width: 100% !important; height: 22vh !important;
    clip-path: none !important; }
  .sc-h, .sc-p { position: static !important; width: 100% !important; }
  .sc-h { font-size: 20px; }

  /* services → single column */
  .feature-grid { grid-template-columns: 1fr !important; }
  .svc-pin { height: auto !important; overflow: visible !important; }
  .svc-track { flex-direction: column; flex-wrap: nowrap; gap: 3vh; align-items: stretch; }
  .svc-card { flex: 0 0 auto !important; width: 100% !important; min-height: auto; padding: 6vw; }
  .svc-num { font-size: 28px; }
  .svc-card h4 { font-size: 19px; }

  /* who we work with → stacked text */
  .who-card { height: auto !important; padding: 6vw; background: rgba(255,255,255,.6); }
  .who-row { display: block; height: auto !important; }
  .who-row h3 { font-size: 22px; }

  /* stats → stacked navy card */
  .stats-panel { flex-direction: column; gap: 5vh; padding: 9vw 6vw; }
  .stat + .stat::before { display: none; }
  .stat .num { font-size: 44px; }

  /* steps → stacked title then list */
  .steps-wrap { flex-direction: column; gap: 4vh; }
  .steps-head { position: static !important; }
  .steps-head .get-started-pill { width: 100% !important; }
  .step-card { height: auto !important; }
  .step-card .n { font-size: 42px; }
  .get-started-pill { height: auto !important; padding: 4.5vw 6vw; border-radius: 16px;
    text-align: center; }

  /* testimonial */
  .tm-quote, .tm-name { width: 100% !important; }
  .tm-dots { justify-content: center; }
  .tm-card { flex: 0 0 100% !important; }   /* one testimonial at a time on phones */

  /* final CTA card → stack photo above the text */
  .cta-card { flex-direction: column !important; height: auto !important;
    border-radius: 20px; padding-bottom: 7vw; }
  .cta-card-photo { width: 100% !important; height: 56vw; }
  .cta-card-panel { left: 50%; transform: translateX(-50%); width: 66%; height: 84%; }
  .cta-card-photo img { height: 100% !important; }
  .cta-card-body { padding: 6vw 7vw 0; }
  .cta-card-h { font-size: 26px; max-width: 100%; }
  .cta-card-p { font-size: 15px; max-width: 100%; }

  /* footer → stacked, left-aligned */
  .site-footer-top { flex-wrap: wrap; gap: 4vw; }
  .footer-brand img { width: 44vw; }
  .footer-tagline { font-size: 18px; }
  .footer-social { margin-left: 0; width: 100%; }
  .site-footer-bottom { flex-direction: column; align-items: flex-start;
    gap: 2.2vh; font-size: 15px; }
  .footer-nav { gap: 6vw; flex-wrap: wrap; }
}