/* Northridge Systems - generated by tools/build.mjs. Do not edit.
   Sources: design/_ds/**/tokens/*.css (brand tokens), the design-system
   component CSS that _ds_bundle.js injects at runtime, the design's own
   <helmet> block, and src/assets/css/site.css. */


/* ===== Webfonts (self-hosted) ===== */

/* Northridge Systems - self-hosted brand webfonts.
   Generated by tools/fetch-fonts.mjs - do not edit by hand.
   Inter and Manrope are the families specified by the brand, served from
   our own origin so no visitor data reaches a third party. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-400-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: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-400-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;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-500-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: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-500-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;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-600-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: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-600-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;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/inter-700-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: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/inter-700-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;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/manrope-500-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: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/manrope-500-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;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/manrope-600-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: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/manrope-600-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;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/manrope-700-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: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/manrope-700-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;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/manrope-800-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: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/manrope-800-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;
}


/* ===== Tokens ===== */

/* Northridge Systems — Colour tokens
   Five-colour brand palette. Navy is reserved for key moments (hero, footer,
   primary CTAs); the canvas stays light and uncluttered. Teal is the single
   action accent. Everything else is calm neutral structure. */

:root {
  /* ---- Brand palette (base) ---- */
  --nr-navy: #0D1B2A;          /* Deep Navy — primary text, dark surfaces, logo mark */
  --nr-slate: #334155;         /* Slate Blue-Grey — secondary text, UI accents */
  --nr-teal: #4CA3A3;          /* Teal — CTAs, highlights, logo centre detail */
  --nr-light-grey: #B8C2CC;    /* Light Grey — borders, dividers, muted UI */
  --nr-off-white: #F2F4F7;     /* Off-White — page background, panels */
  --nr-white: #FFFFFF;

  /* ---- Navy scale (layered dark surfaces) ---- */
  --nr-navy-900: #0A1521;
  --nr-navy-800: #0D1B2A;
  --nr-navy-700: #16293B;
  --nr-navy-600: #1F354B;
  --nr-navy-500: #2B4760;

  /* ---- Slate scale (secondary text & neutral fills) ---- */
  --nr-slate-700: #283545;
  --nr-slate-600: #334155;
  --nr-slate-500: #475569;
  --nr-slate-400: #64748B;
  --nr-slate-300: #94A3B8;

  /* ---- Teal scale (accent + interaction states) ---- */
  --nr-teal-700: #2F6E6E;      /* active / pressed */
  --nr-teal-600: #3C8585;      /* hover */
  --nr-teal-500: #4CA3A3;      /* base accent */
  --nr-teal-300: #8FC4C4;      /* muted accent */
  --nr-teal-100: #E4F0F0;      /* tint surface */
  --nr-teal-050: #F1F7F7;      /* faintest wash */

  /* ---- Neutral / grey structure ---- */
  --nr-grey-200: #D7DEE5;
  --nr-grey-100: #E4E9EE;
  --nr-grey-050: #F2F4F7;

  /* ---- Semantic status (kept calm, used sparingly) ---- */
  --nr-success: #2E8B6E;
  --nr-warning: #C98A2B;
  --nr-danger:  #C2553D;
  --nr-info:    #4CA3A3;

  /* ===========================================================
     SEMANTIC ALIASES — reference these in components & UI
     =========================================================== */

  /* Text */
  --text-strong:   var(--nr-navy);        /* headlines, key figures */
  --text-body:     var(--nr-slate-600);   /* default paragraph text */
  --text-muted:    var(--nr-slate-400);   /* captions, meta, labels */
  --text-accent:   var(--nr-teal-600);    /* links, accented words */
  --text-on-dark:  var(--nr-off-white);   /* body text on navy */
  --text-on-dark-strong: var(--nr-white); /* headlines on navy */
  --text-on-accent: var(--nr-white);

  /* Surfaces */
  --surface-page:    var(--nr-off-white); /* the light canvas */
  --surface-card:    var(--nr-white);     /* cards, panels */
  --surface-subtle:  var(--nr-grey-050);  /* recessed / alt sections */
  --surface-tint:    var(--nr-teal-050);  /* faint accent panels */
  --surface-dark:    var(--nr-navy);      /* hero, footer, CTA band */
  --surface-dark-alt: var(--nr-navy-700);

  /* Borders & dividers */
  --border-subtle:  var(--nr-grey-200);   /* card outlines, dividers */
  --border-strong:  var(--nr-light-grey);
  --border-on-dark: rgba(255, 255, 255, 0.14);
  --divider:        var(--nr-grey-100);

  /* Accent / action */
  --accent:          var(--nr-teal-500);
  --accent-hover:    var(--nr-teal-600);
  --accent-active:   var(--nr-teal-700);
  --accent-contrast: var(--nr-white);
  --accent-tint:     var(--nr-teal-100);

  /* Focus ring */
  --focus-ring: rgba(76, 163, 163, 0.45);
}

/* Northridge Systems — Typography tokens
   Manrope for headings (calm, geometric, confident). Inter for body & UI.
   Tight negative tracking on large headings; comfortable body leading.
   The "SYSTEMS"-style overline uses wide letter-spacing in teal. */

:root {
  /* ---- Families ---- */
  --font-heading: "Manrope", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* ---- Weights ---- */
  --weight-regular: 400;
  --weight-medium: 500;   /* nav, buttons (Inter Medium) */
  --weight-semibold: 600; /* headings, emphasis */
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* ---- Type scale (desktop) ---- */
  --text-display: 4.25rem;   /* 68px — hero on large surfaces */
  --text-h1: 3rem;           /* 48px */
  --text-h2: 2.25rem;        /* 36px — section titles */
  --text-h3: 1.625rem;       /* 26px — card / sub-section titles */
  --text-h4: 1.25rem;        /* 20px */
  --text-h5: 1.0625rem;      /* 17px */
  --text-body-lg: 1.1875rem; /* 19px — hero subtitle, lede */
  --text-body: 1rem;         /* 16px — default */
  --text-body-sm: 0.9375rem; /* 15px */
  --text-caption: 0.8125rem; /* 13px — meta */
  --text-overline: 0.75rem;  /* 12px — eyebrow / tag */

  /* ---- Line heights ---- */
  --leading-tight: 1.08;     /* display / hero */
  --leading-heading: 1.18;   /* h2–h4 */
  --leading-snug: 1.4;
  --leading-body: 1.65;      /* paragraphs */
  --leading-relaxed: 1.75;

  /* ---- Letter spacing ---- */
  --tracking-display: -0.025em;
  --tracking-heading: -0.018em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-overline: 0.16em;  /* the "S Y S T E M S" treatment */
}

/* Northridge Systems — Spacing, radii, shadows, layout
   Generous, even spacing on a 4px base. Soft, low shadows — the brand leans on
   crisp 1px borders more than heavy elevation. Calm, modest corner radii. */

:root {
  /* ---- Spacing scale (4px base) ---- */
  --space-0: 0;
  --space-1: 0.25rem;   /* 4 */
  --space-2: 0.5rem;    /* 8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 2.5rem;    /* 40 */
  --space-8: 3rem;      /* 48 */
  --space-9: 4rem;      /* 64 */
  --space-10: 5rem;     /* 80 */
  --space-11: 6rem;     /* 96 */
  --space-12: 8rem;     /* 128 — section rhythm */

  /* ---- Radii ---- */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 10px;    /* buttons, inputs */
  --radius-lg: 14px;    /* cards */
  --radius-xl: 20px;    /* large panels, media */
  --radius-2xl: 28px;
  --radius-pill: 999px;

  /* ---- Borders ---- */
  --border-width: 1px;
  --border-width-strong: 1.5px;

  /* ---- Shadows (soft & low — light brand) ---- */
  --shadow-xs: 0 1px 2px rgba(13, 27, 42, 0.05);
  --shadow-sm: 0 2px 6px rgba(13, 27, 42, 0.06);
  --shadow-md: 0 6px 18px rgba(13, 27, 42, 0.08);
  --shadow-lg: 0 16px 40px rgba(13, 27, 42, 0.10);
  --shadow-card: 0 1px 2px rgba(13, 27, 42, 0.04), 0 8px 24px rgba(13, 27, 42, 0.05);
  --shadow-focus: 0 0 0 4px var(--focus-ring);

  /* ---- Layout ---- */
  --container-max: 1200px;
  --container-wide: 1320px;
  --container-narrow: 760px;
  --gutter: 2rem;
  --section-y: 6rem;        /* vertical rhythm between sections */

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --duration-fast: 120ms; /* @kind other */
  --duration-base: 200ms; /* @kind other */
  --duration-slow: 320ms; /* @kind other */
}

/* Northridge Systems — Base element defaults & a few brand primitives.
   Keeps specimens and cards consistent. Components rely on tokens, not these. */

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

html {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--text-body);
  background: var(--surface-page);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--text-strong);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-heading);
  line-height: var(--leading-heading);
  margin: 0;
}

p { margin: 0; }

a {
  color: var(--text-accent);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

/* ---- Brand text helpers ---- */
.nr-overline {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-overline);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  color: var(--text-accent);
}

.nr-display {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--text-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--text-strong);
}

.nr-lede {
  font-size: var(--text-body-lg);
  line-height: var(--leading-body);
  color: var(--text-body);
}

/* The wide-tracked wordmark treatment, e.g. "S Y S T E M S" */
.nr-systems-mark {
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--accent);
}


/* ===== Design system components ===== */

/* -- button -- */
.nr-btn { --_bg: var(--accent); --_fg: var(--accent-contrast); --_bd: transparent; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-family: var(--font-body); font-weight: var(--weight-medium); line-height: 1; white-space: nowrap; cursor: pointer; text-decoration: none; border: 1px solid var(--_bd); border-radius: var(--radius-md); background: var(--_bg); color: var(--_fg); transition: background var(--duration-base) var(--ease-standard),
               border-color var(--duration-base) var(--ease-standard),
               transform var(--duration-fast) var(--ease-standard); }
.nr-btn:hover { text-decoration: none; }
.nr-btn:active { transform: translateY(1px); }
.nr-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.nr-btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; }
.nr-btn--sm { font-size: var(--text-body-sm); padding: 0.5rem 0.85rem; }
.nr-btn--md { font-size: var(--text-body); padding: 0.7rem 1.15rem; }
.nr-btn--lg { font-size: var(--text-body-lg); padding: 0.9rem 1.5rem; }
.nr-btn--primary { --_bg: var(--accent); --_fg: var(--accent-contrast); }
.nr-btn--primary:hover { --_bg: var(--accent-hover); }
.nr-btn--primary:active { --_bg: var(--accent-active); }
.nr-btn--navy { --_bg: var(--nr-navy); --_fg: var(--nr-white); }
.nr-btn--navy:hover { --_bg: var(--nr-navy-700); }
.nr-btn--secondary { --_bg: transparent; --_fg: var(--accent-hover); --_bd: var(--accent); }
.nr-btn--secondary:hover { --_bg: var(--accent-tint); }
.nr-btn--outline { --_bg: var(--surface-card); --_fg: var(--text-strong); --_bd: var(--border-strong); }
.nr-btn--outline:hover { --_bd: var(--nr-slate-400); }
.nr-btn--ghost { --_bg: transparent; --_fg: var(--text-accent); }
.nr-btn--ghost:hover { --_bg: var(--accent-tint); }
.nr-btn--on-dark { --_bg: var(--nr-white); --_fg: var(--nr-navy); }
.nr-btn--on-dark:hover { --_bg: var(--nr-off-white); }
.nr-btn--block { display: flex; width: 100%; }
.nr-btn svg { width: 1.1em; height: 1.1em; flex: 0 0 auto; }

/* -- eyebrow -- */
.nr-eyebrow { display: inline-block; font-family: var(--font-body); font-weight: var(--weight-semibold); font-size: var(--text-overline); letter-spacing: var(--tracking-overline); text-transform: uppercase; color: var(--accent-hover); }
.nr-eyebrow--on-dark { color: var(--nr-teal-300); }

/* -- trust-item -- */
.nr-trust { display: inline-flex; align-items: center; gap: 0.85rem; font-family: var(--font-body); }
.nr-trust--stack { flex-direction: column; text-align: center; gap: 0.6rem; }
.nr-trust__icon { width: 46px; height: 46px; flex: 0 0 auto; border-radius: 50%; border: 1.5px solid var(--border-strong); color: var(--accent-hover); display: flex; align-items: center; justify-content: center; }
.nr-trust__icon svg { width: 21px; height: 21px; stroke-width: 1.6; }
.nr-trust__label { font-size: var(--text-body-sm); font-weight: var(--weight-medium); color: var(--text-strong); line-height: 1.35; }
.nr-trust--on-dark .nr-trust__icon { border-color: var(--border-on-dark); color: var(--nr-teal-300); }
.nr-trust--on-dark .nr-trust__label { color: var(--text-on-dark); }

/* -- section-heading -- */
.nr-heading { display: flex; flex-direction: column; gap: 0.6rem; max-width: 42rem; }
.nr-heading--center { align-items: center; text-align: center; margin-left: auto; margin-right: auto; }
.nr-heading__title { font-family: var(--font-heading); font-weight: var(--weight-semibold); font-size: var(--text-h2); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); color: var(--text-strong); margin: 0px; }
.nr-heading__intro { font-size: var(--text-body-lg); line-height: var(--leading-body); color: var(--text-body); margin: 0px; }
.nr-heading--on-dark .nr-heading__title { color: var(--text-on-dark-strong); }
.nr-heading--on-dark .nr-heading__intro { color: var(--text-on-dark); }

/* -- card -- */
.nr-card { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-6); transition: border-color var(--duration-base) var(--ease-standard),
               box-shadow var(--duration-base) var(--ease-standard),
               transform var(--duration-base) var(--ease-standard); }
.nr-card--flat { box-shadow: none; }
.nr-card--raised { box-shadow: var(--shadow-card); border-color: transparent; }
.nr-card--tint { background: var(--surface-tint); border-color: transparent; }
.nr-card--dark { background: var(--surface-dark); border-color: var(--border-on-dark); color: var(--text-on-dark); }
.nr-card--pad-sm { padding: var(--space-5); }
.nr-card--pad-lg { padding: var(--space-8); }
.nr-card--interactive { cursor: pointer; }
.nr-card--interactive:hover { border-color: var(--accent); box-shadow: var(--shadow-md); transform: translateY(-3px); }

/* -- input -- */
.nr-field { display: flex; flex-direction: column; gap: 0.4rem; font-family: var(--font-body); }
.nr-field__label { font-size: var(--text-body-sm); font-weight: var(--weight-medium); color: var(--text-strong); }
.nr-field__req { color: var(--accent); margin-left: 2px; }
.nr-input-wrap { position: relative; display: flex; align-items: center; }
.nr-input-wrap__icon { position: absolute; left: 0.85rem; display: flex; color: var(--text-muted); pointer-events: none; }
.nr-input-wrap__icon svg { width: 18px; height: 18px; }
.nr-input { width: 100%; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-size: var(--text-body); color: var(--text-strong); background: var(--surface-card); border: 1px solid var(--border-strong); border-radius: var(--radius-md); padding: 0.7rem 0.9rem; transition: border-color var(--duration-base) var(--ease-standard),
               box-shadow var(--duration-base) var(--ease-standard); }
.nr-input::placeholder { color: var(--nr-slate-300); }
.nr-input--with-icon { padding-left: 2.6rem; }
.nr-input:hover { border-color: var(--nr-slate-400); }
.nr-input:focus { outline: none; border-color: var(--accent); box-shadow: var(--shadow-focus); }
.nr-input[disabled] { background: var(--surface-subtle); color: var(--text-muted); cursor: not-allowed; }
.nr-field--error .nr-input { border-color: var(--nr-danger); }
.nr-field--error .nr-input:focus { box-shadow: rgba(194, 85, 61, 0.25) 0px 0px 0px 4px; }
.nr-field__hint { font-size: var(--text-caption); color: var(--text-muted); }
.nr-field__error { font-size: var(--text-caption); color: var(--nr-danger); }

/* -- textarea -- */
.nr-ta-field { display: flex; flex-direction: column; gap: 0.4rem; font-family: var(--font-body); }
.nr-ta-field__label { font-size: var(--text-body-sm); font-weight: var(--weight-medium); color: var(--text-strong); }
.nr-ta-field__req { color: var(--accent); margin-left: 2px; }
.nr-textarea { width: 100%; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-size: var(--text-body); line-height: var(--leading-snug); color: var(--text-strong); background: var(--surface-card); border: 1px solid var(--border-strong); border-radius: var(--radius-md); padding: 0.7rem 0.9rem; resize: vertical; min-height: 7rem; transition: border-color var(--duration-base) var(--ease-standard),
               box-shadow var(--duration-base) var(--ease-standard); }
.nr-textarea::placeholder { color: var(--nr-slate-300); }
.nr-textarea:hover { border-color: var(--nr-slate-400); }
.nr-textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--shadow-focus); }
.nr-textarea[disabled] { background: var(--surface-subtle); color: var(--text-muted); cursor: not-allowed; }
.nr-ta-field--error .nr-textarea { border-color: var(--nr-danger); }
.nr-ta-field__hint { font-size: var(--text-caption); color: var(--text-muted); }
.nr-ta-field__error { font-size: var(--text-caption); color: var(--nr-danger); }


/* ===== Page base (from the design's <helmet>) ===== */

* { box-sizing: border-box; }
html, body { height: auto; min-height: 100%; }
#dc-root, .sc-host { height: auto; min-height: 100%; }
body { margin: 0px; background: rgb(255, 255, 255); font-family: var(--font-body); color: rgb(51, 65, 85); -webkit-font-smoothing: antialiased; }
a { color: rgb(60, 133, 133); text-decoration: none; }
a:hover { color: rgb(47, 110, 110); }
:focus-visible { outline: none; box-shadow: rgba(76, 163, 163, 0.45) 0px 0px 0px 4px; border-radius: 4px; }

/* ===== Generated hover / focus rules ===== */

.nh-d1ae9b64:focus { left: 12px !important; top: 12px !important; }
.nh-8c39c383:hover { color: rgb(13, 27, 42) !important; }
.nh-e85c5831:hover { color: rgb(143, 196, 196) !important; border-bottom-color: rgb(76, 163, 163) !important; }
.nh-70725402:hover { border-color: rgb(76, 163, 163) !important; transform: translateY(-3px) !important; }
.nh-4809556a:hover { border-bottom-color: rgb(76, 163, 163) !important; }
.nh-dcf5af8a:hover { background: rgb(242, 244, 247) !important; padding-left: 16px !important; }
.nh-d7b538d9:hover { border-color: rgb(76, 163, 163) !important; transform: translateY(-3px) !important; color: rgb(13, 27, 42) !important; }
.nh-0036f3d2:hover { color: rgb(255, 255, 255) !important; }
.nh-259112e4:hover { color: rgb(47, 110, 110) !important; border-bottom-color: rgb(76, 163, 163) !important; }

/* ===== Static-site additions ===== */

/* Additions that only matter once the design is a real, deployed website.
   Everything above this block in app.css is generated from the design source;
   keep hand-written rules here so a rebuild never overwrites them. */

/* The design sets `hidden` on the FAQ panels and the contact confirmation.
   Guard against any inline display rule winning over the UA default. */
[hidden] {
  display: none !important;
}

/* React drops the -webkit- prefixed property when it parses a style attribute,
   which loses the frosted header on Safari and older iOS. Put it back. */
.nr-header {
  -webkit-backdrop-filter: blur(10px);
}

/* The header lays out as logo | nav | actions and wraps at narrow widths. Below
   the point where all three fit, centre the wrapped rows so it reads as a
   deliberate stack rather than a broken row.

   Wrapped, it stands about 215px tall - a quarter of a phone screen - and the
   design makes it `position: sticky`, so it would sit there for the whole page.
   The design has no compact mobile nav to switch to, so rather than invent one,
   let the header scroll away on small screens: every link stays visible and
   nothing is hidden behind a control that does not exist in the design. */
@media (max-width: 720px) {
  .nr-header {
    position: static !important;
  }
  .nr-header > div {
    justify-content: center;
    text-align: center;
  }
  .nr-nav {
    justify-content: center;
    flex: 1 1 100%;
    gap: 4px 20px;
  }
}

/* The sticky header would otherwise cover whatever an in-page link jumps to. */
#main,
[id^='faq-'],
[id^='sector-'] {
  scroll-margin-top: 90px;
}

/* The home page links each sector to its own card on /sectors/. The cards sit
   in a grid, so landing on one puts a whole row at the top of the screen;
   outline the one the visitor actually asked for so the jump reads as
   deliberate. Teal 500 is the design's own hover colour for these cards. */
[id^='sector-']:target {
  border-color: #4ca3a3;
  box-shadow: 0 0 0 4px rgba(76, 163, 163, 0.22);
}

/* The eyebrow labels that introduce a section ("How it works", "Who we work
   with") and a page ("What we do") are set at the design's 12px overline size,
   which reads small against the 36px titles beneath them. Lift those to 13.5px.
   The same component labels the inside of cards ("A common situation",
   "Start here"), where 12px is right, so only the two positions are targeted.
   The page-hero rule uses :has() and sits on its own so that a browser without
   it drops only that rule. */
.nr-heading > .nr-eyebrow {
  font-size: 13.5px;
}
.nr-eyebrow:has(+ h1) {
  font-size: 13.5px;
}

/* The service rows are laid out as `56px minmax(180px, 1.1fr) 2fr`, an explicit
   three-track grid that keeps all three columns at every width - below roughly
   520px the tracks no longer fit and the page scrolls sideways. Stack them into
   number / title / description instead. Tagged by tools/lib/extract.mjs;
   !important because the grid is set in a style attribute. */
@media (max-width: 620px) {
  .nr-grid-fixed {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
}

/* Long words in headings should break rather than force a horizontal scrollbar
   on small screens. */
h1,
h2,
h3 {
  overflow-wrap: break-word;
}

/* The FAQ answer appears on click; a short reveal reads better than a jump. */
@media (prefers-reduced-motion: no-preference) {
  [id^='faq-answer-'] {
    animation: nr-reveal 180ms cubic-bezier(0.16, 1, 0.3, 1);
  }
}

@keyframes nr-reveal {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Respect a system-level preference to reduce motion. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Form status messages rendered by site.js, styled to match the design's own
   error and status panels. */
.nr-form-message {
  margin: 18px 0 0;
  font-size: 14.5px;
  line-height: 1.6;
  border-radius: 10px;
  padding: 12px 14px;
}
.nr-form-message--error {
  color: #c2553d;
  background: #fbf1ee;
  border: 1px solid #ebcfc7;
}
.nr-form-message--status {
  color: #334155;
  background: #f1f7f7;
  border: 1px solid #d7dee5;
}

/* Legal pages (/privacy/, /terms/). The design has no long-form prose anywhere
   else, so rather than inline-style several dozen paragraphs in
   src/legal/*.html, the type scale lives here once. Values match the design's
   body copy: Inter at 16.5px/1.7 in slate, headings in the heading face. */
.nr-legal {
  font-size: 16.5px;
  line-height: 1.7;
  color: #475569;
}
.nr-legal > h2 {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0d1b2a;
  margin: 44px 0 0;
}
.nr-legal > h2:first-child {
  margin-top: 0;
}
.nr-legal > h3 {
  font-family: var(--font-heading);
  font-size: 1.02rem;
  font-weight: 700;
  color: #0d1b2a;
  margin: 26px 0 0;
}
.nr-legal p,
.nr-legal ul {
  margin: 14px 0 0;
}
.nr-legal ul {
  padding-left: 1.15em;
}
.nr-legal li {
  margin-top: 8px;
}
.nr-legal strong {
  color: #0d1b2a;
  font-weight: 600;
}
/* Pulled-out panel for the summary and the contact details, matching the tinted
   cards the design uses elsewhere. */
.nr-legal-panel {
  border: 1px solid #d7dee5;
  border-radius: 14px;
  padding: clamp(22px, 2.6vw, 30px);
  background: #f1f7f7;
  margin: 28px 0 0;
}
.nr-legal-panel > *:first-child {
  margin-top: 0;
}

/* Printed pages: drop the sticky chrome and dark fills, keep the words. */
@media print {
  .nr-header,
  footer,
  a[href='#main'] {
    display: none !important;
  }
  body {
    background: #fff !important;
    color: #000 !important;
  }
  section {
    background: #fff !important;
    padding: 12px 0 !important;
  }
}

/* ---------------------------------------------------------------------------
   WCAG 2.1 AA contrast corrections.

   Two pairings inherited from the design system fail AA for normal text. Both
   were measured, not assumed, and the ratios below are the computed values.

   1. The primary button is white on teal 500, which is 2.97:1 against a 4.5:1
      requirement. It carries the main calls to action on every page, so this is
      the least accessible element on the site and the one that matters most.
   2. Links and accented labels use teal 600, which is 4.30:1. Close, but under.

   The fix keeps teal, rather than switching these to navy, because the teal call
   to action is the brand's own identity on a marketing page. Darkening the fill
   to teal 700 clears AA at 5.87:1 and leaves the hover and press states with
   somewhere to go. Teal 500 is untouched everywhere it is used decoratively:
   focus rings, tinted surfaces, borders and the logo detail all keep it, because
   none of those carries text.

   Note that the portal (MattLeMasurier/northridge-tooling) resolves the same
   failure the other way, with a navy primary button, because there the design
   pass chose navy for authority across all thirteen screens. If you would rather
   the two surfaces match exactly, the change here is a one line swap to
   var(--nr-navy), which measures 17.39:1.
   --------------------------------------------------------------------------- */

.nr-btn--primary {
  /* white on #2F6E6E: 5.87:1 */
  --_bg: var(--nr-teal-700);
  --_fg: var(--nr-white);
}

.nr-btn--primary:hover {
  /* white on #285D5D: 7.46:1 */
  --_bg: #285D5D;
}

.nr-btn--primary:active {
  /* white on #215050: 9.02:1 */
  --_bg: #215050;
}

/* Links and accented labels. Teal 700 on white is 5.87:1, and 5.33:1 on the
   off-white panels, so it clears AA on both surfaces the site uses. */
:root {
  --text-accent: var(--nr-teal-700);
}