/* ==========================================================================
   Eightstep tokens and common components
   Values from the Eightstep design system. Link before styles.css.
   ========================================================================== */

/* ---------- Fonts: Figtree variable, 300 to 900 ---------- */
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("/assets/fonts/Figtree-Variable-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("/assets/fonts/Figtree-Variable-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ---------- Palette (add further ramp steps as pages need them) ---------- */
  --mclaren-100: #FFEBB3;
  --mclaren-300: #FFCB4D;
  --mclaren-400: #FFBA22;
  --mclaren-500: #FFA902;
  --mclaren-600: #D18A00;
  --coral-100: #FDE2DF;
  --coral-300: #FAB0A8;
  --coral-500: #F88379;
  --ember-50: #FFF3E8;
  --ember-300: #FCA166;
  --ember-700: #AE3C00;
  --green-50: #EBF7EA;
  --green-500: #3DAE4F;
  --green-800: #1E6B2B;
  --neutral-0: #FFFFFF;
  --neutral-25: #FFFCF7;
  --neutral-50: #FAF4E8;
  --neutral-100: #F3EBDC;
  --neutral-200: #E7DCC8;
  --neutral-300: #D3C5AD;
  --neutral-400: #B0A188;
  --neutral-500: #8C7E67;
  --neutral-600: #685B46;
  --neutral-700: #4B402F;
  --neutral-800: #31281A;
  --neutral-950: #1B1200;

  /* ---------- Semantic aliases ---------- */
  --surface-page: var(--neutral-25);
  --surface-header: color-mix(in srgb, var(--neutral-25) 85%, transparent);
  --surface-hover: var(--neutral-100);
  --surface-sunken: var(--neutral-50);
  /* Mega menu glass: a 50% rim around an 80% panel, about 90% where they overlap */
  --surface-menu-edge: color-mix(in srgb, var(--neutral-25) 50%, transparent);
  --surface-menu: color-mix(in srgb, var(--neutral-0) 80%, transparent);
  --text-primary: var(--neutral-950);
  --text-secondary: var(--neutral-600);
  --border-subtle: var(--neutral-100);
  --border-field: var(--neutral-300);
  --border-field-hover: var(--neutral-500);
  --control-ring: 0 0 0 3px rgba(27, 18, 0, .12);
  --surface-card: var(--neutral-0);
  --surface-glass: color-mix(in srgb, var(--neutral-0) 78%, transparent);
  --surface-inverse: var(--neutral-950);
  --text-inverse: var(--neutral-25);
  --text-inverse-muted: var(--neutral-400);
  --border-inverse: color-mix(in srgb, var(--neutral-25) 12%, transparent);

  --status-success-bg: var(--green-50);
  --status-success-fg: var(--green-800);
  --status-success-solid: var(--green-500);
  --status-danger-bg: var(--ember-50);
  --status-danger-fg: var(--ember-700);
  --status-neutral-bg: var(--neutral-100);
  --status-neutral-fg: var(--neutral-700);
  --status-on-solid: var(--neutral-950);

  /* Top-of-page glow: McLaren from the top left, coral from the top right.
     main.js reads these for the arch lines, so keep them as hex */
  --glow-left: var(--mclaren-500);
  --glow-right: var(--coral-500);

  /* Proof loop: read by main.js, so keep these as hex. Strands shade from
     far to near as the ribbon turns */
  --loop-far: var(--neutral-200);
  --loop-near: var(--neutral-400);
  --loop-glint: var(--neutral-600);
  --loop-glow: var(--neutral-100);

  --action-cta-bg: var(--mclaren-500);
  --action-cta-bg-hover: var(--mclaren-400);
  --action-cta-bg-pressed: var(--mclaren-600);
  --action-cta-fg: var(--neutral-950);

  --action-secondary-bg: var(--neutral-100);
  --action-secondary-bg-hover: var(--neutral-200);
  --action-secondary-bg-pressed: var(--neutral-300);

  --focus-ring: 0 0 0 2px var(--surface-page), 0 0 0 4px var(--neutral-950);
  /* On ink: the gap takes the ink, the ring goes light */
  --focus-ring-inverse: 0 0 0 2px var(--surface-inverse), 0 0 0 4px var(--neutral-25);

  /* ---------- Typography ---------- */
  --font-sans: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --weight-light: 300;
  --weight-regular: 400;
  --weight-semibold: 600;
  --text-2xs: 11px;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-2xl: 24px;
  --text-3xl: 36px;
  --text-title: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  --text-stat: clamp(2.5rem, 1.75rem + 2.4vw, 3.5rem);
  --text-lead: clamp(1.125rem, 1rem + .5vw, 1.375rem);
  --text-display: clamp(2.5rem, 1.5rem + 4.4vw, 4.5rem);
  /* A step below display, for the split hero on service pages */
  --text-headline: clamp(2.25rem, 1.6rem + 2vw, 3.25rem);
  --leading-display: 1.05;
  --leading-tight: 1.1;
  --leading-normal: 1.5;
  --tracking-tight: -0.02em;

  /* ---------- Spacing (4px base) and layout ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-32: 128px;
  --space-section-sm: 100px;
  --space-section-md: 150px;
  --space-section-lg: 200px;
  --control-h-md: 40px;
  --control-h-lg: 48px;
  --layout-gutter: 20px;
  --layout-max: 1200px;
  --layout-measure: 660px;   /* an article's reading column: title, byline and body */
  --header-h: 72px;

  /* ---------- Layers and effects ---------- */
  --z-sticky: 100;
  --blur-header: 12px;
  --blur-menu: 20px;
  --shadow-xs: 0 1px 2px rgba(27, 18, 0, .06);
  --shadow-md: 0 2px 4px rgba(27, 18, 0, .05), 0 8px 20px rgba(27, 18, 0, .08);
  --shadow-lg: 0 4px 8px rgba(27, 18, 0, .05), 0 20px 40px rgba(27, 18, 0, .12);

  /* ---------- Radii ---------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 999px;

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --duration-instant: 80ms;
  --duration-fast: 140ms;
  --duration-base: 200ms;
  --duration-slow: 600ms;
  --transition-control: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), transform var(--duration-instant) var(--ease-out);
}

@media (min-width: 768px) {
  :root {
    --layout-gutter: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0ms;
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}

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

body {
  margin: 0;
  font: var(--weight-regular) var(--text-md)/var(--leading-normal) var(--font-sans);
  color: var(--text-primary);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p { margin: 0; }

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

/* Links inside running text, such as from the CMS: ink, underlined */
a:not([class]) {
  border-radius: var(--radius-xs);
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
a:not([class]):hover { text-decoration-thickness: 2px; }

:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ==========================================================================
   Button
   ========================================================================== */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--control-h-md);
  padding: 0 var(--space-4);
  border: 0;
  border-radius: var(--radius-md);
  font: inherit;
  font-weight: var(--weight-semibold);
  line-height: 1;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: var(--transition-control);
}
.button:active { transform: translateY(1px); }

.button--accent { background: var(--action-cta-bg); color: var(--action-cta-fg); }
.button--accent:hover { background: var(--action-cta-bg-hover); }
.button--accent:active { background: var(--action-cta-bg-pressed); }

.button--secondary { background: var(--action-secondary-bg); color: var(--text-primary); }
.button--secondary:hover { background: var(--action-secondary-bg-hover); }
.button--secondary:active { background: var(--action-secondary-bg-pressed); }

.button--lg {
  height: var(--control-h-lg);
  padding: 0 var(--space-5);
}

/* ==========================================================================
   Icon button: a square secondary button holding one stroked SVG icon
   ========================================================================== */
.icon-button {
  display: grid;
  place-items: center;
  width: var(--control-h-md);
  height: var(--control-h-md);
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--action-secondary-bg);
  color: var(--text-primary);
  cursor: pointer;
  transition: var(--transition-control);
}
.icon-button:hover { background: var(--action-secondary-bg-hover); }
.icon-button:active { background: var(--action-secondary-bg-pressed); }

.icon-button svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* A plus that turns into a minus: draw it as two paths and give the upright
   this class. It lies flat when its control is expanded or its details open. */
.icon-plus__upright {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform var(--duration-slow) var(--ease-out);
}
[aria-expanded="true"] .icon-plus__upright,
details[open] > summary .icon-plus__upright { transform: rotate(90deg); }

/* ==========================================================================
   Dark mode: the semantic colours swap to their dark-mode values inside a
   dark panel, or any container with data-theme="dark". Status on ink uses
   the design system's deep warm-tinted fills and lifted solids.
   ========================================================================== */
.dark-panel,
[data-theme="dark"] {
  --text-primary: var(--neutral-25);
  --text-secondary: var(--neutral-400);
  --border-subtle: var(--border-inverse);
  --action-secondary-bg: color-mix(in srgb, var(--neutral-25) 10%, transparent);
  --action-secondary-bg-hover: color-mix(in srgb, var(--neutral-25) 16%, transparent);
  --focus-ring: var(--focus-ring-inverse);
  --status-success-bg: #17280F;
  --status-success-fg: #8EDB98;
  --status-success-solid: #4CC25E;
  --status-danger-bg: #3A1605;
  --status-danger-fg: var(--ember-300);
  --status-neutral-bg: var(--neutral-800);
  --status-neutral-fg: var(--neutral-200);
}

/* ==========================================================================
   Dark panel: any block's content in dark mode, as an ink panel a little
   wider than the content column. Its side padding equals how far it reaches
   past the column, so the content inside lines up with the blocks above
   and below.
   ========================================================================== */
.dark-panel {
  --panel-bleed: calc(var(--layout-gutter) - var(--space-2));
  margin-inline: calc(var(--panel-bleed) * -1);
  padding: var(--space-16) var(--panel-bleed);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(70% 60% at 50% 0%, color-mix(in srgb, var(--neutral-700) 55%, transparent), transparent),
    var(--surface-inverse);
  color: var(--text-primary);
}

@media (min-width: 1024px) {
  .dark-panel { padding-block: var(--space-section-sm); }
}

/* Wide screens have room beside the column for a deeper reach */
@media (min-width: 1360px) {
  .dark-panel { --panel-bleed: var(--space-12); }
}

/* ==========================================================================
   Section heading
   ========================================================================== */
.section-title {
  font-size: var(--text-title);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

/* A block's heading and intro paragraph, above its content */
.section-intro {
  display: grid;
  gap: var(--space-4);
  margin-bottom: var(--space-10);
}

.section-intro__lead {
  max-width: 44ch;
  font-size: var(--text-lead);
}

/* ==========================================================================
   Card: white on paper, no border, soft shadow
   ========================================================================== */
.card {
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--shadow-xs);
}

/* ==========================================================================
   Field: a label above its input. Fields are the only bordered elements.
   ========================================================================== */
.field {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.field__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.field__optional {
  color: var(--text-secondary);
  font-weight: var(--weight-regular);
}

/* On an input or a textarea */
.input {
  width: 100%;
  height: var(--control-h-md);
  padding: 0 var(--space-3);
  border: 1px solid var(--border-field);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  color: var(--text-primary);
  font: inherit;
  transition: border-color var(--duration-fast) var(--ease-out);
}

.input:hover { border-color: var(--border-field-hover); }

.input:focus-visible {
  border-color: var(--text-primary);
  box-shadow: var(--control-ring);
}

.input--multiline {
  height: auto;
  padding: var(--space-3);
  resize: vertical;
}

/* ==========================================================================
   Badge: tinted status label
   ========================================================================== */
.badge {
  display: inline-flex;
  align-items: center;
  flex: none;
  padding: 2px var(--space-2);
  border-radius: var(--radius-xs);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1.5;
  white-space: nowrap;
}
.badge--success { background: var(--status-success-bg); color: var(--status-success-fg); }
.badge--danger { background: var(--status-danger-bg); color: var(--status-danger-fg); }
.badge--neutral { background: var(--status-neutral-bg); color: var(--status-neutral-fg); }

/* ==========================================================================
   Spacing utilities
   Named by pixel value. styles.css loads after this file, so a section rule
   that sets the same padding or margin overrides the utility: let the
   utility own that property.
   ========================================================================== */
.p-100  { padding: var(--space-section-sm); }
.p-150  { padding: var(--space-section-md); }
.p-200  { padding: var(--space-section-lg); }
.pt-100 { padding-top: var(--space-section-sm); }
.pt-150 { padding-top: var(--space-section-md); }
.pt-200 { padding-top: var(--space-section-lg); }
.pr-100 { padding-right: var(--space-section-sm); }
.pr-150 { padding-right: var(--space-section-md); }
.pr-200 { padding-right: var(--space-section-lg); }
.pb-100 { padding-bottom: var(--space-section-sm); }
.pb-150 { padding-bottom: var(--space-section-md); }
.pb-200 { padding-bottom: var(--space-section-lg); }
.pl-100 { padding-left: var(--space-section-sm); }
.pl-150 { padding-left: var(--space-section-md); }
.pl-200 { padding-left: var(--space-section-lg); }
.px-100 { padding-inline: var(--space-section-sm); }
.px-150 { padding-inline: var(--space-section-md); }
.px-200 { padding-inline: var(--space-section-lg); }
.py-100 { padding-block: var(--space-section-sm); }
.py-150 { padding-block: var(--space-section-md); }
.py-200 { padding-block: var(--space-section-lg); }

.m-100  { margin: var(--space-section-sm); }
.m-150  { margin: var(--space-section-md); }
.m-200  { margin: var(--space-section-lg); }
.mt-100 { margin-top: var(--space-section-sm); }
.mt-150 { margin-top: var(--space-section-md); }
.mt-200 { margin-top: var(--space-section-lg); }
.mr-100 { margin-right: var(--space-section-sm); }
.mr-150 { margin-right: var(--space-section-md); }
.mr-200 { margin-right: var(--space-section-lg); }
.mb-100 { margin-bottom: var(--space-section-sm); }
.mb-150 { margin-bottom: var(--space-section-md); }
.mb-200 { margin-bottom: var(--space-section-lg); }
.ml-100 { margin-left: var(--space-section-sm); }
.ml-150 { margin-left: var(--space-section-md); }
.ml-200 { margin-left: var(--space-section-lg); }
.mx-100 { margin-inline: var(--space-section-sm); }
.mx-150 { margin-inline: var(--space-section-md); }
.mx-200 { margin-inline: var(--space-section-lg); }
.my-100 { margin-block: var(--space-section-sm); }
.my-150 { margin-block: var(--space-section-md); }
.my-200 { margin-block: var(--space-section-lg); }