/* ==========================================================================
   layout.css
   Page shell: content column, sections, header, hero and footer.
   ========================================================================== */

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: calc(var(--content) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  padding-block: var(--section-y);
}

.section--tint  { background: var(--bg-strip); }
.section--white { background: var(--white); }

/* Two blocks that share a background read as one continuous surface, so their
   facing paddings stack into a single oversized band of nothing — 128px on
   phones, 264px on desktop. Collapse the second one's top padding so the
   vertical rhythm stays even. Only applies between untinted blocks; where the
   background actually changes, the full padding is what separates them. */
.section:not(.section--tint):not(.section--navy):not(.section--dark):not(.section--white)
  + .section:not(.section--tint):not(.section--navy):not(.section--dark):not(.section--white),
.hero + .section:not(.section--tint):not(.section--navy):not(.section--dark):not(.section--white) {
  padding-top: 0;
}

.section--navy {
  background: var(--navy);
  color: #fff;
}
.section--navy .lead,
.section--navy .body { color: var(--on-dark); }
.section--navy .h-soft { color: var(--on-dark-soft); }

.section--dark {
  background: var(--ink);
  color: #fff;
  overflow: hidden;
}
.section--dark .lead { color: var(--on-dark); }

/* --------------------------------------------------------------------------
   6. Header / navigation
   -------------------------------------------------------------------------- */
.progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 120;
  background: linear-gradient(90deg, var(--navy), var(--crimson));
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
}

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow 0.3s var(--ease), padding 0.3s var(--ease);
}
.header.is-stuck { box-shadow: 0 10px 30px rgba(12, 21, 32, 0.07); }

.header__inner {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 34px);
  padding-block: 14px;
  transition: padding-block 0.3s var(--ease);
}
.header.is-stuck .header__inner { padding-block: 8px; }

/* Header lockup
   --------------------------------------------------------------------------
   Three overlaid layers cut from the supplied artwork, all sharing its viewBox
   (see tools/split-logo.mjs), so stacked they are pixel-identical to
   logo-cropath-full.svg.

   Geometry measured from the source ink, as fractions of the 1497 x 404.25
   viewBox — used below for the transform origins and offsets:
     icon ink      x 1.5    y 0      404   x 404
     wordmark ink  x 439.6  y 17.8   1053.6 x 187.7   centre y 111.65
     tagline ink   x 437.6  y 226    1054.8 x 158.3
     icon centre y 202.1
   -------------------------------------------------------------------------- */
.logo {
  /* Declared here, not on the stack, so the padding below can read it too —
     custom properties inherit downwards only, and reading it from the child
     silently fell back to a hard-coded height. */
  --logo-h: clamp(38px, 3.4vw, 54px);
  flex: none;
  /* Reserves the room the enlarged wordmark needs in the compact state, so the
     flex row accounts for it instead of the artwork colliding with the nav. */
  transition: padding-right 0.35s var(--ease);
}

.logo__stack {
  position: relative;
  display: block;
  height: var(--logo-h);
  aspect-ratio: 1497 / 404.25;
  transition: height 0.35s var(--ease);
}
.logo__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Only transform and opacity animate, so this stays on the compositor and
     never triggers layout while scrolling. */
  transition: transform 0.45s var(--ease), opacity 0.3s var(--ease);
}

/* Scale about the wordmark's own left edge and vertical centre (29.37% /
   27.62% of the box) so growing it cannot drift it away from the roundel. */
.logo__wordmark { transform-origin: 29.37% 27.62%; }

/* Compact: the tagline drops away, and the wordmark grows to 62% of the
   roundel's height and drops to sit on its centre line.
   22.38% = (202.1 - 111.65) / 404.25, the gap between the wordmark's centre and
   the roundel's. 0.877 = how far the scaled wordmark reaches past the original
   box, in units of the lockup height. */
.header.is-compact .logo { padding-right: calc(var(--logo-h) * 0.877); }
.header.is-compact .logo__tagline {
  transform: translateY(46%);
  opacity: 0;
}
.header.is-compact .logo__wordmark { transform: translateY(22.38%) scale(1.34); }

.header.is-stuck .logo { --logo-h: clamp(34px, 2.8vw, 44px); }

/* The narrowest phones have barely any spare width in the header bar, so keep
   the compact lockup at its original size there — only the centring applies. */
@media (max-width: 480px) {
  .header.is-compact .logo { padding-right: 0; }
  .header.is-compact .logo__wordmark { transform: translateY(22.38%); }
}

@media (prefers-reduced-motion: reduce) {
  .logo, .logo__stack, .logo__layer { transition: none; }
}

.header__rule {
  width: 1px;
  align-self: stretch;
  background: var(--line);
  flex: none;
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.7vw, 30px);
  margin-inline: auto;
}
.nav__link {
  position: relative;
  font-family: 'Kumbh Sans', sans-serif;
  font-size: clamp(13px, 0.95vw, 16px);
  font-weight: 500;
  white-space: nowrap;
  padding-block: 6px;
  color: var(--ink);
  transition: color 0.25s var(--ease);
}
.nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: var(--crimson);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.3s var(--ease);
}
.nav__link:hover { color: var(--crimson); }
.nav__link:hover::after,
.nav__link.is-active::after { transform: scaleX(1); }
.nav__link.is-active { color: var(--crimson); }

.header__cta { flex: none; padding: 13px 22px; min-height: 46px; }

.burger {
  display: none;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  padding: 0;
  place-items: center;
}
.burger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--ink);
  position: relative;
  transition: background-color 0.2s var(--ease);
}
.burger span::before,
.burger span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background: var(--ink);
  transition: transform 0.3s var(--ease);
}
.burger span::before { top: -6px; }
.burger span::after  { top: 6px; }
.burger[aria-expanded='true'] span { background: transparent; }
.burger[aria-expanded='true'] span::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded='true'] span::after  { transform: translateY(-6px) rotate(-45deg); }

.mobile-nav {
  display: none;
  border-top: 1px solid var(--line);
  background: #fff;
}
.mobile-nav.is-open { display: block; }
.mobile-nav ul { padding: 12px 0 22px; }
.mobile-nav a {
  display: block;
  padding: 14px 0;
  font-family: 'Kumbh Sans', sans-serif;
  font-weight: 500;
  font-size: 17px;
  border-bottom: 1px solid var(--line);
}
.mobile-nav a.is-active { color: var(--crimson); }

/* --------------------------------------------------------------------------
   7. Hero gradient (the magenta swoosh exported from Figma)
   --------------------------------------------------------------------------
   The artwork is deliberately larger than the hero and anchored past its right
   edge, so the hero's own overflow does the cropping — exactly as the Figma
   frame does. Because the artwork's backdrop equals --bg-hero, no edge of the
   rectangle is ever perceivable; only the pink reads.
   -------------------------------------------------------------------------- */
.hero__gradient {
  /* Sized from a FIXED reference, not from the hero's own height.
     Percentages of the hero made the artwork 26px wider and 3px higher on Home,
     whose content pushes it past the shared min-height — small, but visible as a
     jump when navigating Home <-> a sub-page. This expression is the same one
     the hero uses for min-height, so every hero gets identical artwork.
     1.5x with a -0.2 offset puts the bottom edge at 1.3x the reference, which
     clears the tallest hero at every width (verified 780-1920px) — the edges
     must stay outside the hero because the pink runs to the edge of the source
     file and would otherwise show as a hard line. */
  --gref: min(720px, 50vw);
  position: absolute;
  top: calc(var(--gref) * -0.2);
  right: -6%;
  height: calc(var(--gref) * 1.5);
  aspect-ratio: 791 / 727;
  background: url('../img/gradient.svg') no-repeat center / cover;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}

/* On a narrow, tall hero the artwork is sized off height, so it grows far wider
   than the viewport and the dense core lands across the headline. Anchor it to
   the top-right corner instead, sized off width, and let it sit behind the type
   rather than through it. */
@media (max-width: 760px) {
  .hero__gradient {
    /* Same reasoning as above: a percentage top drifted between the tall Home
       hero and the short sub-page ones. */
    top: calc(var(--gref) * -0.14);
    right: -34%;
    left: auto;
    height: auto;
    width: 128%;
    opacity: 0.72;
  }
}

/* Faint layout grid lines, as drawn in the Figma hero.
   They sit above the artwork, so they are masked out before they reach it:
   1px rules crossing the saturated pink read as scan-line glitches rather than
   as a design detail. Fading them out on the right keeps them where the type
   is and lets the gradient stay clean. */
.gridlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image:
    linear-gradient(to right, rgba(12, 21, 32, 0.05) 1px, transparent 1px);
  background-size: 25% 100%;
  background-position: 12.5% 0;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 30%, transparent 52%);
  mask-image: linear-gradient(90deg, #000 0%, #000 30%, transparent 52%);
}

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--bg-hero);
  padding-block: clamp(70px, 9vw, 150px) clamp(70px, 9vw, 140px);
  overflow: hidden;
  isolation: isolate;
  /* A shared floor keeps the gradient reading at the same weight on the home
     hero and the shorter sub-page heroes. */
  min-height: min(720px, 50vw);
  display: flex;
  align-items: center;
}
.hero__inner { position: relative; z-index: 2; width: 100%; }

/* The header is sticky and therefore in flow, so the hero's top edge sits
   directly beneath it — and because the pink runs right to the top of the
   source artwork, `overflow: hidden` sliced it along the header's border.
   Moving the artwork down is not an option: that would expose its own
   rectangle edge instead. So fade the hero's background back over the top of
   it. The artwork's backdrop is the same colour, so this reads as the gradient
   simply dissolving before it reaches the chrome. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: clamp(90px, 13vh, 150px);
  z-index: 1;
  background: linear-gradient(180deg, var(--bg-hero) 22%, transparent);
  pointer-events: none;
}
/* em-based so the measure scales with the fluid display size and keeps the
   three-line break from the Figma hero. */
.hero__title { max-width: 15em; }
.hero__lead { margin-top: 30px; max-width: 56ch; }
.hero__ctas { margin-top: 38px; }

/* Home hero puts copy + CTAs side by side above 1100px, like the Figma frame */
.hero--home .hero__foot {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, auto);
  align-items: center;
  gap: clamp(24px, 3vw, 56px);
  margin-top: clamp(30px, 3.4vw, 52px);
}
.hero--home .hero__lead { margin-top: 0; }
.hero--home .hero__ctas { margin-top: 0; }

.hero--sub .kicker { margin-top: 18px; }

/* --------------------------------------------------------------------------
   18. Footer
   -------------------------------------------------------------------------- */
.footer { background: var(--bg); padding-top: clamp(48px, 5.4vw, 90px); }
.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
  gap: clamp(26px, 3vw, 54px);
  padding-bottom: clamp(38px, 4.4vw, 68px);
}
.footer__logo { height: clamp(52px, 5vw, 76px); width: auto; }
.footer h4 {
  font-family: 'Kumbh Sans', sans-serif;
  font-size: clamp(17px, 1.35vw, 22px);
  font-weight: 500;
  padding-bottom: 14px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.footer__col + .footer__col { border-left: none; }
.footer li + li { margin-top: 14px; }
.footer__link {
  font-family: 'Kumbh Sans', sans-serif;
  font-size: 15px;
  font-weight: 500;
  transition: color 0.25s var(--ease), padding-left 0.25s var(--ease);
}
.footer__link:hover { color: var(--crimson); padding-left: 5px; }
.footer address { font-style: normal; font-size: 15px; line-height: 1.9; color: var(--muted); }

.footer__badges {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 74px));
  gap: 14px;
  margin-top: 26px;
}
.footer__badges .badge { width: 100%; padding: 10px; }

.footer__bottom {
  background: var(--crimson);
  color: #fff;
  text-align: center;
  padding: 22px;
  font-family: 'Kumbh Sans', sans-serif;
  font-weight: 500;
  font-size: 14px;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
/* Below this the primary nav collapses into the burger menu. */
@media (max-width: 1180px) {
  .nav { display: none; }
  .header__rule { display: none; }
  .burger { display: grid; }
  .header__inner { justify-content: space-between; }
  .header__cta { margin-left: auto; }
  .hero--home .hero__foot { grid-template-columns: 1fr; }
  .hero--home .hero__lead { margin-top: 0; }
}

@media (max-width: 900px) {
  .gridlines { display: none; }
  .header__cta { padding: 11px 16px; min-height: 42px; font-size: 13px; }
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .footer__grid { grid-template-columns: 1fr; }
}