/* ============================================================================
   Robocode brand system — shared stylesheet
   ----------------------------------------------------------------------------
   Ported from robocode-camps-app/src/app/globals.css (Tailwind v4 @theme) so
   that franchise.robocode.uk, partners.robocode.uk and eventually robocode.uk
   render as one website with no build step.

   Camps is Tailwind; this file is plain CSS. Tokens and component classes are
   copied verbatim. The layout layer below hand-translates the ~400 Tailwind
   utilities camps uses into a small semantic set.

   Colour canon (camps, 25 Jul 2026):
     PINK    = the primary commercial CTA
     EMERALD = funded / HAF only, never a generic accent
     TEAL    = neutral brand chrome
   ========================================================================= */

:root {
  /* ---- Fonts ------------------------------------------------------------
     AIR FORCE for display, Myriad Pro for body, per the brand guidelines, and
     the same two files camps serves. Self-hosted from /assets so these pages
     stay free of external requests.

     The @font-face rules are at the bottom of this file. An earlier note here
     claimed camps never loaded these faces in production and that matching the
     system stack was therefore correct. That was wrong: camps has served both
     since July, so the two B2B sites were the only surfaces off-brand, on 100%
     of their text.
     -------------------------------------------------------------------- */
  --font-display: 'AirForce', 'AirForce-fallback', 'MyriadPro', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: 'MyriadPro', 'MyriadPro-fallback', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* ---- Primary: Bright Turquoise (camps alias: cyan) ---- */
  --color-cyan-50:  #edfffe;
  --color-cyan-100: #c1ffff;
  --color-cyan-200: #83fdff;
  --color-cyan-300: #3efcff;
  --color-cyan-400: #04e7e7;
  --color-cyan-500: #00dcde;
  --color-cyan-600: #00adb3;
  --color-cyan-700: #00888e;
  --color-cyan-800: #006970;
  --color-cyan-900: #05575c;
  --color-cyan-950: #003439;
  --color-cyan:       #00dcde;
  --color-cyan-light: #83fdff;

  /* ---- Secondary: Shocking Pink ---- */
  --color-pink-50:  #fff0fd;
  --color-pink-100: #ffe3fd;
  --color-pink-200: #ffc6fa;
  --color-pink-300: #ff98f4;
  --color-pink-400: #ff58ea;
  --color-pink-500: #ff27db;
  --color-pink-600: #ff00bf;
  --color-pink-700: #df009b;
  --color-pink-800: #b80080;
  --color-pink-900: #98036c;
  --color-pink-950: #5f003e;
  --color-pink:       #ff00bf;
  --color-pink-light: #ff98f4;

  /* ---- Tertiary: Tan Hide ---- */
  --color-orange-50:  #fff6ed;
  --color-orange-100: #ffebd4;
  --color-orange-200: #ffd3a8;
  --color-orange-300: #ffb371;
  --color-orange-400: #ff9752;
  --color-orange-500: #fe6611;
  --color-orange-600: #ef4b07;
  --color-orange-700: #c63508;
  --color-orange-800: #9d2c0f;
  --color-orange-900: #7e2610;
  --color-orange-950: #441006;
  --color-orange: #ff9752;

  /* ---- Canonical brand names -> same scales ---- */
  --color-primary:   var(--color-cyan);
  --color-secondary: var(--color-pink);
  --color-tertiary:  var(--color-orange);

  /* ---- Legacy aliases. NOTE: "dark" is deep teal, not neutral black. ---- */
  --color-dark:     var(--color-cyan-950);
  --color-dark-mid: var(--color-cyan-900);

  /* ---- Surfaces + semantic ---- */
  --color-surface:           #f6f9f9;
  --color-surface-turquoise: #edfffe;
  --color-surface-pink:      #fff0fd;
  --color-surface-tan:       #fff6ed;
  --color-surface-panel:     #f0f7f7;
  --color-ink:               #0f1a1f;
  --color-ink-soft:          #2a3a40;
  --color-paper:             #ffffff;
  --color-muted:             #5c6e72;
  --color-muted-strong:      #4d6266;

  /* ---- Non-brand scales camps uses from Tailwind defaults ---- */
  --color-emerald-50:  #ecfdf5;
  --color-emerald-100: #d1fae5;
  --color-emerald-500: #10b981;
  --color-emerald-600: #059669;
  --color-emerald-700: #047857;
  --color-amber-100:   #fef3c7;
  --color-amber-400:   #fbbf24;
  --color-amber-700:   #b45309;
  --color-yellow-400:  #facc15;

  /* ---- Layout ---- */
  --container:      1280px;   /* camps max-w-7xl */
  --container-prose: 768px;   /* camps max-w-3xl */
  --container-mid:   896px;   /* camps max-w-4xl */
  --container-wide: 1152px;   /* camps max-w-6xl */
  --gutter: 1.5rem;           /* camps px-6 */
  --radius-sm: 0.75rem;
  --radius:    1rem;          /* rounded-2xl */
  --radius-lg: 1.5rem;        /* rounded-3xl */
}

/* ============================================================================
   Base
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--color-surface);
  color: var(--color-ink);
  overflow-x: hidden;
  /* A long unbroken string (an email address, a postcode list) must never be
     able to push the layout wider than the phone it is being read on. */
  overflow-wrap: break-word;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
input, textarea, select { color: var(--color-ink); font-family: var(--font-body); }

::selection { background: rgba(0, 220, 222, 0.2); color: var(--color-ink); }
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-cyan-700); border-radius: 3px; }

/* Visible, consistent focus for keyboard users (WCAG AA) */
:focus-visible {
  outline: 3px solid var(--color-cyan-700);
  outline-offset: 2px;
  border-radius: 4px;
}

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

.skip-link {
  position: absolute; left: 1rem; top: -3.5rem; z-index: 200;
  display: inline-flex; align-items: center; min-height: 2.75rem;
  background: var(--color-ink); color: #fff; padding: 0.6rem 1.25rem;
  border-radius: 9999px; font-size: 0.875rem; transition: top 0.2s ease;
}
.skip-link:focus { top: 1rem; }

/* ============================================================================
   Typography (camps .h1-.h4 / .p1 / .p2, verbatim)
   Every display heading is uppercase. That is the defining trait of the look.
   ========================================================================= */
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: inherit; }
p { margin: 0; }

.h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 2.5rem;
  line-height: 1.2;
  letter-spacing: -0.04em;
}
@media (min-width: 810px)  { .h1 { font-size: 3.625rem; } }
@media (min-width: 1200px) { .h1 { font-size: 4.5rem; } }

.h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 2.25rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
@media (min-width: 810px) { .h2 { font-size: 3.125rem; } }

.h3 { font-family: var(--font-display); font-size: 1.5rem;  line-height: 1.4; }
.h4 { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.4; }

.p1        { font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.6; }
.p1-medium { font-family: var(--font-body); font-weight: 500; font-size: 1.0625rem; line-height: 1.2; letter-spacing: -0.005em; }
.p1-italic { font-family: var(--font-body); font-style: italic; font-size: 1.0625rem; line-height: 1.7; }
.p2        { font-family: var(--font-body); font-size: 0.9375rem; line-height: 1.6; }

/* Section heading: what camps actually uses on <h2> (not .h2) */
.section-h2 {
  font-family: var(--font-display);
  font-size: 1.875rem;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--color-dark);
  letter-spacing: -0.01em;
}
@media (min-width: 768px) { .section-h2 { font-size: 2.25rem; } }

/* Big statement heading used on dark bands */
.statement-h2 {
  font-family: var(--font-display);
  font-size: 1.875rem;
  line-height: 1.15;
  text-transform: uppercase;
  color: #fff;
  letter-spacing: -0.01em;
}
@media (min-width: 768px) { .statement-h2 { font-size: 3rem; } }

/* Card headings deliberately switch to the body font on camps */
.card-h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--color-dark);
}
@media (min-width: 768px) { .card-h3 { font-size: 1.5rem; } }

.lead { font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.6; color: var(--color-ink-soft); }
.muted { color: var(--color-muted); }
.tabular { font-variant-numeric: tabular-nums; }

/* ============================================================================
   Layout
   ========================================================================= */
.container       { width: 100%; max-width: var(--container);       margin-inline: auto; padding-inline: var(--gutter); }
.container-prose { width: 100%; max-width: var(--container-prose); margin-inline: auto; padding-inline: var(--gutter); }
.container-mid   { width: 100%; max-width: var(--container-mid);   margin-inline: auto; padding-inline: var(--gutter); }
.container-wide  { width: 100%; max-width: var(--container-wide);  margin-inline: auto; padding-inline: var(--gutter); }

.section        { padding-block: 5rem; }
.section-md     { padding-block: 4rem; }
.section-sm     { padding-block: 2.5rem; }
.section-hero   { padding-top: 7rem; padding-bottom: 2.5rem; }
@media (min-width: 768px) {
  .section      { padding-block: 7rem; }
  .section-md   { padding-block: 6rem; }
  .section-sm   { padding-block: 3rem; }
  /* Interior heroes sit directly above a padded section, so a 6rem foot plus a
     7rem head left a 13rem hole. Keep the hero tall, close the gap. */
  .section-hero { padding-top: 9rem; padding-bottom: 3.5rem; }
}

/* Section bands — the alternating rhythm that carries the camps look */
.band-paper     { background: var(--color-paper); }
.band-surface   { background: var(--color-surface); }
.band-panel     { background: var(--color-surface-panel); }
.band-turquoise { background: var(--color-surface-turquoise); }
.band-pink      { background: var(--color-surface-pink); }
.band-tan       { background: var(--color-surface-tan); }
.band-ink       { background: var(--color-ink); color: rgba(255,255,255,0.62); }
.band-emerald   { background: rgba(236,253,245,0.7); border-block: 1px solid var(--color-emerald-100); }
.band-cyan-top  { background: var(--color-cyan-50); border-top: 2px solid rgba(0,220,222,0.3); }
.band-grad-pink { background: linear-gradient(to bottom, var(--color-pink-50), rgba(255,240,253,0.4), var(--color-paper)); }
.band-grad-brand{ background: linear-gradient(to bottom right, var(--color-pink-50), var(--color-cyan-50), var(--color-paper)); }
.band-grad-cool { background: linear-gradient(to bottom right, var(--color-cyan-50), var(--color-paper), rgba(255,0,191,0.05)); }

/* 4px three-colour brand rule */
.brand-rule { height: 4px; background: linear-gradient(to right, var(--color-cyan), var(--color-pink), var(--color-orange)); }

.grid { display: grid; gap: 2rem; }
.grid-2 { display: grid; gap: 2rem; }
.grid-2 > *, .grid-3 > *, .grid-4 > * { min-width: 0; }
.grid-3 { display: grid; gap: 1.5rem; }
.grid-4 { display: grid; gap: 2rem; }
@media (min-width: 640px) { .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 768px) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
}
.grid-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; align-items: center; }
.grid-hero > * { min-width: 0; }
@media (min-width: 1024px) { .grid-hero { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 4rem; } }

.stack   { display: flex; flex-direction: column; }
.row     { display: flex; flex-wrap: wrap; align-items: center; }
.gap-2   { gap: 0.5rem; }
.gap-3   { gap: 0.75rem; }
.gap-4   { gap: 1rem; }
.gap-6   { gap: 1.5rem; }
.center  { text-align: center; }
.mt-3 { margin-top: 0.75rem; } .mt-4 { margin-top: 1rem; }
.mt-5 { margin-top: 1.25rem; } .mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }    .mt-10 { margin-top: 2.5rem; }
.mt-12 { margin-top: 3rem; }   .mt-14 { margin-top: 3.5rem; }

/* ============================================================================
   Components (camps, verbatim)
   ========================================================================= */
.robo-btn,
.robo-btn-paid,
.robo-btn-haf,
.robo-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 9999px;
  padding: 0.625rem 1.25rem;
  font-family: var(--font-body);
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

/* Neutral brand chrome. Never a funding signal. */
.robo-btn { background-color: var(--color-cyan-800); color: var(--color-paper); box-shadow: 0 8px 20px -8px rgba(0,136,142,0.45); }
.robo-btn:hover { transform: translateY(-2px); background-color: var(--color-cyan-900); box-shadow: 0 12px 24px -8px rgba(0,136,142,0.6); }

/* The primary commercial CTA. */
.robo-btn-paid { background-color: var(--color-pink-700); color: var(--color-paper); box-shadow: 0 8px 20px -8px rgba(255,0,191,0.5); }
.robo-btn-paid:hover { transform: translateY(-2px); background-color: var(--color-pink-800); box-shadow: 0 12px 24px -8px rgba(255,0,191,0.6); }

/* Funded / HAF only. */
.robo-btn-haf { background-color: var(--color-emerald-500); color: var(--color-paper); box-shadow: 0 8px 20px -8px rgba(16,185,129,0.5); }
.robo-btn-haf:hover { transform: translateY(-2px); background-color: var(--color-emerald-600); box-shadow: 0 12px 24px -8px rgba(16,185,129,0.6); }

.robo-btn-secondary { background-color: var(--color-paper); color: var(--color-ink); box-shadow: inset 0 0 0 1px rgba(15,26,31,0.1); }
.robo-btn-secondary:hover { box-shadow: inset 0 0 0 1px rgba(15,26,31,0.25); }

.robo-btn:active, .robo-btn-paid:active, .robo-btn-haf:active { transform: scale(0.96); transition-duration: 0.05s; }

/* Size modifiers used at camps call sites */
.btn-lg { padding: 0.875rem 1.75rem; font-size: 1rem; }
.btn-md { padding: 0.875rem 1.75rem; font-size: 0.875rem; }
.btn-sm { padding: 0.5rem 0.75rem; font-size: 0.75rem; }

/* Outline button (camps writes this inline) */
.robo-btn-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  border-radius: 9999px; border: 2px solid var(--color-cyan-700);
  padding: 0.75rem 1.5rem; font-size: 0.875rem; font-weight: 700;
  color: var(--color-cyan-800); background: transparent; text-decoration: none;
  cursor: pointer; transition: background-color 0.2s ease;
}
.robo-btn-outline:hover { background-color: var(--color-cyan-50); }

/* Eyebrow / section badge */
.robo-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: 9999px;
  background-color: var(--color-cyan-50);
  color: var(--color-cyan-900);
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.4;
  box-shadow: inset 0 0 0 1px rgba(0,136,142,0.15);
}

.robo-card {
  border-radius: 1.5rem;
  background-color: var(--color-paper);
  padding: 1.75rem;
  box-shadow: 0 0 0 1px rgba(15,26,31,0.05), 0 10px 30px -15px rgba(81,38,160,0.18);
}

/* Bordered card — the dominant card on the camps marketing page */
.card {
  border-radius: var(--radius);
  background: var(--color-paper);
  border: 2px solid rgba(0,52,57,0.1);
  box-shadow: 0 1px 2px rgba(15,26,31,0.04);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.card:hover { border-color: rgba(0,220,222,0.4); box-shadow: 0 10px 25px -12px rgba(15,26,31,0.18); }
.card-pad { padding: 1.5rem; }
@media (min-width: 768px) { .card-pad { padding: 2rem; } }
.card-featured { border-color: var(--color-pink-400); background: var(--color-pink-50); }

.robo-gradient       { background: linear-gradient(135deg, var(--color-cyan-700), var(--color-cyan-600)); color: var(--color-paper); }
.robo-gradient-light { background: linear-gradient(135deg, var(--color-surface-turquoise), var(--color-surface-pink)); }

/* Pills / tags (camps venue cards) */
.pill {
  display: inline-flex; align-items: center; gap: 0.25rem;
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; padding: 0.375rem 0.75rem; border-radius: 9999px;
}
.pill-dark    { background: var(--color-dark); color: #fff; }
.pill-pink    { background: var(--color-pink-700); color: #fff; }
.pill-cyan    { background: var(--color-cyan-800); color: #fff; }
.pill-emerald { background: var(--color-emerald-500); color: #fff; }
.pill-soft-cyan    { background: var(--color-cyan-50); color: var(--color-cyan-800); }
.pill-soft-emerald { background: var(--color-emerald-100); color: var(--color-emerald-700); }
.pill-soft-amber   { background: var(--color-amber-100); color: var(--color-amber-700); }

/* Form controls */
.field {
  width: 100%; padding: 0.75rem 1rem; border-radius: var(--radius-sm);
  font-size: 0.875rem; color: var(--color-ink); background: #fff;
  border: 1px solid rgba(0,52,57,0.15); outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.field:focus { border-color: var(--color-cyan); box-shadow: 0 0 0 3px rgba(0,220,222,0.2); }
.field-label { display: block; font-size: 0.875rem; font-weight: 600; color: var(--color-dark); margin-bottom: 0.375rem; }
.field-req { color: var(--color-pink-700); margin-left: 0.25rem; }
.field.is-invalid { border-color: #b40020; background: #fff7f8; }
.field.is-invalid:focus { border-color: #b40020; box-shadow: 0 0 0 3px rgba(180,0,32,0.18); }
.field-error { margin-top: 0.375rem; font-size: 0.8125rem; font-weight: 600; color: #b40020; }

/* ============================================================================
   Backdrops — ported from HeroBackdrop.tsx
   Parent must be position:relative.
   ========================================================================= */
.backdrop {
  position: absolute; inset: 0; z-index: -10; overflow: hidden;
}
.backdrop-hero { background: var(--color-paper); }
.backdrop-vibrant { background: var(--color-ink); }

.backdrop::before {
  content: ""; position: absolute; inset: 0;
  background-size: 64px 72px;
}
.backdrop-hero::before {
  opacity: 0.05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 64' width='56' height='64'><path d='M28 4 L52 18 L52 46 L28 60 L4 46 L4 18 Z' fill='none' stroke='%230f1a1f' stroke-width='1'/></svg>");
}
.backdrop-vibrant::before {
  opacity: 0.08;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 64' width='56' height='64'><path d='M28 4 L52 18 L52 46 L28 60 L4 46 L4 18 Z' fill='none' stroke='%23ffffff' stroke-width='1'/></svg>");
}
/* Turquoise wash at the top of the light hero */
.backdrop-hero::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 85% 60% at 50% -10%, rgba(0,220,222,0.16) 0%, transparent 60%);
}

.blob { position: absolute; border-radius: 9999px; }

.backdrop-hero .blob-a { top: -20%; left: -10%; width: 55vw; height: 55vw; opacity: 0.35; background: radial-gradient(circle, #00dcde 0%, transparent 65%); filter: blur(80px); animation: blobA 22s ease-in-out infinite; }
.backdrop-hero .blob-b { top: 15%; right: -15%; width: 45vw; height: 45vw; opacity: 0.22; background: radial-gradient(circle, #ff98f4 0%, transparent 65%); filter: blur(90px); animation: blobB 28s ease-in-out infinite; }
.backdrop-hero .blob-c { bottom: -25%; left: 30%; width: 40vw; height: 40vw; opacity: 0.15; background: radial-gradient(circle, #ffb371 0%, transparent 65%); filter: blur(80px); animation: blobC 26s ease-in-out infinite; }

.backdrop-vibrant .blob-a { top: -15%; left: -10%; width: 60vw; height: 60vw; opacity: 0.80; background: radial-gradient(circle, #00dcde 0%, transparent 65%); filter: blur(70px); animation: blobA 20s ease-in-out infinite; }
.backdrop-vibrant .blob-b { top: 5%; right: -15%; width: 55vw; height: 55vw; opacity: 0.75; background: radial-gradient(circle, #ff00bf 0%, transparent 65%); filter: blur(75px); animation: blobB 24s ease-in-out infinite; }
.backdrop-vibrant .blob-c { bottom: -30%; left: 20%; width: 50vw; height: 50vw; opacity: 0.70; background: radial-gradient(circle, #ff9752 0%, transparent 65%); filter: blur(70px); animation: blobC 26s ease-in-out infinite; }
.backdrop-vibrant .blob-d { top: 35%; left: 40%; width: 35vw; height: 35vw; opacity: 0.50; background: radial-gradient(circle, #ff98f4 0%, transparent 65%); filter: blur(60px); animation: blobA 18s ease-in-out infinite reverse; }

/* ============================================================================
   Animations
   ========================================================================= */
@keyframes blobA { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(6vw,4vh) scale(1.05); } }
@keyframes blobB { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-5vw,6vh) scale(0.97); } }
@keyframes blobC { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(4vw,-5vh) scale(1.04); } }

@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.animate-marquee { animation: marquee 70s linear infinite; width: max-content; }
.animate-marquee:hover { animation-play-state: paused; }

@keyframes logo-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-100% / 6)); } }
.animate-logo-scroll { animation: logo-scroll 60s linear infinite; width: max-content; }
.animate-logo-scroll:hover { animation-play-state: paused; }

@keyframes gradient-shift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.animate-gradient { background-size: 200% 200%; animation: gradient-shift 6s ease infinite; }

@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.animate-float { animation: float 3s ease-in-out infinite; }

/* Scroll reveal.
   Content is VISIBLE by default and only hidden once JS has armed it, so a
   script failure can never blank the page (the old franchise homepage did
   exactly that). */
.reveal.is-armed { opacity: 0; transform: translateY(32px); }
.reveal.is-visible { opacity: 1; transform: none; transition: opacity 0.7s cubic-bezier(0.25,0.1,0.25,1), transform 0.7s cubic-bezier(0.25,0.1,0.25,1); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .animate-marquee, .animate-logo-scroll, .animate-gradient, .animate-float,
  .blob { animation: none !important; }
  .reveal.is-armed { opacity: 1; transform: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}

/* ============================================================================
   Shared chrome: header + footer
   Designed to be lifted wholesale into partners.robocode.uk and robocode.uk.
   ========================================================================= */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  transition: background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(15,26,31,0.05);
}
@media (min-width: 768px) {
  .site-header:not(.is-scrolled) {
    background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
    border-bottom-color: transparent;
  }
}
.site-header.is-scrolled { box-shadow: 0 1px 0 rgba(0,0,0,0.02); }

.site-nav { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); height: 4rem; display: flex; align-items: center; justify-content: space-between; }
.site-nav-logo { height: 2rem; width: auto; }
.site-nav-links { display: none; align-items: center; gap: 2rem; }
@media (min-width: 900px) { .site-nav-links { display: flex; } }
.site-nav-links a { font-size: 0.9375rem; font-weight: 500; color: rgba(15,26,31,0.7); text-decoration: none; transition: color 0.2s ease; }
.site-nav-links a:hover, .site-nav-links a[aria-current="page"] { color: var(--color-ink); }
.site-nav-actions { display: flex; align-items: center; gap: 0.5rem; }

.nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 9999px; border: 0; background: transparent; cursor: pointer; }
@media (min-width: 900px) { .nav-toggle { display: none; } }

.nav-panel {
  position: absolute; top: 4rem; left: 0.75rem; right: 0.75rem;
  background: rgba(255,255,255,0.97); backdrop-filter: blur(12px);
  box-shadow: 0 20px 50px -20px rgba(15,26,31,0.25), inset 0 0 0 1px rgba(15,26,31,0.1);
  border-radius: var(--radius); padding: 1rem; display: none;
}
/* The partners CTA reads "Become a partner", which is a pill the width of the
   logo on a 390px screen. Phones get the short form. */
.cta-short { display: none; }
@media (max-width: 599px) {
  .site-nav-actions .cta-long  { display: none; }
  .site-nav-actions .cta-short { display: inline; }
}

.nav-panel.is-open { display: block; }
@media (min-width: 900px) { .nav-panel { display: none !important; } }
.nav-panel a { display: block; padding: 0.75rem 0.5rem; font-weight: 500; text-decoration: none; color: var(--color-ink); }

.site-footer {
  background: var(--color-ink); color: rgba(255,255,255,0.6);
  border-top: 2px solid transparent;
  border-image: linear-gradient(to right, #00dcde, #ff00bf, #ff9752) 1;
}
.site-footer-grid { max-width: var(--container); margin-inline: auto; padding: 3.5rem var(--gutter); display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 2.5rem; font-size: 0.875rem; }
@media (min-width: 768px) { .site-footer-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.site-footer h2 { color: #fff; font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.75rem; }
.site-footer a { color: rgba(255,255,255,0.6); text-decoration: none; overflow-wrap: anywhere; }
.site-footer a:hover { color: #fff; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.site-footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding: 1.25rem var(--gutter); font-size: 0.75rem; color: rgba(255,255,255,0.6); text-align: center; }

/* ============================================================================
   Marketing patterns — shared by franchise and partners
   ========================================================================= */

/* Hero */
.hero { position: relative; overflow: hidden; }
.hero-photo {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(15,26,31,0.35), inset 0 0 0 1px rgba(15,26,31,0.05);
}
.hero-photo img { width: 100%; height: 360px; object-fit: cover; }
@media (min-width: 768px) { .hero-photo img { height: 480px; } }
.photo-caption {
  position: absolute; bottom: 1rem; left: 1rem;
  background: rgba(255,255,255,0.9); backdrop-filter: blur(6px);
  border-radius: 9999px; padding: 0.375rem 0.875rem;
  font-size: 0.75rem; font-weight: 500; color: var(--color-ink);
  box-shadow: 0 1px 3px rgba(15,26,31,0.12);
}

/* Trust strip */
.trust-strip { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.25rem; }
@media (min-width: 640px) { .trust-strip { gap: 3rem; } }
.trust-item { display: flex; align-items: baseline; gap: 0.5rem; }
.trust-num { font-size: 1.125rem; font-weight: 700; color: var(--color-cyan-800); }
.trust-label { font-size: 0.8125rem; color: var(--color-muted-strong); }
.trust-divider { width: 1px; height: 1.75rem; background: rgba(0,52,57,0.1); }

/* Stat / figure blocks */
.figure-num {
  font-family: var(--font-display); font-size: 2.25rem; line-height: 1;
  font-weight: 600; color: var(--color-cyan-700); letter-spacing: -0.02em;
}
@media (min-width: 768px) { .figure-num { font-size: 2.75rem; } }
.figure-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-muted-strong); margin-top: 0.5rem; }

/* Numbered steps */
.steps { counter-reset: step; display: grid; gap: 1rem; }
.step { counter-increment: step; position: relative; padding-left: 3.5rem; }
.step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  font-family: var(--font-display); font-size: 0.875rem; font-weight: 700;
  color: var(--color-cyan-900); background: var(--color-cyan-50);
  width: 2.5rem; height: 2.5rem; border-radius: 9999px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(0,136,142,0.15);
}

/* Data table */
.data-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.data-table th, .data-table td { text-align: left; padding: 0.875rem 1rem; border-bottom: 1px solid rgba(0,52,57,0.08); }
.data-table th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-muted-strong); font-weight: 700; }
.data-table td:last-child, .data-table th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.data-table tr.is-total td { font-weight: 700; color: var(--color-dark); border-bottom: 0; border-top: 2px solid rgba(0,52,57,0.15); }
/* min-width:0 matters: a grid or flex item defaults to min-width:auto, so
   without it the scroll container cannot shrink below its table's min-content
   and the overflow escapes onto the page instead of scrolling inside. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; min-width: 0; }

/* Photo rail (drag to explore) */
.rail { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: 1rem; scroll-snap-type: x mandatory; cursor: grab; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail:active { cursor: grabbing; }
.rail > * { flex: 0 0 auto; scroll-snap-align: center; width: 80%; max-width: 420px; }
@media (min-width: 640px) { .rail > * { width: 420px; } }
.rail img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); box-shadow: 0 1px 2px rgba(15,26,31,0.06), inset 0 0 0 1px rgba(15,26,31,0.05); }

/* Drag-to-explore hint, shown once until the rail is touched */
.rail-wrap { position: relative; }
.rail-hint {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  background: rgba(15,26,31,0.82); color: #fff; backdrop-filter: blur(6px);
  border-radius: 9999px; padding: 0.5rem 1rem; font-size: 0.8125rem; font-weight: 600;
  pointer-events: none; z-index: 2; transition: opacity 0.35s ease;
  box-shadow: 0 8px 24px -10px rgba(0,0,0,0.5);
}
.rail-wrap.has-interacted .rail-hint { opacity: 0; }

/* Auto-scrolling photo strip */
.marquee { overflow: hidden; }
.marquee-track { display: flex; gap: 1rem; width: max-content; }
.marquee-track img {
  width: 18rem; height: 13rem; object-fit: cover; border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 1px rgba(0,52,57,0.1);
  transition: box-shadow 0.2s ease;
}
@media (min-width: 768px) { .marquee-track img { width: 20rem; } }
.marquee-track img:hover { box-shadow: inset 0 0 0 2px rgba(0,220,222,0.5); }

/* Logo marquee */
.logo-track { display: flex; align-items: center; gap: 3.5rem; }
@media (min-width: 768px) { .logo-track { gap: 5rem; } }
.logo-track img { height: 2.5rem; width: auto; flex-shrink: 0; object-fit: contain; }
@media (min-width: 768px) { .logo-track img { height: 3rem; } }
/* An even grid rather than a wrapping flex row. Free-flowing, the last line
   centred under a full one and the gaps between marks read as accidental.
   Each cell is the same size, so a square crest and a wide wordmark sit on the
   same rhythm even though their widths differ. */
.logo-matrix {
  display: grid; gap: 1.5rem 1rem; align-items: center; justify-items: center;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (min-width: 640px)  { .logo-matrix { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .logo-matrix { grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 2rem 1.25rem; } }
/* Height stays explicit so a lazily loaded logo still reserves its box; the
   width cap plus object-fit is what stops a wide wordmark rendering three times
   the visual size of a square crest beside it. */
.logo-matrix img { height: 2.75rem; width: auto; max-width: 8.5rem; object-fit: contain; opacity: 0.7; transition: opacity 0.2s ease; }
@media (max-width: 599px) { .logo-matrix img { height: 2rem; max-width: 6.5rem; } }
.logo-matrix img:hover { opacity: 1; }

/* Quote rotator */
.quote-stage { position: relative; min-height: 210px; }
.quote { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.4s ease; }
.quote.is-active { opacity: 1; visibility: visible; position: relative; }
.quote-mark { position: absolute; top: -2.5rem; left: 50%; transform: translateX(-50%); font-family: Georgia, serif; font-size: 7.5rem; line-height: 1; color: rgba(255,0,191,0.1); pointer-events: none; user-select: none; }
.quote-dots { display: flex; justify-content: center; gap: 0.5rem; margin-top: 2rem; }
.quote-dot { width: 0.5rem; height: 0.5rem; border-radius: 9999px; border: 0; padding: 0; background: rgba(0,52,57,0.6); cursor: pointer; transition: width 0.2s ease, background-color 0.2s ease; }
.quote-dot.is-active { width: 1.5rem; background: var(--color-pink); }

/* Full-bleed CTA band */
.cta-band { position: relative; overflow: hidden; padding-block: 7rem; }
@media (min-width: 768px) { .cta-band { padding-block: 9rem; } }
.cta-band-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The pink end of this scrim was 0.22 opacity, so the photo came through
   almost unshaded on that side and the 17px body copy over it measured
   3.17:1 against the lightest pixel it sits on. The gradient keeps its
   character; every stop is just heavier. */
.cta-band-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom right, rgba(0,52,57,0.94), rgba(5,87,92,0.88), rgba(120,0,90,0.78)); }
.cta-band-inner { position: relative; z-index: 1; text-align: center; }
.grad-text { background: linear-gradient(to right, var(--color-cyan), var(--color-pink-light), var(--color-orange)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Notices */
@media (max-width: 640px) {
  .figure-num { font-size: 1.875rem; }
  .steps .step { padding-left: 3rem; }
  .quote-mark { font-size: 5rem; top: -1.75rem; }
  .cta-band { padding-block: 4.5rem; }
}

.notice { border-radius: var(--radius); padding: 1rem 1.25rem; font-size: 0.875rem; line-height: 1.6; }
.notice-tan { background: rgba(255,151,82,0.08); border-left: 3px solid var(--color-orange); color: var(--color-ink-soft); }
.notice-cyan { background: var(--color-cyan-50); color: var(--color-cyan-900); }

/* FAQ */
.faq details { border: 1px solid rgba(0,52,57,0.08); border-radius: var(--radius-sm); overflow: hidden; background: #fff; }
.faq details + details { margin-top: 0.75rem; }
.faq summary { list-style: none; cursor: pointer; padding: 1rem 1.5rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-weight: 600; font-size: 0.9375rem; color: var(--color-dark); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.25rem; color: var(--color-muted-strong); transition: transform 0.2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { background: rgba(246,249,249,0.6); }
.faq .faq-body { padding: 0 1.5rem 1.25rem; font-size: 0.9375rem; line-height: 1.65; color: rgba(0,52,57,0.7); }

/* Forms */
.form-grid { display: grid; gap: 1rem; }
@media (min-width: 640px) { .form-grid-2 { grid-template-columns: 1fr 1fr; } }
.form-note { font-size: 0.75rem; color: var(--color-muted); line-height: 1.6; }
.form-status { border-radius: var(--radius-sm); padding: 0.875rem 1rem; font-size: 0.875rem; margin-top: 1rem; display: none; }
.form-status.is-ok  { display: block; background: var(--color-emerald-100); color: var(--color-emerald-700); }
.form-status.is-err { display: block; background: #fee; color: #b40020; }

/* ============================================================================
   Brand faces. Same two files camps serves, self-hosted so no page on this site
   makes an external font request.

   AIR FORCE is a display face with one weight. It is declared across the whole
   weight range so a heading asking for 600 or 800 gets the real face rather
   than silently falling through to Myriad. Myriad Pro carries the body.
   ========================================================================= */
/* Metric-matched fallbacks.

   Shipping the brand faces introduced layout shift: the fallback and the real
   face set text at different widths, so headings re-wrapped when the swap
   landed and everything below them moved. Measured CLS was 0.309 on partners
   and 0.161 on franchise, both worse than Google's 0.1 threshold, and blocking
   the woff2 requests took both to exactly 0.000, which proves the cause.

   These two faces re-serve the local system font at the measured ratio, so the
   fallback occupies the same space the real face will. Ratios measured live at
   100px against Arial: AIR FORCE 1417/1678 = 84.44%, Myriad Pro 1420/1678 =
   84.63%. Ascent and descent are overridden so the line box height matches too
   (AIR FORCE 101% of em, Myriad Pro 120%). */
@font-face {
  font-family: 'AirForce-fallback';
  src: local('Arial'), local('Helvetica'), local('Liberation Sans');
  size-adjust: 84.44%;
  ascent-override: 96%;
  descent-override: 24%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'MyriadPro-fallback';
  src: local('Arial'), local('Helvetica'), local('Liberation Sans');
  size-adjust: 84.63%;
  ascent-override: 112%;
  descent-override: 30%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'AirForce';
  src: url('/assets/AirForce.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'MyriadPro';
  src: url('/assets/MyriadPro-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Icon + copy list. Replaces a bare bulleted list where each item read as the
   same sentence four times over. */
.launch-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.launch-list > li { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: 0.875rem; align-items: start; }
.launch-icon {
  width: 2.25rem; height: 2.25rem; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 0.625rem;
  background: var(--color-cyan-50);
  box-shadow: inset 0 0 0 1px rgba(0,105,112,0.16);
  color: var(--color-cyan-800);
}
.launch-icon svg { width: 1.25rem; height: 1.25rem; display: block; }
.launch-list .p2 { color: var(--color-ink-soft); margin: 0; }
.launch-list strong { color: var(--color-ink); }


/* ============================================================================
   Phone step
   ----------------------------------------------------------------------------
   The scale below was lifted from camps, whose base tier starts at 810px. On a
   390px phone that left 40px uppercase display type, a 17px body and a full
   size header CTA competing with the logo, so the pages read as a desktop
   layout squeezed narrow rather than a design made for the device. This tier
   steps type, spacing and the header down for phones. Nothing above 600px is
   affected.
   ========================================================================= */
@media (max-width: 599px) {
  .h1           { font-size: 2rem; letter-spacing: -0.03em; }
  .h2           { font-size: 1.75rem; }
  .h3           { font-size: 1.3125rem; }
  .section-h2   { font-size: 1.5rem; }
  .statement-h2 { font-size: 1.5rem; }
  .card-h3      { font-size: 1.125rem; }
  .p1, .p1-medium, .p1-italic { font-size: 1rem; }
  .lead         { font-size: 1rem; }

  /* Sections were spending a third of a phone screen on empty space. */
  .section     { padding-block: 3rem; }
  .section-md  { padding-block: 2.5rem; }
  .section-sm  { padding-block: 2rem; }
  .section-hero { padding-top: 5.5rem; padding-bottom: 2rem; }

  /* The header CTA was as wide as the logo. Keep it, shrink it, drop the arrow. */
  .site-nav-logo { height: 1.75rem; }
  .site-nav-actions .robo-btn-paid { padding: 0.625rem 1rem; font-size: 0.8125rem; }
  .site-nav-actions .robo-btn-paid span[aria-hidden] { display: none; }

  /* Full width CTAs read as deliberate on a phone; half width ones read broken. */
  .row.gap-3 > .robo-btn-paid,
  .row.gap-3 > .robo-btn-secondary,
  .row.gap-3 > .robo-btn { width: 100%; }
  .row.gap-3 { flex-direction: column; align-items: stretch; }

  /* Every tap target at least 44px, per the platform guidance. */
  .robo-btn, .robo-btn-paid, .robo-btn-haf, .robo-btn-secondary { min-height: 2.75rem; }
  .site-footer a, .nav-panel a { min-height: 2.75rem; display: flex; align-items: center; }

  /* The carousel dots were 8x8. WCAG 2.5.8 wants 24px minimum and the platform
     guidance 44px, so the visible dot stays small and the hit area grows around
     it. Same trick for the range inputs, whose thumb was a 24px strip. */
  .quote-dots { gap: 0; }
  .quote-dot { padding: 1.125rem 0.625rem; background-clip: content-box; box-sizing: content-box; }
  .nav-toggle { width: 2.75rem; height: 2.75rem; }
  .site-nav > a:first-child { display: inline-flex; align-items: center; min-height: 2.75rem; }
  input[type="range"] { height: 2.75rem; }

  /* iOS Safari zooms the page when a focused input is under 16px and never
     zooms back out. Every field on both enquiry forms was 14px. */
  .field, .portal-input-group input, input[type="text"], input[type="email"],
  input[type="tel"], input[type="number"], input[type="password"], select, textarea {
    font-size: 1rem;
  }

  /* The consent checkbox was the smallest control on the form at 13x17.6, and
     it is the one that has to be ticked to submit. */
  input[type="checkbox"] { width: 1.375rem; height: 1.375rem; flex-shrink: 0; }

  /* Tables inside cards are label/value pairs, not comparisons. Tighten the
     padding and let the label wrap so the value column is never pushed off. */
  .data-table th, .data-table td { padding: 0.625rem 0.5rem; font-size: 0.875rem; }
  .card .data-table td:first-child { white-space: normal; }
  .data-table td:last-child, .data-table th:last-child { white-space: nowrap; }
}

/* Any table wider than its container keeps its row label pinned, so a figure is
   never left with nothing identifying it, and says out loud that it scrolls. */
.data-table th[scope="row"] {
  position: sticky; left: 0; z-index: 1;
  background: var(--color-paper);
  box-shadow: 1px 0 0 rgba(0,52,57,0.08);
}
.table-scroll { position: relative; }
.table-scroll.is-scrollable::after {
  content: "Scroll for the rest";
  display: block; margin-top: 0.5rem;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--color-muted-strong);
}
@media (min-width: 768px) { .table-scroll.is-scrollable::after { content: none; } }

/* Card icon. Used where a grid of cards would otherwise be six identical
   blocks of text with nothing to scan by. */
.card-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; border-radius: 0.75rem;
  background: var(--color-cyan-50);
  box-shadow: inset 0 0 0 1px rgba(0,105,112,0.16);
  color: var(--color-cyan-800);
}
.card-icon svg { width: 1.375rem; height: 1.375rem; display: block; }
.card-featured .card-icon { background: var(--color-pink-50); box-shadow: inset 0 0 0 1px rgba(184,0,128,0.16); color: var(--color-pink-800); }

/* A compact logo row for use beside the text that names the bodies, rather
   than a decorative strip somewhere unrelated. */
.awarding-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1.75rem; }
.awarding-row img { height: 1.75rem; width: auto; opacity: 0.75; filter: grayscale(1); transition: opacity 0.2s ease, filter 0.2s ease; }
.awarding-row img:hover { opacity: 1; filter: none; }
@media (max-width: 599px) { .awarding-row { gap: 1.25rem; } .awarding-row img { height: 1.5rem; } }

/* One accreditation shown as a logo and the next two typed out as letters read
   as a placeholder nobody finished. All three are marks now, normalised to a
   common optical height rather than a common box. */

/* Logo strips: constrain by height AND width so a wide wordmark cannot render
   three times the size of a square crest beside it. */

/* Prose lists. Left to the browser these render a default disc at a 40px UA
   indent, which sits outside the type scale and outside the palette. */
.prose-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.625rem; }
.prose-list > li { position: relative; padding-left: 1.5rem; color: var(--color-ink-soft); }
.prose-list > li::before {
  content: ""; position: absolute; left: 0.125rem; top: 0.6em;
  width: 0.4375rem; height: 0.4375rem; border-radius: 9999px;
  background: var(--color-cyan-800);
}

/* Second row of the stats strip: the accreditation marks sit under the numbers
   as verification rather than competing with them as stats.

   Each mark gets an identical box with object-fit:contain, not just a shared
   height. Constrained by height alone, BCS (a tall narrow crest) rendered 22px
   wide next to Ofsted at 54px and the row read as an accident. */
.trust-marks {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 1rem 2.5rem; margin-top: 1.5rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(0,52,57,0.1);
}
.trust-item-logo { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.trust-item-logo img {
  height: 2.25rem; width: 6rem; object-fit: contain; object-position: center;
}
@media (max-width: 599px) {
  /* The numbers wrap on a phone, which leaves a divider dangling at the end of
     a row with nothing after it. The wrap itself separates them. */
  .trust-divider { display: none; }
  .trust-strip { gap: 0.75rem 1.75rem; }
  .trust-marks { gap: 0.875rem 1.25rem; margin-top: 1.25rem; padding-top: 1.25rem; }
  .trust-item-logo img { height: 1.75rem; width: 4.5rem; }
  .trust-item-logo .trust-label { font-size: 0.75rem; text-align: center; }
}