/* ==========================================================================
   SHANTHA HI TECH — COMPANY PAGES
   css/company.css

   Shared by about.html and careers.html.

   These are marketing pages, not documents, so unlike css/legal.css they use
   the site's full-bleed band rhythm: a dark hero flowing straight out of the
   black masthead, then alternating paper and deep grounds down the page.

   Tokens mirror css/website.css so both pages sit in the same type and
   spacing system as the rest of the site.

   No page JS — the shared header script is the only behaviour here.
   ========================================================================== */

:root {
  --paper: #ffffff;
  --paper-2: #f8f7f5;
  --paper-3: #f1efeb;

  --charcoal: #1a1a1a;
  --ink: #2e2e2e;
  --muted: #6f6f6f;
  --line: #e3e1dc;

  --deep: #131313;
  --deep-2: #1f1f1f;
  --on-deep: #ffffff;
  --on-deep-muted: rgba(255, 255, 255, 0.62);
  --line-deep: rgba(255, 255, 255, 0.12);

  --font: "Clarkson", "Helvetica", Helvetica, Arial, sans-serif;

  --t-xs: 12px;
  --t-sm: 14px;
  --t-base: 16px;
  --t-lg: clamp(17px, 0.3vw + 16px, 19px);
  --t-xl: clamp(20px, 0.9vw + 17px, 26px);
  --t-2xl: clamp(26px, 2.2vw + 18px, 42px);
  --t-3xl: clamp(30px, 3.6vw + 16px, 56px);
  --t-hero: clamp(38px, 5.2vw + 16px, 72px);
  --t-stat: clamp(34px, 3.4vw + 18px, 56px);

  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 32px;
  --s5: 48px;
  --s6: 64px;
  --s7: 96px;

  --gutter: 24px;
  --container: 1280px;

  --r-btn: 4px;
  --r-card: 10px;
  --r-media: 14px;

  --ease: cubic-bezier(0.645, 0.045, 0.355, 1);
  --fast: 200ms;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--s4);
}

body {
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; }

:focus-visible {
  outline: 2px solid var(--charcoal);
  outline-offset: 3px;
  border-radius: 2px;
}

/* On the dark bands the charcoal ring is invisible — flip it there. */
.co-band--deep :focus-visible,
.co-hero :focus-visible,
.foot :focus-visible {
  outline-color: #ffffff;
}

.skip-link {
  position: absolute;
  top: -80px;
  left: 16px;
  z-index: 300;
  padding: 16px 24px;
  background: var(--charcoal);
  color: var(--paper);
  border-radius: var(--r-btn);
  font-size: var(--t-sm);
}

.skip-link:focus { top: 16px; }

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

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}


/* ==========================================================================
   SHARED PRIMITIVES
   ========================================================================== */

.co-eyebrow {
  display: block;
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s3);
}

.co-band--deep .co-eyebrow { color: #898989; }

.co-title {
  max-width: 20ch;
  font-size: var(--t-3xl);
  font-weight: 300;
  letter-spacing: -0.035em;
  line-height: 1.06;
  color: var(--charcoal);
}

.co-band--deep .co-title { color: var(--on-deep); }

.co-sub {
  max-width: 56ch;
  margin-top: var(--s3);
  font-size: var(--t-lg);
  line-height: 1.55;
  color: var(--muted);
}

.co-band--deep .co-sub { color: var(--on-deep-muted); }

.co-band {
  padding-block: var(--s7);
}

/* Full-viewport-height variant — used on ai.html so every section fills the
   screen like the original .frame pattern on website.html, rather than the
   default content-height band used on about.html/careers.html. Opt-in via
   this modifier class so those two pages are unaffected.
   svh after vh: unsupporting browsers keep the first value; supporting ones
   get the mobile-toolbar-visible height instead of the taller, toolbar-
   hidden 100vh — same reasoning as website.css's .frame. */
.co-band--full {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--s6);
}

.co-band--paper-2 { background-color: var(--paper-2); }

.co-band--deep {
  background-color: var(--deep);
  color: var(--on-deep);
}

.co-band__head { margin-bottom: var(--s6); }


/* ==========================================================================
   HERO
   Deliberately dark: the masthead above it is solid black, so a dark hero
   reads as one continuous field rather than a black bar sitting on a white
   page. Same trick enquire.html uses.
   ========================================================================== */

.co-hero {
  background-color: var(--deep);
  color: var(--on-deep);
  padding-top: var(--s7);
  padding-bottom: var(--s7);
}

/* --------------------------------------------------------------------------
   WebGL hero variant — a canvas ground behind the hero copy (js/ai-hero-
   ballpit.js on ai.html). Scoped to .co-hero--gl, NOT bare .co-hero, because
   about.html and careers.html share this stylesheet and must not pick any of
   this up. Same layering contract marketing.css's .frame--gl already uses.
   -------------------------------------------------------------------------- */

.co-hero--gl {
  position: relative;
  /* The masthead is lifted out of flow on this page (body.header-overlay),
     so the hero owns the full viewport and has to pad its own content clear
     of the bar — the idiom from css/website.css and css/marketing.css. Must
     come after .co-band--full's padding-block shorthand to win. */
  padding-top: calc(var(--header-h, 193px) + var(--s2));
}

.co-hero--gl > .container {
  position: relative;
  z-index: 2;
}

/* Light-on-white palette for this hero only — .co-hero itself stays dark
   for about.html/careers.html, which share the class but not this modifier. */
.co-hero--gl {
  background-color: var(--paper);
  color: var(--charcoal);
}

.co-hero--gl .co-hero__sub { color: var(--muted); }

.co-hero--gl .co-btn--ghost {
  border-color: var(--line);
  color: var(--charcoal);
}

.co-hero--gl .co-btn--ghost:hover { border-color: var(--charcoal); }

.co-hero--gl .co-btn--solid {
  background-color: var(--charcoal);
  color: var(--paper);
}

.co-hero--gl:focus-visible,
.co-hero--gl :focus-visible {
  outline-color: var(--charcoal);
}

.co-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  /* Lets clicks through to the two hero buttons above. The pointer listener
     for the animation is bound to the section, which still sees the events. */
  pointer-events: none;
}

.co-hero__canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* Keeps the copy legible over the moving spheres — darkest at the left,
   where the title sits, fading out to the right so the animation still
   reads. Mirrors .frame__scrim on the marketing and website pages. */
.co-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to right, rgba(19, 19, 19, 0.92) 0%, rgba(19, 19, 19, 0.68) 42%, rgba(19, 19, 19, 0.18) 100%);
}

.co-hero--gl .co-hero__scrim {
  background:
    linear-gradient(to right, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.68) 42%, rgba(255, 255, 255, 0.18) 100%);
}

/* Mashes the hero into whatever dark frame follows it (on ai.html, the
   AI Website video section) rather than leaving a hard seam where one
   full-screen section's flat --deep ends and the next's ground begins.
   Bottom-edge-only, so it doesn't wash out the hero copy above it. */
.co-hero--gl::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 28vh;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, #000 92%);
}

.co-hero__eyebrow {
  display: block;
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #898989;
  margin-bottom: var(--s3);
}

.co-hero__title {
  max-width: 16ch;
  font-size: var(--t-hero);
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 1.04;
}

.co-hero__sub {
  max-width: 54ch;
  margin-top: var(--s4);
  font-size: var(--t-lg);
  line-height: 1.6;
  color: var(--on-deep-muted);
}

.co-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s5);
}


/* ==========================================================================
   BUTTONS
   ========================================================================== */

.co-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  min-height: 48px;
  padding-inline: var(--s3);
  border-radius: var(--r-btn);
  font-size: var(--t-sm);
  letter-spacing: 0.02em;
  transition: opacity var(--fast) var(--ease),
              background-color var(--fast) var(--ease),
              border-color var(--fast) var(--ease);
}

.co-btn--solid {
  background-color: var(--paper);
  color: var(--charcoal);
}

.co-btn--solid:hover { opacity: 0.84; }

.co-btn--ghost {
  border: 1px solid var(--line-deep);
  color: var(--on-deep);
}

.co-btn--ghost:hover { border-color: rgba(255, 255, 255, 0.45); }

/* Outlined button on a light band. This exists because the two pages that
   need it were carrying `style="border: 1px solid var(--line)"` inline —
   which the CSP (style-src 'self', no unsafe-inline) silently dropped on
   the live server, rendering both buttons borderless. */
.co-btn--outline {
  border: 1px solid var(--line);
  color: var(--charcoal);
}

.co-btn--outline:hover { border-color: var(--charcoal); }

/* Same button on a light band. */
.co-band .co-btn--solid {
  background-color: var(--charcoal);
  color: var(--paper);
}

.co-band--deep .co-btn--solid {
  background-color: var(--paper);
  color: var(--charcoal);
}


/* ==========================================================================
   LEDE — the "short version" prose block
   Two columns on desktop so a few hundred words do not run to a single
   overlong measure.
   ========================================================================== */

.co-lede {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s4);
  max-width: 92ch;
}

.co-lede p {
  font-size: var(--t-base);
  line-height: 1.75;
  color: var(--ink);
}

.co-lede p + p { margin-top: var(--s2); }

.co-lede b {
  font-weight: 500;
  color: var(--charcoal);
}

.co-lede-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s5);
}

.co-lede-card {
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
}

.co-band--deep .co-lede-card { border-top-color: var(--line-deep); }

.co-lede-card__label {
  display: block;
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s2);
}

.co-band--deep .co-lede-card__label { color: #898989; }

.co-lede-card p {
  font-size: var(--t-base);
  line-height: 1.75;
  color: var(--ink);
}

.co-band--deep .co-lede-card p { color: var(--on-deep-muted); }

.co-lede-card b {
  font-weight: 500;
  color: var(--charcoal);
}

.co-band--deep .co-lede-card b { color: var(--on-deep); }


/* ==========================================================================
   STATS
   ========================================================================== */

.co-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s5) var(--s4);
}

.co-stat__n {
  display: block;
  font-size: var(--t-stat);
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--on-deep);
}

.co-stat__l {
  margin-top: var(--s2);
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--on-deep-muted);
}


/* ==========================================================================
   PRINCIPLES — numbered belief list
   ========================================================================== */

.co-principles {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s5);
}

.co-principle__n {
  display: block;
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--muted);
  padding-bottom: var(--s2);
  margin-bottom: var(--s2);
  border-top: 1px solid var(--line);
  padding-top: var(--s2);
}

.co-band--deep .co-principle__n { color: #898989; border-top-color: var(--line-deep); }

.co-principle__t {
  font-size: var(--t-xl);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--charcoal);
  margin-bottom: var(--s2);
}

.co-band--deep .co-principle__t { color: var(--on-deep); }

.co-principle__b {
  font-size: var(--t-base);
  line-height: 1.7;
  color: var(--muted);
}

.co-band--deep .co-principle__b { color: var(--on-deep-muted); }


/* ==========================================================================
   SPLIT BAND — copy on one side, a WebGL ground on the other
   (#automation on ai.html; js/ai-automation-flow.js draws into
   .co-split__canvas). Mobile-first: one column, canvas underneath the copy;
   promoted to two columns in the 992px block at the foot of this file.
   ========================================================================== */

.co-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s5);
  align-items: center;
}

/* The wrapper — not the canvas — owns the height at every breakpoint, and it
   must be a definite height with no dependence on content or on the grid
   resolving, or the module's resize() reads a zero rect on first paint. */
.co-split__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  pointer-events: none;
}

.co-split__canvas {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
}

/* Static, CSS-only glow behind the canvas, so the panel isn't a flat void
   when the scene is stopped, reduced-motion, or WebGL is unavailable — this
   is the whole fallback. */
.co-split__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(60% 55% at 50% 50%,
    rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.04) 45%, rgba(255, 255, 255, 0) 78%);
}


/* ==========================================================================
   TEXTURE STRIP
   Reuses the still-life set website.html already ships. Purely atmospheric,
   so every image is aria-hidden and the strip is decorative.
   ========================================================================== */

.co-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s2);
}

.co-strip img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--r-media);
}


/* ==========================================================================
   STEPS — the process / hiring ladder
   ========================================================================== */

.co-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s4);
  counter-reset: step;
}

.co-step {
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
}

.co-band--deep .co-step { border-top-color: var(--line-deep); }

.co-step__n {
  display: block;
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--muted);
  margin-bottom: var(--s2);
}

.co-band--deep .co-step__n { color: #898989; }

.co-step__t {
  font-size: var(--t-lg);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--charcoal);
  margin-bottom: var(--s1);
}

.co-band--deep .co-step__t { color: var(--on-deep); }

.co-step__b {
  font-size: var(--t-sm);
  line-height: 1.65;
  color: var(--muted);
}

.co-band--deep .co-step__b { color: var(--on-deep-muted); }


/* ==========================================================================
   VIDEO GROUND — full-bleed looping film behind a section, glass card
   riding on top. Ported from css/website.css's .frame--video (the AI
   Website section moved here from website.html) — scoped entirely under
   .co-band--video so nothing else on the site is affected. Pair with
   .co-band--deep for the dark text-on-video palette (eyebrow/title/sub
   already invert via the .co-band--deep rules above); .co-band--video
   itself only owns the film, overlays and glass card.
   ========================================================================== */

.co-band--video {
  position: relative;
  overflow: hidden;
  background-color: #000;
}

.co-band--video__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.co-band--video__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Slight over-scale so the drift never exposes an edge. */
  transform: scale(1.06);
  animation: co-video-drift 38s ease-in-out infinite alternate;
  filter: saturate(0.86) contrast(1.06) brightness(0.82);
}

@keyframes co-video-drift {
  from { transform: scale(1.06) translate3d(-0.8%, 0.4%, 0); }
  to   { transform: scale(1.12) translate3d(-0.6%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .co-band--video__media video { animation: none; transform: scale(1.02); }
}

/* Vignette for legibility — darker at the edges, where the card sits. */
.co-band--video__scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 100% at 50% 45%, rgba(10,10,12,0.42) 0%, rgba(10,10,12,0.74) 55%, rgba(6,6,8,0.92) 100%),
    linear-gradient(to bottom, rgba(6,6,8,0.86) 0%, rgba(6,6,8,0.30) 26%, rgba(6,6,8,0.34) 70%, rgba(6,6,8,0.88) 100%);
}

/* Fine grain — takes the digital sheen off the gradients. */
.co-band--video__grain {
  position: absolute;
  inset: -50%;
  opacity: 0.16;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* Content rides above the film. */
.co-band--video > .container { position: relative; z-index: 2; }

/* ==========================================================================
   IMAGE GROUND — same treatment as .co-band--video (scrim, grain, glass
   card) but for a still background image instead of a looping film. Used
   by the AI Voice Agents section. Reuses .co-band--video__scrim and
   .co-band--video__grain directly.
   ========================================================================== */

.co-band--image {
  position: relative;
  overflow: hidden;
  background-color: #000;
}

.co-band--image__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background-image: url("../images/voice-agent-bg.jpg");
  background-size: cover;
  background-position: center;
}

.co-band--image > .container { position: relative; z-index: 2; }

/* Light variant — #chat-assistants sits on .co-band--paper-2 (light theme,
   dark text already), so its photo, scrim and base ground all invert to
   white/off-white instead of the dark treatment .co-band--image defaults to
   for #voice-agents. Scoped by id so the shared classes above are untouched. */
#chat-assistants.co-band--image { background-color: var(--paper-2); }

#chat-assistants .co-band--image__media {
  background-image: url("../images/chat-assistants-bg.jpg");
}

#chat-assistants .co-band--video__scrim {
  background:
    radial-gradient(120% 100% at 50% 45%, rgba(255,255,255,0.08) 0%, rgba(248,247,245,0.55) 55%, rgba(248,247,245,0.9) 100%),
    linear-gradient(to bottom, rgba(248,247,245,0.7) 0%, rgba(248,247,245,0.18) 26%, rgba(248,247,245,0.22) 70%, rgba(248,247,245,0.82) 100%);
}

.co-band--video .co-band__head {
  text-align: center;
}

.co-band--video .co-title,
.co-band--video .co-sub {
  margin-inline: auto;
}

.co-band--video .co-sub {
  text-shadow: 0 1px 30px rgba(0, 0, 0, 0.55);
}

/* Frosted card riding on the film. */
.co-band--video__card {
  margin: var(--s6) auto 0;
  width: min(860px, 100%);
  padding: var(--s5);
  background: rgba(18, 18, 20, 0.46);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--r-card);
  backdrop-filter: blur(26px) saturate(150%);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  box-shadow:
    0 40px 90px rgba(0, 0, 0, 0.62),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.co-band--video__bar {
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.16);
  overflow: hidden;
  margin-bottom: var(--s4);
}

.co-band--video__bar span {
  display: block;
  height: 100%;
  width: 72%;
  background: var(--paper);
  border-radius: 3px;
}

/* Narrower gap than the generic .co-steps default — this card only ever
   holds three, and its 3-column rule lives in the shared 992px block
   below (near .co-principles/.co-steps), not a new media query here. */
.co-band--video .co-steps {
  gap: var(--s4);
}


/* ==========================================================================
   CARDS — "what we build" links, and the careers benefit grid
   ========================================================================== */

.co-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s2);
}

.co-card {
  display: block;
  padding: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background-color: var(--paper);
  transition: border-color var(--fast) var(--ease),
              transform var(--fast) var(--ease);
}

/* Only the linked variety lifts — a static benefit card that moved on hover
   would imply a click target that is not there. */
a.co-card:hover {
  border-color: var(--charcoal);
  transform: translateY(-2px);
}

.co-card__t {
  font-size: var(--t-lg);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--charcoal);
  margin-bottom: var(--s1);
}

.co-card__b {
  font-size: var(--t-sm);
  line-height: 1.65;
  color: var(--muted);
}

.co-card__arw {
  display: inline-block;
  margin-top: var(--s3);
  font-size: var(--t-sm);
  color: var(--charcoal);
}


/* ==========================================================================
   ROLES — careers listing
   ========================================================================== */

.co-roles {
  display: grid;
  gap: var(--s2);
}

.co-role {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s2);
  align-items: center;
  padding: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  transition: border-color var(--fast) var(--ease),
              background-color var(--fast) var(--ease);
}

.co-role:hover {
  border-color: var(--charcoal);
  background-color: var(--paper-2);
}

.co-role__t {
  font-size: var(--t-lg);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--charcoal);
}

.co-role__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s3);
  margin-top: var(--s1);
  font-size: var(--t-sm);
  color: var(--muted);
}

.co-role__cta {
  font-size: var(--t-sm);
  color: var(--charcoal);
  white-space: nowrap;
}

/* Speculative-application note, and the "no open roles" fallback. */
.co-note {
  margin-top: var(--s4);
  padding: var(--s4);
  background-color: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}

.co-band--deep .co-note {
  background-color: var(--deep-2);
  border-color: var(--line-deep);
}

.co-note__t {
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s1);
}

.co-note p {
  font-size: var(--t-sm);
  line-height: 1.7;
  color: var(--ink);
}

.co-band--deep .co-note p { color: var(--on-deep-muted); }

.co-note a {
  font-weight: 500;
  color: var(--charcoal);
  border-bottom: 1px solid var(--line);
  transition: border-color var(--fast) var(--ease);
}

.co-note a:hover { border-bottom-color: var(--charcoal); }

.co-band--deep .co-note a {
  color: var(--on-deep);
  border-bottom-color: var(--line-deep);
}


/* ==========================================================================
   CLOSING CTA
   ========================================================================== */

.co-cta {
  text-align: center;
  padding-block: var(--s7);
  background-color: var(--paper-2);
  border-top: 1px solid var(--line);
}

.co-cta__t {
  max-width: 20ch;
  margin-inline: auto;
  font-size: var(--t-2xl);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.12;
  color: var(--charcoal);
}

.co-cta__b {
  max-width: 46ch;
  margin: var(--s3) auto 0;
  font-size: var(--t-base);
  line-height: 1.6;
  color: var(--muted);
}

.co-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  justify-content: center;
  margin-top: var(--s5);
}


/* ==========================================================================
   FOOTER — matches the .foot convention on the newer pages
   ========================================================================== */

.foot {
  background-color: var(--deep);
  color: var(--on-deep);
  border-top: 1px solid var(--line-deep);
  padding: var(--s4) var(--gutter) var(--s2);
}

.foot__container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
}

.foot__grid {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: var(--s3);
}

.foot__logo { height: 48px; width: auto; }

.foot__tag {
  margin-top: var(--s2);
  color: var(--on-deep-muted);
  font-size: var(--t-sm);
}

.foot__t {
  font-size: var(--t-xs);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #898989;
  /* Heading-to-first-link gap deliberately wider than the 28px row rhythm
     below — mirrors the Squarespace reference's ~1.34x ratio between its
     own row height and this gap. */
  margin-bottom: 36px;
}

.foot__list { display: grid; gap: 0; }

.foot__list a {
  font-size: var(--t-sm);
  color: #898989;
  transition: color var(--fast) var(--ease);
  display: inline-flex;
  align-items: center;
  min-height: 32px;
}

.foot__list a:hover { color: var(--on-deep); }
.foot__list a[aria-current="page"] { color: var(--on-deep); }

.foot__base {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  align-items: center;
  /* Gap before the copyright bar reads as a section break — same ~1.55x
     ratio the reference uses before its own secondary headings. */
  margin-top: 36px;
  padding-top: var(--s1);
  border-top: 1px solid var(--line-deep);
  color: #898989;
  font-size: var(--t-sm);
}

.foot__base a {
  /* WCAG 2.2 SC 2.5.8 wants 24px; min-height (not padding) so font metrics
     can't leave it a pixel short — matches .foot__list a's treatment. */
  display: inline-flex;
  align-items: center;
  min-height: 32px;
}
.foot__base a:hover { color: var(--on-deep); }


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (min-width: 640px) {
  .co-stats { grid-template-columns: repeat(4, 1fr); }
  .co-strip { grid-template-columns: repeat(4, 1fr); }
  .co-cards { grid-template-columns: repeat(2, 1fr); }

  .co-role {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--s4);
  }
}

/* 992px, not the more usual 900/1024 — matches css/header.css's own
   hamburger-to-desktop cutover (max-width: 991px in header.css, so 992 is
   the first "desktop" pixel there too). Below this, the header is still a
   mobile hamburger; multi-column grids here before then made the page
   disagree with its own nav about whether the viewport was "mobile". */
@media (min-width: 992px) {
  .co-lede { grid-template-columns: repeat(2, 1fr); gap: var(--s6); }
  .co-lede-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s6); }
  .co-principles { grid-template-columns: repeat(3, 1fr); }
  .co-steps { grid-template-columns: repeat(4, 1fr); }
  .co-band--video .co-steps { grid-template-columns: repeat(3, 1fr); }
  .co-cards { grid-template-columns: repeat(4, 1fr); }

  /* Copy left, animation right. minmax(0,…) on both tracks so a long word in
     the copy or the canvas's own width can't blow the grid out wider than
     .container. */
  .co-split {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: var(--s6);
  }

  /* .co-principles goes 3-up two rules above — but inside the narrow left
     column it must stay a single stack. Higher specificity wins here, since
     media queries add none. */
  .co-split__copy .co-principles { grid-template-columns: 1fr; gap: var(--s4); }

  /* --s6 between title and principles is tuned for a full-width band —
     too much air at half width. */
  .co-split__copy .co-band__head { margin-bottom: var(--s5); }

  /* Taller-than-wide is wrong for a left-to-right pipeline; cap against the
     viewport so the section still fits 100svh alongside the copy. */
  .co-split__media {
    aspect-ratio: auto;
    height: clamp(420px, 62vh, 620px);
  }
}

@media (max-width: 1023px) {
  .foot__grid { grid-template-columns: 1fr 1fr; gap: var(--s4); }
}

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  a.co-card:hover { transform: none; }
  /* The module already renders one static frame and never starts its loop
     under reduced motion — just soften the glow it sits on so nothing reads
     as a pulsing element. */
  .co-split__media::before { background: none; }
}