/* Design tokens. Every colour, size, radius and timing used on the site is
   defined here. Nothing else in the codebase hardcodes these values.

   Pages alternate dark and light sections. The :root values below are the dark
   theme; a section opts into the light one with .theme-light (bottom of this
   file), which only redefines the colour tokens. The choice is made per
   section, never from prefers-color-scheme: visitors get the same brand look
   regardless of their OS setting. */

:root {
  /* ---- Surfaces ---------------------------------------------------------
     Graphite, slightly cooler and darker than the Synack reference. */
  --c-bg: #1c1c1e;
  --c-bg-deep: #141416;        /* hero wash, footer */
  --c-surface: #242427;        /* cards */
  --c-surface-raised: #2b2b2f; /* card hover, inputs */
  --c-border: #35353a;
  --c-border-soft: #2a2a2e;

  /* ---- Accent -----------------------------------------------------------
     Burnt orange (owner decision 2026-10-23, replacing coral). --c-accent is
     for fills, borders, bars and badges, and is dark enough for white text on
     it (5.2:1). --c-accent-text is the only accent allowed on text; it is
     lighter so it holds 6.6:1 on --c-bg, and
     .theme-light swaps in a darker one for light backgrounds. */
  --c-accent: #c2410c;
  --c-accent-strong: #a83809;  /* hover / active */
  --c-accent-text: #ff7a3d;    /* 6.6:1 on --c-bg */
  --c-accent-soft: #e8955a;    /* highlighted words in the home heading, 7.6:1 on --c-bg */
  --c-accent-wash: rgba(255, 122, 61, 0.1);
  --c-accent-line: rgba(255, 122, 61, 0.5);
  --c-accent-glow: rgba(255, 122, 61, 0.16); /* soft radial wash in heroes */
  --badge-size: 3.225rem;      /* credential badge art on About */
  --badge-col: 6.5rem;         /* one badge column: fits the longest label */
  --c-ok: #7fcfa4;             /* "fixed" / "in scope" green, on dark bands */
  --c-ok-wash: rgba(127, 207, 164, 0.1);
  --c-ok-line: rgba(127, 207, 164, 0.55);
  --c-surface-hot: #2a201b;    /* a lit node in a hero illustration */
  --c-text-faint: #85858c;     /* 4.9:1 — small mono labels in illustrations */
  --c-chip-text: #c9c9ce;      /* detail line under an illustration chip */
  --c-glitch: #4fd0d0;         /* cyan fringe in the hover glitch, paired with --c-accent-text */

  /* ---- Text -------------------------------------------------------------
     Body copy is light grey, never red. */
  --c-text: #e8e8ea;           /* 14.2:1 */
  --c-text-muted: #9a9aa0;     /* 6.0:1  — body copy, still AA */
  --c-text-dim: #8a8a92;       /* 5.1:1 on --c-bg, 5.5:1 on --c-bg-deep */
  --c-field-border: #6b6b72;   /* ~3.5:1 form field edges on dark bands (WCAG 1.4.11) */
  --c-text-inverse: #16161a;   /* on light fills */
  --c-on-accent: #ffffff;      /* text on --c-accent fills */

  /* ---- Focus ------------------------------------------------------------ */
  --c-focus: #ffffff;
  --focus-width: 2px;
  --focus-offset: 3px;

  /* ---- Type -------------------------------------------------------------
     Barlow Condensed for headings, Barlow for body, JetBrains Mono for small
     labels and numbers. Self-hosted; see assets/css/fonts.css.
     The fallbacks cover the swap window and any failed font load. */
  --font-display: "Barlow Condensed", "Arial Narrow", "Segoe UI", system-ui, sans-serif;
  --font-body: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* One type scale for every page, fluid between a 375px and a 1440px
     window. Each step is clearly smaller than the one above it, and
     nothing outside the home page heading is larger than an h1. */
  --fs-hero: clamp(2.5rem, 2.1rem + 1.6vw, 3.625rem);   /* 40–58px home page heading */
  --fs-h1: clamp(2.25rem, 1.9rem + 1.5vw, 3.25rem);     /* 36–52px every other page heading */
  --fs-h2: clamp(1.75rem, 1.53rem + 0.94vw, 2.375rem);  /* 28–38px section headings */
  --fs-h3: clamp(1.25rem, 1.16rem + 0.38vw, 1.5rem);    /* 20–24px cards, steps, columns */
  --fs-stat: clamp(2.25rem, 1.99rem + 1.13vw, 3rem);    /* 36–48px track record numbers */
  --fs-card: var(--fs-h3);                              /* card and step titles */
  --fs-lead: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);   /* 17–20px line under a heading */
  --lh-lead: 1.5;
  --fs-body: 1rem;                                      /* 16px, 17px from 61.25em (below) */
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;
  --fs-micro: 0.75rem;   /* small mono labels */

  --lh-tight: 1.05;
  --lh-heading: 1.15;
  --lh-body: 1.65;

  --ls-display: -0.02em;
  --lh-stat: 1;
  --ls-heading: -0.01em;
  --ls-caps: 0.14em;     /* letter-spaced caps labels */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---- Spacing ----------------------------------------------------------
     4px base. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5rem;
  --space-11: 6rem;
  --space-12: 8rem;

  /* Space above and below the hero copy. */
  --hero-pad-top: clamp(3rem, 2rem + 3vw, 4.5rem);
  --hero-pad-bottom: clamp(2.5rem, 2rem + 2.5vw, 4rem);

  /* Vertical rhythm between page sections. */
  --section-gap: clamp(2.5rem, 1.5rem + 4vw, 4rem);

  /* ---- Layout ----------------------------------------------------------- */
  --container: 1180px;
  --container-narrow: 760px;
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 3rem);
  --hero-scroll-size: 2.75rem; /* tap target of the scroll hint at the foot of the home hero */
  --header-height: 64px;
  --header-height-m: 56px;     /* the bar below 61.25em */
  --measure: 68ch;             /* longest comfortable line for body text */

  /* ---- How we work journey (home) ---------------------------------------- */
  --journey-node: 3.5rem;      /* the square node on the path */
  --journey-icon: 2.125rem;
  --journey-track: 2px;
  --journey-gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  --journey-sheet-w: 13.75rem; /* the little scope / scan / report sheets */
  --journey-sheet-h: 7.25rem;
  --journey-dur: 2000ms;       /* path fill, first node to the last */
  --journey-step: 520ms;       /* delay between nodes lighting up */
  --ease-journey: cubic-bezier(0.45, 0, 0.2, 1);
  --fs-journey-name: var(--fs-h3);
  --fs-sheet: 0.65625rem;
  --fs-chip: 0.625rem;

  /* ---- Home services list ----------------------------------------------- */
  --svc-icon: 1.875rem;        /* line icon in each row */
  --svc-icon-stroke: 1.5px;    /* real 1.5px at any icon size */
  --svc-name-lg: clamp(1.25rem, 1.05rem + 0.5vw, 1.5rem); /* row titles, desktop */
  --svc-col-icon: 2.75rem;     /* desktop columns: icon, name, line, arrow */
  --svc-col-name: 1.1fr;
  --svc-col-line: 1fr;
  --svc-col-go: 2rem;
  --svc-rule: 2px;             /* heavy rule above the list */
  --svc-underline: 2px;        /* name underline on hover */
  --svc-lh: 1.5;               /* summary line */

  /* ---- Page intros ------------------------------------------------------ */
  --intro-grid-cell: 4rem;     /* the faint squares behind every page's first band */
  --page-intro-pad: clamp(3rem, 2rem + 4vw, 5rem);
  --fs-page-title: var(--fs-h1);
  --fs-founder-name: clamp(2rem, 1.59rem + 1.5vw, 3rem); /* 32–48px, below the h1 */
  --fs-founder-quote: clamp(1.375rem, 1.15rem + 1vw, 1.875rem);
  --fs-fact: clamp(1.625rem, 1.3rem + 1.4vw, 2.25rem);
  --cred-badge-h: 4rem;        /* badge art in the credential strip */
  --team-icon: 2rem;
  --next-dot: 1.75rem;         /* numbered circle in "What happens next" */

  /* Site header */
  --logo-h-header: 1.925rem;      /* 30.8px lockup: 22px letters, lighthouse 1.4x */
  --fs-nav-btn: 0.875rem;         /* 14px "Get in touch" */
  --fs-nav-lang: 0.75rem;         /* 12px EN / ES */
  --nav-gap: 1.875rem;            /* 30px between nav items */
  --nav-btn-h: 2.25rem;           /* 36px button */
  --nav-dd-w: 23.75rem;           /* 380px Services dropdown */
  --fs-mnav: 1.5rem;              /* 24px phone menu links */
  --mnav-row: 4rem;               /* 64px phone menu row */
  --mnav-btn-h: 3.25rem;          /* 52px phone menu button */

  /* Site footer */
  --logo-h-footer: 2.1rem;        /* 33.6px lockup: 24px letters */
  --footer-link-offset: 5px;      /* underline offset on footer links */

  /* Service page hero */
  --fs-svc-title: var(--fs-h1);
  --fs-svc-tagline: clamp(1.125rem, 1.7cqi, 1.25rem); /* 18–20px benefit line */
  --tap-target: 2.75rem;       /* 44px minimum for small links */
  --service-art-m-max: 24rem;  /* compact service illustration: phones and tablets */
  --hero-art-bleed: 3rem;      /* illustration reaches past the content edge, 1280px+ */
  --hero-art-bleed-lg: 7rem;   /* 1440px+: about 10% larger than in its own column */
  --hero-wire-dur: 400ms;      /* attack path: a wire drawing in */
  --hero-light-dur: 350ms;     /* a node lighting up */
  --hero-light-delay: 150ms;   /* node lights once its wire is half drawn */
  --hero-chip-delay: 300ms;

  /* Service page "What's tested": comparison table / zones */
  --fs-tested-col: var(--fs-h3); /* "External test" / "Internal test" */
  --fs-tested-item: 1.125rem;    /* 18px item and "you get" titles */
  --fs-tested-cell: 1.03125rem;  /* 16.5px table cells */
  --fs-tested-terms: 0.75rem;    /* 12px technical terms, row labels */
  --fs-tested-tag: 0.75rem;      /* 12px START / GOAL tags, column kicker */
  --fs-tested-edge: 0.75rem;     /* 12px "Internet edge" label */
  --tested-label-col: 11.25rem;  /* table row-label column */
  --tested-label-col-sm: 8rem;   /* the same, 760–999px */
  --tested-icon: 1.375rem;       /* 22px line icons */
  --tested-icon-get: 1.75rem;    /* 28px accent icons in "you get" */
  --tested-marker: 3px;          /* accent rule above each table column */
  --tested-edge: 2px;            /* phone: the internet-edge line */

  /* FAQ: question list with the selected answer in a panel (split view) */
  --fs-faq-q: 1.25rem;            /* 20px questions */
  --fs-faq-a: var(--fs-body);     /* answers read as body text */
  --fs-faq-a-lg: var(--fs-body);
  --fs-faq-panel-q: var(--fs-h3); /* question repeated in the panel */
  --faq-row: 3rem;                /* minimum question row height */
  --faq-marker: 1.625rem;         /* 26px +/x box, accordion */
  --faq-panel-w: 58%;             /* answer panel share of the block, split view */
  --faq-split-min: 20rem;         /* panel height floor; faq.js raises it to fit */
  --faq-dur: 220ms;
  --ease-faq: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* Services overview: fit matrix, combinations, engagement terms, report */
  --fs-fit-svc: 1.25rem;          /* 20px service name in the matrix */
  --fs-fit-cell: 0.96875rem;      /* 15.5px "best for" */
  --fs-fit-tag: 0.75rem;          /* 12px tags, column labels */
  --fs-fit-mono: 0.78125rem;      /* 12.5px small mono notes */
  --fs-fit-item: 1.1875rem;       /* 19px combination and report item titles */
  --fit-col-svc: 28%;             /* matrix columns, wide */
  --fit-col-best: 36%;
  --fit-icon: 1.5rem;             /* 24px line icons */
  --fit-icon-sm: 1.25rem;         /* 20px in pairs and the terms list */
  --fit-report-num: 3.5rem;       /* report number column, wide */

  /* Service pages */
  --finding-max: 30rem;        /* the sample finding card */

  /* ---- Radii ------------------------------------------------------------ */
  --radius-sm: 2px;
  --radius: 3px;       /* buttons */
  --radius-lg: 4px;    /* cards */
  --radius-node: 14px; /* journey nodes */
  --radius-sheet: 6px; /* journey sheets */
  --radius-pill: 999px;

  /* ---- Elevation -------------------------------------------------------- */
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.25);
  --shadow-raised: 0 2px 4px rgba(0, 0, 0, 0.45), 0 16px 40px rgba(0, 0, 0, 0.35);

  /* ---- Motion ----------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 400ms;

  /* ---- Z-index ---------------------------------------------------------- */
  --z-header: 100;
  --z-menu: 200;
  --z-skip: 300;
}

/* =========================================================================
   Light theme. Apply .theme-light to a section (or any wrapper) and every
   component inside picks up these values through the same tokens.
   Muted text is 5.9:1 on --c-bg here, the accent text 5.2:1.
   ========================================================================= */

.theme-light {
  --c-bg: #f3f2ef;
  --c-bg-deep: #ecebe6;        /* alternate band */
  --c-surface: #ffffff;
  --c-surface-raised: #ffffff;
  --c-border: rgba(0, 0, 0, 0.14);
  --c-border-soft: rgba(0, 0, 0, 0.09);

  --c-accent-text: #b13b0b;    /* 5.4:1 on --c-bg, 5.0:1 on the alternate band */
  --c-accent-line: rgba(194, 65, 12, 0.5);
  --c-accent-wash: rgba(194, 65, 12, 0.08);

  --c-text: #1b1b1d;
  --c-text-muted: #5c5c63;
  --c-text-dim: #63636a;

  --c-focus: #1b1b1d;

  --shadow-card: none;
  --shadow-raised: 0 20px 40px -24px rgba(0, 0, 0, 0.28);

  background-color: var(--c-bg);
  color: var(--c-text-muted);
}

.theme-light.theme-light--alt {
  background-color: var(--c-bg-deep);
}

/* A deeper stone tone for a band that needs clear separation from the light
   band above it. Muted, dim and accent text are darkened to hold their
   contrast on this background. */
.theme-light.band--mid {
  --c-bg: #dddbd4;
  --c-text-muted: #55555c;     /* 5.2:1 on this tone */
  --c-text-dim: #55555c;
  --c-accent-text: #9e3409;    /* 5.1:1 */
  background-color: var(--c-bg);
}

/* Body text one step larger on wide windows. */
@media (min-width: 61.25em) {
  :root {
    --fs-body: 1.0625rem;  /* 17px */
  }
}