/* 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
*/

:root {
  --navy:       #1b3a5c;
  --blue:       #4a9bd8;
  --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: '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);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg-soft); overflow-x: hidden; }

/* 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;
  /* design canvas is 7461 design-px tall → 7461 * (1vh/1080) */
  height: calc(9315 * var(--vh1));
}

/* helpers */
.abs    { position: absolute; }
.center { left: 50%; transform: translateX(-50%); }
.disp   { font-family: var(--font-display); font-weight: 400; 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); }

/* 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;
}

/* ====== NAV ====== */
.nav {
  position: absolute;
  inset: calc(72 * var(--vh1)) 0 auto 0;
  display: flex; align-items: center;
  z-index: 5;
  padding: 0 calc(285 * var(--vw1));
  height: calc(64 * var(--vh1));
}
.nav-logo { width: calc(160 * var(--vw1)); height: auto; }
.nav-links {
  display: flex;
  gap: calc(83 * var(--vw1));
  margin: 0 calc(120 * var(--vw1)) 0 calc(255 * var(--vw1));
}
.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: 600;
  font-size: calc(55 * var(--vw1));
  color: var(--navy);
  text-align: center;
  line-height: 1.14;
  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;
}

.hero-curl {
  position: absolute;
  top: calc(408 * var(--vh1));
  width: calc(173 * var(--vw1));
  height: calc(241 * var(--vh1));
  pointer-events: none;
}
.hero-curl.l { left: calc(286 * var(--vw1)); }
.hero-curl.r { right: calc(286 * var(--vw1)); transform: scaleX(-1); }

/* ====== PRIMARY BUTTON (pill + connector + icon block) ====== */
.cta-group {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 0;
  z-index: 4;
}
.cta-group.hero { left: 50%; transform: translateX(-50%); top: calc(770 * var(--vh1)); }
.cta-group.s2   { left: 50%; transform: translateX(-50%); top: calc(5353 * var(--vh1)); }
.cta-group.s3   { left: 50%; transform: translateX(-50%); top: calc(8814 * var(--vh1)); }

/* nav variant — sits inline inside the header, no absolute positioning */
.cta-group.nav-cta-group { position: static; display: inline-flex; align-items: center; }
.cta-group.nav-cta-group:active { transform: scale(.985); }

/* ====== BUTTON GROUP — vertical text-scroll (topazhrglobal style) ====== */
.cta-group { cursor: pointer; }

/* 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: translateX(-50%) scale(.985);
  transition: transform .09s;
}

/* Pill button — 168 × 53 with border-radius 12px (Figma exact) */
.cta-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: calc(53 * var(--vw1));
  padding: 0 calc(28 * var(--vw1));
  background: var(--navy);
  color: #fff;
  border: 0;
  border-radius: calc(12 * var(--vw1));
  font-size: calc(17 * var(--vw1));
  font-family: var(--font-body);
  cursor: pointer;
  white-space: nowrap;
  z-index: 1;
}

/* connector.svg piece — 20 × 13 sprite bridging pill and icon box */
.cta-connector {
  width: calc(20 * var(--vw1));
  height: calc(13 * var(--vw1));
  background: url('/img/connector.svg') center/contain no-repeat;
  margin: 0 calc(-3.5 * var(--vw1));
  pointer-events: none;
  flex: 0 0 auto;
  position: relative;
  z-index: 0;
  transition: filter .18s cubic-bezier(.4, 0, .2, 1);
}

/* Icon box — 58 × 59 with border-radius 12px (Figma exact) */
.cta-icon-box {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: calc(58 * var(--vw1));
  height: calc(59 * var(--vw1));
  background: var(--navy);
  border-radius: calc(12 * var(--vw1));
  cursor: pointer;
  border: 0;
  z-index: 1;
}
.cta-icon-box img,
.cta-icon-box svg {
  width: calc(27 * var(--vw1));
  height: calc(29 * var(--vw1));
  position: relative;
  z-index: 1;
}
/* icon is WHITE by default → flips to green 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 back to the brand green #5A8A5C */
  filter: brightness(0) saturate(100%)
          invert(50%) sepia(11%) saturate(831%) hue-rotate(73deg) brightness(91%) contrast(85%);
}
.cta-icon-box.arrow svg { stroke: #fff; fill: none; stroke-width: 2.4; }

/* ====== SECTION HEADLINES ====== */
.h-section {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: calc(900 * var(--vw1));
  font-family: var(--font-display);
  font-size: calc(45 * var(--vw1));
  color: var(--blue);
  text-align: center;
  line-height: 1.25;
  letter-spacing: -0.003em;
}
.h-section span { margin: 0 4px; }
.h-section .dark { color: var(--navy); }

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

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

/* ====== "WHAT WE TAKE OFF YOUR PLATE" ROW ====== */
/* Title + 4 item columns laid out as a shrink-to-fit cluster that is
   centred on the page. Using a fixed-width grid spread the items edge to
   edge and left them visually off-centre (dead space on the right), so the
   row now sizes to its content and centres as a single block. */
.plate-row {
  position: absolute;
  left: 50%;
  top: calc(1545 * var(--vh1));
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: start;
  column-gap: calc(36 * var(--vw1));
  z-index: 3;
}
/* large breathing gap between the title column and the first icon+text */
.plate-row > .plate-item:first-of-type {
  margin-left: calc(54 * var(--vw1));
}

.plate-title-col {
  flex: 0 0 calc(160 * var(--vw1));
  display: flex; flex-direction: column;
  gap: calc(16 * var(--vh1));
}
.plate-slash {
  width: calc(25 * var(--vw1));
  height: calc(31 * var(--vw1));
  display: block;
}
.plate-title {
  font-family: var(--font-display);
  font-size: calc(25 * var(--vw1));
  font-weight: 700;
  color: var(--navy);
  line-height: 1.18;
  margin: 0;
}

.plate-item {
  display: flex; flex-direction: column;
  gap: calc(18 * var(--vh1));
  align-items: flex-start;
  text-align: left;
}
.plate-item .dot {
  width: calc(45 * var(--vw1));
  height: calc(45 * var(--vw1));
  background: var(--navy);
  border-radius: 50%;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.plate-item .dot img { width: 55%; height: auto; filter: brightness(0) invert(1); }
.plate-item p {
  font-size: calc(17 * var(--vw1));
  line-height: 1.4;
  color: var(--navy);
  margin: 0;
  text-align: left;
  /* the manual <br /> tags define each of the 3 lines exactly;
     no max-width clamp so the longest line in each item never auto-wraps. */
  white-space: normal;
  min-height: calc(17 * var(--vw1) * 1.4 * 3);
}

/* === 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;
  }
}

/* plain gray placeholder card below the row (full-width like other sections) */
.plate {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(1798 * var(--vh1));
  width: calc(1347 * var(--vw1));
  height: calc(225 * var(--vh1));
  background: var(--gray);
  border-radius: 20px;
}

/* ====== DARK COST CARDS — pinned scroll stack ====== */
/* The stack is a tall scroll "track". Inside, all 4 cards sit at the top and
   are pinned in the viewport by JS (Base.astro); cards 2-4 rise from below
   and come to rest on top of the previous one, one after another. */
.cost-stack {
  position: absolute;
  left: calc(288 * var(--vw1));
  top: calc(2640 * var(--vh1));
  width: calc(1347 * var(--vw1));
  height: calc(2172 * var(--vh1));      /* scroll distance for the deck */
  z-index: 2;
}
.stack-card {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: calc(318 * var(--vh1));
  background: var(--navy);
  border-radius: 20px;
  color: #fff;
  will-change: transform;
}
/* incoming cards wait below the viewport until scroll brings them up */
.stack-card:not(:first-child) { transform: translateY(100vh); }

.sc-photo {
  position: absolute;
  left: calc(47 * var(--vw1));
  top: calc(40 * var(--vh1));
  width: calc(438 * var(--vw1));
  height: calc(240 * var(--vh1));
  background: var(--gray);
  border-radius: 10px;
  /* resting state: forward-slash parallelogram mask (tip at top-right).
     on hover the bottom-right point sweeps out to fill a full rectangle. */
  clip-path: polygon(0 0, 100% 0, 71% 100%, 0 100%);
  transition: clip-path .6s cubic-bezier(.22, 1, .36, 1);
  will-change: clip-path;
}
.sc-photo:hover {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.sc-h {
  position: absolute;
  left: calc(532 * var(--vw1));
  top: calc(115 * var(--vh1));
  width: calc(260 * var(--vw1));
  font-size: calc(25 * var(--vw1)); font-weight: 700;
  line-height: 1.22;
}
.sc-p {
  position: absolute;
  left: calc(832 * var(--vw1));
  top: calc(115 * var(--vh1));
  width: calc(470 * var(--vw1));
  font-size: calc(17 * var(--vw1));
}

/* ====== SERVICES GRID ====== */
.service-card {
  position: absolute;
  top: calc(5463 * var(--vh1));
  width: calc(320 * var(--vw1));
  height: calc(454 * var(--vh1));
  background: var(--bg-card);
  border-radius: 20px;
  padding: calc(38 * var(--vh1)) calc(32 * var(--vw1));
  display: flex; flex-direction: column; gap: calc(22 * var(--vh1));
  transition: transform .3s ease, box-shadow .3s ease;
}
.service-card:hover { transform: translateY(-4px); box-shadow: 0 14px 40px rgba(27,58,92,.10); }
.service-card.c1 { left: calc(288 * var(--vw1)); }
.service-card.c2 { left: calc(630 * var(--vw1)); }
.service-card.c3 { left: calc(972 * var(--vw1)); }
.service-card.c4 { left: calc(1315 * var(--vw1)); }
.service-card .icon {
  width: calc(60 * var(--vw1));
  aspect-ratio: 1/1;
  border-radius: 14px;
  background: var(--blue);
  display: grid; place-items: center;
}
.service-card .icon img { width: 55%; filter: brightness(0) invert(1); }
.service-card h4 { font-size: calc(22 * var(--vw1)); font-weight: 700; color: var(--navy); }
.service-card p  { font-size: calc(17 * var(--vw1)); color: var(--navy); }

/* ====== WHO WE WORK WITH ====== */
.who-left {
  position: absolute;
  left: calc(288 * var(--vw1));
  top: calc(6079 * var(--vh1));
  width: calc(498 * var(--vw1));
}
.who-left h2 {
  font-family: var(--font-display);
  font-size: calc(45 * var(--vw1)); line-height: 1.194;
  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(821 * var(--vw1));
  top: calc(6090 * var(--vh1));
  width: calc(812 * 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: grid;
  grid-template-columns: 1fr calc(244 * var(--vw1));
  gap: calc(36 * var(--vw1));
  align-items: center;
  height: calc(208 * var(--vh1));
}
.who-row h3 { font-family: var(--font-display); 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-row .thumb { background: var(--gray); border-radius: 10px; height: calc(176 * var(--vh1)); }
.who-divider { height: 2px; background: var(--blue); opacity: .8; margin: calc(20 * var(--vh1)) 0; }

/* ====== STATS BANNER ====== */
.stats {
  position: absolute;
  left: calc(-37 * var(--vw1));
  top: calc(6620 * var(--vh1));
  width: calc(1993 * var(--vw1));
  height: calc(820 * var(--vh1));
  background: var(--navy);
  /* angled top + bottom edges */
  clip-path: polygon(0 18%, 100% 6%, 100% 86%, 0 96%);
  z-index: 1;
}
.stats-row {
  position: absolute;
  left: 0; right: 0;
  top: calc(6934 * var(--vh1));
  display: flex; justify-content: center; align-items: start;
  gap: calc(150 * var(--vw1));
  z-index: 2;
}
.stat {
  display: grid; place-items: center;
  text-align: center;
  color: #fff;
  position: relative;
}
.stat + .stat::before {
  content: ''; position: absolute;
  left: calc(-75 * var(--vw1));
  top: calc(8 * var(--vh1));
  width: 1px; height: calc(160 * var(--vh1));
  background: rgba(255,255,255,.35);
}
.stat .num {
  font-family: var(--font-display);
  font-size: calc(55 * var(--vw1)); line-height: 1.194;
  color: var(--green);
  margin-bottom: calc(20 * var(--vh1));
}
.stat .label {
  font-size: calc(17 * var(--vw1)); color: #fff;
  width: calc(170 * var(--vw1));
}

/* ====== STEPS BLOCK ====== */
.steps-block {
  position: absolute;
  left: calc(288 * var(--vw1));
  top: calc(7244 * var(--vh1));
  width: calc(1345 * var(--vw1));
  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-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.s1 { left: calc(152 * var(--vw1));  top: calc(7466 * var(--vh1)); height: calc(276 * var(--vh1)); }
.step-card.s2 { left: calc(513 * var(--vw1));  top: calc(7545 * var(--vh1)); height: calc(331 * var(--vh1)); }
.step-card.s3 { left: calc(872 * var(--vw1));  top: calc(7619 * var(--vh1)); height: calc(343 * var(--vh1)); }

.get-started-pill {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  top: calc(8006 * 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;
}

/* ====== TESTIMONIAL ====== */
.tm-quote {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: calc(8324 * var(--vh1));
  width: calc(605 * var(--vw1));
  text-align: center; font-size: calc(17 * var(--vw1));
}
.tm-name {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: calc(8436 * var(--vh1));
  font-size: calc(17 * var(--vw1)); font-weight: 700;
}
.tm-dots {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: calc(8466 * 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 ====== */
.final-cta {
  position: absolute;
  left: calc(288 * var(--vw1));
  top: calc(8545 * var(--vh1));
  width: calc(1347 * var(--vw1));
  height: calc(362 * var(--vh1));
  background: var(--blue);
  border-radius: 20px;
  overflow: hidden;
}
.final-cta-h {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: calc(8630 * var(--vh1));
  width: calc(910 * var(--vw1));
  font-family: var(--font-display);
  font-size: calc(45 * var(--vw1)); line-height: 1.194;
  color: #fff;
  text-align: center;
  z-index: 2;
}
.final-cta-h .dark { color: var(--navy); }
.final-cta-p {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: calc(8758 * var(--vh1));
  width: calc(650 * var(--vw1));
  text-align: center; color: #fff; font-weight: 700; font-size: calc(17 * var(--vw1));
  z-index: 2;
}

/* ====== FOOTER ====== */
.footer-logo {
  position: absolute;
  left: calc(288 * var(--vw1));
  top: calc(9026 * var(--vh1));
  width: calc(257 * var(--vw1));
}
.footer-tag {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  top: calc(9143 * var(--vh1));
  font-size: calc(17 * var(--vw1));
}
.footer-pages, .footer-contact {
  position: absolute;
  left: calc(1087 * var(--vw1));
  font-size: calc(17 * var(--vw1));
  color: var(--navy);
}
.footer-pages   { top: calc(9102 * var(--vh1)); }
.footer-contact { top: calc(9143 * var(--vh1)); }
.footer-pages strong, .footer-contact strong { font-weight: 700; margin-right: calc(16 * var(--vw1)); }
.copyright {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  top: calc(9229 * var(--vh1));
  font-size: calc(17 * var(--vw1));
}
.byline {
  position: absolute;
  right: calc(288 * var(--vw1));
  top: calc(9229 * var(--vh1));
  font-size: calc(17 * var(--vw1));
  text-decoration: underline;
}

/* ====== 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;
}

/* ====== MOBILE 760px (≈ iPhone 14 390×844) ====== */
@media (max-width: 760px) {
  :root { --vw1: calc(100vw / 760); --vh1: calc(100vh / 1080); }
  .canvas { height: auto; }
  .nav { padding: 0 5vw; height: 8vh; inset: 3vh 0 auto 0; }
  .nav-logo { width: 36vw; }
  .nav-links { display: none; }
  .nav-spacer { display: none; }
  .nav-phone { display: none; }
  /* For mobile, switch to vertical flow — abandon absolute layout */
  .canvas > *:not(.top-waves) { position: static !important; transform: none !important; width: 100% !important; left: 0 !important; }
  .canvas { padding: 8vh 5vw; display: flex; flex-direction: column; gap: 4vh; }
  .hero-h1 { font-size: 28px; }
  .h-section, .who-left h2, .final-cta-h { font-size: 24px; }
  .stat .num, .step-card .n { font-size: 36px; }
  .top-waves { left: -10vw; width: 120vw; height: 18vh; }
  .who-card, .final-cta, .stats, .steps-block, .plate { height: auto; padding: 4vh 6vw; }
  .who-row { grid-template-columns: 1fr; height: auto; }
  .service-card { height: auto; }
  .stats-row { flex-direction: column; gap: 4vh; }
  .stat + .stat::before { display: none; }
  .step-card.s1, .step-card.s2, .step-card.s3 { position: static !important; width: 100% !important; height: auto !important; }
  /* cost stack → plain vertical cards on mobile (no scroll animation) */
  .cost-stack { height: auto !important; overflow: visible !important; }
  .stack-card { position: static !important; transform: none !important; inset: auto !important;
    height: auto !important; padding: 4vh 6vw; margin-bottom: 4vh; }
  .sc-photo { position: static !important; width: 100% !important; height: 30vh;
    clip-path: none !important; margin-bottom: 3vh; }
  .sc-h, .sc-p { position: static !important; width: 100% !important; margin-bottom: 2vh; }
}