/* ==========================================================================
   Core Coatings — core.css
   Shared stylesheet for corecoatings.com.au

   Built to docs/website-redesign-spec-2026-07-31.md §4 (design system),
   §5.1 (scattered-object behaviour) and §10 (stack, performance, a11y).

   Rules this file obeys:
     · No third-party request of any kind — no @import, no CDN, no web font
       service. Fonts are self-hosted WOFF2 (§2.3.5).
     · No hard-coded colour value outside :root. Every colour in a rule is
       a var(--…) reference (§12.2).
     · No gradients anywhere. Flat solid fills only (§4.3).
     · Elevation is rare — the primary button, floating cards, and the
       pill header only.
     · --color-accent is never a button background or a large fill (§4.1).

   Contents
     01  Fonts
     02  Tokens
     03  Reset and base
     04  Accessibility helpers
     05  Typography
     06  Layout primitives
     07  Buttons and links
     08  Site header — pill nav and mobile nav
     09  Site footer
     10  Surfaces — cards, panels, callouts, float cards
     11  Tick rows
     12  Accordion
     13  Forms
     14  Scattered objects
     15  Utilities
     16  Responsive
     17  Reduced motion
   ========================================================================== */


/* ==========================================================================
   01  FONTS — self-hosted DM Sans, weights 500 and 700 only (§4.2)
   ========================================================================== */

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/dm-sans-500.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+2074, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/dm-sans-700.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+2074, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ==========================================================================
   02  TOKENS
   Every colour used anywhere on the site is declared here and nowhere else.
   ========================================================================== */

:root {
  /* --- Colour · §4.1, verbatim ------------------------------------------ */

  /* Neutrals — adopted from the reference unchanged */
  --color-ink:        #1e1e1e;  /* headings, primary text */
  --color-carbon:     #0f0f0f;  /* max-contrast text */
  --color-smoke:      #666666;  /* body secondary, helper copy */
  --color-fog:        #8d8d8d;  /* tertiary, metadata, nav rest state */
  --color-ash:        #999999;  /* disabled, placeholder */
  --color-mist:       #ccd1da;  /* hairlines, input outlines, dividers */
  --color-paper:      #ffffff;  /* page canvas — dominant surface */
  --color-snow:       #fafafa;  /* alternating bands, feature cards */

  /* Brand — Core's existing palette, mapped into the reference's roles */
  --color-midnight:   #051c33;  /* primary filled button. Core navy-deepest,
                                   replaces the reference's #0d111b */
  --color-accent:     #0b5394;  /* THE accent. Checkmarks, eyebrow labels,
                                   inline emphasis. Replaces electric blue */
  --color-accent-mid: #4a87c7;  /* larger decorative fills only */
  --color-wash:       #cfe2f3;  /* tinted highlight card backgrounds.
                                   Core blue-pale, replaces the reference's Ice */

  /* Functional status — audit verdict ONLY. Never decorative. */
  --status-clear:     #16a34a;
  --status-watch:     #ca8a04;
  --status-flag:      #ea580c;
  --status-urgent:    #dc2626;

  /* Premium interaction layer (Daniel, 31 Jul) */
  --color-go:         var(--status-clear);   /* hover/active green */
  --shadow-go:        0 6px 18px rgba(22, 163, 74, 0.32);
  --shadow-lift:      0 14px 32px rgba(10, 13, 20, 0.10);

  /* Derived shades — no new hues, no alpha, no gradients.
     Declared here so no rule below ever carries a literal colour. */
  --color-midnight-hover: #0a2c4d;  /* primary button hover — midnight, lifted */
  --color-accent-tint:    #e2eaf2;  /* --color-accent at 12% over paper,
                                       pre-flattened for the tinted callout (§4.4) */

  /* --- Typography · §4.2 ------------------------------------------------ */

  --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  --weight-medium: 500;
  --weight-bold:   700;

  /* eyebrow — 11 / 1.62 / +0.22px / 700 / uppercase */
  --fs-eyebrow: 11px;
  --lh-eyebrow: 1.62;
  --ls-eyebrow: 0.22px;

  /* body-sm — 14 / 1.43 / −0.28px / 500 */
  --fs-body-sm: 14px;
  --lh-body-sm: 1.43;
  --ls-body-sm: -0.28px;

  /* body — 16 / 1.5 / −0.32px / 500 */
  --fs-body: 16px;
  --lh-body: 1.5;
  --ls-body: -0.32px;

  /* body-lg — 22 / 1.29 / — / 500 */
  --fs-body-lg: 22px;
  --lh-body-lg: 1.29;
  --ls-body-lg: 0;

  /* subheading — 24 / 1.33 / −0.72px / 700 */
  --fs-subheading: 24px;
  --lh-subheading: 1.33;
  --ls-subheading: -0.72px;

  /* heading-sm — 32 / 1.25 / −0.96px / 700 */
  --fs-heading-sm: 32px;
  --lh-heading-sm: 1.25;
  --ls-heading-sm: -0.96px;

  /* heading — 40 / 1.2 / −1.2px / 700 */
  --fs-heading: 40px;
  --lh-heading: 1.2;
  --ls-heading: -1.2px;

  /* heading-lg — 48 / 1.17 / −1.44px / 700, clamps on mobile */
  --fs-heading-lg: clamp(28px, 4.5vw, 48px);
  --lh-heading-lg: 1.17;
  --ls-heading-lg: -1.44px;

  /* display — 64 / 1.13 / −1.92px / 700, clamps on mobile */
  --fs-display: clamp(36px, 6vw, 64px);
  --lh-display: 1.13;
  --ls-display: -1.92px;

  /* --- Spacing · §4.3, base unit 4px ----------------------------------- */

  --space-4:  4px;
  --space-8:  8px;
  --space-12: 12px;   /* element gap */
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;   /* card padding */
  --space-28: 28px;
  --space-32: 32px;
  --space-36: 36px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;

  /* --- Layout · §4.3 ---------------------------------------------------- */

  --container-max: 1200px;
  --container-pad: var(--space-24);
  --section-gap:   var(--space-96);   /* 64px on mobile — see §16 */
  --header-offset: var(--space-16);   /* sticky pill inset from viewport top */

  /* --- Radius · §4.3 — these are the only valid values ------------------ */

  --radius-pill:  100px;  /* buttons, tags, nav links, inputs */
  --radius-card:  16px;   /* feature cards, callouts */
  --radius-image: 20px;   /* images, float cards */
  --radius-panel: 32px;   /* large feature panels */

  /* --- Elevation · §4.3 — rare by design -------------------------------- */

  --shadow-button: rgb(36,38,40) 0 0 0 1px, rgba(27,28,29,0.48) 0 1px 2px 0;
  --shadow-float:  rgba(0,0,0,0.05) 0 1.78px 8px 0, rgba(0,0,0,0.04) 0 0.89px 2.67px 0;
  --shadow-subtle: rgba(10,13,20,0.03) 0 1px 2px 0;

  /* --- Motion ----------------------------------------------------------- */

  --transition-fast: 120ms ease;
  --transition-base: 180ms ease;

  /* --- Focus · §10.6 ---------------------------------------------------- */

  --focus-width:  2px;
  --focus-offset: 3px;
}


/* ==========================================================================
   03  RESET AND BASE
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--weight-medium);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;   /* long tokens (URLs, emails) never widen a
                                  narrow viewport */
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd {
  margin: 0;
}

ul, ol {
  margin: 0;
  padding: 0;
}

ul[class], ol[class] {
  list-style: none;
}

img, picture, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

button, input, select, textarea {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

a {
  color: inherit;
}

hr {
  border: 0;
  border-top: 1px solid var(--color-mist);
  margin: 0;
}

[hidden] {
  display: none !important;
}

::selection {
  background-color: var(--color-wash);
  color: var(--color-carbon);
}

/* --- Headings default to the type scale so semantic markup is correct
       even before a page agent adds a type class (§4.2). --------------- */

h1 {
  font-size: var(--fs-heading-lg);
  line-height: var(--lh-heading-lg);
  letter-spacing: var(--ls-heading-lg);
  font-weight: var(--weight-bold);
}

h2 {
  font-size: var(--fs-heading-sm);
  line-height: var(--lh-heading-sm);
  letter-spacing: var(--ls-heading-sm);
  font-weight: var(--weight-bold);
}

h3 {
  font-size: var(--fs-subheading);
  line-height: var(--lh-subheading);
  letter-spacing: var(--ls-subheading);
  font-weight: var(--weight-bold);
}

h4, h5, h6 {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  letter-spacing: var(--ls-body-lg);
  font-weight: var(--weight-bold);
}


/* ==========================================================================
   04  ACCESSIBILITY HELPERS  ·  §10.6
   ========================================================================== */

/* Visible focus on every interactive element. Pill controls lose a focus
   ring easily, so the ring is an offset outline rather than a border. */
:focus-visible {
  outline: var(--focus-width) solid var(--color-accent);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-pill);
}

/* Elements with their own corner radius keep it while focused. */
.card:focus-visible,
.callout:focus-visible,
.accordion__trigger:focus-visible {
  border-radius: var(--radius-card);
}

.float-card:focus-visible,
.field__input:focus-visible {
  border-radius: var(--radius-image);
}

.panel:focus-visible {
  border-radius: var(--radius-panel);
}

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

.skip-link {
  position: absolute;
  top: var(--space-8);
  left: var(--space-8);
  z-index: 200;
  padding: var(--space-12) var(--space-20);
  background-color: var(--color-midnight);
  color: var(--color-paper);
  border-radius: var(--radius-pill);
  font-size: var(--fs-body-sm);
  font-weight: var(--weight-bold);
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform var(--transition-base);
}

.skip-link:focus {
  transform: translateY(0);
}


/* ==========================================================================
   05  TYPOGRAPHY  ·  §4.2
   700 weight with tight negative tracking on everything 20px and up —
   the compressed headline is the whole look (§4.5).
   ========================================================================== */

.eyebrow {
  display: block;
  margin: 0 0 var(--space-24);
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  color: var(--color-accent);
}

.display {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  font-weight: var(--weight-bold);
  color: var(--color-ink);
}

.heading-lg {
  font-size: var(--fs-heading-lg);
  line-height: var(--lh-heading-lg);
  letter-spacing: var(--ls-heading-lg);
  font-weight: var(--weight-bold);
  color: var(--color-ink);
}

.heading {
  font-size: var(--fs-heading);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  font-weight: var(--weight-bold);
  color: var(--color-ink);
}

.heading-sm {
  font-size: var(--fs-heading-sm);
  line-height: var(--lh-heading-sm);
  letter-spacing: var(--ls-heading-sm);
  font-weight: var(--weight-bold);
  color: var(--color-ink);
}

.subheading {
  font-size: var(--fs-subheading);
  line-height: var(--lh-subheading);
  letter-spacing: var(--ls-subheading);
  font-weight: var(--weight-bold);
  color: var(--color-ink);
}

.body-lg {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  letter-spacing: var(--ls-body-lg);
  font-weight: var(--weight-medium);
  color: var(--color-ink);
}

.body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  font-weight: var(--weight-medium);
  color: var(--color-ink);
}

.body-sm {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  letter-spacing: var(--ls-body-sm);
  font-weight: var(--weight-medium);
  color: var(--color-ink);
}

/* Text colour modifiers. --color-smoke is the lightest permitted body
   colour (§10.6) — --color-fog and --color-ash are metadata and disabled
   states only, never running copy. */
.text-muted    { color: var(--color-smoke); }
.text-meta     { color: var(--color-fog); }
.text-strong   { color: var(--color-carbon); }
.text-accent   { color: var(--color-accent); font-weight: var(--weight-bold); }
.text-invert   { color: var(--color-paper); }

/* Inline emphasis inside a paragraph — one of the four sanctioned accent
   uses (§4.1). Keep it to a short phrase. */
strong,
b {
  font-weight: var(--weight-bold);
}

/* Inline link inside running copy. */
.link {
  color: var(--color-accent);
  font-weight: var(--weight-bold);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--transition-fast);
}

.link:hover {
  color: var(--color-midnight);
}

/* Standalone arrow link — the "Read more →" pattern. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  color: var(--color-ink);
  font-size: var(--fs-body);
  font-weight: var(--weight-bold);
  letter-spacing: var(--ls-body);
  text-decoration: none;
}

.link-arrow::after {
  content: '\2192';
  transition: transform var(--transition-fast);
}

.link-arrow:hover {
  color: var(--color-accent);
}

.link-arrow:hover::after {
  transform: translateX(3px);
}

/* Readable line lengths. */
.measure        { max-width: 68ch; }
.measure-narrow { max-width: 52ch; }
.measure-wide   { max-width: 80ch; }


/* ==========================================================================
   06  LAYOUT PRIMITIVES  ·  §4.3
   ========================================================================== */

/* The 1200px content column. Everything a visitor reads sits inside one. */
.container {
  width: 100%;
  max-width: calc(var(--container-max) + (var(--container-pad) * 2));
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.container--narrow {
  max-width: calc(840px + (var(--container-pad) * 2));
}

/* The page wrapper. Establishes the positioning context the scattered
   object layer is absolutely positioned against. */
.page {
  position: relative;
  overflow-x: clip;
}

/* Vertical rhythm. 96px section gaps are not negotiable down to 48px,
   because a section then feels empty (§4.5).

   Gap model: a section owns 96px top and bottom. Two plain sections in a
   row would double that, so the second drops its top padding — the gap
   between them stays exactly 96px. A banded section always keeps its own
   top padding, because its background needs the internal space. */
.section {
  position: relative;
  z-index: 1;
  padding-block: var(--section-gap);
}

.section + .section {
  padding-top: 0;
}

.section--band + .section,
.section--dark + .section {
  padding-top: var(--section-gap);
}

/* Inside a band, 96px reads as too much dead air above the header —
   64px keeps the internal space without the float. */
.section--band,
.section + .section--band,
.section--dark,
.section + .section--dark {
  padding-top: var(--space-64);
}

/* Section banding — --color-snow does all of it (§4.5). */
.section--band {
  background-color: var(--color-snow);
}

/* The one dark band. Use sparingly — closing CTA blocks only. */
.section--dark {
  background-color: var(--color-midnight);
  color: var(--color-paper);
}

.section--dark .eyebrow {
  color: var(--color-wash);
}

.section--dark .display,
.section--dark .heading-lg,
.section--dark .heading,
.section--dark .heading-sm,
.section--dark .subheading,
.section--dark h1,
.section--dark h2,
.section--dark h3 {
  color: var(--color-paper);
}

.section--dark .text-muted {
  color: var(--color-mist);
}

/* Tighter and looser variants, for a run of related blocks. */
.section--tight { padding-block: var(--space-64); }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }

/* Section header block — eyebrow + heading + standfirst. */
.section-head {
  max-width: 68ch;
  margin-bottom: var(--space-48);
}

.section-head > * + * {
  margin-top: var(--space-16);
}

.section-head--centred {
  margin-inline: auto;
  text-align: center;
}

/* Vertical stack. Set --gap per instance from the 4px scale. */
.stack > * + * {
  margin-top: var(--gap, var(--space-16));
}

/* Horizontal cluster — button rows, tag rows. Wraps by default. */
.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap, var(--space-12));
}

.cluster--between {
  justify-content: space-between;
}

/* Grid. Default gap 24px; collapses to 2 then 1 column (see §16). */
.grid {
  display: grid;
  gap: var(--gap, var(--space-24));
  grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr));
}

.grid--2 { --cols: 2; }
.grid--3 { --cols: 3; }
.grid--4 { --cols: 4; }

/* Two-column editorial split — copy beside a visual. */
.split {
  display: grid;
  gap: var(--gap, var(--space-64));
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
}

.split--wide-left  { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.split--wide-right { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }

/* Hairline divider. */
.rule {
  border-top: 1px solid var(--color-mist);
  margin-block: var(--space-32);
}


/* ==========================================================================
   07  BUTTONS AND LINKS  ·  §4.4
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  padding: var(--space-12) var(--space-24);
  border-radius: var(--radius-pill);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  letter-spacing: var(--ls-body-sm);
  font-weight: var(--weight-medium);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;   /* released below 768px — see §16, or use
                            .btn--wrap for a long label on any width */
  transition: background-color var(--transition-base),
              color var(--transition-base),
              box-shadow var(--transition-base);
}

/* The only filled dark button on the site. */
.btn--primary {
  background-color: var(--color-midnight);
  color: var(--color-paper);
  box-shadow: var(--shadow-button);
}

.btn--primary:hover {
  background-color: var(--color-midnight-hover);
}

/* Ghost — white background, ink text, no shadow. The secondary CTA. */
.btn--ghost {
  background-color: var(--color-paper);
  color: var(--color-ink);
  border: 1px solid var(--color-mist);
}

.btn--ghost:hover {
  background-color: var(--color-snow);
}

/* Quiet — no chrome at all until hover. For tertiary in-page actions. */
.btn--quiet {
  background-color: transparent;
  color: var(--color-ink);
}

.btn--quiet:hover {
  background-color: var(--color-snow);
}

/* On a dark band, the primary button inverts to keep contrast. */
.section--dark .btn--primary {
  background-color: var(--color-paper);
  color: var(--color-midnight);
  box-shadow: none;
}

.section--dark .btn--primary:hover {
  background-color: var(--color-wash);
}

.section--dark .btn--ghost {
  background-color: transparent;
  color: var(--color-paper);
  border-color: var(--color-accent-mid);
}

.section--dark .btn--ghost:hover {
  background-color: var(--color-midnight-hover);
}

.section--dark :focus-visible {
  outline-color: var(--color-wash);
}

/* Sizes. */
.btn--lg {
  padding: var(--space-16) var(--space-32);
  font-size: var(--fs-body);
  letter-spacing: var(--ls-body);
}

.btn--sm {
  padding: var(--space-8) var(--space-16);
}

.btn--block {
  display: flex;
  width: 100%;
}

/* A label too long to hold on one line. Pill radius survives two lines. */
.btn--wrap {
  white-space: normal;
}

.btn[disabled],
.btn[aria-disabled='true'] {
  background-color: var(--color-mist);
  color: var(--color-ash);
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}

/* Tag / pill label. Not interactive. */
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-4) var(--space-12);
  border-radius: var(--radius-pill);
  background-color: var(--color-snow);
  border: 1px solid var(--color-mist);
  color: var(--color-smoke);
  font-size: var(--fs-body-sm);
  letter-spacing: var(--ls-body-sm);
  font-weight: var(--weight-medium);
}


/* ==========================================================================
   08  SITE HEADER — pill nav and mobile nav  ·  §4.4
   White, 100px radius, wrapping the whole nav row, floating over the page
   with --shadow-subtle. Sticky on scroll.
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding-block: var(--header-offset);
}

.site-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-8) var(--space-8) var(--space-8) var(--space-20);
  background-color: var(--color-paper);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-subtle);
  transition: box-shadow var(--transition-base);
}

/* Once the pill has detached from the top of the page it reads as a
   floating card, so it takes the float shadow. Class set by core.js. */
.site-header.is-stuck .site-header__inner {
  box-shadow: var(--shadow-float);
}

.site-header__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-12);
  flex: 0 0 auto;
  color: var(--color-ink);
  font-size: var(--fs-body);
  font-weight: var(--weight-bold);
  letter-spacing: var(--ls-body);
  text-decoration: none;
}

.site-header__logo {
  width: auto;
  height: 40px;
  flex: 0 0 auto;
}

/* Nav region — links plus the trade-pricing CTA. */
.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  margin-left: auto;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  list-style: none;
}

/* Ghost nav link — white background, --color-ink text, 100px radius,
   8px 12px padding, no shadow (§4.4). */
.nav-link {
  display: inline-block;
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-pill);
  background-color: var(--color-paper);
  color: var(--color-ink);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  letter-spacing: var(--ls-body-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
  transition: background-color var(--transition-fast);
}

.nav-link:hover {
  background-color: var(--color-snow);
}

.nav-link[aria-current='page'] {
  background-color: var(--color-snow);
  font-weight: var(--weight-bold);
}

/* Mobile disclosure button. Plain CSS bars — no icon library. */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: auto;
  flex: 0 0 auto;
  border-radius: var(--radius-pill);
  background-color: var(--color-paper);
  transition: background-color var(--transition-fast);
}

.nav-toggle:hover {
  background-color: var(--color-snow);
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: var(--radius-pill);
  background-color: var(--color-ink);
  transition: transform var(--transition-base), opacity var(--transition-fast);
}

.nav-toggle__bars {
  position: relative;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: '';
  position: absolute;
  left: 0;
}

.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after  { top: 6px; }

.site-header.is-open .nav-toggle__bars {
  background-color: transparent;
}

.site-header.is-open .nav-toggle__bars::before {
  transform: translateY(6px) rotate(45deg);
}

.site-header.is-open .nav-toggle__bars::after {
  transform: translateY(-6px) rotate(-45deg);
}


/* ==========================================================================
   09  SITE FOOTER
   ========================================================================== */

.site-footer {
  position: relative;
  z-index: 1;
  padding-block: var(--space-64) var(--space-48);
  background-color: var(--color-snow);
  border-top: 1px solid var(--color-mist);
}

.site-footer__top {
  display: grid;
  gap: var(--space-48);
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  align-items: start;
}

.site-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-12);
  margin-bottom: var(--space-16);
  color: var(--color-ink);
  font-size: var(--fs-body);
  font-weight: var(--weight-bold);
  letter-spacing: var(--ls-body);
  text-decoration: none;
}

.site-footer__logo {
  width: auto;
  height: 40px;
}

.site-footer__heading {
  margin-bottom: var(--space-16);
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  color: var(--color-fog);
}

.site-footer__list {
  list-style: none;
}

.site-footer__list li + li {
  margin-top: var(--space-8);
}

.site-footer__link {
  color: var(--color-smoke);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  letter-spacing: var(--ls-body-sm);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.site-footer__link:hover {
  color: var(--color-ink);
}

.site-footer__legal {
  color: var(--color-smoke);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  letter-spacing: var(--ls-body-sm);
  font-style: normal;
}

.site-footer__legal p + p {
  margin-top: var(--space-8);
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16);
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-48);
  padding-top: var(--space-24);
  border-top: 1px solid var(--color-mist);
  color: var(--color-fog);
  font-size: var(--fs-body-sm);
  letter-spacing: var(--ls-body-sm);
}


/* ==========================================================================
   10  SURFACES — cards, panels, callouts, float cards  ·  §4.4
   Elevation is rare. Feature cards are flat (§4.5).
   ========================================================================== */

/* Feature card — --color-snow, 16px radius, 24px padding, NO shadow. */
.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: var(--space-24);
  border-radius: var(--radius-card);
  background-color: var(--color-snow);
  box-shadow: none;
}

.card__title {
  font-size: var(--fs-subheading);
  line-height: var(--lh-subheading);
  letter-spacing: var(--ls-subheading);
  font-weight: var(--weight-bold);
  color: var(--color-ink);
}

.card__text {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  font-weight: var(--weight-medium);
  color: var(--color-smoke);
}

.card__foot {
  margin-top: auto;
  padding-top: var(--space-12);
}

/* A card that is itself a link. Still flat — hover shifts the surface,
   never adds a shadow. */
a.card {
  text-decoration: none;
  transition: background-color var(--transition-base);
}

a.card:hover {
  background-color: var(--color-wash);
}

/* On a snow band, cards flip to paper so they stay legible. */
.section--band .card {
  background-color: var(--color-paper);
}

.section--band a.card:hover {
  background-color: var(--color-wash);
}

/* Large panel — --color-snow, 32px radius, 96px 48px padding, no shadow.
   For standalone editorial blocks. */
.panel {
  padding: var(--space-96) var(--space-48);
  border-radius: var(--radius-panel);
  background-color: var(--color-snow);
  box-shadow: none;
}

.panel--dark {
  background-color: var(--color-midnight);
  color: var(--color-paper);
}

.panel--dark .display,
.panel--dark .heading-lg,
.panel--dark .heading,
.panel--dark .heading-sm,
.panel--dark .subheading,
.panel--dark h1,
.panel--dark h2,
.panel--dark h3 {
  color: var(--color-paper);
}

.panel--dark .text-muted { color: var(--color-mist); }
.panel--dark .eyebrow    { color: var(--color-wash); }

/* Tinted callout — --color-wash, or the flattened 12% accent tint.
   16px radius. For highlight strips. */
.callout {
  padding: var(--space-24);
  border-radius: var(--radius-card);
  background-color: var(--color-wash);
  color: var(--color-ink);
}

.callout--tint {
  background-color: var(--color-accent-tint);
}

.callout--rule {
  background-color: transparent;
  border: 1px solid var(--color-mist);
}

.callout__title {
  margin-bottom: var(--space-8);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  letter-spacing: var(--ls-body-lg);
  font-weight: var(--weight-bold);
}

/* Float card — white, 20px radius, --shadow-float. Reserved for the
   audit-output mockup and document previews (§4.4). */
.float-card {
  padding: var(--space-24);
  border-radius: var(--radius-image);
  background-color: var(--color-paper);
  box-shadow: var(--shadow-float);
}

.float-card--tilt   { transform: rotate(-2deg); }
.float-card--tilt-r { transform: rotate(2deg); }

/* Layered stack of float cards — the invoice-stack treatment (§7.1.5). */
.float-stack {
  position: relative;
  display: grid;
}

.float-stack > .float-card {
  grid-area: 1 / 1;
}

.float-stack > .float-card:nth-child(1) {
  transform: translate(-16px, -12px) rotate(-3deg);
}

.float-stack > .float-card:nth-child(2) {
  transform: translate(8px, 6px) rotate(2deg);
}

.float-stack > .float-card:nth-child(3) {
  position: relative;
  z-index: 2;
  transform: none;
}

/* Media — 20px radius on every image surface. */
.media {
  border-radius: var(--radius-image);
  overflow: hidden;
  background-color: var(--color-snow);
}

.media img {
  width: 100%;
  height: auto;
}

/* Icon circle — fully round (§4.3). */
.icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: 50%;
  background-color: var(--color-wash);
  color: var(--color-accent);
  font-size: var(--fs-body-sm);
  font-weight: var(--weight-bold);
}

/* Numbered marker for the manifesto pillars. */
.marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid var(--color-mist);
  color: var(--color-smoke);
  font-size: var(--fs-body-sm);
  font-weight: var(--weight-bold);
}

/* Pull quote for the framing statements in §7.2. */
.pullquote {
  padding-left: var(--space-24);
  border-left: 2px solid var(--color-accent);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  letter-spacing: var(--ls-body-lg);
  font-weight: var(--weight-medium);
  color: var(--color-ink);
}


/* ==========================================================================
   11  TICK ROWS  ·  §4.4
   Round --color-accent tick icon + 16px/500 label + bold value.
   No background, no border.
   ========================================================================== */

.tick-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  list-style: none;
}

.tick-list--inline {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-16) var(--space-32);
}

.tick-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  font-weight: var(--weight-medium);
  color: var(--color-ink);
}

.tick-row__icon {
  position: relative;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  margin-top: 2px;
  border-radius: 50%;
  background-color: var(--color-accent);
}

/* The check, drawn in CSS — no image request, no SVG. */
.tick-row__icon::after {
  content: '';
  position: absolute;
  top: 5px;
  left: 7px;
  width: 5px;
  height: 9px;
  border-right: 2px solid var(--color-paper);
  border-bottom: 2px solid var(--color-paper);
  transform: rotate(45deg);
}

.tick-row__label {
  color: var(--color-ink);
}

.tick-row__value {
  font-weight: var(--weight-bold);
  color: var(--color-carbon);
}

.section--dark .tick-row,
.panel--dark .tick-row {
  color: var(--color-paper);
}

.section--dark .tick-row__label,
.panel--dark .tick-row__label {
  color: var(--color-paper);
}

.section--dark .tick-row__value,
.panel--dark .tick-row__value {
  color: var(--color-paper);
}

.section--dark .tick-row__icon,
.panel--dark .tick-row__icon {
  background-color: var(--color-accent-mid);
}


/* ==========================================================================
   12  ACCORDION  ·  §4.4
   Full width, 1px --color-mist bottom border, 16px/500 question,
   plus icon right, 16px vertical padding.
   ========================================================================== */

.accordion {
  border-top: 1px solid var(--color-mist);
}

.accordion__item {
  border-bottom: 1px solid var(--color-mist);
}

.accordion__heading {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  font-weight: inherit;
}

.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  width: 100%;
  padding-block: var(--space-16);
  text-align: left;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  font-weight: var(--weight-medium);
  color: var(--color-ink);
  transition: color var(--transition-fast);
}

.accordion__trigger:hover {
  color: var(--color-accent);
}

.accordion__trigger[aria-expanded='true'] {
  font-weight: var(--weight-bold);
}

/* Plus icon, drawn in CSS. Becomes a minus when expanded. */
.accordion__icon {
  position: relative;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.accordion__icon::before,
.accordion__icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: var(--color-smoke);
  transition: transform var(--transition-base), opacity var(--transition-fast);
}

.accordion__icon::before {
  width: 14px;
  height: 2px;
  transform: translate(-50%, -50%);
}

.accordion__icon::after {
  width: 2px;
  height: 14px;
  transform: translate(-50%, -50%);
}

.accordion__trigger[aria-expanded='true'] .accordion__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

.accordion__trigger[aria-expanded='true'] .accordion__icon::before {
  background-color: var(--color-accent);
}

.accordion__panel {
  padding-bottom: var(--space-24);
}

.accordion__panel > * + * {
  margin-top: var(--space-12);
}

.accordion__panel p {
  max-width: 68ch;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--color-smoke);
}


/* ==========================================================================
   13  FORMS
   The active state of a form control is one of the four sanctioned uses
   of --color-accent (§4.1).
   ========================================================================== */

.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.field__label {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  letter-spacing: var(--ls-body-sm);
  font-weight: var(--weight-bold);
  color: var(--color-ink);
}

.field__hint {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  letter-spacing: var(--ls-body-sm);
  color: var(--color-smoke);
}

.field__input {
  width: 100%;
  padding: var(--space-12) var(--space-20);
  border: 1px solid var(--color-mist);
  border-radius: var(--radius-pill);
  background-color: var(--color-paper);
  color: var(--color-ink);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  font-weight: var(--weight-medium);
  transition: border-color var(--transition-fast);
}

.field__input::placeholder {
  color: var(--color-ash);
}

.field__input:hover {
  border-color: var(--color-fog);
}

.field__input:focus {
  border-color: var(--color-accent);
  outline: none;
}

.field__input:focus-visible {
  outline: var(--focus-width) solid var(--color-accent);
  outline-offset: var(--focus-offset);
}

.field__input[disabled] {
  background-color: var(--color-snow);
  color: var(--color-ash);
  cursor: not-allowed;
}

/* Multi-line input is the one control that does not take a pill radius —
   a 100px corner on a text box is unusable at small heights. Documented
   deviation from §4.3; still at or above the 16px surface floor. */
textarea.field__input {
  border-radius: var(--radius-image);
  min-height: 120px;
  resize: vertical;
}

/* Option — a selectable pill wrapping a native input. Used by the audit
   question screens for single- and multi-select. */
.option {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-12) var(--space-20);
  border: 1px solid var(--color-mist);
  border-radius: var(--radius-pill);
  background-color: var(--color-paper);
  color: var(--color-ink);
  font-size: var(--fs-body);
  letter-spacing: var(--ls-body);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: border-color var(--transition-fast),
              background-color var(--transition-fast);
}

.option:hover {
  border-color: var(--color-fog);
}

.option__input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}

.option:has(.option__input:checked) {
  border-color: var(--color-accent);
  background-color: var(--color-accent-tint);
  font-weight: var(--weight-bold);
}

.option:has(.option__input:focus-visible) {
  outline: var(--focus-width) solid var(--color-accent);
  outline-offset: var(--focus-offset);
}

/* Checkbox row — consent lines and the like. */
.checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  letter-spacing: var(--ls-body-sm);
  color: var(--color-smoke);
  cursor: pointer;
}

.checkbox input[type='checkbox'] {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin: 0;
  accent-color: var(--color-accent);
}

/* Netlify honeypot — present in the markup, never seen. */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


/* ==========================================================================
   14  SCATTERED OBJECTS  ·  §5.1
   Objects sit in the page margins, outside the 1200px content column,
   cropped by the viewport edge. Decorative only — aria-hidden, empty alt.
   Hidden entirely below 900px viewport width.
   ========================================================================== */

.objects {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

/* Position each object with inline custom properties:
     --object-top    distance from the top of .page
     --object-left   or --object-right — use a negative value so the
                     viewport edge crops it
     --object-w      rendered width
   Drift is applied by core.js via transform; never set transform inline. */
.object {
  position: absolute;
  top: var(--object-top, 0);
  left: var(--object-left, auto);
  right: var(--object-right, auto);
  width: var(--object-w, 200px);
  height: auto;
  opacity: var(--object-opacity, 1);
  will-change: transform;
}

/* Responsive object scaling (Daniel, 5 Aug) — on narrower desktop windows
   the fixed-size objects were sliding in over the content column instead
   of shrinking with it. The `scale` property composes with the parallax
   transform (core.js owns style.transform) and with the `rotate` property,
   so it is safe here. Each object scales toward the viewport edge it hangs
   off, so its page-edge crop shrinks in proportion and it stays in the
   margin. */
.object[style*="--object-right"] { transform-origin: right center; }
.object[style*="--object-left"]  { transform-origin: left center; }

@media (max-width: 1799px) { .object { scale: 0.85; } }
@media (max-width: 1649px) { .object { scale: 0.7; } }
@media (max-width: 1499px) { .object { scale: 0.55; } }
@media (max-width: 1349px) { .object { scale: 0.45; } }

/* Phase 1 placeholder — a neutral grey block at the correct dimensions,
   so the layout is real before the Higgsfield set exists (§5.2). */
.object--placeholder {
  aspect-ratio: var(--object-ratio, 4 / 3);
  height: auto;
  border-radius: var(--radius-image);
  background-color: var(--color-mist);
  opacity: var(--object-opacity, 0.5);
}


/* ==========================================================================
   15  UTILITIES
   ========================================================================== */

.text-centre { text-align: center; }
.text-left   { text-align: left; }

.mx-auto { margin-inline: auto; }

.mt-0  { margin-top: 0; }
.mt-8  { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }
.mt-16 { margin-top: var(--space-16); }
.mt-24 { margin-top: var(--space-24); }
.mt-32 { margin-top: var(--space-32); }
.mt-48 { margin-top: var(--space-48); }
.mt-64 { margin-top: var(--space-64); }

.mb-0  { margin-bottom: 0; }
.mb-8  { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }
.mb-16 { margin-bottom: var(--space-16); }
.mb-24 { margin-bottom: var(--space-24); }
.mb-32 { margin-bottom: var(--space-32); }
.mb-48 { margin-bottom: var(--space-48); }

.full-width { width: 100%; }

/* Anchor offset so a #hash target is not hidden under the sticky pill. */
[id] {
  scroll-margin-top: calc(var(--space-96) + var(--header-offset));
}


/* ==========================================================================
   16  RESPONSIVE
   Checked at 375px, 768px and 1440px (§12.6).
   ========================================================================== */

/* --- Tablet and below ------------------------------------------------- */
@media (max-width: 1023px) {
  .grid--3,
  .grid--4 {
    --cols: 2;
  }

  .panel {
    padding: var(--space-64) var(--space-32);
  }

  .split {
    gap: var(--space-48);
  }
}

/* --- Scattered objects off. Nav collapses at the same width, so the
       pill never wraps. (§5.1) ---------------------------------------- */
@media (max-width: 899px) {
  .objects {
    display: none;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .site-nav {
    position: absolute;
    top: calc(100% + var(--space-8));
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-16);
    margin-left: 0;
    padding: var(--space-20);
    background-color: var(--color-paper);
    border-radius: var(--radius-image);
    box-shadow: var(--shadow-float);
  }

  .site-header.is-open .site-nav {
    display: flex;
  }

  .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
  }

  .nav-link {
    display: block;
    padding: var(--space-12) var(--space-16);
    font-size: var(--fs-body);
    letter-spacing: var(--ls-body);
  }

  .site-nav__cta {
    width: 100%;
  }
}

/* --- Phone ------------------------------------------------------------ */
@media (max-width: 767px) {
  :root {
    --section-gap: var(--space-64);   /* 64px on mobile (§4.3) */

    /* Mobile type scale. The desktop clamps bottom out in the wrong order
       on a phone — .display lands on 36px and .heading-lg on 28px while
       .heading holds 40px, so a section heading out-shouts the page h1.
       Re-pin the middle of the scale so the hierarchy stays
       display > heading-lg > heading > heading-sm > subheading.
       Tracking is re-derived at −3% of size, so the signature tightness
       is preserved, not softened. */
    --fs-heading-lg: 33px;
    --ls-heading-lg: -0.99px;
    --fs-heading: 30px;
    --ls-heading: -0.9px;
    --fs-heading-sm: 26px;
    --ls-heading-sm: -0.78px;

    /* Standfirsts: 22px over a 350px column reads as a wall. One step
       down keeps the pull-out feel at phone width. */
    --fs-body-lg: 19px;
    --lh-body-lg: 1.42;

    /* Eyebrows: 11px is below the phone legibility floor (13px) — a shed
       is not a design studio. Tracking scaled with the size. */
    --fs-eyebrow: 13px;
    --lh-eyebrow: 1.4;
    --ls-eyebrow: 0.26px;
  }

  .grid--2,
  .grid--3,
  .grid--4 {
    --cols: 1;
  }

  .split,
  .split--wide-left,
  .split--wide-right {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-32);
  }

  .panel {
    padding: var(--space-48) var(--space-24);
  }

  .section-head {
    margin-bottom: var(--space-32);
  }

  .site-footer__top {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-32);
  }

  .float-card--tilt,
  .float-card--tilt-r,
  .float-stack > .float-card:nth-child(1),
  .float-stack > .float-card:nth-child(2) {
    transform: none;
  }

  .float-stack > .float-card:nth-child(1),
  .float-stack > .float-card:nth-child(2) {
    display: none;
  }

  .tick-list--inline {
    flex-direction: column;
    gap: var(--space-12);
  }

  /* In the hero mockup stack, a long bold value beside a long label wraps
     both into a ragged two-column tangle at phone width. Drop the value
     onto its own line, aligned under the label text. */
  .float-stack .tick-row {
    flex-wrap: wrap;
  }

  .float-stack .tick-row__value {
    flex-basis: 100%;
    padding-left: var(--space-32);   /* 20px icon + 12px gap */
  }

  /* A pill label must never be able to push the page wider than the
     phone it is being read on. */
  .btn {
    white-space: normal;
  }

  .btn--block-mobile {
    display: flex;
    width: 100%;
  }

  /* Footer links are the smallest targets on the page — give each one
     breathing room so a thumb lands cleanly. */
  .site-footer__link {
    display: inline-block;
    padding-block: var(--space-4);
  }
}

/* --- Small phone (375px) ---------------------------------------------- */
@media (max-width: 419px) {
  :root {
    --container-pad: var(--space-20);
  }

  .site-header__inner {
    padding-left: var(--space-16);
  }

  .cluster {
    --gap: var(--space-8);
  }
}


/* ==========================================================================
   17  REDUCED MOTION  ·  §10.6
   Parallax off, objects remain static, every transition neutralised.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }

  .object {
    transform: none !important;
  }
}


/* ==========================================================================
   PREMIUM INTERACTION LAYER (Daniel, 31 Jul)
   Hover depth for cards and product tiles, green-lit buttons, marquee
   edge fade, custom glyph rows. All transitions die under reduced motion
   via the global rule; explicit resets below for transforms.
   ========================================================================== */

.btn {
  transition: transform 0.18s ease, box-shadow 0.18s ease,
              background-color 0.18s ease, border-color 0.18s ease,
              color 0.18s ease;
}
.btn--primary:hover,
.btn--primary:focus-visible {
  background-color: var(--color-go);
  transform: translateY(-2px);
  box-shadow: var(--shadow-go);
}
.btn--primary:active { transform: translateY(0); box-shadow: var(--shadow-subtle); }
.btn--ghost:hover,
.btn--ghost:focus-visible {
  border-color: var(--color-go);
  color: var(--color-go);
  transform: translateY(-2px);
}
.btn--ghost:active { transform: translateY(0); }

/* Product tiles: whole card is a link; lifts and pops on hover. */
.product-card {
  display: block;
  color: inherit;
  text-decoration: none;
  border-radius: var(--radius-card, 16px);
  padding: 16px;
  margin: -16px;
  transition: transform 0.22s ease, box-shadow 0.22s ease,
              background-color 0.22s ease;
}
.product-card:hover,
.product-card:focus-visible {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lift);
  background-color: var(--color-paper);
}
.product-card img { transition: transform 0.22s ease; }
.product-card:hover img { transform: scale(1.04); }

/* Feature cards get the same gentle lift. */
.card {
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }

/* Client marquee: soft fade at both edges. */
.client-marquee {
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
          mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

/* Custom glyph rows — inline SVG icons replacing the generic tick. */
.tick-row__glyph {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  margin-top: 0;
  color: var(--color-accent);
}
.tick-row__glyph svg { display: block; width: 100%; height: 100%; }

@media (prefers-reduced-motion: reduce) {
  .btn:hover, .btn--primary:hover, .btn--ghost:hover,
  .product-card:hover, .product-card:hover img, .card:hover {
    transform: none;
  }
}