/* ==========================================================================
   Fathom v4: shared component system
   Built to D:/Dev/graphicl-system/DESIGN-BANK.md (the advisory look) and the
   approved SPEC-SHEET.md. Pages compose these classes only: no inline styles.
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
  --abyss: #0B1A24;
  --abyss-rgb: 11, 26, 36;
  --deep: #12242F;
  --deep-2: #1A2F3B;
  --foam: #E7ECEF;       /* text on dark, 14.9 */
  --mist: #9FB0B8;       /* secondary on dark, 7.9 / 7.1 */
  --paper: #F3F4F1;
  --paper-2: #E7EAE6;
  --ink: #0B1A24;        /* text on light, 16.0 */
  --slate: #4F5D66;      /* secondary on light, 6.2 / 5.6 */
  --lime: #F2E35B;       /* the highlighter yellow: never text on light (1.20) */
  --lime-2: #F7EC86;
  --moss: #6E5F00;       /* accent on light (olive gold), 5.8 / 5.3 */
  --rule-dark: rgba(159, 176, 184, 0.18);
  --rule: #D6DAD6;

  --font: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --gutter: 50px;
  --measure: 68ch;
  --section: 120px;
  --nav-h: 76px;
  --r: 2px;              /* advisory corners */
  --r-pill: 999px;

  --t-hero: clamp(3rem, 0.9rem + 6.6vw, 6.5rem);
  --t-h2: clamp(2.25rem, 1.3rem + 2.8vw, 3.75rem);
  --t-lead: clamp(1.125rem, 1rem + 0.3vw, 1.25rem);

  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-enter: 800ms;
  --rise: 40px;
  --stagger: 200ms;
  --ease-hover: cubic-bezier(0.44, 0, 0.56, 1);
  --dur-hover: 300ms;
  --edge-fade: linear-gradient(to right, transparent 0%, #000 12.5%, #000 87.5%, transparent 100%);
}
@media (max-width: 1024px) { :root { --section: 96px; --gutter: 32px; } }
@media (max-width: 640px) { :root { --section: 72px; --gutter: 20px; --nav-h: 64px; } }

/* 2. Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 24px); overflow-x: clip; }
body {
  margin: 0; overflow-x: clip; background: var(--paper); color: var(--ink);
  font: 400 1.0625rem/1.65 var(--font); -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 400; text-wrap: balance; }
h1, h2 { word-spacing: 0.04em; }
h2 { font-size: var(--t-h2); line-height: 1.04; letter-spacing: -0.05em; }
h3 { font-size: clamp(1.3125rem, 1.2rem + 0.3vw, 1.5rem); line-height: 1.25; letter-spacing: -0.02em; font-weight: 500; }
p { margin: 0; max-width: var(--measure); }
ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }
figure, blockquote { margin: 0; }
.container { width: 100%; padding-inline: var(--gutter); }
.section { position: relative; padding-block: var(--section); }
.lead { font-size: var(--t-lead); line-height: 1.55; color: var(--slate); letter-spacing: -0.01em; }
.on-dark { color: var(--foam); }
.on-dark .lead { color: var(--mist); }
.tnum { }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 18px; border-radius: var(--r-pill); background: var(--lime); color: var(--abyss); font-weight: 500; text-decoration: none; }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--moss); outline-offset: 3px; }
.on-dark :focus-visible { outline-color: var(--lime); }

.ground-abyss { background: var(--abyss); color: var(--foam); }
.ground-paper2 { background: var(--paper-2); }
/* grain: plain overlay, no blend mode (a blended layer over moving content drops frames) */
.grain { isolation: isolate; }
.grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; transform: translateZ(0);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='2' stitchTiles='stitch' result='n'/%3E%3CfeColorMatrix in='n' type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 240px 240px; opacity: 0.06;
}

/* 3. Eyebrow, chips, highlighter ------------------------------------------ */
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.6em; margin: 0;
  font: 500 12px/1.2 var(--font); letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate);
}
.eyebrow::before { content: "//"; letter-spacing: 0; color: var(--moss); }
.on-dark .eyebrow { color: var(--mist); }
.on-dark .eyebrow::before { color: var(--lime); }
.chip {
  display: inline-flex; align-items: center; height: 30px; padding: 0 13px; border-radius: var(--r-pill);
  border: 1px solid var(--rule); font: 500 13px/1 var(--font); color: var(--slate); background: transparent;
}
.on-dark .chip { border-color: var(--rule-dark); color: var(--mist); }
.chip--dark { background: rgba(var(--abyss-rgb), 0.88); border: 0; color: var(--lime); }

/* The highlighter: a lime band behind ink text, on light and dark alike. Unlit, the
   text still reads (ink on paper, or ink-on-lime once drawn), so a missed observer
   never hides anything. On dark the unlit text is foam until the band arrives. */
.hl {
  background: linear-gradient(var(--lime), var(--lime)) no-repeat 0 55% / 100% 80%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  padding: 0 0.06em; margin: 0 -0.06em; color: var(--ink);
}
@media (prefers-reduced-motion: no-preference) {
  html.js .hl { transition: background-size 900ms var(--ease-enter); }
  html.js .hl:not(.is-lit) { background-size: 0% 80%; }
  html.js :is(.on-dark, .hero, .close, .site-footer) .hl:not(.is-lit) { color: var(--foam); }
  html.js .hl { transition: background-size 900ms var(--ease-enter), color 300ms var(--ease-hover) 250ms; }
}

/* 4. Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; cursor: pointer;
  font: 500 16px/1 var(--font); color: var(--foam); text-decoration: none;
}
.btn__label, .btn__disc { background: var(--abyss); transition: background-color var(--dur-hover) var(--ease-hover); }
.btn__label { display: inline-flex; align-items: center; height: 52px; padding: 0 26px; border-radius: var(--r-pill); white-space: nowrap; }
.btn__disc { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 50%; }
.btn__disc svg { width: 16px; height: 16px; transition: transform var(--dur-hover) var(--ease-hover); }
.btn:hover .btn__label, .btn:hover .btn__disc { background: var(--deep-2); }
.btn:hover .btn__disc svg { transform: rotate(-45deg); }
.btn--lime { color: var(--abyss); }
.btn--lime .btn__label, .btn--lime .btn__disc { background: var(--lime); }
.btn--lime:hover .btn__label, .btn--lime:hover .btn__disc { background: var(--lime-2); }
.btn--sm .btn__label { height: 44px; padding: 0 20px; font-size: 15px; }
.btn--sm .btn__disc { width: 44px; height: 44px; }

.pill-link {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: 14px; height: 48px; padding: 0 5px 0 22px;
  border: 1px solid currentColor; border-radius: var(--r-pill);
  font: 500 15px/1 var(--font); color: var(--ink); text-decoration: none; white-space: nowrap;
  transition: color var(--dur-hover) var(--ease-hover);
}
.pill-link::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink);
  transform: scaleX(0); transform-origin: left; transition: transform var(--dur-hover) var(--ease-hover);
}
.pill-link__disc { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid currentColor; }
.pill-link__disc svg { width: 14px; height: 14px; transition: transform var(--dur-hover) var(--ease-hover); }
.pill-link:hover { color: var(--paper); }
.pill-link:hover::before { transform: none; }
.pill-link:hover .pill-link__disc svg { transform: rotate(-45deg); }
.on-dark .pill-link { color: var(--foam); }
.on-dark .pill-link::before { background: var(--foam); }
.on-dark .pill-link:hover { color: var(--abyss); }

/* 5. Header --------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50; height: var(--nav-h);
  background: var(--abyss); color: var(--foam); border-bottom: 1px solid var(--rule-dark);
}
.site-header__bar { height: 100%; display: flex; align-items: center; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font: 500 24px/1 var(--font); letter-spacing: -0.04em; color: var(--foam); text-decoration: none; }
.brand__mark { width: 22px; height: 22px; }
.site-nav { margin-left: auto; }
.nav-list { display: flex; gap: 4px; }
.nav-link {
  position: relative; display: inline-flex; align-items: center; height: 40px; padding: 0 14px;
  font: 500 15px/1 var(--font); color: var(--foam); text-decoration: none; border-radius: var(--r-pill);
  transition: background-color var(--dur-hover) var(--ease-hover);
}
.nav-link:hover { background: var(--deep); }
.nav-link[aria-current="page"]::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; background: var(--lime); }
.bar-cta .short { display: none; }
.nav-toggle {
  display: none; align-items: center; gap: 10px; height: 44px; padding: 0 16px; border: 1px solid var(--rule-dark);
  border-radius: var(--r-pill); background: none; color: var(--foam); font: 500 15px/1 var(--font); cursor: pointer;
}
.nav-toggle svg { width: 18px; height: 12px; }
@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; order: 3; }
  .bar-cta { margin-left: auto; }
  .site-nav {
    position: fixed; left: 0; right: 0; top: var(--nav-h); bottom: 0; z-index: 49; margin: 0;
    padding: 24px var(--gutter); background: var(--abyss); display: none;
  }
  .nav-open .site-nav { display: block; }
  .nav-list { flex-direction: column; gap: 0; }
  .nav-link { height: 64px; padding: 0; font-size: 28px; letter-spacing: -0.03em; border-radius: 0; border-bottom: 1px solid var(--rule-dark); width: 100%; }
  .nav-link:hover { background: none; }
  .nav-link[aria-current="page"]::after { left: 0; right: auto; width: 40px; bottom: 12px; }
}
@media (max-width: 480px) {
  .bar-cta .long { display: none; }
  .bar-cta .short { display: inline; }
  .nav-toggle span { display: none; }
  .site-header__bar { gap: 10px; }
}

/* 6. Hero load sequence ---------------------------------------------------- */
@keyframes load-rise { from { opacity: 0; transform: translateY(var(--rise)); } }
@keyframes load-rise-lg { from { opacity: 0; transform: translateY(80px); } }
@keyframes load-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .load { animation: load-rise var(--dur-enter) var(--ease-enter) both; }
  .load--lg { animation-name: load-rise-lg; }
  .load--fade { animation: load-fade 1400ms var(--ease-enter) both; }
  .load-2 { animation-delay: 200ms; } .load-3 { animation-delay: 400ms; } .load-4 { animation-delay: 600ms; }
  html.js [data-reveal] { transition: opacity var(--dur-enter) var(--ease-enter), transform var(--dur-enter) var(--ease-enter); }
  html.js [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(var(--rise)); }
  html.js [data-reveal="2"] { transition-delay: 200ms; }
  html.js [data-reveal="3"] { transition-delay: 400ms; }
  html.js [data-reveal="4"] { transition-delay: 600ms; }
}

/* 7. Structured hero (Pactum) --------------------------------------------- */
.hero { position: relative; isolation: isolate; overflow: clip; background: var(--abyss); color: var(--foam); }
.hero__photo { position: absolute; top: 0; bottom: 0; right: 0; width: 66%; z-index: -2; }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 38% 40%; }
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(var(--abyss-rgb), 1) 0%, rgba(var(--abyss-rgb), 1) 34%, rgba(var(--abyss-rgb), 0.55) 50%, rgba(var(--abyss-rgb), 0) 68%),
    linear-gradient(rgba(var(--abyss-rgb), 0.85) 0%, rgba(var(--abyss-rgb), 0) 42%, rgba(var(--abyss-rgb), 0) 70%, rgba(var(--abyss-rgb), 0.7) 100%);
}
.hero__top { border-bottom: 1px solid var(--rule-dark); padding-block: clamp(40px, 5vw, 80px) clamp(28px, 3vw, 44px); }
.hero__title { margin-top: 22px; font-size: var(--t-hero); line-height: 0.98; letter-spacing: -0.045em; max-width: 13ch; }
.hero__lower { display: grid; grid-template-columns: 64px minmax(0, 6fr) minmax(0, 5fr); }
.hero__cue {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 14px; padding-bottom: 40px;
  border-right: 1px solid var(--rule-dark); font: 500 11px/1 var(--font); letter-spacing: 0.16em; text-transform: uppercase; color: var(--mist);
}
.hero__cue span { writing-mode: vertical-rl; transform: rotate(180deg); }
.hero__cue::after { content: ""; width: 1px; height: 64px; background: linear-gradient(var(--lime), transparent); }
.hero__band { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding: 44px 48px 40px; }
.hero__band .lead { max-width: 40ch; color: var(--mist); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.hero__meta { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--rule-dark); font-size: 15px; color: var(--mist); }
.hero__meta a { text-decoration: none; }
.hero__meta a:hover { color: var(--foam); }
.dot { display: inline-flex; align-items: center; gap: 10px; }
.dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); }
.hero__side { display: flex; align-items: flex-end; justify-content: flex-end; padding: 40px 0 40px 24px; }

/* hero content card: what a first review turned up */
.found {
  width: min(100%, 420px); padding: 24px 26px 26px; border-radius: var(--r);
  background: var(--paper); color: var(--ink); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6);
}
.found__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.found__head .chip { height: 26px; font-size: 12px; }
.found__rows { border-top: 1px solid var(--rule); }
.found__row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--rule); font-size: 15px; }
.found__row span:first-child { color: var(--slate); }
.found__row .hl { font: 500 17px/1.2 var(--font); letter-spacing: -0.02em; }
.found__total { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding-top: 16px; }
.found__total span { font-size: 14px; color: var(--slate); max-width: 14ch; line-height: 1.35; }
.found__total strong { font: 500 clamp(2.75rem, 2rem + 1.6vw, 3.5rem)/0.9 var(--font); letter-spacing: -0.05em; }
.plinth { position: relative; }
.plinth::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 6px; background: var(--lime); }
.plinth--ink::after { background: var(--ink); }
@media (max-width: 1100px) {
  .hero__lower { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hero__cue { display: none; }
  .hero__band { padding-left: 0; }
  .hero__photo { width: 100%; }
}
@media (max-width: 800px) {
  .hero__lower { grid-template-columns: 1fr; }
  .hero__band { padding: 32px 0; }
  .hero__side { justify-content: flex-start; padding: 0 0 48px; }
  .hero__scrim { background: linear-gradient(rgba(var(--abyss-rgb), 0.92) 0%, rgba(var(--abyss-rgb), 0.78) 40%, rgba(var(--abyss-rgb), 0.9) 100%); }
}

/* 8. Photo hero (Approach) ------------------------------------------------- */
.photo-hero { position: relative; isolation: isolate; overflow: clip; min-height: calc(100svh - var(--nav-h)); display: grid; align-items: end; background: var(--abyss); color: var(--foam); }
.photo-hero__img { position: absolute; inset: 0; z-index: -2; overflow: clip; }
.photo-hero__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.photo-hero__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgba(var(--abyss-rgb), 0.35) 0%, rgba(var(--abyss-rgb), 0.1) 30%, rgba(var(--abyss-rgb), 0.78) 62%, rgba(var(--abyss-rgb), 0.95) 100%); }
.photo-hero__copy { display: grid; gap: 22px; justify-items: start; padding-block: 120px 72px; }
.photo-hero h1 { font-size: var(--t-hero); line-height: 0.98; letter-spacing: -0.045em; max-width: 12ch; }
.photo-hero .lead { color: rgba(231, 236, 239, 0.86); max-width: 44ch; }
@keyframes pull-photo { from { transform: scale(1.2); } to { transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .photo-hero__img img { animation: pull-photo linear both; animation-timeline: scroll(root block); animation-range: 0 100vh; }
  }
}

/* 9. Scroll-scrubbed statement (Pactum) ------------------------------------ */
.statement-sec { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 40px; align-items: start; }
.statement-sec > .eyebrow { margin-top: 1em; }
.statement { font: 400 clamp(1.875rem, 1rem + 2.8vw, 3.75rem)/1.12 var(--font); letter-spacing: -0.045em; max-width: 24ch; }
@keyframes scrub { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .statement__scrub {
      color: rgba(11, 26, 36, 0.18);
      background: linear-gradient(var(--ink), var(--ink)) no-repeat 0 0 / 0% 100%;
      -webkit-background-clip: text; background-clip: text;
      animation: scrub linear both; animation-timeline: view(); animation-range: cover 18% cover 52%;
    }
  }
}
@media (max-width: 900px) { .statement-sec { grid-template-columns: 1fr; gap: 20px; } }

/* 10. Section heads --------------------------------------------------------- */
.head-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr); align-items: end; margin-bottom: clamp(40px, 5vw, 64px); }
.head-grid__title { display: grid; gap: 20px; justify-items: start; }
.head-grid__aside { grid-column: 3; display: grid; gap: 20px; justify-items: start; }
.head-grid__aside p:not(.eyebrow) { color: var(--slate); }
.on-dark .head-grid__aside p:not(.eyebrow) { color: var(--mist); }
@media (max-width: 900px) { .head-grid { grid-template-columns: 1fr; gap: 20px; } .head-grid__aside { grid-column: auto; } }

/* 11. Ruled service grid with hover fill (Pactum) --------------------------- */
.svc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--rule); border-bottom: 0; }
.svc {
  display: flex; flex-direction: column; justify-content: space-between; gap: 56px; min-height: 380px; padding: 28px;
  border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  color: var(--ink); text-decoration: none; transition: background-color var(--dur-hover) var(--ease-hover);
}
.svc:last-child { border-right: 0; }
.svc__tile { display: grid; place-items: center; width: 64px; height: 64px; border-radius: var(--r); background: var(--abyss); }
.svc__tile svg { width: 30px; height: 30px; stroke: var(--lime); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.svc__bottom { display: grid; gap: 10px; }
.svc__bottom p { color: var(--slate); font-size: 16px; line-height: 1.55; }
.svc__more {
  justify-self: start; display: inline-flex; align-items: center; gap: 10px; height: 36px; margin-top: 8px; padding: 0 4px 0 16px;
  border: 1px solid var(--ink); border-radius: var(--r-pill); font: 500 14px/1 var(--font);
  opacity: 0; transform: translateY(8px); transition: opacity var(--dur-hover) var(--ease-hover), transform var(--dur-hover) var(--ease-hover);
}
.svc__more span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--paper); }
.svc__more svg { width: 12px; height: 12px; }
.svc:hover, .svc:focus-visible { background: var(--paper-2); }
.svc:hover .svc__more, .svc:focus-visible .svc__more { opacity: 1; transform: none; }
@media (hover: none) { .svc__more { opacity: 1; transform: none; } }
.svc-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 24px 28px; border: 1px solid var(--rule); border-top: 0; background: var(--paper);
}
.svc-foot p { font: 400 clamp(1.25rem, 1rem + 0.6vw, 1.625rem)/1.3 var(--font); letter-spacing: -0.03em; }
@media (max-width: 1100px) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .svc:nth-child(2) { border-right: 0; } }
@media (max-width: 560px) { .svc-grid { grid-template-columns: 1fr; } .svc { border-right: 0; min-height: 280px; } }

/* 12. Stat cells as a bar chart (Pactum) ------------------------------------ */
.bars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule-dark); border-bottom: 1px solid var(--rule-dark); }
.bar {
  --v: 0.5;
  position: relative; display: grid; grid-template-rows: auto 1fr; height: clamp(380px, 46vw, 520px);
  border-left: 1px solid var(--rule-dark);
}
.bar:first-child { border-left: 0; }
/* heights: each share of $9,400 on one scale (tallest = 86%), so the chart matches its numbers */
.bar:nth-child(1) { --v: 0.860; }
.bar:nth-child(2) { --v: 0.379; }
.bar:nth-child(3) { --v: 0.411; }
.bar__label { padding: 22px 24px 0; font-size: 15px; color: var(--mist); }
.bar__label strong { display: block; color: var(--foam); font-weight: 500; font-size: 17px; }
.bar__fill {
  align-self: end; height: calc(var(--v) * 100%); display: grid; align-content: start; gap: 6px;
  padding: 16px 24px 24px; border-top: 6px solid var(--lime); background: var(--deep);
  transform-origin: bottom;
}
.bar__num { font: 500 clamp(2.25rem, 1.6rem + 1.6vw, 3.5rem)/1 var(--font); letter-spacing: -0.05em; color: var(--foam); }
.bar__pct { font-size: 14px; color: var(--lime); }
.bars-foot { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-top: 22px; font-size: 14px; color: var(--mist); }
/* Rob 2026-09-19: triggered, not scroll-linked. Once the chart is in view each bar
   rises from its base (a clip reveal, so the figures are never squashed) while its
   number counts up in main.js. Without JS or with reduced motion: drawn in full. */
@media (prefers-reduced-motion: no-preference) {
  html.js .bar__fill { transition: clip-path 1400ms var(--ease-enter); }
  html.js .bars:not(.is-in) .bar__fill { clip-path: inset(100% 0 0 0); }
  html.js .bars.is-in .bar__fill { clip-path: inset(0); }
  html.js .bar:nth-child(2) .bar__fill { transition-delay: 250ms; }
  html.js .bar:nth-child(3) .bar__fill { transition-delay: 500ms; }
}
@media (max-width: 720px) {
  .bars { grid-template-columns: 1fr; }
  .bar { height: auto; grid-template-rows: auto auto; border-left: 0; border-top: 1px solid var(--rule-dark); }
  .bar__fill { height: auto; margin-top: 16px; }
}

/* 13. Mixed-width client grid (Skala) --------------------------------------- */
.mixed { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.mixed > * { border-radius: var(--r); min-height: 340px; }
.mixed__a { grid-column: span 5; } .mixed__b { grid-column: span 7; }
.mixed__c { grid-column: span 7; } .mixed__d { grid-column: span 5; }
.quote {
  display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding: 32px;
  background: rgba(11, 26, 36, 0.05);
}
.quote blockquote p { font: 400 clamp(1.375rem, 1.1rem + 0.8vw, 1.875rem)/1.28 var(--font); letter-spacing: -0.03em; max-width: 30ch; }
.quote figcaption { display: grid; gap: 2px; padding-top: 16px; border-top: 1px solid var(--rule); font-size: 15px; color: var(--slate); }
.quote figcaption strong { color: var(--ink); font-weight: 500; }
.img-cell { position: relative; overflow: clip; }
.img-cell img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 35%; }
.img-cell .chip { position: absolute; left: 20px; bottom: 20px; }
.fig-cell { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: 32px; background: var(--abyss); color: var(--foam); }
.fig-cell strong { font: 400 clamp(3.5rem, 2rem + 4vw, 6.5rem)/0.9 var(--font); letter-spacing: -0.04em; }
.fig-cell p:not(.eyebrow) { color: var(--mist); }
@media (max-width: 900px) { .mixed > * { grid-column: 1 / -1 !important; min-height: 260px; } }

/* 14. Photo band with lime panel (Pactum pull-back) ------------------------- */
.band { position: relative; }
.band__frame { position: relative; aspect-ratio: 16 / 7; overflow: clip; border-radius: var(--r); background: var(--deep); }
.band__frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.band__panel {
  position: absolute; right: clamp(16px, 3vw, 48px); bottom: calc(-1 * clamp(24px, 3vw, 48px)); width: min(420px, 80%);
  padding: 36px 36px 40px; border-radius: var(--r); background: var(--lime); color: var(--abyss);
}
.band__panel p:not(.eyebrow) { font: 400 clamp(1.5rem, 1.1rem + 1vw, 2.125rem)/1.15 var(--font); letter-spacing: -0.04em; }
.band__panel .eyebrow { color: var(--abyss); margin-bottom: 18px; }
.band__panel .eyebrow::before { color: var(--abyss); }
@keyframes pull { from { transform: scale(1.2); } to { transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .pull img { animation: pull linear both; animation-timeline: view(); animation-range: entry 0% cover 55%; }
  }
}
@media (max-width: 720px) {
  .band__frame { aspect-ratio: 4 / 3; }
  .band__panel { position: relative; right: auto; bottom: auto; width: auto; margin-top: -40px; margin-inline: 16px; }
}

/* 15. Close band (pull-back type) ------------------------------------------- */
.close { position: relative; overflow: clip; background: var(--abyss); color: var(--foam); }
.close__inner { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 40px; align-items: end; padding-block: clamp(96px, 12vw, 180px); }
.close h2 { font-size: clamp(3rem, 1rem + 6vw, 7rem); line-height: 0.98; letter-spacing: -0.045em; transform-origin: 0 100%; max-width: 12ch; }
.close__side { display: grid; gap: 20px; justify-items: start; padding-bottom: 12px; }
.close__side p:not(.eyebrow) { color: var(--mist); }
@keyframes pull-type { from { transform: scale(2); } to { transform: none; } }
@keyframes pull-type-sm { from { transform: scale(1.4); } to { transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .close h2 { animation: pull-type linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
  }
}
@media (max-width: 640px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) { .close h2 { animation-name: pull-type-sm; } }
}
@media (max-width: 800px) { .close__inner { grid-template-columns: 1fr; } }

/* 16. Footer: compact and ruled (Rob 2026-09-19: an advisory firm doesn't suit a
   display-scale wordmark). Brand row, four-column ruled grid, legal line. */
.site-footer { position: relative; background: var(--abyss); color: var(--foam); border-top: 1px solid var(--rule-dark); }
.footer-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px 40px; padding-block: 52px 44px; border-bottom: 1px solid var(--rule-dark); }
.footer-brand { display: grid; gap: 12px; }
.footer-brand .brand { font-size: 30px; }
.footer-brand .brand__mark { width: 26px; height: 26px; }
.footer-brand p { color: var(--mist); font-size: 16px; }
.footer-head__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.footer-head__cta .dot { font-size: 15px; color: var(--mist); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 2.5fr) minmax(0, 3fr) minmax(0, 3fr); border-bottom: 1px solid var(--rule-dark); }
.footer-grid > * { padding: 32px 24px 36px; border-left: 1px solid var(--rule-dark); }
.footer-grid > :first-child { border-left: 0; padding-left: 0; }
.footer-grid p { color: var(--mist); font-size: 15px; max-width: 38ch; }
.footer-heading { margin-bottom: 16px; font: 500 12px/1.2 var(--font); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mist); }
.footer-links { display: grid; gap: 8px; }
.footer-links a { color: var(--foam); text-decoration: none; font-size: 15px; }
.footer-links a:hover { color: var(--lime); }
.footer-contact { display: grid; gap: 12px; }
.footer-contact div { display: grid; gap: 2px; }
.footer-contact dt { font-size: 13px; color: var(--mist); }
.footer-contact dd { font-size: 15px; color: var(--foam); }
.footer-contact a { text-decoration: none; }
.footer-contact a:hover { color: var(--lime); }
.contact-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--rule-dark); }
.contact-row > div { display: grid; gap: 6px; align-content: start; padding: 26px 24px 28px; border-left: 1px solid var(--rule-dark); }
.contact-row > div:first-child { border-left: 0; padding-left: 0; }
.contact-row dt { font: 500 12px/1.2 var(--font); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mist); }
.contact-row dd { font-size: 16px; color: var(--foam); }
.contact-row a { text-decoration: none; }
.contact-row a:hover { color: var(--lime); }
.contact-row--light { border-block: 1px solid var(--rule); }
.contact-row--light > div { border-left-color: var(--rule); }
.contact-row--light dt { color: var(--slate); }
.contact-row--light dd { color: var(--ink); font-size: 19px; }
.contact-row--light a:hover { color: var(--moss); }
.legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-block: 22px 30px; font-size: 13px; color: var(--mist); }
.legal p { max-width: none; }
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > :first-child, .footer-grid > :last-child { grid-column: 1 / -1; padding-right: 0; border-left: 0; padding-left: 0; }
  .footer-grid > :first-child { border-bottom: 1px solid var(--rule-dark); }
  .footer-grid > :last-child { border-top: 1px solid var(--rule-dark); }
  .footer-grid > :nth-child(2) { border-left: 0; padding-left: 0; }
  .contact-row { grid-template-columns: 1fr 1fr; }
  .contact-row > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .contact-row > div:nth-child(n+3) { border-top: 1px solid var(--rule-dark); }
  .contact-row--light > div:nth-child(n+3) { border-top-color: var(--rule); }
}
@media (max-width: 480px) {
  .contact-row { grid-template-columns: 1fr; }
  .contact-row > div, .contact-row > div:nth-child(n) { border-left: 0; padding-left: 0; }
  .contact-row > div + div { border-top: 1px solid var(--rule-dark); }
  .contact-row--light > div + div { border-top-color: var(--rule); }
}

/* 17. Services: hover accordion with image swap (Norfolk) ------------------- */
.acc { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.acc__media { position: sticky; top: calc(var(--nav-h) + 32px); aspect-ratio: 4 / 5; overflow: clip; border-radius: var(--r); background: var(--deep); }
.acc__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; opacity: 0; transition: opacity 600ms var(--ease-hover); }
.acc__media img.is-shown { opacity: 1; }
.acc__list { border-top: 1px solid var(--rule); }
.acc__item { border-bottom: 1px solid var(--rule); }
.acc__btn {
  display: grid; grid-template-columns: 64px 1fr 40px; align-items: center; gap: 12px; width: 100%; padding: 28px 0;
  border: 0; background: none; text-align: left; cursor: pointer; color: rgba(11, 26, 36, 0.58);
  font: 400 clamp(1.75rem, 1.2rem + 1.4vw, 2.75rem)/1.1 var(--font); letter-spacing: -0.045em;
  transition: color var(--dur-hover) var(--ease-hover);
}
.acc__num { font: 500 14px/1 var(--font); letter-spacing: 0.04em; color: var(--moss); }
.acc__icon { width: 40px; height: 40px; border-radius: 50%; border: 1px solid currentColor; display: grid; place-items: center; transition: transform var(--dur-hover) var(--ease-hover); }
.acc__icon svg { width: 14px; height: 14px; }
.acc__btn:hover, .acc__item.is-open .acc__btn { color: var(--ink); }
.acc__item.is-open .acc__icon { transform: rotate(45deg); background: var(--lime); border-color: var(--lime); color: var(--abyss); }
.acc__panel { display: grid; gap: 20px; justify-items: start; padding: 0 0 36px 76px; }
.acc__panel p { color: var(--slate); font-size: 18px; line-height: 1.6; max-width: 46ch; }
.acc__chips { display: flex; flex-wrap: wrap; gap: 8px; }
html.js .acc__item:not(.is-open) .acc__panel { display: none; }
@media (max-width: 900px) {
  .acc { grid-template-columns: 1fr; }
  .acc__media { position: relative; top: auto; aspect-ratio: 16 / 10; }
  .acc__panel { padding-left: 0; }
  .acc__btn { grid-template-columns: 44px 1fr 40px; }
}

/* 18. Services hero card: the refusal ---------------------------------------- */
.refuse { width: min(100%, 440px); padding: 26px 28px 30px; border-radius: var(--r); background: var(--deep); border: 1px solid var(--rule-dark); }
.refuse p:not(.eyebrow) { color: var(--foam); font: 400 clamp(1.375rem, 1.1rem + 0.6vw, 1.75rem)/1.25 var(--font); letter-spacing: -0.03em; margin-top: 16px; }
.strike { position: relative; color: var(--mist); }
.strike::after {
  content: ""; position: absolute; left: -2px; right: -2px; top: 52%; height: 3px; background: var(--lime);
  transform-origin: left;
}
@keyframes strike-in { from { transform: scaleX(0); } }
@media (prefers-reduced-motion: no-preference) { .strike::after { animation: strike-in 900ms var(--ease-enter) 1200ms both; } }
.hero--plain .hero__photo, .hero--plain .hero__scrim { display: none; }

/* 19. Approach: process rows stacked flush (Pactum) -------------------------- */
.rows { border-bottom: 1px solid var(--rule); }
.row {
  position: sticky; top: var(--nav-h);
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 64px); align-items: center;
  min-height: calc(100svh - var(--nav-h)); padding-block: 48px; background: var(--paper); border-top: 1px solid var(--rule);
}
.row:nth-child(even) { background: var(--paper-2); }
.row__num { align-self: end; font: 400 clamp(7rem, 4rem + 9vw, 14rem)/0.78 var(--font); letter-spacing: -0.05em; color: rgba(110, 95, 0, 0.16); }
.row__body { display: grid; gap: 18px; }
.row__body h2 { font-size: clamp(2rem, 1.3rem + 2vw, 3.25rem); }
.row__body > p:not(.eyebrow) { color: var(--slate); font-size: var(--t-lead); line-height: 1.55; max-width: 34ch; }
.checks { display: grid; margin-top: 6px; border-top: 1px solid var(--rule); max-width: 40ch; }
.checks li { display: grid; grid-template-columns: 26px 1fr; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 15px; }
.checks svg { width: 18px; height: 18px; margin-top: 3px; stroke: var(--moss); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.row__media { position: relative; aspect-ratio: 16 / 11; overflow: clip; border-radius: var(--r); background: var(--deep); }
.row__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
@media (max-width: 1000px) {
  .row { position: relative; top: auto; min-height: 0; grid-template-columns: 1fr; padding-block: 56px; }
  .row__num { font-size: 6rem; align-self: start; }
}

/* 20. About: alternating split scroll (Pactum) ------------------------------ */
.split { display: grid; grid-template-columns: 1fr 1fr; }
.split__col { position: relative; }
.split__screen { height: calc(100svh - var(--nav-h)); min-height: 560px; }
.split__text { display: grid; align-content: center; gap: 24px; justify-items: start; padding: 48px var(--gutter); background: var(--paper); }
.split__text h1 { font-size: clamp(3rem, 1.2rem + 4.8vw, 6rem); line-height: 0.98; letter-spacing: -0.045em; max-width: 9ch; }
.facts3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; max-width: 560px; border-top: 1px solid var(--rule); }
.facts3 > div { padding: 18px 16px 0 0; }
.facts3 strong { display: block; font: 400 clamp(2rem, 1.4rem + 1.4vw, 3rem)/1 var(--font); letter-spacing: -0.05em; }
.facts3 span { font-size: 14px; color: var(--slate); }
.split__photo, .split__portrait { position: relative; overflow: clip; background: var(--deep); }
.split__photo img, .split__portrait img { width: 100%; height: 100%; object-fit: cover; }
.split__photo img { object-position: 40% 40%; }
.split__portrait img { object-position: 50% 20%; }
.split__statement { display: grid; align-content: center; gap: 24px; padding: 48px clamp(32px, 5vw, 88px); background: var(--abyss); color: var(--foam); }
.split__statement .lead { font-size: 18px; color: var(--mist); max-width: 40ch; }
.split__statement p:not(.eyebrow):not(.lead) { font: 400 clamp(1.75rem, 1rem + 2vw, 3rem)/1.16 var(--font); letter-spacing: -0.045em; max-width: 20ch; }
@media (min-width: 901px) {
  .split__left .split__text { position: sticky; top: var(--nav-h); }
  .split__left .split__spacer { height: calc(100svh - var(--nav-h)); }
  .split__left .split__portrait { position: relative; z-index: 1; }
  .split__right .split__statement { position: sticky; top: var(--nav-h); }
  .split__right .split__tail { height: calc(100svh - var(--nav-h)); }
}
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split__spacer, .split__tail { display: none; }
  .split__screen { height: auto; min-height: 0; }
  .split__photo, .split__portrait { aspect-ratio: 4 / 5; }
  .split__right { display: contents; }
  .split__left, .split__right { display: contents; }
  .split__text { order: 1; } .split__photo { order: 2; } .split__statement { order: 3; } .split__portrait { order: 4; }
}
.bio { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 40px; }
.bio__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; color: var(--slate); }
.bio__cols p + p { margin-top: 0; }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 56px; border-top: 1px solid var(--rule); }
.facts > div { display: grid; gap: 6px; padding: 22px 20px 26px 0; border-right: 1px solid var(--rule); }
.facts > div + div { padding-left: 20px; }
.facts > div:last-child { border-right: 0; }
.facts dt { font: 500 12px/1.2 var(--font); letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate); }
.facts dd { font-size: 18px; }
@media (max-width: 900px) {
  .bio { grid-template-columns: 1fr; gap: 20px; }
  .bio__cols { grid-template-columns: 1fr; gap: 16px; }
  .facts { grid-template-columns: 1fr 1fr; }
  .facts > div:nth-child(2) { border-right: 0; }
  .facts > div:nth-child(3) { padding-left: 0; }
}

/* 21. Contact ---------------------------------------------------------------- */
.book { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 5vw, 96px); align-items: start; }
.book__main { display: grid; gap: 22px; justify-items: start; }
.book__main h1 { font-size: clamp(2.75rem, 1.2rem + 4.4vw, 5.75rem); line-height: 1; letter-spacing: -0.04em; max-width: 12ch; }
.book__form { width: 100%; }
.form { display: grid; gap: 20px; width: 100%; max-width: 660px; margin-top: 12px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { display: grid; gap: 8px; }
.field__label { font: 500 14px/1.2 var(--font); }
.field__label span { font-weight: 400; color: var(--slate); }
.field__control {
  width: 100%; min-height: 54px; padding: 14px 16px; border: 1px solid var(--rule); border-radius: var(--r);
  background: #fff; color: var(--ink); font: 400 17px/1.4 var(--font);
  transition: border-color var(--dur-hover) var(--ease-hover);
}
textarea.field__control { min-height: 140px; resize: vertical; }
.field__control:hover { border-color: var(--slate); }
.field__control:focus { outline: 2px solid var(--moss); outline-offset: 1px; border-color: var(--moss); }
.field__error { display: none; font-size: 14px; color: #A3231A; }
.field.is-invalid .field__control { border-color: #A3231A; }
.field.is-invalid .field__error { display: block; }
.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.form__note { font-size: 15px; color: var(--slate); }
.form__done { display: grid; gap: 12px; padding: 32px; border-radius: var(--r); background: var(--paper-2); max-width: 660px; }
.form__done h2 { font-size: 30px; }
.contact-panel { display: grid; gap: 26px; padding: 36px; border-radius: var(--r); background: var(--abyss); color: var(--foam); }
.contact-panel p:not(.eyebrow) { color: var(--mist); }
.contact-panel dl { display: grid; border-top: 1px solid var(--rule-dark); }
.contact-panel dl > div { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--rule-dark); }
/* the address is one long unbreakable token: without this it sets the width of
   the whole panel and pushes it off the side of a phone */
.contact-panel dd { overflow-wrap: anywhere; }
.contact-panel dt { font: 500 12px/1.9 var(--font); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mist); }
.contact-panel a { text-decoration: none; }
.contact-panel a:hover { color: var(--lime); }
/* minmax(0, 1fr), not 1fr: a 1fr track carries an automatic minimum of its
   item’s min-content, and the form’s inputs pushed that to 432px inside a
   350px column. The overflow was invisible because body clips the x axis, so
   the form was simply sliced off the right of the phone. */
@media (max-width: 900px) { .book { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .form__row { grid-template-columns: 1fr; } }
/* on a phone the label sits above its value, which gives the email the full
   width of the panel rather than what is left beside a 90px column */
@media (max-width: 560px) { .contact-panel dl > div { grid-template-columns: minmax(0, 1fr); gap: 4px; } }

/* 22. Reduced motion floor ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; } }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }