/* ===================================================================
   Inkwell — reference hero (standalone)
   Reference: Home.png, measured at a 1440px viewport.
   =================================================================== */

/* ===================== FONTS ===================== */
@font-face {
  font-family: "Urbanist";
  src: url("../assets/fonts/Urbanist-Regular.woff2") format("woff2"),
       url("../assets/fonts/Urbanist-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Urbanist";
  src: url("../assets/fonts/Urbanist-Medium.woff2") format("woff2"),
       url("../assets/fonts/Urbanist-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Urbanist";
  src: url("../assets/fonts/Urbanist-SemiBold.woff2") format("woff2"),
       url("../assets/fonts/Urbanist-SemiBold.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Urbanist";
  src: url("../assets/fonts/Urbanist-Bold.woff2") format("woff2"),
       url("../assets/fonts/Urbanist-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Urbanist";
  src: url("../assets/fonts/Urbanist-ExtraBold.woff2") format("woff2"),
       url("../assets/fonts/Urbanist-ExtraBold.ttf") format("truetype");
  font-weight: 800; font-style: normal; font-display: swap;
}

/* ===================== TOKENS ===================== */
:root {
  --malibu: #64A7DB;
  --sea:    #1FBBAE;
  --ink:    #414042;

  /* CTA gradient, sampled off the reference render */
  --cta-from: #4AA8DD;
  --cta-to:   #1FBBAE;

  /* hero field, sampled off the reference render */
  --field-mint:  #D2F4EA;
  --field-cream: #FFFCE6;

  --hero-max: 1248px;  /* outer shell; nav + copy are constrained to 950 inside it */
  --measure: 950px;    /* nav pill + paragraph measure */
  --title-max: 1100px; /* wide enough to keep sentence one on a single line */

  /* nav: --nav-top matches the hero's own padding-top, so the bar starts
     exactly where it used to sit in the flow; --nav-h is the space the
     hero has to reserve for it now that it is fixed */
  --nav-h: clamp(64px, 5.97vw, 86px);
  --nav-pad: clamp(20px, 3.33vw, 48px);
  --nav-top: clamp(24px, 5.14vw, 74px);
  --nav-top-stuck: clamp(10px, 1.1vw, 16px);
  --nav-gutter: 48px;

  /* The nav wears the script on its own (assets/images/inkwell_wordmark.png,
     774x346) rather than the full lockup: at nav scale the "INNOVATIONS PVT.
     LTD." line under it was unreadable anyway, and it cost the mark half its
     height. --logo-h is now the height of the script itself, so the same
     number buys a far bigger wordmark. The footer still carries the full
     lockup, where the legal name has room to read.

     --logo-shift is how far the mark travels between dead centre — where it
     sits before the bar comes in — and its place at the left of the pill.
     hero.js remeasures it against the real layout; the calc is here so the
     very first paint already lands centred instead of jumping. */
  /* 47% of the bar's height. The reference sits at 45%, but its logotype is
     blocky uppercase; a lowercase script needs the extra to read as equally
     present. */
  --logo-h: clamp(40px, 3.8vw, 54px);
  --logo-shift: max(0px, calc(
    (min(var(--measure), 100vw - var(--nav-gutter)) - 2 * var(--nav-pad) - var(--logo-h) * 1.7295) / 2
  ));

  /* one headline scale, shared by the hero H1 and every section heading */
  --h1-size: clamp(30px, 3.056vw, 44px);
  --h1-leading: 1.1136;
  --h1-tracking: -.01em;

  /* two body sizes for the whole page. Paragraph copy had drifted to five
     different sizes (26/23/22/21/19px) all doing the same job. */
  --body-size: clamp(15px, 1.25vw, 18px);   /* paragraphs and card copy   */
  --body-sm:   clamp(14px, 1.11vw, 16px);   /* notes, captions, fine print */
  --body-leading: 1.55;
}

* { box-sizing: border-box; }

/* the nav is fixed, so an anchor jump has to stop short of it */
html { scroll-padding-top: calc(var(--nav-h) + 24px); }

body {
  margin: 0;
  font-family: "Urbanist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
h1, p { margin: 0; }

.arrow { display: inline-block; transition: transform .25s ease; }
a:hover .arrow { transform: translateX(3px); }

/* ===================== HERO SHELL ===================== */
/* 74px to the nav, 311px of fade below the CTA => ~1200px tall at 1440w,
   matching where the reference resolves to pure white. */
.hero {
  position: relative;
  isolation: isolate;
  padding-top: clamp(24px, 5.14vw, 74px);
  padding-bottom: clamp(56px, 5.6vw, 80px);
  overflow: hidden;
}

/* ===================== BACKGROUND STACK ===================== */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

/* 1. base field: mint at the left, cream bloom in the top-right corner */
.hero-field {
  position: absolute;
  inset: -6%;
  background:
    radial-gradient(120% 90% at 96% -6%, var(--field-cream) 0%, rgba(255,252,230,.72) 26%, rgba(255,252,230,0) 62%),
    radial-gradient(90% 70% at 4% 34%, #CDF3E8 0%, rgba(205,243,232,0) 68%),
    linear-gradient(105deg, var(--field-mint) 0%, #E3FAF0 32%, #F7FCEE 62%, var(--field-cream) 100%);
  animation: heroBreathe 34s ease-in-out infinite alternate;
  will-change: transform;
}

/* 1b. drifting colour depth — shared by the hero and the page field */
.aurora {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  will-change: transform;
  pointer-events: none;
}

/* Pushed to the edges and well off-centre, so colour frames the copy
   instead of sitting behind it. */
.ha-1 {
  width: 50%; aspect-ratio: 1.25;
  left: -18%; top: 34%;
  background: radial-gradient(circle, rgba(31,187,174,.13), rgba(31,187,174,0) 70%);
  animation: auroraA 44s ease-in-out infinite alternate;
}
.ha-2 {
  width: 52%; aspect-ratio: 1.3;
  right: -16%; top: 48%;
  background: radial-gradient(circle, rgba(100,167,219,.11), rgba(100,167,219,0) 70%);
  animation: auroraB 56s ease-in-out infinite alternate;
}
.ha-3 {
  width: 44%; aspect-ratio: 1.1;
  right: -10%; top: -16%;
  background: radial-gradient(circle, rgba(255,244,214,.55), rgba(255,244,214,0) 68%);
  animation: auroraA 50s ease-in-out -8s infinite alternate;
}

@keyframes auroraA {
  from { transform: translate3d(-2%,  1.5%, 0) scale(1);    }
  to   { transform: translate3d( 2.5%, -2%, 0) scale(1.07); }
}
@keyframes auroraB {
  from { transform: translate3d( 2%, -1.5%, 0) scale(1.06); }
  to   { transform: translate3d(-2.5%,  2%, 0) scale(1);    }
}

/* 2. silk waves */
.hero-silk {
  position: absolute;
  inset: -6%;
  width: 112%;
  height: 112%;
  animation: heroBreathe 34s ease-in-out infinite alternate;
  will-change: transform;
}

.band {
  transform-box: view-box;
  transform-origin: 50% 70%;
  will-change: transform;
}

.band-1       { filter: blur(56px); animation: silkDrift1 68s ease-in-out -6s  infinite alternate; }
.band-2       { filter: blur(46px); animation: silkDrift2 58s ease-in-out -14s infinite alternate; }
.band-3       { filter: blur(38px); animation: silkDrift1 50s ease-in-out -3s  infinite alternate; }
.band-ridge   { filter: blur(26px); animation: silkDrift2 44s ease-in-out -11s infinite alternate; }
.band-4       { filter: blur(42px); animation: silkDrift1 38s ease-in-out -17s infinite alternate; }
.band-5       { filter: blur(60px); animation: silkDrift2 62s ease-in-out -25s infinite alternate; }
.band-ridge-2 { filter: blur(34px); animation: silkDrift1 54s ease-in-out -19s infinite alternate; }

/* 3. grain, so the bands read as fabric rather than flat vector */
/* keeps the copy off the strongest colour — the field frames it rather than
   sitting behind it */
.hero-scrim {
  position: absolute;
  inset: 0;
  background: radial-gradient(62% 48% at 50% 44%,
    rgba(255,255,255,.72) 0%,
    rgba(255,255,255,.42) 45%,
    rgba(255,255,255,0) 78%);
}

.hero-grain {
  position: absolute;
  inset: 0;
  opacity: .18;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/></svg>");
}

/* 4. resolve to pure white at the bottom edge */
.hero-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(255,255,255,0) 62%,
    rgba(255,255,255,.55) 84%,
    #fff 100%);
}

/* ---- motion ---- */
@keyframes heroBreathe {
  from { transform: scale(1)     translate3d(0, 0, 0); }
  to   { transform: scale(1.045) translate3d(-1%, -1.4%, 0); }
}
@keyframes silkDrift1 {
  from { transform: translate3d(-2.2%,  1%, 0) scaleY(.97);   opacity: .9; }
  to   { transform: translate3d( 2.2%, -1%, 0) scaleY(1.03);  opacity: 1; }
}
@keyframes silkDrift2 {
  from { transform: translate3d( 2%, -.9%, 0) scaleY(1.03); opacity: 1; }
  to   { transform: translate3d(-2%,  .9%, 0) scaleY(.97);  opacity: .9; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-field, .hero-silk, .band, .aurora, .page-silk { animation: none !important; }
}

/* ===================================================================
   PAGE FIELD — carries the hero's palette down through the sections
   so nothing below the fold sits on flat white.
   =================================================================== */
.page {
  position: relative;
  isolation: isolate;
}

.page-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

/* alternating left/right so the field never reads lopsided */
.pa-1 {
  width: 54%; aspect-ratio: 1.15;
  left: -14%; top: 3%;
  background: radial-gradient(circle, rgba(31,187,174,.12), rgba(31,187,174,0) 66%);
  animation: auroraA 46s ease-in-out infinite alternate;
}
.pa-2 {
  width: 56%; aspect-ratio: 1.2;
  right: -12%; top: 17%;
  background: radial-gradient(circle, rgba(100,167,219,.13), rgba(100,167,219,0) 66%);
  animation: auroraB 53s ease-in-out -12s infinite alternate;
}
.pa-3 {
  width: 52%; aspect-ratio: 1.1;
  left: 24%; top: 46%;
  background: radial-gradient(circle, rgba(255,244,214,.5), rgba(255,244,214,0) 64%);
  animation: auroraA 39s ease-in-out -22s infinite alternate;
}
.pa-4 {
  width: 56%; aspect-ratio: 1.2;
  left: -12%; top: 62%;
  background: radial-gradient(circle, rgba(31,187,174,.12), rgba(31,187,174,0) 66%);
  animation: auroraB 48s ease-in-out -30s infinite alternate;
}
.pa-5 {
  width: 54%; aspect-ratio: 1.15;
  right: -12%; bottom: -2%;
  background: radial-gradient(circle, rgba(100,167,219,.13), rgba(100,167,219,0) 66%);
  animation: auroraA 43s ease-in-out -7s infinite alternate;
}

/* ease the field in from the hero's white bottom edge, and back out at the
   end, so neither boundary shows a seam */
.page-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    #fff 0%,
    rgba(255,255,255,0) 13%,
    rgba(255,255,255,0) 92%,
    rgba(255,255,255,.85) 100%);
}

/* two wide silk sweeps echoing the hero's fabric, one per section pair */
.page-silk {
  position: absolute;
  inset: -4%;
  width: 108%;
  height: 108%;
}
.pband-1 { filter: blur(60px); animation: silkDrift1 50s ease-in-out -9s  infinite alternate; }
.pband-2 { filter: blur(70px); animation: silkDrift2 57s ease-in-out -26s infinite alternate; }

.page-grain {
  position: absolute;
  inset: 0;
  opacity: .22;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/></svg>");
}

/* ===================== LAYOUT ===================== */
.hero-inner {
  position: relative;
  z-index: 1;
  max-width: var(--hero-max);
  margin: 0 auto;
  /* the nav is fixed now, so the hero holds its place open */
  padding: var(--nav-h) 24px 0;
}

/* ===================== NAV ===================== */
.navbar {
  position: fixed;
  z-index: 120;
  top: var(--nav-top);
  left: 50%;
  translate: -50% 0;
  width: min(var(--measure), calc(100% - var(--nav-gutter)));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: var(--nav-h);
  padding: 0 var(--nav-pad);
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 999px;
  box-shadow: 0 14px 40px -18px rgba(24, 68, 66, .28);
  transition: top .5s cubic-bezier(.22, 1, .36, 1),
              background .35s ease,
              box-shadow .35s ease;
}

.logo img {
  height: var(--logo-h);
  width: auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(4px, .9vw, 13px);
}
.nav-links a {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: clamp(13px, 1.04vw, 15px);
  font-weight: 500;
  color: #6E7472;
  padding: 9px 6px;
  border-radius: 999px;
  white-space: nowrap;
  transition: color .2s ease;
}
.nav-links a svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}
.nav-links a:hover { color: #16181A; }

/* ---- the Contact item reads as the bar's one action ----
   Same anatomy as the reference's nav CTA — filled pill, white label, a
   trailing arrow in a translucent disc — drawn in the site's own CTA
   gradient so it stays a smaller sibling of .hero-cta rather than a new
   button. The .is-current pair keeps the fill on contact.html, where the
   page marker would otherwise repaint it as a plain link. */
.nav-links .nav-cta a,
.nav-links .nav-cta a.is-current {
  gap: 9px;
  padding: 7px 7px 7px 16px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cta-from) 0%, var(--cta-to) 100%);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 8px 18px -8px rgba(31, 150, 170, .7);
  transition: filter .2s ease, box-shadow .2s ease, transform .2s ease;
}
.nav-links .nav-cta a:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 12px 24px -8px rgba(31, 150, 170, .78);
}
.nav-links .nav-cta a:active { transform: translateY(0); }

.nav-cta-arrow {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .22);
}
.nav-links .nav-cta a svg,
.nav-links .nav-cta a.is-current svg {
  width: 12px;
  height: 12px;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: translate .2s ease;
}
.nav-links .nav-cta a:hover svg { translate: 2px 0; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 10px;
  cursor: pointer;
}
.nav-toggle span {
  width: 22px; height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .25s ease, opacity .25s ease;
}
.nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- scroll states --------------------------------------------------
   At the top of the page the pill's chrome and its links are dropped, so
   nothing but the logo floats over the hero. The first scroll brings the
   whole bar in and tucks it against the top of the viewport.

   The collapsed look is the default rather than a class the script adds,
   so the bar never flashes open before hero.js runs. It is scoped to
   `.js` (set in <head>) so a page without scripting still gets a nav. */
.js .navbar {
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* with the pill gone there is nothing to anchor the mark to the left, so
   it sits centred on the page and slides back into the bar as it arrives */
.js .navbar .logo {
  translate: var(--logo-shift) 0;
  transition: translate .5s cubic-bezier(.22, 1, .36, 1);
}
.nav-scrolled .navbar .logo { translate: 0 0; }

.nav-scrolled .navbar {
  top: var(--nav-top-stuck);
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 14px 40px -18px rgba(24, 68, 66, .28);
}

/* the links ride in only where they sit inside the pill; below 900px they
   are a dropdown with its own open/closed handling, left alone here */
@media (min-width: 901px) {
  /* the items carry the reveal rather than the list, so they can stagger.
     visibility keeps the hidden links out of the tab order too. */
  .js .nav-links li {
    opacity: 0;
    visibility: hidden;
    translate: 0 -6px;
    transition: opacity .3s ease, translate .4s cubic-bezier(.22, 1, .36, 1), visibility .3s;
  }
  .nav-scrolled .nav-links li {
    opacity: 1;
    visibility: visible;
    translate: 0 0;
  }
  .nav-scrolled .nav-links li:nth-child(1) { transition-delay: .04s; }
  .nav-scrolled .nav-links li:nth-child(2) { transition-delay: .08s; }
  .nav-scrolled .nav-links li:nth-child(3) { transition-delay: .12s; }
  .nav-scrolled .nav-links li:nth-child(4) { transition-delay: .16s; }
  .nav-scrolled .nav-links li:nth-child(5) { transition-delay: .20s; }
}

/* ===================== CONTENT ===================== */
.hero-content { text-align: center; }

/* badges: an infinite marquee (King Kong's logo-strip pattern, done seamlessly).
   The track holds two identical passes and slides exactly -50%, so the loop
   point is invisible. Edges fade out via a mask instead of hard-clipping. */
.badge-marquee {
  margin-top: clamp(38px, 5.63vw, 81px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}

.badge-track {
  display: flex;
  width: max-content;
  gap: clamp(10px, 1.04vw, 15px);
  padding-right: clamp(10px, 1.04vw, 15px);   /* keeps the seam gap even */
  animation: badgeMarquee 38s linear infinite;
  will-change: transform;
}
.badge-marquee:hover .badge-track,
.badge-marquee:focus-within .badge-track { animation-play-state: paused; }

@keyframes badgeMarquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .badge-marquee { -webkit-mask-image: none; mask-image: none; }
  .badge-track {
    animation: none;
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
    padding-right: 0;
  }
  .badge-track .hero-badge[aria-hidden="true"] { display: none; }
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: clamp(10px, 1.53vw, 22px);
  height: clamp(42px, 3.61vw, 52px);
  padding: 0 clamp(16px, 2.08vw, 30px);
  border-radius: 12px;
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(255, 255, 255, .85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 6px 20px -12px rgba(24, 68, 66, .35);
  font-size: clamp(14px, 1.18vw, 17px);
  font-weight: 600;
  color: #1F201E;
  line-height: 1;
}
.badge-icon {
  width: clamp(16px, 1.39vw, 20px);
  height: clamp(16px, 1.39vw, 20px);
  flex-shrink: 0;
}

/* h1: 44px / 49px, ink tops 374 / 424 / 472 */
.hero-title {
  max-width: var(--title-max);
  margin: clamp(34px, 5.07vw, 73px) auto 0;
  font-size: var(--h1-size);
  font-weight: 800;
  line-height: var(--h1-leading);
  letter-spacing: var(--h1-tracking);
  color: #111213;
}

/* paragraph: 23px / 34px, measure 950px — wider than the headline */
.hero-copy {
  max-width: var(--measure);
  /* same headline-to-copy gap the sections use, so the hero shares their rhythm */
  margin: clamp(22px, 2.36vw, 34px) auto 0;
  font-size: var(--body-size);
  font-weight: 400;
  line-height: var(--body-leading);
  color: #33383A;
}

/* CTA: 294 x 80, ~12px radius, #4AA8DD -> #1FBBAE */
.hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: clamp(220px, 20.4vw, 294px);
  height: clamp(58px, 5.56vw, 80px);
  margin-top: clamp(28px, 2.5vw, 36px);
  padding: 0 28px;
  border-radius: 12px;
  background: linear-gradient(90deg, var(--cta-from) 0%, var(--cta-to) 100%);
  color: #fff;
  font-size: clamp(16px, 1.32vw, 19px);
  font-weight: 700;
  box-shadow: 0 16px 34px -18px rgba(31, 150, 170, .75);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.hero-cta:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow: 0 22px 42px -18px rgba(31, 150, 170, .8);
}
.hero-cta:active { transform: translateY(0); }

/* ===================================================================
   SECTIONS BELOW THE HERO
   =================================================================== */
.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.section { padding: clamp(60px, 5.9vw, 85px) 0; }

/* section headline — same scale as the hero H1 */
.section-title {
  margin: 0 auto;
  text-align: center;
  font-size: var(--h1-size);
  font-weight: 800;
  line-height: var(--h1-leading);
  letter-spacing: var(--h1-tracking);
  color: #111213;
}

/* 35px, tightened leading to sit closer under a 44px heading */
.section-sub {
  max-width: 1000px;
  margin: clamp(16px, 1.81vw, 26px) auto 0;
  text-align: center;
  font-size: clamp(19px, 2.43vw, 35px);
  font-weight: 500;
  line-height: 1.35;
  color: #16181A;
}
.section-sub.sub-narrow { max-width: 930px; }

/* 23px / 34px — same measure as the hero copy */
.section-copy {
  max-width: var(--measure);
  margin: clamp(22px, 2.36vw, 34px) auto 0;
  text-align: center;
  font-size: var(--body-size);
  line-height: var(--body-leading);
  color: #33383A;
}

/* ---------- WHY IT WORKS ---------- */
.why-list {
  max-width: 924px;
  margin: clamp(28px, 3.19vw, 46px) auto 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.why-card {
  background: #fff;
  border-radius: 16px;
  padding: clamp(24px, 2.1vw, 30px) clamp(26px, 4.17vw, 60px) clamp(26px, 2.36vw, 34px);
  box-shadow: 0 20px 30px -22px rgba(0, 0, 0, .55);
}
.why-card h3 {
  margin: 0 0 8px;
  font-size: clamp(19px, 1.94vw, 28px);
  font-weight: 700;
  line-height: 1.3;
  color: #4AA8DE;
}
.why-card p {
  font-size: var(--body-size);
  line-height: var(--body-leading);
  color: #26292B;
}

/* ---------- THE MATH ---------- */
.stat-grid {
  max-width: 1146px;
  margin: clamp(30px, 3.33vw, 48px) auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 39px;
}

.stat-card {
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2.29vw, 33px) clamp(24px, 2.99vw, 43px) clamp(34px, 3.47vw, 50px);
  background: #fff;
  border: 1px solid #D9D9D9;
  border-bottom: 9px solid #4AA8DE;
  border-radius: 10px;
}
.stat-icon {
  width: clamp(40px, 3.96vw, 57px);
  height: clamp(40px, 3.96vw, 57px);
  align-self: flex-end;
  fill: none;
  stroke: #64A6DA;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* two-line block: the number always breaks onto its own line, the label sits
   below it. Sized so the longest label ("cost reduction", 255px at 40px)
   clears the 268px content width without wrapping to a third line. */
.stat-value {
  min-height: clamp(48px, 4.72vw, 68px);
  font-size: clamp(28px, 2.78vw, 40px);
  font-weight: 800;
  line-height: .85;
  color: #111213;
}
.stat-num { display: block; }
.stat-note {
  margin-top: 10px;
  font-size: var(--body-sm);
  line-height: 1.45;
  color: #33383A;
}

/* ---------- TWO WAYS TO DOMINATE ---------- */
.door-grid {
  max-width: 1113px;
  margin: clamp(28px, 3.19vw, 46px) auto 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 33px;
}

.door {
  display: flex;
  flex-direction: column;
  min-height: clamp(300px, 27.4vw, 394px);
  padding: clamp(34px, 4.03vw, 58px) clamp(26px, 3.54vw, 51px) clamp(40px, 5.14vw, 74px);
  border-radius: 16px;
}
.door-business { background: linear-gradient(180deg, #CAECFF 0%, #FFFFFF 52%); }
.door-agency   { background: linear-gradient(180deg, #A0E1DC 0%, #FFFFFF 52%); }

.door h3 {
  margin: 0;
  font-size: clamp(22px, 2.36vw, 34px);
  font-weight: 700;
  line-height: 1.3;
  color: #111213;
}
.door p {
  margin-top: clamp(16px, 1.67vw, 24px);
  font-size: var(--body-sm);
  line-height: 1.5;
  color: #26292B;
}
.door-btn {
  align-self: flex-start;
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: clamp(160px, 14.5vw, 209px);
  height: clamp(42px, 3.4vw, 49px);
  padding: 0 22px;
  border-radius: 10px;
  background: #171717;
  color: #fff;
  font-size: clamp(14px, 1.18vw, 17px);
  font-weight: 600;
  transition: transform .2s ease, background .2s ease;
}
.door-btn:hover { transform: translateY(-2px); background: #000; }
.door-btn:active { transform: translateY(0); }

/* ===================================================================
   SHARED SUB-PAGE COMPONENTS
   Introduced by For Business, now used by For Agencies too, so they live
   with the rest of the system instead of in one page's sheet:
     .is-current  — nav marker for the page you are on
     .hero-sub    — the deck line between the H1 and the hero paragraph
     .cta-row     — a centred, in-section CTA
     .step-list   — a numbered process list
   =================================================================== */

/* ---------- nav: mark the page we are on ---------- */
.nav-links a.is-current {
  color: #16181A;
  font-weight: 600;
  background: rgba(74, 168, 222, .12);
  padding-left: 12px;
  padding-right: 12px;
}
.nav-links a.is-current svg { stroke: var(--cta-from); }

/* ---------- hero deck line ----------
   Same scale as .section-sub, so the hero and the sections share one
   type ramp: 44px H1 -> 35px deck -> 23px paragraph. */
.hero-sub {
  max-width: var(--measure);
  margin: clamp(20px, 2.36vw, 34px) auto 0;
  font-size: clamp(19px, 2.43vw, 35px);
  font-weight: 500;
  line-height: 1.35;
  color: #16181A;
}

/* the deck already carries the gap, so the paragraph tucks up under it
   instead of using the home page's full 93px drop from the H1 */
.hero-sub + .hero-copy { margin-top: clamp(20px, 2.15vw, 31px); }

/* ---------- in-section CTA ---------- */
.cta-row {
  margin-top: clamp(30px, 3.4vw, 49px);
  text-align: center;
}
/* .hero-cta carries its own top margin for the hero stack; the row owns
   the spacing down here */
.cta-row .hero-cta { margin-top: 0; }

/* ---------- numbered process list ----------
   Built on the .why-card shell so every card family on a page reads as
   one system, with the step number taking the place of the blue heading. */
.step-list {
  max-width: 924px;
  margin: clamp(28px, 3.19vw, 46px) auto 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
  padding: 0;
  counter-reset: step;
}

.step {
  display: flex;
  align-items: flex-start;
  gap: clamp(18px, 1.94vw, 28px);
  background: #fff;
  border-radius: 16px;
  padding: clamp(24px, 2.1vw, 30px) clamp(26px, 4.17vw, 60px) clamp(26px, 2.36vw, 34px);
  box-shadow: 0 20px 30px -22px rgba(0, 0, 0, .55);
  transition: transform .3s cubic-bezier(.22,.7,.3,1), box-shadow .3s ease;
}
.step:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 44px -24px rgba(0, 0, 0, .55);
}

.step-num {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(38px, 3.13vw, 45px);
  height: clamp(38px, 3.13vw, 45px);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cta-from) 0%, var(--cta-to) 100%);
  color: #fff;
  font-size: clamp(17px, 1.53vw, 22px);
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 10px 20px -12px rgba(31, 150, 170, .9);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.step:hover .step-num { transform: scale(1.08); }

.step p {
  margin: 0;
  padding-top: clamp(2px, .35vw, 5px);
  font-size: var(--body-size);
  line-height: var(--body-leading);
  color: #26292B;
}

.step-label {
  font-weight: 700;
  color: #4AA8DE;
  transition: color .3s ease;
}
.step:hover .step-label { color: var(--sea); }

/* ---------- markets map ----------
   About.png calls for a map highlighting the thirteen markets we have worked
   in. assets/images/world-map.svg is an equirectangular land silhouette, so a
   pin's position is pure arithmetic on its lat/long — no mapping library, no
   script needed to place anything:
     --x = (lon + 180) / 360        --y = (84 - lat) / 140
   The chip list below the frame is the same data in plain text: it survives a
   failed image, reads on a phone, and cross-highlights with the pins. */
.map {
  max-width: 1146px;
  margin: clamp(28px, 3.19vw, 46px) auto 0;
}

.map-canvas {
  position: relative;
  aspect-ratio: 1440 / 560;
  border-radius: 18px;
  border: 1px solid rgba(74, 168, 222, .2);
  background: linear-gradient(160deg, rgba(255,255,255,.78), rgba(233,247,251,.5));
  box-shadow: 0 30px 50px -34px rgba(24, 68, 66, .55);
  overflow: hidden;
}

.map-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .85;
}

/* ---- pins ---- */
.pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  translate: -50% -50%;              /* `translate`, so hover can own transform */
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;                      /* generous target over a small dot */
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.pin-dot {
  position: relative;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--sea);
  box-shadow: 0 0 0 4px rgba(31, 187, 174, .2),
              0 4px 10px -4px rgba(9, 58, 56, .7);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
}

/* a slow ring off each dot, staggered so the map reads as live rather than
   as thirteen things blinking in unison */
.pin-dot::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1.5px solid var(--sea);
  opacity: 0;
  animation: pinPing 4.2s cubic-bezier(.2,.7,.3,1) infinite;
}
.pin:nth-of-type(3n)   .pin-dot::after { animation-delay: -1.4s; }
.pin:nth-of-type(3n+1) .pin-dot::after { animation-delay: -2.8s; }

@keyframes pinPing {
  0%       { transform: scale(.6); opacity: 0; }
  18%      { opacity: .55; }
  55%, 100%{ transform: scale(2.6); opacity: 0; }
}

.pin-name {
  position: absolute;
  bottom: calc(100% - 6px);
  left: 50%;
  translate: -50% 0;
  padding: 6px 11px;
  border-radius: 9px;
  background: #14343B;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}

/* one active state, driven from either the pin or its chip */
.pin.is-active { z-index: 3; }
.pin.is-active .pin-dot {
  transform: scale(1.5);
  box-shadow: 0 0 0 7px rgba(31, 187, 174, .22),
              0 6px 14px -4px rgba(9, 58, 56, .75);
}
.pin.is-active .pin-name { opacity: 1; transform: translateY(0); }
.pin.is-active .pin-dot::after { animation: none; opacity: 0; }

.pin:focus-visible { outline: none; }
.pin:focus-visible .pin-dot {
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--cta-from);
}

/* ---- the chip list under the frame ---- */
.market-list {
  max-width: 924px;
  margin: clamp(18px, 1.94vw, 28px) auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.market {
  display: inline-flex;
  align-items: center;
  height: clamp(36px, 2.92vw, 42px);
  padding: 0 clamp(14px, 1.53vw, 22px);
  border-radius: 12px;
  background: rgba(255, 255, 255, .62);
  border: 1px solid rgba(74, 168, 222, .3);
  box-shadow: 0 6px 20px -14px rgba(24, 68, 66, .45);
  font-family: inherit;
  font-size: var(--body-sm);
  font-weight: 600;
  line-height: 1;
  color: #26292B;
  cursor: pointer;
  transition: transform .3s cubic-bezier(.22,.7,.3,1),
              border-color .3s ease,
              box-shadow .3s ease,
              background .3s ease,
              color .3s ease;
}
.market:hover,
.market.is-active {
  transform: translateY(-3px);
  border-color: var(--sea);
  background: #fff;
  color: #111213;
  box-shadow: 0 16px 26px -16px rgba(24, 68, 66, .5);
}
.market:focus-visible {
  outline: 2px solid var(--cta-from);
  outline-offset: 2px;
}

/* a phone-width frame is only ~145px tall, which crowds the Gulf pins into
   each other. Hold a minimum canvas width and let the wrapper scroll. */
@media (max-width: 700px) {
  /* the frame moves to the scroller so the rounded card stays put and the
     map slides inside it */
  .map-scroll {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    border-radius: 18px;
    border: 1px solid rgba(74, 168, 222, .2);
    box-shadow: 0 24px 40px -30px rgba(24, 68, 66, .55);
  }
  .map-canvas {
    min-width: 620px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
}

/* ---------- closing CTA band ----------
   Full-bleed sign-off in the CTA gradient, with the button inverted to
   white so it still reads as the one action on the page. */
.cta-band {
  position: relative;
  overflow: hidden;
  padding: clamp(64px, 7.29vw, 105px) 0 clamp(70px, 7.99vw, 115px);
  background: linear-gradient(100deg, var(--cta-from) 0%, var(--cta-to) 100%);
}
/* one soft light source, so the band has depth instead of a flat wash */
.cta-band::before {
  content: "";
  position: absolute;
  inset: -30% -10%;
  background: radial-gradient(60% 60% at 22% 12%, rgba(255,255,255,.28), rgba(255,255,255,0) 70%);
  pointer-events: none;
}
.cta-band .wrap { position: relative; }

.cta-band .section-title { color: #fff; }
.cta-band .section-copy {
  max-width: 780px;
  color: rgba(255, 255, 255, .92);
}

.cta-band .hero-cta {
  background: #fff;
  color: #111213;
  box-shadow: 0 18px 34px -18px rgba(9, 58, 56, .65);
}
.cta-band .hero-cta:hover {
  filter: none;
  box-shadow: 0 24px 42px -18px rgba(9, 58, 56, .7);
}

/* ---------- scroll reveal for the components above ----------
   Mirrors the pattern further down: gated on html.js so the page is fully
   visible if the script never runs. */
html.js .step,
html.js .cta-row,
html.js .map {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s cubic-bezier(.22,.7,.3,1),
              transform .7s cubic-bezier(.22,.7,.3,1),
              box-shadow .3s ease;
}
html.js .step.is-in,
html.js .cta-row.is-in,
html.js .map.is-in { opacity: 1; transform: none; }

html.js .step:nth-child(2) { transition-delay: .09s; }
html.js .step:nth-child(3) { transition-delay: .18s; }
html.js .step:nth-child(4) { transition-delay: .27s; }
html.js .step.is-in { transition-delay: 0s; }

@media (prefers-reduced-motion: reduce) {
  html.js .step,
  html.js .cta-row,
  html.js .map { opacity: 1; transform: none; transition: none; }
  .step:hover { transform: none; }
  .step:hover .step-num { transform: none; }
  .market:hover,
  .market.is-active { transform: none; }
  .pin-dot::after { animation: none; }
}

@media (max-width: 640px) {
  .step {
    flex-direction: column;
    gap: 14px;
  }
  .step p { padding-top: 0; }
  .cta-row .hero-cta { width: 100%; }
}

/* ---------- numbered service cards ----------
   Services.png gives each service three lines: a numbered name in blue, a
   promise in ink, then the detail. The card is the FAQ accordion's shell —
   same <details> behaviour, hover lift, and plus mark — with the detail
   living in the panel, so a service opens on click. Only the two-line
   summary head is new. */
/* the summary carries two lines instead of the FAQ's one, so the head
   stacks and the plus mark stays centred against the pair */
.service-q {
  align-items: center;
  padding-top: clamp(20px, 1.94vw, 28px);
  padding-bottom: clamp(20px, 1.94vw, 28px);
}
.service-heads {
  display: flex;
  flex-direction: column;
  gap: clamp(6px, .56vw, 8px);
}

/* numeral + service name, in the same blue and weight as the .why-card
   heading so the two card families read as one system */
.service-name {
  font-size: clamp(18px, 1.81vw, 26px);
  font-weight: 700;
  line-height: 1.3;
  color: #4AA8DE;
  transition: color .3s ease;
}
.faq-item:hover .service-name,
.faq-details[open] .service-name { color: var(--sea); }
.service-num { font-variant-numeric: tabular-nums; }

/* the promise, in ink — it stays visible while the card is closed, so the
   collapsed row still says what the service does */
.service-lede {
  font-size: var(--body-size);
  font-weight: 600;
  line-height: 1.45;
  color: #111213;
}

/* ---------- FAQ accordion ----------
   Same white card shell as .why-card and .step, so the FAQ reads as one
   more member of the card family rather than a new component. Built on
   <details>/<summary> so it still opens and closes without the script. */
.faq-list {
  max-width: 924px;
  margin: clamp(28px, 3.19vw, 46px) auto 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-details {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 30px -22px rgba(0, 0, 0, .55);
  transition: transform .3s cubic-bezier(.22,.7,.3,1), box-shadow .3s ease;
}
.faq-item:hover .faq-details {
  transform: translateY(-4px);
  box-shadow: 0 30px 44px -24px rgba(0, 0, 0, .55);
}

.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(18px, 1.94vw, 28px);
  padding: clamp(22px, 2.1vw, 30px) clamp(26px, 4.17vw, 60px);
  cursor: pointer;
  list-style: none;
  font-size: clamp(17px, 1.81vw, 26px);
  font-weight: 600;
  line-height: 1.4;
  color: #26292B;
  transition: color .3s ease;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q:hover,
.faq-details[open] .faq-q { color: #4AA8DE; }
.faq-q:focus-visible {
  outline: 2px solid var(--cta-from);
  outline-offset: -4px;
  border-radius: 16px;
}

/* plus sign, drawn from two rules so it can rotate into a minus */
.faq-mark {
  flex: none;
  position: relative;
  width: clamp(26px, 2.22vw, 32px);
  height: clamp(26px, 2.22vw, 32px);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cta-from) 0%, var(--cta-to) 100%);
  box-shadow: 0 10px 20px -12px rgba(31, 150, 170, .9);
  transition: transform .35s cubic-bezier(.34,1.56,.64,1);
}
.faq-mark::before,
.faq-mark::after {
  content: "";
  position: absolute;
  inset: 50% 26%;
  border-radius: 2px;
  background: #fff;
  translate: 0 -50%;
  height: 2px;
}
.faq-mark::after { rotate: 90deg; transition: opacity .3s ease; }
.faq-details[open] .faq-mark { transform: rotate(180deg); }
.faq-details[open] .faq-mark::after { opacity: 0; }

/* the script animates this wrapper's height; without it the browser just
   snaps the panel open, which is still perfectly usable. The padding lives
   on the inner box so height:0 collapses the panel completely instead of
   leaving the vertical padding behind as a stub. */
.faq-a { overflow: hidden; }
.faq-a-inner { padding: 0 clamp(26px, 4.17vw, 60px) clamp(24px, 2.36vw, 34px); }
.faq-a p {
  margin: 0;
  max-width: 700px;
  font-size: var(--body-size);
  line-height: var(--body-leading);
  color: #33383A;
}

html.js .faq-item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s cubic-bezier(.22,.7,.3,1),
              transform .7s cubic-bezier(.22,.7,.3,1);
}
html.js .faq-item.is-in { opacity: 1; transform: none; }
html.js .faq-item:nth-child(2) { transition-delay: .09s; }
html.js .faq-item:nth-child(3) { transition-delay: .18s; }
html.js .faq-item:nth-child(4) { transition-delay: .27s; }
html.js .faq-item.is-in { transition-delay: 0s; }

/* height is animated inline by the script; this is the easing for it */
html.js .faq-a { transition: height .38s cubic-bezier(.22,.7,.3,1); }

@media (prefers-reduced-motion: reduce) {
  html.js .faq-item { opacity: 1; transform: none; transition: none; }
  html.js .faq-a { transition: none; }
  .faq-item:hover .faq-details { transform: none; }
  .faq-details[open] .faq-mark { transform: none; }
}

/* ===================================================================
   CONTACT FORM
   The Contact page's one job. Built on the .why-card shell — same white
   surface, same 16px radius, same shadow — so the form reads as one more
   card in the system instead of a browser default form.
   =================================================================== */
/* This section leads with its deck line instead of a heading, so the line
   takes the section's top edge. Without the heading the standard section
   padding plus the deck's own heading-gap left a visible void under the
   hero, so both are pulled in and the hero's bottom fade supplies the air. */
.section-form { padding-top: clamp(28px, 2.64vw, 38px); }
.section-form .section-sub { margin-top: 0; }

.form-card {
  max-width: 924px;
  margin: clamp(28px, 3.19vw, 46px) auto 0;
  padding: clamp(28px, 3.33vw, 48px) clamp(24px, 3.61vw, 52px) clamp(30px, 3.06vw, 44px);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 30px -22px rgba(0, 0, 0, .55);
}

/* two short fields to a row; the long ones span both columns */
.field-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(18px, 1.67vw, 24px);
}
.field-wide { grid-column: 1 / -1; }

/* fieldset needs the border and padding stripped before it will sit in the
   grid like every other field */
.field {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

/* same blue as the .why-card headings, one step down in size */
.field-label {
  padding: 0;
  font-size: clamp(15px, 1.18vw, 17px);
  font-weight: 700;
  line-height: 1.3;
  color: #4AA8DE;
}
.field-label .optional { font-weight: 500; color: #6C7477; }

.field-input {
  width: 100%;
  height: clamp(48px, 3.75vw, 54px);
  padding: 0 16px;
  font-family: inherit;
  font-size: clamp(15px, 1.11vw, 16px);
  color: #26292B;
  background: #F5F8F9;
  border: 1px solid #E1E7E9;
  border-radius: 10px;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.field-input::placeholder { color: #8B9296; }

textarea.field-input {
  height: auto;
  min-height: 132px;
  padding: 14px 16px;
  line-height: 1.5;
  resize: vertical;
}

/* native select arrows are inconsistent across platforms, so the chevron is
   drawn here in the system's ink */
select.field-input {
  appearance: none;
  padding-right: 44px;
  background: #F5F8F9
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.6 6 6.4l5-4.8' fill='none' stroke='%234AA8DE' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat right 16px center / 12px 8px;
  cursor: pointer;
}
select.field-input:invalid { color: #8B9296; }   /* the disabled placeholder row */

.field-input:hover { border-color: #C9D5D9; }
.field-input:focus {
  outline: none;
  background-color: #fff;
  border-color: var(--cta-from);
  box-shadow: 0 0 0 3px rgba(74, 168, 222, .18);
}

/* ---------- channel checkboxes ---------- */
.check-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: clamp(44px, 3.4vw, 49px);
  padding: 0 18px;
  background: #F5F8F9;
  border: 1px solid #E1E7E9;
  border-radius: 999px;
  font-size: clamp(14px, 1.04vw, 15px);
  font-weight: 600;
  color: #26292B;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.check:hover { border-color: #C9D5D9; }

/* the real checkbox is the box you see — stripped with appearance:none and
   repainted here, rather than hidden behind a decorative stand-in that
   assistive tech would have to be told about */
.check input,
.consent input {
  flex: none;
  appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1.5px solid #B9C6CB;
  border-radius: 5px;
  background: #fff;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}
.check input:checked,
.consent input:checked {
  border-color: transparent;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3.4 8.4 3.1 3.1L12.6 5' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    linear-gradient(135deg, var(--cta-from) 0%, var(--cta-to) 100%);
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: 11px 11px, cover;
}
.check input:focus-visible,
.consent input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(74, 168, 222, .3);
}

/* the pill follows its checkbox; :has is the only way up to the parent, and
   where it is missing the box itself still carries the checked state */
.check:has(input:checked) {
  background: rgba(74, 168, 222, .12);
  border-color: var(--cta-from);
  color: #16181A;
}

/* ---------- consent ----------
   Running text rather than a pill: this is something to read, not a filter
   to flick on. Shares the checkbox drawn above. */
.consent-block { gap: 14px; }

.consent {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: clamp(13px, 1.04vw, 15px);
  line-height: 1.5;
  color: #4A5154;
  cursor: pointer;
}
.consent input { margin-top: 2px; }        /* sits on the first line of text */
.consent .optional { color: #8B9296; }

/* ---------- honeypot ----------
   Off-screen instead of display:none — a bot that checks visibility still
   finds it, and it is out of the keyboard's way via tabindex="-1". */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- submit ---------- */
/* .hero-cta is written for an <a>; a <button> needs the chrome removed */
button.hero-cta {
  border: 0;
  font-family: inherit;
  cursor: pointer;
}
button.hero-cta:hover .arrow { transform: translateX(3px); }

.form-note {
  margin-top: clamp(14px, 1.11vw, 16px);
  font-size: clamp(13px, .97vw, 14px);
  line-height: 1.45;
  color: #6C7477;
}

/* ---------- submission feedback ---------- */
.form-status {
  max-width: 620px;
  margin: clamp(14px, 1.11vw, 16px) auto 0;
  padding: 14px 20px;
  border-radius: 10px;
  font-size: clamp(14px, 1.04vw, 15px);
  font-weight: 600;
  line-height: 1.45;
}
.form-status.is-ok {
  background: rgba(31, 187, 174, .12);
  border: 1px solid rgba(31, 187, 174, .5);
  color: #12786F;
}
.form-status.is-error {
  background: rgba(244, 67, 54, .08);
  border: 1px solid rgba(244, 67, 54, .4);
  color: #A5251B;
}

@media (max-width: 700px) {
  .field-grid { grid-template-columns: 1fr; }
  .check { width: 100%; }
}

/* ===================================================================
   FOOTER
   Measured off Home.png at a 1440px viewport:
     top row content box  x 102 -> 1338  (1236 wide, centred)
     rule                 x 135 -> 1304  (1170 wide, centred)
     link baselines       4947 / 4986 / 5026 / 5065  (39px pitch)
     switch pill          367 x 48, flush with the content box's right edge

   Deliberate departure from the reference: Home.png clusters Company (x382)
   and Services (x561) against the brand and leaves a 264px void before the
   pill. The four blocks are spread on an equal gutter instead, so the row
   reads evenly at every width. Everything else is still measured to the px.
   =================================================================== */
.site-footer {
  position: relative;
  background: #fff;
  padding: clamp(70px, 8.3vw, 120px) 0 clamp(48px, 5.3vw, 76px);
}

.footer-inner {
  max-width: 1284px;   /* 1236 content + 2 x 24 gutter */
  margin: 0 auto;
  padding: 0 24px;
}

/* equal gutter between all four blocks: `gap` is the floor, space-between
   shares the slack out evenly on top of it */
.footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}

/* ---------- brand ---------- */
.footer-brand { flex: none; }

.footer-logo { display: block; margin-top: 8px; }
.footer-logo img { width: 180px; height: auto; }

.footer-social {
  display: flex;
  gap: 8px;                                   /* 37px pitch on a 29px icon */
  margin-top: 25px;
}
.footer-social a {
  display: block;
  width: 29px;
  height: 29px;
  transition: transform .2s ease, opacity .2s ease;
}
.footer-social svg {
  width: 100%;
  height: 100%;
  fill: #6F6F6F;
}
.footer-social .ring {
  fill: none;
  stroke: #8C8C8C;
  stroke-width: 1.3;
}
.footer-social .line {
  fill: none;
  stroke: #6F6F6F;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.footer-social a:hover { transform: translateY(-2px); }
.footer-social a:hover svg { fill: var(--sea); }
.footer-social a:hover .ring,
.footer-social a:hover .line { stroke: var(--sea); }

/* ---------- link columns ---------- */
.footer-col { flex: none; }

.footer-head {
  margin: 0;
  font-size: 23px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  color: #121212;
  white-space: nowrap;
}

.footer-links { margin-top: 29px; }
.footer-links li { line-height: 16px; }        /* 39px baseline pitch */
.footer-links li + li { margin-top: 23px; }
.footer-links a {
  display: inline-block;
  font-size: 16px;
  font-weight: 400;
  line-height: 16px;
  color: #565656;
  white-space: nowrap;
  transition: color .2s ease;
}
.footer-links a:hover { color: #121212; }

/* ---------- switch pill ---------- */
.footer-switch {
  display: flex;
  align-items: stretch;
  flex: none;
  width: 367px;
  height: 48px;
  margin: 56px 0 0;                           /* pill top sits 53px below the headings' cap line */
  border-radius: 999px;
  background: #E7E7E7;
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease;
}
.footer-switch:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px -16px rgba(24, 68, 66, .55);
}

.switch-label {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 500;
  color: #4A4A4A;
  white-space: nowrap;
}

.switch-go {
  flex: none;
  width: 102px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: linear-gradient(180deg, var(--cta-from) 0%, var(--cta-to) 100%);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

/* ---------- rule + copyright ---------- */
.footer-rule {
  height: 2px;
  margin: 72px 33px 0;                        /* 1170 wide inside the 1236 box */
  border: 0;
  background: #DEDEDE;
}

.footer-copy {
  margin-top: 42px;
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
  color: #121212;
}

/* ---------- footer responsive ---------- */
/* all four blocks need 813px of content plus gutters; below that the pill
   drops to its own full-width row and the three text blocks share the row
   equally, so there is never dead space on the right */
@media (max-width: 980px) {
  .footer-brand,
  .footer-col { flex: 1 1 0; min-width: 150px; }
  .footer-switch { flex: none; width: 100%; margin-top: 8px; }
}

@media (max-width: 700px) {
  .footer-top { flex-direction: column; align-items: flex-start; gap: 40px; }
  .footer-brand, .footer-col { flex: none; min-width: 0; }
  .footer-switch { max-width: 367px; margin-top: 0; }
  .footer-rule { margin: 48px 0 0; }
  .footer-copy { font-size: 15px; }
}

/* ===================================================================
   INTERACTION — hover on every card, plus scroll-reveal entrances
   =================================================================== */
.hero-badge,
.why-card,
.stat-card,
.door {
  transition: transform .3s cubic-bezier(.22,.7,.3,1),
              box-shadow .3s ease,
              border-color .3s ease;
}

/* hero badges */
.hero-badge:hover {
  transform: translateY(-3px);
  background: rgba(255,255,255,.78);
  border-color: #fff;
  box-shadow: 0 16px 28px -14px rgba(24,68,66,.45);
}
.badge-icon { transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
/* a check reads wrong when it spins — scale instead */
.hero-badge:hover .badge-icon { transform: scale(1.16); }

/* why-it-works cards */
.why-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 44px -24px rgba(0,0,0,.55);
}
.why-card h3 { transition: color .3s ease; }
.why-card:hover h3 { color: var(--sea); }

/* stat cards — bottom rule shifts blue → sea, icon nudges */
.stat-card:hover {
  transform: translateY(-5px);
  border-bottom-color: var(--sea);
  box-shadow: 0 28px 42px -24px rgba(31,150,170,.5);
}
.stat-icon { transition: transform .4s cubic-bezier(.22,.7,.3,1), stroke .3s ease; }
.stat-card:hover .stat-icon { transform: rotate(-10deg) scale(1.1); stroke: var(--sea); }

/* door cards — the card carries its own button on hover */
.door:hover {
  transform: translateY(-5px);
  box-shadow: 0 32px 48px -26px rgba(24,68,66,.42);
}
.door:hover .door-btn { background: #000; transform: translateY(-2px); }
.door:hover .arrow { transform: translateX(3px); }

/* ---------- scroll reveal ----------
   Gated on html.js (set by an inline head script) so the page is fully
   visible if JS never runs. */
html.js .section-title,
html.js .section-sub,
html.js .section-copy,
html.js .why-card,
html.js .stat-card,
html.js .door,
html.js .form-card {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s cubic-bezier(.22,.7,.3,1),
              transform .7s cubic-bezier(.22,.7,.3,1),
              box-shadow .3s ease,
              border-color .3s ease;
}
html.js .is-in { opacity: 1; transform: none; }

/* stagger the card rows */
html.js .why-card:nth-child(2)  { transition-delay: .09s; }
html.js .why-card:nth-child(3)  { transition-delay: .18s; }
html.js .why-card:nth-child(4)  { transition-delay: .27s; }
html.js .stat-card:nth-child(2) { transition-delay: .11s; }
html.js .stat-card:nth-child(3) { transition-delay: .22s; }
html.js .door:nth-child(2)      { transition-delay: .12s; }

/* a revealed card must still animate its hover instantly */
html.js .why-card.is-in,
html.js .stat-card.is-in,
html.js .door.is-in { transition-delay: 0s; }

@media (prefers-reduced-motion: reduce) {
  html.js .section-title,
  html.js .section-sub,
  html.js .section-copy,
  html.js .why-card,
  html.js .stat-card,
  html.js .door,
  html.js .form-card { opacity: 1; transform: none; transition: none; }

  .hero-badge:hover,
  .why-card:hover,
  .stat-card:hover,
  .door:hover { transform: none; }
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 900px) {
  .stat-grid { grid-template-columns: 1fr; gap: 20px; }
  .stat-value { min-height: 0; }
  .door-grid { grid-template-columns: 1fr; gap: 20px; }
  /* min-height goes, so `margin-top:auto` on the button has no slack left to
     push against — give it an explicit gap instead. */
  .door { min-height: 0; }
  .door-btn { margin-top: 28px; }
}

@media (max-width: 1080px) {
  .hero-inner { max-width: 100%; padding: var(--nav-h) 32px 0; }
  .hero-title, .hero-copy { max-width: 100%; }
  :root { --nav-gutter: 64px; }
}

@media (max-width: 900px) {
  .nav-toggle { display: flex; }

  /* the toggle stays put at the top of the page even though the pill's
     chrome is gone — the menu has to remain reachable on touch. Opening
     it brings the pill back so the header still reads as one surface. */
  .js .navbar:has(.nav-links.open) {
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 14px 40px -18px rgba(24, 68, 66, .28);
  }
  /* the pill is back, so the mark belongs at its left again */
  .js .navbar:has(.nav-links.open) .logo { translate: 0 0; }

  .nav-links {
    position: absolute;
    top: calc(100% + 12px);
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 12px;
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 20px 50px -20px rgba(24, 68, 66, .3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
  }
  .nav-links.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .nav-links a { width: 100%; padding: 12px 14px; font-size: 15px; }
  /* as a full-width row the CTA needs the taller rhythm of its neighbours,
     and the arrow belongs at the far end rather than tucked up to the label */
  .nav-links .nav-cta a,
  .nav-links .nav-cta a.is-current {
    padding: 10px 10px 10px 18px;
    justify-content: space-between;
  }
}

@media (max-width: 640px) {
  :root { --nav-gutter: 40px; }
  .hero-inner { padding: var(--nav-h) 20px 0; }
  /* the marquee stays a single scrolling line on mobile — it reads better
     than three stacked pills and needs no vertical room */
  .hero-badge {
    height: clamp(42px, 3.61vw, 52px);
    padding: 0 16px;
    white-space: nowrap;
  }
  .hero-cta { width: 100%; }

  /* heavy blur is expensive on mobile GPUs and reads as mush at this size */
  .band-1 { filter: blur(26px); }
  .band-2 { filter: blur(22px); }
  .band-4 { filter: blur(20px); }
}