/* ==========================================================================
   Hanley Technologies — brand stylesheet

   One dark theme, built on charcoal rather than pure black. Sections share a
   single background; separation comes from generous whitespace and a
   barely-raised card surface, not from banded backgrounds or heavy borders.
   Accent orange is reserved for buttons, circles, statistics and small
   decorative marks. The only light surfaces left are the product photo tiles,
   which stay white because the photography is shot on white (.product__shot).
   ========================================================================== */

/* ---------- tokens ---------- */
:root {
  /* the browser paints native controls, scrollbars and date pickers to match */
  color-scheme: dark;

  /* ---------- palette ----------
     Charcoal rather than pure black. Sections all share --bg; separation comes
     from whitespace and a barely-raised --surface, not from banded backgrounds
     or borders. */
  --bg:            #232522;
  --surface:       #292b28;   /* cards — one step up, deliberately subtle */
  --surface-hover: #2f322e;
  --border:        #383b37;
  --border-strong: #4a4d48;   /* hover hairline */

  --text-primary:   #f5f5f5;
  --text-secondary: #dddddd;  /* nav, labels, stat captions */
  /* Body copy. The reference uses #90928f, which is 4.93:1 on --bg but drops to
     4.15:1 on a raised card — below AA. One step lighter clears every surface. */
  --text-muted:     #9b9d99;

  --accent:       #ff6325;
  --accent-hover: #ff9a65;   /* also the top stop of the button gradient */
  --focus:        #ffb36b;
  --accent-grad:  linear-gradient(180deg, #ff9a65 0%, #ff6226 100%);
  --accent-glow:  0 5px 15px rgba(255, 95, 30, .25);

  /* accent channels, so every tint is mixed from one source */
  --accent-rgb:   255, 99, 37;

  /* The accent darkened for the surfaces that are still light — the product
     tiles and print. #ff6325 is 2.97:1 on white; this is 6.6:1. */
  --accent-ink:   #A33A00;

  /* status colours, chosen against --surface rather than against white */
  --ok:      #6FDC9C;   /* 11.1:1 on --surface */
  --ok-rgb:  111, 220, 156;
  --err:     #FF8A80;   /*  8.2:1 on --surface */
  --err-rgb: 255, 138, 128;

  /* ---------- role aliases ----------
     The rules further down were written against the previous light/dark token
     names. Pointing them at the palette above re-themes every component at
     once and keeps a single place to change a colour. */
  --ink:           var(--bg);
  --ink-2:         var(--surface);
  --ink-3:         var(--surface-hover);
  --ink-4:         var(--border-strong);
  --paper:         var(--surface);         /* cards sit just above the ground */
  --paper-2:       var(--bg);              /* sections no longer band */
  --paper-3:       var(--surface-hover);   /* chips, wells, ghost-button hover */
  --line-dark:     var(--border);
  --line-light:    var(--border);
  --on-dark:       var(--text-primary);
  --on-dark-mute:  var(--text-muted);
  --on-light:      var(--text-primary);
  --on-light-mute: var(--text-muted);
  --amber:         var(--accent-hover);
  --orange:        var(--accent);
  --orange-deep:   var(--accent);
  --accent-text:   var(--accent);

  /* type */
  --font-display: "Space Grotesk", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  /* Calibri sits directly behind Inter: it ships with Office and Windows, so it
     is the closest humanist sans most visitors already have if the webfont
     never loads. To make Calibri the primary text face instead, move it in
     front of "Inter". */
  --font-body: "Inter", Calibri, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* metrics — wider shell and a 6%-style gutter for the open, airy layout */
  --shell: 1400px;
  --gutter: clamp(1.25rem, 6vw, 5.5rem);
  --radius: 14px;      /* cards */
  --radius-sm: 12px;   /* buttons, inputs, chips */
  --radius-lg: 18px;   /* form panel, CTA band */
  --header-h: 92px;

  /* shadows read as depth against dark, so they lean on pure black */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .45);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, .55);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, .6);

  --ease: cubic-bezier(.22, 1, .36, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-primary);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, picture { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.02em;
  margin: 0 0 .6em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 6.4vw, 4.6rem); letter-spacing: -.035em; }
h2 { font-size: clamp(2rem, 4.2vw, 3.1rem); letter-spacing: -.028em; }
h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); }
h4 { font-size: 1.02rem; letter-spacing: -.01em; }
p  { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

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

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -140%);
  z-index: 200; padding: .7rem 1.2rem; background: var(--amber); color: var(--ink);
  font-weight: 600; border-radius: 0 0 10px 10px; transition: transform .2s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* ---------- layout helpers ---------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell--wide { max-width: 1400px; }

.section { padding-block: clamp(4.5rem, 9vw, 8rem); position: relative; }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }
/* The layout runs on one continuous charcoal. These modifiers are kept so the
   existing markup keeps working, but they no longer paint separate bands —
   cards and whitespace do the separating now. */
.section--dark, .section--ink2, .section--paper { background: var(--bg); color: var(--text-primary); }
.section--dark p, .section--ink2 p { color: var(--on-dark-mute); }

.stack > * + * { margin-top: var(--gap, 1rem); }
.grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

.measure { max-width: 62ch; }
.center { text-align: center; margin-inline: auto; }

/* ---------- eyebrow / section heads ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-display);
  font-size: .74rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent-text);
  margin: 0 0 1.1rem;
}
.eyebrow::before {
  content: ""; width: 26px; height: 2px; border-radius: 2px;
  background: var(--orange);
}
.section--dark .eyebrow,
.section--ink2 .eyebrow,
.hero .eyebrow { color: var(--amber); }

.section-head { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.section-head p { font-size: 1.075rem; color: var(--on-light-mute); }
.section--dark .section-head p, .section--ink2 .section-head p { color: var(--on-dark-mute); }

.lede { font-size: clamp(1.075rem, 1.6vw, 1.28rem); line-height: 1.6; color: var(--on-light-mute); }
.section--dark .lede, .section--ink2 .lede, .hero .lede,
.page-head .lede, .cta-band .lede { color: var(--text-muted); }

/* ---------- buttons ---------- */
.btn {
  --btn-bg: var(--orange-deep);
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: 1rem 2.4rem;
  font-family: var(--font-display); font-weight: 600; font-size: .84rem;
  letter-spacing: .01em;
  /* The gradient is bright, so the label is near-black: white on this ramp is
     2.1-3.0:1, dark is 5.2-7.4:1. Swap `color` to #fff to match the reference
     exactly, accepting the contrast drop. */
  color: #1a1c19;
  background: var(--accent-grad);
  box-shadow: var(--accent-glow);
  border: 0; border-radius: var(--radius-sm); cursor: pointer;
  transition: filter .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.btn:hover { filter: brightness(1.07); box-shadow: 0 8px 22px rgba(255, 95, 30, .34); }
.btn:active { transform: translateY(1px); filter: brightness(.97); }
.btn svg { width: 16px; height: 16px; flex: none; }

.btn--ghost {
  background: none; color: var(--text-primary);
  border: 1px solid var(--border); box-shadow: none;
}
.btn--ghost:hover { background: var(--surface-hover); box-shadow: none; filter: none; }

.section--dark .btn--ghost, .section--ink2 .btn--ghost,
.hero .btn--ghost, .page-head .btn--ghost, .cta-band .btn--ghost {
  color: var(--on-dark); border-color: rgba(255, 255, 255, .22);
}
.section--dark .btn--ghost:hover, .section--ink2 .btn--ghost:hover,
.hero .btn--ghost:hover, .page-head .btn--ghost:hover, .cta-band .btn--ghost:hover {
  background: rgba(255, 255, 255, .07);
}

.btn--sm { padding: .75rem 1.7rem; font-size: .8rem; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--font-display); font-weight: 600; font-size: .92rem;
  color: var(--accent-text);
}
.link-arrow svg { width: 15px; height: 15px; transition: transform .25s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }
.section--dark .link-arrow, .section--ink2 .link-arrow { color: var(--amber); }

/* ==========================================================================
   HEADER
   ========================================================================== */
.header {
  position: sticky; top: 0; z-index: 100;
  /* No border and no separate background — it reads as part of the page until
     you scroll, when a soft shadow keeps the links off the content. */
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: box-shadow .3s var(--ease);
}
.header.is-scrolled { box-shadow: 0 8px 30px rgba(0, 0, 0, .45); }

.header__inner {
  height: var(--header-h);
  display: flex; align-items: center; gap: 1.5rem;
}
.brand { display: flex; align-items: center; gap: .7rem; margin-right: auto; }
.brand img { height: 38px; width: auto; }
.brand__word {
  display: none;
  font-family: var(--font-display); font-weight: 600; font-size: .72rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--on-dark-mute);
  padding-left: .75rem; border-left: 1px solid var(--line-dark);
}
@media (min-width: 880px) { .brand__word { display: block; } }

.nav { display: none; align-items: center; gap: clamp(1.4rem, 2.8vw, 45px); }
@media (min-width: 980px) { .nav { display: flex; } }

.nav a {
  position: relative;
  padding: .5rem 0;
  font-size: .82rem; font-weight: 400; color: var(--text-secondary);
  transition: color .2s;
}
.nav a:hover { color: var(--text-primary); }
.nav a[aria-current="page"] { color: var(--text-primary); }
.nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 50%; bottom: -2px; translate: -50% 0;
  width: 16px; height: 2px; border-radius: 2px; background: var(--accent);
}

.header .btn { display: none; }
@media (min-width: 980px) { .header .btn { display: inline-flex; } }

.burger {
  display: grid; place-items: center;
  width: 42px; height: 42px; margin-left: auto;
  background: rgba(255, 255, 255, .07); border: 1px solid var(--line-dark);
  border-radius: 12px; cursor: pointer; color: var(--on-dark);
}
@media (min-width: 980px) { .burger { display: none; } }
.burger span {
  display: block; width: 17px; height: 1.5px; background: currentColor;
  transition: transform .3s var(--ease), opacity .2s;
}
.burger span + span { margin-top: 4px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* mobile drawer */
.drawer {
  position: fixed; inset: var(--header-h) 0 auto 0; z-index: 99;
  background: rgba(8, 8, 8, .98);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--line-dark);
  padding: 1rem var(--gutter) 2rem;
  display: grid; gap: .2rem;
  transform: translateY(-8px); opacity: 0; visibility: hidden;
  transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
}
.drawer.is-open { transform: none; opacity: 1; visibility: visible; }
.drawer a {
  padding: .95rem .25rem; color: var(--on-dark);
  font-family: var(--font-display); font-size: 1.35rem; font-weight: 500;
  letter-spacing: -.02em;
  border-bottom: 1px solid var(--line-dark);
}
.drawer a:last-of-type { border-bottom: 0; }
.drawer .btn { margin-top: 1.1rem; }
@media (min-width: 980px) { .drawer { display: none; } }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative; overflow: hidden;
  background: var(--ink); color: var(--on-dark);
  padding-block: clamp(3rem, 6vw, 5rem);
  min-height: 620px; display: grid; align-items: center;
  isolation: isolate;
}
.hero::before {
  content: ""; position: absolute; z-index: -2;
  width: 130vmax; height: 130vmax; left: 50%; top: -70vmax; translate: -50% 0;
  background: radial-gradient(circle, rgba(var(--accent-rgb), .22) 0%, rgba(var(--accent-rgb), .07) 34%, transparent 62%);
  pointer-events: none;
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 62px 62px;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 20%, transparent 78%);
  mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 20%, transparent 78%);
}

.hero__grid {
  display: grid; gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 940px) {
  .hero__grid { grid-template-columns: 42% 58%; }
}
/* The light/bold weight mix is the headline's defining feature — the emphasis
   comes from weight, not colour. */
.hero h1 {
  margin-bottom: .45em;
  font-weight: 300;
  font-size: clamp(2.4rem, 5.2vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -.03em;
}
.hero h1 em, .hero h1 strong { font-style: normal; font-weight: 700; color: var(--text-primary); }
.hero__lede {
  max-width: 430px; font-size: .88rem; line-height: 1.7; color: var(--text-muted);
}
.hero__cta { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.9rem; }

.hero__art { position: relative; isolation: isolate; }
.hero__art img { position: relative; z-index: 2; filter: drop-shadow(0 40px 60px rgba(0, 0, 0, .6)); }

/* Large filled circle, deliberately running off the right edge (.hero clips it). */
.hero__art::before {
  content: ""; position: absolute; z-index: 0;
  width: 260px; height: 260px; border-radius: 50%;
  background: var(--accent);
  right: -130px; top: 100px;
}
/* Smaller open ring, lower left of the image. */
.hero__art::after {
  content: ""; position: absolute; z-index: 0;
  width: 120px; height: 120px; border-radius: 50%;
  border: 8px solid var(--accent);
  left: -18px; bottom: 4%;
}
@media (max-width: 939px) {
  .hero__art::before { width: 180px; height: 180px; right: -90px; top: 40px; }
  .hero__art::after { width: 84px; height: 84px; border-width: 6px; left: -10px; }
}

/* trust strip */
.strip {
  border-top: 1px solid var(--line-dark);
  background: var(--ink);
  color: var(--on-dark);
  padding-block: 1.6rem;
  overflow: hidden;
}
.strip__inner {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .75rem clamp(1.5rem, 4vw, 3rem);
  font-family: var(--font-display); font-size: .8rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-mute);
}
.strip__inner span { display: inline-flex; align-items: center; gap: .55rem; }
.strip__inner span::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--amber);
}

/* ---------- stats ---------- */
/* No boxes: the numbers carry the weight, the captions stay quiet. */
.stats { display: flex; flex-wrap: wrap; gap: 2.2rem 60px; margin-top: 35px; }
.stat { background: none; padding: 0; }
.stat dt {
  font-family: var(--font-display); font-size: clamp(1.9rem, 3.4vw, 2.15rem); font-weight: 600;
  letter-spacing: -.03em; line-height: 1;
  color: var(--accent);
}
.stat dd {
  margin: .55rem 0 0; font-size: .75rem; line-height: 1.45;
  letter-spacing: .04em; color: var(--text-secondary);
}

/* ==========================================================================
   CARDS
   ========================================================================== */
.card {
  position: relative;
  display: flex; flex-direction: column;
  padding: clamp(1.5rem, 2.6vw, 2rem);
  background: var(--paper);
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.card h3 { margin-bottom: .5rem; }
.card p { font-size: .96rem; color: var(--on-light-mute); }

.card--dark {
  background: var(--surface-hover); border-color: var(--border); color: var(--text-primary);
}
.card--dark p { color: var(--on-dark-mute); }
.card--dark:hover { border-color: rgba(var(--accent-rgb), .35); box-shadow: 0 24px 50px rgba(0, 0, 0, .4); }

.card__num {
  font-family: var(--font-display); font-size: .78rem; font-weight: 600;
  letter-spacing: .14em; color: var(--accent-text); margin-bottom: 1.4rem;
}
.card--dark .card__num { color: var(--amber); }

.icon-badge {
  width: 46px; height: 46px; flex: none;
  display: grid; place-items: center; margin-bottom: 1.15rem;
  border-radius: 13px;
  background: linear-gradient(150deg, rgba(var(--accent-rgb), .18), rgba(var(--accent-rgb), .12));
  border: 1px solid rgba(var(--accent-rgb), .22);
  color: var(--orange-deep);
}
.icon-badge svg { width: 22px; height: 22px; }
.card--dark .icon-badge, .section--dark .icon-badge, .section--ink2 .icon-badge {
  color: var(--amber);
  background: linear-gradient(150deg, rgba(var(--accent-rgb), .16), rgba(var(--accent-rgb), .08));
  border-color: rgba(var(--accent-rgb), .24);
}

/* offer cards with a top accent rail */
.card--rail { overflow: hidden; }
.card--rail::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--orange);
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease);
}
.card--rail:hover::before { transform: scaleX(1); }

/* ---------- capability list (compact service index) ---------- */
.cap-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1px;
  background: var(--line-dark);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  overflow: hidden;
}
@media (min-width: 640px)  { .cap-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cap-list { grid-template-columns: repeat(3, 1fr); } }

/* The icon is a sibling of the link, not a child of it, so the two-column grid
   belongs on the <li>. Putting it on the <a> made the title and the description
   the two columns — which is why they sat side by side. */
.cap-list li {
  position: relative;
  display: grid; grid-template-columns: auto 1fr; gap: 1rem;
  align-items: start;
  padding: 1.4rem 1.5rem;
  background: var(--surface-hover);
  transition: background-color .3s var(--ease);
}
.cap-list li:hover { background: rgba(var(--accent-rgb), .06); }
.cap-list a { font-size: .92rem; color: var(--on-dark-mute); }
/* Stretch the link over the whole cell so the icon and padding stay clickable.
   The accessible name is still the link's own text. */
.cap-list a::after { content: ""; position: absolute; inset: 0; }
.cap-list a strong {
  display: block; margin-bottom: .3rem;
  font-family: var(--font-display); font-weight: 600; font-size: 1.02rem;
  letter-spacing: -.018em; color: var(--on-dark);
  transition: color .2s;
}
.cap-list a:hover strong { color: var(--amber); }
.cap-list .icon-badge { margin-bottom: 0; width: 40px; height: 40px; border-radius: 11px; }
.cap-list .icon-badge svg { width: 19px; height: 19px; }

/* ---------- story teaser (dark band with portrait) ---------- */
.teaser {
  display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center;
}
@media (min-width: 820px) { .teaser { grid-template-columns: 15rem 1fr; } }
.teaser__portrait {
  margin: 0; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line-dark);
  max-width: 15rem;
}
.teaser__portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 12%; }

/* ---------- feature rows (alternating) ---------- */
.feature {
  display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
@media (min-width: 900px) {
  .feature { grid-template-columns: 1fr 1fr; }
  .feature--flip .feature__media { order: -1; }
}
.feature + .feature { margin-top: clamp(4rem, 8vw, 7rem); }
.feature__media {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--paper-3); box-shadow: var(--shadow-md);
  aspect-ratio: 4 / 3;
}
.feature__media img { width: 100%; height: 100%; object-fit: cover; }
.feature__media--tint::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(200deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, .62));
}

.tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.6rem; padding: 0; list-style: none; }
.tags li {
  padding: .38rem .8rem; border-radius: var(--radius-sm);
  font-size: .81rem; font-weight: 500;
  background: var(--paper-3); color: var(--on-light-mute);
  border: 1px solid var(--line-light);
}
.section--dark .tags li, .section--ink2 .tags li {
  background: rgba(255, 255, 255, .05); color: var(--text-secondary); border-color: var(--line-dark);
}

/* checklist */
.checks { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .8rem; }
.checks li { display: flex; gap: .75rem; font-size: .97rem; color: var(--on-light-mute); }
.checks svg { width: 19px; height: 19px; flex: none; margin-top: .22rem; color: var(--orange); }
.section--dark .checks li, .section--ink2 .checks li { color: var(--text-secondary); }
.section--dark .checks svg, .section--ink2 .checks svg { color: var(--amber); }

/* ==========================================================================
   PRODUCTS
   ========================================================================== */
.product-grid { display: grid; gap: clamp(1.25rem, 2.4vw, 1.9rem); }
@media (min-width: 620px) { .product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }

.product {
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow .3s var(--ease), border-color .3s;
}
.product:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }

.product__shot {
  position: relative;
  /* product photography is shot on white — keep the tile white so it blends */
  background: #fff;
  border-bottom: 1px solid var(--line-light);
  aspect-ratio: 16 / 11;
  display: grid; place-items: center;
  padding: 1rem;
  overflow: hidden;
}
.product__shot img {
  max-height: 100%; width: auto; object-fit: contain; mix-blend-mode: multiply;
  transition: transform .5s var(--ease);
}
.product:hover .product__shot img { transform: scale(1.045); }
.product__badge {
  position: absolute; top: .9rem; left: .9rem; z-index: 2;
  padding: .3rem .7rem; border-radius: var(--radius-sm);
  font-family: var(--font-display); font-size: .68rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  background: var(--ink); color: var(--amber);
}

.product__body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.product__name {
  font-family: var(--font-display); font-size: 1.35rem; font-weight: 600;
  letter-spacing: -.025em; margin: 0;
}
.product__model {
  font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-text); margin: .35rem 0 .8rem;
}
.product__body p { font-size: .93rem; color: var(--on-light-mute); margin-bottom: 1.3rem; }

.specs {
  list-style: none; margin: auto 0 0; padding: 1.1rem 0 0;
  border-top: 1px solid var(--line-light);
  display: grid; gap: .6rem;
}
.specs li {
  display: grid; grid-template-columns: 1.9rem 1fr auto; align-items: baseline; gap: .5rem;
  font-size: .875rem;
}
.specs svg { width: 15px; height: 15px; color: var(--on-light-mute); align-self: center; }
.specs dt, .specs .k { color: var(--on-light-mute); }
.specs .v { font-weight: 600; text-align: right; color: var(--on-light); letter-spacing: -.01em; }
.specs .v--tbc { font-weight: 500; color: var(--on-light-mute); font-style: italic; }

/* naming note */
.note {
  display: flex; gap: .9rem; align-items: flex-start;
  padding: 1.1rem 1.3rem; border-radius: var(--radius-sm);
  background: rgba(var(--accent-rgb), .09);
  border: 1px solid rgba(var(--accent-rgb), .22);
  font-size: .92rem; color: var(--on-light-mute);
}
.note svg { width: 19px; height: 19px; flex: none; margin-top: .18rem; color: var(--orange-deep); }
.note strong { color: var(--on-light); }

/* ==========================================================================
   STORY / LONG-FORM PROSE
   ========================================================================== */
.story { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }
@media (min-width: 960px) {
  .story { grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); }
  .story__aside { position: sticky; top: calc(var(--header-h) + 2.5rem); }
}

.prose { max-width: 40rem; }
.prose p {
  font-size: clamp(1.03rem, 1.35vw, 1.14rem);
  line-height: 1.72;
  color: var(--on-light-mute);
  margin-bottom: 1.35em;
}
.prose p strong { color: var(--on-light); font-weight: 600; }
.prose > p:first-of-type {
  font-size: clamp(1.15rem, 1.9vw, 1.38rem);
  line-height: 1.55;
  color: var(--on-light);
  letter-spacing: -.012em;
}
.section--dark .prose p, .section--ink2 .prose p { color: var(--text-secondary); }
.section--dark .prose > p:first-of-type,
.section--ink2 .prose > p:first-of-type { color: var(--on-dark); }
.section--dark .prose p strong, .section--ink2 .prose p strong { color: var(--text-primary); }

.pullquote {
  margin: clamp(2rem, 4vw, 3rem) 0;
  padding-left: clamp(1.1rem, 2.4vw, 1.8rem);
  border-left: 3px solid var(--orange);
}
.pullquote p {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.6vw, 1.85rem) !important;
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: -.025em;
  color: var(--on-light) !important;
  margin: 0;
}
.section--dark .pullquote p, .section--ink2 .pullquote p { color: var(--text-primary) !important; }
.pullquote cite {
  display: block; margin-top: 1rem;
  font-family: var(--font-body); font-size: .85rem; font-style: normal; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent-text);
}
.section--dark .pullquote cite, .section--ink2 .pullquote cite { color: var(--amber); }

/* founder portrait card */
.portrait {
  margin: 0;
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}
.portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 12%; }
.portrait figcaption {
  padding: 1.1rem 1.3rem;
  font-size: .9rem;
  color: var(--on-light-mute);
  border-top: 1px solid var(--line-light);
}
.portrait figcaption strong {
  display: block;
  font-family: var(--font-display); font-weight: 600; font-size: 1.05rem;
  letter-spacing: -.015em; color: var(--on-light); margin-bottom: .1rem;
}
.section--dark .portrait, .section--ink2 .portrait {
  background: var(--surface-hover); border-color: var(--border);
}
.section--dark .portrait figcaption, .section--ink2 .portrait figcaption {
  color: var(--on-dark-mute); border-top-color: var(--line-dark);
}
.section--dark .portrait figcaption strong,
.section--ink2 .portrait figcaption strong { color: var(--on-dark); }

/* chapter markers down the side of the story */
.chapters { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.chapters li {
  position: relative;
  padding: .85rem 0 .85rem 1.6rem;
  font-size: .93rem; color: var(--on-light-mute);
  border-left: 1px solid var(--line-light);
}
.chapters li::before {
  content: ""; position: absolute; left: -4.5px; top: 1.35rem;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--line-light);
}
.chapters li strong {
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: .95rem; letter-spacing: -.01em; color: var(--on-light); margin-bottom: .15rem;
}
.chapters li.is-key::before { background: var(--orange); border-color: var(--amber); }
.section--dark .chapters li, .section--ink2 .chapters li {
  color: var(--on-dark-mute); border-left-color: var(--line-dark);
}
.section--dark .chapters li::before, .section--ink2 .chapters li::before {
  background: var(--ink); border-color: rgba(255, 255, 255, .22);
}
.section--dark .chapters li strong, .section--ink2 .chapters li strong { color: var(--on-dark); }

/* ---------- comparison table ---------- */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
}
.section:not(.section--dark):not(.section--ink2) .table-wrap { border-color: var(--line-light); }

.spec-table {
  width: 100%;
  min-width: 46rem;
  border-collapse: collapse;
  font-size: .92rem;
  text-align: left;
}
.spec-table th, .spec-table td {
  padding: .95rem 1.1rem;
  border-bottom: 1px solid var(--line-dark);
  vertical-align: middle;
}
.section:not(.section--dark):not(.section--ink2) .spec-table th,
.section:not(.section--dark):not(.section--ink2) .spec-table td { border-bottom-color: var(--line-light); }

.spec-table thead th {
  font-family: var(--font-display);
  font-size: .72rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--on-dark-mute);
  background: rgba(255, 255, 255, .035);
  white-space: nowrap;
}
.spec-table tbody th {
  font-family: var(--font-display); font-weight: 600; font-size: 1rem;
  letter-spacing: -.015em; white-space: nowrap;
}
.spec-table tbody th a { border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; }
.spec-table tbody th a:hover { color: var(--amber); border-bottom-color: currentColor; }
.spec-table tbody tr:last-child th, .spec-table tbody tr:last-child td { border-bottom: 0; }
.spec-table tbody tr { transition: background-color .2s; }
.spec-table tbody tr:hover { background: rgba(var(--accent-rgb), .05); }
.spec-table td { color: var(--text-secondary); }
.spec-table .tbc { font-style: italic; opacity: .7; }

.visually-hidden {
  position: absolute !important;
  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;
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .88em;
  padding: .12em .38em;
  border-radius: 5px;
  background: rgba(255, 255, 255, .07);
}

/* ==========================================================================
   PILLARS (vision / mission / commitment / approach)
   ========================================================================== */
.pillars { display: grid; gap: 1px; background: var(--line-dark); border-radius: var(--radius-lg); overflow: hidden; }
@media (min-width: 760px) { .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .pillars { grid-template-columns: repeat(4, 1fr); } }
.pillar { background: var(--surface-hover); padding: clamp(1.6rem, 3vw, 2.2rem); color: var(--on-dark); }
.pillar h3 {
  font-size: .82rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--amber); margin-bottom: 1rem;
}
.pillar p { font-size: .98rem; color: var(--on-dark-mute); }

/* ==========================================================================
   CTA BAND
   ========================================================================== */
.cta-band {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--ink-2); color: var(--on-dark);
  border-radius: var(--radius-lg);
  padding: clamp(2.5rem, 6vw, 4.5rem);
  text-align: center;
}
.cta-band::before {
  content: ""; position: absolute; inset: -60% -10% auto; height: 120%; z-index: -1;
  background: radial-gradient(ellipse at 50% 100%, rgba(var(--accent-rgb), .24), transparent 62%);
}
.cta-band h2 { margin-bottom: .5em; }
.cta-band p { margin-inline: auto; max-width: 52ch; }
.cta-band .hero__cta { justify-content: center; }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact-grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: .85fr 1.15fr; } }

.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.6rem; }
.contact-list li { display: flex; gap: 1rem; }
.contact-list .k {
  font-family: var(--font-display); font-size: .74rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-mute);
  display: block; margin-bottom: .3rem;
}
.contact-list .icon-badge { margin-bottom: 0; width: 42px; height: 42px; }
.contact-list a, .contact-list p { color: var(--on-dark); font-size: 1.02rem; }
.contact-list a { border-bottom: 1px solid rgba(var(--accent-rgb), .45); transition: border-color .2s; }
.contact-list a:hover { border-color: var(--amber); }

.form {
  background: var(--paper); color: var(--on-light);
  border: 1px solid var(--line-light); border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3.4vw, 2.5rem);
  box-shadow: var(--shadow-md);
}
.field { display: grid; gap: .45rem; margin-bottom: 1.1rem; }
.field label {
  font-size: .82rem; font-weight: 600; letter-spacing: .01em; color: var(--on-light);
}
.field input, .field select, .field textarea {
  font: inherit; font-size: .96rem; color: var(--on-light);
  padding: .8rem .95rem;
  background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  transition: border-color .2s, background-color .2s, box-shadow .2s;
  width: 100%;
}
.field textarea { resize: vertical; min-height: 130px; }
.field ::placeholder { color: var(--text-muted); opacity: 1; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 0; background: var(--surface);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .14);
}
.field--row { display: grid; gap: 1.1rem; }
@media (min-width: 560px) { .field--row { grid-template-columns: 1fr 1fr; margin-bottom: 0; } }
.form .btn { width: 100%; margin-top: .5rem; }
/* the form sits inside a dark section, so re-assert light-surface text colours */
.form p { color: var(--on-light-mute); }
.form__intro { font-size: .95rem; margin-bottom: 1.8rem; }
.form h2, .form label { color: var(--on-light); }
.form .form__fine { font-size: .82rem; color: var(--on-light-mute); margin: 1rem 0 0; text-align: center; }

.form .form__status {
  margin: 1rem 0 0; padding: .85rem 1rem; border-radius: var(--radius-sm);
  font-size: .9rem; background: rgba(var(--accent-rgb), .12);
  border: 1px solid rgba(var(--accent-rgb), .25); color: var(--on-light);
}
.form__status[hidden] { display: none; }

/* ==========================================================================
   CONTACT — customer routing, sales/support split, enquiry form states
   Everything below is additive to the shared card / button / field language.
   ========================================================================== */

/* ---------- hero positioning line ---------- */
.page-head--contact .lede { max-width: 60ch; }
.page-head--contact .hero__cta { margin-top: 1.9rem; }

.trust-line {
  list-style: none; margin: 2rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
  font-family: var(--font-display); font-size: .78rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-mute);
}
.trust-line li { display: inline-flex; align-items: center; gap: 1rem; }
.trust-line li + li::before {
  content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: var(--amber); flex: none;
}

/* ---------- sales vs support pathways ---------- */
.pathways { display: grid; gap: clamp(1rem, 2.2vw, 1.6rem); }
@media (min-width: 820px) { .pathways { grid-template-columns: repeat(2, 1fr); } }

.card--pathway { padding: clamp(1.6rem, 3vw, 2.1rem); }
.card--pathway:hover { transform: none; }
.card--pathway h2 { margin-bottom: .55rem; }
.card--pathway > p { margin-bottom: 1.5rem; }
.card--pathway .card__num { margin-bottom: 1rem; }
.card--pathway .btn { align-self: flex-start; }
.card--pathway::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--orange); border-radius: var(--radius) 0 0 var(--radius);
}
/* support is deliberately a different, quieter route — icon, label and rail all differ */
.card--support::before { background: var(--ink-4); }
.card--support .icon-badge {
  background: var(--border); border-color: var(--border-strong); color: var(--text-secondary);
}
.card--support .card__num { color: var(--on-light-mute); }

.card__fine { font-size: .85rem; color: var(--on-light-mute); margin: 1.1rem 0 0; }
.card__fine a { color: var(--accent-text); font-weight: 600; }
.card__fine a:hover { text-decoration: underline; }

/* ---------- intent routing cards ---------- */
.routes { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(.7rem, 1.4vw, 1rem); }
@media (min-width: 620px)  { .routes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .routes { grid-template-columns: repeat(3, 1fr); } }

.route {
  position: relative;
  display: grid; grid-template-columns: auto 1fr auto; gap: .95rem;
  align-items: start;
  height: 100%; min-height: 44px;
  padding: 1.15rem 1.25rem;
  background: var(--paper);
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.route:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.route strong {
  display: block; margin-bottom: .2rem;
  font-family: var(--font-display); font-weight: 600; font-size: 1.02rem;
  letter-spacing: -.018em; color: var(--on-light);
}
.route__body > span { display: block; font-size: .89rem; line-height: 1.45; color: var(--on-light-mute); }
.route .icon-badge { margin-bottom: 0; width: 40px; height: 40px; border-radius: 11px; }
.route .icon-badge svg { width: 19px; height: 19px; }

.route__check {
  width: 18px; height: 18px; flex: none; margin-top: .5rem;
  color: var(--orange-deep); opacity: 0;
  transition: opacity .2s var(--ease);
}
.route[aria-current="true"] {
  border-color: var(--orange);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .18);
}
.route[aria-current="true"] .route__check { opacity: 1; }

/* ---------- left-hand contact panel ---------- */
.contact-list__note {
  margin: .2rem 0 0; font-size: .88rem; line-height: 1.5;
  color: var(--on-dark-mute);
}

/* the email routes are primary actions on this page — give them a real tap target */
.contact-list a {
  display: inline-flex; align-items: center; min-height: 44px;
  border-bottom: 0;
  text-decoration: underline;
  text-decoration-color: rgba(var(--accent-rgb), .45);
  text-underline-offset: 4px;
  transition: text-decoration-color .2s;
}
.contact-list a:hover { text-decoration-color: var(--amber); }

/* ---------- founder trust card ---------- */
.founder-card { flex-direction: row; align-items: center; gap: 1.1rem; }
.founder-card:hover { transform: none; }
.founder-card picture { flex: none; }
.founder-card img {
  width: 72px; height: 72px; border-radius: 50%;
  object-fit: cover; object-position: 50% 10%;
  border: 1px solid var(--line-dark);
}
.founder-card__line {
  font-family: var(--font-display); font-weight: 500; font-size: 1rem;
  letter-spacing: -.015em; line-height: 1.3;
  color: var(--on-dark) !important; margin-bottom: .55rem;
}
.founder-card__name { font-size: .84rem; line-height: 1.4; margin: 0; }
.founder-card__name strong {
  display: block; font-family: var(--font-display); font-weight: 600; font-size: .95rem;
  letter-spacing: -.01em; color: var(--on-dark);
}

/* ---------- form: hints, optional markers, conditional groups ---------- */
.field__hint { font-size: .82rem; line-height: 1.45; color: var(--on-light-mute); margin: .1rem 0 0; }
.field__opt { font-weight: 500; color: var(--on-light-mute); }

.field-group {
  margin-bottom: 1.1rem;
  padding: 1.1rem 1.15rem .15rem;
  background: var(--paper-2);
  border: 1px solid var(--line-light);
  border-left: 3px solid var(--orange);
  border-radius: var(--radius-sm);
}
.field-group[hidden] { display: none; }
.field-group__title {
  font-family: var(--font-display); font-size: .72rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-text); margin: 0 0 .9rem;
}
.field-group .field--row { margin-bottom: 0; }
.field-group .field:last-child { margin-bottom: 1.1rem; }
@media (min-width: 560px) {
  .field-group .field--row .field { margin-bottom: 1.1rem; }
}

/* ---------- form: validation ---------- */
.field__error {
  display: flex; gap: .4rem; align-items: flex-start;
  margin: .35rem 0 0;
  font-size: .82rem; font-weight: 500; line-height: 1.45;
  color: var(--err);
}
.field__error[hidden] { display: none; }
.field__error::before {
  content: "!";
  display: grid; place-items: center; flex: none;
  width: 15px; height: 15px; margin-top: .12rem;
  font-family: var(--font-display); font-size: .68rem; font-weight: 700;
  color: var(--bg); background: var(--err); border-radius: 50%;
}
.field [aria-invalid="true"] {
  border-color: var(--err);
  background: rgba(var(--err-rgb), .07);
}
.field [aria-invalid="true"]:focus {
  border-color: var(--err);
  box-shadow: 0 0 0 3px rgba(var(--err-rgb), .16);
}

/* ---------- form: file upload ---------- */
.file-field input[type="file"] {
  padding: .5rem .55rem;
  font-size: .88rem; color: var(--on-light-mute);
  border-style: dashed;
  cursor: pointer;
}
.file-field input[type="file"]::file-selector-button {
  font: inherit; font-family: var(--font-display); font-weight: 600; font-size: .85rem;
  margin-right: .8rem; padding: .55rem 1rem; min-height: 40px;
  color: var(--text-primary); background: var(--border);
  border: 0; border-radius: var(--radius-sm); cursor: pointer;
  transition: background-color .2s var(--ease);
}
.file-field input[type="file"]::file-selector-button:hover { background: var(--border-strong); }

/* ---------- form: submit, status, privacy ---------- */
.form__promise {
  font-size: .88rem; font-weight: 500;
  color: var(--accent-text) !important;
  margin: -1.1rem 0 1.7rem;
}
.form__submit[aria-busy="true"] { opacity: .75; cursor: progress; }
.form .form__submit[disabled] { opacity: .6; cursor: not-allowed; }

.form .form__status { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; }
.form .form__status[hidden] { display: none; }
.form .form__status::before {
  content: "i";
  display: grid; place-items: center; flex: none;
  width: 18px; height: 18px; margin-top: .1rem;
  font-family: var(--font-display); font-size: .72rem; font-weight: 700;
  color: var(--text-primary); background: var(--border-strong); border-radius: 50%;
}
.form .form__status strong { display: block; margin-bottom: .2rem; font-weight: 600; }

.form .form__status--ok  { background: rgba(var(--ok-rgb), .09); border-color: rgba(var(--ok-rgb), .32); }
.form .form__status--ok::before { content: "✓"; background: var(--ok); color: var(--bg); }
.form .form__status--err { background: rgba(var(--err-rgb), .07); border-color: rgba(var(--err-rgb), .32); }
.form .form__status--err::before { content: "!"; background: var(--err); color: var(--bg); }
.form .form__status--busy::before { content: "…"; background: var(--ink-3); line-height: 0; }

.form__privacy { font-size: .82rem; line-height: 1.5; margin: 1rem 0 0; }
.form .form__fine { margin-top: .8rem; }

/* ---------- mobile refinements ---------- */
@media (max-width: 559px) {
  .form .btn, .card--pathway .btn { width: 100%; }
  .page-head--contact .hero__cta .btn { width: 100%; }
  .route { padding: 1.05rem 1.1rem; }
  .field textarea { min-height: 110px; }
}

/* ==========================================================================
   PAGE HEADER (interior pages)
   ========================================================================== */
.page-head {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--ink); color: var(--on-dark);
  padding-block: clamp(3.5rem, 7vw, 5.5rem) clamp(3rem, 6vw, 4.5rem);
}
.page-head::before {
  content: ""; position: absolute; z-index: -1; inset: -60% -20% auto;
  height: 150%;
  background: radial-gradient(ellipse at 22% 100%, rgba(var(--accent-rgb), .20), transparent 58%);
}
.page-head h1 { font-size: clamp(2.3rem, 5vw, 3.4rem); font-weight: 300; letter-spacing: -.03em; }
.page-head h1 em, .page-head h1 strong { font-style: normal; font-weight: 700; }
.page-head .lede { max-width: 56ch; }

.crumbs {
  display: flex; align-items: center; gap: .5rem; margin-bottom: 1.5rem;
  font-size: .84rem; color: var(--on-dark-mute);
}
.crumbs a:hover { color: var(--amber); }
.crumbs span { opacity: .5; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer {
  background: var(--ink); color: var(--on-dark);
  border-top: 1px solid var(--line-dark);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
}
.footer__grid { display: grid; gap: 2.5rem; }
@media (min-width: 760px) { .footer__grid { grid-template-columns: 1.4fr repeat(3, 1fr); } }
.footer__brand img { height: 44px; width: auto; margin-bottom: 1.2rem; }
.footer__brand p { font-size: .93rem; color: var(--on-dark-mute); max-width: 34ch; }
.footer h4 {
  font-size: .74rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--on-dark-mute); margin-bottom: 1.1rem;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.footer li a, .footer li { font-size: .93rem; color: var(--text-secondary); }
.footer li a:hover { color: var(--amber); }
.footer__base {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center;
  margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: 1.75rem;
  border-top: 1px solid var(--line-dark);
  font-size: .84rem; color: var(--on-dark-mute);
}
.footer__base .tagline {
  font-family: var(--font-display); font-weight: 500; letter-spacing: .01em;
  color: var(--on-dark-mute);
}

/* ==========================================================================
   UTILITIES
   ========================================================================== */
/* spacing */
.mt-xs { margin-top: .5rem; }
.mt-sm { margin-top: 1.1rem; }
.mt-md { margin-top: 1.7rem; }
.mt-lg { margin-top: clamp(2.2rem, 4vw, 3rem); }
.mt-xl { margin-top: clamp(3rem, 6vw, 4.5rem); }
.mt-flush { margin-top: 0; }

/* text */
.text-muted { color: var(--on-light-mute); }
.section--dark .text-muted, .section--ink2 .text-muted { color: var(--on-dark-mute); }
.text-accent { color: var(--accent-text); font-weight: 600; }
.text-sm { font-size: .93rem; }
.h2--sm { font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
.h2--xs { font-size: clamp(1.5rem, 2.6vw, 1.9rem); }
.h3--sm { font-size: 1.1rem; margin-bottom: .4rem; }
.eyebrow--center { justify-content: center; }

/* a two-column "heading beside intro" split */
.split {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2rem);
  align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}
.split__delay { --delay: 120ms; }

/* media tiles that hold a cut-out product shot rather than a full-bleed photo */
.media-tile { display: grid; place-items: center; padding: clamp(1rem, 2.5vw, 2rem); }
.media-tile--light { background: #fff; border: 1px solid var(--line-light); }
.media-tile--dark { background: linear-gradient(150deg, var(--ink-3), var(--ink)); }
.media-tile--bottom { place-items: end center; padding-bottom: 0; }
.media-tile--tall { aspect-ratio: 4 / 3.4; }

.tile-img { width: auto; max-height: 100%; object-fit: contain; }
.tile-img--multiply { mix-blend-mode: multiply; }
.tile-img--round { border-radius: 10px; }
.tile-img--capped { max-height: 92%; }

/* card with an edge-to-edge media area */
.card--flush { padding: 0; overflow: hidden; }
.card__media {
  background: linear-gradient(160deg, var(--ink-3), var(--ink));
  display: grid; place-items: end center;
  min-height: 16rem; overflow: hidden;
}
.card__media img { width: auto; max-height: 15rem; object-fit: contain; }
.card__pad { padding: 1.5rem; }

.aside-title {
  margin: 2.2rem 0 1rem;
  font-size: .74rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--on-light-mute);
}
.section--dark .aside-title, .section--ink2 .aside-title { color: var(--on-dark-mute); }

/* ==========================================================================
   REVEAL ANIMATION
   ========================================================================== */
[data-reveal] {
  opacity: 0; transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: var(--delay, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ---------- print ----------
   Paper is the one light surface left, so the accent swaps to the shade that
   clears contrast on white and every dark fill drops out. */
@media print {
  :root {
    --accent: var(--accent-ink);
    --accent-hover: var(--accent-ink);
    --text-primary: #000;
    --text-secondary: #333;
    --text-muted: #555;
  }
  .header, .drawer, .burger, .hero__art, .cta-band { display: none !important; }
  body { color: #000; background: #fff; }
  .section, .page-head { padding-block: 1.5rem; background: #fff !important; color: #000 !important; }
  .card, .card--dark, .form, .product, .stat, .pillar, .cap-list li, .route, .field-group {
    background: #fff !important; border-color: #bbb !important; color: #000 !important;
  }
}