/* ==========================================================================
   BookedFolio — site.css
   One source of truth. Tokens, then primitives, then components, then pages.
   No value appears in this file that is not defined as a token above it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */

:root {
  color-scheme: light;

  /* Primitive colour — from Brand & Presence Kit v2, measured contrast */
  --ivory:        #E9E0CF;  /* page ground, ~60% of every layout */
  --ivory-lift:   #F1EADC;  /* raised surface, alternating bands */
  --ivory-deep:   #DFD5C1;  /* recessed edge, footer top, table stripes */
  --forest:       #132B23;  /* body text on ivory 11.5:1 */
  --forest-lift:  #1C3A30;  /* panels inside dark bands */
  --forest-deep:  #0E1F19;  /* deepest band */
  --sage:         #5E775E;  /* hairlines, icons, borders only - 3.75:1 fails AA for text */
  --sage-text:    #4F664F;  /* the same sage two steps down: 4.79:1 on ivory, 5.24 on raised */
  --gold:         #BA9B5F;  /* fills, rules, CTA. NEVER text on ivory (2.0:1) */
  --gold-deep:    #A6874C;  /* CTA hover/press */

  /* Semantic colour */
  --bg:            var(--ivory);
  --bg-raised:     var(--ivory-lift);
  --text:          var(--forest);
  --text-muted:    var(--sage-text);
  --accent:        var(--gold);
  --line:          rgba(19, 43, 35, .16);
  --line-strong:   rgba(19, 43, 35, .30);
  --line-dark:     rgba(233, 224, 207, .20);
  --focus:         var(--forest);
  --focus-on-dark: var(--gold);

  /* Type */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --t-display: clamp(2.5rem, 6.2vw, 4.5rem);
  --t-h1:      clamp(2rem, 4.4vw, 3.15rem);
  --t-h2:      clamp(1.45rem, 3vw, 2.05rem);
  --t-h3:      1.125rem;
  --t-lede:    clamp(1.06rem, 1.6vw, 1.25rem);
  --t-body:    1.0625rem;
  --t-small:   0.9rem;
  --t-label:   0.75rem;

  --lh-display: 1.05;
  --lh-heading: 1.16;
  --lh-body:    1.65;

  --measure:      68ch;
  --measure-lede: 54ch;

  /* Space */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;  --s-10: 128px;

  --gutter: clamp(20px, 5vw, 40px);
  --container: 1160px;
  --container-narrow: 720px;
  --section-y: clamp(64px, 9vw, 116px);

  /* Line + shape */
  --radius: 2px;
  --radius-lg: 4px;
  --hairline: 1px;

  /* Motion — state only. No scroll animation anywhere on this site. */
  --t-state: 150ms;
  --t-swap: 320ms;
  --ease: cubic-bezier(.2, .6, .3, 1);
}

/* --------------------------------------------------------------------------
   2. RESET + BASE
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, video, iframe { max-width: 100%; display: block; }
img { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  margin: 0;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

h1 { font-size: var(--t-h1); line-height: var(--lh-heading); }
h2 { font-size: var(--t-h2); line-height: var(--lh-heading); }
h3 { font-size: var(--t-h3); line-height: 1.35; font-family: var(--font-body); font-weight: 600; letter-spacing: 0; }

p { margin: 0 0 var(--s-4); max-width: var(--measure); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 var(--s-4); padding-left: var(--s-5); }
li { margin-bottom: var(--s-2); max-width: var(--measure); }

strong { font-weight: 600; }

a { color: inherit; }

hr {
  border: 0;
  border-top: var(--hairline) solid var(--line);
  margin: var(--s-7) 0;
}

::selection { background: var(--forest); color: var(--ivory); }

/* Focus — visible everywhere, never removed */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--radius);
}
.band--dark :focus-visible,
.demo-frame :focus-visible { outline-color: var(--focus-on-dark); }

.skip {
  position: absolute;
  left: var(--s-4);
  top: -100px;
  z-index: 200;
  background: var(--gold);
  color: var(--forest);
  padding: var(--s-3) var(--s-5);
  font-weight: 600;
  text-decoration: none;
  transition: top var(--t-state) var(--ease);
}
.skip:focus { top: var(--s-4); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(48px, 6vw, 80px); }

/* Bands are chapter breaks, not decoration. Three per page, maximum. */
.band--raised { background: var(--ivory-lift); }
.band--dark {
  background: var(--forest);
  color: var(--ivory);
}
.band--dark h1, .band--dark h2, .band--dark h3 { color: var(--ivory); }
.band--dark .label { color: var(--gold); }
.band--dark .lede { color: rgba(233, 224, 207, .84); }
.band--deep { background: var(--forest-deep); color: var(--ivory); }

.stack > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-6); }

.split {
  display: grid;
  gap: clamp(var(--s-6), 5vw, var(--s-9));
  align-items: start;
}
@media (min-width: 880px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--wide-left { grid-template-columns: 1.15fr 1fr; }
  .split--wide-right { grid-template-columns: 1fr 1.35fr; }
}

.cols {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}

/* --------------------------------------------------------------------------
   4. TYPE COMPONENTS
   -------------------------------------------------------------------------- */

.label {
  display: block;
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sage-text);
  margin-bottom: var(--s-4);
  font-family: var(--font-body);
}

.display {
  font-family: var(--font-display);
  font-size: var(--t-display);
  line-height: var(--lh-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

.lede {
  font-size: var(--t-lede);
  line-height: 1.55;
  max-width: var(--measure-lede);
  color: var(--text);
}

.small { font-size: var(--t-small); }
.muted { color: var(--sage-text); }

.pull {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  line-height: 1.25;
  font-weight: 500;
  max-width: 22ch;
  margin: 0;
  text-wrap: balance;
}

/* Prose links: sage with a hairline, forest on hover */
.textlink {
  color: var(--sage-text);
  text-decoration: none;
  border-bottom: var(--hairline) solid currentColor;
  padding-bottom: 1px;
  transition: color var(--t-state) var(--ease);
}
.textlink:hover { color: var(--forest); }
.band--dark .textlink { color: var(--gold); }
.band--dark .textlink:hover { color: var(--ivory); }

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 48px;
  padding: 14px 28px;
  font-family: var(--font-body);
  font-size: 0.975rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  border: var(--hairline) solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--t-state) var(--ease),
              color var(--t-state) var(--ease),
              border-color var(--t-state) var(--ease),
              transform var(--t-state) var(--ease);
}

/* Primary: gold fill, forest text. 5.7:1. The only gold-and-text pairing allowed. */
.btn--primary {
  background: var(--gold);
  color: var(--forest);
  border-color: var(--gold);
}
.btn--primary:hover { background: var(--gold-deep); border-color: var(--gold-deep); transform: translateY(-1px); }
.btn--primary:active { transform: none; }

.btn--outline {
  background: transparent;
  color: var(--forest);
  border-color: var(--line-strong);
}
.btn--outline:hover { background: var(--forest); color: var(--ivory); border-color: var(--forest); }

.band--dark .btn--outline {
  color: var(--ivory);
  border-color: var(--line-dark);
}
.band--dark .btn--outline:hover { background: var(--ivory); color: var(--forest); border-color: var(--ivory); }

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: .55;
  pointer-events: none;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  align-items: center;
}

/* --------------------------------------------------------------------------
   6. HEADER + NAV
   -------------------------------------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--ivory) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: var(--hairline) solid var(--line);
}
@supports not (backdrop-filter: blur(10px)) {
  .header { background: var(--ivory); }
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  min-height: 68px;
  padding-block: var(--s-3);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  text-decoration: none;
  flex-shrink: 0;
}
.brand img { width: 34px; height: 34px; }
.brand__word {
  font-family: var(--font-display);
  font-size: 1.24rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--forest);
}

.nav { display: flex; align-items: center; gap: var(--s-5); }
.nav__list {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__list li { margin: 0; }

.nav__link {
  display: inline-block;
  padding: 6px 0;
  font-size: 0.94rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--forest);
  border-bottom: 2px solid transparent;
  transition: border-color var(--t-state) var(--ease), color var(--t-state) var(--ease);
}
.nav__link:hover { border-bottom-color: var(--gold); }
.nav__link[aria-current="page"] { border-bottom-color: var(--gold); }

.nav__cta { padding: 11px 20px; min-height: 44px; font-size: 0.92rem; }

.nav__toggle {
  display: none;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: 8px 14px;
  background: transparent;
  border: var(--hairline) solid var(--line-strong);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--forest);
  cursor: pointer;
}

@media (max-width: 900px) {
  .nav__toggle { display: inline-flex; }
  .nav__list {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--ivory);
    border-bottom: var(--hairline) solid var(--line);
    padding: var(--s-2) var(--gutter) var(--s-5);
  }
  .nav__list[data-open="true"] { display: flex; }
  .nav__link {
    padding: 14px 0;
    font-size: 1.05rem;
    border-bottom: var(--hairline) solid var(--line);
    border-left: 2px solid transparent;
  }
  .nav__link[aria-current="page"] { border-bottom-color: var(--line); border-left-color: var(--gold); padding-left: var(--s-3); }
  .header__inner { position: relative; }
}

/* --------------------------------------------------------------------------
   7. THE DEVICE — the signature component
   -------------------------------------------------------------------------- */

.demo {
  --frame: 10px;
  position: relative;
}

.demo__controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  margin-bottom: var(--s-4);
  border-bottom: var(--hairline) solid var(--line);
}

.demo__tab {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 10px var(--s-4) 12px;
  min-height: 44px;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--sage-text);
  cursor: pointer;
  transition: color var(--t-state) var(--ease), border-color var(--t-state) var(--ease);
}
.demo__tab:hover { color: var(--forest); }
.demo__tab[aria-selected="true"] { color: var(--forest); border-bottom-color: var(--gold); }

/* The aperture rule — the signature element. Only three uses site-wide. */
.demo-frame {
  position: relative;
  background: var(--forest);
  padding: var(--frame);
  border-radius: var(--radius-lg);
  box-shadow: none;
}
.demo-frame::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: var(--hairline) solid var(--gold);
  border-radius: var(--radius);
  pointer-events: none;
  opacity: .5;
  transition: opacity var(--t-swap) var(--ease), inset var(--t-swap) var(--ease);
}
.demo-frame[data-swapping="true"]::after { opacity: 1; inset: 0; }

.demo-frame__screen {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 1px;
  background: var(--ivory-lift);
}
@media (max-width: 700px) {
  .demo-frame__screen { aspect-ratio: 4 / 5; }
}

/* Loading state: a quiet ivory field, never a spinner and never a blank black box */
.demo-frame__screen::before {
  content: attr(data-loading-label);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--s-5);
  text-align: center;
  font-size: var(--t-small);
  color: var(--sage-text);
  background: var(--ivory-lift);
  transition: opacity var(--t-swap) var(--ease);
}
.demo-frame[data-live="true"] .demo-frame__screen::before { opacity: 0; }

.demo-frame__live {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  opacity: 0;
  transition: opacity var(--t-swap) var(--ease);
}
.demo-frame[data-live="true"] .demo-frame__live { opacity: 1; }

/* On touch devices, scrolling a nested site fights the page. Tap opens it properly. */
.demo-frame__tap {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none;
  align-items: flex-end;
  justify-content: center;
  padding: var(--s-4);
  text-decoration: none;
}
.demo-frame__tap span {
  background: var(--gold);
  color: var(--forest);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: var(--radius);
}
@media (hover: none) {
  .demo-frame__tap { display: flex; }
}

.demo__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  align-items: baseline;
  justify-content: space-between;
  margin-top: var(--s-3);
  font-size: var(--t-small);
  color: var(--sage-text);
}
.demo__meta p { margin: 0; max-width: 46ch; }

/* Honest labelling, never optional */
.demo__disclosure {
  font-size: var(--t-small);
  color: var(--sage-text);
  margin-top: var(--s-3);
  max-width: 62ch;
}

/* --------------------------------------------------------------------------
   8. CARDS, LISTS, RULES
   -------------------------------------------------------------------------- */

.card {
  background: var(--ivory-lift);
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius);
  padding: var(--s-6);
}
.band--dark .card {
  background: var(--forest-lift);
  border-color: var(--line-dark);
}
.card--featured { border-top: 3px solid var(--gold); }

/* Hairline list — replaces the default three-equal-cards reflex */
.rule-list { list-style: none; margin: 0; padding: 0; }
.rule-list li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: var(--s-4);
  align-items: start;
  padding: var(--s-4) 0;
  border-top: var(--hairline) solid var(--line);
  margin: 0;
  max-width: none;
}
.rule-list li:last-child { border-bottom: var(--hairline) solid var(--line); }
.band--dark .rule-list li { border-color: var(--line-dark); }

.aperture {
  width: 14px; height: 14px;
  margin-top: 6px;
  border: var(--hairline) solid var(--gold);
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
}
.aperture::after {
  content: "";
  position: absolute;
  inset: 3px;
  background: var(--gold);
  border-radius: 50%;
}

/* Numbered steps */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.steps li {
  display: grid;
  gap: var(--s-2) var(--s-5);
  grid-template-columns: auto 1fr;
  padding: var(--s-5) 0;
  border-top: var(--hairline) solid var(--line);
  margin: 0;
  max-width: none;
}
.steps li:last-child { border-bottom: var(--hairline) solid var(--line); }
.step__n {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--sage-text);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.band--dark .steps li { border-color: var(--line-dark); }
.band--dark .step__n { color: var(--gold); }

/* Facts row */
.facts { display: grid; gap: var(--s-6); grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.fact { border-top: 2px solid var(--forest); padding-top: var(--s-4); }
.fact__figure {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.9rem);
  line-height: 1;
  margin-bottom: var(--s-3);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   9. PRICING
   -------------------------------------------------------------------------- */

.price {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.5vw, 3rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  display: inline-block;
  padding-bottom: var(--s-3);
  border-bottom: 2px solid var(--gold);   /* aperture rule, use two of three */
}
.price__note { display: block; margin-top: var(--s-3); font-family: var(--font-body); font-size: var(--t-small); color: var(--sage-text); }
.band--dark .price__note { color: rgba(233, 224, 207, .72); }

.price-was {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  opacity: .6;
  font-size: .55em;
  margin-right: .3em;
}

.anchor-note {
  border-left: 2px solid var(--gold);
  padding-left: var(--s-5);
  margin: var(--s-6) 0;
}

/* --------------------------------------------------------------------------
   10. ACCORDION — native details, works with JS off
   -------------------------------------------------------------------------- */

.qa { border-top: var(--hairline) solid var(--line); }
.qa:last-of-type { border-bottom: var(--hairline) solid var(--line); }

.qa > summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-5);
  padding: var(--s-5) 0;
  min-height: 44px;
  font-family: var(--font-body);
  font-size: 1.06rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  transition: color var(--t-state) var(--ease);
}
.qa > summary::-webkit-details-marker { display: none; }
.qa > summary:hover { color: var(--sage-text); }
.qa > summary::after {
  content: "+";
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--gold);
  flex-shrink: 0;
}
.qa[open] > summary::after { content: "\2212"; }
.qa__body { padding: 0 0 var(--s-5); max-width: var(--measure); }
.qa__body p { color: var(--forest); }

.band--dark .qa { border-color: var(--line-dark); }

/* --------------------------------------------------------------------------
   11. FORMS
   -------------------------------------------------------------------------- */

.form { display: grid; gap: var(--s-5); }
.form__row { display: grid; gap: var(--s-5); }
@media (min-width: 640px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }

.field { display: grid; gap: var(--s-2); }

.field > label {
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: .01em;
}
.field__hint {
  font-size: var(--t-small);
  color: var(--sage-text);
  margin: 0;
}
.band--dark .field__hint { color: rgba(233, 224, 207, .70); }

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.4;
  color: var(--forest);
  background: var(--ivory-lift);
  border: var(--hairline) solid var(--line-strong);
  border-radius: var(--radius);
  transition: border-color var(--t-state) var(--ease), background var(--t-state) var(--ease);
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--forest); }

.band--dark .field input,
.band--dark .field select,
.band--dark .field textarea {
  background: var(--forest-lift);
  color: var(--ivory);
  border-color: var(--line-dark);
}
.band--dark .field input:hover,
.band--dark .field select:hover,
.band--dark .field textarea:hover { border-color: var(--gold); }
.band--dark .field > label { color: var(--ivory); }

.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: #8C2F2F;
  border-width: 2px;
}
.band--dark .field input[aria-invalid="true"],
.band--dark .field select[aria-invalid="true"],
.band--dark .field textarea[aria-invalid="true"] { border-color: #E8A5A5; }

.field__error {
  font-size: var(--t-small);
  font-weight: 600;
  color: #8C2F2F;
  margin: 0;
}
.band--dark .field__error { color: #E8A5A5; }
.field__error:empty { display: none; }

.form__status {
  margin: 0;
  font-size: var(--t-small);
  font-weight: 600;
  min-height: 1.2em;
}
.form__status[data-state="error"] { color: #8C2F2F; }
.band--dark .form__status[data-state="error"] { color: #E8A5A5; }

/* Honeypot — off screen, never focusable by keyboard */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   12. TABLES
   -------------------------------------------------------------------------- */

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-small);
  min-width: 520px;
}
th, td {
  text-align: left;
  padding: var(--s-4) var(--s-4) var(--s-4) 0;
  border-bottom: var(--hairline) solid var(--line);
  vertical-align: top;
}
th {
  font-weight: 600;
  font-size: var(--t-label);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sage-text);
}
.band--dark th, .band--dark td { border-color: var(--line-dark); }
.band--dark th { color: var(--gold); }

/* --------------------------------------------------------------------------
   13. FOOTER
   -------------------------------------------------------------------------- */

.footer {
  background: var(--forest);
  color: var(--ivory);
  padding-block: clamp(48px, 6vw, 80px) var(--s-7);
  border-top: 3px solid var(--gold);
}
.footer a { color: rgba(233, 224, 207, .82); text-decoration: none; }
.footer a:hover { color: var(--ivory); text-decoration: underline; text-underline-offset: 3px; }

.footer__grid {
  display: grid;
  gap: var(--s-7);
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  margin-bottom: var(--s-7);
}
.footer__title {
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--s-4);
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: var(--s-3); }

.footer__foot {
  border-top: var(--hairline) solid var(--line-dark);
  padding-top: var(--s-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4) var(--s-6);
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--t-small);
  color: rgba(233, 224, 207, .68);
}
.footer__slogan { font-family: var(--font-display); font-size: 1.05rem; color: var(--ivory); }

/* --------------------------------------------------------------------------
   14. UTILITIES — deliberately few
   -------------------------------------------------------------------------- */

.center { text-align: center; margin-inline: auto; }
.center p, .center .lede { margin-inline: auto; }
.mt-0 { margin-top: 0; }
.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); }
.mb-6 { margin-bottom: var(--s-6); }
.nowrap { white-space: nowrap; }

/* --------------------------------------------------------------------------
   15. PAGE: HERO
   -------------------------------------------------------------------------- */

.hero { padding-block: clamp(40px, 6vw, 80px) clamp(48px, 7vw, 96px); }

.hero__grid {
  display: grid;
  gap: clamp(var(--s-7), 5vw, var(--s-9));
  align-items: center;
}
@media (min-width: 1000px) {
  .hero__grid { grid-template-columns: minmax(340px, 0.86fr) 1.14fr; }
}

.hero__copy .display { margin-bottom: var(--s-5); }
.hero__copy .lede { margin-bottom: var(--s-6); }

.hero__assurance {
  margin-top: var(--s-5);
  font-size: var(--t-small);
  color: var(--sage-text);
  max-width: 40ch;
}

/* Media band — the one atmosphere image on the site */
.figure-band { margin: 0; }
.figure-band img { width: 100%; object-fit: cover; }
.figure-band figcaption {
  font-size: var(--t-small);
  color: var(--sage-text);
  padding-top: var(--s-3);
}

/* Eager variant used on the Work page, where each demonstration has its own
   frame and there is no tab to switch. The iframe is visible from the start;
   the loading label sits behind it until the demo paints over it. */
.demo-frame--eager .demo-frame__live { opacity: 1; }
.demo-frame--eager .demo-frame__screen { aspect-ratio: 16 / 10; }
@media (max-width: 700px) {
  .demo-frame--eager .demo-frame__screen { aspect-ratio: 4 / 5; }
}

/* --------------------------------------------------------------------------
   16. NARROW-HEADER FIX
   At 375px the brand, the menu button and the gold call to action together
   exceed the viewport. The call to action is never allowed to hide, so the
   wordmark shrinks and the button takes its short label instead.
   -------------------------------------------------------------------------- */

.nav__cta-short { display: none; }

@media (max-width: 560px) {
  .header__inner { gap: var(--s-3); }
  .nav { gap: var(--s-3); }
  .brand { gap: var(--s-2); }
  .brand img { width: 30px; height: 30px; }
  .brand__word { font-size: 1.02rem; }
  .nav__toggle { padding: 8px 12px; }
  .nav__cta { padding: 11px 14px; font-size: 0.85rem; }
  .nav__cta-full { display: none; }
  .nav__cta-short { display: inline; }
}

@media (max-width: 380px) {
  .brand__word { font-size: 0.95rem; }
  .nav__cta { padding: 11px 12px; font-size: 0.82rem; }
}

/* --------------------------------------------------------------------------
   17. TAP TARGETS
   Footer and list links sit in stacks rather than in prose, so the WCAG 2.2
   inline exception does not cover them. They get real height.
   -------------------------------------------------------------------------- */

.footer li a {
  display: inline-block;
  padding-block: 6px;
  min-height: 24px;
}

.demo__meta a { display: inline-block; padding-block: 4px; }

/* Muted text inside a forest band cannot use the sage: it reads at 2.4:1.
   Ivory stepped down instead, which stays in family and clears AA. */
.band--dark .muted,
.band--dark .small.muted { color: #AFB9AD; }

/* Grid children default to min-width:auto, so a wide table inside one pushes the
   whole page sideways instead of scrolling in its own container. */
.split > *, .cols > *, .facts > *, .footer__grid > * { min-width: 0; }

.footer__foot a { display: inline-block; padding-block: 4px; min-height: 24px; }