/* Refine the original design; retain its paint reveal and interactive sections. */
:root {
  --ink: #171d19; --ink-2: #252d26; --ink-3: #354033;
  --paper: #e8e2d7; --paper-2: #d9d0c0;
  --stone: #bfb19a; --stone-2: #af9c81;
  --copper: #b98e63; --copper-2: #e0b789;
  --max: 1920px; --gutter: clamp(22px, 4.5vw, 88px); --hdr-h: 84px;
}
html { scroll-padding-top: calc(var(--hdr-h) + 20px); }
body { font-size: 17px; }
.mono, .eyebrow { font-size: 12px; }
.eyebrow { letter-spacing: .14em; }
.btn { min-height: 52px; font-size: 12px; letter-spacing: .11em; }
.lede { font-size: clamp(17px, 1.15vw, 21px); line-height: 1.7; }
.sec { padding-block: clamp(72px, 7vw, 132px); }
.sec__head { gap: 30px 70px; margin-bottom: clamp(34px, 4.5vw, 72px); }
.sec__head .h2 { max-width: 19ch; }
.h2 { font-size: clamp(2.5rem, 4.8vw, 5.25rem); line-height: 1.04; }

/* A legible masthead and direct routes, with the original animated menu. */
.hdr { border-bottom: 1px solid #e8e2d719; }
.brand { flex-direction: column; align-items: flex-start; gap: 9px; flex: none; }
.brand__word { font-size: 19px; letter-spacing: .2em; }
.brand__est { font-size: 9px; letter-spacing: .14em; opacity: .76; }
.hdr__nav { display: flex; gap: clamp(24px, 2.5vw, 44px); margin-left: auto; }
.hdr__nav a { font-size: 14px; padding: 14px 0; position: relative; }
.hdr__nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 6px; height: 1px; background: var(--copper-2); transform: scaleX(0); transform-origin: left; transition: transform .3s; }
.hdr__nav a:hover::after, .hdr__nav a:focus-visible::after { transform: scaleX(1); }
.hdr__right { margin-left: clamp(12px, 2vw, 32px); }
.hdr__meta { margin-left: 24px; }
.hdr.on-light.is-scrolled { background: #e8e2d7ed; }
.hdr.on-stone.is-scrolled { background: #bfb19aef; }
.hdr.is-scrolled { background: #171d19ed; }
.menu__panel { background: var(--ink); }
.menu__list a { line-height: 1.04; }

/* One complete opening composition, sized to the available viewport height. */
.hero { min-height: 640px; height: calc(100svh - 58px); align-items: flex-end; }
.hero__finish { object-position: 50% 51%; }
.hero__shade {
  background: linear-gradient(180deg, #0d151ad9 0%, #0d151a08 32%),
              linear-gradient(0deg, #101a17f5 0%, #101a1780 32%, transparent 65%),
              linear-gradient(90deg, #101a1766 0%, transparent 74%);
}
.hero__content { padding-top: calc(var(--hdr-h) + 90px); padding-bottom: clamp(38px, 5.5vh, 76px); }
.hero .eyebrow { margin-bottom: 26px; color: #e6c7a3; }
.hero__title { font-size: clamp(64px, min(11vw, 13.5svh), 180px); line-height: .94; max-width: 12ch; }
.hero__title .ln { padding-bottom: .16em; margin-bottom: -.16em; }
.hero__title em { color: #e9c7a3; }
.hero__foot { margin-top: clamp(26px, 3.5vh, 46px); padding-top: 26px; gap: 32px 70px; }
.hero__lede { font-size: clamp(17px, 1.45vw, 23px); line-height: 1.6; max-width: 40ch; color: #e8e2d7e6; }
.hero__try { font-size: clamp(20px, 1.55vw, 27px); }
.hero__perks { font-size: 10px; letter-spacing: .1em; }
.hero__hint { top: calc(var(--hdr-h) + 26px); right: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); font-size: 10px; letter-spacing: .1em; color: #f0e7db; }
.hero__hint button { min-height: 40px; }
.hero__project { position: absolute; right: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); top: 49%; z-index: 4; display: grid; gap: 10px; padding: 17px 22px; border-left: 1px solid #e8e2d780; background: #111b1759; backdrop-filter: blur(8px); transition: background .3s; }
.hero__project:hover { background: #111b17ac; }
.hero__project .mono { font-size: 10px; color: #e9c7a3; }
.hero__project > span:last-child { font-size: clamp(17px, 1.4vw, 24px); }
.hero__project b { margin-left: 28px; font-weight: 400; }
.marquee { background: var(--copper); height: 58px; display: flex; align-items: center; }
.marquee__group { min-width: 100vw; padding-block: 0; justify-content: space-around; }
.marquee__group span { font-size: clamp(19px, 1.2vw, 26px); letter-spacing: .01em; }
.marquee__group i { width: 6px; height: 6px; background: var(--ink); opacity: .6; }

/* A moving, photographic invitation into the real project gallery. */
.showcase { background: var(--ink); padding-top: clamp(72px, 8vw, 132px); overflow: hidden; }
.showcase__head { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: end; margin-bottom: 52px; }
.showcase__head .eyebrow { margin-bottom: 22px; }
.showcase__title { font-size: clamp(54px, 6.5vw, 108px); font-weight: 500; letter-spacing: -.045em; line-height: .98; }
.showcase__title em { color: var(--copper-2); }
.showcase__intro { max-width: 43ch; justify-self: end; }
.showcase__all { display: inline-flex; gap: 36px; padding-block: 20px 8px; margin-top: 6px; border-bottom: 1px solid #e8e2d75e; font-size: 15px; }
.showcase__all span { color: var(--copper-2); transition: translate .3s; }
.showcase__all:hover span { translate: 4px -4px; }
.showcase__rail { position: relative; display: flex; gap: 24px; padding-inline: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-left: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); scrollbar-width: none; }
.showcase__rail::-webkit-scrollbar { display: none; }
.showcase__rail::after { content: ''; flex: 0 0 max(0px, calc(100vw - min(72vw, 1280px) - 2 * max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))))); }
.showcase__card { position: relative; display: block; flex: 0 0 min(72vw, 1280px); height: clamp(380px, 65svh, 720px); overflow: hidden; scroll-snap-align: start; isolation: isolate; background: var(--ink-2); }
.showcase__card img { width: 100%; height: 100%; object-fit: cover; scale: 1.035; transition: scale 1.4s var(--ease); }
.showcase__card:nth-child(4) img { object-position: 50% 68%; }
.showcase__card::after { content: ''; position: absolute; z-index: 1; inset: 0; background: linear-gradient(0deg, #101712e6, transparent 58%), linear-gradient(180deg, #10171240, transparent 25%); pointer-events: none; }
.showcase__card:hover img, .showcase__card:focus-visible img { scale: 1.085; }
.showcase.is-in-view .showcase__card img { animation: project-drift 18s ease-in-out infinite alternate; }
@keyframes project-drift { from { translate: 0 -1%; } to { translate: 0 1%; } }
.showcase__number { position: absolute; z-index: 2; top: 28px; left: 30px; padding: 9px 12px; background: #151e1880; border: 1px solid #e8e2d750; backdrop-filter: blur(8px); font-size: 10px; }
.showcase__caption { position: absolute; z-index: 2; left: 34px; right: 34px; bottom: 32px; display: flex; gap: 20px; justify-content: space-between; align-items: end; }
.showcase__caption small { display: block; margin-bottom: 10px; color: #ead2b5; font-size: 11px; }
.showcase__caption strong { display: block; font-size: clamp(30px, 3.5vw, 58px); font-weight: 500; letter-spacing: -.035em; line-height: 1.06; }
.showcase__arrow { flex: none; width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid #e8e2d780; border-radius: 50%; font-size: 26px; transition: background .3s, color .3s; }
.showcase__card:hover .showcase__arrow { background: var(--paper); color: var(--ink); }
.showcase__controls { display: flex; gap: 24px; align-items: center; justify-content: space-between; padding-block: 26px 64px; }
.showcase__prompt { display: flex; align-items: center; gap: 12px; color: #c7cdbf; }
.showcase__pulse { height: 6px; width: 6px; border-radius: 50%; background: var(--copper-2); box-shadow: 0 0 0 0 #e0b78955; animation: pulse 2.4s infinite; }
.showcase__navigation { display: flex; align-items: center; gap: 12px; }
.showcase__play { color: #c7cdbf; font-size: 10px; min-height: 44px; margin-right: 20px; }
.showcase__count { color: var(--copper-2); margin-right: 16px; min-width: 7ch; }
.showcase__navigation .round { width: 44px; height: 44px; font-size: 22px; }
@media (prefers-reduced-motion: reduce) { html:not(.force-motion) .showcase.is-in-view .showcase__card img { animation: none; } }

/* Muted surfaces, with the original photographic service cards. */
#services { --muted: #c6ccbf; --faint: #b5bead; }
#method { --bg: #d4cbbb; }
.svc__desc { font-size: 16px; line-height: 1.65; padding-top: 18px; color: var(--muted); }
.svc { min-width: 0; }
.svc__media { width: 100%; min-width: 0; border: 1px solid #e8e2d71c; min-height: 424px; }
.svc__title { font-size: clamp(26px, 2.5vw, 41px); }
.svc__spec { color: #f3eee5; }
.svc__spec dd { line-height: 1.45; }
.svc__spec dl > div { padding-block: 8px; }
.proj__row { min-width: 0; }
.proj__scope { overflow-wrap: anywhere; }
.ba-caption { font-size: 11px; gap: 18px; }
.stat .stat__word { font-size: clamp(46px, 5.5vw, 86px); }
.studio__note { font-size: 13px; }
.studio__stage, .studio__panel { min-width: 0; }
.voice { border-color: #171d192e; }

/* A dark form, readable labels and generous touch targets. */
.contact { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(36px, 6vw, 112px); }
.contact > *, .fields > * { min-width: 0; }
.contact__big { font-size: clamp(48px, 6vw, 108px); line-height: 1; }
.contact__tel { font-size: clamp(28px, 3.15vw, 58px); }
.brief { --bg: #354030; --fg: #e8e2d7; --line: #d7dec052; --muted: #c6cdbf; --faint: #c0c8b8; background: var(--bg); color: var(--fg); border: 1px solid #72826955; padding: clamp(24px, 3vw, 44px); scroll-margin-top: 0; }
.brief__title { font-size: clamp(28px, 2.4vw, 40px); }
.brief__intro { font-size: 16px; line-height: 1.65; color: var(--muted); margin: -8px 0 28px; max-width: 42ch; }
.brief .eyebrow { color: #e0b789; }
.brief .opt span { min-height: 42px; height: auto; padding: 9px 13px; border-radius: 3px; font-size: 13px; }
.brief .opt input:checked + span { background: #d4b493; border-color: #d4b493; color: #20271d; }
.brief .field input, .brief .field textarea { font-size: 16px; min-width: 0; }
.brief .field input:focus + label, .brief .field input:not(:placeholder-shown) + label,
.brief .field textarea:focus + label, .brief .field textarea:not(:placeholder-shown) + label { font-size: 11px; }
.brief__preview { background: #283325; font-size: 12px; }
.brief .btn--copper { --b-bg: #d4b493; --b-fg: #20271d; --b-bd: #d4b493; }
.brief .btn { white-space: normal; line-height: 1.5; padding-block: 12px; }
.brief .field .err, .brief__status[data-kind="err"] { color: #ffc0ac; }
.foot__mark { font-size: clamp(44px, 10.8vw, 176px); line-height: 1; }
.pg, .pg__info, .jg { min-width: 0; }
.pg { scroll-margin-top: 0; }

@media (max-width: 1450px) { .hdr__meta { display: none; } }
@media (max-width: 1050px) {
  .hdr__nav { display: none; }
  .hero__project { top: 31%; }
  .contact { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .contact__tel { font-size: clamp(30px, 5vw, 48px); }
}
@media (max-width: 899px) {
  .showcase__head { grid-template-columns: 1fr; gap: 28px; }
  .showcase__intro { justify-self: start; }
  .showcase__card { flex-basis: 82vw; }
  .showcase__prompt { display: none; }
  .showcase__controls { justify-content: flex-end; }
  .hero__foot { grid-template-columns: 1fr; gap: 20px; }
  .hero__lede { max-width: 44ch; font-size: 17px; }
  .hero__act { gap: 12px; }
  .hero__try { display: none; }
  .hero__perks { font-size: 9px; }
}
@media (max-width: 700px) {
  :root { --hdr-h: 72px; --gutter: 24px; }
  .brand__word { font-size: 16px; letter-spacing: .14em; }
  .brand__est { display: block; font-size: 8px; }
  .hdr__right { margin: 0; }
  .hdr .wrap { gap: 16px; }
  .hero { height: calc(100svh - 48px); min-height: 680px; }
  .hero__finish { object-position: 57% 50%; }
  .hero__shade { background: linear-gradient(180deg, #101a17b3 0%, #101a1710 26%, #101a1780 44%, #101a17f5 100%); }
  .hero__content { padding-top: 185px; padding-bottom: 34px; }
  .hero .eyebrow { max-width: 30ch; font-size: 9px; line-height: 1.65; margin-bottom: 18px; }
  .hero .eyebrow::after { display: none; }
  .hero__title { font-size: clamp(53px, 14.5vw, 96px); line-height: .98; }
  .hero__foot { padding-top: 18px; margin-top: 22px; gap: 18px; }
  .hero__lede { font-size: 16px; line-height: 1.6; }
  .hero__ctas { gap: 8px; }
  .hero__ctas .btn { padding-inline: 14px; font-size: 10px; letter-spacing: .07em; min-height: 48px; }
  .hero__perks { display: none; }
  .hero__hint { top: calc(var(--hdr-h) + 16px); bottom: auto; left: auto; right: var(--gutter); gap: 10px; font-size: 9px; }
  .hero__hint .roller { width: 20px; }
  .hero__hint button { min-height: 36px; }
  .hero__project { top: calc(var(--hdr-h) + 76px); left: var(--gutter); right: auto; padding: 9px 12px; gap: 4px; }
  .hero__project .mono { font-size: 8px; }
  .hero__project > span:last-child { font-size: 13px; }
  .hero__project b { margin-left: 12px; }
  .marquee { height: 48px; }
  .marquee__group span { font-size: 19px; }
  .h2 { font-size: clamp(36px, 9.5vw, 60px); }
  .svc__toggle { display: block; height: 40px; line-height: 40px; }
  .svc:not(.is-open) .svc__spec { clip-path: inset(100% 0 0 0); }
  .svc:not(.is-open) .svc__title { opacity: 1; transform: none; }
  .studio__panel .btn { white-space: normal; line-height: 1.5; padding-block: 12px; }
  .showcase__head { margin-bottom: 34px; }
  .showcase__title { font-size: 58px; }
  .showcase__rail { gap: 14px; }
  .showcase__card { height: 440px; }
  .showcase__caption { left: 22px; right: 22px; bottom: 26px; }
  .showcase__caption strong { font-size: 32px; }
  .showcase__caption small { font-size: 9px; letter-spacing: .08em; }
  .showcase__number { top: 20px; left: 22px; font-size: 9px; }
  .showcase__arrow { width: 36px; height: 36px; font-size: 21px; }
  .showcase__play { margin-right: 4px; }
  .showcase__count { margin-right: 8px; font-size: 11px; }
  .sec__head { gap: 22px; }
  .ba-caption { flex-wrap: wrap; font-size: 9px; }
  .contact__big { font-size: 52px; }
  .brief { padding: 23px 20px; }
  .brief__actions { grid-template-columns: minmax(0, 1fr); }
  .brief .opt span { min-height: 44px; padding-inline: 11px; }
  .foot__mark { font-size: 10.5vw; }
}
@media (max-width: 360px) {
  .swatches { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .brand__est { font-size: 7px; letter-spacing: .1em; }
  .brand__word { font-size: 14px; }
}
/* Short windows scroll naturally instead of clipping controls or copy. */
@media (max-height: 700px) and (min-width: 701px) {
  .hero { height: auto; min-height: calc(100svh - 58px); }
  .hero__content { padding-top: 180px; padding-bottom: 38px; }
  .hero__title { font-size: clamp(64px, 10vw, 100px); }
  .hero__project { top: 34%; }
  .hero__foot { gap: 20px 44px; }
  .hero__lede { font-size: 17px; }
}

/* ==========================================================================
   Track record — facts from the company profile (M25). The rows, counters, names and year bars
   are generated by tools/build_record.py; this block only styles them.
   ========================================================================== */
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.chip span { margin-left: 5px; opacity: .55; font-variant-numeric: tabular-nums; }

/* home — curated rows carry "year · sector" in the last column */
@media (min-width: 900px) { .proj__row { grid-template-columns: 1.3fr .8fr 1.5fr .8fr; } }

/* home — track record (stone) */
.since__story .repeat { margin-top: clamp(40px, 4.5vw, 60px); max-width: 600px; }
.since__story .repeat > p.mono { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; max-width: none; margin: 0; color: #6d4a2b; padding-bottom: 12px; border-bottom: 1px solid var(--line); } /* beats .since__story p */
.repeat > .mono span { color: var(--faint); }
.repeat__list li { position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0 14px; border-bottom: 1px solid var(--line); font-size: 15.5px; }
.repeat__list li::after { content: ""; position: absolute; left: 0; bottom: -1px; width: var(--w); height: 3px; border-radius: 0 3px 3px 0; background: #7a5230; transform: scaleX(0); transform-origin: left; transition: transform 1.3s var(--ease); transition-delay: calc(.35s + var(--i, 0) * 70ms); }
.repeat.is-in .repeat__list li::after, .js-fail .repeat__list li::after { transform: none; }
.repeat__list b { font: 500 14px var(--f-mono); font-variant-numeric: tabular-nums; }
.stat [data-record-n] { font-variant-numeric: tabular-nums; }
.commit__ask { margin-top: 20px; color: #6d4a2b; line-height: 1.5; }
.commit__ask:hover { color: var(--ink); }
.since__all { margin-top: 30px; }

/* home — names band */
.names { margin-top: clamp(64px, 8vw, 112px); border-block: 1px solid var(--line); overflow: hidden; }
.names__label { width: 100%; max-width: var(--max); margin: 0 auto; padding: 18px var(--gutter) 0; color: #6d4a2b; }
.names__track { display: flex; width: max-content; animation: marquee 70s linear infinite; }
.names:hover .names__track { animation-play-state: paused; }
.names__group { display: flex; align-items: center; gap: clamp(22px, 2.4vw, 36px); padding: 14px clamp(11px, 1.2vw, 18px) 26px; }
.names__group span { font: 400 clamp(30px, 3.8vw, 58px)/1.15 var(--f-serif); letter-spacing: -.01em; white-space: nowrap; color: var(--ink); }
.names__group span:nth-child(4n+3) { font-style: italic; color: #6d4a2b; }
.names__group i { width: 7px; height: 7px; background: #7a5230; transform: rotate(45deg); flex: none; }
@media (prefers-reduced-motion: reduce) { html:not(.force-motion) .names__track { animation: none; } }

/* home — testimonial facts + the rest of the applicator page */
.voice__facts { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 22px; color: #6d4a2b; }
.voice__facts li { display: inline-flex; align-items: center; gap: 10px; }
.voice__facts li::before { content: ""; width: 6px; height: 6px; background: currentColor; transform: rotate(45deg); flex: none; }
@media (min-width: 980px) { .voice--lead .voice__facts { grid-column: 2; } }
/* supplier board: 14 logos + "Specify a system" fill every row (4 cols: CTA spans 2; 3 cols: 15 cells; 2 cols: CTA spans 2) */
.brands > .brand-cell--cta { grid-column: span 2; }
@media (min-width: 700px) and (max-width: 1099px) { .brands > .brand-cell--cta { grid-column: auto; } }
.brands__label { margin: clamp(34px, 4vw, 52px) 0 14px; color: var(--faint); }
@media (min-width: 700px) { .brands--panel { grid-template-columns: repeat(4, 1fr); } }
.addr__foot a { color: var(--copper-2); border-bottom: 1px solid #e0b78966; }
.addr__foot a:hover { border-color: var(--copper-2); }

/* projects — lede link to the register */
.pg-lede__link { color: var(--copper-2); border-bottom: 1px solid #e0b78966; transition: border-color .3s; }
.pg-lede__link:hover { border-color: var(--copper-2); }

/* projects — the register */
.reg { padding-top: clamp(84px, 10vw, 150px); scroll-margin-top: calc(var(--hdr-h) + 8px); } /* .pgs above already draws the rule */
.reg__head { display: grid; gap: 22px; margin-bottom: clamp(30px, 3.6vw, 52px); }
.reg__head .eyebrow { margin-bottom: 18px; }
.reg__head .h2 { max-width: 16ch; }
@media (min-width: 900px) { .reg__head { grid-template-columns: 1.3fr 1fr; gap: 64px; align-items: end; } }
.reg__tools { display: grid; gap: 16px; }
@media (min-width: 1100px) { .reg__tools { grid-template-columns: minmax(300px, 400px) 1fr; align-items: center; gap: 28px; } }
.reg__search { position: relative; display: flex; align-items: center; }
.reg__search svg { position: absolute; left: 16px; width: 18px; height: 18px; color: var(--faint); pointer-events: none; }
.reg__search input { width: 100%; min-height: 52px; padding: 12px 16px 12px 46px; border: 1px solid var(--line); border-radius: 3px; background: #e8e2d70a; color: var(--fg); font-size: 16px; outline: none; transition: border-color .3s, background-color .3s; }
.reg__search input::placeholder { color: var(--faint); }
.reg__search input:focus { border-color: var(--copper-2); background: #e8e2d714; }

/* contracts started per year — one series, one hue; bars <= 22px with a 4px rounded top, 2px gaps */
.yrs { position: relative; margin: 38px 0 0; }
.yrs__cap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin-bottom: 16px; color: var(--muted); }
.yrs__hint { color: var(--faint); }
.yrs__plot { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: end; height: clamp(120px, 13vw, 170px); border-bottom: 1px solid var(--line); margin-bottom: 30px; }
.yr { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding: 0 1px; }
.yr i { display: block; width: min(100% - 2px, 22px); height: var(--h); border-radius: 4px 4px 0 0; background: var(--copper); transition: height .7s var(--ease), background-color .25s, opacity .3s; }
.yr[data-n="0"] { cursor: default; }
.yr b { position: absolute; bottom: calc(var(--h) + 6px); font: 500 11px var(--f-mono); color: var(--fg); opacity: 0; transition: opacity .25s, bottom .7s var(--ease); pointer-events: none; }
.yr.is-peak b { opacity: 1; }
.yr span { position: absolute; top: calc(100% + 9px); font: 400 10px var(--f-mono); letter-spacing: .06em; color: var(--faint); opacity: 0; white-space: nowrap; }
.yr.is-tick span, .yr[aria-pressed="true"] span { opacity: 1; }
.yr[aria-pressed="true"] span { color: var(--fg); }
.yr:not([data-n="0"]):hover i, .yr:focus-visible i { background: var(--copper-2); }
.yr:focus-visible { outline-offset: -2px; }
.yr[aria-pressed="true"] i { background: var(--paper); }
.yrs.has-year .yr:not([aria-pressed="true"]) i { opacity: .38; }
@media (max-width: 700px) { .yr span { font-size: 9px; letter-spacing: 0; } .yr.is-tick:not(:first-child):not(:last-child):not([aria-pressed="true"]) span { opacity: 0; } }
.yrs__tip { position: absolute; z-index: 3; top: 0; left: 0; padding: 9px 12px; border: 1px solid var(--line); border-radius: 3px; background: var(--ink-3); color: var(--muted); font-size: 13px; white-space: nowrap; pointer-events: none; box-shadow: 0 10px 30px #0006; }
.yrs__tip b { color: var(--fg); font-size: 15px; font-weight: 500; margin-right: 4px; }

.reg__bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 20px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.reg__count { color: var(--faint); }
.reg__count b { color: var(--copper-2); font-weight: 500; }
.reg__reset { min-height: 40px; color: var(--copper-2); }
.reg__reset:hover { color: var(--fg); }
.reg__group { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: clamp(34px, 4vw, 52px) 0 12px; border-bottom: 1px solid var(--line); }
.reg__group h3 { font: 400 clamp(26px, 2.6vw, 40px)/1.1 var(--f-serif); letter-spacing: -.01em; color: var(--copper-2); }
.reg__group .mono { color: var(--faint); }
.reg__row { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 3px 16px; padding: 15px 0 16px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 15px; line-height: 1.5; }
.reg__row > * { grid-column: 2; }
.reg__row > .reg__year { grid-column: 1; grid-row: 1; padding-top: 3px; color: var(--copper-2); letter-spacing: .06em; }
.reg__name { color: var(--fg); font-size: 17px; font-weight: 500; letter-spacing: -.01em; line-height: 1.35; }
.reg__by { color: var(--faint); }
.reg__by.is-empty { display: none; }
.reg__photos { display: inline-block; margin-left: 10px; color: var(--copper-2); letter-spacing: .1em; white-space: nowrap; vertical-align: .12em; }
.reg__photos:hover { color: var(--fg); }
@media (min-width: 1000px) {
  .reg__row { grid-template-columns: 96px minmax(0, 2.1fr) minmax(0, 1.1fr) minmax(0, 1.5fr) minmax(0, 1.25fr); align-items: baseline; gap: 22px; padding: 14px 0; transition: background-color .25s; }
  .reg__row > *, .reg__row > .reg__year { grid-column: auto; grid-row: auto; padding-top: 0; }
  .reg__by.is-empty { display: block; }
  .reg__row:hover { background: #e8e2d708; }
}
.reg__more { padding: 16px 0 4px; }
.reg__more button { display: inline-flex; gap: 10px; min-height: 44px; align-items: center; font: 500 11px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--copper-2); }
.reg__more button:hover { color: var(--fg); }
html:not(.js) .reg__more, .js-fail .reg__more, html:not(.js) .reg__reset { display: none; }
.reg__empty { padding: 40px 0; color: var(--muted); font-size: 17px; }
.reg__empty a { color: var(--copper-2); border-bottom: 1px solid currentColor; }

/* home — where we've worked: generated SVG map (one dot per contract) + province counts.
   --u = viewBox units per screen pixel (set by site.js), so labels and dots keep a legible size. */
.reach__grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1000px) { .reach__grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 96px); } }
.reach__map { position: relative; margin: 0; }
.reach__svg { width: 100%; height: auto; overflow: hidden; --u: 1.4; }
.reach__svg .nb { fill: #1d241e; stroke: #3b4739; stroke-width: 1; vector-effect: non-scaling-stroke; }
.reach__svg .nb--mz { fill: #2a2b21; transition: fill .4s; }
.reach.show-mz .reach__svg .nb--mz { fill: #4a3f2c; }
.reach__svg .za { fill: #2c362d; stroke: #66755f; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.reach__svg .en { fill: #222a23; stroke: #66755f; stroke-width: .8; vector-effect: non-scaling-stroke; }
.reach__svg text { font-family: var(--f-mono); pointer-events: none; }
.reach__svg .ctry { font-size: calc(9.5px * var(--u)); letter-spacing: .16em; text-transform: uppercase; fill: #e8e2d752; }
.reach__svg .ctry--mz { fill: #e0b789a6; }
.reach__svg .twn { font-size: calc(10.5px * var(--u)); letter-spacing: .04em; fill: #e8e2d7c7; paint-order: stroke; stroke: #171d19; stroke-width: calc(3px * var(--u)); stroke-linejoin: round; }
.reach__svg .dot { fill: url(#dot-glow); transform-box: fill-box; transform-origin: center; transform: scale(var(--dot-k, 1)); transition: opacity .45s, scale .6s var(--ease); }
.reach__svg .dot.is-new { fill: url(#dot-new); }
.reach.is-playing .reach__svg .dot:not(.on) { opacity: 0; scale: .1; }
.reach.has-prov .reach__svg .town:not(.is-prov) .dot { opacity: .14; }
.reach__svg .hit { fill: transparent; cursor: pointer; }
.reach__svg .gp-ring { fill: none; stroke: #e0b789b3; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.reach__svg .gp-lead { stroke: #e0b78980; stroke-width: 1; vector-effect: non-scaling-stroke; }
.reach__svg .inset__bg { fill: #121814; }
.reach__svg .za--inset { stroke-width: .9; }
.reach__svg .inset__ring { fill: none; stroke: #e0b789; stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.reach__svg .inset__title { font-size: calc(10px * var(--u)); letter-spacing: .16em; text-transform: uppercase; fill: #e0b789; }
@media (max-width: 700px) { .reach__svg { --dot-k: 1.5; } }

.reach__year { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.reach__year .mono { color: var(--faint); }
.reach__year b { font: 500 clamp(56px, 6vw, 96px)/1 var(--f-sans); letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.reach__play { margin-left: auto; min-height: 44px; color: var(--copper-2); }
.reach__play:hover { color: var(--fg); }
html:not(.js) .reach__play, .js-fail .reach__play { display: none; }
.reach__list li { position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 13px 0 15px; border-bottom: 1px solid var(--line); font-size: 16px; transition: color .3s; }
.reach__list li::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 3px; width: calc(var(--w, 0%) * var(--f, 1)); border-radius: 0 3px 3px 0; background: var(--copper); transition: width .35s linear; }
.reach__list b { font: 500 14px var(--f-mono); font-variant-numeric: tabular-nums; color: var(--copper-2); }
.reach__list li.is-mz b { font-weight: 400; letter-spacing: .1em; text-transform: uppercase; font-size: 11px; color: var(--faint); }
.reach__list li:hover, .reach__list li.is-on { color: var(--copper-2); }
.reach__note { margin-top: 20px; color: var(--faint); font-size: 14px; line-height: 1.6; max-width: 52ch; }
.reach__tip { position: absolute; z-index: 3; top: 0; left: 0; max-width: 300px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 3px; background: var(--ink-3); color: var(--muted); font-size: 13px; line-height: 1.45; pointer-events: none; box-shadow: 0 10px 30px #0006; }
.reach__tip b { color: var(--fg); font-size: 15px; font-weight: 500; }
.reach__tip small { display: block; margin-top: 4px; color: var(--faint); font-size: 12px; }
.rv-fade { opacity: 0; transition: opacity 1.2s var(--ease); }
.rv-fade.is-in, .js-fail .rv-fade, html:not(.js) .rv-fade { opacity: 1; }
@media (max-width: 700px) { .reach__svg .twn--minor, .reach__svg .twn--in, .reach__svg .ctry { display: none; } }