/* ==========================================================================
   ASANKARE ENTERPRISE LTD.
   Design system. Palette drawn from the company printed identity
   (espresso / clay-orange / steel-blue / pale mist)
   ========================================================================== */

/* ---- Reset ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }

/* ---- Tokens ------------------------------------------------------------ */
:root {
  /* Core palette */
  --ink:        #141011;
  --ink-900:    #1C1517;
  --ink-800:    #2A2023;
  --ink-700:    #3D2F31;
  --ink-500:    #6B5750;
  --ink-400:    #8B7870;
  --ink-300:    #B4A59E;

  --clay:       #D9451F;   /* orange-red facet from the business card */
  --clay-600:   #B23518;
  --clay-300:   #F2854A;

  --steel:      #3F6285;   /* blue facet from the business card */
  --steel-400:  #7093B4;
  --steel-100:  #D5E1EC;

  --mist:       #E9EFF4;
  --paper:      #FBF8F6;
  --paper-2:    #F3EDE9;
  --white:      #FFFFFF;

  /* Derived */
  --line:        rgba(20, 16, 17, .12);
  --line-strong: rgba(20, 16, 17, .22);
  --line-dark:   rgba(255, 255, 255, .14);
  --line-dark-2: rgba(255, 255, 255, .28);

  /* Type */
  --sans: "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;
  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;

  /* Scale */
  --shell: 1220px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  /* Applied to both top and bottom, so adjacent sections sit twice this
     apart. 8.5rem was opening ~270px voids between blocks on desktop. */
  --sec-y: clamp(3.5rem, 6.5vw, 6.25rem);

  --r-sm: 3px;
  --r-md: 6px;
  --r-lg: 14px;

  --shadow-sm: 0 1px 2px rgba(20,16,17,.06), 0 4px 14px rgba(20,16,17,.06);
  --shadow-md: 0 2px 6px rgba(20,16,17,.07), 0 18px 46px -12px rgba(20,16,17,.20);
  --shadow-lg: 0 30px 80px -24px rgba(20,16,17,.42);

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

/* ---- Base -------------------------------------------------------------- */
body {
  font-family: var(--sans);
  font-size: clamp(1rem, .96rem + .18vw, 1.0625rem);
  line-height: 1.68;
  color: var(--ink-700);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection { background: var(--clay); color: #fff; }

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

.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 999;
  background: var(--ink); color: #fff; padding: .75rem 1.25rem;
  border-radius: var(--r-md); font-weight: 600; font-size: .9rem;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 1rem; }

/* ---- Layout primitives ------------------------------------------------- */
.shell {
  width: 100%; max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell--narrow { max-width: 880px; }

.section { padding-block: var(--sec-y); position: relative; }
.section--tight { padding-block: clamp(3rem, 6vw, 5.5rem); }
.section--ink  { background: var(--ink); color: var(--mist); }
.section--mist { background: var(--mist); }
.section--paper2 { background: var(--paper-2); }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* Blueprint / drafting grid: the visual spine of the identity */
.blueprint { position: relative; isolation: isolate; }
.blueprint::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 68px 68px;
  -webkit-mask-image: radial-gradient(120% 90% at 20% 0%, #000 35%, transparent 80%);
  mask-image: radial-gradient(120% 90% at 20% 0%, #000 35%, transparent 80%);
}
.blueprint--light::before {
  background-image:
    linear-gradient(rgba(20,16,17,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,16,17,.05) 1px, transparent 1px);
}

/* ---- Typography -------------------------------------------------------- */
.display {
  font-family: var(--serif);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.012em;
  color: var(--ink);
  font-size: clamp(2.6rem, 1.4rem + 5.2vw, 5.1rem);
}
.display--sm { font-size: clamp(2.2rem, 1.4rem + 3.4vw, 3.6rem); }
.section--ink .display { color: var(--white); }

.h2 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(1.6rem, 1.15rem + 1.9vw, 2.55rem);
  line-height: 1.14;
  letter-spacing: -.022em;
  color: var(--ink);
}
.section--ink .h2 { color: var(--white); }

.h3 {
  font-weight: 700;
  font-size: clamp(1.1rem, 1rem + .55vw, 1.35rem);
  line-height: 1.26;
  letter-spacing: -.012em;
  color: var(--ink);
}
.section--ink .h3 { color: var(--white); }

.lede {
  font-size: clamp(1.06rem, 1rem + .42vw, 1.28rem);
  line-height: 1.6;
  color: var(--ink-500);
}
.section--ink .lede { color: var(--steel-100); }

.prose p + p { margin-top: 1.1em; }
.prose strong { color: var(--ink); font-weight: 600; }
.section--ink .prose strong { color: #fff; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  font-size: .715rem; font-weight: 700;
  letter-spacing: .19em; text-transform: uppercase;
  color: var(--clay);
  margin-bottom: 1.15rem;
}
.eyebrow::before {
  content: ""; width: 2rem; height: 2px; background: var(--clay); flex: none;
}
.eyebrow--steel { color: var(--steel-400); }
.eyebrow--steel::before { background: var(--steel-400); }

.index-num {
  font-family: var(--serif);
  font-size: 1.05rem; font-weight: 700;
  color: var(--clay);
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}

/* ---- Dark surfaces -----------------------------------------------------
   Every container that paints a dark background must also flip the text
   tokens. Without this, .display / .h2 / .lede keep their light-surface
   colours and render near-black on near-black. Add any new dark container
   to this list. */
:is(.hero, .page-head, .cta, .section--ink) :is(.display, .h2, .h3) { color: var(--white); }
:is(.hero, .page-head, .cta, .section--ink) .lede { color: var(--steel-100); }
:is(.hero, .page-head, .cta, .section--ink) .prose { color: var(--ink-300); }
:is(.hero, .page-head, .cta, .section--ink) .prose strong { color: #fff; }
:is(.hero, .page-head, .cta, .section--ink) .caps { border-top-color: var(--line-dark); }
:is(.hero, .page-head, .cta, .section--ink) .cap { border-bottom-color: var(--line-dark); }
:is(.hero, .page-head, .cta, .section--ink) .cap__body { color: var(--ink-300); }
:is(.hero, .page-head, .cta, .section--ink) .scope li { color: var(--ink-300); }

/* ---- Buttons ----------------------------------------------------------- */
.btn {
  --btn-bg: var(--clay); --btn-fg: #fff; --btn-bd: var(--clay);
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .92rem 1.6rem;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--btn-bd); border-radius: var(--r-md);
  font-size: .875rem; font-weight: 600; letter-spacing: .035em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .25s var(--ease),
              background-color .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease);
  white-space: nowrap;
  max-width: 100%;
}
/* On a 320px screen the longest labels ("Request an electrical quotation")
   are wider than the content column, so nowrap pushed them past the edge.
   Below 480px they may wrap; a label that still fits stays on one line. */
@media (max-width: 480px) {
  .btn { white-space: normal; text-align: center; }
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 26px -8px rgba(217,69,31,.55); }
.btn:active { transform: translateY(0); }
.btn svg { width: 1em; height: 1em; flex: none; }

.btn--ghost-dark { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: var(--line-dark-2); }
.btn--ghost-dark:hover { --btn-bg: rgba(255,255,255,.08); --btn-bd: rgba(255,255,255,.5); box-shadow: none; }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--line-strong); }
.btn--ghost:hover { --btn-bg: var(--ink); --btn-fg: #fff; --btn-bd: var(--ink); box-shadow: none; }

.btn--sm { padding: .68rem 1.1rem; font-size: .78rem; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 600; font-size: .85rem; letter-spacing: .05em;
  text-transform: uppercase; color: var(--clay);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease), gap .2s var(--ease);
}
.link-arrow:hover { border-color: currentColor; gap: .8rem; }
.link-arrow svg { width: .85em; height: .85em; }

/* ---- Header ------------------------------------------------------------ */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .32s var(--ease), border-color .32s var(--ease),
              box-shadow .32s var(--ease);
}
.site-header.is-solid,
.site-header.is-navopen {
  background: rgba(20,16,17,.94);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom-color: var(--line-dark);
  box-shadow: 0 10px 40px -22px rgba(0,0,0,.9);
}
.site-header.is-navopen { background: var(--ink); }

.header-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 86px;
}

/* Wordmark */
.wordmark { display: inline-flex; align-items: center; gap: .85rem; }
.wordmark__mark { width: 40px; height: 40px; flex: none; }
.wordmark__text { display: flex; flex-direction: column; line-height: 1; }
.wordmark__name {
  font-family: var(--serif); font-weight: 700;
  font-size: 1.32rem; letter-spacing: .13em; text-transform: uppercase;
  color: #fff;
}
.wordmark__sub {
  font-size: .555rem; font-weight: 600; letter-spacing: .3em;
  text-transform: uppercase; color: var(--clay-300); margin-top: .34rem;
}

/* Nav */
.nav { display: flex; align-items: center; gap: clamp(1.1rem, 2.2vw, 2.1rem); }
.nav__link {
  position: relative;
  font-size: .8rem; font-weight: 600; letter-spacing: .085em;
  text-transform: uppercase; color: rgba(255,255,255,.76);
  padding-block: .4rem;
  transition: color .2s var(--ease);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: var(--clay); transition: width .25s var(--ease);
}
.nav__link:hover, .nav__link[aria-current="page"] { color: #fff; }
.nav__link:hover::after, .nav__link[aria-current="page"]::after { width: 100%; }

/* The nav carries its own CTA for the mobile panel only. On desktop the
   button in .header-cta is the visible one, so this copy stays hidden. */
.nav > .btn { display: none; }

.header-cta { display: flex; align-items: center; gap: .9rem; }

/* Mobile toggle */
.nav-toggle {
  display: none; width: 44px; height: 44px; flex: none;
  background: transparent; border: 1px solid var(--line-dark-2);
  border-radius: var(--r-md); cursor: pointer;
  align-items: center; justify-content: center;
}
.nav-toggle__bars { position: relative; width: 18px; height: 12px; }
.nav-toggle__bars span {
  position: absolute; left: 0; width: 100%; height: 2px;
  background: #fff; border-radius: 2px;
  transition: transform .28s var(--ease), opacity .2s var(--ease);
}
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 5px; }
.nav-toggle__bars span:nth-child(3) { top: 10px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 980px) {
  .nav-toggle { display: inline-flex; }
  .header-cta > .btn { display: none; }
  /* Anchored to the header itself, so it lines up whether the header is
     sitting below the ribbon or stuck to the top of the viewport. */
  /* Vertical padding, border and shadow belong to the open state only.
     max-height cannot shrink a box below its own padding and border, so a
     padded closed menu stayed 41px tall and leaked its first link out under
     the header. Closed must therefore have nothing to floor against. */
  .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--ink);
    border-top: 0 solid var(--line-dark);
    padding: 0 var(--gutter);
    max-height: 0; overflow: hidden;
    transition: max-height .4s var(--ease), padding .4s var(--ease),
                border-width .4s var(--ease);
  }
  .nav.is-open {
    max-height: min(78vh, 560px); overflow-y: auto;
    border-top-width: 1px;
    padding-block: .5rem 2rem;
    box-shadow: 0 24px 40px -20px rgba(0,0,0,.8);
  }
  .nav__link {
    color: rgba(255,255,255,.82);
    font-size: 1rem; letter-spacing: .06em;
    padding-block: 1.05rem;
    border-bottom: 1px solid var(--line-dark);
  }
  .nav__link::after { display: none; }
  .nav__link[aria-current="page"] { color: var(--clay-300); }
  .nav > .btn { display: inline-flex; margin-top: 1.4rem; justify-content: center; }
}

/* ---- Announcement ribbon ---------------------------------------------- */
.ribbon {
  background: var(--ink-900); color: var(--ink-300);
  border-bottom: 1px solid var(--line-dark);
  font-size: .705rem; letter-spacing: .17em; text-transform: uppercase;
  font-weight: 600;
}
.ribbon__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; min-height: 40px; padding-block: .55rem;
}
.ribbon__list { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.ribbon__list li { display: flex; align-items: center; gap: 1.4rem; }
.ribbon__list li::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--clay); }
.ribbon__list li:last-child::after { display: none; }
.ribbon__contact { display: flex; align-items: center; gap: 1.25rem; white-space: nowrap; }
.ribbon__contact a { transition: color .2s var(--ease); }
.ribbon__contact a:hover { color: var(--clay-300); }
@media (max-width: 900px) { .ribbon__list { display: none; } .ribbon__inner { justify-content: center; } }
@media (max-width: 520px) { .ribbon__contact { gap: .85rem; font-size: .66rem; } }

/* ---- Hero -------------------------------------------------------------- */
.hero {
  position: relative; isolation: isolate;
  background: var(--ink);
  color: var(--mist);
  margin-top: -86px; padding-top: 86px;
  overflow: hidden;
}

/* Slideshow layer ------------------------------------------------------- */
.hero__media { position: absolute; inset: 0; z-index: 0; }

.hero-slide {
  position: absolute; inset: 0;
  opacity: 0;
  background-color: var(--ink);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1);
  /* Driven by transition, not @keyframes: a keyframe animation would drop
     its transform the instant .is-active is removed, snapping the outgoing
     slide mid-crossfade. */
  transition: opacity 1.15s var(--ease), transform 1.6s var(--ease);
  will-change: opacity, transform;
}
/* Slow drift on the visible slide so the hero never looks like a still. */
.hero-slide.is-active {
  opacity: 1;
  transform: scale(1.07);
  transition: opacity 1.15s var(--ease), transform 7.5s linear;
}

/* ---- Sector compositions ------------------------------------------------
   One definition, used by both the hero slides and the .plate panels, so a
   card with no photograph still reads as its own sector rather than as a
   missing image. A --photo always sits on top and wins when supplied.       */
.hero-slide--civil, .plate.plate--civil {
  background-image:
    var(--photo, linear-gradient(transparent, transparent)),
    linear-gradient(105deg, rgba(217,69,31,.40) 0%, rgba(217,69,31,0) 50%),
    repeating-linear-gradient(72deg, rgba(255,255,255,.055) 0 3px, transparent 3px 27px),
    radial-gradient(85% 72% at 70% 26%, #4A3128 0%, rgba(28,21,23,0) 64%),
    linear-gradient(158deg, #2A2023 0%, #141011 100%);
}
.hero-slide--electrical, .plate.plate--electrical {
  background-image:
    var(--photo, linear-gradient(transparent, transparent)),
    radial-gradient(58% 52% at 66% 30%, rgba(112,147,180,.58) 0%, rgba(112,147,180,0) 62%),
    repeating-linear-gradient(0deg, rgba(213,225,236,.07) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(90deg, rgba(213,225,236,.07) 0 1px, transparent 1px 32px),
    linear-gradient(150deg, #1E2A35 0%, #141011 100%);
}
.hero-slide--trade, .plate.plate--trade {
  background-image:
    var(--photo, linear-gradient(transparent, transparent)),
    linear-gradient(255deg, rgba(217,69,31,.34) 0%, rgba(217,69,31,0) 46%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 2px, transparent 2px 66px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 2px, transparent 2px 48px),
    radial-gradient(82% 68% at 28% 68%, #23404F 0%, #141011 66%);
}
.hero-slide--supplies, .plate.plate--supplies {
  background-image:
    var(--photo, linear-gradient(transparent, transparent)),
    radial-gradient(72% 62% at 24% 28%, rgba(242,133,74,.32) 0%, rgba(242,133,74,0) 64%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.055) 0 2px, transparent 2px 19px),
    repeating-linear-gradient(45deg, rgba(0,0,0,.20) 0 2px, transparent 2px 19px),
    linear-gradient(140deg, #3A2A20 0%, #141011 100%);
}

/* Scrim: keeps the headline legible over any photograph, and carries the
   drafting grid across the whole hero. */
.hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(100deg,
      rgba(20,16,17,.93) 0%,
      rgba(20,16,17,.86) 26%,
      rgba(20,16,17,.62) 48%,
      rgba(20,16,17,.40) 72%,
      rgba(20,16,17,.32) 100%),
    linear-gradient(to top, rgba(20,16,17,.90) 0%, rgba(20,16,17,0) 44%);
  background-size: 68px 68px, 68px 68px, cover, cover;
}
@media (max-width: 1020px) {
  /* Stacked layout puts copy, panel and figures all over the photograph,
     so the scrim has to stay even rather than fading to one side. */
  .hero__scrim {
    background-image:
      linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px),
      linear-gradient(180deg, rgba(20,16,17,.58) 0%, rgba(20,16,17,.88) 100%);
    background-size: 68px 68px, 68px 68px, cover;
  }
}

.hero__body { position: relative; z-index: 2; }

.hero__inner {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
  min-height: min(70vh, 600px);
  padding-block: clamp(2.75rem, 5.5vw, 4.5rem) clamp(1.75rem, 3.5vw, 2.5rem);
}
@media (max-width: 1020px) {
  .hero__inner { grid-template-columns: 1fr; gap: 2.75rem; min-height: 0; }
}

.hero__copy { max-width: 40rem; }
/* Sized to hold its intended two-line break inside the left grid column.
   The shared .display scale is tuned for full-width headings and overflows
   here, wrapping the line four ways. */
.hero__title { font-size: clamp(2.3rem, 1.15rem + 3.3vw, 4rem); }
.hero__title .accent { color: var(--clay-300); font-style: italic; }
.hero__lede { margin-top: 1.8rem; max-width: 33rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.5rem; }

/* Full width across the foot of the hero, not stacked in the left column,
   so three figures sit on one row instead of wrapping to two. */
.hero__stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
  padding-block: clamp(1.5rem, 2.8vw, 2rem) clamp(2.25rem, 4.5vw, 3rem);
  border-top: 1px solid var(--line-dark);
}
/* Hairline rules between the figures give the band structure over a busy
   photograph, where the gap alone reads as accidental space. */
.hero__stats > * + * {
  border-left: 1px solid var(--line-dark);
  padding-left: clamp(1.25rem, 3vw, 2.5rem);
}
@media (max-width: 700px) {
  .hero__stats { grid-template-columns: 1fr 1fr; gap: 1.4rem 1rem; }
  .hero__stats > * + * { border-left: 0; padding-left: 0; }
}
.stat__value {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(2rem, 1.4rem + 1.8vw, 2.9rem);
  line-height: 1; color: #fff; font-variant-numeric: tabular-nums;
}
.stat__label {
  display: block; margin-top: .55rem;
  font-size: .715rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-300);
}

/* Sector navigator (hero right), also drives the slideshow --------------- */
.hero-nav {
  --slide-ms: 6000ms;
  /* Opaque enough to hold small text over the brightest part of a photograph,
     which is exactly where this panel sits. No saturate() in the backdrop
     filter: over a warm photo it tinted the panel area and drew a visible
     colour seam down its left edge. */
  background: rgba(20,16,17,.78);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-lg);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.hero-nav__head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.05rem 1.35rem;
  border-bottom: 1px solid var(--line-dark);
  background: rgba(255,255,255,.045);
}
.hero-nav__title {
  font-size: .705rem; font-weight: 700; letter-spacing: .19em;
  text-transform: uppercase; color: #fff;
}

/* Pause / play */
.hero-nav__toggle {
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center;
  background: transparent; color: var(--clay-300);
  border: 1px solid rgba(242,133,74,.42); border-radius: 50%;
  cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.hero-nav__toggle:hover { background: var(--clay); color: #fff; border-color: var(--clay); }
.hero-nav__toggle svg { width: 11px; height: 11px; }
.hero-nav__toggle .icon-play { display: none; }
.hero-nav.is-paused .hero-nav__toggle .icon-play { display: block; }
.hero-nav.is-paused .hero-nav__toggle .icon-pause { display: none; }

/* Sector rows */
.hero-nav__item {
  position: relative; width: 100%;
  display: grid; grid-template-columns: 1.9rem minmax(0, 1fr) 1.1rem;
  align-items: start; gap: .95rem;
  padding: .95rem 1.35rem;
  background: transparent; border: 0;
  border-top: 1px solid rgba(255,255,255,.075);
  text-align: left; cursor: pointer;
  transition: background-color .25s var(--ease);
}
.hero-nav__item:first-of-type { border-top: 0; }
.hero-nav__item:hover { background: rgba(255,255,255,.06); }
/* Lighter than --steel-400: this sits over photography, not flat ink. */
.hero-nav__item .index-num { color: #9DB8D0; transition: color .25s var(--ease); }
.hero-nav__item[aria-current="true"] { background: rgba(255,255,255,.075); }
.hero-nav__item[aria-current="true"] .index-num { color: var(--clay-300); }

.hero-nav__name {
  display: block;
  font-size: .92rem; font-weight: 600; line-height: 1.35;
  color: rgba(255,255,255,.82);
  transition: color .25s var(--ease);
}
.hero-nav__item[aria-current="true"] .hero-nav__name { color: #fff; }

/* Description reveals only on the active row */
.hero-nav__desc {
  display: block; overflow: hidden;
  max-height: 0; opacity: 0;
  font-size: .82rem; line-height: 1.55; color: var(--steel-100);
  transition: max-height .45s var(--ease), opacity .3s var(--ease), margin-top .45s var(--ease);
}
.hero-nav__item[aria-current="true"] .hero-nav__desc {
  max-height: 6rem; opacity: 1; margin-top: .4rem;
}

.hero-nav__chev {
  width: 1.1rem; height: 1.1rem; margin-top: .18rem;
  color: var(--clay-300); opacity: 0;
  transform: translateX(-4px);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.hero-nav__item[aria-current="true"] .hero-nav__chev,
.hero-nav__item:hover .hero-nav__chev { opacity: .9; transform: none; }

/* Timing bar on the active row */
.hero-nav__bar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: rgba(255,255,255,.1); overflow: hidden;
  opacity: 0; transition: opacity .25s var(--ease);
}
.hero-nav__item[aria-current="true"] .hero-nav__bar { opacity: 1; }
.hero-nav__bar i {
  display: block; height: 100%; width: 100%;
  background: var(--clay);
  transform: scaleX(0); transform-origin: left;
}
.hero-nav__item[aria-current="true"] .hero-nav__bar i {
  animation: heroProgress var(--slide-ms) linear forwards;
}
/* is-paused = the visitor pressed pause (icon swaps too).
   is-hold   = temporarily held while hovered/focused or the tab is hidden. */
.hero-nav.is-paused .hero-nav__bar i,
.hero-nav.is-hold .hero-nav__bar i { animation-play-state: paused; }
@keyframes heroProgress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.hero-nav__all {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .95rem 1.35rem;
  border-top: 1px solid var(--line-dark);
  background: rgba(255,255,255,.03);
  font-size: .715rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  color: var(--clay-300);
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.hero-nav__all:hover { background: var(--clay); color: #fff; }
.hero-nav__all svg { width: .9rem; height: .9rem; flex: none; }

/* No autoplay, no drift, no timing bars when motion is reduced. */
@media (prefers-reduced-motion: reduce) {
  .hero-slide, .hero-slide.is-active { transform: none; }
  .hero-nav__bar { display: none; }
  .hero-nav__toggle { display: none; }
}

/* ---- Section heading block -------------------------------------------- */
.sec-head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  gap: clamp(1.5rem, 4vw, 4rem); align-items: end;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}
.sec-head--center { grid-template-columns: 1fr; text-align: center; justify-items: center; max-width: 740px; margin-inline: auto; }
.sec-head--center .eyebrow::before { display: none; }
@media (max-width: 880px) { .sec-head { grid-template-columns: 1fr; align-items: start; } }

/* ---- Division cards ---------------------------------------------------- */
.divisions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.division {
  position: relative;
  background: var(--paper);
  padding: clamp(1.8rem, 3vw, 2.6rem);
  display: flex; flex-direction: column; gap: 1rem;
  transition: background-color .3s var(--ease);
}
.division::before {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px;
  background: var(--clay); transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease);
}
.division:hover { background: var(--white); }
.division:hover::before { transform: scaleX(1); }
.division__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.division__icon {
  width: 46px; height: 46px; flex: none;
  display: grid; place-items: center;
  color: var(--clay);
  background: rgba(217,69,31,.08);
  border: 1px solid rgba(217,69,31,.18);
  border-radius: var(--r-md);
}
.division__icon svg { width: 24px; height: 24px; }
/* A stretched pseudo-element makes the whole card clickable while keeping a
   real, focusable link in the heading for keyboard and screen-reader users. */
.division__link { color: inherit; }
.division__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.division:hover .division__link { color: var(--clay); }
.division__link:focus-visible { outline-offset: 4px; }

.division__body { color: var(--ink-500); font-size: .955rem; flex: 1; }
.division__tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .3rem; }
.tag {
  font-size: .68rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--steel); background: var(--steel-100);
  padding: .3rem .58rem; border-radius: 999px;
}

/* ---- Feature split ----------------------------------------------------- */
.split {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 370px), 1fr));
  gap: clamp(2.2rem, 5vw, 4.5rem);
  align-items: center;
}

/* Contact is two columns of content, not text beside a picture. Centring
   them against each other pushed whichever column was shorter down the
   page and opened a gap above it. Both start at the top, and the form
   takes the extra width because it is the thing people came to use. */
.split--contact {
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  align-items: start;
  gap: clamp(2rem, 4vw, 3.5rem);
}
@media (max-width: 940px) {
  .split--contact { grid-template-columns: 1fr; }
}

/* Gives the form the same panel treatment as the office cards it sits
   beside, so the two columns read as a pair. */
.form-panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  box-shadow: var(--shadow-sm);
  margin-top: 1.9rem;
}

/* Photo plate: shows a real photo when supplied via --photo,
   otherwise renders an intentional geometric composition. */
.plate {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
  overflow: hidden;
  background-color: var(--ink-800);
  background-image:
    var(--photo, linear-gradient(transparent, transparent)),
    radial-gradient(120% 120% at 78% 10%, rgba(217,69,31,.55) 0%, rgba(217,69,31,0) 52%),
    radial-gradient(110% 110% at 12% 92%, rgba(63,98,133,.62) 0%, rgba(63,98,133,0) 58%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.045) 0 2px, transparent 2px 13px),
    linear-gradient(150deg, #2A2023 0%, #141011 100%);
  background-size: cover, cover, cover, auto, cover;
  background-position: center;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat, no-repeat;
  box-shadow: var(--shadow-md);
}
.plate--tall { aspect-ratio: 3 / 4; }
.plate--wide { aspect-ratio: 16 / 9; }

/* Photographs are real <img> elements rather than CSS backgrounds.
   A relative url() inside a custom property resolves against the stylesheet
   that uses it (assets/css/), not against the page, so every photo was being
   requested from assets/css/assets/img/ and silently failing. An <img> src
   resolves against the document, and gets native lazy loading for free.
   The sector composition stays on the parent as the fallback underneath. */
.plate__img, .hero-slide__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border: 0;
}

/* Two sectors have no photograph yet. Rather than repeat the generic panel,
   each gets a motif of its own: raking crop rows for agriculture, concentric
   tread rings for tyres. Both accept a --photo later without further change. */
.plate.plate--agro {
  background-image:
    var(--photo, linear-gradient(transparent, transparent)),
    repeating-linear-gradient(172deg, rgba(255,255,255,.055) 0 2px, transparent 2px 23px),
    radial-gradient(120% 85% at 28% 108%, rgba(163,150,68,.40) 0%, rgba(163,150,68,0) 62%),
    radial-gradient(85% 70% at 78% 12%, rgba(242,133,74,.26) 0%, rgba(242,133,74,0) 64%),
    linear-gradient(152deg, #34301E 0%, #141011 100%);
}
.plate.plate--tyres {
  background-image:
    var(--photo, linear-gradient(transparent, transparent)),
    repeating-radial-gradient(circle at 70% 54%, rgba(255,255,255,.06) 0 2px, transparent 2px 15px),
    radial-gradient(48% 48% at 70% 54%, rgba(217,69,31,.34) 0%, rgba(217,69,31,0) 72%),
    radial-gradient(70% 60% at 18% 20%, rgba(63,98,133,.30) 0%, rgba(63,98,133,0) 60%),
    linear-gradient(145deg, #2A2023 0%, #141011 100%);
}
.plate__caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.8rem 1.5rem 1.2rem;
  background: linear-gradient(to top, rgba(10,8,9,.9), rgba(10,8,9,0));
  color: #fff;
  font-size: .73rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase;
}
.plate__badge {
  position: absolute; top: 1rem; left: 1rem;
  background: var(--clay); color: #fff;
  font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  padding: .38rem .7rem; border-radius: var(--r-sm);
}

/* Framed plate with offset rule: drafting motif */
.plate-frame { position: relative; }
.plate-frame::before {
  content: ""; position: absolute; inset: -18px -18px 28px 28px;
  border: 1px solid var(--line-strong); border-radius: var(--r-lg);
  z-index: -1;
}
@media (max-width: 680px) { .plate-frame::before { display: none; } }

/* ---- Scope list (division detail) -------------------------------------- */
.scope { display: grid; gap: .75rem; margin-top: 1.7rem; }
.scope li {
  display: grid; grid-template-columns: 1.1rem 1fr; gap: .85rem;
  align-items: start; font-size: .94rem; color: var(--ink-500);
}
.scope li::before {
  content: ""; width: 9px; height: 9px; margin-top: .52rem;
  border: 2px solid var(--clay); border-radius: 2px;
  transform: rotate(45deg); flex: none;
}
.section--ink .scope li { color: var(--ink-300); }

/* Division detail block */
.division-detail { padding-block: clamp(3.5rem, 7vw, 6rem); border-top: 1px solid var(--line); }
.division-detail:first-of-type { border-top: 0; }
.division-detail__num {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(3.5rem, 2rem + 6vw, 6.5rem); line-height: .85;
  color: rgba(20,16,17,.08); display: block; margin-bottom: .5rem;
  font-variant-numeric: tabular-nums;
}

/* ---- Numbered capability list ----------------------------------------- */
.caps { display: grid; gap: 0; border-top: 1px solid var(--line); }
.section--ink .caps { border-top-color: var(--line-dark); }
.cap {
  display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) minmax(0, 1.25fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(1.6rem, 3vw, 2.3rem);
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.section--ink .cap { border-bottom-color: var(--line-dark); }
@media (max-width: 800px) {
  .cap { grid-template-columns: 2.4rem minmax(0, 1fr); gap: 1rem; }
  .cap__body { grid-column: 2; margin-top: .6rem; }
}
.cap__body { color: var(--ink-500); font-size: .96rem; }
.section--ink .cap__body { color: var(--ink-300); }

/* ---- Stat band --------------------------------------------------------- */
.band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 1px; background: var(--line-dark);
  border-block: 1px solid var(--line-dark);
}
.band__cell {
  background: var(--ink); padding: clamp(2rem, 4vw, 3.2rem) clamp(1.5rem, 3vw, 2.5rem);
}

/* ---- Office cards ------------------------------------------------------ */
.offices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 1.5rem; }
.office {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(1.8rem, 3vw, 2.4rem);
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 1.1rem;
}
.office__label {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--clay);
}
.office__label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--clay); }
.contact-list { display: grid; gap: .85rem; font-size: .945rem; }
.contact-list li { display: grid; grid-template-columns: 1.35rem 1fr; gap: .85rem; align-items: start; }
.contact-list svg { width: 17px; height: 17px; color: var(--steel); margin-top: .3rem; flex: none; }
.contact-list a { transition: color .2s var(--ease); word-break: break-word; }
.contact-list a:hover { color: var(--clay); }
.contact-list .k {
  display: block; font-size: .66rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-400); margin-bottom: .1rem;
}

/* ---- Leadership -------------------------------------------------------- */
.people { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: 1.5rem; }
.person {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
}
.person__portrait {
  aspect-ratio: 1 / 1;
  background-color: var(--ink-800);
  background-image:
    var(--photo, linear-gradient(transparent, transparent)),
    radial-gradient(90% 90% at 50% 18%, rgba(63,98,133,.5), rgba(63,98,133,0) 60%),
    linear-gradient(160deg, #2A2023, #141011);
  background-size: cover; background-position: center top;
  background-repeat: no-repeat;
  display: grid; place-items: center;
  position: relative; overflow: hidden;
}
/* Anchored to the top of the frame so a face is never cropped at the crown. */
.person__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  border: 0;
}
.person__initials {
  font-family: var(--serif); font-weight: 700; font-size: 3.4rem;
  letter-spacing: .06em; color: rgba(255,255,255,.34);
}
.person__body { padding: 1.45rem 1.5rem 1.7rem; display: grid; gap: .3rem; }
.person__role {
  font-size: .68rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  color: var(--clay);
}
.person__meta { font-size: .88rem; color: var(--ink-500); margin-top: .55rem; line-height: 1.6; }

/* ---- Project cards ----------------------------------------------------- */
.projects { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); gap: 1.6rem; }
.project {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.project:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.project .plate { aspect-ratio: 16 / 10; border-radius: 0; box-shadow: none; }
.project__body { padding: 1.5rem 1.55rem 1.7rem; display: flex; flex-direction: column; gap: .7rem; flex: 1; }
.project__meta {
  display: flex; flex-wrap: wrap; gap: .5rem 1.2rem;
  font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-400);
  padding-top: .95rem; margin-top: auto; border-top: 1px solid var(--line);
}

/* Editable-placeholder marker (so nothing ships as an invented fact) */
.todo {
  display: inline-block;
  background: repeating-linear-gradient(45deg, #FFF4E3 0 8px, #FFEAD0 8px 16px);
  border: 1px dashed #D99B3F; color: #8A5A10;
  padding: .06em .45em; border-radius: 3px;
  font-size: .9em; font-weight: 600;
}

/* ---- Forms ------------------------------------------------------------- */
.form { display: grid; gap: 1.15rem; }
.field { display: grid; gap: .45rem; }
.field label {
  font-size: .7rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-500);
}
.field input, .field select, .field textarea {
  width: 100%; padding: .85rem 1rem;
  background: var(--white); border: 1px solid var(--line-strong);
  border-radius: var(--r-md); font-size: .96rem;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--clay);
  box-shadow: 0 0 0 3px rgba(217,69,31,.14);
}
.field textarea { resize: vertical; min-height: 140px; }
.field--row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }
@media (max-width: 560px) { .field--row { grid-template-columns: 1fr; } }
.form__note { font-size: .82rem; color: var(--ink-400); }
.form__status { font-size: .9rem; font-weight: 600; color: var(--steel); }

/* ---- Page header (interior pages) -------------------------------------- */
.page-head {
  background: var(--ink); color: var(--mist);
  margin-top: -86px; padding-top: 86px;
  position: relative; overflow: hidden;
}
.page-head::after {
  content: ""; position: absolute; right: -10%; top: -40%;
  width: 55%; height: 180%;
  background: linear-gradient(200deg, rgba(217,69,31,.26), rgba(63,98,133,.22) 55%, transparent 75%);
  transform: rotate(-10deg); pointer-events: none;
}
.page-head__inner { position: relative; z-index: 2; padding-block: clamp(3.5rem, 7vw, 6rem) clamp(3rem, 5vw, 4.5rem); }
.page-head .lede { max-width: 42rem; margin-top: 1.5rem; }
.crumbs {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  font-size: .715rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-300); margin-bottom: 1.6rem;
}
.crumbs a { transition: color .2s var(--ease); }
.crumbs a:hover { color: var(--clay-300); }
.crumbs .sep { color: var(--clay); }

/* ---- CTA band ---------------------------------------------------------- */
.cta {
  position: relative; overflow: hidden;
  background: var(--ink); color: #fff;
  border-radius: var(--r-lg);
  padding: clamp(2.5rem, 5vw, 4.2rem);
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.8rem, 4vw, 3.5rem); align-items: center;
  box-shadow: var(--shadow-lg);
}
.cta::after {
  content: ""; position: absolute; right: -8%; top: -60%; width: 48%; height: 220%;
  background: linear-gradient(200deg, rgba(217,69,31,.4), transparent 62%);
  transform: rotate(-12deg); pointer-events: none;
}
.cta > * { position: relative; z-index: 2; }
.cta .h2 { color: #fff; }
@media (max-width: 860px) { .cta { grid-template-columns: 1fr; } }

/* ---- Footer ------------------------------------------------------------ */
.site-footer { background: var(--ink); color: var(--ink-300); padding-top: clamp(3.5rem, 7vw, 5.5rem); }
.footer-grid {
  display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(150px, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand p { margin-top: 1.4rem; max-width: 30rem; font-size: .93rem; }
.footer-col h4 {
  font-size: .68rem; font-weight: 700; letter-spacing: .17em; text-transform: uppercase;
  color: #fff; margin-bottom: 1.15rem;
}
.footer-col li + li { margin-top: .7rem; }
.footer-col a, .footer-col span { font-size: .9rem; transition: color .2s var(--ease); }
.footer-col a:hover { color: var(--clay-300); }
.footer-bottom {
  border-top: 1px solid var(--line-dark);
  padding-block: 1.6rem;
  display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  align-items: center; justify-content: space-between;
  font-size: .78rem; color: var(--ink-400);
}
.footer-bottom a { transition: color .2s var(--ease); }
.footer-bottom a:hover { color: var(--clay-300); }

/* ---- Touch targets -----------------------------------------------------
   These link groups are standalone navigation, not links inside a sentence,
   so the WCAG inline exception does not cover them. Measured at 16 to 19px
   tall; vertical padding lifts each past the 24px minimum without moving
   anything else on the page. */
.ribbon__contact a,
.crumbs a,
.footer-col a,
.footer-bottom a,
.contact-list a { display: inline-block; }

.ribbon__contact a { padding-block: .3rem; }
.crumbs a          { padding-block: .28rem; }
.footer-col a      { padding-block: .3rem; }
.footer-bottom a   { padding-block: .3rem; }
.contact-list a    { padding-block: .22rem; }
/* Tighten the list gap by what the padding just added, so spacing is unchanged. */
.footer-col li + li { margin-top: .35rem; }

/* ---- Scroll reveal -----------------------------------------------------
   Gated behind .js, which an inline script sets on <html> before paint.
   Without that gate a script failure would leave every revealed element at
   opacity 0 forever, hiding most of the page. Content must be visible by
   default and animated only when something is there to animate it. */
.js [data-reveal] {
  opacity: 0; transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }

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

/* ---- Utilities --------------------------------------------------------- */
.mt-1 { margin-top: .75rem; } .mt-2 { margin-top: 1.5rem; }
.mt-3 { margin-top: 2.25rem; } .mt-4 { margin-top: 3rem; }
.stack-gap { display: grid; gap: 1.4rem; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media print {
  .site-header, .ribbon, .nav-toggle, .cta { display: none !important; }
  body { background: #fff; color: #000; }
  .hero, .page-head, .section--ink, .site-footer { background: #fff !important; color: #000 !important; }
  .hero::after, .page-head::after { display: none; }
}