/* ==========================================================================
   ABMP & Co., CPAs — site stylesheet
   Organised top-to-bottom: tokens → base → layout → components → pages.

   TYPOGRAPHY
   One typeface: Inter, loaded as a variable font (weights 400–800).
   The hierarchy is carried by weight, size and letter-spacing rather than by
   mixing families — the approach used across modern enterprise software sites.

     Display / h1   800, tracking -0.035em   compact and tight
     h2             750, tracking -0.026em
     h3 / h4        700, tracking -0.015em
     Lead paragraph 400, larger, muted
     Body           400, line-height 1.65
     UI + buttons   600
     Eyebrow labels 700, uppercase, +0.14em

   Rule of thumb: the bigger the type, the tighter the tracking. Never set a
   heading below 700 or a paragraph above 500.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Surfaces — warm off-white paper */
  --bg:          oklch(0.985 0.004 95);
  --bg-soft:     oklch(0.965 0.006 95);
  --paper:       oklch(0.995 0.002 95);

  /* Ink — deep navy family */
  --ink:         oklch(0.255 0.028 255);
  --navy:        oklch(0.305 0.045 255);
  --navy-deep:   oklch(0.235 0.038 255);
  --navy-700:    oklch(0.36 0.05 255);
  --muted:       oklch(0.50 0.02 255);

  /* Hairlines */
  --line:        oklch(0.90 0.006 95);
  --line-soft:   oklch(0.93 0.005 95);

  /* Accent — warm bronze */
  --accent:      oklch(0.66 0.10 72);
  --accent-deep: oklch(0.58 0.10 65);

  /* On dark surfaces */
  --on-navy:       oklch(0.93 0.01 95);
  --on-navy-muted: oklch(0.78 0.015 255);

  /* Type — one family, differentiated by weight and tracking */
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  /* Kept as an alias so any stray reference still resolves to the one family */
  --serif: var(--sans);

  /* Weights */
  --w-body:    400;
  --w-medium:  500;
  --w-ui:      600;
  --w-heading: 700;
  --w-display: 800;

  /* Tracking — tighter as the type gets larger */
  --tr-display: -0.035em;
  --tr-h1:      -0.032em;
  --tr-h2:      -0.026em;
  --tr-h3:      -0.015em;
  --tr-label:    0.14em;

  /* Fluid type scale — compact, in the enterprise-software register */
  --t-display: clamp(2.7rem, 1.75rem + 3.6vw, 4.4rem);
  --t-h1:      clamp(2.1rem, 1.55rem + 2.2vw, 3.1rem);
  --t-h2:      clamp(1.65rem, 1.32rem + 1.5vw, 2.35rem);
  --t-h3:      clamp(1.12rem, 1.04rem + 0.4vw, 1.3rem);
  --t-lead:    clamp(1.06rem, 1rem + 0.36vw, 1.25rem);
  --t-body:    1.0625rem;
  --t-small:   0.9rem;
  --t-label:   0.75rem;

  /* Rhythm — generous, to let the compact type breathe */
  --maxw:    1240px;
  --maxw-txt: 68ch;
  --pad:     clamp(22px, 5vw, 88px);
  --sec-y:   clamp(84px, 10vw, 152px);
  --r:       14px;
  --r-sm:    9px;

  /* Motion */
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  /* Settles with a barely-there overshoot, like something coming to rest.
     Upgraded to a true spring curve just below where the browser supports it. */
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  /* How long scroll-reveals take. Raise this to calm the whole site down. */
  --dur-reveal: 0.68s;
}

/* A real spring curve, plotted point by point: it reaches its destination just
   past the halfway mark, drifts about 1.5% beyond, and eases back. Browsers
   that don't understand linear() keep the cubic-bezier above — the difference
   is not visible to the eye. (Chrome 113+, Safari 17.2+, Firefox 112+) */
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --ease-spring: linear(
      0, 0.070 5%, 0.224 10%, 0.401 15%, 0.567 20%, 0.706 25%,
      0.815 30%, 0.894 35%, 0.947 40%, 0.981 45%, 1.001 50%,
      1.011 55%, 1.015 60%, 1.015 65%, 1.013 70%, 1.010 75%,
      1.008 80%, 1.005 85%, 1.004 90%, 1.002 95%, 1
    );
  }
}

/* --------------------------------------------------------------------------
   2. Reset and base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Stops the sticky header covering anchor targets */
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

/* Smooth inertial scrolling.

   These classes are added by site.js and are only ever present when the
   glide layer is actually running — that is, on a mouse or trackpad, with
   "reduce motion" switched off. On a phone, or when the script is blocked,
   or for anyone who has asked for less movement, none of this applies and
   the browser's own `scroll-behavior: smooth` above stays in charge.

   The !important is deliberate: the native smooth scrolling and the
   JavaScript glide would otherwise both try to move the page at once,
   which feels rubbery. Only one of them may be in charge at a time. */
html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  font-weight: var(--w-body);
  line-height: 1.65;
  /* Slightly lighter, more even text on Mac screens. This is a deliberate
     look — remove these two lines and the type gets noticeably heavier. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Note: `font-feature-settings` for Inter's alternate letterforms and
     `text-rendering: optimizeLegibility` were both removed here. Tested
     2026-07-29: the font Google serves does not carry those alternate
     letterforms, so the setting changed nothing at all, and
     optimizeLegibility does nothing in Chrome while still nudging spacing
     in Safari — so it was making the two browsers disagree for no benefit. */
  overflow-x: hidden;
}

h1, h2, h3, h4, h5 {
  font-family: var(--sans);
  font-weight: var(--w-heading);
  line-height: 1.15;
  letter-spacing: var(--tr-h3);
  margin: 0;
  text-wrap: balance;
}

h1 { font-weight: var(--w-display); letter-spacing: var(--tr-h1); line-height: 1.08; }
h2 { font-weight: 750;             letter-spacing: var(--tr-h2); line-height: 1.13; }

p  { margin: 0; text-wrap: pretty; }
ul { margin: 0; padding: 0; list-style: none; }

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.25s var(--ease-soft);
}

img, svg, figure { display: block; max-width: 100%; }
figure { margin: 0; }

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

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

::selection {
  background: var(--accent);
  color: var(--paper);
}

/* Screen-reader-only text */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Skip link for keyboard users */
.skip {
  position: absolute;
  top: -100px; left: var(--pad);
  z-index: 200;
  background: var(--navy);
  color: var(--on-navy);
  padding: 12px 20px;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-size: var(--t-small);
  transition: top 0.25s var(--ease);
}
.skip:focus { top: 0; }

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.section { padding-block: var(--sec-y); }
.section--tight { padding-block: clamp(52px, 6vw, 92px); }
.section--soft  { background: var(--bg-soft); }
.section--paper { background: var(--paper); }

.section--navy {
  background: var(--navy-deep);
  color: var(--on-navy);
}
.section--navy h1,
.section--navy h2,
.section--navy h3 { color: var(--on-navy); }

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

/* Section heading block */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--t-label);
  font-weight: var(--w-heading);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: 22px;
}
.eyebrow::before {
  content: '';
  width: 26px; height: 1px;
  background: currentColor;
  opacity: 0.55;
}
.section--navy .eyebrow { color: var(--accent); }

.sec-head { max-width: 46rem; margin-bottom: clamp(48px, 5.5vw, 80px); }
.sec-head h2 { font-size: var(--t-h2); }
.sec-head p {
  margin-top: 22px;
  font-size: var(--t-lead);
  color: var(--muted);
  max-width: var(--maxw-txt);
}
.section--navy .sec-head p { color: var(--on-navy-muted); }

/* Split heading: title left, supporting text right */
.sec-head--split {
  max-width: none;
  display: grid;
  gap: clamp(20px, 4vw, 64px);
  align-items: end;
}
@media (min-width: 900px) {
  .sec-head--split { grid-template-columns: 1.05fr 0.95fr; }
  .sec-head--split p { margin-top: 0; }
}

/* --------------------------------------------------------------------------
   4. Buttons and links
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--navy);
  --btn-fg: var(--on-navy);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 27px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bg);
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: var(--w-ui);
  letter-spacing: -0.008em;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease),
              background-color 0.3s var(--ease-soft), border-color 0.3s var(--ease-soft),
              color 0.3s var(--ease-soft);
}
/* Bronze wipe that grows from the left on hover */
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--accent-deep);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.42s var(--ease);
}
.btn:hover {
  transform: translateY(-2px);
  border-color: var(--accent-deep);
  box-shadow: 0 12px 28px -14px oklch(0.4 0.06 65 / 0.5);
}
.btn:hover::before { transform: scaleX(1); }
.btn:active { transform: translateY(0); }

.btn .arw {
  transition: transform 0.35s var(--ease);
}
.btn:hover .arw { transform: translateX(4px); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  border-color: var(--line);
}
.btn--ghost:hover { color: var(--paper); }

.btn--light {
  --btn-bg: var(--paper);
  --btn-fg: var(--ink);
}
.btn--light:hover { color: var(--paper); }

.btn--sm { padding: 11px 20px; font-size: 0.86rem; }

/* Underline-on-hover text link */
.tlink {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: var(--w-ui);
  font-size: 0.93rem;
  letter-spacing: -0.008em;
  color: var(--accent-deep);
  padding-bottom: 2px;
}
.tlink::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--ease);
}
.tlink:hover::after { transform: scaleX(1); transform-origin: left; }
.tlink .arw { transition: transform 0.35s var(--ease); }
.tlink:hover .arw { transform: translateX(4px); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */
.hdr {
  position: sticky;
  top: 0;
  z-index: 100;
  /* There is deliberately no frosted-glass blur here.

     A blurred bar has to re-blur everything behind it on every single frame
     the page moves, which was the most expensive thing on the whole site and
     made scrolling stutter — worst of all in Safari. Over a page background
     this pale the effect was nearly invisible anyway, so it was costing a
     great deal and buying almost nothing.

     What actually tells you the page has moved is the hairline below,
     which appears on scroll. That costs nothing. */
  background: oklch(0.985 0.004 95 / 0.96);
  border-bottom: 1px solid transparent;
  transition: border-color 0.35s var(--ease-soft), background-color 0.35s var(--ease-soft);
}
.hdr.is-scrolled {
  border-bottom-color: var(--line);
  background: oklch(0.985 0.004 95 / 0.99);
}

.hdr-in {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 15px var(--pad);
  display: flex;
  align-items: center;
  gap: 28px;
}

/* Brand lockup */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-right: auto;
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--navy);
  color: var(--on-navy);
  font-size: 1.22rem;
  font-weight: var(--w-display);
  letter-spacing: -0.03em;
  line-height: 1;
  transition: background-color 0.35s var(--ease-soft), transform 0.35s var(--ease);
}
.brand:hover .brand-mark {
  background: var(--accent-deep);
  transform: rotate(-4deg);
}
.brand-txt { display: grid; line-height: 1.2; }
.brand-txt strong {
  font-size: 1.04rem;
  font-weight: var(--w-heading);
  letter-spacing: -0.024em;
}
.brand-txt em {
  font-style: normal;
  font-size: 0.66rem;
  font-weight: var(--w-ui);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Desktop navigation */
.nav { display: none; gap: 30px; }
@media (min-width: 1000px) { .nav { display: flex; } }

.nav a {
  position: relative;
  font-size: 0.94rem;
  font-weight: var(--w-medium);
  letter-spacing: -0.008em;
  color: var(--muted);
  padding-block: 6px;
}
.nav a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1.5px;
  background: var(--accent-deep);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--ease);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav a.is-current { color: var(--ink); font-weight: var(--w-ui); }
.nav a.is-current::after { transform: scaleX(1); }

.hdr-cta { display: none; }
@media (min-width: 1000px) { .hdr-cta { display: block; } }

/* Hamburger */
.burger {
  display: grid;
  place-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  margin-right: -10px;
  background: none;
  border: 0;
  cursor: pointer;
}
@media (min-width: 1000px) { .burger { display: none; } }
.burger span {
  display: block;
  width: 22px; height: 1.6px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.4s var(--ease), opacity 0.25s var(--ease-soft);
}
.burger.is-open span:nth-child(1) { transform: translateY(3.3px) rotate(45deg); }
.burger.is-open span:nth-child(2) { transform: translateY(-3.3px) rotate(-45deg); }

/* Mobile drawer */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--bg);
  padding: 96px var(--pad) 48px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.35s var(--ease-soft), transform 0.45s var(--ease), visibility 0.35s;
}
.drawer.is-open { opacity: 1; visibility: visible; transform: none; }
@media (min-width: 1000px) { .drawer { display: none; } }

.drawer a {
  font-size: 1.55rem;
  font-weight: var(--w-heading);
  letter-spacing: var(--tr-h2);
  padding-block: 13px;
  border-bottom: 1px solid var(--line-soft);
  /* Each link eases in behind the drawer, staggered by --i */
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.4s var(--ease-soft), transform 0.5s var(--ease);
  transition-delay: calc(var(--i, 0) * 55ms);
}
.drawer.is-open a { opacity: 1; transform: none; }
.drawer a.is-current { color: var(--accent-deep); }
/* The call to action in the drawer is a button, not a menu line */
.drawer a.btn {
  margin-top: 26px;
  align-self: flex-start;
  font-size: 0.95rem;
  font-weight: var(--w-ui);
  letter-spacing: -0.008em;
  border-bottom: 1px solid var(--btn-bg);
}

/* --------------------------------------------------------------------------
   6. Scroll-reveal animation

   HOW IT WORKS — and one thing you must not break.

   Elements marked class="reveal" start invisible and slide into place as you
   scroll to them. assets/js/site.js watches for them and adds "is-in".

   ⚠️  The hidden state is written as ".js .reveal", NOT ".reveal".

   The "js" class is added by a one-line script in the <head> of every page.
   That means: if JavaScript is switched off, blocked, or fails to load, the
   "js" class is never added, nothing is ever hidden, and the page reads
   normally. Without that guard a broken script would leave every page blank.

   So: do not delete the little <script> in the <head>, and do not "tidy"
   ".js .reveal" down to ".reveal".

   Above-the-fold headings use .reveal--now instead. They animate immediately
   on load rather than waiting for the script, so the main heading is never
   invisible while the page is still loading.

   To change how far things travel, edit --ry / --rx below. To slow it all
   down, raise --dur-reveal. To switch movement off and keep only the fade,
   set --ry and --rx to 0.
   -------------------------------------------------------------------------- */
.reveal {
  --ry: 34px;   /* how far it rises  */
  --rx: 0px;    /* how far it slides sideways */
  /* The fade finishes before the movement does, so the text is solid while it
     settles the last few pixels — calmer than fading the whole way in */
  transition: opacity 0.5s var(--ease-soft),
              transform var(--dur-reveal) var(--ease-spring);
  transition-delay: var(--d, 0ms);
}
.js .reveal { opacity: 0; transform: translate3d(var(--rx), var(--ry), 0); }
.reveal.is-in { opacity: 1; transform: none; }

/* Travel variants — each only changes the starting offset */
.reveal--sm { --ry: 18px; }              /* small print, single lines */
.reveal--lg { --ry: 48px; }              /* section headings */

/* Rows enter from the right — but only on wide screens. On a phone a row
   fills the width, so starting it off to the side would push the page wider
   than the screen. There it just rises like everything else.
   The 40px offset must stay under the page gutter (--pad, which is never
   less than 43px at this breakpoint) or the page gains a sideways scroll. */
.reveal--x { --ry: 34px; --rx: 0px; }
@media (min-width: 860px) {
  .reveal--x { --rx: 40px; --ry: 0px; }
}

/* Above-the-fold headings: animate on load, never wait for the script */
.reveal--now {
  animation: revealIn var(--dur-reveal) var(--ease-spring) both;
  animation-delay: var(--d, 0ms);
}
@keyframes revealIn {
  from { opacity: 0; transform: translate3d(var(--rx, 0px), var(--ry, 34px), 0); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   6b. Hover behaviour on touch screens, and keyboard parity

   On a phone there is no pointer to move away, so a tap can leave a card stuck
   in its hover state. Movement-based hovers are therefore limited to devices
   with a real pointer. Colour changes are left alone — they are the affordance,
   not the animation.

   Every card here contains a link, so :focus-within gives keyboard users the
   same feedback that mouse users get from :hover.
   -------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .step:hover .n           { transform: translateY(-3px); }
  .partner:hover .ph img   { transform: scale(1.035); }
}

.svc:focus-within     { background: var(--paper); }
.svc:focus-within::after,
.stat:focus-within::after,
.step:focus-within::after { transform: scaleX(1); }
.ind:focus-within     { background: var(--paper); }
.opening:focus-within { border-color: var(--accent); background: var(--paper); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  /* Cancel outright rather than run at 0.01ms — otherwise the delay still
     holds each heading back by up to a quarter of a second */
  .reveal--now { animation: none; }
}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-block: clamp(64px, 9vw, 130px) clamp(56px, 7vw, 104px);
  overflow: hidden;
}
/* Soft bronze bloom behind the headline */
.hero::before {
  content: '';
  position: absolute;
  top: -22%; right: -12%;
  width: min(760px, 78vw);
  aspect-ratio: 1;
  background: radial-gradient(circle, oklch(0.66 0.10 72 / 0.13), transparent 66%);
  pointer-events: none;
  z-index: 0;
}
.hero .wrap { position: relative; z-index: 1; }

.hero-loc {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: var(--t-small);
  color: var(--muted);
  margin-bottom: 28px;
}
.hero-loc .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px oklch(0.66 0.10 72 / 0.18);
}

.hero h1 {
  font-size: var(--t-display);
  font-weight: var(--w-display);
  max-width: 16ch;
  letter-spacing: var(--tr-display);
  line-height: 1.05;
}
/* The emphasis is carried by colour alone — no italic, no second family */
.hero h1 .accent { color: var(--accent-deep); }

.hero-lead {
  margin-top: 32px;
  font-size: var(--t-lead);
  color: var(--muted);
  max-width: 54ch;
}
.hero .btn-row { margin-top: 44px; }

/* Interior page header (non-home pages) */
.phead {
  position: relative;
  padding-block: clamp(56px, 7vw, 104px) clamp(40px, 5vw, 68px);
  overflow: hidden;
}
.phead::before {
  content: '';
  position: absolute;
  top: -40%; left: 46%;
  width: min(620px, 74vw);
  aspect-ratio: 1;
  background: radial-gradient(circle, oklch(0.66 0.10 72 / 0.1), transparent 68%);
  pointer-events: none;
}
.phead .wrap { position: relative; }
.phead h1 { font-size: var(--t-h1); max-width: 19ch; }
.phead p {
  margin-top: 26px;
  font-size: var(--t-lead);
  color: var(--muted);
  max-width: var(--maxw-txt);
}

/* Breadcrumb */
.crumb {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: var(--t-small);
  color: var(--muted);
  margin-bottom: 26px;
}
.crumb a:hover { color: var(--accent-deep); }
.crumb .sep { opacity: 0.45; }

/* --------------------------------------------------------------------------
   8. Statistics strip
   -------------------------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
}
@media (min-width: 780px) { .stats { grid-template-columns: repeat(4, 1fr); } }

.stat {
  position: relative;
  background: var(--bg);
  padding: clamp(26px, 3vw, 40px) clamp(18px, 2vw, 32px);
  transition: background-color 0.4s var(--ease-soft);
}
.stat:hover { background: var(--paper); }
/* Bronze rule draws across the bottom edge — the same gesture as the service
   cards. No lift: these cells sit in a 1px grid, and raising one would show
   the divider line behind it. */
.stat::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
}
.stat:hover::after { transform: scaleX(1); }
.stat b {
  display: block;
  font-size: clamp(1.9rem, 1.4rem + 1.7vw, 2.7rem);
  font-weight: var(--w-display);
  line-height: 1;
  letter-spacing: -0.038em;
  /* Figures line up column-to-column across the strip */
  font-variant-numeric: tabular-nums;
  color: var(--navy);
}
.stat span {
  display: block;
  margin-top: 12px;
  font-size: var(--t-small);
  color: var(--muted);
  line-height: 1.45;
}

/* --------------------------------------------------------------------------
   9. Service cards
   -------------------------------------------------------------------------- */
.svc-grid {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
@media (min-width: 680px)  { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .svc-grid { grid-template-columns: repeat(3, 1fr); } }

.svc {
  position: relative;
  background: var(--bg);
  padding: clamp(28px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 13px;
  transition: background-color 0.45s var(--ease-soft);
}
/* Bronze bar that draws across the top edge on hover */
.svc::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
}
.svc:hover { background: var(--paper); }
.svc:hover::after { transform: scaleX(1); }

.svc .num {
  font-size: var(--t-label);
  font-weight: var(--w-heading);
  letter-spacing: var(--tr-label);
  font-variant-numeric: tabular-nums;
  color: var(--accent-deep);
}
.svc h3 { font-size: var(--t-h3); }
.svc p {
  font-size: 0.94rem;
  color: var(--muted);
  flex: 1;
}
.svc .tlink { margin-top: 6px; align-self: flex-start; }

/* --------------------------------------------------------------------------
   10. Feature list (About)
   -------------------------------------------------------------------------- */
.feats {
  display: grid;
  gap: clamp(28px, 3vw, 44px);
}
@media (min-width: 700px)  { .feats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .feats { grid-template-columns: repeat(4, 1fr); } }

/* These had no hover state at all. Bronze draws along the existing top rule. */
.feat { position: relative; padding-top: 24px; border-top: 1px solid var(--line); }
.feat::before {
  content: '';
  position: absolute;
  top: -1px; left: 0;
  width: 100%; height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
}
.feat:hover::before,
.feat:focus-within::before { transform: scaleX(1); }
.feat h4 { font-size: 1.13rem; margin-bottom: 10px; }
.feat p { font-size: 0.93rem; color: var(--muted); }
.section--navy .feat { border-top-color: oklch(0.93 0.01 95 / 0.18); }
.section--navy .feat p { color: var(--on-navy-muted); }

/* --------------------------------------------------------------------------
   11. Process steps
   -------------------------------------------------------------------------- */
.steps { display: grid; gap: 1px; background: var(--line); }
@media (min-width: 640px)  { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .steps { grid-template-columns: repeat(4, 1fr); } }

.step {
  position: relative;
  background: var(--bg);
  padding: clamp(28px, 3vw, 40px);
  transition: background-color 0.45s var(--ease-soft);
}
.step:hover { background: var(--paper); }
.step::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
}
.step:hover::after { transform: scaleX(1); }
.step .n {
  font-size: 1.9rem;
  font-weight: var(--w-display);
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--accent);
  opacity: 0.5;
  margin-bottom: 22px;
  transition: opacity 0.4s var(--ease-soft), transform 0.45s var(--ease);
}
.step:hover .n { opacity: 1; }
.step h4 { font-size: 1.16rem; margin-bottom: 10px; }
.step p { font-size: 0.93rem; color: var(--muted); }

/* --------------------------------------------------------------------------
   12. Partner cards
   -------------------------------------------------------------------------- */
.partners { display: grid; gap: clamp(26px, 3vw, 38px); }
@media (min-width: 620px)  { .partners { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .partners { grid-template-columns: repeat(4, 1fr); } }

.partner .ph {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r);
  overflow: hidden;
  background: linear-gradient(160deg, var(--bg-soft), oklch(0.90 0.012 95));
  border: 1px solid var(--line);
  margin-bottom: 20px;
}
.partner .ph img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.75s var(--ease);
}
/* The hover zoom itself lives in section 6b, limited to pointer devices */
/* Placeholder label, shown when no photo has been added yet */
.partner .ph[data-label]:empty::after {
  content: attr(data-label);
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.7;
}
.p-name { font-size: 1.14rem; font-weight: var(--w-heading); letter-spacing: var(--tr-h3); }
.p-role {
  margin-top: 6px;
  font-size: var(--t-label);
  font-weight: var(--w-heading);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent-deep);
}
.p-bio { margin-top: 12px; font-size: 0.91rem; color: var(--muted); }

/* --------------------------------------------------------------------------
   13. Industry cards
   -------------------------------------------------------------------------- */
.inds { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
@media (min-width: 620px)  { .inds { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .inds { grid-template-columns: repeat(3, 1fr); } }

.ind {
  background: var(--bg);
  padding: clamp(26px, 3vw, 36px);
  display: flex;
  gap: 18px;
  align-items: flex-start;
  transition: background-color 0.45s var(--ease-soft);
}
.ind:hover { background: var(--paper); }
.ind .ic {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 11px;
  background: oklch(0.66 0.10 72 / 0.12);
  color: var(--accent-deep);
  transition: background-color 0.4s var(--ease-soft), transform 0.45s var(--ease);
}
.ind:hover .ic { background: oklch(0.66 0.10 72 / 0.22); transform: translateY(-2px); }
.ind .ic svg { width: 22px; height: 22px; }
.ind h4 { font-size: 1.1rem; margin-bottom: 6px; }
.ind p { font-size: 0.9rem; color: var(--muted); }

/* --------------------------------------------------------------------------
   14. Careers openings
   -------------------------------------------------------------------------- */
.openings { display: grid; gap: 12px; }

.opening {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(20px, 2.4vw, 28px) clamp(22px, 2.6vw, 32px);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition: border-color 0.35s var(--ease-soft), transform 0.35s var(--ease),
              background-color 0.35s var(--ease-soft);
}
.opening:hover {
  border-color: var(--accent);
  background: var(--paper);
  transform: translateX(4px);
}
.opening h4 { font-size: 1.13rem; }
.opening p { font-size: var(--t-small); color: var(--muted); margin-top: 4px; }
.o-tag {
  flex: none;
  font-size: var(--t-label);
  font-weight: var(--w-heading);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--accent-deep);
  border: 1px solid oklch(0.66 0.10 72 / 0.4);
  border-radius: 999px;
  padding: 6px 13px;
}

/* --------------------------------------------------------------------------
   15. Checklist
   -------------------------------------------------------------------------- */
.checks { display: grid; gap: 22px; }
.check { display: flex; gap: 15px; align-items: flex-start; }
.check .tick {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: oklch(0.66 0.10 72 / 0.16);
  color: var(--accent-deep);
  margin-top: 2px;
}
.check .tick svg { width: 13px; height: 13px; }
.check h4 { font-size: 0.99rem; font-weight: var(--w-ui); letter-spacing: -0.008em; }
.check p { font-size: 0.9rem; color: var(--muted); margin-top: 4px; }
.section--navy .check p { color: var(--on-navy-muted); }
.section--navy .check .tick { background: oklch(0.66 0.10 72 / 0.22); color: var(--accent); }

/* --------------------------------------------------------------------------
   16. Call-to-action band
   -------------------------------------------------------------------------- */
.cta {
  position: relative;
  background: var(--navy-deep);
  color: var(--on-navy);
  padding-block: clamp(64px, 8vw, 116px);
  overflow: hidden;
}
.cta::before {
  content: '';
  position: absolute;
  bottom: -46%; left: -10%;
  width: min(680px, 80vw);
  aspect-ratio: 1;
  background: radial-gradient(circle, oklch(0.66 0.10 72 / 0.2), transparent 66%);
  pointer-events: none;
}
.cta .wrap { position: relative; }
.cta h2 { font-size: var(--t-h2); color: var(--on-navy); max-width: 20ch; }
.cta p {
  margin-top: 20px;
  font-size: var(--t-lead);
  color: var(--on-navy-muted);
  max-width: 52ch;
}
.cta .btn-row { margin-top: 36px; }

/* --------------------------------------------------------------------------
   17. Footer
   -------------------------------------------------------------------------- */
.foot {
  background: var(--navy-deep);
  color: var(--on-navy);
  padding-block: clamp(56px, 6vw, 84px) 34px;
  border-top: 1px solid oklch(0.93 0.01 95 / 0.12);
}
.foot-grid {
  display: grid;
  gap: clamp(34px, 4vw, 56px);
}
@media (min-width: 760px)  { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 1040px) { .foot-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }

.foot .brand-mark { background: oklch(0.93 0.01 95 / 0.12); color: var(--on-navy); }
.foot .brand:hover .brand-mark { background: var(--accent-deep); }
.foot .brand-txt em { color: var(--on-navy-muted); }
.foot-blurb {
  margin-top: 22px;
  font-size: 1.18rem;
  font-weight: var(--w-heading);
  letter-spacing: var(--tr-h3);
  line-height: 1.4;
  color: var(--on-navy);
  max-width: 24ch;
}
.foot-blurb + .tlink { margin-top: 20px; color: var(--accent); }

.foot h5 {
  font-size: var(--t-label);
  font-weight: var(--w-heading);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 18px;
}
.foot li + li { margin-top: 10px; }
.foot li, .foot address {
  font-size: 0.92rem;
  font-style: normal;
  color: var(--on-navy-muted);
  line-height: 1.6;
}
.foot a:hover { color: var(--accent); }

.foot-base {
  margin-top: clamp(44px, 5vw, 64px);
  padding-top: 26px;
  border-top: 1px solid oklch(0.93 0.01 95 / 0.12);
  display: flex;
  flex-wrap: wrap;
  gap: 14px 26px;
  justify-content: space-between;
  font-size: var(--t-small);
  color: var(--on-navy-muted);
}

/* --------------------------------------------------------------------------
   18. Booking form
   -------------------------------------------------------------------------- */
.book-shell {
  display: grid;
  gap: clamp(32px, 4vw, 60px);
  align-items: start;
}
@media (min-width: 1000px) { .book-shell { grid-template-columns: 0.85fr 1.15fr; } }

.book-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(26px, 3vw, 42px);
  box-shadow: 0 24px 60px -44px oklch(0.3 0.04 255 / 0.4);
}

/* Step tabs */
.steps-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.step-tab {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: var(--t-small);
  color: var(--muted);
  transition: color 0.35s var(--ease-soft);
}
.step-tab .b {
  display: grid;
  place-items: center;
  width: 25px; height: 25px;
  border-radius: 50%;
  border: 1px solid var(--line);
  font-size: 0.78rem;
  font-weight: var(--w-ui);
  font-variant-numeric: tabular-nums;
  transition: background-color 0.4s var(--ease-soft), border-color 0.4s var(--ease-soft),
              color 0.4s var(--ease-soft);
}
.step-tab.is-active { color: var(--ink); font-weight: var(--w-ui); }
.step-tab.is-active .b { background: var(--navy); border-color: var(--navy); color: var(--on-navy); }
.step-tab.is-done .b { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.step-tab .div { width: 16px; height: 1px; background: var(--line); }
.step-tab:last-child .div { display: none; }
@media (max-width: 520px) { .step-tab .lbl { display: none; } }

/* Panels */
.panel { display: none; animation: panelIn 0.45s var(--ease) both; }
.panel.is-active { display: block; }
@keyframes panelIn {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: none; }
}

.panel > h3 { font-size: 1.35rem; margin-bottom: 8px; }
.panel > .hint { font-size: 0.9rem; color: var(--muted); margin-bottom: 24px; }

/* Fields */
.field { margin-bottom: 20px; }
.field > label,
.fieldset > legend {
  display: block;
  font-size: var(--t-small);
  font-weight: var(--w-ui);
  letter-spacing: -0.005em;
  margin-bottom: 9px;
  padding: 0;
}
.req { color: var(--accent-deep); }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 13px 15px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition: border-color 0.3s var(--ease-soft), box-shadow 0.3s var(--ease-soft),
              background-color 0.3s var(--ease-soft);
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: oklch(0.82 0.01 95); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  background: var(--paper);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px oklch(0.66 0.10 72 / 0.16);
}
.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: oklch(0.55 0.16 25); }

.fieldset { border: 0; padding: 0; margin: 0 0 20px; }

/* Two-up rows */
.row2 { display: grid; gap: 20px; }
@media (min-width: 560px) { .row2 { grid-template-columns: 1fr 1fr; } }

/* Selectable chips (services, meeting format) */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { position: relative; }
.chip input {
  position: absolute;
  opacity: 0;
  width: 100%; height: 100%;
  margin: 0;
  cursor: pointer;
}
.chip span {
  display: block;
  padding: 11px 17px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.89rem;
  cursor: pointer;
  transition: border-color 0.3s var(--ease-soft), background-color 0.3s var(--ease-soft),
              color 0.3s var(--ease-soft), transform 0.3s var(--ease);
}
.chip input:hover + span { border-color: var(--accent); transform: translateY(-1px); }
.chip input:checked + span {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--on-navy);
}
.chip input:focus-visible + span {
  outline: 2px solid var(--accent-deep);
  outline-offset: 2px;
}

/* Larger option cards (meeting format) */
.opts { display: grid; gap: 12px; }
@media (min-width: 560px) { .opts { grid-template-columns: 1fr 1fr; } }
.opt { position: relative; }
.opt input {
  position: absolute;
  opacity: 0;
  width: 100%; height: 100%;
  margin: 0;
  cursor: pointer;
}
.opt span {
  display: block;
  padding: 17px 19px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color 0.3s var(--ease-soft), background-color 0.3s var(--ease-soft),
              transform 0.3s var(--ease);
}
.opt span b { display: block; font-size: 0.97rem; font-weight: var(--w-ui); letter-spacing: -0.008em; }
.opt span small { display: block; margin-top: 3px; font-size: var(--t-small); color: var(--muted); }
.opt input:hover + span { border-color: var(--accent); transform: translateY(-1px); }
.opt input:checked + span {
  border-color: var(--accent);
  background: oklch(0.66 0.10 72 / 0.08);
}
.opt input:focus-visible + span { outline: 2px solid var(--accent-deep); outline-offset: 2px; }

/* Review list */
.review-row {
  display: flex;
  justify-content: space-between;
  gap: 22px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 0.93rem;
}
.review-row .k { color: var(--muted); flex: none; }
.review-row .v { text-align: right; font-weight: var(--w-medium); }

/* Form footer */
.form-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.form-nav .spacer { margin-left: auto; }

.form-err {
  display: none;
  margin-top: 16px;
  padding: 13px 16px;
  background: oklch(0.95 0.03 25);
  border: 1px solid oklch(0.84 0.07 25);
  border-radius: var(--r-sm);
  font-size: 0.89rem;
  color: oklch(0.45 0.15 25);
}
.form-err.is-on { display: block; }

.form-note { margin-top: 18px; font-size: var(--t-small); color: var(--muted); }

/* Success state */
.done-wrap { display: none; text-align: center; padding-block: 24px; }
.done-wrap.is-on { display: block; animation: panelIn 0.5s var(--ease) both; }
.done-ico {
  display: grid;
  place-items: center;
  width: 62px; height: 62px;
  margin: 0 auto 24px;
  border-radius: 50%;
  background: oklch(0.66 0.10 72 / 0.15);
  color: var(--accent-deep);
}
.done-ico svg { width: 27px; height: 27px; }
.done-wrap h3 { font-size: 1.55rem; margin-bottom: 12px; }
.done-wrap p { color: var(--muted); max-width: 42ch; margin-inline: auto; }
.ref {
  display: inline-block;
  margin-top: 24px;
  padding: 9px 17px;
  background: var(--bg);
  border: 1px dashed var(--line);
  border-radius: var(--r-sm);
  font-family: var(--mono);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
}

/* Embedded Google Calendar booking page */
.cal-frame {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--bg);
  min-height: 620px;
}
.cal-frame iframe {
  display: block;
  width: 100%;
  height: 720px;
  border: 0;
}
@media (max-width: 700px) {
  .cal-frame { min-height: 560px; }
  .cal-frame iframe { height: 640px; }
}

/* Shown while the calendar loads, hidden once the iframe reports ready */
.cal-loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 14px;
  justify-items: center;
  background: var(--bg);
  text-align: center;
  padding: 24px;
  transition: opacity 0.4s var(--ease-soft), visibility 0.4s;
}
.cal-loading.is-hidden { opacity: 0; visibility: hidden; }
.cal-loading p { font-size: 0.93rem; color: var(--muted); }
.cal-spin {
  width: 26px; height: 26px;
  border: 2px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: calSpin 0.9s linear infinite;
}
@keyframes calSpin { to { transform: rotate(360deg); } }

/* Setup notice — visible only until the booking link is pasted in */
.cal-setup {
  padding: clamp(28px, 4vw, 48px);
  text-align: center;
  border: 1px dashed oklch(0.66 0.10 72 / 0.5);
  border-radius: var(--r);
  background: oklch(0.66 0.10 72 / 0.06);
}
.cal-setup h3 { font-size: 1.25rem; margin-bottom: 12px; }
.cal-setup p { font-size: 0.94rem; color: var(--muted); max-width: 46ch; margin-inline: auto; }
.cal-setup p + p { margin-top: 12px; }
.cal-setup code {
  font-family: var(--mono);
  font-size: 0.85rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 2px 7px;
}

/* Fallback shown if the calendar cannot be displayed at all */
.cal-fallback {
  margin-top: 20px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-soft);
  font-size: 0.93rem;
  color: var(--muted);
}
.cal-fallback strong { color: var(--ink); }

/* Contact detail list beside the form */
.contact-list { display: grid; gap: 26px; margin-top: 34px; }
.contact-item { padding-top: 20px; border-top: 1px solid var(--line); }
.contact-item h5 {
  font-size: var(--t-label);
  font-weight: var(--w-heading);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin: 0 0 10px;
}
.contact-item p, .contact-item address {
  font-style: normal;
  font-size: 0.96rem;
  color: var(--muted);
  line-height: 1.6;
}
.contact-item a:hover { color: var(--accent-deep); }

/* --------------------------------------------------------------------------
   19. Detailed service rows (Services page)
   -------------------------------------------------------------------------- */
.slist { display: grid; }

.srow {
  display: grid;
  gap: 16px clamp(28px, 5vw, 80px);
  padding-block: clamp(34px, 4vw, 54px);
  border-top: 1px solid var(--line);
}
.srow:last-child { border-bottom: 1px solid var(--line); }

@media (min-width: 860px) {
  .srow { grid-template-columns: 0.8fr 1.2fr; }

  /* The number and title hold in place while their detail column scrolls
     past, then release at the end of the row. On narrower screens the row
     is a single column and this does nothing, which is what we want. */
  .srow-l {
    position: sticky;
    top: 104px;         /* clears the sticky header, plus breathing room */
    align-self: start;  /* REQUIRED. Grid items are full-height by default,
                           and a full-height item can never stick. */
  }
}

.srow-l { display: flex; align-items: baseline; gap: 16px; }
.srow-n {
  font-size: var(--t-label);
  font-weight: var(--w-heading);
  letter-spacing: var(--tr-label);
  font-variant-numeric: tabular-nums;
  color: var(--accent-deep);
  padding-top: 7px;
}
.srow-l h2 { font-size: clamp(1.35rem, 1.1rem + 0.95vw, 1.8rem); }
/* Colour only — these rows are tall, and moving one would just be noise */
.srow-n { transition: color 0.35s var(--ease-soft); }
.srow:hover .srow-n { color: var(--accent); }

/* Icon variant of the row label (Industries page) */
.srow-l:has(.srow-ic) { align-items: center; }
.srow-ic {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 11px;
  background: oklch(0.66 0.10 72 / 0.12);
  color: var(--accent-deep);
  transition: background-color 0.4s var(--ease-soft), transform 0.45s var(--ease);
}
.srow:hover .srow-ic { background: oklch(0.66 0.10 72 / 0.22); transform: translateY(-2px); }
.srow-ic svg { width: 22px; height: 22px; }

.srow-r > p { font-size: var(--t-lead); color: var(--muted); max-width: var(--maxw-txt); }
.srow-r .tlink { margin-top: 22px; }

/* Bullet list with bronze ticks */
.ticks {
  display: grid;
  gap: 10px;
  margin-top: 22px;
}
@media (min-width: 640px) { .ticks { grid-template-columns: 1fr 1fr; gap: 10px 26px; } }

.ticks li {
  position: relative;
  padding-left: 24px;
  font-size: 0.93rem;
  color: var(--muted);
}
.ticks li::before {
  content: '';
  position: absolute;
  left: 2px; top: 0.62em;
  width: 9px; height: 9px;
  border-left: 1.6px solid var(--accent);
  border-bottom: 1.6px solid var(--accent);
  transform: rotate(-45deg) translateY(-1px);
}

/* --------------------------------------------------------------------------
   20. Prose (long-form text blocks)
   -------------------------------------------------------------------------- */
.prose { max-width: var(--maxw-txt); }
.prose p + p { margin-top: 20px; }
.prose p { font-size: var(--t-lead); color: var(--muted); }
.prose strong { color: var(--ink); font-weight: var(--w-ui); }

/* Two-column text + aside */
.split {
  display: grid;
  gap: clamp(32px, 4vw, 72px);
  align-items: start;
}
@media (min-width: 900px) { .split { grid-template-columns: 1.05fr 0.95fr; } }