/* Sabas Management — styles, v9: an institutional system. Charcoal and warm white, gold as a hairline accent,
   Cormorant Garamond (with italics) for display and numerals, Source Sans 3 for text, small-caps tracked labels,
   hairline rules, chapter numerals. Every page shares this file. */

:root {
  --paper: #F6F4F0;
  --paper-2: #EDEAE4;
  --white: #FFFFFF;
  --char: #1B1916;
  --char-2: #24211D;
  --ink: #1A1816;
  --ink-2: #44403A;
  --mute: #6B665D;
  --gold: #9C8038;
  --gold-deep: #7B6424;
  --gold-light: #CDB169;
  --line: #D9D5CC;
  --line-dark: #3A362F;

  --serif: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --sans: "Source Sans 3", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --max: 1440px;
  --pad: clamp(1.25rem, 4.5vw, 4rem);
  --bar: 5rem;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
h1, h2, h3, h4, p, figure, ul, ol, li, dl, dd, dt { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
:target { scroll-margin-top: calc(var(--bar) + 1rem); }
::selection { background: var(--gold-light); color: var(--ink); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nums { font-variant-numeric: tabular-nums lining-nums; }
p { text-wrap: pretty; }

/* ---------- the shared vocabulary ---------- */
.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--pad); }
.label { font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-deep); }
.label.light { color: var(--gold-light); }
.numeral { font-family: var(--serif); font-weight: 400; font-style: italic; font-size: 1.25rem; color: var(--gold-deep); letter-spacing: 0.02em; }
.display { font-family: var(--serif); font-weight: 400; line-height: 1.02; letter-spacing: -0.012em; color: var(--ink); text-wrap: balance; }
.display-xl { font-size: clamp(2.5rem, 1.5rem + 3.8vw, 4.75rem); max-width: 16ch; }
.display-l { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.25rem); max-width: 18ch; }
.display-m { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); line-height: 1.08; }
.lead { font-size: 1.25rem; line-height: 1.5; color: var(--ink-2); max-width: 52ch; }
.copy { font-size: 17px; line-height: 1.65; color: var(--ink-2); max-width: 60ch; }
.copy + .copy { margin-top: 1em; }
.caption { font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.75rem; min-height: 3rem; padding: 0 1.6rem; border: 1px solid var(--ink); border-radius: 0; background: transparent; color: var(--ink); font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease; }
.btn:hover { background: var(--ink); color: var(--paper); }
.btn-fill { background: var(--ink); color: var(--paper); }
.btn-fill:hover { background: var(--gold-deep); border-color: var(--gold-deep); color: var(--paper); }
.btn-light { border-color: var(--paper); color: var(--paper); }
.btn-light:hover { background: var(--paper); color: var(--ink); }
.btn-gold { border-color: var(--gold-light); color: var(--gold-light); }
.btn-gold:hover { background: var(--gold-light); color: var(--ink); }

/* ---------- the bar ---------- */
.top { position: fixed; inset: 0 0 auto 0; z-index: 20; height: var(--bar); background: rgba(246, 244, 240, 0.94); border-bottom: 1px solid var(--line); color: var(--ink); }
.top .wrap { height: 100%; display: flex; align-items: center; gap: 2rem; }
.wordmark { font-family: var(--serif); font-weight: 500; font-size: 1.125rem; letter-spacing: 0.26em; text-transform: uppercase; text-decoration: none; white-space: nowrap; margin-right: auto; }
.top-nav { display: flex; gap: 1.75rem; }
.top-nav a { font-size: 13px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; color: var(--ink-2); padding: 0.4rem 0; border-bottom: 1px solid transparent; transition: color 180ms ease, border-color 180ms ease; }
.top-nav a:hover, .top-nav a[aria-current="page"] { color: var(--ink); border-color: var(--gold); }
.top-cta { min-height: 2.5rem; padding-inline: 1.2rem; }
.menu-toggle { display: none; font-size: 13px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }
.phone-menu { position: fixed; inset: var(--bar) 0 auto 0; z-index: 19; padding: 1rem var(--pad) 1.5rem; background: var(--paper); border-bottom: 1px solid var(--line); display: grid; gap: 0.9rem; font-family: var(--serif); font-size: 1.5rem; }
.phone-menu[hidden] { display: none; }
.phone-menu a { text-decoration: none; }
.phone-menu a[aria-current="page"] { color: var(--gold-deep); }

/* ---------- home: the landing ---------- */
.gallery { position: relative; height: 100svh; min-height: 640px; overflow: hidden; background: var(--char); color: var(--paper); }
.gallery-frames { position: absolute; inset: 0; }
.gallery-frames img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; opacity: 0; transform: scale(1.04); transition: opacity 1600ms ease, transform 9000ms linear; }
.gallery-frames img.is-on { opacity: 1; transform: scale(1); }
.gallery-scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(27, 25, 22, 0.88) 0%, rgba(27, 25, 22, 0.42) 42%, rgba(27, 25, 22, 0.12) 100%); }
.gallery .wrap { position: relative; z-index: 1; height: 100%; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; column-gap: 3rem; padding-bottom: 4.5rem; padding-top: var(--bar); }
.gallery-text { display: grid; gap: 1.5rem; justify-items: start; }
.gallery-text .label { color: var(--gold-light); }
.gallery-h { font-family: var(--serif); font-weight: 400; font-size: clamp(2.75rem, 1.4rem + 4.8vw, 5.5rem); line-height: 0.98; letter-spacing: -0.015em; color: var(--paper); text-wrap: balance; max-width: 13ch; }
.gallery-h em { font-style: italic; font-weight: 400; }
.gallery-line { max-width: 42ch; font-size: 1.125rem; line-height: 1.55; color: #D9D4C9; }
.gallery-meta { display: grid; justify-items: end; text-align: right; gap: 0.5rem; align-self: end; }
.gallery-name { font-family: var(--serif); font-size: 1.625rem; line-height: 1.1; color: var(--paper); }
.gallery-fact { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: #BDB7AB; }
.gallery-dots { display: none; gap: 0.5rem; margin-top: 0.75rem; }
.gallery-dots:has(button:nth-child(2)) { display: flex; }
.gallery-dots:empty { display: none; }
.gallery-dots button { width: 32px; height: 2px; background: var(--paper); opacity: 0.35; transition: opacity 180ms ease; }
.gallery-dots button[aria-pressed="true"] { opacity: 1; }

/* ---------- chapters ---------- */
.chapter { padding: 5.5rem 0; }
.chapter-head { display: grid; grid-template-columns: 8rem minmax(0, 7fr) minmax(0, 4fr); column-gap: 2.5rem; align-items: end; padding-bottom: 2rem; border-bottom: 1px solid var(--line); margin-bottom: 3rem; }
.chapter-head .numeral { align-self: start; padding-top: 0.6rem; }
.dark { background: var(--char); color: var(--paper); }
.dark .chapter-head { border-color: var(--line-dark); }
.dark .numeral { color: var(--gold-light); }
.dark .display { color: var(--paper); }
.dark .lead, .dark .copy { color: #CFCAC0; }

/* ---------- the record: chart beside its explanation ---------- */
.record-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 3.5rem; align-items: start; }
.record-text .copy { max-width: 44ch; }
.picker { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; }
.picker button { font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #A9A398; padding: 0.3rem 0; border-bottom: 1px solid transparent; transition: color 180ms ease, border-color 180ms ease; }
.picker button[aria-pressed="true"] { color: var(--gold-light); border-color: var(--gold-light); }
.picker button:hover { color: var(--paper); }
.record-text .btn { margin-top: 2rem; }
.ledger { width: 100%; }
.ledger-title { font-family: var(--serif); font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); line-height: 1.25; color: var(--paper); margin: 0 0 1.25rem; max-width: 30ch; }
.ledger-title em { font-style: normal; color: var(--gold-light); }
.ledger-chart { position: relative; width: 100%; height: clamp(320px, 50vh, 560px); }
.ledger-chart svg { width: 100%; height: 100%; display: block; overflow: visible; }
.ledger-chart text { font-family: var(--sans); font-size: 13px; fill: #B8B2A6; letter-spacing: 0.04em; }
.ledger-chart .ylab { font-size: 14px; fill: #CFCAC0; }
.ledger-chart .base { font-size: 13px; fill: #A9A398; }
.ledger-chart .grid { stroke: var(--line-dark); stroke-width: 1; }
.ledger-chart .axis-line { stroke: #6F6A60; stroke-width: 1; }
.ledger-chart .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ledger-chart .line-cohort { stroke: var(--gold-light); }
.ledger-chart .line-control { stroke: #CFCAC0; stroke-dasharray: 8 6; }
.ledger-chart .mk { stroke: var(--char); stroke-width: 1.5; }
.ledger-chart .mk-cohort { fill: var(--gold-light); }
.ledger-chart .mk-control { fill: #B8B2A6; }
.ledger-chart .end { font-size: 15px; letter-spacing: 0.02em; font-weight: 600; }
.ledger-chart .end-cohort { fill: var(--gold-light); }
.ledger-chart .end-control { fill: #CFCAC0; }
.ledger-chart .xhair { stroke: var(--paper); stroke-opacity: 0.5; stroke-width: 1; }
.ledger-legend { display: flex; gap: 2rem; margin-bottom: 1rem; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: #CFCAC0; }
.ledger-legend span::before { content: ''; display: inline-block; width: 22px; height: 0; border-top: 2px solid var(--gold-light); vertical-align: middle; margin-right: 0.6rem; }
.ledger-legend .lg-control::before { border-top-style: dashed; border-top-color: #B8B2A6; }
.tip .tip-n { color: var(--mute); }
.ledger-chart .note { fill: var(--paper); font-size: 13px; letter-spacing: 0.04em; }
.ledger-caption { margin-top: 1.25rem; font-size: 15px; line-height: 1.5; color: #CFCAC0; max-width: 80ch; }
.tip { position: fixed; z-index: 30; pointer-events: none; padding: 0.45rem 0.75rem; background: var(--paper); color: var(--ink); font-size: 13px; letter-spacing: 0.06em; white-space: nowrap; }
.tip[hidden] { display: none; }

/* ---------- figures in a row ---------- */
.figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 2rem; row-gap: 2rem; margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--line-dark); }
.figure-n { font-family: var(--serif); font-weight: 400; font-size: clamp(2.75rem, 1.6rem + 3vw, 4.25rem); line-height: 1; color: var(--paper); }
.figure-l { margin-top: 0.6rem; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: #A9A398; max-width: 26ch; line-height: 1.6; }

/* ---------- principles: a numbered list with rules ---------- */
.principles { display: grid; }
.principle { display: grid; grid-template-columns: 8rem minmax(0, 5fr) minmax(0, 6fr); column-gap: 2rem; padding: 2.25rem 0; border-bottom: 1px solid var(--line); align-items: start; }
.principle:first-child { border-top: 1px solid var(--line); }
.principle h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.625rem, 1.2rem + 1.2vw, 2.125rem); line-height: 1.1; color: var(--ink); }
.principle p:not(.numeral) { font-size: 17px; line-height: 1.6; color: var(--ink-2); max-width: 58ch; }

/* ---------- the pinned story ---------- */
.story { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 3.5rem; }
.story-pin { position: sticky; top: calc(var(--bar) + 10vh); align-self: start; }
.story-line { margin-top: 0.75rem; font-family: var(--serif); font-weight: 400; font-size: clamp(2.25rem, 1.3rem + 3.2vw, 4.25rem); line-height: 1.02; letter-spacing: -0.012em; color: var(--ink); text-wrap: balance; transition: opacity 250ms ease; }
.story-sub { margin-top: 1.25rem; max-width: 36ch; font-size: 1.125rem; line-height: 1.55; color: var(--ink-2); transition: opacity 250ms ease; }
.story-reel { display: grid; row-gap: 1.25rem; }
.story-frame img { width: 100%; height: 60vh; object-fit: cover; }
.story-frame figcaption { margin-top: 0.75rem; display: flex; justify-content: space-between; gap: 1rem; }

/* ---------- the collection grid ---------- */
.collection { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.piece { display: grid; gap: 0.75rem; text-decoration: none; }
.piece-frame { display: block; overflow: hidden; aspect-ratio: 4 / 3; background: var(--paper-2); }
.piece-frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 1400ms var(--ease-soft); }
.piece:hover .piece-frame img { transform: scale(1.04); }
.piece-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-top: 0.6rem; border-top: 1px solid var(--line); }
.piece-name { font-family: var(--serif); font-size: 1.375rem; line-height: 1.1; color: var(--ink); }
.piece-fact { font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); white-space: nowrap; }
.collection-foot { margin-top: 2.5rem; display: flex; justify-content: space-between; align-items: center; gap: 2rem; }

/* ---------- partners, in a row ---------- */
.partners { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 3rem; row-gap: 2rem; }
.partner { padding-top: 1.25rem; border-top: 1px solid var(--line); }
.partner h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.625rem, 1.2rem + 1.2vw, 2.125rem); line-height: 1.1; color: var(--ink); }
.partner .role { margin-top: 0.4rem; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-deep); }
.partner p:not(.role) { margin-top: 0.9rem; color: var(--ink-2); }

/* ---------- questions ---------- */
.faq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 3.5rem; align-items: start; }
.faq-list details { border-top: 1px solid var(--line); }
.faq-list details:last-child { border-bottom: 1px solid var(--line); }
.faq-list summary { list-style: none; cursor: pointer; padding: 1.25rem 2.5rem 1.25rem 0; position: relative; font-family: var(--serif); font-size: 1.375rem; line-height: 1.2; color: var(--ink); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; position: absolute; right: 0.25rem; top: 1rem; font-family: var(--serif); font-size: 1.5rem; color: var(--gold-deep); transition: transform 200ms ease; }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details p { padding: 0 0 1.5rem; max-width: 60ch; color: var(--ink-2); }

/* ---------- the closing band ---------- */
.close { background: var(--char); color: var(--paper); padding: 5rem 0; }
.close .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 3rem; align-items: center; }
.close .label { margin-bottom: 0.75rem; }
.close > .wrap > div:first-child, .close-text { display: block; }
.close-h { font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 1.3rem + 2.4vw, 3.25rem); max-width: 14ch; line-height: 1.04; color: var(--paper); text-wrap: balance; }
.close-actions { display: grid; justify-items: start; gap: 1rem; justify-self: end; }
.close-mail { font-family: var(--serif); font-size: 1.5rem; color: var(--gold-light); text-decoration: none; }
.close-mail:hover { text-decoration: underline; }

/* ---------- footer ---------- */
.foot { background: var(--char); color: #A9A398; border-top: 1px solid var(--line-dark); padding: 3rem 0 1.5rem; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 4fr) repeat(2, minmax(0, 2fr)) minmax(0, 4fr); column-gap: 2rem; row-gap: 1.5rem; font-size: 15px; line-height: 1.6; }
.foot .crest { width: 72px; margin-bottom: 0.9rem; }
.foot-name { font-family: var(--serif); font-size: 1rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--paper); }
.foot h4 { font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--paper); margin-bottom: 0.6rem; }
.foot a { color: #CFCAC0; text-decoration: none; }
.foot a:hover { color: var(--paper); }
.foot ul li { margin-bottom: 0.25rem; }
.foot-legal { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line-dark); display: grid; grid-template-columns: 1fr 1fr; column-gap: 3rem; row-gap: 1rem; font-size: 16px; line-height: 1.6; color: #8E887C; }
.foot-legal a { color: #A9A398; text-decoration: underline; }
.foot-line { margin-top: 1.5rem; display: flex; justify-content: space-between; gap: 1rem; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: #8E887C; }

/* ---------- inner pages: the mast ---------- */
.mast { padding: calc(var(--bar) + 4rem) 0 0; }
.mast .wrap { display: grid; grid-template-columns: 8rem minmax(0, 7fr) minmax(0, 4fr); column-gap: 2rem; align-items: end; padding-bottom: 2.5rem; border-bottom: 1px solid var(--line); }
.mast .numeral { align-self: start; padding-top: 0.75rem; }
.mast .label { margin-bottom: 0.75rem; }
.mast-photo { max-width: var(--max); margin: 0 auto; padding: 2rem var(--pad) 0; }
.mast-photo img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
.mast-photo figcaption { margin-top: 0.75rem; }

/* ---------- the record page: the hold switch ---------- */
.hold { padding: 4rem 0; }
.hold .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 3.5rem; align-items: center; }
.hold-h { margin-top: 0.5rem; font-family: var(--serif); font-weight: 400; font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem); line-height: 1.08; color: var(--ink); }
.hold-sentence { margin-top: 1rem; color: var(--ink-2); font-size: 1.125rem; line-height: 1.55; }
.hold-sentence strong { color: var(--gold-deep); font-weight: 600; }
.switch { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--ink); }
.switch-opt { display: grid; align-content: center; justify-items: start; gap: 0.5rem; padding: 2rem; text-align: left; color: var(--ink-2); background: transparent; transition: background-color 300ms ease, color 300ms ease; }
.switch-opt[aria-checked="true"] { background: var(--ink); color: var(--paper); }
.switch-n { font-family: var(--serif); font-weight: 400; font-size: clamp(3rem, 2rem + 4vw, 6rem); line-height: 0.9; }
.switch-l { font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; }
.switch-thumb { display: none; }

/* ---------- figure lines ---------- */
.lines { display: grid; }
.line-row { display: grid; grid-template-columns: 10rem minmax(0, 1fr); column-gap: 2rem; align-items: baseline; padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
.line-row:first-child { border-top: 1px solid var(--line); }
.line-row dt { font-family: var(--serif); font-weight: 400; font-size: 2.5rem; line-height: 1; color: var(--ink); text-align: right; }
.line-row dd { color: var(--ink-2); max-width: 60ch; }

/* ---------- the work page: stages ---------- */
.stages { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 3.5rem; align-items: center; }
.stage-clause { margin-top: 0.5rem; font-family: var(--serif); font-weight: 400; font-size: clamp(2.25rem, 1.3rem + 3.2vw, 4.25rem); line-height: 1.02; letter-spacing: -0.012em; color: var(--ink); text-wrap: balance; transition: opacity 200ms ease; }
.stage-text { margin-top: 1.25rem; max-width: 40ch; color: var(--ink-2); font-size: 1.125rem; transition: opacity 200ms ease; }
.stage-track { margin-top: 2.5rem; max-width: 36rem; }
#stage-range { width: 100%; height: 2px; margin: 0; appearance: none; -webkit-appearance: none; background: var(--line); }
#stage-range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); border: 0; cursor: grab; }
#stage-range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--ink); border: 0; cursor: grab; }
.stage-names { margin-top: 0.9rem; display: grid; grid-template-columns: repeat(4, 1fr); font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute); }
.stage-names span:nth-child(2), .stage-names span:nth-child(3) { text-align: center; }
.stage-names span:nth-child(4) { text-align: right; }
.stage-names .is-on { color: var(--ink); }
.stage-right { position: relative; overflow: hidden; min-height: 60vh; display: grid; place-items: center; padding: 3rem; }
.stage-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity 600ms var(--ease), transform 1400ms var(--ease-expo); }
.stage-photo.is-on { opacity: 1; transform: none; }
.file { position: relative; z-index: 1; width: min(100%, 420px); background: var(--paper); color: var(--ink); padding: 1.5rem 1.6rem 1.7rem; transition: opacity 200ms ease; }
.file-title { font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-deep); }
.file-car { margin-top: 0.35rem; font-family: var(--serif); font-size: 1.75rem; line-height: 1.1; }
.file-rows { margin-top: 1rem; display: grid; }
.file-rows > div { display: grid; grid-template-columns: 7rem 1fr; column-gap: 0.75rem; padding: 0.6rem 0; border-top: 1px solid var(--line); font-size: 14.5px; line-height: 1.45; }
.file-rows dt { font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute); padding-top: 0.15rem; }
.file-rows dd { color: var(--ink); }

/* ---------- the cars page ---------- */
.cars-controls { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; align-items: center; padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); }
.tier-filter { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.chip { font-size: 14px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); padding: 0.3rem 0; border-bottom: 1px solid transparent; transition: color 180ms ease, border-color 180ms ease; }
.chip[aria-pressed="true"] { color: var(--ink); border-color: var(--gold); }
.chip:hover { color: var(--ink); }
.cars-count { margin-left: auto; font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); }
.cars-table { font-family: var(--serif); font-weight: 400; font-size: clamp(1.25rem, 1rem + 0.8vw, 1.625rem); line-height: 1.4; }
.tier-head { font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-deep); padding: 2.25rem 0 0.6rem; }
.row { display: grid; grid-template-columns: 40% 20% 20% 1fr; column-gap: 1rem; align-items: baseline; padding: 0.55rem 0; border-bottom: 1px solid var(--line); }
.row > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-tier, .c-year { font-family: var(--sans); font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); }
.c-year { text-align: right; }
.cars-table.is-flat .tier-head { display: none; }
.cars-table[data-show]:not([data-show="all"]) .tier-group { display: none; }
.cars-table[data-show="A"] .tier-group[data-tier="A"], .cars-table[data-show="B"] .tier-group[data-tier="B"], .cars-table[data-show="C"] .tier-group[data-tier="C"], .cars-table[data-show="D"] .tier-group[data-tier="D"], .cars-table[data-show="E"] .tier-group[data-tier="E"] { display: block; }
.row.is-hidden { display: none; }

/* ---------- the about page ---------- */
.firm { display: grid; grid-template-columns: 15rem minmax(0, 1fr); column-gap: 3rem; }
.firm-text .display { max-width: 24ch; }
.firm-text .copy { margin-top: 1.5rem; }
.firm-facts { display: grid; gap: 0.3rem; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); align-content: start; }
.firm-facts a { color: var(--mute); text-decoration: none; text-transform: none; letter-spacing: 0.04em; font-size: 14px; overflow-wrap: anywhere; }

/* ---------- contact ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); column-gap: 3.5rem; align-items: center; }
.contact-form { position: relative; margin-top: 1.5rem; max-width: 34rem; }
.contact-field { width: 100%; height: 3.5rem; padding: 0 4rem 0 1rem; border: 1px solid var(--ink); border-radius: 0; background: var(--white); color: var(--ink); font-size: 1rem; }
.contact-field::placeholder { color: #9A948A; }
.contact-field:focus { outline: 2px solid var(--gold); outline-offset: -2px; }
.contact-go { position: absolute; top: 0; right: 0; width: 3.5rem; height: 3.5rem; background: var(--ink); color: var(--paper); display: grid; place-items: center; transition: background-color 180ms ease; }
.contact-go:hover { background: var(--gold-deep); }
.contact-next { margin-top: 0.75rem; font-size: 15px; color: var(--mute); }
.contact-rows { margin-top: 2.5rem; display: grid; }
.contact-rows > div { display: grid; grid-template-columns: 8rem 1fr; column-gap: 1rem; padding: 0.9rem 0; border-top: 1px solid var(--line); }
.contact-rows > div:last-child { border-bottom: 1px solid var(--line); }
.contact-rows dt { font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); padding-top: 0.2rem; }
.contact-rows dd { color: var(--ink); }
.contact-rows dd a { text-decoration: none; }
.contact-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.contact-photo figcaption { margin-top: 0.75rem; }

/* ---------- motion ---------- */
/* Inner-page heroes: the landing's look carried through the site. */
.gallery-short { height: 74svh; min-height: 520px; max-height: 760px; }
.gallery-short .gallery-h { font-size: clamp(2.5rem, 1.2rem + 4vw, 4.75rem); max-width: 16ch; }
.gallery-numeral { font-family: var(--serif); font-style: italic; font-size: 1.25rem; color: var(--gold-light); }

/* Doors: four photographs in a row, each with a tracked label, a serif line and a sentence. */
.doors { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
.door { display: grid; grid-template-rows: auto auto auto 1fr; gap: 0.75rem; }
.door-frame { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--char); }
.door-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1400ms var(--ease-soft); }
.door:hover .door-frame img { transform: scale(1.04); }
.door-frame::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(27, 25, 22, 0.7), rgba(27, 25, 22, 0) 55%); }
.door-num { position: absolute; left: 1rem; bottom: 0.9rem; z-index: 1; font-family: var(--serif); font-style: italic; font-size: 1.25rem; color: var(--gold-light); }
.door .label { padding-top: 0.5rem; border-top: 1px solid var(--line); }
.door h3 { font-family: var(--serif); font-weight: 400; font-size: 1.625rem; line-height: 1.1; color: var(--ink); }
.door p { font-size: 1rem; line-height: 1.55; color: var(--ink-2); }

/* The collection: an empty state, stated plainly. */
.empty { display: grid; grid-template-columns: 8rem minmax(0, 7fr) minmax(0, 4fr); column-gap: 2rem; align-items: start; padding: 3rem 0; border-bottom: 1px solid var(--line); }
.empty-n { font-family: var(--serif); font-size: clamp(5rem, 3rem + 8vw, 11rem); line-height: 0.9; color: var(--ink); }
.empty-l { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); margin-top: 0.75rem; }

/* Cards: a photograph that flips to the specification and what makes the car special. */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.card { position: relative; perspective: 1400px; text-align: left; display: block; width: 100%; cursor: pointer; }
.card-inner { position: relative; display: grid; transition: transform 700ms var(--ease-soft); transform-style: preserve-3d; }
.card-face { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: grid; grid-template-rows: auto 1fr; min-height: 100%; }
.card-front { background: var(--paper-2, #EEEBE4); }
.card-frame { aspect-ratio: 4 / 3; overflow: hidden; background: var(--char); }
.card-frame img { width: 100%; height: 100%; object-fit: cover; }
.card-meta { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 0.5rem 1rem; padding: 1rem 1.1rem 1.1rem; border: 1px solid var(--line); border-top: 0; }
.card-name { font-family: var(--serif); font-size: 1.5rem; line-height: 1.1; color: var(--ink); }
.card-fact { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); white-space: nowrap; }
.card-hint { grid-column: 1 / -1; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-deep); }
.card-back { visibility: hidden; transition: visibility 0s 350ms; transform: rotateY(180deg); background: var(--char); color: var(--paper); padding: 1.5rem 1.5rem 1.6rem; grid-template-rows: auto auto 1fr; gap: 1rem; }
.card-back .card-name { color: var(--paper); }
.card-back .label { color: var(--gold-light); }
.spec { display: grid; grid-template-columns: 7rem 1fr; gap: 0.45rem 1rem; font-size: 15px; line-height: 1.4; }
.spec dt { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: #A9A398; padding-top: 0.2rem; }
.spec dd { color: var(--paper); }
.card-special { font-family: var(--serif); font-size: 1.2rem; line-height: 1.35; color: #E8E3D8; align-self: end; padding-top: 1rem; border-top: 1px solid var(--line-dark); }
.card-front { transition: visibility 0s 350ms; }
.card[aria-pressed="true"] .card-inner { transform: rotateY(180deg); }
.card[aria-pressed="true"] .card-back { visibility: visible; }
.card[aria-pressed="true"] .card-front { visibility: hidden; }
.card:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  .card-inner, .stage-photo { transition: none; }
  .stage-photo { transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .js [data-rise] { opacity: 0; transform: translateY(16px); animation: ad-rise 800ms var(--ease) forwards; animation-delay: calc(var(--i, 0) * 110ms + 120ms); }
  .js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 650ms var(--ease), transform 850ms var(--ease-expo); transition-delay: calc(var(--i, 0) * 70ms); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  .js .row { opacity: 0; transform: translateY(6px); transition: opacity 450ms var(--ease), transform 600ms var(--ease-expo); transition-delay: calc(var(--i, 0) * 35ms); }
  .js .row.is-in { opacity: 1; transform: none; }
}
@keyframes ad-rise { to { opacity: 1; transform: none; } }
@keyframes ad-pop { from { opacity: 0; transform: scale(0.4); transform-box: fill-box; transform-origin: center; } to { opacity: 1; transform: none; } }

/* ---------- tablet ---------- */
@media (max-width: 64em) {
  .top-nav, .top-cta { display: none; }
  .menu-toggle { display: inline-block; }
  .gallery .wrap { grid-template-columns: 1fr; row-gap: 2rem; }
  .gallery-meta { justify-items: start; text-align: left; }
  .chapter-head { grid-template-columns: 1fr; row-gap: 0.75rem; }
  .record-grid { grid-template-columns: 1fr; row-gap: 2.5rem; }
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .principle { grid-template-columns: 1fr; row-gap: 0.6rem; }
  .story { grid-template-columns: 1fr; row-gap: 2rem; }
  .story-pin { position: static; }
  .story-frame img { height: 52vh; }
  .collection { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .doors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .empty { grid-template-columns: 1fr; row-gap: 1rem; }
  .partners { grid-template-columns: 1fr; }
  .faq { grid-template-columns: 1fr; row-gap: 2rem; }
  .close .wrap { grid-template-columns: 1fr; row-gap: 2rem; }
  .close-actions { justify-self: start; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-legal { grid-template-columns: 1fr; }
  .mast .wrap { grid-template-columns: 1fr; row-gap: 1rem; }
  .hold .wrap { grid-template-columns: 1fr; row-gap: 2rem; }
  .stages { grid-template-columns: 1fr; row-gap: 2rem; }
  .firm { grid-template-columns: 1fr; row-gap: 1.5rem; }
  .contact-grid { grid-template-columns: 1fr; row-gap: 2.5rem; }
  .row { grid-template-columns: 55% 25% 1fr; }
  .c-tier { display: none; }
  .cars-table.is-flat .c-tier { display: block; }
  .cars-table.is-flat .row { grid-template-columns: 40% 20% 20% 1fr; }
}

/* ---------- phone ---------- */
@media (max-width: 47.99em) {
  :root { --bar: 4rem; }
  .wordmark { font-size: 0.9375rem; letter-spacing: 0.2em; }
  .gallery { min-height: 560px; }
  .gallery .wrap { padding-bottom: 2.5rem; }
  .gallery-h { font-size: 13vw; max-width: none; }
  .gallery-line { font-size: 1rem; }
  .chapter { padding: 3.5rem 0; }
  .chapter-head { margin-bottom: 2rem; }
  .figures { grid-template-columns: 1fr; row-gap: 1.5rem; margin-top: 2.5rem; }
  .story-frame img { height: 42vh; }
  .collection { grid-template-columns: 1fr; }
  .doors { grid-template-columns: 1fr; }
  .door h3 { font-size: 1.4rem; }
  .cards { grid-template-columns: 1fr; }
  .card-meta { grid-template-columns: 1fr; }
  .card-name { font-size: 1.35rem; }
  .gallery-short { min-height: 460px; }
  .collection-foot { flex-direction: column; align-items: flex-start; }
  .close { padding: 3.5rem 0; }
  .foot-grid { grid-template-columns: 1fr; }
  .mast { padding-top: calc(var(--bar) + 2.5rem); }
  .mast-photo img { aspect-ratio: 16 / 10; }
  .switch-opt { padding: 1.25rem; }
  .line-row { grid-template-columns: 1fr; row-gap: 0.25rem; }
  .line-row dt { text-align: left; font-size: 2rem; }
  .stage-right { min-height: 48vh; padding: 1.5rem; }
  .cars-count { margin-left: 0; flex-basis: 100%; }
  .cars-table { font-size: 1.25rem; }
  .row, .cars-table.is-flat .row { display: flex; flex-wrap: wrap; column-gap: 0.75rem; padding: 0.5rem 0 0.8rem; }
  .row > span { white-space: normal; overflow: visible; }
  .c-car { flex-basis: 100%; line-height: 1.2; }
  .c-tier, .c-units, .c-year { display: block; font-family: var(--sans); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); text-align: left; }
  .c-year::before { content: "introduced "; }
  .contact-rows > div { grid-template-columns: 1fr; row-gap: 0.1rem; }
  .foot-line { flex-direction: column; gap: 0.4rem; }
}


/* ======================================================================
   v11 (11/9): the Entourage Effect structure in Sabas colours. A deep charcoal field with a gold rule and white
   serif where theirs is green; the car stands where their leaf stands; crest left, headline right; three figures
   with hairline dividers; numbered cards; the chart as the proof; a quiet footer. Later rules win over the v9 ones.
   ====================================================================== */
:root { --field: #1B1916; --field-2: #2A2620; --bar: 5.5rem; }
body { font-size: 17px; }
.h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.9rem, 1.3rem + 1.7vw, 2.625rem); line-height: 1.12; letter-spacing: -0.005em; color: var(--ink); text-wrap: balance; max-width: 22ch; }
.h2 em { font-style: italic; color: var(--gold-deep); }
.h2.light { color: var(--paper); }
.h2.light em { color: var(--gold-light); }
.sub { margin-top: 1.25rem; font-size: 17px; line-height: 1.65; color: var(--ink-2); max-width: 52ch; }
.adv .sub, .team .sub { color: #CFCAC0; }
.adv .btn, .team .btn, .rec .btn, .intro .btn { margin-top: 2rem; }
.btn { border-radius: 2px; font-size: 14px; letter-spacing: 0.08em; text-transform: none; font-weight: 600; }
.btn-outline { border: 1px solid var(--gold); color: var(--gold-deep); background: transparent; }
.btn-outline:hover { background: var(--gold); color: var(--paper); border-color: var(--gold); }

/* header: crest and name left, links right, the outlined button */
.top { height: var(--bar); background: rgba(246, 244, 240, 0.96); border-bottom: 1px solid var(--line); }
.top .wrap { gap: 2.5rem; }
.brand { display: flex; align-items: center; gap: 0.8rem; text-decoration: none; color: var(--ink); margin-right: auto; }
.brand img { width: 44px; height: auto; }
.brand-text { display: grid; line-height: 1.1; }
.brand-name { font-family: var(--serif); font-weight: 500; font-size: 1.375rem; letter-spacing: 0.01em; }
.brand-sub { font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-deep); margin-top: 0.2rem; }
.top-nav { gap: 2rem; }
.top-nav a { font-family: var(--serif); font-size: 14px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-2); padding: 0.35rem 0; border-bottom: 1px solid transparent; }
.top-nav a:hover, .top-nav a[aria-current="page"] { color: var(--gold-deep); border-color: var(--gold); }
.top-cta { min-height: 2.75rem; padding-inline: 1.25rem; }
.phone-menu a { display: block; padding: 0.75rem 0; font-size: 17px; font-weight: 600; border-bottom: 1px solid var(--line); }

/* the band: a deep field, a gold rule, the headline; the car in the field */
.band { position: relative; overflow: hidden; background: linear-gradient(118deg, var(--field) 0%, var(--field-2) 55%, #1F1C18 100%); color: var(--paper); padding-top: var(--bar); min-height: 54svh; display: grid; align-items: center; }
.band-tall { min-height: 92svh; }
.band .wrap { position: relative; z-index: 2; width: 100%; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; padding-block: 5rem 4.5rem; }
.band-ghost { position: absolute; z-index: 0; top: 0; right: 0; bottom: 0; left: 30%; width: 70%; height: 100%; object-fit: cover; object-position: 60% 55%; opacity: 0.42; filter: saturate(0.75) contrast(1.05);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 42%, #000 100%), linear-gradient(180deg, #000 60%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 42%, #000 100%), linear-gradient(180deg, #000 60%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
.band-tall .band-ghost { left: 26%; width: 74%; opacity: 0.5; }
.band-text { border-left: 2px solid var(--gold-light); padding-left: clamp(1.5rem, 3vw, 2.75rem); }
.band-label { font-size: 13px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 1.25rem; }
.band-h { font-family: var(--serif); font-weight: 400; font-size: clamp(2.4rem, 1.4rem + 3.4vw, 3.9rem); line-height: 1.08; letter-spacing: -0.008em; color: var(--paper); text-wrap: balance; max-width: 15ch; }
.band-h em { font-style: italic; color: var(--gold-light); }
.band-lead { margin-top: 1.5rem; font-size: 17px; line-height: 1.6; color: #CFCAC0; max-width: 46ch; }
.band-credit { justify-self: end; align-self: end; font-family: var(--serif); font-size: 1.125rem; color: #CFCAC0; opacity: 0.85; }
.band-more { position: absolute; z-index: 2; left: 50%; bottom: 1.5rem; transform: translateX(-50%); color: var(--gold-light); }
.band-more:hover { color: var(--paper); }

/* the introduction: crest left, headline and copy right */
.intro { background: var(--paper); padding: 6rem 0; }
.intro-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 4rem; align-items: center; }
.intro-mark { display: grid; place-items: center; }
.intro-mark img { width: min(100%, 360px); height: auto; }
.intro-text .copy { margin-top: 1.25rem; max-width: 56ch; }
.intro-text .h2 { margin-bottom: 0.5rem; }

/* three figures with hairline dividers */
.stats { background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 4.5rem 0; }
.stats-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stats-row > div { text-align: center; padding: 0.5rem 2rem; border-left: 1px solid var(--line); }
.stats-row > div:first-child { border-left: 0; }
.stat-n { font-family: var(--serif); font-weight: 400; font-size: clamp(2.5rem, 1.6rem + 3vw, 4rem); line-height: 1; color: var(--ink); }
.stat-l { margin-top: 0.9rem; font-size: 15px; color: var(--ink-2); }

/* the deep sections */
.adv, .team { background: linear-gradient(118deg, var(--field) 0%, var(--field-2) 60%, #1F1C18 100%); color: var(--paper); padding: 6.5rem 0; }
.adv-grid, .team-grid, .rec-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 4rem; align-items: center; }
.team-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }

/* the deck of numbered cards: one in view, the next peeking, the way theirs turns */
.deck { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 2.5rem; column-gap: 1.5rem; align-items: start; }
.deck-track { position: relative; min-height: 400px; }
.deck-card { background: var(--paper); color: var(--ink); padding: 2.25rem 2.5rem 2.5rem; border-radius: 2px; }
.deck-card h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem); line-height: 1.15; color: var(--ink); margin-top: 0.5rem; }
.deck-card p:not(.deck-num) { margin-top: 1rem; color: var(--ink-2); font-size: 17px; line-height: 1.6; }
.deck-num { font-family: var(--serif); font-size: clamp(2.5rem, 1.6rem + 2.4vw, 3.5rem); line-height: 1; color: var(--gold); letter-spacing: 0.02em; }
.js .deck-track { overflow: hidden; }
.js .deck-card { position: absolute; inset: 0 0 auto 0; transition: transform 700ms var(--ease-expo), opacity 500ms var(--ease); }
.js .deck-card[data-pos="on"] { transform: none; opacity: 1; z-index: 2; }
.js .deck-card[data-pos="next"] { transform: translateY(2.5rem); opacity: 0; z-index: 0; visibility: hidden; transition: transform 700ms var(--ease-expo), opacity 500ms var(--ease), visibility 0s 500ms; }
.js .deck-card[data-pos="after"] { transform: translateY(2.5rem); opacity: 0; z-index: 0; visibility: hidden; transition: transform 700ms var(--ease-expo), opacity 500ms var(--ease), visibility 0s 500ms; }
.js .deck-card[data-pos="prev"] { transform: translateY(-2.5rem); opacity: 0; z-index: 0; visibility: hidden; transition: transform 700ms var(--ease-expo), opacity 500ms var(--ease), visibility 0s 500ms; }
.deck-nav { display: grid; justify-items: center; gap: 0.9rem; color: var(--gold-light); padding-top: 0.5rem; }
.deck-btn { color: var(--gold-light); display: grid; }
.deck-btn:hover { color: var(--paper); }
.deck-dots { display: grid; gap: 0.6rem; }
.deck-dots button { width: 8px; height: 8px; border-radius: 50%; background: #6F6A60; }
.deck-dots button[aria-selected="true"] { background: var(--gold-light); }
html:not(.js) .deck-track { display: grid; gap: 1rem; }
html:not(.js) .deck-nav { display: none; }

/* the work page's four parts, as the same cards laid out whole */
.parts { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.part { background: var(--paper); color: var(--ink); padding: 2rem 2.25rem 2.25rem; border-radius: 2px; }
.part h3 { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; line-height: 1.15; margin-top: 0.4rem; }
.part p:not(.deck-num) { margin-top: 0.8rem; color: var(--ink-2); font-size: 16px; line-height: 1.6; }

/* the record: words left, the chart in a deep panel right */
.rec { background: var(--paper); padding: 6.5rem 0; }
.rec-panel { background: var(--field); color: var(--paper); padding: 2rem 2.25rem 2.25rem; border-radius: 2px; }
.rec-panel-wide { padding: 2.5rem clamp(1.5rem, 3vw, 3rem) 2.75rem; }
.rec-panel .ledger-title { font-size: clamp(1.25rem, 1rem + 0.8vw, 1.625rem); max-width: 34ch; }
.rec-panel .ledger-chart { height: clamp(260px, 36vh, 420px); }
.rec-panel-wide .ledger-chart { height: clamp(320px, 50vh, 560px); }
.rec-panel .ledger-caption { font-size: 14px; }

/* the team teaser: words left, a photograph right with a gold edge */
.team-photo { position: relative; margin: 0; }
.team-photo img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; }
.team-photo::before { content: ''; position: absolute; inset: 1.25rem -1.25rem -1.25rem 1.25rem; border: 1px solid var(--gold); border-radius: 2px; pointer-events: none; }
.team-photo figcaption { margin-top: 2rem; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: #A9A398; }
.contact-photo.team-photo figcaption { color: var(--mute); }

/* plain light sections and their heads */
.plain { background: var(--paper); padding: 6rem 0; }
.sec-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 3rem; align-items: end; padding-bottom: 1.75rem; margin-bottom: 2.5rem; border-bottom: 1px solid var(--line); }
.sec-head .sub { margin-top: 0; }
.faqs { background: var(--white); border-top: 1px solid var(--line); padding: 6rem 0; }
.hold { background: var(--paper); padding: 5rem 0; }
.hold .label { margin-bottom: 0.5rem; }

/* the partners: a tile, a name, a role, a line */
.people { display: grid; grid-template-columns: 10rem minmax(0, 1fr); column-gap: 3rem; align-items: start; }
.people-h { font-size: clamp(1.6rem, 1.2rem + 1vw, 2rem); }
.people-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; }
.person-tile { aspect-ratio: 4 / 5; background: var(--field); display: grid; place-items: center; border-radius: 2px; margin-bottom: 1.25rem; }
.person-tile span { font-family: var(--serif); font-size: clamp(3rem, 2rem + 3vw, 4.5rem); letter-spacing: 0.08em; color: var(--gold-light); }
.person h3 { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; line-height: 1.1; color: var(--ink); }
.person .role { margin-top: 0.35rem; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-deep); }
.person p:not(.role) { margin-top: 0.8rem; color: var(--ink-2); font-size: 16px; }

/* footer: quiet, the crest and the name, the links, the legal */
.foot { background: var(--paper); color: var(--ink-2); border-top: 1px solid var(--line); padding: 3.5rem 0 1.5rem; }
.foot-top { display: flex; justify-content: space-between; align-items: center; gap: 2rem; flex-wrap: wrap; padding-bottom: 2rem; border-bottom: 1px solid var(--line); }
.foot a { color: var(--ink-2); }
.foot .foot-brand { display: flex; align-items: center; gap: 0.8rem; text-decoration: none; color: var(--ink); }
.foot .foot-brand .brand-sub { color: var(--gold-deep); }
.foot-brand img { width: 48px; height: auto; }
.foot-brand > span { display: grid; line-height: 1.1; }
.foot-nav { display: flex; gap: 1.75rem; flex-wrap: wrap; }
.foot-nav a { font-family: var(--serif); font-size: 13px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-2); text-decoration: none; }
.foot-nav a[href^="mailto"] { font-family: var(--sans); font-size: 15px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.foot-nav a:hover { color: var(--gold-deep); }
.foot-legal { margin-top: 1.75rem; padding-top: 0; border-top: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 3rem; row-gap: 1rem; font-size: 14px; line-height: 1.55; color: var(--mute); }
.foot-legal a { color: var(--mute); }
.foot-legal p { max-width: 68ch; }
.foot-line { margin-top: 1.5rem; display: flex; justify-content: space-between; gap: 1rem; font-size: 13px; letter-spacing: 0.04em; text-transform: none; color: var(--mute); }

@media (max-width: 1023px) {
  .band .wrap { grid-template-columns: 1fr; row-gap: 2rem; }
  .band-credit { justify-self: start; }
  .intro-grid, .adv-grid, .team-grid, .rec-grid { grid-template-columns: 1fr; row-gap: 3rem; }
  .intro-mark img { width: min(60%, 280px); }
  .people { grid-template-columns: 1fr; row-gap: 1.5rem; }
  .sec-head { grid-template-columns: 1fr; row-gap: 0.75rem; }
  .parts { grid-template-columns: 1fr; }
  .team-photo::before { display: none; }
}
@media (max-width: 767px) {
  :root { --bar: 4.5rem; }
  .brand img { width: 36px; }
  .brand-name { font-size: 1.125rem; }
  .brand-sub { display: none; }
  .band { min-height: 0; }
  .band-tall { min-height: 78svh; }
  .band .wrap { padding-block: 3rem 3.5rem; }
  .band-ghost { left: 0; width: 100%; opacity: 0.34; object-position: 70% 70%; -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 22%, #000 62%, #000 82%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, transparent 22%, #000 62%, #000 82%, transparent 100%); }
  .band-tall .band-ghost { left: 0; width: 100%; opacity: 0.4; }
  .band-text { border-left-width: 1px; }
  .band-more { display: none; }
  .intro, .adv, .team, .rec, .plain, .faqs { padding: 3.75rem 0; }
  .stats { padding: 2.5rem 0; }
  .stats-row { grid-template-columns: 1fr; row-gap: 1.75rem; }
  .stats-row > div { border-left: 0; text-align: left; padding: 0; }
  .deck { grid-template-columns: 1fr; }
  .deck-nav { grid-auto-flow: column; justify-content: center; }
  .deck-dots { grid-auto-flow: column; }
  .deck-card { padding: 1.5rem 1.5rem 1.75rem; }
  .people-grid { grid-template-columns: 1fr; }
  .person-tile { max-width: 220px; }
  .foot-top { flex-direction: column; align-items: flex-start; }
  .foot-legal { grid-template-columns: 1fr; }
  .foot-line { flex-direction: column; gap: 0.4rem; }
}
.band-text .btn { margin-top: 2rem; }

/* the wordmark Sam likes, tracked serif caps, alone in the bar */
.top .wordmark { margin-right: auto; font-family: var(--serif); font-weight: 500; font-size: 1.125rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink); text-decoration: none; white-space: nowrap; }
.foot .foot-brand .wordmark { font-family: var(--serif); font-weight: 500; font-size: 1rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink); }
.foot .foot-brand .brand-sub { display: block; }
.firm { grid-template-columns: 13rem minmax(0, 7fr) minmax(0, 5fr); column-gap: 3rem; align-items: start; }
.person { padding-top: 1.25rem; border-top: 1px solid var(--gold); }
.firm-photo { margin-top: 0.5rem; }
.firm-photo figcaption, .lines-photo figcaption { color: var(--mute); }
.lines-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 4rem; align-items: start; }
.lines-photo { margin-top: 1.5rem; }
.foot-legal { font-size: 15px; }
.person p:not(.role), .part p:not(.deck-num) { font-size: 17px; }
@media (max-width: 1023px) {
  .firm { grid-template-columns: 1fr; row-gap: 1.5rem; }
  .lines-grid { grid-template-columns: 1fr; row-gap: 2.5rem; }
  .firm-photo::before, .lines-photo::before { display: none; }
}
@media (max-width: 767px) { .top .wordmark { font-size: 0.9375rem; letter-spacing: 0.2em; } }
.foot-legal { font-size: 16px; color: var(--ink-2); }
.foot-legal a { color: var(--ink-2); }


/* ---- v11c: portfolio and reports ---- */
.tier-jump { display: flex; flex-wrap: wrap; gap: 0.75rem 2.5rem; padding-top: 0.5rem; }
.tier-jump a { font-family: var(--serif); font-size: 1.125rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); text-decoration: none; display: inline-flex; align-items: baseline; gap: 0.6rem; padding-bottom: 0.25rem; border-bottom: 1px solid transparent; }
.tier-jump a:hover { color: var(--ink); border-color: var(--gold); }
.tier-letter { color: var(--gold-deep); font-size: 1.5rem; }
.tier { padding: 4.5rem 0; border-top: 1px solid var(--line); background: var(--paper); }
.tier:nth-of-type(even) { background: #F1EEE7; }
.models { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem 2.5rem; }
.model-pic, .model-plate { aspect-ratio: 3 / 2; overflow: hidden; background: var(--field); margin: 0; }
.model-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.model-plate { display: grid; place-items: center; background: linear-gradient(135deg, var(--field) 0%, var(--field-2) 100%); position: relative; }
.model-plate::after { content: ""; position: absolute; inset: 1rem; border: 1px solid rgba(201, 169, 97, 0.35); }
.model-plate span { font-family: var(--serif); font-size: 4.5rem; line-height: 1; color: var(--gold-light); letter-spacing: 0.04em; }
.model-name { margin-top: 1.1rem; font-family: var(--serif); font-weight: 400; font-size: 1.5rem; line-height: 1.15; color: var(--ink); }
.model-facts { margin-top: 0.35rem; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); display: flex; gap: 0.6rem; }
.model-ev { margin-top: 0.7rem; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.reports-list { padding-top: 0; }
.reports { display: grid; }
.report { display: grid; grid-template-columns: 11rem minmax(0, 1fr); column-gap: 2.5rem; padding: 2rem 0; border-top: 1px solid var(--line); }
.report:first-child { border-top: 0; padding-top: 0.5rem; }
.report:last-child { border-bottom: 1px solid var(--line); }
.report-date { font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mute); padding-top: 0.45rem; }
.report-title { font-family: var(--serif); font-weight: 400; font-size: 1.75rem; line-height: 1.15; color: var(--ink); }
.report-abs { margin-top: 0.75rem; font-size: 17px; line-height: 1.6; color: var(--ink-2); max-width: 64ch; }
.report-req { display: inline-block; margin-top: 1rem; font-size: 15px; font-weight: 600; color: var(--gold-deep); text-decoration: none; border-bottom: 1px solid var(--gold); padding-bottom: 1px; }
.report-req:hover { color: var(--ink); }
@media (max-width: 1023px) {
  .models { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 2rem; }
  .top-nav a { font-size: 13px; letter-spacing: 0.16em; }
}
@media (max-width: 767px) {
  .models { grid-template-columns: 1fr; gap: 2.25rem; }
  .tier { padding: 3rem 0; }
  .report { grid-template-columns: 1fr; row-gap: 0.5rem; padding: 1.5rem 0; }
  .report-date { padding-top: 0; }
  .report-title { font-size: 1.375rem; }
  .tier-jump { gap: 0.5rem 1.5rem; }
}