/* Holding-page options. Tokens, base, nav, buttons and footer come from direction X (x.css);
   this file only lays out the three one-page options. No raw colors or off-scale lengths here. */

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.lp-mast { display: flex; justify-content: space-between; align-items: center; min-height: var(--nav-h); gap: var(--space-5); }
.lp-mast__mail { color: var(--muted); font-size: var(--text-small); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.lp-mast__mail:hover { color: var(--text); text-decoration: underline; text-decoration-color: var(--gold); }
.lp-mast__nav { display: flex; align-items: center; gap: var(--space-5); }
.lp-mast__nav a { color: var(--muted); font-size: var(--text-small); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.lp-mast__nav a:hover { color: var(--text); text-decoration: underline; text-decoration-color: var(--gold); }
@media (max-width: 520px) {
  /* Phones: keep the two app links, drop the address (it's in the page's button). */
  .lp-mast__nav { gap: var(--space-4); }
  .lp-mast__nav .lp-mast__mail { display: none; }
}

.lp-lede { color: var(--muted); font-size: var(--text-lead); max-width: 46ch; }
.lp-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.lp-note { color: var(--dim); font-size: var(--text-small); }
.lp-note a { color: var(--muted); }
.lp-note a:hover { color: var(--text); }

/* ── A. One frame ─────────────────────────────────────────── */
.a-frame { position: relative; margin: 0; }
.a-frame img { width: 100%; height: min(62svh, 720px); object-fit: cover; object-position: 62% 50%; }
/* Cycling frames: stacked in one grid cell, only .is-on shows; a slow crossfade between them. */
.a-frame__stack { display: grid; grid-template-columns: minmax(0, 1fr); background: var(--band); }
.a-frame__stack img { grid-area: 1 / 1; opacity: 0; transition: opacity calc(var(--dur-long) * 2) var(--ease-out); }
.a-frame__stack img.is-on { opacity: 1; }
.a-frame figcaption { position: absolute; right: var(--gutter); bottom: var(--space-4); color: var(--text); font-size: var(--text-small); background: var(--band); padding: var(--space-1) var(--space-3); border-radius: var(--radius); }
.a-body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--space-6) var(--space-8); padding-block: var(--space-7) var(--space-8); align-items: start; }
.a-body .hw { text-align: left; font-size: min(var(--text-hero), calc(100cqi / 11.8)); }
.a-lead { container-type: inline-size; display: grid; gap: var(--space-5); justify-items: start; }
.a-side { display: grid; gap: var(--space-6); padding-top: var(--space-3); }
.a-side h2 { font-family: var(--font-body); font-weight: 600; font-size: var(--text-small); letter-spacing: 0; color: var(--dim); margin-bottom: var(--space-3); }
.a-clients { color: var(--text); font-size: var(--text-lead); line-height: 1.5; }
.a-tk { color: var(--muted); }
.a-tk strong { color: var(--text); font-weight: 600; }
.a-tk + .a-tk { margin-top: var(--space-3); }
.a-tk a, .b-band dd a { color: var(--text); text-underline-offset: 0.2em; }
.a-tk a:hover, .b-band dd a:hover { color: var(--gold); }
@media (max-width: 860px) {
  .a-body { grid-template-columns: minmax(0, 1fr); }
  .a-frame img { height: 44svh; }
}

/* ── B. Contact sheet ─────────────────────────────────────── */
.b-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-5) var(--space-7); align-items: end; padding-block: var(--space-7) var(--space-6); }
.b-head h1 { font-size: var(--text-display); max-width: 14ch; }
.b-head .lp-lede { margin-top: var(--space-4); }
.b-sheet { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); }
.b-sheet img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); outline: 1px solid var(--hairline-img); outline-offset: -1px; }
.b-sheet .wide { grid-column: span 2; }
.b-sheet .wide img { aspect-ratio: 16 / 9; }
.b-cap { display: flex; flex-wrap: wrap; gap: 0 var(--space-3); margin-top: var(--space-2); font-size: var(--text-small); }
.b-cap strong { font-weight: 600; color: var(--text); }
.b-cap span { color: var(--dim); }
.b-band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-6) var(--space-8); padding-block: var(--space-8); margin-top: var(--space-8); border-top: 1px solid var(--line); }
.b-band h2 { font-size: var(--text-section); max-width: 16ch; }
.b-band dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3) var(--space-5); align-content: start; }
.b-band dt { color: var(--dim); font-size: var(--text-small); padding-top: var(--space-1); }
.b-band dd { margin: 0; }
.b-band dd + dd { grid-column: 2; }
@media (max-width: 1020px) { .b-sheet { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .b-head, .b-band { grid-template-columns: minmax(0, 1fr); }
  .b-sheet .wide { grid-column: span 2; }
}

/* ── C. Client index ──────────────────────────────────────── */
.c-top { display: grid; gap: var(--space-4); padding-block: var(--space-7) var(--space-6); }
.c-top h1 { font-size: var(--text-hero); }
.c-index { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--space-7); align-items: start; padding-bottom: var(--space-8); }
.c-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.c-list li { border-bottom: 1px solid var(--line); }
.c-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4); align-items: baseline; padding-block: var(--space-3); text-decoration: none; }
.c-row b { font-family: var(--font-display); font-weight: 800; font-size: var(--text-section); letter-spacing: -0.02em; line-height: 1.1; color: var(--dim); transition: color var(--dur-short) var(--ease-out); }
.c-row span { color: var(--dim); font-size: var(--text-small); text-align: right; }
.c-row img { display: none; }
.c-row:hover b, .c-row:focus-visible b, .c-row[aria-current="true"] b { color: var(--text); }
.c-row[aria-current="true"] b { color: var(--gold); }
.c-stage { position: sticky; top: var(--space-6); margin: 0; }
.c-stage__frame { display: grid; border-radius: var(--radius); overflow: hidden; outline: 1px solid var(--hairline-img); outline-offset: -1px; }
.c-stage__frame img { grid-area: 1 / 1; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: opacity var(--dur-long) var(--ease-out); }
.c-stage__frame img.is-out { opacity: 0; }
.c-stage figcaption { margin-top: var(--space-3); color: var(--muted); font-size: var(--text-small); }
.c-close { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-5); align-items: center; padding-block: var(--space-7); border-top: 1px solid var(--line); }
.c-close h2 { font-size: var(--text-section); }
@media (max-width: 860px) {
  .c-index { grid-template-columns: minmax(0, 1fr); }
  .c-stage { display: none; }
  .c-row { grid-template-columns: 96px minmax(0, 1fr); align-items: center; }
  .c-row img { display: block; grid-row: span 2; width: 96px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); }
  .c-row span { text-align: left; }
  .c-row b { color: var(--text); font-size: var(--text-title); }
  .c-close { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .c-stage__frame img, .c-row b { transition: none; } }