/* Riverforge homepage v4, version B
   Same running order as A, its own look: a quiet, cool frame where the work brings the colour.
   Wide Archivo display type, copper only for the logo and small accents, no column guides.
   Base styles are a plain stacked layout; scroll-locked scenes switch on with html.fx. */

/* Archivo, self-hosted (Google Fonts files, OFL). One variable font covers every weight and width.
   Trimmed to the ranges the site uses (weight 400-900, width 100-125%) with fontTools' instancer.
   The latin file is preloaded in each page's <head> by tools/site_head.py. */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 100% 125%;
  font-display: swap;
  src: url("../fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 100% 125%;
  font-display: swap;
  src: url("../fonts/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --paper: #f3f4f6;
  --white: #ffffff;
  --ink: #0e1116;
  --ink-2: #1a1f27;
  --muted: #59606b;
  --muted-dark: #a9afb8;
  --line: rgba(14, 17, 22, .12);
  --line-dark: rgba(255, 255, 255, .13);
  --copper: #c2602b;
  --gutter: clamp(20px, 4.4vw, 76px);
  --header: 72px;
  --hdr-bg: rgba(243, 244, 246, .86);
  --hdr-fg: var(--ink);
  --hdr-solid: #ffffff;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-stretch: 100%;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
body.menu-open { overflow: hidden; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2 { font-stretch: 125%; font-weight: 720; line-height: .98; letter-spacing: -.028em; }
h3 { font-stretch: 112%; font-weight: 660; letter-spacing: -.02em; line-height: 1.05; }
main { overflow: clip; }
button { font: inherit; color: inherit; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 200; background: var(--white); color: var(--ink); padding: 10px 14px; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; }

/* Header */
.site-header {
  position: fixed; z-index: 100; inset: 0 0 auto;
  height: var(--header);
  padding: 0 var(--gutter);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  color: var(--hdr-fg);
  background: var(--hdr-bg);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: color .25s, background-color .25s;
}
.site-header[data-tone="white"] { --hdr-bg: rgba(255, 255, 255, .88); --hdr-fg: var(--ink); }
.site-header[data-tone="dark"] { --hdr-bg: rgba(14, 17, 22, .86); --hdr-fg: #f5f6f8; --hdr-solid: var(--ink); }
/* The wordmark (tools/make_wordmark.py): a copper R, then iverforge in the header's colour. Its size is set in site_header.py. */
.brand { display: inline-flex; align-items: center; width: max-content; text-decoration: none; }
.brand svg { display: block; }
.nav { display: flex; gap: 30px; font-size: 15px; font-weight: 500; }
.nav a { text-decoration: none; opacity: .75; transition: opacity .2s; }
.nav a:hover { opacity: 1; }
/* The phone number sits before Book a call, quiet like the menu links; on phones it sits beside Menu. */
.header-actions { justify-self: end; display: flex; align-items: center; gap: 22px; }
.header-phone { font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; text-decoration: none; opacity: .75; transition: opacity .2s; }
.header-phone:hover { opacity: 1; }
@media (min-width: 900px) and (max-width: 1099px) { .header-phone { display: none; } } /* no room beside the centred menu */
.header-cta { justify-self: end; padding: 10px 16px; background: var(--hdr-fg); color: var(--hdr-solid); font-size: 15px; font-weight: 650; text-decoration: none; border-radius: 3px; transition: background-color .25s, color .25s; }
.menu-toggle { display: none; justify-self: end; background: none; border: 0; font-weight: 650; padding: 10px 0; cursor: pointer; }
.mobile-nav {
  position: fixed; z-index: 90; inset: var(--header) 0 auto;
  display: none; flex-direction: column; gap: 20px;
  padding: 28px var(--gutter);
  background: var(--white); border-bottom: 1px solid var(--line);
  font-stretch: 125%; font-size: 24px; font-weight: 700;
  transform: translateY(-130%); transition: transform .3s;
}
.mobile-nav a { text-decoration: none; }
.mobile-nav a[aria-current] { color: var(--copper); }
.mobile-nav.open { transform: none; }

/* Services menu */
.nav-trigger { display: inline-flex; align-items: center; gap: 8px; padding: 0; background: none; border: 0; font-size: 15px; font-weight: 500; opacity: .75; cursor: pointer; transition: opacity .2s; }
.nav-trigger::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.nav-trigger:hover, .nav-trigger[aria-expanded="true"] { opacity: 1; }
.nav-trigger[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); }
.nav a[aria-current], .nav-trigger.is-current { opacity: 1; }
.mega {
  position: absolute; left: 50%; top: calc(100% + 6px);
  width: min(1060px, calc(100% - 2 * var(--gutter)));
  background: var(--white); color: var(--ink);
  border-radius: 10px; overflow: hidden;
  box-shadow: 0 34px 80px -30px rgba(14, 17, 22, .38), 0 0 0 1px var(--line);
  opacity: 0; visibility: hidden; transform: translate(-50%, -6px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.mega.is-open { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .18s ease, transform .18s ease; }
.mega-group { margin-bottom: 10px; font-size: 13px; font-weight: 650; color: var(--muted); }
.mega a { display: block; padding: 8px 0; text-decoration: none; }
.mega a b { display: block; font-size: 16px; font-weight: 650; line-height: 1.25; transition: color .15s; }
.mega a span { display: block; margin-top: 2px; font-size: 14px; line-height: 1.4; color: var(--muted); }
.mega a:hover b, .mega a:focus-visible b { color: var(--copper); }
/* Website design gets the first row, straight under the trigger, in the largest type */
.mega-top { padding: 22px 30px 24px; }
.mega-top-links { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 0 40px; align-items: end; }
.mega .mega-main { margin: -8px 0 -10px -14px; padding: 8px 14px 12px; border-radius: 8px; transition: background-color .15s; }
.mega .mega-main:hover, .mega .mega-main:focus-visible { background: var(--paper); }
.mega .mega-main b { display: flex; align-items: baseline; gap: 12px; font-stretch: 125%; font-weight: 720; font-size: clamp(24px, 2.2vw, 32px); letter-spacing: -.025em; line-height: 1.05; }
.mega .mega-main:hover b, .mega .mega-main:focus-visible b { color: var(--ink); }
.mega-main b i { font-style: normal; color: var(--copper); transition: transform .2s; }
.mega-main:hover b i, .mega-main:focus-visible b i { transform: translateX(5px); }
.mega .mega-main span { margin-top: 8px; font-size: 16px; max-width: 32em; }
.mega-main small { display: block; margin-top: 8px; font-size: 14px; font-weight: 650; color: var(--ink); }
.mega .mega-second { padding: 10px 0 10px 24px; border-left: 1px solid var(--line); }
.mega-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--paper); border-top: 1px solid var(--line); }
.mega-col { padding: 20px 30px 16px; }
.mega-col + .mega-col { border-left: 1px solid var(--line); }
.mega-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: 14px 30px; background: var(--paper); border-top: 1px solid var(--line); font-size: 15px; color: var(--muted); }
.mega-foot a { display: inline; padding: 0; font-weight: 650; color: var(--ink); text-decoration: underline; text-decoration-color: var(--copper); text-underline-offset: 3px; }
.mobile-nav .mobile-sub { display: grid; gap: 10px; margin: -6px 0 4px 2px; font-stretch: 100%; font-size: 17px; font-weight: 500; }
@media (max-width: 899px) { .mega { display: none; } }

/* Buttons */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.button { display: inline-block; padding: 15px 22px; background: var(--ink); color: var(--white); font-weight: 650; font-size: 16px; text-decoration: none; border-radius: 3px; transition: background .2s, color .2s; }
.button:hover { background: var(--copper); }
.button-quiet { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.button-quiet:hover { background: var(--ink); color: var(--white); }
.button-light { background: var(--white); color: var(--ink); }
.button-light:hover { background: var(--copper); color: var(--white); }

/* 1. Hero */
.hero { --hero-h1: clamp(36px, min(5.3vw, 9.4vh), 96px); min-height: 100svh; display: flex; flex-direction: column; padding: calc(var(--header) + 5vh) var(--gutter) 6vh; background: var(--paper); }
.hero h1 { font-size: var(--hero-h1); max-width: 15.5em; }
.hero-sub { max-width: 24em; margin-top: .55em; font-stretch: 112%; font-weight: 600; font-size: clamp(22px, min(2.6vw, 4.6vh), 46px); letter-spacing: -.02em; line-height: 1.1; text-wrap: balance; }
.hero-body { display: grid; gap: 36px; margin-top: 36px; }
.hero-text > p:first-child { max-width: 30em; font-size: clamp(17px, 1.3vw, 20px); color: var(--muted); }
.hero-text .actions { margin-top: 28px; }
.hero-names { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); max-width: 30em; }
.reel { margin: 0; }
.reel-screen { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #d9dce1; box-shadow: 0 50px 90px -40px rgba(14, 17, 22, .45), 0 0 0 1px rgba(14, 17, 22, .06); }
/* .reel-still is the first slide's picture (the page's LCP image); the videos sit on top of it */
.reel-screen video, .reel-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .7s ease; }
.reel-screen video.is-on, .reel-still.is-on { opacity: 1; }
.reel figcaption { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 14px; font-size: 14px; color: var(--muted); }
.reel-bars { display: flex; gap: 6px; }
.reel-bars i { width: 34px; height: 2px; background: var(--line); overflow: hidden; }
.reel-bars b { display: block; height: 100%; width: 0; background: var(--ink); }

/* 2. Review */
.review { display: flex; align-items: center; min-height: 80svh; padding: 14vh var(--gutter); background: var(--white); }
.review figure { max-width: 1120px; }
.stars { width: 112px; color: var(--copper); margin-bottom: 30px; }
.stars svg { display: block; width: 100%; height: auto; }
.review blockquote p { font-size: clamp(25px, 3.1vw, 52px); font-weight: 450; line-height: 1.14; letter-spacing: -.022em; }
.review figcaption { display: flex; flex-direction: column; gap: 2px; margin-top: 30px; font-size: 16px; }
.review figcaption span { color: var(--muted); }

/* 3. Work */
.work-panel { padding: 72px var(--gutter); background: var(--bg); color: var(--fg); }
.work-text h3 { font-stretch: 125%; font-weight: 720; font-size: clamp(36px, 4.4vw, 80px); letter-spacing: -.03em; line-height: .95; }
.work-kind { margin-top: 14px; font-size: 15px; font-weight: 650; color: var(--accent); }
.work-text p:not(.work-kind) { max-width: 27em; margin-top: 18px; opacity: .82; }
.work-link { display: inline-block; margin-top: 22px; font-weight: 650; text-decoration: none; border-bottom: 1.5px solid var(--accent); padding-bottom: 2px; }
.work-shot { margin-top: 32px; }
.work-shot img { width: 100%; border-radius: 12px; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .55); }
.work-screen, .work-index { display: none; }

/* 4. Range */
.range-stage { padding: 14vh 0 12vh; background: var(--paper); }
.range-copy { padding: 0 var(--gutter); }
/* A full sentence, so it is sized by height too: two lines plus the paragraph must clear the strip at 41vh */
.range-copy h2 { font-size: clamp(36px, min(6vw, 17.8vh - 92px), 112px); }
.range-copy p { max-width: 26em; margin-top: 20px; font-size: clamp(17px, 1.35vw, 21px); color: var(--muted); }
.strip { display: flex; gap: 16px; margin-top: 44px; padding: 0 var(--gutter) 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.strip li { flex: 0 0 82%; scroll-snap-align: start; }
.strip img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: top; border-radius: 12px; box-shadow: 0 0 0 1px var(--line); }
.strip span { display: block; margin-top: 12px; font-size: 14px; color: var(--muted); }
.strip b { color: var(--ink); font-weight: 650; margin-right: 6px; }

/* 5. Sectors */
.sectors { position: relative; padding: 16vh var(--gutter) 14vh; background: var(--paper); border-top: 1px solid var(--line); }
.sectors-copy h2 { font-size: clamp(38px, 5.4vw, 96px); max-width: 12em; }
.sectors-copy p { max-width: 30em; margin-top: 22px; font-size: clamp(17px, 1.35vw, 21px); color: var(--muted); }
.sector-list { margin-top: 52px; border-bottom: 1px solid var(--line); }
.sector-list > div { display: grid; gap: 4px; padding: 20px 0; border-top: 1px solid var(--line); transition: padding .3s; }
.sector-list dt { font-stretch: 112%; font-weight: 660; font-size: clamp(22px, 2.5vw, 40px); letter-spacing: -.025em; line-height: 1.1; }
.sector-list dd { font-size: 16px; color: var(--muted); }
.sectors-note { margin-top: 26px; font-size: 16px; color: var(--muted); }
.sectors-note a { color: var(--ink); font-weight: 650; text-decoration-color: var(--copper); text-underline-offset: 3px; }
.sector-preview { position: fixed; left: 0; top: 0; z-index: 50; width: 300px; aspect-ratio: 16 / 9; object-fit: cover; object-position: top; border-radius: 10px; box-shadow: 0 30px 60px -20px rgba(14, 17, 22, .45); pointer-events: none; opacity: 0; transform: translate3d(-999px, -999px, 0); transition: opacity .2s; }
.sector-preview.is-on { opacity: 1; }

/* 6. Services */
.services-stage { padding: 14vh var(--gutter) 12vh; background: var(--white); }
.services-title { font-size: clamp(32px, 4vw, 66px); max-width: 13em; }
.service-rows { margin-top: 44px; border-bottom: 1px solid var(--line); }
.service-row { border-top: 1px solid var(--line); }
.service-row h3 { font-size: clamp(22px, 2.3vw, 36px); }
.service-row h3 button { display: block; width: 100%; padding: 16px 0; background: none; border: 0; text-align: left; font-stretch: 112%; font-weight: 660; letter-spacing: -.02em; cursor: default; }
.service-inner { display: grid; gap: 20px; padding: 0 0 28px; }
.service-inner > p, .service-inner > div > p { max-width: 26em; color: var(--muted); }
.row-link { display: inline-block; margin-top: 14px; font-size: 15px; font-weight: 650; text-decoration: none; border-bottom: 1.5px solid var(--copper); padding-bottom: 2px; }
.service-inner figure { margin: 0; }
.service-inner figure img { width: 100%; height: 34vh; min-height: 200px; object-fit: cover; object-position: top left; border-radius: 10px; box-shadow: 0 0 0 1px var(--line); }
.service-inner figcaption { margin-top: 10px; font-size: 14px; color: var(--muted); }
.fig-centre img { object-fit: contain !important; object-position: center !important; background: #eeefe9; }
.fig-stat { display: flex; flex-direction: column; justify-content: flex-end; min-height: 200px; height: 34vh; padding: 26px; border-radius: 10px; background: var(--ink); color: var(--white); }
.fig-stat strong { font-stretch: 125%; font-weight: 760; font-size: clamp(64px, 8vw, 140px); line-height: .85; letter-spacing: -.04em; color: var(--white); }
.fig-stat figcaption { color: var(--muted-dark) !important; max-width: 26em; }
.fig-list { display: flex; align-items: center; min-height: 200px; height: 34vh; padding: 10px 26px; border-radius: 10px; background: var(--paper); }
.fig-list ul { width: 100%; }
.fig-list li { padding: 8px 0; border-top: 1px solid var(--line); font-stretch: 112%; font-weight: 650; font-size: clamp(18px, 1.8vw, 28px); letter-spacing: -.02em; }
.fig-list li:first-child { border-top: 0; }

/* 7. Process */
.process-stage { padding: 14vh var(--gutter) 12vh; background: var(--paper); }
.process-copy h2 { font-size: clamp(36px, 4.8vw, 84px); max-width: 12em; }
.process-copy p { max-width: 32em; margin-top: 18px; font-size: clamp(16px, 1.25vw, 19px); color: var(--muted); }
.gantt { margin-top: 44px; overflow-x: auto; }
.gantt-weeks, .gantt-row { display: grid; grid-template-columns: 84px repeat(10, minmax(0, 1fr)); align-items: center; }
.gantt-weeks { font-size: 12px; color: var(--muted); padding-bottom: 8px; }
.gantt-body { position: relative; }
.gantt-row { height: 46px; border-top: 1px solid var(--line); }
.gantt-row:last-of-type { border-bottom: 1px solid var(--line); }
.gantt-row b { font-weight: 650; font-size: 15px; }
.bar { position: relative; grid-column: calc(var(--from) + 2) / calc(var(--to) + 2); height: 14px; background: rgba(14, 17, 22, .1); border-radius: 2px; overflow: hidden; }
.bar i { position: absolute; inset: 0 auto 0 0; width: 100%; background: var(--ink); }
.gantt-now { display: none; }
.stage-details { display: grid; gap: 22px; margin-top: 36px; }
.stage-detail h3 { font-size: 22px; }
.stage-detail h3 span { margin-left: 8px; font-stretch: 100%; font-weight: 500; font-size: 15px; letter-spacing: 0; color: var(--muted); }
.stage-detail p { margin-top: 6px; font-size: 16px; color: var(--muted); }
.stage-detail .you-get { color: var(--ink); font-weight: 600; }

/* 8. Pricing */
.pricing { padding: 16vh var(--gutter) 12vh; background: var(--white); }
.pricing-copy h2 { font-size: clamp(38px, 5.4vw, 96px); }
.pricing-copy p { max-width: 32em; margin-top: 20px; font-size: clamp(17px, 1.35vw, 21px); color: var(--muted); }
.price-rows { margin-top: 48px; border-bottom: 1px solid var(--ink); }
.price-row { display: grid; gap: 14px; padding: 26px 0; border-top: 1px solid var(--ink); }
.price { font-stretch: 125%; font-weight: 720; font-size: clamp(30px, 2.8vw, 50px); letter-spacing: -.03em; line-height: 1; white-space: nowrap; }
.price-what h3 { font-size: 22px; }
.price-what p { margin-top: 6px; font-size: 16px; color: var(--muted); }
.price-row ul li { padding: 3px 0; font-size: 15px; }
.price-row ul li::before { content: ""; display: inline-block; width: 10px; height: 1.5px; margin: 0 10px 4px 0; background: var(--copper); }
.price-time { font-size: 15px; font-weight: 650; }
.pricing-note { margin-top: 26px; font-size: 15px; color: var(--muted); }
.pricing-note a { color: var(--ink); font-weight: 650; text-decoration-color: var(--copper); text-underline-offset: 3px; }

/* 9. Working with us */
.working { padding: 16vh var(--gutter) 12vh; background: var(--ink); color: #f5f6f8; }
.working h2 { font-size: clamp(32px, 3.6vw, 60px); max-width: 9em; }
.working-quote { margin-top: 36px; }
.working-quote blockquote p { font-size: clamp(22px, 2.3vw, 38px); font-weight: 450; line-height: 1.25; letter-spacing: -.015em; }
.working-quote figcaption { display: flex; flex-direction: column; gap: 2px; margin-top: 26px; padding-left: 14px; border-left: 2px solid var(--copper); font-size: 16px; }
.working-quote figcaption span { color: var(--muted-dark); }
.commitments { display: grid; gap: 0; margin-top: 56px; }
.commitments li { padding: 18px 0; border-top: 1px solid var(--line-dark); font-size: 17px; color: var(--muted-dark); }
.commitments b { display: block; color: #f5f6f8; font-stretch: 112%; font-weight: 660; font-size: clamp(20px, 1.7vw, 26px); letter-spacing: -.02em; }

/* 10. Management team */
.assure { display: grid; gap: 48px; padding: 16vh var(--gutter) 14vh; background: var(--paper); }
.assure-side h2 { font-size: clamp(34px, 4vw, 68px); max-width: 11em; }
.doc { display: flex; flex-direction: column; width: min(260px, 70vw); aspect-ratio: 1 / 1.414; margin-top: 40px; padding: 26px; background: var(--white); box-shadow: 0 30px 60px -30px rgba(14, 17, 22, .4), 0 0 0 1px var(--line); transform: rotate(-2deg); }
.doc img { width: 34px; height: 34px; }
.doc-title { margin-top: auto; font-stretch: 125%; font-weight: 720; font-size: 24px; line-height: 1.02; letter-spacing: -.02em; }
.doc-sub { margin-top: 10px; font-size: 14px; color: var(--muted); }
.doc a { margin-top: 16px; font-weight: 650; font-size: 15px; color: var(--copper); text-decoration: none; }
.qa { border-bottom: 1px solid var(--line); }
.qa > div { padding: 22px 0; border-top: 1px solid var(--line); }
.qa dt { font-stretch: 112%; font-weight: 660; font-size: clamp(20px, 1.8vw, 28px); letter-spacing: -.02em; line-height: 1.15; }
.qa dd { margin-top: 8px; max-width: 32em; color: var(--muted); }

/* 11. Contact */
.contact { display: flex; flex-direction: column; min-height: 100svh; padding: calc(var(--header) + 10vh) var(--gutter) 10vh; background: var(--ink); color: #f5f6f8; }
.contact-grid { display: grid; gap: 40px; margin: auto 0; }
.contact h2 { font-size: clamp(42px, 6vw, 112px); max-width: 9em; }
.next-steps li { padding: 14px 0; border-top: 1px solid var(--line-dark); font-size: clamp(17px, 1.3vw, 20px); color: var(--muted-dark); }
.contact .actions { margin-top: 28px; }
.contact-link { font-weight: 650; font-size: 18px; text-decoration: none; border-bottom: 1.5px solid var(--copper); padding-bottom: 2px; }

/* 12. Site footer, on every page (tools/site_footer.py). Sits after </main>, carrying on from the dark contact section. */
.site-footer { container-type: inline-size; overflow: hidden; padding: 0 var(--gutter) 26px; background: var(--ink); color: var(--muted-dark); }
.sf-top { display: grid; gap: 56px; padding-top: 72px; border-top: 1px solid var(--line-dark); }
.sf-statement { max-width: 10em; color: #f5f6f8; font-stretch: 125%; font-weight: 720; font-size: clamp(30px, 2.7vw, 46px); line-height: 1.02; letter-spacing: -.028em; }
.sf-about { max-width: 22em; margin-top: 18px; font-size: 17px; line-height: 1.5; }
.sf-contact { display: grid; justify-items: start; gap: 12px; margin: 30px 0 0; padding: 0; list-style: none; }
.sf-contact a { padding-bottom: 2px; border-bottom: 1.5px solid var(--copper); color: #f5f6f8; font-weight: 650; font-size: 18px; text-decoration: none; }
.sf-contact a:hover { color: var(--copper); }
.sf-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 24px; }
.sf-h { margin-bottom: 18px; color: #f5f6f8; font-stretch: 112%; font-weight: 660; font-size: 17px; letter-spacing: -.01em; }
.sf-col ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.sf-col li { line-height: 1.35; }
.sf-col a { font-size: 15.5px; text-decoration: none; transition: color .2s; }
.sf-col a:hover, .sf-col a:focus-visible { color: #f5f6f8; text-decoration: underline; text-decoration-color: var(--copper); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.sf-areas { grid-column: 1 / -1; }
.sf-areas ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
/* The wordmark SVG (site_footer.py) spans the footer exactly: its viewBox starts and ends at the ink. The font-size is only there
   for the .06em the box reaches above the old text's line, so the gap above the letters stays as it was.
   Reading shows through the letters. The SVG is white letters (and the copper R) on black, multiplied onto the images, so they
   survive only inside the letters; the group is then lightened onto the footer, which turns the black back into the footer's ink.
   Until the first image loads (or if it fails) the letters are plain white. A video would drop into .sf-mark-media the same way. */
.sf-mark { position: relative; margin-top: calc(clamp(56px, 9vh, 110px) - .06em); font-size: calc((100vw - 2 * var(--gutter)) * .1719); font-size: calc(100cqw * .1719); user-select: none; mix-blend-mode: lighten; }
.sf-mark-media { position: absolute; inset: 0; overflow: hidden; }
/* Photos crossfade (script.js moves .is-on) and drift slowly sideways while the footer is in view. */
.sf-mark-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.1); transition: opacity 1.8s ease; animation: sf-drift 48s ease-in-out infinite alternate paused; }
.sf-mark-media img.is-on { opacity: 1; }
.sf-mark.is-moving .sf-mark-media img { animation-play-state: running; }
@keyframes sf-drift { from { transform: scale(1.1) translate3d(-4%, 0, 0); } to { transform: scale(1.1) translate3d(4%, 0, 0); } }
/* The line drawing is pinned to the bottom so its buildings fill the thick parts of the letters. */
.sf-mark-media.is-drawing img { object-position: 50% 100%; transform-origin: 50% 100%; }
/* On phones the letters are small, so the images are shown larger and the drift pans along them. */
@media (max-width: 699px) {
  .sf-mark-media img { right: auto; width: 140%; max-width: none; transform: none; animation-name: sf-pan; animation-duration: 50s; }
  .sf-mark-media.is-drawing img { object-position: 50% 92%; }
  @keyframes sf-pan { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-28.5%, 0, 0); } }
}
/* The viewBox takes the black layer (and so the images) past the tops of the letters and the tail of the g. The shadow carries the
   black 2px past the box, so the photos can't leak a faint line through the part-covered pixels at its edges. */
.sf-mark-text { position: relative; display: block; width: 100%; height: auto; background: #000; box-shadow: 0 0 0 2px #000; mix-blend-mode: multiply; }
.sf-base { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px 40px; margin-top: clamp(28px, 4vh, 44px); padding-top: 18px; border-top: 1px solid var(--line-dark); font-size: 13px; line-height: 1.5; }
.sf-up { color: #f5f6f8; font-weight: 650; text-decoration: none; white-space: nowrap; }
.sf-up:hover { color: var(--copper); }
.sf-credit { margin-top: 4px; color: #7d848e; font-size: 12px; }
.sf-credit a { text-underline-offset: 2px; }
.sf-credit a:hover { color: #f5f6f8; }

/* Tablet and up, still stacked */
@media (min-width: 700px) {
  .hero-body { grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); align-items: end; gap: 4vw; }
  .work-panel { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; align-items: center; }
  .work-shot { margin-top: 0; }
  .strip li { flex-basis: 46%; }
  .sector-list > div { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: baseline; gap: 24px; }
  .service-inner { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 32px; }
  .stage-details { grid-template-columns: repeat(2, 1fr); }
  .gantt-weeks, .gantt-row { grid-template-columns: 112px repeat(10, minmax(0, 1fr)); }
  .price-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 32px; }
  .working { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 0 5vw; align-content: center; }
  .working-quote { margin-top: 0; }
  .commitments { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); gap: 32px; }
  .assure { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 6vw; align-items: start; }
  .assure-side { position: sticky; top: calc(var(--header) + 6vh); }
  .contact-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: end; gap: 6vw; }
}
@media (min-width: 1100px) {
  .price-row { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.1fr) minmax(0, 1.35fr) minmax(0, .55fr); align-items: start; }
  .stage-details { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 899px) {
  .site-header { grid-template-columns: 1fr auto auto; column-gap: 20px; }
  .nav, .header-cta { display: none; }
  .menu-toggle { display: block; }
  .mobile-nav { display: flex; }
}

/* ---------- Scroll-locked desktop scenes (html.fx) ---------- */
.fx .stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }

/* Hero */
/* The H1 spans the top. The reel's top lines up with the subheadline and its bottom with the buttons column, and it
   is sized to the height left under the H1 (100svh less the paddings, the 3vh gap, the header, the H1 and the 36px
   caption), so it is never cut off. Rows size to their content, so the two columns share a top and a bottom. */
.fx .hero { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); grid-template-rows: auto auto auto; align-content: start; gap: 3vh 4vw; }
.fx .hero h1 { grid-column: 1 / -1; }
/* Two lines in the left column: its longer line ("Built to get you recommended") is about 15em.
   text-box trims the space above the capitals, so "Built" starts exactly at the reel's top edge. */
.fx .hero-sub { grid-column: 1; grid-row: 2; margin-top: 0; font-size: clamp(20px, min(2.05vw, 4.6vh), 40px); text-box: trim-start cap alphabetic; }
.fx .hero-body { display: contents; }
.fx .hero-text { grid-column: 1; grid-row: 3; align-self: end; }
.fx .reel { grid-column: 2; grid-row: 2 / 4; align-self: start; justify-self: end; width: min(100%, calc((86svh - var(--header) - var(--hero-h1) - 44px) * 1.78)); }

/* Work: the page takes on each client's colours */
.fx .work-lock { height: 900svh; }
.fx .work-stage { padding: 0; background: var(--work-bg, #0f1c2e); color: var(--work-fg, #f2ece0); }
.fx .work-panels { position: absolute; left: var(--gutter); top: calc(var(--header) + 8vh); bottom: calc(6vh + 64px); width: 36vw; }
.fx .work-text h3 { font-size: clamp(36px, 4.2vw, 80px); }
.fx .work-panel { position: absolute; inset: 0; display: block; padding: 0; background: none; color: inherit; opacity: 0; transform: translateY(26px); transition: opacity .5s ease, transform .7s cubic-bezier(.2, .8, .2, 1); pointer-events: none; }
.fx .work-panel.is-active { opacity: 1; transform: none; pointer-events: auto; }
.fx .work-kind { color: var(--work-accent, var(--accent)); }
.fx .work-link { border-color: var(--work-accent, var(--accent)); }
.fx .work-shot { display: none; }
.fx .work-screen { display: block; position: absolute; right: var(--gutter); top: calc(var(--header) + 4vh); bottom: 6vh; width: 52vw; border-radius: 14px; overflow: hidden; background: rgba(127, 127, 127, .12); box-shadow: 0 60px 110px -50px rgba(0, 0, 0, .6), 0 0 0 1px rgba(127, 127, 127, .18); }
.fx .work-screen img { position: absolute; left: 0; top: 0; width: 100%; opacity: 0; will-change: transform, opacity; }
.fx .work-index { display: flex; gap: 24px; position: absolute; left: var(--gutter); bottom: 6vh; z-index: 4; font-size: 14px; font-weight: 600; }
.fx .work-index a { text-decoration: none; opacity: .5; padding-bottom: 4px; border-bottom: 1.5px solid transparent; transition: opacity .3s, border-color .3s; }
.fx .work-index a.is-on { opacity: 1; border-color: var(--work-accent, currentColor); }

/* Range: the strip slides sideways */
.fx .range-lock { height: 220svh; }
.fx .range-stage { padding: 0; }
.fx .range-copy { position: absolute; left: 0; top: calc(var(--header) + 6vh); }
.fx .strip { position: absolute; left: 0; top: 41vh; margin: 0; padding: 0 var(--gutter); gap: 2vw; overflow: visible; will-change: transform; }
.fx .strip li { flex: 0 0 38vw; }

/* Services: rows open one at a time */
.fx .services-lock { height: 280svh; }
.fx .services-stage { padding: 0; }
.fx .services-title { position: absolute; left: var(--gutter); top: calc(var(--header) + 6vh); width: 34vw; font-size: clamp(30px, 3.2vw, 56px); }
.fx .service-rows { position: absolute; right: var(--gutter); top: calc(var(--header) + 6vh); width: 56vw; margin: 0; }
.fx .service-row h3 button { cursor: pointer; opacity: .38; transition: opacity .3s; }
.fx .service-row.is-active h3 button, .fx .service-row h3 button:hover { opacity: 1; }
.fx .service-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s cubic-bezier(.2, .8, .2, 1); }
.fx .service-row.is-active .service-body { grid-template-rows: 1fr; }
.fx .service-inner { min-height: 0; overflow: hidden; padding: 0; }
.fx .service-row.is-active .service-inner { padding-bottom: 24px; }
.fx .service-inner figure img, .fx .fig-stat, .fx .fig-list { height: 32vh; min-height: 0; }

/* Process: a Gantt chart with a moving "now" line */
.fx .process-lock { height: 240svh; }
.fx .process-stage { padding: 0; }
.fx .process-copy { position: absolute; left: var(--gutter); top: calc(var(--header) + 6vh); }
.fx .process-copy h2 { font-size: clamp(34px, 4.2vw, 74px); }
.fx .gantt { position: absolute; left: var(--gutter); right: var(--gutter); top: 37vh; margin: 0; overflow: visible; }
.fx .gantt-weeks, .fx .gantt-row { grid-template-columns: 160px repeat(10, 1fr); }
.fx .bar i { width: var(--fill, 0%); }
.fx .gantt-now { display: block; position: absolute; top: -6px; bottom: -6px; left: calc(160px + (100% - 160px) * var(--now, 0) / 10); width: 2px; background: var(--copper); z-index: 3; }
.fx .gantt-now span { position: absolute; top: 100%; left: 6px; margin-top: 6px; font-size: 12px; font-weight: 650; color: var(--copper); white-space: nowrap; }
.fx .stage-details { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 7vh; display: block; margin: 0; min-height: 110px; }
.fx .stage-detail { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.1fr) minmax(0, 1.1fr); gap: 32px; align-items: baseline; padding-top: 18px; border-top: 1px solid var(--line); opacity: 0; transform: translateY(12px); transition: opacity .35s, transform .45s; }
.fx .stage-detail.is-active { opacity: 1; transform: none; }
.fx .stage-detail h3 { font-size: clamp(24px, 2.2vw, 34px); }
.fx .stage-detail h3 span { display: block; margin: 6px 0 0; }
.fx .stage-detail p { margin: 0; font-size: 17px; }

/* Short laptop screens (1366x768, 1280x720) */
@media (max-height: 820px) {
  .fx .work-panels { top: calc(var(--header) + 6vh); }
  .fx .work-text h3 { font-size: clamp(34px, 3.9vw, 72px); }
  .fx .service-row h3 button { padding: 11px 0; }
  .fx .service-inner figure img, .fx .fig-stat, .fx .fig-list { height: 28vh; }
  .fx .services-title { font-size: clamp(28px, 2.8vw, 46px); }
  .fx .gantt { top: 42vh; }
  .fx .process-copy p { margin-top: 12px; font-size: 15px; }
  .fx .gantt-row { height: 38px; }
  .fx .stage-detail p { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Areas: the /areas/ pages (tools/build_areas.py) and the "areas" band on the homepage and service pages (tools/build_services.py).
   Kept here, not in services/services.css, because the homepage loads only this file. */

.svc-hero.is-short { min-height: 0; padding-bottom: 6vh; }
.area-kicker { margin-bottom: 18px; font-size: 13px; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.area-prose { display: grid; gap: 22px; margin-top: 36px; }
.area-prose p { max-width: 34em; font-size: clamp(17px, 1.35vw, 21px); color: var(--muted); }

.area-grid-section { padding: 6vh var(--gutter) 14vh; background: var(--white); }
.area-grid { display: grid; border-bottom: 1px solid var(--line); }
.area-grid a { display: flex; flex-direction: column; gap: 8px; padding: 24px 0 28px; border-top: 1px solid var(--line); color: inherit; text-decoration: none; }
.area-county { font-size: 12px; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.area-grid h3 { font-size: clamp(24px, 2.2vw, 34px); }
.area-grid h3 i, .area-near-list i { font-style: normal; color: var(--copper); transition: transform .2s; }
.area-grid a:hover h3 i, .area-near-list a:hover i { transform: translateX(4px); }
.area-grid p { max-width: 24em; color: var(--muted); }
.area-grid small { font-size: 14px; font-weight: 600; }
.area-note { margin-top: 40px; max-width: 34em; color: var(--muted); }
.area-note a { color: var(--ink); font-weight: 650; text-decoration-color: var(--copper); text-underline-offset: 3px; }

.area-near { padding: 12vh var(--gutter); background: var(--paper); }
.area-near h2 { font-size: clamp(28px, 3vw, 50px); }
.area-near-list { display: grid; margin-top: 28px; border-bottom: 1px solid var(--line); }
.area-near-list a { display: flex; align-items: baseline; gap: 14px; padding: 18px 0; border-top: 1px solid var(--line); color: inherit; text-decoration: none; }
.area-near-list b { font-stretch: 112%; font-weight: 660; font-size: 21px; letter-spacing: -.02em; }
.area-near-list span { font-size: 15px; color: var(--muted); }
.area-near-list i { margin-left: auto; }

.area-band { display: grid; gap: 28px; padding: 12vh var(--gutter); background: var(--white); border-top: 1px solid var(--line); }
.area-band h2 { max-width: 13em; font-size: clamp(28px, 3vw, 50px); }
.area-band p { max-width: 32em; margin-top: 16px; color: var(--muted); }
.area-links { display: flex; flex-wrap: wrap; align-content: start; gap: 12px 26px; }
.area-links a { padding-bottom: 2px; border-bottom: 1.5px solid var(--copper); font-weight: 650; text-decoration: none; }
.area-links a:hover { color: var(--copper); }
.area-links .area-all { border-bottom-color: var(--ink); }

@media (min-width: 700px) {
  .area-grid { grid-template-columns: repeat(2, 1fr); gap: 0 36px; }
  .area-near-list { grid-template-columns: repeat(2, 1fr); gap: 0 36px; }
}
@media (min-width: 1000px) {
  .area-grid { grid-template-columns: repeat(3, 1fr); }
  .area-near-list { grid-template-columns: repeat(3, 1fr); }
  .area-prose { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5vw; }
  .area-band { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 5vw; align-items: center; }
}

/* Areas: services pitch, locality photos and credits (tools/build_areas.py) */
.area-photo { align-self: center; margin: 0; }
.area-photo img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 12px; box-shadow: 0 40px 80px -45px rgba(14, 17, 22, .45), 0 0 0 1px var(--line); }
.area-photo figcaption, .area-credits li { margin-top: 10px; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.area-photo figcaption a, .area-credits a { color: inherit; text-underline-offset: 2px; }

.area-working { display: grid; gap: 44px; margin-top: 44px; align-items: start; }
.area-working .area-prose { grid-template-columns: 1fr; align-content: start; margin-top: 0; }

.area-svcs { padding: 10vh var(--gutter) 8vh; background: var(--white); }
.area-svcs > .section-lede { margin-top: 0; max-width: 40em; }
.area-svcs > h2 { font-size: clamp(32px, 4vw, 68px); max-width: 14em; }
.area-svc-list { margin-top: 48px; border-bottom: 1px solid var(--line); }
.area-svc { display: grid; gap: 28px; align-items: center; padding: 44px 0; border-top: 1px solid var(--line); }
.area-svc h2, .area-svc h3 { font-stretch: 125%; font-weight: 720; font-size: clamp(26px, 2.6vw, 40px); letter-spacing: -.025em; line-height: 1.05; }
.area-svc p { max-width: 34em; margin-top: 14px; color: var(--muted); }
.area-svc p.area-angle { color: var(--ink); font-weight: 600; }
.area-bullets { display: grid; max-width: 36em; margin-top: 20px; border-bottom: 1px solid var(--line); }
.area-bullets li { display: flex; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); font-size: 15.5px; line-height: 1.4; }
.area-bullets li::before { content: ""; flex: 0 0 10px; height: 1.5px; margin-top: .72em; background: var(--copper); }
.area-bullets b { font-weight: 650; }
.area-svc-links { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.area-svc-link { display: inline-flex; gap: 10px; margin-top: 22px; padding-bottom: 3px; border-bottom: 1.5px solid var(--copper); font-weight: 650; text-decoration: none; }
.area-svc-link i { font-style: normal; color: var(--copper); transition: transform .2s; }
.area-svc-link:hover i { transform: translateX(4px); }
.area-svc-visual { margin: 0; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 12px; background: linear-gradient(180deg, #eceef1, #e3e6ea); }
.area-svc-visual img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; padding: 10px 8px 0; }
.area-svc-visual.is-photo img { object-fit: cover; object-position: top; padding: 0; }

.area-work { padding: 12vh var(--gutter); background: var(--paper); }
.area-work h2 { font-size: clamp(30px, 3.6vw, 60px); max-width: 12em; }
.area-work-grid { display: grid; gap: 28px 24px; margin: 40px 0 8px; }
.area-work figure { margin: 0; }
.area-work img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: top; border-radius: 10px; box-shadow: 0 30px 60px -36px rgba(14, 17, 22, .5), 0 0 0 1px var(--line); }
.area-work figcaption { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; }
.area-work figcaption b { font-stretch: 112%; font-weight: 660; font-size: 19px; letter-spacing: -.02em; }
.area-work figcaption span { font-size: 14px; color: var(--muted); }

.area-tile-photo { display: block; aspect-ratio: 16 / 10; margin-bottom: 14px; overflow: hidden; border-radius: 10px; background: #e3e6ea; }
.area-tile-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.area-grid a:hover .area-tile-photo img { transform: scale(1.04); }
.area-credits { margin-top: 36px; font-size: 14px; color: var(--muted); }
.area-credits summary { cursor: pointer; font-weight: 650; color: var(--ink); }
.area-credits ul { margin-top: 8px; }

@media (min-width: 700px) {
  .area-work-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .area-working { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 5vw; }
  .area-svc { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 5vw; }
  .area-svc.is-flip .area-svc-visual { order: -1; }
  .area-work-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Areas: company registration stats (tools/build_areas.py, data from tools/derive_area_stats.py) */
.area-stats > h2 { font-size: clamp(30px, 3.6vw, 60px); max-width: 14em; }
.area-kpis { display: grid; gap: 0 36px; margin-top: 40px; }
.area-kpis p { padding: 18px 0 20px; border-top: 1px solid var(--ink); }
.area-kpis strong { display: block; font-stretch: 125%; font-weight: 740; font-size: clamp(44px, 5vw, 84px); line-height: .92; letter-spacing: -.04em; }
.area-kpis span { display: block; max-width: 18em; margin-top: 10px; color: var(--muted); }

.area-stats-grid { display: grid; gap: 44px; margin-top: 36px; }
.area-stats h3 { font-size: clamp(20px, 1.9vw, 28px); }
.area-chart { position: relative; margin-top: 22px; padding-bottom: 30px; }
.area-chart-max { position: absolute; top: 22px; left: 0; font-size: 12px; color: var(--muted); }
.area-chart ol { display: flex; align-items: flex-end; gap: 3px; height: 210px; margin-top: 38px; border-bottom: 1px solid var(--ink); }
.area-chart li { position: relative; flex: 1 1 0; height: var(--h); min-width: 0; background: var(--ink); border-radius: 2px 2px 0 0; opacity: .82; }
.area-chart li:hover { opacity: 1; }
.area-chart li.is-peak { background: var(--copper); opacity: 1; }
.area-chart li span { position: absolute; top: 100%; left: 0; margin-top: 8px; font-size: 11px; white-space: nowrap; color: var(--muted); }
.area-chart li:last-child span { left: auto; right: 0; }
.area-chart-fig figcaption, .area-source-small { margin-top: 6px; font-size: 13px; color: var(--muted); }
.area-data { margin-top: 14px; font-size: 14px; color: var(--muted); }
.area-data summary { cursor: pointer; font-weight: 650; color: var(--ink); }
.area-data table { width: 100%; max-width: 22em; margin-top: 8px; border-collapse: collapse; }
.area-data th, .area-data td { padding: 4px 0; border-top: 1px solid var(--line); text-align: left; font-weight: 500; }
.area-data td { text-align: right; }

.area-sectors ul { margin-top: 18px; border-bottom: 1px solid var(--line); }
.area-sectors li { display: grid; grid-template-columns: minmax(0, 1fr) 70px; align-items: center; gap: 4px 14px; padding: 12px 0; border-top: 1px solid var(--line); }
.area-sector-name { font-weight: 650; }
.area-sectors li b { text-align: right; font-weight: 650; }
.area-sector-bar { grid-column: 1 / -1; grid-row: 2; height: 6px; background: rgba(14, 17, 22, .08); border-radius: 3px; overflow: hidden; }
.area-sector-bar i { display: block; height: 100%; background: var(--copper); border-radius: 3px; }
.area-sectors li > :nth-child(3) { grid-row: 1; grid-column: 2; }

.area-grow { margin-top: 56px; padding: clamp(24px, 3.4vw, 48px); background: var(--ink); color: #f5f6f8; border-radius: 12px; }
.area-grow h3 { max-width: 22em; }
.area-grow-nums { display: grid; gap: 18px 28px; margin: 26px 0 22px; }
.area-grow-nums p { padding-top: 12px; border-top: 1px solid var(--line-dark); }
.area-grow-nums strong { display: block; font-stretch: 125%; font-weight: 740; font-size: clamp(40px, 4.4vw, 72px); line-height: .92; letter-spacing: -.04em; color: #c7ccd4; }
.area-grow-nums .is-now strong { color: #fff; }
.area-grow-nums span { display: block; margin-top: 8px; font-size: 14px; color: var(--muted-dark); }
.area-grow > p:last-child { max-width: 44em; color: var(--muted-dark); }
.area-source { max-width: 52em; margin-top: 36px; font-size: 13px; line-height: 1.5; color: var(--muted); }

@media (min-width: 700px) {
  .area-kpis { grid-template-columns: repeat(3, 1fr); }
  .area-grow-nums { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1000px) {
  .area-stats-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr); gap: 5vw; align-items: start; }
}

.area-chart li { cursor: default; outline-offset: 2px; }
.area-chart li::after { content: attr(data-tip); position: absolute; z-index: 5; bottom: calc(100% + 8px); left: 50%; padding: 6px 10px; border-radius: 4px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 600; line-height: 1.2; white-space: nowrap; transform: translateX(-50%); opacity: 0; pointer-events: none; transition: opacity .12s; }
.area-chart li:hover::after, .area-chart li:focus-visible::after { opacity: 1; }
.area-chart li:hover, .area-chart li:focus-visible { opacity: 1; }
.area-chart li:nth-child(-n+3)::after { left: 0; transform: none; }
.area-chart li:nth-last-child(-n+3)::after { left: auto; right: 0; transform: none; }

/* Site footer, wide screens: statement and contact on the left, three link columns on the right */
@media (min-width: 1000px) {
  .sf-top { grid-template-columns: minmax(0, .95fr) minmax(0, 2fr); gap: 5vw; }
  .sf-nav { grid-template-columns: minmax(0, 1.1fr) minmax(0, .8fr) minmax(0, 1.25fr); gap: 32px; }
  .sf-areas { grid-column: auto; }
}