/* ============================================================
   RIGHTFIT — "Interlock"
   Brand system: Moss #7C8C2B · Ink · Warm paper
   Type: Poppins (display) · Hanken Grotesk (body) ·
         IBM Plex Mono (folio voice) · Instrument Serif (accents)
   ============================================================ */

/* ------------------------------------------------------------
   0. Tokens
   ------------------------------------------------------------ */
:root {
  --moss:        #7E8920; /* sampled from the brand artwork */
  --moss-bright: #A8B542; /* accent text on ink (AA) */
  --moss-deep:   #565E14; /* accent text on paper/tint (AA) */
  --moss-soft:   rgba(126, 137, 32, 0.45);
  --moss-faint:  rgba(126, 137, 32, 0.14);
  --ink:         #14160D;
  --ink-deep:    #0E100A;
  --paper:       #F7F6F0;
  --tint:        #ECEFDE;
  --text-ink:    #1A1C12;

  --font-display: "Poppins", "Segoe UI", Helvetica, Arial, sans-serif;
  --font-body:    "Hanken Grotesk", "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", "Cascadia Mono", Consolas, monospace;
  --font-accent:  "Instrument Serif", Georgia, serif;

  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-cycle: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-snap:  cubic-bezier(0.34, 1.56, 0.64, 1);

  --rule: color-mix(in srgb, currentColor 16%, transparent);
  --rule-soft: color-mix(in srgb, currentColor 9%, transparent);

  /* per-plate concrete tokens (currentColor can't feed text-stroke on
     color:transparent elements, and accents need AA-safe values per ground) */
  --fg:          var(--paper);
  --accent-text: var(--moss-bright);
  --em:          var(--moss-bright);
  --ghost:       rgba(247, 246, 240, 0.07);

  --pad-x: clamp(1.25rem, 4.5vw, 4rem);
  --pad-y: clamp(5.5rem, 12vh, 9.5rem);
  --header-h: 4.75rem;
}

/* ------------------------------------------------------------
   1. Reset / base
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

[id] { scroll-margin-top: calc(var(--header-h) + 1.5rem); }

body {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.7;
  background: var(--ink);
  color: var(--text-ink);
  overflow-x: hidden;
  min-height: 100vh;
}

img, svg, canvas { display: block; max-width: 100%; }
body.no-scroll { overflow: hidden; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
em { font-style: italic; }

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

:focus-visible {
  outline: 2px solid var(--moss-bright);
  outline-offset: 4px;
}
.plate--silk :focus-visible,
.plate--tint :focus-visible { outline-color: var(--moss-deep); }

.skip-link {
  position: fixed;
  top: -100%;
  left: 1rem;
  z-index: 500;
  background: var(--moss);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.75rem 1.25rem;
  transition: top 0.2s ease-out;
}
.skip-link:focus-visible { top: 1rem; }

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

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--ink-deep); }
::-webkit-scrollbar-thumb { background: #3A4028; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--moss-soft); }

/* ------------------------------------------------------------
   2. Grounds (plates)
   ------------------------------------------------------------ */
.plate { position: relative; }

.plate--ink {
  background: var(--ink);
  color: var(--paper);
  --em: var(--moss-bright);
  --fg: var(--paper);
  --accent-text: var(--moss-bright);
  --ghost: rgba(247, 246, 240, 0.07);
}

.plate--silk {
  background: var(--paper);
  color: var(--text-ink);
  --em: var(--moss);
  --fg: var(--text-ink);
  --accent-text: var(--moss-deep);
  --ghost: rgba(26, 28, 18, 0.06);
}

.plate--tint {
  background: var(--tint);
  color: var(--text-ink);
  --em: var(--moss); /* match the accent green used on the paper plates */
  --fg: var(--text-ink);
  --accent-text: var(--moss-deep);
  --ghost: rgba(26, 28, 18, 0.06);
}

.section { padding-block: var(--pad-y); }

.container {
  max-width: 1360px;
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

/* ------------------------------------------------------------
   3. Typography
   ------------------------------------------------------------ */
.display-1, .display-2, .display-3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.display-1 { font-size: clamp(3rem, 8.4vw, 7.75rem); line-height: 0.99; }
.display-2 { font-size: clamp(2.4rem, 5.2vw, 4.9rem); }
.display-3 { font-size: clamp(1.9rem, 3.5vw, 3.1rem); }

/* The serif italic accent word — one per headline */
.em-accent {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
  font-size: 1.06em;
  letter-spacing: 0;
  color: var(--em, var(--moss));
}

.mono {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: color-mix(in srgb, currentColor 65%, transparent);
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.eyebrow::before {
  content: "";
  width: 3rem;
  height: 2px;
  border-radius: 1px;
  background: var(--moss);
  flex: none;
}

.lead {
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  font-weight: 400;
  line-height: 1.6;
  max-width: 34em;
}

.prose {
  max-width: 62ch;
  font-weight: 300;
}
.prose p + p { margin-top: 1.4em; }
.prose strong { font-weight: 500; }

.prose--rule {
  border-left: 2px solid var(--moss-faint);
  padding-left: clamp(1.5rem, 3vw, 2.5rem);
}

.footnote-ref {
  color: var(--accent-text);
  font-weight: 500;
  margin-left: 0.1em;
}

.footnote {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, currentColor 60%, transparent);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  max-width: 62ch;
  line-height: 1.9;
}
.footnote .fn-star { color: var(--accent-text); }

.ghost-num {
  position: absolute;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(9rem, 24vw, 22rem);
  line-height: 0.8;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1px var(--ghost);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* ------------------------------------------------------------
   4. Brand lockups — the real artwork, in two colourways
   ------------------------------------------------------------ */
.brand-logo { position: relative; display: block; height: 2.35rem; flex: none; }
.brand-logo img { height: 100%; width: auto; }
/* img.class beats the bare class the base sizing rule would otherwise override */
.brand-logo img.brand-logo__light { display: none; }
/* light masthead (contact top) shows the original colourway — fixes the
   white-on-white piece disappearing */
body[data-ground="silk"] .masthead:not(.is-solid):not(.is-open) .brand-logo__light { display: block; }
body[data-ground="silk"] .masthead:not(.is-solid):not(.is-open) .brand-logo__dark { display: none; }

/* Alternate brand — the parquet weave mark.
   Enable site-wide by changing <body> to <body data-brand="weave">. */
.brand-weave { display: none; align-items: center; gap: 0.7rem; flex: none; }
.brand-weave img { height: 2.3rem; width: auto; }
body[data-brand="weave"] .brand-logo { display: none; }
body[data-brand="weave"] .brand-weave { display: flex; }

.wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  font-size: 1.35rem;
}
.wordmark b { font-weight: 600; color: var(--moss); }
.wordmark span { font-weight: 600; }

/* ------------------------------------------------------------
   5. Reveal system
   ------------------------------------------------------------ */
[data-reveal] {
  opacity: 0;
  transform: translateY(34px);
  filter: blur(6px);
  transition:
    opacity 1s var(--ease-out),
    transform 1s var(--ease-out),
    filter 1s var(--ease-out);
  transition-delay: var(--d, 0s);
  will-change: opacity, transform, filter;
}
[data-reveal].is-in {
  opacity: 1;
  transform: none;
  filter: none;
}

[data-reveal="masks"] {
  opacity: 1;
  transform: none;
  filter: none;
  transition: none;
}
/* 0.25em breathing room so tight line-heights never shave Poppins descenders;
   the 160% travel keeps ascenders from peeking through the taller mask window */
.mask-line { display: block; overflow: hidden; padding-block: 0.25em; margin-block: -0.25em; }
.mask-line > span {
  display: block;
  transform: translateY(160%);
  transition: transform 1.15s var(--ease-out);
  transition-delay: var(--d, 0s);
  will-change: transform;
}
[data-reveal="masks"].is-in .mask-line > span { transform: none; }
.mask-line:nth-child(2) > span { --d: 0.11s; }
.mask-line:nth-child(3) > span { --d: 0.22s; }
.mask-line:nth-child(4) > span { --d: 0.33s; }

.rule-draw {
  height: 2px;
  border-radius: 1px;
  background: var(--moss);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.4s var(--ease-out);
  transition-delay: var(--d, 0s);
}
.rule-draw.is-in, .is-in .rule-draw { transform: scaleX(1); }

/* SVG stroke draw (seam dividers) — lengths set by JS in user space */
[data-draw] path {
  stroke-dasharray: var(--len, 1600);
  stroke-dashoffset: var(--len, 1600);
  transition: stroke-dashoffset 1.6s var(--ease-out);
}
[data-draw].is-in path { stroke-dashoffset: 0; }

/* ------------------------------------------------------------
   6. Seam divider (the interlock seam between plates)
   ------------------------------------------------------------ */
.thread-divider {
  display: block;
  width: 100%;
  height: clamp(40px, 6vw, 72px);
}
.thread-divider svg { width: 100%; height: 100%; }
.thread-divider path {
  /* no non-scaling-stroke: dash math must stay in user space to match
     the JS getTotalLength() draw-on animation at every viewport width */
  fill: none;
  stroke: var(--moss);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0.8;
}

/* ------------------------------------------------------------
   7. Masthead
   ------------------------------------------------------------ */
.masthead {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 135; /* above .nav-overlay so the burger stays reachable when open */
  color: var(--paper);
  transition: transform 0.55s var(--ease-out), background-color 0.4s ease;
}
.masthead.is-hidden { transform: translateY(-101%); }
.masthead.is-solid {
  background: color-mix(in srgb, var(--ink-deep) 90%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

body[data-ground="silk"] .masthead:not(.is-solid):not(.is-open) { color: var(--text-ink); }

.masthead__inner {
  max-width: 1360px;
  margin-inline: auto;
  padding-inline: var(--pad-x);
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.masthead__rule {
  height: 2px;
  background: var(--moss);
  opacity: 0.6;
  transform: scaleX(0);
  transform-origin: left;
  animation: masthead-rule 1.2s var(--ease-out) 0.35s forwards;
}
@keyframes masthead-rule { to { transform: scaleX(1); } }

.masthead__brand {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex: none;
}

.masthead__meta {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.55;
  white-space: nowrap;
}
@media (max-width: 1240px) {
  /* the nowrap meta line overflows the masthead at mid widths —
     the numbered pills need the shoulder room first */
  .masthead__meta { display: none; }
}

.masthead__nav { display: flex; align-items: center; gap: clamp(0.25rem, 0.6vw, 0.6rem); }

/* Folio pills — each destination is a numbered entry; the page you are
   on is stamped solid moss, like a wax seal on the open chapter */
.masthead__link {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap; /* "Our Process" / "Hiring Models" must never wrap */
  display: inline-flex;
  align-items: baseline;
  gap: 0.55em;
  padding: 0.55em 1em;
  border: 1px solid transparent;
  border-radius: 999px;
  opacity: 0.78;
  transition: opacity 0.25s ease, border-color 0.3s ease,
              background-color 0.3s ease, color 0.3s ease;
}
.masthead__link .idx {
  font-size: 0.82em;
  letter-spacing: 0.1em;
  color: var(--accent-text);
  transition: color 0.3s ease;
}
body[data-ground="silk"] .masthead:not(.is-solid):not(.is-open) { --accent-text: var(--moss-deep); }
.masthead__link:hover {
  opacity: 1;
  border-color: var(--moss-soft);
  background: var(--moss-faint);
}
.masthead__link[aria-current="page"] {
  opacity: 1;
  background: var(--moss);
  border-color: var(--moss);
  color: var(--ink);
}
.masthead__link[aria-current="page"] .idx {
  color: color-mix(in srgb, var(--ink) 72%, var(--moss));
}

.masthead__toggle {
  display: none;
  position: relative;
  z-index: 140;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 7px;
}
.masthead__toggle span {
  display: block;
  width: 26px; height: 2px;
  border-radius: 1px;
  background: currentColor;
  transition: transform 0.45s var(--ease-out), opacity 0.3s ease;
}
.masthead__toggle[aria-expanded="true"] span:first-child { transform: translateY(4.5px) rotate(45deg); }
.masthead__toggle[aria-expanded="true"] span:last-child { transform: translateY(-4.5px) rotate(-45deg); }

/* Full-screen nav overlay */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 130;
  background: var(--ink-deep);
  color: var(--paper);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow-y: auto;
  padding: calc(var(--header-h) + 1rem) var(--pad-x) var(--pad-x);
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path 0.7s var(--ease-out), visibility 0s linear 0.7s;
}
.nav-overlay.is-open {
  clip-path: inset(0 0 0 0);
  visibility: visible;
  transition: clip-path 0.7s var(--ease-out), visibility 0s;
}
.nav-overlay__list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-block: auto; /* centres when there's room, collapses when it overflows */
  flex-shrink: 0;
}
.nav-overlay__item { overflow: hidden; }
.nav-overlay__link {
  display: flex;
  align-items: center; /* the tiny index number centres on the word */
  gap: 1.25rem;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 9vw, 4.25rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  transform: translateY(110%);
  transition: transform 0.9s var(--ease-out), color 0.3s ease;
}
.nav-overlay.is-open .nav-overlay__link { transform: none; }
.nav-overlay__item:nth-child(1) .nav-overlay__link { transition-delay: 0.10s; }
.nav-overlay__item:nth-child(2) .nav-overlay__link { transition-delay: 0.17s; }
.nav-overlay__item:nth-child(3) .nav-overlay__link { transition-delay: 0.24s; }
.nav-overlay__item:nth-child(4) .nav-overlay__link { transition-delay: 0.31s; }
.nav-overlay__item:nth-child(5) .nav-overlay__link { transition-delay: 0.38s; }
.nav-overlay__item:nth-child(6) .nav-overlay__link { transition-delay: 0.45s; }
.nav-overlay__link:hover,
.nav-overlay__link[aria-current="page"] { color: var(--moss-bright); }
.nav-overlay__link .idx {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  line-height: 1;
  color: var(--moss-bright);
}
.nav-overlay__foot {
  flex-shrink: 0;
  margin-top: clamp(2rem, 6vh, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 3rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.7;
}

/* six links need more shoulder room than four did */
@media (max-width: 1080px) {
  .masthead__nav { display: none; }
  .masthead__toggle { display: inline-flex; }
}
@media (min-width: 1081px) {
  .nav-overlay { display: none; }
}

/* ------------------------------------------------------------
   8. Buttons & links
   ------------------------------------------------------------ */
.btn-circle {
  --size: clamp(6.5rem, 10vw, 8.5rem);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.3rem;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  border: 1.5px solid var(--moss-soft);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  isolation: isolate;
  overflow: hidden;
  transition: color 0.35s ease, border-color 0.35s ease;
  will-change: transform;
}
.btn-circle::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--moss);
  transform: scale(0);
  transition: transform 0.5s var(--ease-out);
  z-index: -1;
}
.btn-circle:hover { color: var(--ink); border-color: var(--moss); }
.btn-circle:hover::before { transform: scale(1.02); }
.btn-circle .arrow {
  display: block;
  font-family: var(--font-body);
  font-size: 1.2rem;
  line-height: 1;
  transition: transform 0.4s var(--ease-out);
}
.btn-circle:hover .arrow { transform: translateX(0.5em); }

.btn-line {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding-bottom: 0.5rem;
  position: relative;
}
.btn-line::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  border-radius: 1px;
  background: var(--moss);
  transform-origin: right;
  transition: transform 0.45s var(--ease-out);
}
.btn-line:hover::after { transform: scaleX(0.35); transform-origin: left; }
.btn-line .arrow { transition: transform 0.35s var(--ease-out); }
.btn-line:hover .arrow { transform: translateX(0.4em); }

/* ------------------------------------------------------------
   9. Hero
   ------------------------------------------------------------ */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding-top: var(--header-h);
}
.hero--inner { min-height: 86vh; min-height: 86svh; }

.hero__canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
}

.hero__eyebrow { margin-bottom: clamp(1.5rem, 3vh, 2.5rem); }

.hero__intro {
  margin-top: clamp(1.75rem, 4vh, 3rem);
  max-width: 46ch;
  font-size: clamp(1.02rem, 1.3vw, 1.2rem);
  font-weight: 300;
  line-height: 1.75;
  color: color-mix(in srgb, var(--paper) 84%, transparent);
}

.hero__ctas {
  margin-top: clamp(2.25rem, 5vh, 3.75rem);
  display: flex;
  align-items: center;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  flex-wrap: wrap;
}

.hero__ghost {
  position: absolute;
  bottom: -0.08em;
  left: max(calc((100vw - 1360px) / 2), 1rem);
  font-size: clamp(10rem, 26vw, 24rem);
  z-index: 1;
}
/* Phones: the 10rem floor above would push "2005" past the right
   edge — scale with the viewport so the whole number stays in view.
   The home hero also drops its eyebrow line to reduce clutter. */
@media (max-width: 700px) {
  .hero__ghost { font-size: 30vw; }
  .hero:not(.hero--inner) .hero__eyebrow { display: none; }
  .hero:not(.hero--inner) .hero__ctas { display: none; }
  .hero .hero__folio { display: none; }
}

.hero__folio {
  position: absolute;
  right: var(--pad-x);
  bottom: clamp(1.5rem, 4vh, 3rem);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.62;
}
.hero__plumb {
  width: 2px;
  border-radius: 1px;
  height: clamp(3rem, 9vh, 6rem);
  background: linear-gradient(to bottom, var(--moss), transparent);
}

/* Cycling word */
.word-cycle {
  display: inline-grid;
  overflow: hidden;
  vertical-align: bottom;
  padding-block: 0.25em;
  margin-block: -0.25em;
}
.word-cycle__item {
  grid-area: 1 / 1;
  justify-self: start;
  transform: translateY(160%);
  /* no transition at rest — the reset from -160% back to the +160%
     waiting spot must snap, or the word slides visibly back down
     through the window */
  transition: none;
  will-change: transform;
  white-space: nowrap;
}
.word-cycle__item.is-current,
.word-cycle__item.is-leaving { transition: transform 0.75s var(--ease-cycle); }
.word-cycle__item.is-current { transform: translateY(0); }
.word-cycle__item.is-leaving { transform: translateY(-160%); }

/* ------------------------------------------------------------
   10. Marquee
   ------------------------------------------------------------ */
.marquee {
  overflow: hidden;
  white-space: nowrap;
  user-select: none;
  padding-block: clamp(1.25rem, 2.5vw, 2rem);
}
.marquee__track {
  display: inline-flex;
  align-items: baseline;
  gap: clamp(2rem, 4vw, 3.5rem);
  width: max-content;
  animation: marquee-scroll var(--speed, 42s) linear infinite;
  will-change: transform;
}
.marquee--reverse .marquee__track { animation-direction: reverse; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee-scroll { to { transform: translateX(-50%); } }

.marquee__item {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.6vw, 3.9rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.marquee__item--outline {
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--fg) 40%, transparent);
}
.marquee__item--accent {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.1rem, 4.9vw, 4.15rem);
  color: var(--em);
}
.marquee__star { color: var(--moss); font-size: 0.5em; align-self: center; }

.marquee--divider { border-block: 1px solid var(--rule); }

/* Static variant — no motion, items wrap in place */
.marquee--static { white-space: normal; }
.marquee--static .marquee__track {
  display: flex;
  flex-wrap: wrap;
  width: auto;
  row-gap: 0.9rem;
  animation: none;
  will-change: auto;
}
/* Each item carries its own trailing dot, so every wrapped line
   ends with one — loose separator spans land inconsistently */
.marquee--static .marquee__star { display: none; }
.marquee--static .marquee__item::after {
  content: "◆";
  color: var(--moss);
  font-size: 0.55em;
  margin-left: 1.1em;
  vertical-align: middle;
}

/* Client marquee — quieter register */
.marquee--clients .marquee__item {
  font-family: var(--font-mono);
  font-size: clamp(0.85rem, 1.4vw, 1.1rem);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: color-mix(in srgb, currentColor 62%, transparent);
}

/* ------------------------------------------------------------
   11. The Ledger — odometer stat band
   ------------------------------------------------------------ */
.ledger {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 3rem);
}
@media (max-width: 900px) { .ledger { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .ledger { grid-template-columns: 1fr; } }

.ledger__item { position: relative; }

.ledger__value {
  font-family: var(--font-display);
  font-size: clamp(3.25rem, 6vw, 5.5rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  display: flex;
  align-items: baseline;
}
.ledger__value .suffix {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 0.5em;
  color: var(--em);
  margin-left: 0.08em;
}

.odometer {
  display: inline-flex;
  overflow: hidden;
  height: 1em;
  line-height: 1;
}
.odometer__col {
  display: flex;
  flex-direction: column;
  transform: translateY(0);
  transition: transform 1.5s var(--ease-out);
  transition-delay: var(--d, 0s);
}
.odometer__col span { display: block; height: 1em; }

.ledger__rule { margin-top: 1.1rem; }

.ledger__caption {
  margin-top: 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.8;
  color: color-mix(in srgb, currentColor 68%, transparent);
}

/* ------------------------------------------------------------
   12. Three Models — pinned horizontal gallery
   ------------------------------------------------------------ */
.pillars { position: relative; height: 340vh; }
.pillars__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}
.pillars__track {
  display: flex;
  height: 100%;
  width: max-content;
  will-change: transform;
}
.pillar {
  position: relative;
  width: 100vw;
  height: 100%;
  flex: none;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.pillar__inner {
  position: relative;
  z-index: 2;
  max-width: 1360px;
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--pad-x);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: end;
}
.pillar__num {
  position: absolute;
  top: 50%;
  left: 4vw;
  transform: translateY(-50%);
  font-size: clamp(12rem, 30vw, 26rem);
  z-index: 1;
  will-change: transform;
}
.pillar__kicker { margin-bottom: 1.25rem; }
.pillar__title { margin-bottom: clamp(1.25rem, 3vh, 2rem); }
.pillar__copy {
  max-width: 42ch;
  color: color-mix(in srgb, currentColor 80%, transparent);
  margin-bottom: 2rem;
}
.pillar__meta {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, currentColor 65%, transparent);
  padding-bottom: 0.6rem;
}
.pillar__meta li { display: flex; gap: 0.75rem; align-items: baseline; }
.pillar__meta li::before { content: "—"; color: var(--accent-text); }

.pillars__progress {
  position: absolute;
  bottom: clamp(1.5rem, 4vh, 2.5rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  color: var(--paper);
  mix-blend-mode: difference;
}
.pillars__bar {
  width: clamp(8rem, 20vw, 16rem);
  height: 2px;
  border-radius: 1px;
  background: color-mix(in srgb, currentColor 25%, transparent);
  position: relative;
}
.pillars__bar i {
  position: absolute;
  inset: 0;
  border-radius: 1px;
  background: var(--moss);
  transform-origin: left;
  transform: scaleX(0);
}

/* Narrow screens keep the same pinned horizontal slide —
   only the panel contents reflow to a single column */
@media (max-width: 900px) {
  .pillar__inner { grid-template-columns: 1fr; }
  .pillar__num { font-size: clamp(9rem, 38vw, 16rem); }
  .pillar__copy { max-width: 60ch; }
}

/* ------------------------------------------------------------
   13. Editorial index grids & rows
   ------------------------------------------------------------ */
.index-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.index-card {
  position: relative;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  min-height: 11rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.35s ease;
}
.index-card::before {
  /* cursor-tracking moss sheen */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), var(--moss-faint), transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.index-card:hover::before { opacity: 1; }
.index-card::after {
  /* ink-fill rise */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--ink);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.5s var(--ease-out);
}
.index-card:hover::after { transform: scaleY(1); }
.index-card:hover { color: var(--paper); }
.index-card:hover .index-card__num { color: var(--moss-bright); }

.index-card__num {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  color: color-mix(in srgb, var(--fg) 58%, transparent);
  transition: color 0.35s ease;
}
.index-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.8vw, 1.6rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.index-card__desc {
  font-size: 0.92rem;
  line-height: 1.65;
  color: color-mix(in srgb, var(--fg) 76%, transparent);
  margin-top: 0.6rem;
  transition: color 0.35s ease;
}
.index-card:hover .index-card__desc { color: color-mix(in srgb, var(--paper) 80%, transparent); }

/* On the ink plate (About — "Names on the ledger") an ink rise is
   invisible, so the effect inverts: paper rises, the text flips dark */
.plate--ink .index-card::after { background: var(--paper); }
.plate--ink .index-card:hover { color: var(--text-ink); }
.plate--ink .index-card:hover .index-card__num { color: var(--moss-deep); }
.plate--ink .index-card:hover .index-card__desc { color: color-mix(in srgb, var(--text-ink) 80%, transparent); }
.plate--ink .index-card:hover .em-accent { color: var(--moss-deep); }

.row-list { border-top: 1px solid var(--rule); }
.row-item {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 1.4fr);
  gap: clamp(1rem, 3vw, 3rem);
  align-items: baseline;
  padding-block: clamp(1.5rem, 2.8vw, 2.25rem);
  border-bottom: 1px solid var(--rule);
  position: relative;
  isolation: isolate;
}
.row-item { transition: color 0.35s ease; }
/* ink-fill rise, as on the index and sector cards */
.row-item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--ink);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.45s var(--ease-out);
}
.row-item:hover::before { transform: scaleY(1); }
/* cursor-tracking moss sheen above the risen ink */
.row-item::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), var(--moss-faint), transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.row-item:hover::after { opacity: 1; }
.row-item:hover { color: var(--paper); }
.row-item__num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--accent-text);
  transition: color 0.35s ease;
}
.row-item:hover .row-item__num { color: var(--moss-bright); }
.row-item__title {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.2vw, 1.9rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
}
.row-item__desc {
  font-size: 0.98rem;
  color: color-mix(in srgb, var(--fg) 78%, transparent);
  max-width: 52ch;
  transition: color 0.35s ease;
}
.row-item:hover .row-item__desc { color: color-mix(in srgb, var(--paper) 80%, transparent); }
@media (max-width: 760px) {
  .row-item { grid-template-columns: 3rem minmax(0, 1fr); }
  .row-item__desc { grid-column: 2; }
}

/* ------------------------------------------------------------
   14. The Search, Drawn — scroll-stitched process spine
   ------------------------------------------------------------ */
.stages { position: relative; }
.stages__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}
.stages__thread {
  fill: none;
  stroke: var(--moss);
  stroke-width: 1.5;
  opacity: 0.85;
}
.stages__bead-dot {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 4px;
  background: var(--moss);
  box-shadow: 0 0 0 7px var(--moss-faint), 0 0 24px 2px var(--moss-soft);
  transform: translate(-50%, -50%) rotate(45deg);
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.stages__list {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(4rem, 10vh, 8rem);
}
.stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
  width: min(100%, 1060px);
}
.stage:nth-child(odd) { margin-right: auto; }
.stage:nth-child(even) { margin-left: auto; direction: rtl; }
.stage:nth-child(even) > * { direction: ltr; }

.stage__num {
  font-family: var(--font-display);
  font-size: clamp(5.5rem, 12vw, 10rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 0.9;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--fg) 30%, transparent);
  transition: color 0.8s var(--ease-out), -webkit-text-stroke-color 0.8s ease;
  justify-self: center;
}
.stage.is-lit .stage__num {
  color: var(--em);
  -webkit-text-stroke-color: transparent;
}
.stage__body { max-width: 42ch; }
.stage__kicker { display: block; margin-bottom: 0.9rem; color: var(--accent-text); }
.stage__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin-bottom: 0.9rem;
}
.stage__desc {
  color: color-mix(in srgb, currentColor 78%, transparent);
  font-size: 0.98rem;
}
@media (max-width: 760px) {
  .stage, .stage:nth-child(even) { grid-template-columns: 1fr; direction: ltr; margin-inline: 0; }
  .stage__num { justify-self: start; font-size: clamp(4rem, 16vw, 6.5rem); }
}

/* ------------------------------------------------------------
   15. Comparison table (Model A vs Model B)
   ------------------------------------------------------------ */
.compare-wrap { overflow-x: auto; }
.compare {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  font-size: 0.98rem;
}
.compare th, .compare td {
  text-align: left;
  vertical-align: top;
  padding: clamp(1.1rem, 2vw, 1.6rem) clamp(1rem, 2vw, 1.75rem);
  border-bottom: 1px solid var(--rule);
}
.compare thead th {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-text);
  border-bottom: 2px solid var(--moss-soft);
}
.compare tbody th {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, currentColor 62%, transparent);
  width: 20%;
}
.compare td { width: 40%; font-weight: 300; color: color-mix(in srgb, currentColor 85%, transparent); }
.compare td strong { font-weight: 500; font-family: var(--font-display); letter-spacing: -0.01em; }
.compare tbody tr { transition: background-color 0.3s ease; }
.compare tbody tr:hover { background: color-mix(in srgb, currentColor 4%, transparent); }

/* ------------------------------------------------------------
   16. Chapters (service models) & feature band
   ------------------------------------------------------------ */
.chapter {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
@media (max-width: 860px) { .chapter { grid-template-columns: 1fr; } }

.chapter__num {
  font-family: var(--font-display);
  font-size: clamp(6rem, 15vw, 14rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 0.85;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--fg) 28%, transparent);
}
.chapter__kicker { display: block; margin-bottom: 1.1rem; color: var(--accent-text); }
.chapter__title { margin-bottom: clamp(1.25rem, 2.5vh, 1.75rem); }
.chapter__features {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--rule);
}
.chapter__features li {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  padding-block: 0.9rem;
  border-bottom: 1px solid var(--rule);
  font-size: 0.95rem;
  color: color-mix(in srgb, currentColor 82%, transparent);
}
.chapter__features li::before {
  content: "◆";
  color: var(--accent-text);
  font-size: 0.55em;
  flex: none;
}

/* Fee plaque — the number, treated like a price tag in a fine catalogue */
.fee-plaque {
  display: inline-flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-block: 1.5rem 0.5rem;
  padding: 1rem 1.5rem;
  border: 1.5px solid var(--moss-soft);
  border-radius: 14px;
}
.fee-plaque__value {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
}
.fee-plaque__unit {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, currentColor 65%, transparent);
  max-width: 16ch;
  line-height: 1.7;
}

/* ------------------------------------------------------------
   17. Clocks
   ------------------------------------------------------------ */
/* Inline contact glyphs (WhatsApp / envelope / map pin) before contact details */
.wa-ico {
  width: 1.1em;
  height: 1.1em;
  fill: currentColor;
  vertical-align: -0.18em;
  margin-right: 0.45em;
  display: inline-block;
}

.clocks {
  display: flex;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.clock { display: flex; flex-direction: column; gap: 0.3rem; }
.clock__city { color: color-mix(in srgb, currentColor 58%, transparent); }
.clock__time { color: var(--moss-bright); font-weight: 500; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------
   18. Contact — invitation, cards, form
   ------------------------------------------------------------ */
.invite {
  padding-top: calc(var(--header-h) + clamp(4rem, 12vh, 8rem));
  padding-bottom: clamp(3rem, 8vh, 6rem);
}
.invite__title {
  font-size: clamp(3rem, 10.5vw, 10.5rem);
  line-height: 0.99;
}
.invite__word {
  position: relative;
  display: inline-block;
  cursor: default;
}
.invite__word::after {
  content: attr(data-word);
  position: absolute;
  inset: 0;
  color: var(--moss);
  /* the clip window reaches past the box on the sides and bottom so
     descenders ('y') and italic overhangs fill completely; the extra
     0.35em on the initial top inset keeps that overhang hidden at rest */
  clip-path: inset(calc(100% + 0.35em) -0.2em -0.35em -0.2em);
  transition: clip-path 0.55s var(--ease-out);
  pointer-events: none;
}
.invite__word:hover::after { clip-path: inset(-0.2em -0.2em -0.35em -0.2em); }

.contact-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
@media (max-width: 860px) { .contact-cards { grid-template-columns: 1fr; } }
.contact-card {
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: clamp(1.75rem, 3vw, 2.75rem);
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  min-height: 14rem;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.35s ease;
}
/* cursor-tracking moss sheen */
.contact-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), var(--moss-faint), transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.contact-card:hover::before { opacity: 1; }
/* ink-fill rise */
.contact-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--ink);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.5s var(--ease-out);
}
.contact-card:hover::after { transform: scaleY(1); }
.contact-card:hover { color: var(--paper); }
.contact-card__label { color: var(--accent-text); transition: color 0.35s ease; }
.contact-card:hover .contact-card__label { color: var(--moss-bright); }
.contact-card__value {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.7vw, 1.45rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.35;
  overflow-wrap: anywhere; /* the email must never widen the page */
  margin-top: auto;
}
/* long email + icon must fit on one line inside the card */
.contact-card__value--email { font-size: clamp(0.98rem, 1.35vw, 1.2rem); }
.contact-card__value a {
  border-bottom: 2px solid var(--moss-soft);
  transition: border-color 0.25s ease, color 0.25s ease;
}
.contact-card__value a:hover { color: var(--moss-deep); border-color: var(--moss); }
/* once the ink has risen, the link must read as paper — and brighten, not darken */
.contact-card:hover .contact-card__value a { color: var(--paper); }
.contact-card:hover .contact-card__value a:hover { color: var(--moss-bright); border-color: var(--moss); }
.contact-card__note {
  font-size: 0.85rem;
  color: color-mix(in srgb, var(--fg) 68%, transparent);
  transition: color 0.35s ease;
}
.contact-card:hover .contact-card__note { color: color-mix(in srgb, var(--paper) 78%, transparent); }

.form { max-width: 760px; }
.form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.5rem);
}
@media (max-width: 700px) { .form__grid { grid-template-columns: 1fr; } }

.field { position: relative; }
.field--full { grid-column: 1 / -1; }

.field input,
.field select,
.field textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  padding: 0.85rem 0 0.85rem;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.05rem;
  color: inherit;
  border-radius: 0;
  transition: border-color 0.3s ease;
}
.field textarea { resize: vertical; min-height: 7rem; }
.field select { cursor: pointer; appearance: none; }
.field__chevron {
  position: absolute;
  right: 0.25rem;
  bottom: 1.1rem;
  pointer-events: none;
  color: var(--accent-text);
  font-size: 0.8rem;
}
.field select option { background: var(--paper); color: var(--text-ink); }

.field label {
  position: absolute;
  left: 0;
  top: 0.85rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in srgb, currentColor 58%, transparent);
  transition: transform 0.35s var(--ease-out), color 0.3s ease;
  transform-origin: left top;
  pointer-events: none;
}
.field.is-active label,
.field input:focus ~ label,
.field select:focus ~ label,
.field textarea:focus ~ label {
  transform: translateY(-1.85rem) scale(0.85);
  color: var(--accent-text);
}

.field__underline {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  border-radius: 1px;
  background: var(--moss-deep);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.55s var(--ease-out);
}
.plate--ink .field__underline { background: var(--moss); }
.field input:focus ~ .field__underline,
.field select:focus ~ .field__underline,
.field textarea:focus ~ .field__underline { transform: scaleX(1); }

/* No outline box on fields — focus reads as label lift + drawn underline + tint,
   so the floated label never collides with an outline edge */
.field input:focus, .field select:focus, .field textarea:focus,
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: none; }
.field::before {
  content: "";
  position: absolute;
  inset: -6px -10px -3px;
  background: var(--moss-faint);
  border-radius: 10px;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.field:focus-within::before { opacity: 1; }

.form__actions {
  margin-top: clamp(2.5rem, 5vh, 4rem);
  display: flex;
  align-items: center;
  gap: 2.5rem;
  flex-wrap: wrap;
}
/* the long email address must never set the row's minimum width */
.form__actions p { min-width: 0; overflow-wrap: anywhere; }

.stitch {
  margin-top: 2.5rem;
  max-width: 560px;
  display: none;
}
.stitch.is-visible { display: block; }
.stitch__text {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  color: var(--moss-deep);
  margin-bottom: 0.75rem;
}
.stitch svg { width: 100%; height: 24px; overflow: visible; }
.stitch path {
  fill: none;
  stroke: var(--moss);
  stroke-width: 2;
  stroke-linecap: round;
}
.stitch.is-visible path {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: stitch-draw 1.6s var(--ease-out) 0.15s forwards;
}
@keyframes stitch-draw { to { stroke-dashoffset: 0; } }

/* ------------------------------------------------------------
   19. Footer
   ------------------------------------------------------------ */
.footer {
  background: var(--ink-deep);
  color: var(--paper);
  --em: var(--moss-bright);
  --fg: var(--paper);
  --accent-text: var(--moss-bright);
  --ghost: rgba(247, 246, 240, 0.06);
  position: relative;
  overflow: hidden;
}
.footer__cta {
  padding-block: var(--pad-y) clamp(3rem, 7vh, 5rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (max-width: 760px) { .footer__cta { grid-template-columns: 1fr; } }

.footer__mid {
  padding-block: clamp(2.5rem, 5vh, 4rem);
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
}
@media (max-width: 960px) { .footer__mid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__mid { grid-template-columns: 1fr; } }

.footer__col h3 {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--moss-bright);
  margin-bottom: 1.25rem;
}
.footer__col ul { display: flex; flex-direction: column; gap: 0.7rem; }
.footer__col a, .footer__col p {
  font-size: 0.92rem;
  font-weight: 300;
  color: color-mix(in srgb, var(--paper) 80%, transparent);
  line-height: 1.7;
}
.footer__col a { transition: color 0.25s ease; }
.footer__col a:hover { color: var(--moss-bright); }

.footer__base {
  border-top: 1px solid var(--rule);
  padding-block: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2.5rem;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--paper) 55%, transparent);
}

.footer__ghost {
  position: absolute;
  right: -0.05em;
  bottom: -0.12em;
  font-size: clamp(8rem, 20vw, 18rem);
}

/* ------------------------------------------------------------
   20. Needle cursor
   ------------------------------------------------------------ */
.cursor-dot, .cursor-ring {
  position: fixed;
  top: 0; left: 0;
  z-index: 400;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s ease;
}
body.has-cursor .cursor-dot, body.has-cursor .cursor-ring { opacity: 1; }

.cursor-dot {
  width: 7px; height: 7px;
  border-radius: 2.5px;
  background: var(--moss);
  transform: translate(-50%, -50%);
}
.cursor-ring {
  width: 38px; height: 38px;
  border-radius: 14px;
  border: 1.5px solid var(--moss-soft);
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease, width 0.35s var(--ease-out), height 0.35s var(--ease-out),
              border-radius 0.35s var(--ease-out), background-color 0.35s ease, border-color 0.35s ease;
}
.cursor-ring__label {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--ink);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.25s ease, transform 0.35s var(--ease-out);
  white-space: nowrap;
}
.cursor-ring.has-label {
  width: 64px; height: 64px;
  border-radius: 22px;
  background: var(--moss);
  border-color: var(--moss);
}
.cursor-ring.has-label .cursor-ring__label { opacity: 1; transform: scale(1); }
.cursor-ring.is-pressed { width: 28px; height: 28px; }

@media (pointer: coarse) {
  .cursor-dot, .cursor-ring { display: none !important; }
}

/* ------------------------------------------------------------
   21. Preloader, veil, progress thread
   ------------------------------------------------------------ */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--ink-deep);
  color: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1.75rem;
  transition: transform 0.9s var(--ease-out), visibility 0s linear 0.9s;
}
.preloader.is-done {
  transform: translateY(-101%);
  visibility: hidden;
}

/* The click: the two real pieces fly in from opposite corners and snap together */
.preloader__stack {
  position: relative;
  width: clamp(5rem, 10vw, 7rem);
  aspect-ratio: 319 / 332;
  animation: mark-settle 0.5s var(--ease-snap) 1.05s both;
}
.preloader__stack img { position: absolute; inset: 0; width: 100%; height: 100%; }
.preloader__stack .pl-a { animation: piece-a-in 0.95s var(--ease-snap) 0.1s both; }
.preloader__stack .pl-b { animation: piece-b-in 0.95s var(--ease-snap) 0.1s both; }
@keyframes piece-a-in {
  from { transform: translate(-52px, -38px); opacity: 0; }
  30% { opacity: 1; }
  to { transform: translate(0, 0); opacity: 1; }
}
@keyframes piece-b-in {
  from { transform: translate(52px, 38px); opacity: 0; }
  30% { opacity: 1; }
  to { transform: translate(0, 0); opacity: 1; }
}
@keyframes mark-settle {
  0% { transform: scale(1); }
  40% { transform: scale(1.07); }
  100% { transform: scale(1); }
}

/* Weave variant — eight bricks assemble the parquet mark */
.preloader__weave {
  position: relative;
  width: clamp(4.5rem, 9vw, 6rem);
  aspect-ratio: 1;
  display: none;
  animation: mark-settle 0.5s var(--ease-snap) 1.3s both;
}
.preloader__weave img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; animation: brick-in 0.6s var(--ease-snap) both; }
.preloader__weave img:nth-child(1) { animation-delay: 0.10s; }
.preloader__weave img:nth-child(2) { animation-delay: 0.19s; }
.preloader__weave img:nth-child(3) { animation-delay: 0.28s; }
.preloader__weave img:nth-child(4) { animation-delay: 0.37s; }
.preloader__weave img:nth-child(5) { animation-delay: 0.46s; }
.preloader__weave img:nth-child(6) { animation-delay: 0.55s; }
.preloader__weave img:nth-child(7) { animation-delay: 0.64s; }
.preloader__weave img:nth-child(8) { animation-delay: 0.73s; }
@keyframes brick-in {
  from { opacity: 0; transform: scale(0.55) rotate(-8deg); }
  to { opacity: 1; transform: none; }
}
body[data-brand="weave"] .preloader__stack { display: none; }
body[data-brand="weave"] .preloader__weave { display: block; }

.preloader__word {
  overflow: hidden;
  padding-block: 0.22em;
  margin-block: -0.22em;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5.5vw, 4rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.preloader__word span {
  display: block;
  transform: translateY(145%);
  animation: preloader-rise 1s var(--ease-out) 0.55s forwards;
}
.preloader__word b { font-weight: 600; color: var(--moss-bright); }
@keyframes preloader-rise { to { transform: none; } }
.preloader__rule {
  width: clamp(8rem, 22vw, 16rem);
  height: 2px;
  border-radius: 1px;
  background: color-mix(in srgb, var(--paper) 15%, transparent);
  position: relative;
  overflow: hidden;
}
.preloader__rule i {
  position: absolute;
  inset: 0;
  background: var(--moss);
  transform: scaleX(0);
  transform-origin: left;
  animation: preloader-fill 1.2s var(--ease-out) 0.5s forwards;
}
@keyframes preloader-fill { to { transform: scaleX(1); } }
.preloader__meta {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  opacity: 0;
  animation: preloader-fade 0.8s ease 0.7s forwards;
}
@keyframes preloader-fade { to { opacity: 0.55; } }

.veil {
  position: fixed;
  inset: 0;
  z-index: 290;
  background: var(--ink-deep);
  transform: scaleY(0);
  transform-origin: bottom;
  pointer-events: none;
}
.veil.is-init {
  transform: scaleY(1);
  transform-origin: top;
}
.veil.is-opening {
  transform-origin: top;
  transform: scaleY(0);
  transition: transform 0.7s var(--ease-out) 0.1s;
}
.veil.is-closing {
  transform: scaleY(1);
  transform-origin: bottom;
  transition: transform 0.55s var(--ease-cycle);
}

.progress-thread {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  z-index: 250;
  background: transparent;
  pointer-events: none;
}
.progress-thread i {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--moss);
  transform-origin: left;
  transform: scaleX(0);
}

/* ------------------------------------------------------------
   22. Utility layouts
   ------------------------------------------------------------ */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

.statement {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.4vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.18;
  max-width: 26em;
  text-wrap: balance;
}

.cta-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(2rem, 5vw, 4rem);
  flex-wrap: wrap;
}

.meta-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2.5rem;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: color-mix(in srgb, currentColor 58%, transparent);
}

/* Ambient floaters — quiet pieces drifting behind content */
.floater {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  border: 1.5px solid var(--moss-soft);
  border-radius: 24%;
  opacity: 0.5;
  animation: floaty var(--fdur, 16s) ease-in-out var(--fdel, 0s) infinite alternate;
}
.floater--fill { border: 0; background: var(--moss-faint); }
.floater--dot { border: 0; border-radius: 50%; background: var(--moss-soft); opacity: 0.3; }
.floater--mark {
  border: 0;
  border-radius: 0;
  background: url("../assets/marka.png") no-repeat center / contain;
  opacity: 0.1;
}
.plate--ink .floater--mark { background-image: url("../assets/marka-dark.png"); }
@keyframes floaty {
  from { transform: translateY(-14px) rotate(var(--frot, -28deg)); }
  to   { transform: translateY(16px) rotate(calc(var(--frot, -28deg) + 14deg)); }
}
body.reduced-motion .floater { animation: none; }

/* ------------------------------------------------------------
   Visume demo — a five-minute interview, compressed to seconds
   ------------------------------------------------------------ */
.visume-demo {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  border-radius: 18px;
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  box-shadow: 0 30px 70px -30px rgba(20, 22, 13, 0.45);
  max-width: 540px;
  width: 100%;
  overflow: hidden;
}
.visume-demo__bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: 1rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid rgba(247, 246, 240, 0.14);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(247, 246, 240, 0.6);
}
.visume-demo__bar i {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--moss-bright);
  animation: caret-blink 1.8s steps(1) infinite;
}
.visume-demo__q {
  min-height: 3.4em;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.02rem;
  line-height: 1.6;
}
.visume-demo__caret {
  display: inline-block;
  width: 2px; height: 1em;
  background: var(--moss-bright);
  vertical-align: -0.15em;
  margin-left: 2px;
  animation: caret-blink 0.9s steps(1) infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }
.vwave {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 44px;
  margin-block: 1.25rem;
  opacity: 0.3;
  transition: opacity 0.4s ease;
}
.visume-demo.is-listening .vwave { opacity: 1; }
.vwave i {
  flex: 1;
  height: 14%;
  border-radius: 2px;
  background: var(--moss-bright);
  transition: height 0.3s ease;
}
.visume-demo.is-listening .vwave i {
  animation: vwave-bounce 0.85s ease-in-out calc(var(--i) * 0.05s) infinite alternate;
}
@keyframes vwave-bounce {
  from { height: 12%; opacity: 0.55; }
  to { height: var(--hv, 60%); opacity: 1; }
}
.visume-demo__chips { display: flex; flex-wrap: wrap; gap: 0.6rem; min-height: 2.4rem; }
.vchip {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.5rem 0.85rem;
  border: 1px solid rgba(247, 246, 240, 0.2);
  border-radius: 999px;
  opacity: 0;
  transform: translateY(8px) scale(0.92);
  transition: opacity 0.45s var(--ease-snap), transform 0.45s var(--ease-snap), border-color 0.3s ease;
}
.vchip b { color: var(--moss-bright); font-weight: 500; }
.visume-demo.is-scored .vchip { opacity: 1; transform: none; border-color: var(--moss-soft); }
.visume-demo.is-scored .vchip:nth-child(1) { transition-delay: 0s; }
.visume-demo.is-scored .vchip:nth-child(2) { transition-delay: 0.14s; }
.visume-demo.is-scored .vchip:nth-child(3) { transition-delay: 0.28s; }
.visume-demo__foot {
  margin-top: 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(247, 246, 240, 0.45);
}
body.reduced-motion .visume-demo__caret { animation: none; }
body.reduced-motion .visume-demo__bar i { animation: none; }
body.reduced-motion .vwave i { animation: none !important; }

/* Compliance / assurance strip */
.assure {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.assure__item {
  background: var(--ink);
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.35s ease;
}
.plate--silk .assure__item, .plate--tint .assure__item { background: var(--paper); }
/* cursor-tracking moss sheen */
.assure__item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), var(--moss-faint), transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.assure__item:hover::before { opacity: 1; }
/* on the ink plate the effect inverts — PAPER rises and the text flips dark */
.assure__item::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--paper);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.5s var(--ease-out);
}
.assure__item:hover::after { transform: scaleY(1); }
.assure__item:hover { color: var(--text-ink); }
.assure__item .mono { color: var(--accent-text); transition: color 0.35s ease; }
.assure__item:hover .mono { color: var(--moss-deep); }
.assure__item p {
  font-size: 0.9rem;
  color: color-mix(in srgb, var(--fg) 78%, transparent);
  transition: color 0.35s ease;
}
.assure__item:hover p { color: color-mix(in srgb, var(--text-ink) 82%, transparent); }
/* on light plates the boxes are paper, so ink rises instead */
.plate--silk .assure__item::after, .plate--tint .assure__item::after { background: var(--ink); }
.plate--silk .assure__item:hover, .plate--tint .assure__item:hover { color: var(--paper); }
.plate--silk .assure__item:hover .mono, .plate--tint .assure__item:hover .mono { color: var(--moss-bright); }
.plate--silk .assure__item:hover p, .plate--tint .assure__item:hover p { color: color-mix(in srgb, var(--paper) 82%, transparent); }

/* ------------------------------------------------------------
   23. Reduced motion — composed, just still
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body.reduced-motion [data-reveal],
body.reduced-motion .mask-line > span,
body.reduced-motion .rule-draw,
body.reduced-motion [data-draw] path {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
  stroke-dashoffset: 0 !important;
  animation: none !important;
}
body.reduced-motion .marquee__track { animation: none; }
body.reduced-motion .word-cycle__item { transition: none; }
body.reduced-motion .preloader { display: none; }
body.reduced-motion .veil { display: none; }
body.reduced-motion .masthead { transition: none; }
body.reduced-motion .masthead__rule { animation: none; transform: scaleX(1); }
body.reduced-motion .preloader__word span,
body.reduced-motion .preloader__rule i,
body.reduced-motion .preloader__stack img,
body.reduced-motion .preloader__weave img { animation: none; transform: none; opacity: 1; }
body.reduced-motion .cursor-dot,
body.reduced-motion .cursor-ring { display: none; }
body.reduced-motion .pillars { height: auto; }
body.reduced-motion .pillars__sticky { position: static; height: auto; }
body.reduced-motion .pillars__track { flex-direction: column; width: 100%; height: auto; transform: none !important; }
body.reduced-motion .pillar { width: 100%; height: auto; min-height: 72vh; min-height: 72svh; padding-block: 4.5rem; }
body.reduced-motion .pillar__inner { grid-template-columns: 1fr; align-items: start; }
body.reduced-motion .pillar__num { position: absolute; top: 0.5rem; right: 4vw; left: auto; transform: none !important; font-size: clamp(8rem, 32vw, 12rem); }
body.reduced-motion .pillars__progress { display: none; }
body.reduced-motion .odometer__col { transition: none; }
body.reduced-motion .stitch.is-visible path {
  animation: none;
  stroke-dasharray: none;
  stroke-dashoffset: 0;
}

/* ------------------------------------------------------------
   24. Numeral ink-flood — the service chapters' A/B/C and the
   home gallery's A/B/C fill with moss as you reach them
   ------------------------------------------------------------ */
.chapter__num, .pillar__num { transition: color 1.2s var(--ease-out); }
.chapter__num.is-flood,
.pillar__num.is-flood { color: color-mix(in srgb, var(--moss) 24%, transparent); }
body.reduced-motion .chapter__num,
body.reduced-motion .pillar__num { transition: none; }

/* ------------------------------------------------------------
   25. Folio tabs — Hiring Models: the two leaves of the chapter
   ------------------------------------------------------------ */
.tabs__bar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem clamp(2rem, 5vw, 4.5rem);
  border-bottom: 1px solid var(--rule);
  margin-bottom: clamp(2.75rem, 7vh, 5rem);
}
.tabs__tab {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.25rem 0 1.15rem;
  color: color-mix(in srgb, currentColor 55%, transparent);
  transition: color 0.3s ease;
  display: inline-flex;
  align-items: baseline;
  gap: 0.8rem;
}
.tabs__tab .idx {
  font-size: 0.62rem;
  color: var(--accent-text);
  letter-spacing: 0.16em;
}
.tabs__tab:hover { color: color-mix(in srgb, currentColor 85%, transparent); }
.tabs__tab[aria-selected="true"] { color: var(--accent-text); }
.tabs__ink {
  position: absolute;
  bottom: -1px;
  left: 0;
  height: 2px;
  border-radius: 1px;
  background: var(--moss);
  width: 0;
  transition: transform 0.55s var(--ease-out), width 0.55s var(--ease-out);
}
[role="tabpanel"][hidden] { display: none; }
[role="tabpanel"].is-showing { animation: tab-in 0.65s var(--ease-out) both; }
@keyframes tab-in {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}
body.reduced-motion [role="tabpanel"].is-showing { animation: none; }
body.reduced-motion .tabs__ink { transition: none; }

/* Model chapters inside the tab — caption + tagline treatment */
.tabs__panels .chapter + .chapter {
  margin-top: clamp(4rem, 10vh, 7.5rem);
  padding-top: clamp(3rem, 7vh, 5.5rem);
  border-top: 1px solid var(--rule);
}
.chapter__tagline {
  display: block;
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.05rem, 1.6vw, 1.4rem);
  color: var(--accent-text);
  margin: -0.5rem 0 clamp(1.25rem, 2.5vh, 1.75rem);
}
.chapter__tagline::before {
  content: "— ";
  color: color-mix(in srgb, currentColor 55%, transparent);
}

/* Three-model comparison matrix */
.compare--trio { min-width: 860px; }
.compare--trio tbody th { width: 16%; }
.compare--trio td { width: 28%; }
.compare--trio thead th small {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  color: color-mix(in srgb, currentColor 60%, transparent);
}
/* the column being argued for — a whisper of moss under Model C */
.compare--trio .is-new { background: color-mix(in srgb, var(--moss) 5%, transparent); }

/* ------------------------------------------------------------
   26. Sectors — the terrain cards, each with a drawn glyph
   ------------------------------------------------------------ */
.sector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.sector-card {
  position: relative;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: clamp(1.75rem, 2.6vw, 2.5rem);
  min-height: 21rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.35s ease;
}
.sector-card::before {
  /* cursor-tracking moss sheen */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), var(--moss-faint), transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.sector-card:hover::before { opacity: 1; }
.sector-card::after {
  /* ink-fill rise */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--ink);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.5s var(--ease-out);
}
.sector-card:hover::after { transform: scaleY(1); }
.sector-card:hover { color: var(--paper); }

.sector-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
/* Children state their colours explicitly for rest AND hover —
   currentColor inside color-mix goes stale in Chromium when the
   parent's colour transition reverts, leaving paper-on-paper text */
.sector-card__num {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  color: color-mix(in srgb, var(--fg) 58%, transparent);
  transition: color 0.35s ease;
}
.sector-card:hover .sector-card__num { color: var(--moss-bright); }
.sector-card__glyph {
  width: clamp(2.75rem, 3.6vw, 3.4rem);
  height: auto;
  flex: none;
  overflow: visible;
}
.sector-card__glyph path {
  fill: none;
  stroke: var(--moss);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.35s ease;
}
.sector-card:hover .sector-card__glyph path { stroke: var(--moss-bright); }
.sector-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.9vw, 1.7rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
}
.sector-card__desc {
  font-size: 0.95rem;
  line-height: 1.65;
  color: color-mix(in srgb, var(--fg) 78%, transparent);
  transition: color 0.35s ease;
}
.sector-card:hover .sector-card__desc { color: color-mix(in srgb, var(--paper) 82%, transparent); }
.sector-card__roles {
  margin-top: auto;
  padding-top: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.sector-chip {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.42rem 0.8rem;
  border: 1px solid color-mix(in srgb, var(--fg) 16%, transparent);
  border-radius: 999px;
  white-space: nowrap;
  transition: border-color 0.3s ease, color 0.3s ease;
  color: color-mix(in srgb, var(--fg) 75%, transparent);
}
.sector-card:hover .sector-chip { border-color: var(--moss-soft); color: color-mix(in srgb, var(--paper) 92%, transparent); }

/* the open card at the end of the grid — "your sector?" */
.sector-card--ask .sector-card__title { color: var(--em); }
/* accent words stay legible once the ink rises */
.sector-card:hover .em-accent { color: var(--moss-bright); }