@import url('fonts.css');

/* ============================================================================
   CORNWALL GRAVEL CO. LTD. - DESIGN SYSTEM
   Direction: "Quarry Modernism" - Swiss grid discipline, industrial
   materiality. Every colour, size and duration is a token below.
   Swap the :root block and the whole site follows.
   ============================================================================ */

:root {
  /* --- SURFACE ---------------------------------------------------------
     A four-step warm limestone scale. No pure white anywhere.

     The earlier version failed because the page ground sat at 246,244,240 -
     so close to white that a "raised" panel had nowhere lighter to go and
     still read as a white card. The whole scale is stepped down instead, so
     a panel can sit ABOVE the ground and remain visibly stone-coloured.
     Every step is at least 6 values apart, and no channel exceeds 247.
     -------------------------------------------------------------------- */
  --canvas:        #F1EDE5;   /* page ground - warm limestone            */
  --canvas-sunk:   #E7E1D6;   /* recessed bands, alternating sections    */
  --card:          #F7F3EB;   /* raised panels - cream, never white      */
  --deep:          #14181C;   /* basalt - inverted sections              */
  --deep-2:        #1D2329;   /* raised surface on deep                  */
  --deep-3:        #2A3138;   /* borders on deep                         */

  /* --- Ink ------------------------------------------------------------ */
  --ink:           #14181C;   /* 14.9:1 on canvas                        */
  --ink-2:         #444E57;   /* 7.6:1 on canvas - secondary body        */
  --ink-3:         #58646F;   /* 5.2:1 on the deeper canvas - the scale  */
                              /* moved down, so this moved with it       */
  --on-deep:       #F2F0EC;   /* 14.3:1 on deep                          */
  --on-deep-2:     #AEB8C0;   /* 7.4:1 on deep - secondary               */

  /* --- BRAND ----------------------------------------------------------
     Gold and rust are the company's own colours, sampled from their mark:
     the banner and the "G" are #F7CC18, the oval behind it is #D05000.
     These two lead. Everything else on this site is supporting structure.

     Note on #D05000: it is an awkward mid-tone that fails AA against both
     white (4.35:1) and near-black (4.20:1), so it is never used behind
     text. --rust-strong is the darkened version that carries white, and
     --rust-deep is the version that reads as text on light. Use --rust
     itself only for graphics, rules and fills that carry no copy.
     -------------------------------------------------------------------- */
  --rust:          #D05000;   /* brand rust - graphics and rules only    */
  --rust-strong:   #B84400;   /* interactive fills w/ white - 5.4:1      */
  --rust-deep:     #9E3B00;   /* rust as TEXT on light - 6.2:1 canvas    */
  --rust-tint:     rgba(208,80,0,.09);
  --rust-air:      #FF8A47;   /* rust lightened for use ON deep surfaces */

  --amber:         #F7CC18;   /* brand gold - fills and accents ON DARK  */
  --amber-deep:    #825707;   /* the same gold darkened for TEXT on      */
                              /* light. Measured on the current scale:   */
                              /* 5.7:1 card, 5.4:1 canvas, 4.9:1 sunk.   */
                              /* The sunk band is the binding case - the */
                              /* previous value failed there at 4.42:1.  */
  --aggregate:     #C9C0B2;   /* crushed-stone neutral                   */

  /* --- STRUCTURAL BLUE -------------------------------------------------
     Not a brand colour - it was introduced as a municipal trust cue and
     is now deliberately demoted to utility only: links, focus rings and
     form states. It should never compete with gold and rust for identity.
     -------------------------------------------------------------------- */
  --blueprint:     #12456B;   /* links, focus, form states - 8.9:1       */
  --blueprint-lt:  #1D5E8F;
  --blueprint-air: #5FA8D8;   /* for use ON deep only - 7.1:1            */

  /* --- Signal --------------------------------------------------------- */
  --danger:        #B3261E;
  --on-danger:     #FFFFFF;
  --success:       #1B6B3A;

  /* --- Line ----------------------------------------------------------- */
  --rule:          #DAD5CC;
  --rule-strong:   #B9B2A6;

  /* --- Type ----------------------------------------------------------- */
  --font-display: 'Archivo', 'Arial Narrow', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'Cascadia Mono', monospace;

  /* Fluid scale, 1.25 ratio at the small end opening to ~1.33 */
  --t-xs:   0.75rem;
  --t-sm:   0.875rem;
  --t-base: 1rem;
  --t-md:   clamp(1.0625rem, 0.30vw + 1.00rem, 1.1875rem);
  --t-lg:   clamp(1.25rem,  0.55vw + 1.13rem, 1.5rem);
  --t-xl:   clamp(1.5rem,   1.00vw + 1.28rem, 2rem);
  --t-2xl:  clamp(1.875rem, 1.85vw + 1.45rem, 2.75rem);
  --t-3xl:  clamp(2.375rem, 3.30vw + 1.60rem, 4rem);
  --t-4xl:  clamp(2.875rem, 5.60vw + 1.60rem, 6rem);
  --t-mega: clamp(3.5rem,   9.00vw + 1.40rem, 9rem);

  /* --- Space (density 4 - marketing, generous but not airy) ----------- */
  --s-1:  0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5:  1.5rem;   --s-6: 2rem;     --s-7: 3rem;     --s-8: 4rem;
  --s-9:  6rem;     --s-10: 8rem;
  --section-y: clamp(4rem, 7vw, 7.5rem);
  --gutter:    clamp(1.25rem, 4vw, 3rem);
  --measure:   68ch;

  /* --- Structure ------------------------------------------------------ */
  --max:       1360px;
  --max-text:  760px;
  --radius:    2px;      /* near-square. This is a quarry, not a startup */
  --radius-lg: 3px;
  --nav-h:     94px;

  /* --- Depth ---------------------------------------------------------- */
  --shadow-1: 0 1px 2px rgba(20,24,28,.06), 0 2px 6px rgba(20,24,28,.05);
  --shadow-2: 0 2px 4px rgba(20,24,28,.06), 0 10px 24px rgba(20,24,28,.09);
  --shadow-3: 0 4px 8px rgba(20,24,28,.07), 0 20px 48px rgba(20,24,28,.13);

  /* --- Motion --------------------------------------------------------- */
  --ease-out:  cubic-bezier(.22,.61,.36,1);
  --ease-io:   cubic-bezier(.65,.05,.36,1);
  --d-fast:    140ms;
  --d-base:    240ms;
  --d-slow:    420ms;
}

/* ============================================================================
   RESET & BASE
   ============================================================================ */

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

/* The [hidden] attribute is a UA rule of the lowest possible specificity, so
   any class that sets `display` silently defeats it - .btn { display:
   inline-flex } was keeping hidden step buttons on screen and widening the
   form's grid track. Anything marked hidden must actually be hidden. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1.5rem);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-md);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  /* Emergency word-breaking, inherited everywhere. Invisible in normal
     rendering - it only activates when a single word is wider than its
     container, which happens when OS-level font scaling (accessibility
     text size on a phone) multiplies our sizes. Without it, a word like
     "Environmental" escapes its card; with it, the word wraps. */
  overflow-wrap: break-word;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
img { background: var(--canvas-sunk); }

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.022em;
  margin: 0 0 var(--s-4);
  text-wrap: balance;
  color: var(--ink);
}
h1 { font-size: var(--t-3xl); font-stretch: 92%; letter-spacing: -0.03em; }
h2 { font-size: var(--t-2xl); font-stretch: 94%; }
h3 { font-size: var(--t-xl);  }
h4 { font-size: var(--t-lg);  letter-spacing: -0.012em; }
h5 { font-size: var(--t-md);  letter-spacing: 0; }

p  { margin: 0 0 var(--s-4); max-width: var(--measure); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--blueprint); text-underline-offset: 3px; }
a:hover { color: var(--blueprint-lt); }

ul, ol { padding-left: 1.15em; }
li { margin-bottom: var(--s-2); }

strong { font-weight: 600; }
hr { border: 0; border-top: 1px solid var(--rule); margin: var(--s-7) 0; }

::selection { background: var(--amber); color: var(--ink); }

/* ---------------------------------------------------------------------------
   DARK SURFACES
   Five different components render on a dark ground: the hero, inverted
   sections, the footer, the nav and the mobile drawer. Anything that has a
   light-surface default must be re-stated for all five in one place, or a
   control ends up dark-on-dark. This list is the single source of truth -
   add a new dark component here, not in a one-off rule further down.
   --------------------------------------------------------------------------- */
:root { --dark-surfaces: '.hero, .section--deep, .site-footer, .drawer, .cta-band, .quote-bar'; }

/* Focus - never removed, always visible on every surface */
:focus-visible {
  outline: 3px solid var(--blueprint);
  outline-offset: 2px;
  border-radius: 1px;
}
.hero :focus-visible,
.section--deep :focus-visible,
.site-footer :focus-visible,
.drawer :focus-visible,
.cta-band :focus-visible,
.nav--solid :focus-visible,
.site-nav :focus-visible { outline-color: var(--amber); }

.skip-link {
  position: absolute; left: var(--s-4); top: -100px; z-index: 999;
  background: var(--blueprint); color: #fff; padding: var(--s-3) var(--s-5);
  font-weight: 600; border-radius: var(--radius);
  transition: top var(--d-base) var(--ease-out);
}
.skip-link:focus { top: var(--s-4); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ============================================================================
   LAYOUT
   ============================================================================ */

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--text { max-width: calc(var(--max-text) + var(--gutter) * 2); }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(2.5rem, 4.5vw, 4.5rem); }
.section--sunk  { background: var(--canvas-sunk); }
.section--deep  { background: var(--deep); color: var(--on-deep); }
.section--deep h1, .section--deep h2, .section--deep h3,
.section--deep h4, .section--deep h5 { color: var(--on-deep); }
/* Inline links only - a .btn carries its own colour and must not be repainted */
.section--deep a:not(.btn):not(.card--link):not(.brand) { color: var(--blueprint-air); }

.grid { display: grid; gap: var(--s-6); }
.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--12 { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-5); }

@media (max-width: 980px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--12 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
  .grid--12 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.stack > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-6); }

/* ============================================================================
   TYPE UTILITIES
   ============================================================================ */

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rust-deep);
  margin: 0 0 var(--s-4);
  display: flex; align-items: center; gap: var(--s-3);
}
.eyebrow::before {
  content: ''; width: 28px; height: 2px; background: var(--amber); flex: none;
}
.eyebrow--center { justify-content: center; }
.hero .eyebrow,
.section--deep .eyebrow,
.cta-band .eyebrow,
.drawer .eyebrow { color: var(--rust-air); }

.lede {
  font-size: var(--t-lg);
  line-height: 1.5;
  color: var(--ink-2);
  font-weight: 400;
  letter-spacing: -0.011em;
}
.hero .lede,
.section--deep .lede,
.site-footer .lede { color: var(--on-deep-2); }

.spec {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

.display-mega {
  font-family: var(--font-display);
  font-size: var(--t-mega);
  font-weight: 800;
  font-stretch: 88%;
  line-height: 0.88;
  letter-spacing: -0.042em;
  margin: 0;
  text-wrap: balance;
}

.muted { color: var(--ink-3); }
.hero .muted,
.section--deep .muted,
.site-footer .muted,
.drawer .muted,
.cta-band .muted { color: var(--on-deep-2); }
.center { text-align: center; }
.center p, .center .lede { margin-inline: auto; }
.center .eyebrow { justify-content: center; }

/* Section header block */
.sec-head { max-width: 780px; margin-bottom: var(--s-8); }
.sec-head.center { margin-inline: auto; }
.sec-head p { color: var(--ink-2); font-size: var(--t-lg); line-height: 1.55; }
.section--deep .sec-head p { color: var(--on-deep-2); }

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

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-3);
  min-height: 48px;
  padding: var(--s-3) var(--s-6);
  font-family: var(--font-body);
  font-size: var(--t-base);
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.2;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--d-base) var(--ease-out),
              color var(--d-base) var(--ease-out),
              border-color var(--d-base) var(--ease-out),
              transform var(--d-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: translateY(1px); }
.btn svg { flex: none; }

.btn--primary {
  background: var(--rust-strong); color: #fff; border-color: var(--rust-strong);
}
.btn--primary:hover { background: #9E3B00; border-color: #9E3B00; color: #fff; }

.btn--amber {
  background: var(--amber); color: #1A1204; border-color: var(--amber);
}
.btn--amber:hover { background: #DCB40D; border-color: #DCB40D; color: #1A1204; }

.btn--ghost {
  background: transparent; color: var(--ink); border-color: var(--rule-strong);
}
.btn--ghost:hover { border-color: var(--ink); background: rgba(20,24,28,.04); color: var(--ink); }

.hero .btn--ghost,
.section--deep .btn--ghost,
.site-footer .btn--ghost,
.drawer .btn--ghost { color: var(--on-deep); border-color: var(--deep-3); }
.hero .btn--ghost:hover,
.section--deep .btn--ghost:hover,
.site-footer .btn--ghost:hover,
.drawer .btn--ghost:hover {
  border-color: var(--on-deep-2); background: rgba(246,244,240,.07); color: var(--on-deep);
}

.btn--lg { min-height: 56px; padding: var(--s-4) var(--s-7); font-size: var(--t-md); }
.btn--block { display: flex; width: 100%; }

/* Text link with animated rule */
.link-arrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-weight: 600; text-decoration: none;
  color: var(--rust-deep);
  min-height: 44px;
}
.link-arrow .link-arrow__line {
  display: inline-block; width: 20px; height: 2px; background: currentColor;
  transition: width var(--d-base) var(--ease-out);
}
.link-arrow:hover .link-arrow__line { width: 34px; }
.hero .link-arrow,
.on-dark .link-arrow,
.section--deep .link-arrow { color: var(--amber); }

/* ============================================================================
   NAVIGATION
   ============================================================================ */

.site-nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center;
  background: transparent;
  transition: background var(--d-base) var(--ease-out),
              box-shadow var(--d-base) var(--ease-out),
              border-color var(--d-base) var(--ease-out);
  border-bottom: 1px solid transparent;
}
.site-nav.nav--solid {
  background: rgba(20,24,28,.94);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom-color: var(--deep-3);
}
/* Pages that do not have a dark hero start solid immediately */
.site-nav.nav--always { background: var(--deep); border-bottom-color: var(--deep-3); }

.site-nav .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-5); width: 100%;
}
/* The nav bar may run wider than page content: the phone number only fits
   alongside the enlarged brand and links when the bar can use the room. */
.site-nav .wrap { max-width: 1560px; }

.brand {
  display: flex; align-items: center; gap: var(--s-3);
  text-decoration: none; flex: none; min-height: 44px;
}
/* The company's own mark, keyed to transparency so it sits on the dark nav
   without a black plaque behind it. Native 200x133. */
.brand__mark { width: auto; height: 62px; flex: none; background: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
  font-family: var(--font-display); font-weight: 800; font-stretch: 88%;
  font-size: 1.1875rem; letter-spacing: -0.02em; color: #fff;
  text-transform: uppercase;
}
.brand__sub {
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.17em;
  color: var(--amber); text-transform: uppercase; margin-top: 4px;
}

.nav-links { display: flex; align-items: center; gap: var(--s-1); list-style: none; margin: 0; padding: 0; }
.nav-links li { margin: 0; }
.nav-links a {
  display: flex; align-items: center; min-height: 48px;
  padding: 0 var(--s-3);
  font-size: 1rem; font-weight: 500;
  color: rgba(242,240,236,.86); text-decoration: none;
  border-radius: var(--radius);
  transition: color var(--d-fast) var(--ease-out), background var(--d-fast) var(--ease-out);
  white-space: nowrap;
}
.nav-links a:hover { color: #fff; background: rgba(246,244,240,.09); }
.nav-links a[aria-current="page"] { color: var(--amber); }

.nav-actions { display: flex; align-items: center; gap: var(--s-3); flex: none; }
.nav-phone {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 44px; padding: 0 var(--s-3);
  font-family: var(--font-mono); font-size: 1rem; font-weight: 600;
  color: var(--on-deep); text-decoration: none; letter-spacing: -0.01em;
  border-radius: var(--radius);
}
.nav-phone:hover { color: var(--amber); }

.nav-toggle {
  display: none;
  width: 48px; height: 48px;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--deep-3);
  border-radius: var(--radius); cursor: pointer; color: var(--on-deep);
}

/* The nav row is brand + 7 links + phone + CTA. At the enlarged sizes it
   needs ~1405px with the phone and ~1210px without, so the phone shows only
   on genuinely wide screens and the links collapse into the drawer well
   before anything can overflow. */
@media (max-width: 1520px) { .nav-phone { display: none; } }
@media (max-width: 1240px) {
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
}

/* Mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: 200;
  background: var(--deep);
  display: flex; flex-direction: column;
  padding: var(--s-5) var(--gutter) var(--s-8);
  overflow-y: auto;
  visibility: hidden; opacity: 0;
  /* visibility is stepped explicitly rather than interpolated: it flips to
     visible instantly on open (so the first tab stop is focusable on the
     same frame) and only back to hidden after the fade-out has finished.
     Relying on a discrete-property transition instead makes focus depend on
     the animation actually running. */
  transition: opacity var(--d-base) var(--ease-out),
              visibility 0s linear var(--d-base);
}
.drawer[data-open="true"] {
  visibility: visible; opacity: 1;
  transition: opacity var(--d-base) var(--ease-out),
              visibility 0s linear 0s;
}
.drawer__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-7); }
.drawer__list { list-style: none; margin: 0; padding: 0; }
.drawer__list li { margin: 0; border-bottom: 1px solid var(--deep-3); }
.drawer__list a {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 60px; padding: var(--s-3) 0;
  font-family: var(--font-display); font-size: var(--t-lg); font-weight: 600;
  color: var(--on-deep); text-decoration: none;
}
.drawer__list a[aria-current="page"] { color: var(--amber); }
.drawer__foot { margin-top: var(--s-7); display: grid; gap: var(--s-3); }

/* ============================================================================
   CARDS & SURFACES
   ============================================================================ */

.card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: var(--s-6);
  transition: border-color var(--d-base) var(--ease-out),
              box-shadow var(--d-base) var(--ease-out),
              transform var(--d-base) var(--ease-out);
}
.card--link { text-decoration: none; color: inherit; display: block; }
.card--link:hover {
  border-color: var(--rust); box-shadow: var(--shadow-2);
  transform: translateY(-3px); color: inherit;
}
.card h3 { margin-bottom: var(--s-3); }
.card p { color: var(--ink-2); font-size: var(--t-base); }

.section--deep .card { background: var(--deep-2); border-color: var(--deep-3); }
.section--deep .card p { color: var(--on-deep-2); }
.section--deep .card--link:hover { border-color: var(--amber); }

/* Numbered service card */
.svc-card { position: relative; display: flex; flex-direction: column; gap: var(--s-4); }
.svc-card__num {
  font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: 0.14em; color: var(--amber-deep);
}
.section--deep .svc-card__num { color: var(--amber); }
.svc-card__icon { width: 40px; height: 40px; color: var(--rust-deep); }
.section--deep .svc-card__icon { color: var(--rust-air); }
.svc-card ul { margin: 0; padding-left: 1.1em; color: var(--ink-2); font-size: var(--t-sm); }
.section--deep .svc-card ul { color: var(--on-deep-2); }
.svc-card__foot { margin-top: auto; padding-top: var(--s-4); }

/* Stat block */
.stat { border-top: 2px solid var(--amber); padding-top: var(--s-4); }
.stat__num {
  font-family: var(--font-display); font-weight: 800; font-stretch: 88%;
  font-size: var(--t-3xl); line-height: 0.95; letter-spacing: -0.035em;
  display: block; color: var(--ink); font-variant-numeric: tabular-nums;
}
.section--deep .stat__num { color: var(--on-deep); }
.stat__label {
  font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--ink-3); margin-top: var(--s-3); display: block;
}
.section--deep .stat__label { color: var(--on-deep-2); }

/* Pill / badge */
.pill {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 5px var(--s-3);
  font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  border: 1px solid var(--rule-strong); border-radius: 100px;
  color: var(--ink-2); background: var(--canvas);
  white-space: nowrap;
}
.pill--amber { border-color: var(--amber); color: var(--amber-deep); background: rgba(247,204,24,.10); }
.pill--rust  { border-color: var(--rust); color: var(--rust-deep); background: var(--rust-tint); }
.section--deep .pill { background: var(--deep-2); border-color: var(--deep-3); color: var(--on-deep-2); }
.section--deep .pill--amber { color: var(--amber); border-color: rgba(247,204,24,.5); }

/* ============================================================================
   FORMS
   ============================================================================ */

.field { display: flex; flex-direction: column; gap: var(--s-2); margin-bottom: var(--s-5); }
.field > label {
  font-size: var(--t-sm); font-weight: 600; color: var(--ink);
  display: flex; align-items: baseline; gap: var(--s-2);
}
.field__req { color: var(--danger); font-weight: 700; }
.field__hint { font-size: var(--t-sm); color: var(--ink-3); margin: 0; }

.input, .select, .textarea {
  width: 100%;
  min-height: 50px;
  padding: var(--s-3) var(--s-4);
  font-family: var(--font-body); font-size: var(--t-base);
  color: var(--ink); background: var(--card);
  border: 1px solid var(--rule-strong); border-radius: var(--radius);
  transition: border-color var(--d-fast) var(--ease-out), box-shadow var(--d-fast) var(--ease-out);
}
.textarea { min-height: 130px; resize: vertical; line-height: 1.6; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235E6A75' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--s-4) center;
  padding-right: var(--s-8);
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-3); }
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--blueprint); box-shadow: 0 0 0 3px rgba(18,69,107,.16); outline: none;
}
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] {
  border-color: var(--danger); box-shadow: 0 0 0 3px rgba(179,38,30,.13);
}
.field__error {
  display: flex; align-items: flex-start; gap: var(--s-2);
  font-size: var(--t-sm); font-weight: 500; color: var(--danger); margin: 0;
}
.field__error:empty { display: none; }
.field__error svg { flex: none; margin-top: 2px; }

/* Choice chips (radio/checkbox groups) */
.choices { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.choice { position: relative; }
.choice input {
  position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer;
}
.choice span {
  display: flex; align-items: center; gap: var(--s-2);
  min-height: 48px; padding: var(--s-3) var(--s-5);
  font-size: var(--t-base); font-weight: 500;
  border: 1px solid var(--rule-strong); border-radius: var(--radius);
  background: var(--card); color: var(--ink-2);
  transition: all var(--d-fast) var(--ease-out);
  cursor: pointer;
}
.choice input:hover + span { border-color: var(--ink-3); }
.choice input:checked + span {
  border-color: var(--blueprint); background: rgba(18,69,107,.07);
  color: var(--blueprint); font-weight: 600; box-shadow: inset 0 0 0 1px var(--blueprint);
}
.choice input:focus-visible + span { outline: 3px solid var(--blueprint); outline-offset: 2px; }

fieldset { border: 0; padding: 0; margin: 0 0 var(--s-5); }
legend {
  font-size: var(--t-sm); font-weight: 600; color: var(--ink);
  padding: 0; margin-bottom: var(--s-3);
}

/* ============================================================================
   TABLES
   ============================================================================ */

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.data {
  width: 100%; min-width: 560px; border-collapse: collapse;
  font-size: var(--t-base);
}
table.data th, table.data td {
  text-align: left; padding: var(--s-4);
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
table.data thead th {
  font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3);
  border-bottom: 2px solid var(--rule-strong); white-space: nowrap;
}
table.data tbody tr:hover { background: rgba(18,69,107,.035); }
table.data td.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ============================================================================
   FOOTER
   ============================================================================ */

.site-footer { background: var(--deep); color: var(--on-deep); padding-block: var(--s-9) var(--s-6); }
/* Column headings are h2 - they sit alongside the page's own h2 sections, so
   using h4 here would create a heading-level skip on every page. */
.site-footer .footer-head {
  color: var(--on-deep);
  font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  margin-bottom: var(--s-4); line-height: 1.5;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: var(--s-1); }
.site-footer a { color: var(--on-deep-2); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.site-footer a:hover { color: var(--amber); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--s-7); }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s-6); } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-bottom {
  margin-top: var(--s-8); padding-top: var(--s-5);
  border-top: 1px solid var(--deep-3);
  display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-6);
  align-items: center; justify-content: space-between;
  font-size: var(--t-sm); color: var(--on-deep-2);
}

/* ============================================================================
   MOTION ENGINE
   Elements are hidden by CSS, revealed by GSAP. If GSAP never runs,
   site.js drops .js-motion from <html> after 2s and everything shows.
   ============================================================================ */

.js-motion [data-reveal] { opacity: 0; }
.js-motion [data-reveal="up"]    { transform: translateY(26px); }
.js-motion [data-reveal="left"]  { transform: translateX(-26px); }
.js-motion [data-reveal="right"] { transform: translateX(26px); }
.js-motion [data-reveal="scale"] { transform: scale(.96); }
.js-motion [data-reveal-group] > * { opacity: 0; transform: translateY(22px); }
.js-motion [data-split] { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .js-motion [data-reveal],
  .js-motion [data-reveal-group] > *,
  .js-motion [data-split] { opacity: 1 !important; transform: none !important; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}