/* ============================================================
   Intel-led Consulting — site stylesheet
   ============================================================ */

/* ------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------ */
:root {
  /* --- Brand ramp -------------------------------------------
     #F3434F is the brand. It is a FILL colour only — never text
     on light. red-500 is the accessible text/border variant,
     red-100 is the large tinted surface. Same discipline
     relevont.com applies to its lime.                          */
  --red-100: #FDECEE;
  --red-200: #F9C3C8;
  --red-300: #F3434F;   /* BRAND */
  --red-400: #C42733;
  --red-500: #8E1B24;

  /* --- Neutrals --------------------------------------------- */
  --ink:        #1A1A1A;   /* text + dark bands (not pure black) */
  --ink-2:      #26262A;
  --paper:      #F2F2F2;   /* page background (brand light gray) */
  --white:      #FFFFFF;   /* cards only -> white reads as raised */
  --fade:       #5A5A5A;   /* secondary text on light */
  --fade-invert:#FFFFFFA6; /* secondary text on dark */

  /* --- Hairlines (ink at alpha, never gray) ------------------ */
  --line:        #1A1A1A14;
  --line-strong: #1A1A1A33;
  --line-invert: #FFFFFF1F;

  /* --- Radius scale (radius grows with surface size) --------- */
  --r-sm:   12px;
  --r-md:   18px;
  --r-lg:   28px;
  --r-pill: 999px;

  /* --- Type ------------------------------------------------- */
  --font-sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  /* Editorial accent: used ONLY for italic <em> inside headings.
     System serif, no webfont. Delete this token and the .t-h* em
     rule to remove the effect entirely.                        */
  --font-editorial: Georgia, 'Times New Roman', Times, serif;

  /* --- Motion (one easing, two durations) ------------------- */
  --ease: cubic-bezier(.32,.94,.6,1);
  --fast: .22s;
  --slow: .30s;

  /* --- Layout ----------------------------------------------- */
  --max:      1280px;
  --gutter:   clamp(16px, 3.4vw, 40px);
  --header-h: 108px;   /* nav pill bottom (~62px) plus the gap content keeps below it */
  --logo-h:   44px;   /* matches the nav pill height */
}

/* ------------------------------------------------------------
   2. BASE
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  background: var(--paper);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

.l-container { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.l-section   { padding-block: clamp(56px, 9vw, 120px); }
.l-section--tight { padding-block: clamp(40px, 6vw, 80px); }
.l-head { max-width: 780px; margin-bottom: clamp(32px, 5vw, 64px); }
.l-head .t-lead { margin-top: 20px; }

/* ------------------------------------------------------------
   3. TYPOGRAPHY
   ------------------------------------------------------------ */
.t-h1, .t-h2, .t-h3, .t-h4, .t-h5 {
  font-weight: 400;
  line-height: .95;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.t-h1 { font-size: clamp(2.75rem, 2.15rem + 2.35vw, 4.5rem);  line-height: .92; }
.t-h2 { font-size: clamp(2.25rem, 1.63rem + 2.35vw, 3.75rem); line-height: .94; }
.t-h3 { font-size: clamp(2rem,    1.75rem + 1.18vw, 2.75rem); }
.t-h4 { font-size: clamp(1.5rem,  1.19rem + 1.18vw, 2.25rem); line-height: 1.02; }
.t-h5 { font-size: clamp(1.25rem, 1.10rem + .59vw,  1.625rem); line-height: 1.1; }

/* The signature move: editorial serif italic inside a sans heading. */
.t-h1 em, .t-h2 em, .t-h3 em, .t-h4 em, .t-h5 em, .t-serif {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 400;
  font-size: 1.04em;
  letter-spacing: 0;
}

.t-lead {
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
  line-height: 1.5;
  color: var(--fade);
  max-width: 56ch;
}
.t-lead--invert { color: var(--fade-invert); }

.t-kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red-500);
}
.t-kicker--invert { color: var(--red-300); }

.t-body { color: var(--fade); max-width: 64ch; }
.t-body + .t-body { margin-top: 1em; }
.t-body--invert { color: var(--fade-invert); }

/* ------------------------------------------------------------
   4. BUTTONS (everything is a pill)
   ------------------------------------------------------------ */
.c-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .01em;
  white-space: nowrap;
  transition: background var(--fast) var(--ease),
              color      var(--fast) var(--ease),
              border-color var(--fast) var(--ease),
              transform  var(--fast) var(--ease);
}
.c-btn:hover { transform: translateY(-1px); }
.c-btn svg { flex: none; }

.c-btn--brand   { background: var(--red-300); color: #fff; }
.c-btn--brand:hover { background: var(--red-400); }

.c-btn--ink     { background: var(--ink); color: #fff; }
.c-btn--ink:hover { background: #000; }

.c-btn--ghost   { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.c-btn--ghost:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

/* on dark / imagery */
.c-btn--glass   { background: #FFFFFF1F; color: #fff; border-color: #FFFFFF3D; backdrop-filter: blur(6px); }
.c-btn--glass:hover { background: #fff; color: var(--ink); border-color: #fff; }

.c-btn--sm { height: 40px; padding: 0 16px; font-size: 13px; }

/* ------------------------------------------------------------
   5. NAVBAR — three independent floating pills, no bar
   ------------------------------------------------------------ */
.c-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 200;
  padding: 18px var(--gutter);
  background: transparent;         /* never a bar */
  pointer-events: none;
}
/* 1fr auto 1fr: the side columns are always equal, so the middle slot is
   centred on the screen whatever the logo and right-hand control measure.
   Desktop puts the link group there; on mobile the links are hidden and the
   CTA takes that slot, with the burger moving to the right column. */
.c-nav__inner {
  max-width: var(--max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}
.c-nav__logo   { justify-self: start; }
.c-nav__links  { justify-self: center; }
.c-nav__cta    { justify-self: end; }
.c-nav__burger { justify-self: end; }
.c-nav__inner > * { pointer-events: auto; }

/* --- logo: no pill, sized to match the pill height --- */
.c-nav__logo {
  display: inline-flex;
  align-items: center;
  flex: none;
}
.c-nav__logo img { height: var(--logo-h); width: auto; display: block; }
/* Two marks, explicit display on both so neither rule can win by accident.
   is-dark  = the coral mark, for light backgrounds (the default)
   is-light = the white-plate lockup, for dark surfaces and the coral band */
.c-nav__logo .is-light { display: none; }
.c-nav__logo .is-dark  { display: block; }
.c-nav.on-dark .c-nav__logo .is-light,
.c-nav.on-brand .c-nav__logo .is-light { display: block; }
.c-nav.on-dark .c-nav__logo .is-dark,
.c-nav.on-brand .c-nav__logo .is-dark  { display: none; }

/* --- link group pill --- */
.c-nav__links {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  border-radius: var(--r-pill);
  /* default: light background behind the nav */
  background: #FFFFFFEB;
  box-shadow: 0 0 0 1px #1A1A1A14;
  transition: background var(--slow) var(--ease),
              box-shadow var(--slow) var(--ease);
}
.c-nav__links a {
  padding: 8px 16px;
  border-radius: var(--r-pill);
  font-size: 14px;
  color: var(--ink);
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.c-nav__links a:hover { background: #1A1A1A12; }

/* over a dark section, or over the coral CTA band */
.c-nav.on-dark .c-nav__links,
.c-nav.on-brand .c-nav__links {
  background: #FFFFFF14;
  box-shadow: inset 0 0 0 1px #FFFFFF29;
}
.c-nav.on-dark .c-nav__links a,
.c-nav.on-brand .c-nav__links a { color: #fff; }
.c-nav.on-dark .c-nav__links a:hover,
.c-nav.on-brand .c-nav__links a:hover { background: #FFFFFF2E; }

/* the red CTA pill would disappear on coral — flip it to white there */
.c-nav.on-brand .c-nav__cta.c-btn--brand { background: #fff; color: var(--red-500); }
.c-nav.on-brand .c-nav__cta.c-btn--brand:hover { background: var(--ink); color: #fff; }

.c-nav__cta { display: inline-flex; border-radius: var(--r-pill); transition: box-shadow var(--slow) var(--ease); }

/* --- docked state (past the hero) ---
   No backdrop blur: 92% white + 1px hairline ring + soft far shadow. */
.c-nav.is-docked .c-nav__links { box-shadow: 0 0 0 1px #1A1A1A14, 0 12px 32px -18px #1A1A1A47; }
.c-nav.is-docked.on-dark .c-nav__links,
.c-nav.is-docked.on-brand .c-nav__links { box-shadow: inset 0 0 0 1px #FFFFFF29; }
.c-nav.is-docked .c-nav__cta { box-shadow: 0 12px 32px -18px #1A1A1A66; }

/* --- staggered entrance --- */
.c-nav__logo, .c-nav__links, .c-nav__cta {
  opacity: 0;
  transform: translateY(calc(-100% - 92px));
}
.c-nav.is-entered .c-nav__logo,
.c-nav.is-entered .c-nav__links,
.c-nav.is-entered .c-nav__cta {
  opacity: 1;
  transform: none;
  transition: transform .55s cubic-bezier(.22,1.1,.36,1), opacity .3s;
}
.c-nav.is-entered .c-nav__links { transition-delay: 80ms, 80ms; }
.c-nav.is-entered .c-nav__cta   { transition-delay: .16s, .16s; }

.c-nav__burger { display: none; }

/* ------------------------------------------------------------
   6. HERO — full-bleed video, square at the viewport edge,
      rounded where it lifts off the paper below
   ------------------------------------------------------------ */
.c-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding: calc(var(--header-h) + 24px) var(--gutter) clamp(32px, 6vh, 64px);
  background: var(--ink);                 /* no white flash before poster */
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  overflow: hidden;
  isolation: isolate;
}
.c-hero__media { position: absolute; inset: 0; z-index: -2; }
.c-hero__media video,
.c-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* Layered scrim — corner anchor + bottom fade + gentle vignette.
   Keeps the footage bright where nothing overlaps it. */
.c-hero__scrim {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(#1A1A1AAD 0%, #1A1A1A5C 12%, #1A1A1A0F 26%),
    radial-gradient(95% 110% at 0 100%, #1A1A1AE0 0%, #1A1A1A99 34%, #1A1A1A3D 58%, #1A1A1A0F 74%),
    linear-gradient(#1A1A1A1F 40%, #1A1A1A66 70%, #1A1A1AB8 100%),
    radial-gradient(130% 130% at 50% 45%, #1A1A1A14 55%, #1A1A1A66 100%);
}
.c-hero__inner { width: 100%; max-width: var(--max); margin-inline: auto; }
.c-hero__copy  { max-width: min(960px, 100%); }
/* line breaks come from <br> in the markup, as on the live site — no ch clamp */
.c-hero h1     { color: #fff; }
.c-hero .t-lead{ color: #FFFFFFC7; max-width: 800px; margin-top: 24px; }
.c-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* ------------------------------------------------------------
   7. SHOW — paper stage holding one dark rounded frame.
      Chips swap the copy that sits on the imagery.
      (relevont's "industrias" format, re-purposed)
   ------------------------------------------------------------ */
.c-show { background: var(--paper); padding-block: clamp(72px, 12vh, 140px) clamp(80px, 13vh, 160px); }
.c-show__wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.c-show__head { margin-bottom: clamp(36px, 6vh, 64px); max-width: 780px; }
.c-show__head .t-lead { margin-top: 22px; }

.c-show__chips { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: clamp(40px, 7vh, 76px); }
.c-show__chip {
  padding: 10px 18px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink);
  font-size: .875rem;
  font-weight: 500;
  transition: background var(--fast) var(--ease),
              color var(--fast) var(--ease),
              border-color var(--fast) var(--ease);
}
.c-show__chip:hover { border-color: var(--ink); }
.c-show__chip.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }

/* two columns: copy left, photo right */
.c-show__panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(40px, 7vw, 104px);
}
.c-show__texts { position: relative; min-height: clamp(170px, 22vh, 220px); }
.c-show__text {
  position: absolute; inset: 0 0 auto;
  opacity: 0; pointer-events: none;
  transition: opacity var(--slow) var(--ease);
}
.c-show__text h3 { color: var(--ink); transform: translateY(14px); transition: transform .35s var(--ease); }
.c-show__text p  {
  color: var(--fade); max-width: 42ch; margin-top: 22px;
  font-size: 1.0625rem; line-height: 1.7;
  transform: translateY(14px); transition: transform .35s var(--ease);
}
.c-show__text.is-active { opacity: 1; }
.c-show__text.is-active h3,
.c-show__text.is-active p { transform: none; }

/* fixed height, not a ratio — the column doubles in width when the grid
   collapses, and a ratio would make the photo grow with it */
.c-show__media {
  position: relative;
  height: clamp(340px, 42vh, 420px);
  border-radius: var(--r-lg);
  background: var(--ink);
  overflow: hidden;
  box-shadow: 0 44px 90px -55px #1A1A1A80;
}
.c-show__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity var(--slow) var(--ease);
}
.c-show__img.is-active { opacity: 1; }

/* ------------------------------------------------------------
   8. STACKED CARDS — dark band, sticky title, cards that
      pin and deck on top of each other. Pure CSS.
   ------------------------------------------------------------ */
.c-band {
  background: var(--ink);
  color: #fff;
  /* both measured at runtime: the title's height, and the last card's.
     Set here as fallbacks only. */
  --stack-offset: var(--header-h);
  --last-card-h: 260px;
  /* the negative margin below pulls the container's end up by one card, so
     the band needs that height back to keep its spacing */
  padding-bottom: calc(var(--last-card-h) + clamp(40px, 8vh, 96px));
}
/* flow-root stops .c-stack's negative bottom margin collapsing out through
   the container: without it the container keeps its full height and the
   title outlives the last card, cropping it. */
.c-band > .l-container { display: flow-root; }

/* copy left, stack right. The columns stretch, so the title can travel as a
   sticky block inside its own column for the full length of the stack. */
.c-band__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 5vw, 72px);
  padding-top: var(--header-h);
}
.c-band__title {
  position: sticky; top: var(--stack-offset); z-index: 1;
  display: flex; flex-direction: column; gap: 6px;
  padding-bottom: 24px;
  background: var(--ink);
}
.c-band__title h2 { color: #fff; }
.c-band__title .t-lead { max-width: 46ch; }

/* The title is sticky inside .l-container and the cards inside .c-stack, so
   normally the last card releases a full card-height before the title does and
   slides under it. Ending .c-stack one card early lines the two releases up
   exactly: the title, the lead and the coral card hold together, then the whole
   band leaves as one. */
/* Two columns: the pull-up sits on the grid, so the left column still
   stretches to the stack's full height and the sticky title releases on the
   same scroll line as the last card. */
.c-band__grid { margin-bottom: calc(-1 * var(--last-card-h)); }
.c-stack { display: flex; flex-direction: column; }
.c-stack__card {
  position: sticky;
  top: var(--stack-offset);            /* every card pins flush at the same line */
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--white);
  color: var(--ink);
}
.c-stack__card + .c-stack__card { margin-top: 20px; }   /* this gap IS the stack edge */
.c-stack__card--brand { background: var(--red-300); color: #fff; }
.c-stack__card--brand .t-kicker { color: #FFFFFFC7; }
.c-stack__card--brand .c-stack__copy { color: #FFFFFFC7; }

.c-stack__inner {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-start;
  gap: clamp(28px, 5vh, 56px);
  /* at least the tallest card (measured at runtime) so each one fully covers
     the one before, and enough presence for the stack effect without ever
     exceeding the room left under the sticky title */
  min-height: max(
    var(--card-min-h, 0px),
    min(34svh, calc(100svh - var(--stack-offset) - 40px))
  );
  padding: clamp(24px, 3vw, 40px) clamp(24px, 4vw, 56px);
}
.c-stack__head { max-width: 100%; }
.c-stack__kickerrow { display: flex; align-items: baseline; gap: 14px; }
.c-stack__num { font-size: 13px; opacity: .45; letter-spacing: .08em; }
.c-stack__title { margin-top: 14px; }
.c-stack__copy { max-width: 64ch; margin-top: 18px; color: var(--fade); }
/* ------------------------------------------------------------
   9. ACCORDION — the live intel-led.com format (ruled rows,
      sticky left title, plain +/- glyph). Kept over relevont's
      card-style FAQ because it reads better for services.
   ------------------------------------------------------------ */
.c-acc__grid {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: start;
}
.c-acc__aside { position: sticky; top: calc(var(--header-h) + 32px); }
.c-acc__aside .t-lead { margin-top: 20px; max-width: 34ch; }

.c-acc { width: 100%; }
.c-acc__item { border-top: 1px solid var(--line-strong); }
.c-acc__item:last-child { border-bottom: 1px solid var(--line-strong); }

.c-acc__q {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; padding: 22px 0;
  background: none; border: none; text-align: left;
  color: var(--ink);
  font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5625rem);
  font-weight: 500;
  transition: color var(--fast) var(--ease);
}
.c-acc__q:hover { color: var(--red-500); }
.c-acc__icon {
  flex: none; width: 24px; text-align: center;
  font-size: 22px; font-weight: 300; line-height: 1;
  transition: color var(--fast) var(--ease);
}
.c-acc__item.is-open .c-acc__icon { color: var(--red-300); }

/* modern height animation: 0fr -> 1fr */
.c-acc__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--slow) var(--ease); }
.c-acc__item.is-open .c-acc__a { grid-template-rows: 1fr; }
.c-acc__a-inner { overflow: hidden; color: var(--fade); max-width: 64ch; font-size: 15px; line-height: 1.7; }
.c-acc__item.is-open .c-acc__a-inner { padding-bottom: 24px; }

/* ------------------------------------------------------------
   10. FEATURE — two columns, rounded media
   ------------------------------------------------------------ */
.c-feature { background: var(--white); }
.c-feature__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
}
/* Fixed height, as the live .reverse-image does. An aspect-ratio would grow
   taller when the two-column grid collapses and the image goes full width. */
/* photo left, copy right — reordered here so the stacked layout below still
   leads with the copy */
.c-feature__media { order: -1; border-radius: var(--r-lg); overflow: hidden; height: 420px; }
.c-feature__media img { width: 100%; height: 100%; object-fit: cover; }
.c-feature__actions { margin-top: 28px; }

/* stat tiles */
.c-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: clamp(28px, 4vw, 40px); }
.c-stat {
  display: flex; flex-direction: column; justify-content: space-between; gap: 14px;
  min-height: 140px; padding: clamp(18px, 2.4vw, 28px);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md);
}
.c-stat__num { font-size: clamp(2rem, 1.6rem + 1.6vw, 3rem); line-height: .9; letter-spacing: -.02em; }
.c-stat__num span { font-family: var(--font-editorial); font-style: italic; font-size: .5em; margin-left: 4px; }
.c-stat__lbl { color: var(--fade); font-size: .9375rem; }
.c-stat--brand { background: var(--red-300); border-color: var(--red-300); color: #fff; }
.c-stat--brand .c-stat__lbl { color: #FFFFFFC7; }
.c-stat--dim { background: transparent; border: 1px dashed var(--line-strong); }
.c-stat--dim .c-stat__num { color: var(--fade); }

/* ------------------------------------------------------------
   11. CTA BANNER — full brand coral, big radius.
       Anything inside it sits directly on the coral: no nested card.
   ------------------------------------------------------------ */
.c-cta { background: var(--white); }
.c-cta__banner {
  background: var(--red-300);
  color: #fff;
  border-radius: var(--r-lg);
  padding: clamp(40px, 7vw, 88px) clamp(24px, 5vw, 64px);
  text-align: center;
}
.c-cta__banner .t-kicker { color: #FFFFFFC7; }
.c-cta__banner .t-lead   { color: #FFFFFFD9; margin: 20px auto 0; }
.c-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }

/* ------------------------------------------------------------
   12. FORM — sits straight on the coral, no container
   ------------------------------------------------------------ */
.c-field { margin-bottom: 16px; }
.c-field label { display: block; font-size: 13px; color: var(--fade); margin-bottom: 6px; }
.c-field input, .c-field textarea {
  width: 100%;
  padding: 13px 16px;
  font: inherit; font-size: 15px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.c-field input:focus, .c-field textarea:focus {
  outline: none; border-color: var(--ink); background: var(--white);
}
.c-field textarea { resize: vertical; min-height: 120px; }
.c-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* on the coral banner */
.c-cta__banner .c-field label { color: #FFFFFFC7; }
.c-cta__banner .c-field input,
.c-cta__banner .c-field textarea {
  color: #fff;
  background: #FFFFFF1F;
  border-color: #FFFFFF52;
}
.c-cta__banner .c-field input::placeholder,
.c-cta__banner .c-field textarea::placeholder { color: #FFFFFF8A; }
.c-cta__banner .c-field input:focus,
.c-cta__banner .c-field textarea:focus { background: #FFFFFF2E; border-color: #fff; }

/* white button, for use on the coral */
.c-btn--onbrand { background: #fff; color: var(--red-500); }
.c-btn--onbrand:hover { background: var(--ink); color: #fff; }

/* ------------------------------------------------------------
   13. FOOTER
   ------------------------------------------------------------ */
.c-footer { background: var(--ink); color: #FFFFFFBF; padding: clamp(48px, 7vw, 80px) 0 40px; }
.c-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.4fr;
  gap: 40px;
}
.c-footer h4 { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #FFFFFF80; margin-bottom: 16px; font-weight: 600; }
.c-footer a { color: #FFFFFFBF; transition: color var(--fast) var(--ease); }
.c-footer a:hover { color: #fff; }
.c-footer__links { display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.c-footer__logo img { height: 26px; width: auto; }
.c-footer__social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid var(--line-invert); border-radius: 50%;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.c-footer__social:hover { background: var(--red-300); border-color: var(--red-300); color: #fff; }
.c-footer__signup { display: flex; gap: 8px; margin-top: 16px; }
.c-footer__signup input {
  flex: 1; min-width: 0;
  padding: 12px 16px; font: inherit; font-size: 14px;
  color: #fff; background: #FFFFFF0F;
  border: 1px solid var(--line-invert); border-radius: var(--r-pill);
}
.c-footer__signup input::placeholder { color: #FFFFFF73; }
.c-footer__signup input:focus { outline: none; border-color: #FFFFFF5C; }
.c-footer__bottom {
  margin-top: clamp(40px, 6vw, 64px); padding-top: 24px;
  border-top: 1px solid var(--line-invert);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px;
  font-size: 13px; color: #FFFFFF80;
}

/* ------------------------------------------------------------
   14. RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
  .c-feature__grid { grid-template-columns: 1fr; }
  .c-feature__media { order: 0; }
  .c-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  :root { --header-h: 92px; }
  .c-nav__links { display: none; }
  .c-nav__cta { justify-self: center; }
  .c-nav__burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%;   /* matches the CTA pill height */
    background: #FFFFFFEB; border: 1px solid #1A1A1A14; color: var(--ink);
  }
  .c-nav.on-dark .c-nav__burger,
  .c-nav.on-brand .c-nav__burger { background: #FFFFFF1F; border-color: #FFFFFF3D; color: #fff; }
  .c-faq__grid { grid-template-columns: 1fr; }
  .c-stats { grid-template-columns: 1fr 1fr; }
  .c-show__panel { grid-template-columns: 1fr; }
  .c-show__texts { min-height: 0; position: static; }
  .c-show__text { position: static; display: none; }
  .c-show__text.is-active { display: block; }
  .c-show__media { height: 320px; }
  .c-band__grid { grid-template-columns: 1fr; gap: 0; padding-top: 0; margin-bottom: 0; }
  .c-stack { margin-bottom: calc(-1 * var(--last-card-h)); }
  .c-band__title {
    top: 0; justify-content: flex-end;
    padding: var(--header-h) 0 24px;
  }
  .c-hero__copy { max-width: 100%; }
}

@media (max-width: 640px) {
  .c-feature__media { height: 280px; }
}

@media (max-width: 560px) {
  .c-field-row { grid-template-columns: 1fr; }
  .c-footer__grid { grid-template-columns: 1fr; }
  .c-stats { grid-template-columns: 1fr; }
  .c-stack__inner { padding: 28px 22px; }
}

/* mobile menu */
.c-navmobile {
  position: fixed; inset: 0; z-index: 250;
  background: var(--ink); color: #fff;
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
}
.c-navmobile.is-open { display: flex; }
.c-navmobile a { font-size: 2rem; padding: 10px 20px; }
.c-navmobile__close { position: absolute; top: 20px; right: 20px; background: none; border: none; color: #fff; font-size: 32px; line-height: 1; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* --- banner variant: left-aligned split (banner format + live form) --- */
.c-cta__banner--split { text-align: left; }
.c-cta__banner--split .t-lead { margin-inline: 0; }
.c-cta__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 520px);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
@media (max-width: 860px) { .c-cta__split { grid-template-columns: 1fr; } }


/* ============================================================
   15. INTELLIGENCE INDEX
   ============================================================ */

/* compact hero — same square-top / rounded-bottom rule as the
   landing hero, just shorter because there is no video */
.c-subhero {
  position: relative;
  display: flex;
  align-items: flex-end;                 /* copy sits at the foot, as on /intelligence */
  min-height: 100svh;                    /* the live .intel-hero is min-height: 100vh */
  background: var(--ink);
  color: #fff;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  overflow: hidden;
  padding: calc(var(--header-h) + 40px) var(--gutter) clamp(56px, 9vh, 96px);
}
.c-subhero__media { position: absolute; inset: 0; z-index: 0; }
.c-subhero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.c-subhero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(#1A1A1AB8 0%, #1A1A1A8A 20%, #1A1A1A6B 60%, #1A1A1AA6 100%),
    radial-gradient(95% 110% at 0 100%, #1A1A1AD1 0%, #1A1A1A47 46%, #1A1A1A00 74%);
}
.c-subhero__inner { position: relative; z-index: 2; width: 100%; max-width: var(--max); margin-inline: auto; }
.c-subhero h1 { color: #fff; max-width: 18ch; }
.c-subhero .t-lead { color: #FFFFFFC7; margin-top: 20px; }

.c-subhero__form { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; max-width: 520px; }
.c-subhero__form input {
  flex: 1; min-width: 220px;
  padding: 13px 20px; font: inherit; font-size: 15px;
  color: #fff; background: #FFFFFF14;
  border: 1px solid #FFFFFF3D; border-radius: var(--r-pill);
}
.c-subhero__form input::placeholder { color: #FFFFFF8A; }
.c-subhero__form input:focus { outline: none; border-color: #FFFFFF8A; background: #FFFFFF24; }

/* filter row — reuses the chip language from the show section */
.c-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(28px, 4vw, 44px); }

/* article grid */
.c-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.c-card {
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.c-card:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.c-card__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--red-100); }
.c-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.c-card:hover .c-card__media img { transform: scale(1.03); }
.c-card__body { display: flex; flex-direction: column; gap: 12px; padding: clamp(20px, 2.4vw, 28px); flex: 1; }
.c-card__meta { display: flex; align-items: center; gap: 10px; }
.c-card__tag {
  padding: 5px 12px; border-radius: var(--r-pill);
  background: var(--red-100); color: var(--red-500);
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}
.c-card__date { font-size: 13px; color: var(--fade); }
.c-card__excerpt { font-size: 15px; line-height: 1.6; color: var(--fade); }
.c-card__more { margin-top: auto; padding-top: 4px; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--red-500); }
.c-card--soon { border-style: dashed; border-color: var(--line-strong); background: transparent; }
.c-card--soon .c-card__media { background: #1A1A1A0A; display: flex; align-items: center; justify-content: center; }
.c-card--soon .c-card__placeholder { font-size: 13px; color: var(--fade); letter-spacing: .08em; text-transform: uppercase; }

.c-empty { padding: 60px 0; color: var(--fade); font-size: 15px; }

@media (max-width: 1024px) {
  .c-acc__grid  { grid-template-columns: 1fr; }
  .c-acc__aside { position: static; }
  .c-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .c-cards { grid-template-columns: 1fr; }
}


/* ============================================================
   16. ARTICLE
   ============================================================ */
.c-article { background: var(--paper); }
.c-article__head {
  background: var(--ink);
  color: #fff;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  padding: calc(var(--header-h) + clamp(56px, 9vh, 104px)) var(--gutter) clamp(48px, 7vh, 80px);
}
.c-article__head-inner { max-width: 860px; margin-inline: auto; }
.c-article__head h1 { color: #fff; margin-top: 14px; }
.c-article__standfirst {
  color: #FFFFFFC7;
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: clamp(1.25rem, 1.1rem + .6vw, 1.625rem);
  line-height: 1.35;
  max-width: 40ch;
  margin-top: 24px;
}
.c-article__body {
  max-width: 720px;
  margin-inline: auto;
  padding: clamp(48px, 7vw, 88px) var(--gutter) 0;
}
.c-article__body p { color: var(--fade); font-size: 1.0625rem; line-height: 1.75; margin-bottom: 1.4em; }
.c-article__body h3 { color: var(--ink); margin: 2em 0 .7em; }
.c-article__body strong { color: var(--ink); font-weight: 500; }
.c-article__body a { color: var(--red-500); text-decoration: underline; text-underline-offset: 3px; }

.c-article__cta {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: clamp(24px, 3vw, 36px);
  margin: 2.5em 0;
}
.c-article__cta p { margin: 0; color: var(--ink); }

.c-article__tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.c-article__tag {
  padding: 8px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  font-size: .8125rem;
  color: var(--fade);
}

.c-article__foot {
  max-width: 720px; margin-inline: auto;
  padding: clamp(32px, 5vw, 56px) var(--gutter) clamp(56px, 8vw, 96px);
}

/* ============================================================
   17. POLICY PAGES
   ============================================================ */
.c-policy { background: var(--paper); }
.c-policy__head {
  background: var(--ink);
  color: #fff;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  padding: calc(var(--header-h) + clamp(48px, 7vh, 88px)) var(--gutter) clamp(40px, 6vh, 64px);
}
.c-policy__head-inner { max-width: 860px; margin-inline: auto; }
.c-policy__head h1 { color: #fff; }
.c-policy__body { max-width: 760px; margin-inline: auto; padding: clamp(40px, 6vw, 72px) var(--gutter) 0; }
.c-policy__body h2 { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.625rem); margin: 2em 0 .6em; color: var(--ink); }
.c-policy__body h2:first-child { margin-top: 0; }
.c-policy__body p,
.c-policy__body li { color: var(--fade); line-height: 1.75; margin-bottom: 1em; }
.c-policy__body ul { padding-left: 1.2em; margin-bottom: 1.4em; }
.c-policy__body a { color: var(--red-500); text-decoration: underline; text-underline-offset: 3px; }
.c-policy__meta { color: var(--fade); font-size: .875rem; margin-top: 16px; }