/* ==========================================================================
   Zeki Talent Market — Landing page styles
   Mobile-first. Base styles target small screens; media queries scale up.
   Sizing is fluid (clamp) so type and space scale with the viewport.
   ========================================================================== */

/* --- Design tokens --------------------------------------------------------- */
:root {
  /* Brand color — pulled from the design files */
  --color-navy: #2d4c7c;          /* hero band */
  --color-navy-deep: #061d41;     /* menu / footer / deepest */
  --color-navy-mid: #5560a2;      /* accent navy */
  --color-page: #f1f1f1;          /* light page background */
  --color-surface: #ffffff;       /* cards / panels */
  --color-ink: #131517;           /* near-black text on light */
  --color-ink-muted: #4c5055;     /* secondary text on light */
  --color-cyan: #00bbed;          /* bright accent (CTA / icon) */
  --color-cyan-wash: #e6f8fd;     /* pale cyan card-hover wash */
  --color-line: rgba(255 255 255 / 20%); /* hairline on navy */
  --color-border: #e8e8e8;        /* hairline / card border on light */
  --color-link: #402778;          /* purple links (footer legal) */

  /* Semantic aliases (used throughout the UI) */
  --color-bg: var(--color-page);
  --color-text: var(--color-ink);
  --color-text-muted: var(--color-ink-muted);
  --color-primary: var(--color-cyan);
  --color-on-primary: #ffffff;
  --color-error: #c0362c;

  /* Typography — Source Serif for display, Source Sans for UI/body */
  --font-serif: "Source Serif 4", "Source Serif Pro", georgia, "Times New Roman", serif;
  --font-sans: "Source Sans 3", "Source Sans Pro", system-ui, -apple-system, "Segoe UI", roboto, helvetica, arial, sans-serif;
  --lh-base: 1.6;
  --lh-tight: 1.1;

  /* Fluid type scale: clamp(min, preferred, max) */
  --fs-sm: clamp(0.8rem, 0.75rem + 0.2vw, 0.9rem);
  --fs-base: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  --fs-lg: clamp(1.15rem, 1.05rem + 0.5vw, 1.375rem);
  --fs-xl: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
  --fs-2xl: clamp(2.25rem, 1.6rem + 3vw, 4rem);

  /* Fluid spacing scale */
  --space-1: clamp(0.4rem, 0.35rem + 0.2vw, 0.5rem);
  --space-2: clamp(0.75rem, 0.65rem + 0.4vw, 1rem);
  --space-3: clamp(1rem, 0.8rem + 0.8vw, 1.5rem);
  --space-4: clamp(1.5rem, 1.1rem + 1.4vw, 2.5rem);
  --space-5: clamp(2.25rem, 1.6rem + 2.4vw, 4rem);
  --space-6: clamp(3rem, 2rem + 4vw, 6rem);

  /* Layout — one shared content width + gutter for every section. On desktop
     the gutter is --space-3 (maxes at 24px each side), so the 78rem outer cap
     lands the content box (cards, CTA, footer, etc.) at exactly 1200px. */
  --container-max: 78rem;
  --gutter: clamp(1.5rem, 1rem + 2.5vw, 2.5rem);
  --radius: 10px;
  --focus-ring: 3px solid var(--color-cyan);
}

/* --- Reset / base ---------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: var(--lh-tight);
  margin: 0 0 var(--space-2);
}

p {
  margin: 0 0 var(--space-2);
}

a {
  color: inherit;
}

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

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Visible focus for keyboard users on every interactive element */
:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

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

/* --- Animate on scroll -----------------------------------------------------
   Elements tagged [data-aos] start faded + nudged down, then ease into place
   when JS adds .aos-in (via IntersectionObserver). Stagger with
   [data-aos-delay="<ms>"]. The .js guard means no-JS users see content as-is. */
.js [data-aos] {
  opacity: 0;
  transform: translateY(2.5rem);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--aos-delay, 0ms);
  will-change: opacity, transform;
}

.js [data-aos].aos-in {
  opacity: 1;
  transform: none;
}

/* Reduced-motion: reveal instantly, no movement (the global rule above already
   zeroes the duration; this also clears the hidden start state immediately). */
@media (prefers-reduced-motion: reduce) {
  .js [data-aos] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --- Utilities ------------------------------------------------------------- */

/* Shared content width + gutter. Every section (nav, hero, demo, cards) aligns
   to these edges so the layout stays consistent across the page. */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute;
  left: var(--space-2);
  top: -3rem;
  z-index: 1000;
  background: var(--color-primary);
  color: var(--color-on-primary);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius);
  text-decoration: none;
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: var(--space-1);
}

/* Screen-reader-only text */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Holds reusable <symbol> defs out of flow without affecting layout. */
.svg-sprite {
  position: absolute;
}

/* --- Buttons (pills, matching the design) ---------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  font: inherit;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  text-align: center;
  padding: 0.7em 1.4em;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Outline pill — the only button style in the design. Reads in white on navy. */
.btn--ghost {
  background-color: transparent;
  color: currentcolor;
  border-color: rgba(255 255 255 / 40%);
  border-radius: 16px;
}

.btn--ghost:hover {
  border-color: #ffffff;
}

/* Dark outline pill — for use on the light page (e.g. form submit). */
.btn--dark {
  background-color: transparent;
  color: var(--color-ink);
  border-color: rgba(19 21 23 / 30%);
}

.btn--dark:hover {
  border-color: var(--color-ink);
}

/* Animatable angle for the conic gradient so it can slowly rotate. */
@property --btn-angle {
  syntax: "<angle>";
  initial-value: 90deg;
  inherits: false;
}

/* Solid navy button with a trailing arrow (hero CTAs). On hover a chunky
   prismatic gradient border animates in around it — only the border, never
   the fill. Padding matches the design (~45px sides, ~16px top/bottom). */
.btn--navy {
  position: relative;
  justify-content: center;
  gap: 0.75rem;
  padding: 1rem 2.75rem;
  border-radius: 16px;
  border: 0;
  background-color: var(--color-navy-deep);
  color: #ffffff;
  box-shadow: 0 0 0 0 rgba(78 133 217 / 0%);
  transition: box-shadow 0.25s ease;
}

/* Blue glow lights up on hover/focus alongside the gradient ring
   (Figma drop shadow: X0 Y0, blur 24, spread 0, #4E85D9). */
.btn--navy:hover,
.btn--navy:focus-visible {
  box-shadow: 0 0 24px 0 #4e85d9;
}

/* The 4px gradient frame sits just OUTSIDE the button (inset -4px), so on
   hover the button gains a chunky border without shrinking its fill — exactly
   as in the design. The mask shows only the 4px ring. */
.btn--navy::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 20px; /* button radius (16) + 4px ring */
  padding: 4px;
  background: conic-gradient(
    from var(--btn-angle),
    #2d4c7c 0deg,
    #bc67ff 99deg,
    #3f56e0 147deg,
    #44cbff 221deg,
    #2d4c7c 360deg
  );

  /* Mask keeps only the padding ring visible → a gradient border. The
     -webkit- prefixes are required for Safari, so the vendor-prefix lint
     rule is disabled here intentionally. */
  /* stylelint-disable property-no-vendor-prefix */
  -webkit-mask:
    linear-gradient(#000000 0 0) content-box,
    linear-gradient(#000000 0 0);
  -webkit-mask-composite: xor;
  /* stylelint-enable property-no-vendor-prefix */
  mask:
    linear-gradient(#000000 0 0) content-box,
    linear-gradient(#000000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.btn--navy:hover::before,
.btn--navy:focus-visible::before {
  opacity: 1;
  animation: btn-gradient-spin 4s linear infinite;
}

@keyframes btn-gradient-spin {
  to { --btn-angle: 450deg; }
}

.btn--navy .btn__arrow {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn--navy:hover .btn__arrow,
.btn--navy:focus-visible .btn__arrow {
  transform: translateX(0.25rem);
}

@media (prefers-reduced-motion: reduce) {
  .btn--navy::before {
    animation: none;
  }

  .btn--navy .btn__arrow {
    transition: none;
  }
}

/* --- Header / nav ---------------------------------------------------------- */

/* The header sits on the navy hero, so its contents are white. */
.site-header {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 100;
  color: #ffffff;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);

  /* Vertical breathing room; horizontal alignment comes from .container's
     shared gutter so the nav lines up with the hero, demo and cards. */
  padding-block: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);
}

.logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

.logo__mark {
  display: block;
  width: clamp(5.5rem, 4.5rem + 4vw, 7.5rem);

  /* Outer <svg> references the #zeki-logo symbol (viewBox 81×56) via <use>, so
     it carries no viewBox of its own — set the aspect ratio explicitly so the
     height resolves from the fluid width. */
  aspect-ratio: 81 / 56;
  height: auto;
}

/* Hamburger button (mobile only) — morphs to an X when the menu is open.
   Sits above the overlay so it stays clickable as the close control. */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
  z-index: 300;
}

.nav-toggle__box {
  position: relative;
  display: block;
  width: 1.5rem;
  height: 1rem;
}

.nav-toggle__bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background-color: currentcolor;
  border-radius: 1px;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.2s ease, width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Resting hamburger: top, middle, and a shorter bottom bar (matches design). */
.nav-toggle__bar--top {
  top: 0;
}

.nav-toggle__bar--mid {
  top: 50%;
  transform: translateY(-50%);
}

.nav-toggle__bar--bot {
  bottom: 0;
  width: 75%;
}

/* Open state: top + bottom rotate into an X, middle fades out. */
.nav-toggle[aria-expanded="true"] .nav-toggle__bar--top {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar--mid {
  opacity: 0;
  transform: translateY(-50%) scaleX(0);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar--bot {
  bottom: 50%;
  width: 100%;
  transform: translateY(50%) rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
  .nav-toggle__bar {
    transition: opacity 0.2s ease;
  }
}

/* Desktop pill nav — hidden on mobile, shown at the tablet breakpoint */
.primary-nav {
  display: none;
}

.primary-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* --- Mobile overlay menu --------------------------------------------------- */

/*
 * The panel expands from the top-right corner (where the hamburger lives).
 * We animate `clip-path` from a tiny circle at that corner out to a full
 * rectangle — square edges throughout, no border-radius flicker.
 */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  background-color: var(--color-navy-deep);
  color: #ffffff;

  /* On very short viewports the content can exceed the height; allow scroll
     so the links stay reachable (the decoration shrinks to 0 first). */
  overflow-y: auto;

  /* Closed state: collapsed to a point in the top-right corner. */
  clip-path: circle(0% at 100% 0%);
  visibility: hidden;
  transition: clip-path 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.45s;
}

.mobile-menu.is-open {
  /* Open state: circle large enough to cover the whole viewport. */
  clip-path: circle(150% at 100% 0%);
  visibility: visible;
  transition: clip-path 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0s;
}

/* The contents fade/slide in just after the panel begins opening.
   The title leads, then each list item staggers in one after another. */
.mobile-menu__title,
.mobile-menu__list > li {
  opacity: 0;
  transform: translateY(0.75rem);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.mobile-menu.is-open .mobile-menu__title,
.mobile-menu.is-open .mobile-menu__list > li {
  opacity: 1;
  transform: none;
}

/* Stagger: title first, then each item a beat later. */
.mobile-menu.is-open .mobile-menu__title {
  transition-delay: 0.18s;
}

.mobile-menu.is-open .mobile-menu__list > li:nth-child(1) {
  transition-delay: 0.3s;
}

.mobile-menu.is-open .mobile-menu__list > li:nth-child(2) {
  transition-delay: 0.4s;
}

.mobile-menu.is-open .mobile-menu__list > li:nth-child(3) {
  transition-delay: 0.5s;
}

.mobile-menu.is-open .mobile-menu__list > li:nth-child(4) {
  transition-delay: 0.6s;
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu,
  .mobile-menu.is-open {
    transition: visibility 0s;
  }

  .mobile-menu__title,
  .mobile-menu__list > li {
    transition: none;
  }
}

/* Spacer matching the header height so the title sits below the toggle. */
.mobile-menu__bar {
  min-height: clamp(4rem, 3rem + 3vw, 5.5rem);
}

.mobile-menu__body {
  /* Takes all available space and never shrinks, so the links stay fully
     visible; the decoration below it gets only the leftover room. */
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;

  /* Match the design's ~24px horizontal inset for the menu contents. */
  padding-inline: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);
}

/* Geometric decoration pinned to the bottom of the menu, full width. It takes
   only the space left under the links and shrinks on short viewports, so it
   can never overlap the menu items. */
.mobile-menu__decoration {
  flex: 0 1 auto;
  min-height: 0;
  width: 100%;
  object-fit: cover;
  object-position: center top;

  /* Slides up into place when the menu opens. */
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.mobile-menu.is-open .mobile-menu__decoration {
  opacity: 1;
  transform: none;
  transition-delay: 0.4s;
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu__decoration {
    transition: none;
  }
}

.mobile-menu__title {
  /* The design renders "Menu" in the sans UI face, not the serif,
     at roughly 32px (cap height ~21px in the mock-up). */
  font-family: var(--font-sans);
  font-size: clamp(2rem, 1.7rem + 1vw, 2.25rem);
  font-weight: 400;
  text-align: center;
  margin: 0;
  padding-block: var(--space-5);
}

.mobile-menu__list {
  margin-block-start: auto;
}

.mobile-menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);

  /* No inline padding: the text's left edge aligns with the separator,
     and the icon sits at the body's right inset (matching the design). */
  padding-block: var(--space-4);
  font-size: 1.3125rem; /* 21px */
  color: inherit;
  text-decoration: none;
  border-block-start: 1px solid var(--color-line);
  -webkit-tap-highlight-color: transparent;

  /* Links rest at full white. */
  opacity: 1;
  transition: opacity 0.25s ease;
}

/* Spotlight effect: when a link is hovered or keyboard-focused, dim the
   others. Gated with :has() so it only fires for genuine hover/keyboard
   focus — not for the programmatic focus we set when the menu opens. */
.mobile-menu__list:has(.mobile-menu__link:hover) .mobile-menu__link,
.mobile-menu__list:has(.mobile-menu__link:focus-visible) .mobile-menu__link {
  opacity: 0.45;
}

/* The hovered/focused link stays full white. Selectors mirror the dim rule's
   specificity (the :has() pseudo-class) and add :hover/:focus-visible so they
   win the cascade. */
.mobile-menu__list:has(.mobile-menu__link:hover) .mobile-menu__link:hover,
.mobile-menu__list:has(.mobile-menu__link:focus-visible) .mobile-menu__link:focus-visible {
  opacity: 1;
}

.mobile-menu__list li:first-child .mobile-menu__link {
  border-block-start: 0;
}

.mobile-menu__link svg {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
}

/* Press: the icon does a quick scale pulse. */
.mobile-menu__link:active svg {
  animation: icon-pulse 0.25s ease;
}

@keyframes icon-pulse {
  0% { transform: scale(1); }
  40% { transform: scale(0.82); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu__link {
    transition: none;
  }

  .mobile-menu__link:active svg {
    animation: none;
  }
}

/* --- Hero + demo backdrop --------------------------------------------------- */

/* The prismatic artwork lives on the shared wrapper so it extends down behind
   the demo card and fades out below it — matching the design. The wide artwork
   is zoomed so its navy cone sits behind the logo, nav and buttons; mobile
   (portrait) needs a much larger zoom, scaled back at the breakpoint.
   Base is the off-white page colour so it blends into the rest of the page. */
.hero-wrap {
  position: relative;
  isolation: isolate;
  background-color: var(--color-page);
  background-image: url("../assets/hero-bg.svg");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 280% auto;
}

/* --- Hero ------------------------------------------------------------------ */
.hero {
  color: #ffffff;
  text-align: center;

  /* Top padding clears the floating header (~logo height + its padding) AND
     adds a clear gap to the icon. */
  padding-block: clamp(8rem, 6rem + 9vw, 13rem) 0;
}

.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Seed-of-life emblem above the eyebrow — 48px mobile, 64px desktop. */
.hero__icon {
  width: clamp(3rem, 2.2rem + 3.4vw, 4rem);
  height: auto;
  margin-bottom: clamp(1rem, 0.6rem + 1.6vw, 1.75rem);
}

/* Spirograph: a diamond + 4 circles, all centred (transforms about 32,32).
   Each circle's path is drawn centred; a translate places it at its
   top/bottom/left/right slot (±14.27 units from centre).

   The motion is a 4-beat loop — each beat is "hold, then a quick swap":
     Beat 1: top & bottom swap places;  diamond turns −90° (CCW)
     Beat 2: left & right swap places;  diamond turns −90° (now −180°)
     Beat 3: top & bottom swap back;    diamond turns −90° (now −270°)
     Beat 4: left & right swap back;    diamond turns −90° (now −360°)
   After 4 beats every circle is home and the diamond has done a full turn, so
   the loop seams cleanly. Each circle holds its position outside its own beats.

   Within each 25% beat: hold for the first ~10%, then the quick move — that's
   the pause-then-motion rhythm. */
.spiro__diamond {
  transform-box: view-box;
  transform-origin: 32px 32px;
  animation: spiro-diamond 12s ease-in-out infinite;
}

.spiro__circle {
  transform-box: view-box;
  transform-origin: 32px 32px;
}

.spiro__circle--top    { animation: spiro-top 12s ease-in-out infinite; }
.spiro__circle--bottom { animation: spiro-bottom 12s ease-in-out infinite; }
.spiro__circle--left   { animation: spiro-left 12s ease-in-out infinite; }
.spiro__circle--right  { animation: spiro-right 12s ease-in-out infinite; }

/* Diamond: a −90° step on each beat, holding between. */
@keyframes spiro-diamond {
  0%,  10%        { transform: rotate(0deg); }
  22%, 35%        { transform: rotate(-90deg); }
  47%, 60%        { transform: rotate(-180deg); }
  72%, 85%        { transform: rotate(-270deg); }
  97%, 100%       { transform: rotate(-360deg); }
}

/* Top: home (up) → beat 1 down → hold → beat 3 back up. */
@keyframes spiro-top {
  0%,  10%        { transform: translateY(-14.27px); } /* home */
  22%, 60%        { transform: translateY(14.27px); }  /* swapped to bottom */
  72%, 100%       { transform: translateY(-14.27px); } /* back home */
}

/* Bottom: home (down) → beat 1 up → hold → beat 3 back down. */
@keyframes spiro-bottom {
  0%,  10%        { transform: translateY(14.27px); }
  22%, 60%        { transform: translateY(-14.27px); }
  72%, 100%       { transform: translateY(14.27px); }
}

/* Left: home (left), holds through beat 1 → beat 2 right → hold → beat 4 back. */
@keyframes spiro-left {
  0%,  35%        { transform: translateX(-14.27px); }
  47%, 85%        { transform: translateX(14.27px); }  /* swapped to right */
  97%, 100%       { transform: translateX(-14.27px); } /* back home */
}

/* Right: home (right), holds through beat 1 → beat 2 left → hold → beat 4 back. */
@keyframes spiro-right {
  0%,  35%        { transform: translateX(14.27px); }
  47%, 85%        { transform: translateX(-14.27px); }
  97%, 100%       { transform: translateX(14.27px); }
}

@media (prefers-reduced-motion: reduce) {
  .spiro__diamond,
  .spiro__circle {
    animation: none;
  }

  .spiro__circle--top    { transform: translateY(-14.27px); }
  .spiro__circle--bottom { transform: translateY(14.27px); }
  .spiro__circle--left   { transform: translateX(-14.27px); }
  .spiro__circle--right  { transform: translateX(14.27px); }
}

/* "Welcome to" — Source Sans, 14px → 32px, line-height 100%. */
.hero__eyebrow {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(0.875rem, 0.4rem + 1.9vw, 2rem);
  line-height: 1;
  margin: 0 0 clamp(0.5rem, 0.2rem + 1.2vw, 1rem);
}

/* H1 — Source Serif, 41px → 95.2px, line-height ~110%→100%. */
.hero__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2.5625rem, 0.9rem + 6.7vw, 5.95rem);
  line-height: 1.05;
  margin: 0;
}

/* Paragraph — Source Sans, 18px → 24px, line-height 150%.
   Wide enough that "...venture-backed scale-ups" stays on the first line. */
.hero__subtitle {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(1.125rem, 0.95rem + 0.75vw, 1.5rem);
  line-height: 1.5;
  max-width: 46rem;
  margin: clamp(1rem, 0.6rem + 1.6vw, 1.75rem) auto 0;
}

/* Mobile: stacked, full-width buttons. */
.hero__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
  width: 100%;
  margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

/* Hero buttons — Source Sans, 18px, line-height 150%. */
.hero__actions .btn {
  font-size: 1.125rem;
  line-height: 1.5;
}

/* --- Product demo ---------------------------------------------------------- */

/* The rounded card holds the looping demo video. It sits on the shared
   prismatic backdrop with a generous gap below the hero buttons.

   The bottom padding is the gap to the cards section. Narrow screens take a
   flat 56px: the video card and the audience cards are similar-looking blocks
   stacked in one column and the backdrop ends between them, so the fluid
   formula's 35px read as one continuous run. 56px is comfortably clear of the
   16px inter-card gap, keeping the section break the dominant division. */
.demo {
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) 3.5rem;
}

/* From 48rem up, hand the bottom gap back to the fluid formula, which ramps
   48px → 72px across tablet and desktop. */
@media (width >= 48rem) {
  .demo {
    padding-block-end: clamp(2.1875rem, 1.32rem + 3.53vw, 4.5rem);
  }
}

.demo__card {
  position: relative;
  width: 100%;
  margin: 0; /* reset the default <figure> margin so it aligns with the grid */
  border-radius: clamp(16px, 0.5rem + 1vw, 24px);
  overflow: hidden;
  background-color: #ffffff;
  box-shadow: 0 30px 60px -20px rgba(6 29 65 / 25%);
}

.demo__video {
  display: block;
  width: 100%;
  height: auto;

  /* Matches the design's card ratio (1216 × 786 ≈ 1.55), taller than 16:9. */
  aspect-ratio: 1216 / 786;
  object-fit: cover;
}

/* Pause/play control — appears on hover/focus, styled to match the UI. */
.demo__toggle {
  position: absolute;
  inset-block-start: var(--space-3);
  inset-inline-end: var(--space-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  color: var(--color-navy-deep);
  background-color: rgba(255 255 255 / 85%);
  border: 1px solid rgba(6 29 65 / 10%);
  border-radius: 999px;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-0.25rem);
  transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
  backdrop-filter: blur(4px);
}

.demo__card:hover .demo__toggle,
.demo__toggle:focus-visible {
  opacity: 1;
  transform: none;
}

.demo__toggle:hover {
  background-color: #ffffff;
}

.demo__icon {
  width: 1.25rem;
  height: 1.25rem;
}

/* Show the pause icon while playing, the play icon while paused. */
.demo__icon--play {
  display: none;
}

.demo.is-paused .demo__icon--pause {
  display: none;
}

.demo.is-paused .demo__icon--play {
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .demo__toggle {
    transition: none;
  }
}

/* --- Audience cards -------------------------------------------------------- */
.cards {
  /* No top padding — the gap to the video above is set by .demo's bottom
     padding (35px → 72px). No bottom padding either: the CTA card below sits
     one inter-card gap away via its own margin, so the cards-to-CTA spacing
     matches the gap between the two cards. */
  padding-block: 0;
}

.cards__grid {
  display: grid;
  gap: clamp(1rem, 0.5rem + 2vw, 2rem);
}

/* The whole card is one link. Default: white with a subtle border; on hover a
   cyan wash, a lifting shadow, and the footer link swaps + animates. */
.card {
  display: flex;
  flex-direction: column;
  position: relative;
  isolation: isolate;

  /* Tall, portrait-ish proportions matching the design (~592 × 744). White
     cards on the #f1f1f1 page — the contrast carries them, no border. */
  min-height: clamp(28rem, 18rem + 28vw, 40rem);
  border-radius: clamp(20px, 0.5rem + 1.5vw, 32px);
  background-color: var(--color-surface);
  color: var(--color-ink);
  text-decoration: none;
  overflow: hidden;
  transition: box-shadow 0.35s ease, transform 0.35s ease;
}

/* Cyan gradient wash that fades in from the top on hover. */
.card::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  height: 50%;
  z-index: -1;
  background-image: linear-gradient(to bottom, #e6f8fd, rgba(230 248 253 / 0%));
  opacity: 0;
  transition: opacity 0.35s ease;
}

.card:hover,
.card:focus-visible {
  box-shadow: 0 28px 48px -12px rgba(6 29 65 / 18%);
  transform: translateY(-2px);
}

.card:hover::before,
.card:focus-visible::before {
  opacity: 1;
}

/* Illustration sits high in the card and flex-grows, so a big open gap forms
   between it and the content below — matching the design's tall layout. */
.card__media {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;

  /* 24px top/bottom; sides clamp 32px (mobile) → 136px (desktop). The
     illustration fills the remaining width on desktop, halved on mobile. */
  padding: 1.5rem clamp(2rem, -0.5rem + 7vw, 8.5rem);
}

.card__illustration {
  width: 50%;
  height: auto;
}

/* Desktop: the illustration fills the available width. */
@media (width >= 48rem) {
  .card__illustration {
    width: 100%;
  }
}

/* Let the animating shapes move freely without the SVG box clipping them. */
.card__illustration--hire {
  overflow: visible;
}

/* Both card illustrations have bespoke hover animations (below); no generic
   illustration hover transform is applied. */

/* --- Hire-card "smart animate": on hover BOTH circles travel toward the centre
   together and meet (touch, not overlap) behind the diamond, which rotates its
   pinwheel 90° in place. Each circle moves the same distance along the diagonal
   between them, so the motion converges on the centre rather than one sliding
   into the other. Easing approximates the design's spring (mass 1, stiffness
   711, damping 40) — snappy with a light overshoot. */
.hire-circle,
.hire-diamond {
  transition: transform 0.5s cubic-bezier(0.34, 1.32, 0.5, 1);
}

.hire-diamond {
  transform-box: fill-box;
  transform-origin: center;
}

/* Left circle (~80,191) moves up-right; right circle (~240,80) moves down-left.
   Equal, opposite travel along their connecting diagonal → they meet at centre. */
.card:hover .hire-circle--left,
.card:focus-visible .hire-circle--left {
  transform: translate(15px, -10px);
}

.card:hover .hire-circle--right,
.card:focus-visible .hire-circle--right {
  transform: translate(-15px, 10px);
}

/* The diamond stays centred and rotates its pinwheel 90°. */
.card:hover .hire-diamond,
.card:focus-visible .hire-diamond {
  transform: rotate(90deg);
}

/* --- Role-card animation: two oval sizes (fat: cyan/purple, thin: blue/dark),
   each rotating about its own centre. At rest they sit at shallow scattered
   angles (the orb, icon.svg); on hover they pair up at ±45° to form the
   symmetric pinwheel X (icon(2).svg): cyan+dark on one arm, purple+blue on the
   other, so each diagonal carries one fat and one thin oval. */
.role-petal {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.6s cubic-bezier(0.34, 1.32, 0.5, 1);
}

/* Resting orb — shallow, scattered. */
.role-petal--1 { transform: rotate(60deg); }   /* cyan, fat */
.role-petal--2 { transform: rotate(30deg); }   /* purple, fat */
.role-petal--3 { transform: rotate(-15deg); }  /* blue, thin */
.role-petal--4 { transform: rotate(8deg); }    /* dark, thin */

/* Hover pinwheel — paired at ±45° (one fat + one thin per arm). */
.card:hover .role-petal--1,
.card:focus-visible .role-petal--1 {
  transform: rotate(45deg);
}

.card:hover .role-petal--2,
.card:focus-visible .role-petal--2 {
  transform: rotate(-45deg);
}

.card:hover .role-petal--3,
.card:focus-visible .role-petal--3 {
  transform: rotate(-45deg);
}

.card:hover .role-petal--4,
.card:focus-visible .role-petal--4 {
  transform: rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
  .hire-circle,
  .hire-diamond,
  .role-petal {
    transition: none;
  }
}

/* Title + paragraph block, in the lower part of the card. */
.card__body {
  padding: 0 clamp(2rem, 1.2rem + 3vw, 3rem) clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

/* Heading — 24px → 32px, weight 600, line-height 1.5. */
.card__title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2rem);
  line-height: 1.5;
  margin: 0 0 clamp(0.5rem, 0.3rem + 0.8vw, 1rem);
}

/* Paragraph — 16px → 20px, weight 400, line-height 1.4. */
.card__text {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
  line-height: 1.4;
  color: var(--color-ink-muted);
  margin: 0;
}

/* Footer link band, separated by a full-width hairline. */
.card__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: clamp(1.25rem, 0.9rem + 1.4vw, 1.75rem) clamp(2rem, 1.2rem + 3vw, 3rem);
  border-block-start: 1px solid var(--color-border);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
  line-height: 1.5;
  color: var(--color-ink);
}

/* Icon stays fixed in place on hover. */
.card__link-icon {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
}

/* On hover the label slides to the right; the icon and wording stay the same. */
.card__link-text {
  display: inline-block;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.card:hover .card__link-text,
.card:focus-visible .card__link-text {
  transform: translateX(0.5rem);
}

@media (prefers-reduced-motion: reduce) {
  .card,
  .card::before,
  .card__illustration,
  .card__link-icon,
  .card__link-text {
    transition: none;
  }
}

/* --- CTA banner ------------------------------------------------------------
   A full-width white card matching the audience cards above (same surface,
   radius). The gap to the cards is the inter-card gap; bottom padding spaces
   the footer. */
.cta {
  padding-block: 0 clamp(2.5rem, 1.5rem + 4vw, 5rem);
  margin-block-start: clamp(1rem, 0.5rem + 2vw, 2rem);
}

.cta-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  background-color: var(--color-surface);
  border-radius: clamp(20px, 0.5rem + 1.5vw, 32px);
  padding: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem) clamp(2rem, 1.2rem + 3vw, 3rem);
}

.cta-card__text {
  flex: 1 1 18rem;
  margin: 0;
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
  line-height: 1.4;
  color: var(--color-ink);
}

/* The icon stays put; the pill is the standard dark outline button. */
.cta-card__btn {
  flex: none;
  gap: 0.5rem;
  font-weight: 700;
  white-space: nowrap;
  border-radius: 16px;
}

.cta-card__btn:hover {
  background-color: #e8e8e8;
  border-color: #e8e8e8;
}

.cta-card__icon {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
}

/* ==========================================================================
   Secondary page shell
   --------------------------------------------------------------------------
   The landing page's header/footer are reused verbatim on secondary pages
   (privacy policy, form pages, etc.). Those pages swap the hero for a compact
   navy banner (.page-header) and drop their content into .page-body.

   To build a new secondary page: copy privacy-policy.html, keep everything
   from <body> down to the end of .page-header, replace the <main> content,
   and keep the footer. Only .legal-* styles are policy-specific.
   ========================================================================== */

/* Compact navy banner standing in for the hero. Uses the same prismatic
   artwork, cropped tight so the header sits on the navy cone. */
.page-header {
  position: relative;
  isolation: isolate;
  color: #ffffff;
  text-align: center;
  background-color: var(--color-navy-deep);
  background-image: url("../assets/hero-bg.svg");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 280% auto;

  /* Top padding clears the absolutely-positioned site header. */
  padding-block: clamp(7rem, 5.5rem + 7vw, 11rem) clamp(2.5rem, 2rem + 3vw, 4.5rem);
}

.page-header__eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1;
  margin: 0 0 var(--space-2);
  opacity: 0.85;
}

.page-header__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2.25rem, 1.3rem + 4vw, 4rem);
  line-height: 1.05;
  margin: 0;
}

.page-header__meta {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-sm);
  opacity: 0.85;
}

/* Content well for secondary pages. Sits on the off-white page background. */
.page-body {
  padding-block: clamp(2.5rem, 1.8rem + 3vw, 4.5rem) clamp(3rem, 2rem + 4vw, 6rem);
}

/* White panel holding the page content, matching the cards' surface + radius. */
.page-panel {
  background-color: var(--color-surface);
  border-radius: clamp(20px, 0.5rem + 1.5vw, 32px);
  padding: clamp(1.75rem, 1.2rem + 2.4vw, 3.5rem) clamp(1.5rem, 1rem + 2.4vw, 3.5rem);
}

@media (width >= 48rem) {
  .page-header {
    background-size: 120% auto;
  }
}

/* --- Legal / long-form document -------------------------------------------
   Readable measure, clear heading hierarchy, and numbered sections whose
   numbers match the source document (its cross-references cite them). */

.legal {
  /* ~72 characters at the body size — comfortable for long-form reading. */
  max-width: 54rem;
  margin-inline: auto;
}

.legal__intro > p:last-child {
  margin-bottom: 0;
}

.legal p {
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--color-ink-muted);
}

.legal a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.15s ease;
}

.legal a:hover,
.legal a:focus-visible {
  color: var(--color-ink);
}

/* Contents list — quick jumps to each numbered section. */
.legal-toc {
  margin-block: var(--space-3) var(--space-5);
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem) clamp(1.25rem, 1rem + 1.5vw, 2rem);
  background-color: var(--color-page);
  border-radius: var(--radius);
}

.legal-toc__title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink);
  margin: 0 0 var(--space-2);
}

/* Counter mirrors the section numbering so the two can never drift apart. */
.legal-toc__list {
  counter-reset: legal-toc;
  display: grid;
  gap: 0.5rem;
}

@media (width >= 48rem) {
  .legal-toc__list {
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--space-4);
  }
}

.legal-toc__list li {
  counter-increment: legal-toc;
}

.legal-toc__list a {
  display: block;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--color-ink);
  text-decoration: none;
}

.legal-toc__list a::before {
  content: counter(legal-toc) ". ";
  color: var(--color-ink-muted);
}

.legal-toc__list a:hover,
.legal-toc__list a:focus-visible {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Numbered top-level sections. The counter on .legal-body drives both the
   heading numbers and the contents list above. */
.legal-body {
  counter-reset: legal-section;
}

.legal-section {
  counter-increment: legal-section;
  padding-block-start: var(--space-4);
}

.legal-section + .legal-section {
  border-block-start: 1px solid var(--color-border);
}

.legal-section__title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
  line-height: 1.3;
  color: var(--color-ink);
  margin: 0 0 var(--space-2);

  /* Hanging number: the heading text wraps flush under itself, not under
     the number. */
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.6em;
}

.legal-section__title::before {
  content: counter(legal-section) ".";
  color: var(--color-cyan);
  font-variant-numeric: tabular-nums;
}

/* Sub-headings inside a section (the document's unnumbered titles). */
.legal-subtitle {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-lg);
  line-height: 1.4;
  color: var(--color-ink);
  margin: var(--space-3) 0 var(--space-2);
}

/* Bulleted lists. `ul` is list-style:none globally, so bullets are drawn. */
.legal-list {
  display: grid;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
}

.legal-list li {
  position: relative;
  padding-inline-start: 1.5rem;
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--color-ink-muted);
}

.legal-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0.25rem;
  inset-block-start: 0.7em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-cyan);
}

/* Nested list — smaller, hollow marker to distinguish the level. */
.legal-list .legal-list {
  margin-block: var(--space-2) 0;
  gap: var(--space-1);
}

.legal-list .legal-list li::before {
  background-color: transparent;
  border: 1.5px solid var(--color-ink-muted);
  width: 5px;
  height: 5px;
}

/* The defined-term lead-in on data-category bullets ("Identity Data …"). */
.legal-list b {
  color: var(--color-ink);
  font-weight: 600;
}

/* --- Processing-purposes table ---------------------------------------------
   A real <table> on desktop. On mobile it re-flows into stacked cards, with
   each cell labelled by its column header via a data-label attribute. */

.legal-table-wrap {
  margin-block: var(--space-3) var(--space-4);
}

.legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  line-height: 1.55;
  text-align: start;
}

.legal-table caption {
  text-align: start;
  font-size: var(--fs-sm);
  color: var(--color-ink-muted);
  margin-bottom: var(--space-2);
}

.legal-table th,
.legal-table td {
  text-align: start;
  vertical-align: top;
  padding: var(--space-2);
}

.legal-table thead th {
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--color-ink);
  background-color: var(--color-page);
  border-block-end: 2px solid var(--color-border);
}

.legal-table tbody th {
  font-weight: 600;
  color: var(--color-ink);
}

.legal-table tbody td {
  color: var(--color-ink-muted);
}

.legal-table tbody tr + tr th,
.legal-table tbody tr + tr td {
  border-block-start: 1px solid var(--color-border);
}

.legal-table p {
  margin: 0 0 0.5rem;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

.legal-table p:last-child {
  margin-bottom: 0;
}

/* Retention text reads as a footnote to the legal basis above it. */
.legal-table .legal-table__retention {
  display: block;
  margin-block-start: 0.5rem;
  padding-block-start: 0.5rem;
  border-block-start: 1px dashed var(--color-border);
  color: var(--color-ink-muted);
}

/* Mobile: stack each row as a labelled card. */
@media (width < 48rem) {
  .legal-table thead {
    /* Visually hidden but still announced for the data-label mapping below. */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .legal-table tbody tr {
    display: block;
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
  }

  .legal-table tbody tr + tr {
    margin-block-start: var(--space-2);
  }

  .legal-table tbody th,
  .legal-table tbody td {
    display: block;
    padding: 0;
    border: 0;
  }

  .legal-table tbody tr + tr th,
  .legal-table tbody tr + tr td {
    border-block-start: 0;
  }

  .legal-table tbody td {
    margin-block-start: var(--space-2);
  }

  /* Column header repeated inline so each stacked cell keeps its meaning. */
  .legal-table tbody td::before {
    content: attr(data-label);
    display: block;
    font-weight: 700;
    font-size: var(--fs-sm);
    color: var(--color-ink);
    margin-block-end: 0.25rem;
  }
}

/* Desktop: give the three columns sensible proportions. */
@media (width >= 48rem) {
  .legal-table col.legal-table__col--purpose { width: 32%; }
  .legal-table col.legal-table__col--data { width: 22%; }
  .legal-table col.legal-table__col--basis { width: 46%; }
}

/* Contact block at the foot of the policy. */
.legal-contact {
  display: grid;
  gap: var(--space-1);
  margin: 0 0 var(--space-3);
}

.legal-contact div {
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--color-ink-muted);
}

.legal-contact dt {
  font-weight: 600;
  color: var(--color-ink);
}

.legal-contact dd {
  margin: 0;
}

@media (width >= 30rem) {
  .legal-contact div {
    display: flex;
    gap: 0.5rem;
  }
}

/* --- Form page -------------------------------------------------------------
   Sits inside the secondary-page shell's .page-panel (see above). Used by the
   hire-talent enquiry page; the embed wrapper holds the HubSpot form. */

.form-intro {
  max-width: 40rem;
  margin: 0 auto clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);
  text-align: center;
}

.form-intro__title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem);
  line-height: 1.4;
  margin: 0 0 clamp(0.5rem, 0.3rem + 0.8vw, 0.75rem);
}

.form-intro__text {
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--color-ink-muted);
  margin: 0;
}

/* Constrains the HubSpot embed to a comfortable form measure. */
.form-embed {
  max-width: 40rem;
  margin-inline: auto;
}

/* Shown only if the HubSpot embed never renders — blocked script, no JS, or a
   network failure. Once the form is in the DOM the sibling selector hides this,
   so the two are never visible at once. */
.form-fallback {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--color-ink-muted);
  text-align: center;
}

#hubspot-form:not(:empty) + .form-fallback {
  display: none;
}

/* Closing note under the form. */
.form-note {
  max-width: 40rem;
  margin: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem) auto 0;
  padding-block-start: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border-block-start: 1px solid var(--color-border);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--color-ink-muted);
  text-align: center;
}

/* Copy awaiting final wording. Deliberately conspicuous — muted, italic and
   dashed-underlined — so placeholder text can't ship unnoticed. Remove the
   .is-placeholder class from an element once its real copy is in. */
.is-placeholder {
  font-style: italic;
  opacity: 0.75;
  text-decoration: underline dashed currentcolor 1px;
  text-underline-offset: 4px;
}

/* Dashed stand-in shown until the HubSpot embed replaces it. Delete this rule
   along with the markup once the real form is in. */
.form-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.5rem;
  min-height: clamp(16rem, 12rem + 12vw, 22rem);
  padding: var(--space-4) var(--space-3);
  border: 2px dashed var(--color-border);
  border-radius: var(--radius);
  color: var(--color-ink-muted);
  background-color: var(--color-page);
}

.form-placeholder__icon {
  width: 2.5rem;
  height: 2.5rem;
  color: var(--color-navy-mid);
}

.form-placeholder__title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-lg);
  color: var(--color-ink);
  margin: 0;
}

.form-placeholder__text {
  max-width: 26rem;
  font-size: var(--fs-base);
  line-height: 1.5;
  margin: 0;
}

/* --- Footer ----------------------------------------------------------------
   Sits on the off-white page; a hairline divides it from the CTA above. Logo
   on the left, legal links + copyright on the right (stacked on mobile). */
.site-footer {
  padding-block-end: clamp(2rem, 1.5rem + 2vw, 3rem);
}

/* The divider is drawn on the inner content box (inside the container gutter)
   so it lines up with the cards/CTA edges (~1200px) instead of spanning the
   full viewport. */
.site-footer__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  padding-block-start: clamp(2rem, 1.5rem + 2vw, 3rem);
}

.site-footer__inner::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 1px;
  background-color: var(--color-border);
}

.site-footer__logo {
  color: var(--color-ink);
}

.site-footer__meta {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 0.5rem + 1.5vw, 2rem);
  margin: 0;
  padding: 0;
}

.site-footer__links a,
.site-footer__consent {
  color: var(--color-link);
  font-size: var(--fs-base);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: currentcolor;
  transition: color 0.15s ease;
}

.site-footer__links a:hover,
.site-footer__links a:focus-visible,
.site-footer__consent:hover,
.site-footer__consent:focus-visible {
  color: var(--color-ink);
}

/* Strip UA button chrome so the consent trigger reads as a footer link. */
.site-footer__consent {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--fs-base);
  line-height: inherit;
  color: var(--color-link);
  cursor: pointer;
}

.site-footer__copy {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--color-ink-muted);
}

/* ==========================================================================
   Breakpoints — scale up from the mobile base
   ========================================================================== */

/* Tablet and up */
@media (width >= 48rem) {
  .nav-toggle {
    display: none;
  }

  /* The overlay menu is mobile-only; never show it on larger screens. */
  .mobile-menu {
    display: none !important;
  }

  .primary-nav {
    display: block;
  }

  .primary-nav__list {
    flex-direction: row;
    align-items: center;
    gap: var(--space-2);
  }

  /* Wider viewport: the artwork no longer needs heavy zoom for the cone to
     cover the content, so the colour shards can breathe at the edges. */
  .hero-wrap {
    background-size: 120% auto;
  }

  /* Desktop: side-by-side, sized to content (not full-width). */
  .hero__actions {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: auto;
  }

  .cards__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .site-footer__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  /* Links and copyright right-aligned beside the logo. */
  .site-footer__meta {
    align-items: flex-end;
  }

  .site-footer__links {
    justify-content: flex-end;
  }
}

/* Desktop and up */
@media (width >= 64rem) {
  :root {
    --fs-2xl: 3rem;
    --fs-xl: 2rem;
  }

  .container {
    padding-inline: var(--space-3);
  }
}