/* site.css: LoopTech studio showcase. Positions of every film object are set by js/story.js
   (pure function of scroll time); this file styles them. */

@font-face { font-family: "Instrument Serif"; src: url("../fonts/instrument-serif.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("../fonts/instrument-serif-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Anton"; src: url("../fonts/anton.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("../fonts/nunito.woff2") format("woff2"); font-weight: 200 1000; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/cormorant-garamond.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("../fonts/instrument-sans.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
  --black: #0C0C0D; --dark: #16150F; --cream: #EFEBE1; --paper: #FAF9F6; --cream-text: #F1EEE6;
  --gold: #C9A86A; --gold-deep: #B08A3E; --gold-ink: #7A5C22;
  /* theme values, interpolated by story.js from dark to light */
  --bg: var(--black); --fg: var(--cream-text); --muted: #A6A398; --acc: var(--gold); --line: rgba(241, 238, 230, .14);
  --font-display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --font-ui: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}
body { background: var(--bg); color: var(--fg); font-family: var(--font-ui); }
em { font-style: italic; color: var(--acc); }
.skip { position: absolute; left: 8px; top: 8px; transform: translateY(-200%); z-index: 200; background: var(--paper); color: var(--black); padding: .6em 1em; border-radius: 8px; }
.skip:focus { transform: none; }

/* ---------- header + phone band ---------- */
.hdr { position: fixed; inset: 0 0 auto 0; z-index: 60; height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(16px, 4.5vw, 64px); pointer-events: none; }
.hdr > * { pointer-events: auto; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; font: 700 15px/1 var(--font-ui); letter-spacing: .08em; text-decoration: none; color: var(--fg); }
.wordmark__o { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--acc); display: grid; place-items: center; }
.wordmark__o::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--acc); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; padding: .9em 1.4em; border-radius: 999px; font: 600 15px/1 var(--font-ui); text-decoration: none; background: var(--gold); color: var(--black); border: 0; cursor: pointer; white-space: nowrap; }
.btn:hover { filter: brightness(1.06); }
.btn--hdr { padding: .75em 1.2em; font-size: 14px; background: var(--btn-bg, var(--gold)); color: var(--btn-fg, var(--black)); }
.btn--ink { background: var(--black); color: var(--cream-text); }
.btn--big { font-size: clamp(17px, 1.4vw, 20px); padding: 1.05em 1.9em; }
.band { position: fixed; inset: auto 0 0 0; z-index: 60; height: 56px; padding: 6px 12px 8px; display: none; background: linear-gradient(to top, var(--bg) 70%, transparent); }
.band .btn { width: 100%; height: 42px; background: var(--btn-bg, var(--gold)); color: var(--btn-fg, var(--black)); }
.link { color: var(--fg); font-size: 15px; text-underline-offset: 4px; }

/* ---------- stage ---------- */
.stage { position: relative; height: 100svh; min-height: 560px; overflow: hidden; background: var(--bg); }
.stage > * { position: absolute; left: 0; top: 0; }
.col { width: 30vw; }

.eyebrow { font: 600 12px/1.3 var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--acc); margin: 0 0 18px; }
.h1 { font: 400 clamp(40px, 4.6vw, 76px)/.98 var(--font-display); letter-spacing: -.02em; margin: 0; color: var(--fg); }
.lede { font-size: clamp(16px, 1.25vw, 19px); line-height: 1.45; color: var(--muted); margin: 18px 0 22px; max-width: 34ch; }
.hero-actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.namer { margin-top: 30px; position: relative; padding: 12px 14px 14px; margin-left: -14px; margin-right: -14px; }
.namer__label { display: block; font-size: 15.5px; font-weight: 500; color: var(--fg); margin-bottom: 9px; }
.namer__label span { color: var(--gold); margin-left: 8px; font: italic 400 21px/1 var(--font-display); display: inline-block; transform: rotate(-3deg) translateY(-1px); }
.namer__row { display: flex; gap: 8px; }
.namer__input, .namer__trade { height: 46px; border-radius: 10px; border: 1px solid rgba(201, 168, 106, .55); background: rgba(201, 168, 106, .07); color: var(--fg); padding: 0 14px; font-size: 15px; }
.namer__input { flex: 1 1 auto; min-width: 0; }
.namer__input::placeholder { color: #8f8c83; }
.namer__trade { flex: 0 0 auto; max-width: 46%; appearance: auto; }
.namer__trade option { color: #111; }
.hero-fork { margin: 18px 0 0; font-size: 14px; color: var(--muted); }
.hero-fork a { color: var(--fg); }

.stmts { position: relative; }
.stmt { position: absolute; left: 0; top: 0; width: 100%; margin: 0; font: 400 clamp(34px, 3.9vw, 62px)/1.0 var(--font-display); letter-spacing: -.015em; color: var(--fg); visibility: hidden; }
.stmt small { display: block; margin-top: 18px; font: 400 15px/1.45 var(--font-ui); letter-spacing: 0; color: var(--muted); }
.stmt small a { color: var(--fg); }
.stmt .bespoke { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--line); }

/* ---------- artboard ---------- */
.ab { border-radius: 14px; overflow: hidden; background: #1b1b1d; box-shadow: 0 0 0 1px rgba(241, 238, 230, .16), 0 40px 80px -30px rgba(0, 0, 0, .6); }
.ab__chrome { height: var(--chrome, 36px); display: flex; align-items: center; gap: 12px; padding: 0 14px; background: #202022; color: #9a978e; font-size: 12px; overflow: hidden; }
.ab__dots { display: flex; gap: 6px; } .ab__dots i { width: 9px; height: 9px; border-radius: 50%; background: #3a3a3d; }
.ab__url { flex: 1; min-width: 0; height: 22px; border-radius: 6px; background: #2a2a2d; display: flex; align-items: center; padding: 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #cfcbc0; }
.ab__tag { flex: 0 0 auto; font-size: 11px; letter-spacing: .04em; color: var(--gold); border: 1px solid rgba(201, 168, 106, .5); border-radius: 999px; padding: 3px 9px; }
.ab__view { position: relative; height: calc(100% - var(--chrome, 36px)); overflow: hidden; background: #111112; }
.ab__zoom { position: absolute; inset: 0; transform-origin: 0 0; }
.ab__blank { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 3px; color: #4a4740; font: 400 clamp(26px, 3vw, 44px)/1 var(--font-display); letter-spacing: -.02em; }
.ab__caret { width: 2px; height: 1.1em; background: var(--gold); }
.bigname { position: absolute; left: 0; top: 0; white-space: nowrap; font: 400 100px/1 var(--font-display); color: var(--gold); transform-origin: 0 0; letter-spacing: -.02em; }
.bigname span { display: inline-block; white-space: pre; }
.ab__ink { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ab__ink path, .ab__ink line { fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-linecap: round; }
.ab__ink .rail { stroke: rgba(201, 168, 106, .35); stroke-width: 1; }
.note { position: absolute; margin: 0; max-width: 15em; font: italic 400 clamp(17px, 1.5vw, 24px)/1.15 var(--font-display); color: var(--gold); text-shadow: 0 1px 0 rgba(0,0,0,.25); padding: 6px 10px; background: rgba(12, 12, 13, .82); border-radius: 8px; }
.note::before { content: "LoopTech team note"; display: block; font: 600 9px/1.6 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: rgba(201, 168, 106, .8); }
.ab__card-label { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 14px; font-size: 12px; font-weight: 600; letter-spacing: .04em; background: var(--black); color: var(--gold); opacity: 0; }

/* admin sheet inside the phone (beat 9) */
.admin { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 14px 18px; background: #fff; color: #1b1b1b; border-radius: 16px 16px 0 0; box-shadow: 0 -12px 30px rgba(0,0,0,.18); font-size: 12px; visibility: hidden; }
.admin__title { margin: 0 0 10px; font-weight: 700; font-size: 13px; }
.admin label { display: block; color: #666; margin-bottom: 4px; }
.admin__field { border: 1.5px solid #4f46e5; border-radius: 8px; padding: 8px 10px; min-height: 2.6em; font-size: 13px; line-height: 1.3; }
.admin__field::after { content: ""; display: inline-block; width: 1.5px; height: 1em; background: #4f46e5; vertical-align: -2px; margin-left: 1px; }
.admin__save { display: inline-block; margin-top: 10px; background: #1b1b1b; color: #fff; border-radius: 999px; padding: 6px 14px; font-weight: 600; }

/* ---------- the sketch (container units: it reflows to any width) ---------- */
.sk { position: absolute; inset: 0 auto auto 0; width: 100%; container-type: inline-size; font-family: var(--font-ui);
  --sk-bg: #f4f3f0; --sk-ink: #3b3a36; --sk-soft: #e8e6e0; --sk-pri: #8f8c84; --sk-cta: #55534d; --sk-pale: #d3d0c8;
  background: var(--sk-bg); color: var(--sk-ink); min-height: 100%; }
.sk p { margin: 0; max-width: none; }

.sk-nav { display: flex; align-items: center; gap: 2cqw; padding: 2.2cqw 3.2cqw; }
.sk-logo { font-weight: 700; font-size: 2.3cqw; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--sk-ink); }
.sk-links { font-size: 1.45cqw; opacity: .7; }
.sk-btn, .sk-btn2 { display: inline-block; background: var(--sk-cta); color: #fff; border-radius: 99px; padding: .9cqw 1.8cqw; font-size: 1.45cqw; font-weight: 600; white-space: nowrap; }
.sk-hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3cqw; align-items: center; padding: 3cqw 3.2cqw 3.6cqw; }
.sk-h { font-size: 5cqw; line-height: 1.02; font-weight: 700; letter-spacing: -.02em; color: var(--sk-ink); }
.sk-p { font-size: 1.7cqw; line-height: 1.4; margin: 1.6cqw 0 2.2cqw !important; opacity: .78; }
.sk-btn2 { font-size: 1.6cqw; padding: 1.2cqw 2.4cqw; background: var(--sk-pri); }
.sk-img { aspect-ratio: 4 / 3; border-radius: 1.4cqw; background: linear-gradient(135deg, var(--sk-pale), var(--sk-soft) 60%), var(--sk-soft); position: relative; overflow: hidden; }
.sk-img::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: 0; height: 58%; border-radius: 50% 50% 0 0; background: color-mix(in srgb, var(--sk-pri) 55%, transparent); }
.sk-mod { margin: 0 3.2cqw; padding: 2.2cqw 2.4cqw; background: var(--sk-soft); border-radius: 1.4cqw; overflow: hidden; }
.sk-mod__h { font-size: 2cqw; font-weight: 700; margin-bottom: 1.4cqw !important; }
.sk-days, .sk-slots { display: flex; gap: 1cqw; margin-bottom: 1cqw; flex-wrap: wrap; }
.sk-day, .sk-slot, .sk-q__a { font-size: 1.45cqw; padding: .9cqw 1.5cqw; border-radius: .8cqw; background: var(--sk-bg); }
.sk-day.is-on, .sk-q__a.is-on { background: var(--sk-pri); color: #fff; }
.sk-slot.is-on, .sk-target.is-on { background: var(--sk-cta); color: #fff; }
.sk-q { display: flex; align-items: center; gap: 1.6cqw; margin-bottom: 1cqw; }
.sk-q__l { font-size: 1.45cqw; min-width: 16cqw; opacity: .8; }
.sk-shophead { display: flex; justify-content: space-between; align-items: start; }
.sk-cart { font-size: 1.4cqw; font-weight: 700; background: var(--sk-cta); color: #fff; border-radius: 99px; min-width: 3cqw; text-align: center; padding: .4cqw .8cqw; }
.sk-prods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4cqw; }
.sk-prod { background: var(--sk-bg); border-radius: 1cqw; padding: 1cqw; display: grid; gap: .7cqw; }
.sk-prod__img { aspect-ratio: 5 / 3; border-radius: .8cqw; background: linear-gradient(160deg, var(--sk-pale), var(--sk-soft)); }
.sk-prod__n { font-size: 1.45cqw; font-weight: 600; }
.sk-prod__b { font-size: 1.25cqw; text-align: center; border-radius: 99px; padding: .6cqw; background: var(--sk-soft); font-weight: 600; }
.sk-gal { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1cqw; }
.sk-gal__i { aspect-ratio: 1; border-radius: .8cqw; background: linear-gradient(140deg, var(--sk-pale), var(--sk-pri)); }
.sk-done { font-size: 1.5cqw; font-weight: 700; margin-top: 1.2cqw !important; color: var(--sk-cta); opacity: 0; }
.sk-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; padding: 3cqw 3.2cqw; }
.sk-card { display: grid; gap: .9cqw; }
.sk-card__i { aspect-ratio: 16 / 10; border-radius: 1cqw; background: var(--sk-soft); }
.sk-card__l { height: 1.2cqw; border-radius: 99px; background: var(--sk-soft); width: 80%; } .sk-card__l--s { width: 55%; }
.sk-foot { display: flex; justify-content: space-between; padding: 2cqw 3.2cqw 3cqw; font-size: 1.3cqw; opacity: .7; border-top: 1px solid var(--sk-soft); }

/* narrow sketch = a phone site */
@container (max-width: 560px) {
  .sk-nav { padding: 4cqw 5cqw; } .sk-logo { font-size: 5cqw; } .sk-links { display: none; } .sk-btn { font-size: 3.4cqw; padding: 2cqw 3.6cqw; }
  .sk-hero { grid-template-columns: 1fr; padding: 3cqw 5cqw 6cqw; gap: 5cqw; }
  .sk-h { font-size: 10.5cqw; } .sk-p { font-size: 4cqw; margin: 3cqw 0 4cqw !important; } .sk-btn2 { font-size: 3.8cqw; padding: 2.8cqw 5cqw; }
  .sk-img { aspect-ratio: 16 / 9; border-radius: 3cqw; }
  .sk-mod { margin: 0 5cqw; padding: 4.5cqw; border-radius: 3cqw; } .sk-mod__h { font-size: 4.6cqw; margin-bottom: 3cqw !important; }
  .sk-day, .sk-slot, .sk-q__a { font-size: 3.4cqw; padding: 2cqw 3cqw; border-radius: 2cqw; } .sk-days, .sk-slots { gap: 2cqw; margin-bottom: 2cqw; }
  .sk-q { flex-wrap: wrap; gap: 2cqw; margin-bottom: 2.4cqw; } .sk-q__l { font-size: 3.4cqw; min-width: 100%; }
  .sk-cart { font-size: 3.4cqw; min-width: 7cqw; } .sk-prods { gap: 2.4cqw; } .sk-prod { padding: 2cqw; border-radius: 2cqw; } .sk-prod__n { font-size: 3cqw; } .sk-prod__b { font-size: 2.8cqw; padding: 1.4cqw; }
  .sk-gal { grid-template-columns: repeat(3, 1fr); gap: 2cqw; }
  .sk-done { font-size: 3.6cqw; margin-top: 3cqw !important; }
  .sk-cards { grid-template-columns: 1fr 1fr; padding: 6cqw 5cqw; gap: 4cqw; } .sk-card:nth-child(3) { display: none; }
  .sk-card__l { height: 2.6cqw; } .sk-foot { font-size: 3cqw; padding: 4cqw 5cqw 6cqw; }
}
/* skeleton phase: the regions as outlines, no content */
.sk.is-skel { background: transparent; }
.sk.is-skel [data-region] { outline: 1.5px dashed rgba(201, 168, 106, .7); outline-offset: -1px; border-radius: 6px; background: rgba(201, 168, 106, .05); }
.sk.is-skel [data-region] > * { visibility: hidden; }

/* ---------- ghosts, plates ---------- */
.ghost { border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 30px 60px -30px rgba(0,0,0,.35); visibility: hidden; }
.ghost__view { position: relative; width: 100%; height: 100%; overflow: hidden; }
.plates { width: 0; height: 0; perspective: 1400px; visibility: hidden; }
.plate { position: absolute; left: 0; top: 0; transform-origin: 50% 50%; }
.plate__body { position: absolute; inset: 0; border-radius: 12px; border: 1px solid rgba(201, 168, 106, .55); background: rgba(22, 21, 15, .82); padding: 4%; display: grid; gap: 4%; }
.plate__label { position: absolute; right: calc(100% + 18px); top: 50%; transform: translateY(-50%); white-space: nowrap; font: italic 400 clamp(16px, 1.4vw, 22px)/1 var(--font-display); color: var(--gold); }
.plate--look { grid-template-columns: repeat(4, 1fr) 1.4fr; align-items: center; }
.plate--look i { aspect-ratio: 1; border-radius: 50%; background: var(--c, #d97706); }
.plate--look i:nth-child(1) { --c: #d97706; } .plate--look i:nth-child(2) { --c: #b45309; } .plate--look i:nth-child(3) { --c: #fcd34d; } .plate--look i:nth-child(4) { --c: #fffbeb; }
.plate--look b { font: 400 clamp(28px, 4vw, 60px)/1 var(--font-display); color: var(--cream-text); text-align: center; }
.plate--content { grid-template-columns: 1fr 1fr; } .plate--content i { border-radius: 6px; background: rgba(241,238,230,.16); } .plate--content i:first-child { grid-row: span 2; background: rgba(241,238,230,.26); }
.plate--engine { grid-template-columns: repeat(3, 1fr); } .plate--engine i { border-radius: 6px; background: rgba(201,168,106,.35); }
.plate--admin { grid-template-columns: 1fr; } .plate--admin i { border-radius: 6px; border: 1px solid rgba(241,238,230,.3); }
.plate--care { grid-template-columns: repeat(3, 1fr); align-items: center; } .plate--care i { height: 60%; border-radius: 8px; background: repeating-linear-gradient(0deg, rgba(241,238,230,.22) 0 3px, transparent 3px 9px); }

/* ---------- pickers ---------- */
.picker { display: flex; flex-wrap: wrap; gap: 8px; visibility: hidden; }
.picker button { height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--fg); font: 500 14px/1 var(--font-ui); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.picker button[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--black); }
.picker--tiles i { width: 12px; height: 12px; border-radius: 50%; background: var(--c); }

/* ---------- search card ---------- */
.srch { background: #fff; color: #202124; border-radius: 16px; padding: 18px 20px 20px; box-shadow: 0 30px 60px -28px rgba(22,21,15,.45), 0 0 0 1px rgba(22,21,15,.08); visibility: hidden; }
.srch__bar { display: flex; align-items: center; gap: 10px; height: 44px; border-radius: 999px; border: 1px solid #dadce0; padding: 0 16px; font-size: 15px; }
.srch__glass { width: 14px; height: 14px; border: 2px solid #8a8a8a; border-radius: 50%; position: relative; flex: 0 0 auto; }
.srch__caret { width: 1.5px; height: 18px; background: #202124; }
.srch__res { display: grid; gap: 4px; margin-top: 16px; }
.srch__site { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #4d5156; }
.srch__site i { width: 18px; height: 18px; border-radius: 50%; background: var(--fav, #d97706); }
.srch__title { font-size: 19px; color: #1a0dab; line-height: 1.25; }
.srch__desc { font-size: 13.5px; color: #4d5156; line-height: 1.45; }

/* ---------- proof ---------- */
.pcard { border-radius: 14px; padding: 22px; display: flex; flex-direction: column; gap: 10px; text-decoration: none; overflow: hidden; visibility: hidden; }
.pcard__k { font: 600 10px/1.4 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; opacity: .8; }
.pcard__name { font: 400 clamp(30px, 2.6vw, 44px)/1 var(--font-display); margin-top: auto; }
.pcard__line { font-size: 14px; line-height: 1.4; }
.pcard__url { font-size: 13px; font-weight: 600; }
.pcard--ll { background: #FBF8F0; color: #16150F; box-shadow: inset 0 0 0 1px rgba(22,21,15,.1); } .pcard--ll .pcard__name { color: #2c8a5e; }
.pcard--le { background: #0F1B2D; color: #F8F6F1; } .pcard--le .pcard__name { color: #F5C842; }
.lh { margin: 0; font-size: 14px; color: var(--muted); visibility: hidden; }

/* ---------- review ---------- */
.review { margin: 0; text-align: center; visibility: hidden; }
.review__stars { display: block; color: #B07F00; letter-spacing: .2em; font-size: 22px; margin-bottom: 18px; }
.review blockquote { margin: 0; font: 400 clamp(26px, 3.3vw, 52px)/1.12 var(--font-display); letter-spacing: -.01em; color: var(--fg); }
.review figcaption { margin-top: 20px; font: 600 12px/1 var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }

/* ---------- receipt ---------- */
.rcpt { background: #fff; color: #1b1a16; border-radius: 6px; padding: 26px 26px 22px; box-shadow: 0 30px 60px -30px rgba(22,21,15,.4), 0 0 0 1px rgba(22,21,15,.08); visibility: hidden;
  -webkit-mask: radial-gradient(circle 7px at 50% 100%, transparent 98%, #000) 0 0 / 18px 100% repeat-x; }
.rcpt__k { margin: 0 0 16px; font: 600 11px/1 var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-ink); }
.rcpt__line { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px dashed #d9d4c6; font-size: 15px; line-height: 1.35; }
.rcpt__line b { white-space: nowrap; font-weight: 600; }
.rcpt__total { display: flex; justify-content: space-between; align-items: baseline; padding: 16px 0 10px; }
.rcpt__total span { font-size: 15px; font-weight: 600; }
.rcpt__total strong { font: 400 clamp(40px, 4vw, 60px)/1 var(--font-display); }
.rcpt__foot { margin: 0 0 6px; font-size: 13px; color: #5c5850; }
.rcpt__quote { margin: 0; font-size: 13px; font-weight: 600; color: #1b1a16; }

/* ---------- path ---------- */
.path { visibility: hidden; }
.path__h { margin: 0; font: 400 clamp(34px, 3.9vw, 62px)/1 var(--font-display); color: var(--fg); }
.path__line { position: absolute; left: 0; top: 0; overflow: visible; }
.path__line path { fill: none; stroke: var(--gold-deep); stroke-width: 2; }
.path__nodes { list-style: none; margin: 0; padding: 0; position: absolute; left: 0; top: 0; }
.path__nodes li { position: absolute; width: 190px; }
.path__nodes i { position: absolute; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--gold-deep); background: var(--bg); }
.path__nodes i::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--gold-deep); transform: scale(var(--on, 0)); }
.path__nodes strong { display: block; font: 400 clamp(22px, 1.9vw, 30px)/1.05 var(--font-display); color: var(--fg); }
.path__nodes span { display: block; margin-top: 6px; font-size: 14px; line-height: 1.4; color: var(--muted); }
.path__wa { position: absolute; margin: 0; font-size: 15px; color: var(--fg); white-space: nowrap; }
.path__wa a { color: var(--gold-ink); font-weight: 600; }

/* ---------- portal + CTA ---------- */
.portal { border-radius: 50%; border: 2px solid var(--gold-deep); background: var(--paper); visibility: hidden; }
.portal__line { margin: 0; text-align: center; font: 400 clamp(32px, 4.2vw, 68px)/1.02 var(--font-display); color: var(--dark); visibility: hidden; }
.portal__line em, .cta__h em { color: var(--gold-ink); }
.cta { text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 4%; visibility: hidden; }
.cta__h { margin: 0; font: 400 clamp(32px, 4.2vw, 68px)/1.02 var(--font-display); color: var(--dark); }
.cta__risk { margin: 0; font-size: 16px; color: #3d3a33; }
.cta__team { margin: 0; font-size: 14px; color: #5c5850; max-width: 46ch; }
.cta__team a { color: var(--dark); }

.cursor { width: 26px; height: 26px; z-index: 40; visibility: hidden; pointer-events: none; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
.cursor path { fill: #fff; stroke: #0C0C0D; stroke-width: 1.4; stroke-linejoin: round; }

/* ---------- after the film ---------- */
.after { background: var(--paper); color: var(--dark); padding: 120px clamp(16px, 4.5vw, 64px); }
.after__inner { max-width: 1100px; margin: 0 auto; }
.after .eyebrow { color: var(--gold-ink); }
.h2 { font: 400 clamp(34px, 3.9vw, 62px)/1 var(--font-display); margin: 0 0 20px; }

/* ---------- tall screens (phones, portrait tablets): everything stacks ---------- */
.is-tall .band { display: block; }
.is-tall .btn--hdr { display: none; }
.is-tall .h1 { font-size: clamp(36px, 9.6vw, 64px); }
.is-tall .stmt { font-size: clamp(30px, 8.4vw, 56px); }
.is-tall .lede { margin: 12px 0 16px; font-size: 16px; }
.is-tall .namer { margin-top: 18px; }
.is-tall .hero-fork { display: none; }
.is-tall .eyebrow { margin-bottom: 12px; }
.is-tall .plate__label { right: auto; left: 4%; top: -24px; transform: none; font-size: 15px; }
.is-tall .note { font-size: 15px; max-width: 13em; }

/* stacking order of the film objects */
.ghost { z-index: 1; } .ab { z-index: 3; } .pcard, .lh, .review, .path { z-index: 3; } .plates, .rcpt { z-index: 4; }
.col, .picker { z-index: 5; } .srch { z-index: 6; } .portal { z-index: 7; } .portal__line, .cta { z-index: 8; }

/* tall screens: type scales with u = min(W, 0.5625·H)/100 so portrait tablets match phones */
.is-tall .h1 { font-size: calc(var(--u) * 9.6); }
.is-tall .stmt { font-size: calc(var(--u) * 8.2); }
.is-tall .lede { font-size: calc(var(--u) * 4.1); }
.is-tall .review blockquote { font-size: calc(var(--u) * 6.4); }
.is-tall .path__h { font-size: calc(var(--u) * 8.2); }
.is-tall .path__nodes strong { font-size: calc(var(--u) * 6); }
.is-tall .path__nodes span, .is-tall .path__wa { font-size: calc(var(--u) * 3.6); }
.is-tall .cta__h, .is-tall .portal__line { font-size: calc(var(--u) * 8.4); }
.is-tall .cta__risk { font-size: calc(var(--u) * 4); }
.is-tall .cta__team { font-size: calc(var(--u) * 3.4); }
.is-tall .rcpt__line, .is-tall .rcpt__total span { font-size: calc(var(--u) * 3.8); }
.is-tall .rcpt__total strong { font-size: calc(var(--u) * 11); }
.is-tall .rcpt__foot, .is-tall .rcpt__quote { font-size: calc(var(--u) * 3.3); }
.is-tall .pcard__name { font-size: calc(var(--u) * 10); } .is-tall .pcard__line { font-size: calc(var(--u) * 4); } .is-tall .pcard__url, .is-tall .pcard__k { font-size: calc(var(--u) * 3); }
.is-tall .stmt small, .is-tall .lh { font-size: calc(var(--u) * 3.6); }
.sk.is-skel [data-region] { outline-color: rgba(201, 168, 106, .95); background: rgba(201, 168, 106, .09); }

/* key-frames round 1 fixes */
.plates { width: auto; height: auto; perspective-origin: 50% 40%; }
.plate__label { right: auto; left: 3%; top: 3%; transform: none; z-index: 2; font: 600 clamp(12px, 1.05vw, 15px)/1 var(--font-ui); letter-spacing: .02em; color: var(--gold); background: #0C0C0D; border: 1px solid rgba(201,168,106,.6); border-radius: 999px; padding: 6px 11px; }
.is-tall .plate__label { left: 3%; top: 3%; font-size: calc(var(--u) * 3); }
.note { background: #0C0C0D; border: 1px solid rgba(201,168,106,.45); }
.sk.is-skel .sk-mod > .sk-mod__h, .sk.is-skel .sk-shophead { visibility: visible; }
.sk.is-skel .sk-shophead > * { visibility: hidden; } .sk.is-skel .sk-shophead > .sk-mod__h { visibility: visible; color: var(--gold); }
.sk.is-skel .sk-mod > .sk-mod__h { color: var(--gold); }
.strike { position: absolute; left: 0; top: 0; margin: 0; white-space: nowrap; font: italic 400 clamp(20px, 2vw, 30px)/1 var(--font-display); color: #8f8c83; }
.strike::after { content: ""; position: absolute; left: -4%; right: -4%; top: 55%; height: 2px; background: var(--gold); transform-origin: 0 50%; transform: scaleX(var(--s, 0)); }
.path__nodes strong { font-size: clamp(24px, 2.3vw, 38px); }
.path__nodes span { font-size: 15px; }
.stage > .plate__label { left: 0; top: 0; right: auto; transform: none; z-index: 6; font-size: clamp(14px, 1.2vw, 20px); }
.is-tall .stage > .plate__label { font-size: calc(var(--u) * 3.1); }
.ab__url { display: block; line-height: 22px; }
.path__wa a { white-space: nowrap; }
.is-tall .pcard__name { margin-top: 2px; } .is-tall .pcard__line { margin-top: auto; }
.is-tall .ab__card-label { top: 0; bottom: auto; }
.ab__dots-grid { position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(201, 168, 106, .38) 1.2px, transparent 1.7px); background-size: 24px 24px; background-position: 12px 12px; pointer-events: none; }

/* gate 4 · beats 1–3 critic fixes */
.ab__ink .rail { stroke: rgba(201, 168, 106, .5); }
.sk.is-skel [data-region] { outline: 1.5px solid rgba(201, 168, 106, .9); background: rgba(201, 168, 106, .15); }
.sk.is-skel .sk-nav > .sk-logo { visibility: visible; color: var(--gold); }
.strike::after { height: 3px; }
.strike { color: #a29d90; }
.is-tall .note { font-size: calc(var(--u) * 3.8); }
.is-tall .note::before { font-size: calc(var(--u) * 2.2); }
.is-tall .picker button { height: calc(var(--u) * 10.4); font-size: calc(var(--u) * 3.6); padding: 0 calc(var(--u) * 4); }
.is-tall .picker { gap: calc(var(--u) * 2); }
.is-tall .namer__input, .is-tall .namer__trade { height: calc(var(--u) * 11.8); font-size: calc(var(--u) * 3.9); }
.is-tall .namer__label { font-size: calc(var(--u) * 3.6); }
.is-tall .eyebrow { font-size: calc(var(--u) * 3.1); }
.is-tall .hero-actions .btn { font-size: calc(var(--u) * 3.9); }
.is-tall .link { font-size: calc(var(--u) * 3.9); }
.is-tall .ab__chrome { font-size: calc(var(--u) * 3.1); }
.is-tall .ab__tag { font-size: calc(var(--u) * 2.8); }
.is-tall .wordmark { font-size: calc(var(--u) * 3.9); }
.is-tall .band { height: calc(var(--u) * 14.4); } .is-tall .band .btn { height: calc(var(--u) * 10.8); font-size: calc(var(--u) * 3.9); }
.plate__site { padding: 0; overflow: hidden; border-radius: 0 0 12px 12px; border-color: rgba(201,168,106,.35); background: #fff; }
.plate__site > .sk { position: absolute; }
.srch { padding: 24px 26px 26px; } .srch__bar { height: 54px; font-size: 19px; } .srch__site { font-size: 14px; } .srch__site i { width: 22px; height: 22px; }
.srch__title { font-size: 26px; } .srch__desc { font-size: 16px; }
.is-tall .srch__bar { height: calc(var(--u) * 12); font-size: calc(var(--u) * 4.2); } .is-tall .srch__title { font-size: calc(var(--u) * 5.4); } .is-tall .srch__desc { font-size: calc(var(--u) * 3.6); } .is-tall .srch__site { font-size: calc(var(--u) * 3.1); }
.admin { font-size: 14px; } .admin__field { font-size: 16px; } .admin__title { font-size: 15px; }

/* gate 4 · beats 4–6 critic fixes */
.daywipe { position: absolute; inset: 0; width: 100%; height: 100%; background: #EFEBE1; z-index: 0; visibility: hidden; }
.sk-logo { font-family: var(--font-display); font-weight: 400; font-size: 2.6cqw; }
@container (max-width: 560px) { .sk-logo { font-size: 5.6cqw; } }
.sk--base .sk-target.is-on, .sk--base .sk-slot.is-on { background: var(--gold); color: #0C0C0D; }
.sk--base .sk-cart { background: var(--gold); color: #0C0C0D; }
.sk-done { font-size: 1.9cqw; color: var(--sk-cta); }
.sk--base .sk-done { color: #7A5C22; }
.cursor { width: 38px; height: 38px; }
/* the sketch photo: a loaf on a shelf, not an arch */
.sk-img::after { left: 22%; right: 22%; bottom: 14%; height: 34%; border-radius: 46% 46% 14% 14% / 80% 80% 14% 14%;
  background: radial-gradient(ellipse at 45% 25%, color-mix(in srgb, var(--sk-pale) 75%, #fff) 0 18%, transparent 55%), color-mix(in srgb, var(--sk-pri) 70%, #7a4a12); }
.sk-img::before { content: ""; position: absolute; left: 6%; right: 6%; bottom: 13%; height: 3px; border-radius: 3px; background: color-mix(in srgb, var(--sk-ink) 22%, transparent); }
/* style tiles as cards in the wide copy column */
:root:not(.is-tall) .picker--tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
:root:not(.is-tall) .picker--tiles button { height: 60px; border-radius: 12px; justify-content: flex-start; padding: 0 16px; font-size: 15px; }
:root:not(.is-tall) .picker--tiles i { width: 26px; height: 26px; border-radius: 7px; }
/* layers: warm light slabs with real content, labels with leader lines */
.plate__body { background: #FBF6EA; border: 1px solid rgba(176, 138, 62, .55); box-shadow: 0 18px 30px -18px rgba(0,0,0,.45); }
.plate--look { grid-template-columns: repeat(4, 1fr) 1.2fr 3fr; align-items: center; padding: 3% 5%; }
.plate--look .sw { aspect-ratio: 1; border-radius: 50%; }
.plate--look .sw:nth-child(1) { background: #d97706; } .plate--look .sw:nth-child(2) { background: #b45309; } .plate--look .sw:nth-child(3) { background: #fcd34d; } .plate--look .sw:nth-child(4) { background: #fffbeb; box-shadow: inset 0 0 0 1px #e5d6a8; }
.plate--look b { font: 400 clamp(26px, 3.4vw, 54px)/1 var(--font-display); color: #2b1a05; text-align: center; }
.plate--look .ty { font: italic 400 clamp(16px, 1.6vw, 26px)/1 var(--font-display); color: #2b1a05; }
.plate--content { grid-template-columns: 1fr 1.2fr; grid-template-rows: repeat(4, 1fr); padding: 5%; gap: 6% 6%; }
.plate--content .ph { grid-row: 1 / 5; border-radius: 8px; background: linear-gradient(150deg, #fcd34d, #d97706); }
.plate--content .ln { height: 10px; align-self: center; border-radius: 99px; background: #d9cdb2; } .w9 { width: 92%; } .w7 { width: 70%; } .w8 { width: 82%; } .w5 { width: 52%; }
.plate--engine { grid-template-columns: repeat(3, 1fr); padding: 5%; gap: 5%; }
.plate--engine .pc { position: relative; border-radius: 8px; background: linear-gradient(170deg, #fef3c7, #fcd34d); }
.plate--engine .pc b { position: absolute; right: 6px; top: 6px; min-width: 22px; height: 22px; border-radius: 99px; background: #b45309; color: #fff; font: 700 12px/22px var(--font-ui); text-align: center; }
.plate--admin { grid-template-columns: 1fr; padding: 5% 7%; gap: 6%; }
.plate--admin .row { display: grid; grid-template-columns: 1fr 3fr; gap: 4%; align-items: center; } .plate--admin .row i { height: 9px; border-radius: 99px; background: #cdbf9f; } .plate--admin .row b { height: 70%; border-radius: 6px; border: 1.5px solid #c7b88f; background: #fff; }
.plate--care { grid-template-columns: repeat(3, 1fr); align-items: center; justify-items: center; padding: 5%; }
.plate--care svg { width: 34%; height: auto; fill: none; stroke: #7A5C22; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.stage > .plate__label::after { content: ""; position: absolute; left: 100%; top: 50%; width: 16px; height: 1px; background: rgba(176, 138, 62, .9); }
.is-tall .stage > .plate__label::after { display: none; }

/* gate 4 · beats 11–14 */
.path__nodes i { width: 26px; height: 26px; border-width: 2.5px; }
.path__nodes i::after { inset: 4px; }
.path__nodes strong { font-size: clamp(28px, 2.7vw, 46px); }
.path__nodes span { font-size: clamp(15px, 1.15vw, 19px); }
.path__h { font-size: clamp(40px, 4.6vw, 80px); }
.path__wa { font-size: clamp(15px, 1.2vw, 20px); }
.traveller { position: absolute; width: 26px; height: 26px; border-radius: 50%; background: var(--gold-deep); box-shadow: 0 0 0 6px rgba(176, 138, 62, .22); z-index: 2; visibility: hidden; }
.traveller::after { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: #FAF9F6; }
.review blockquote { font-size: clamp(30px, 3.7vw, 66px); }
.review blockquote span { transition: none; }
.rcpt__line { font-size: clamp(15px, 1.2vw, 20px); padding: 14px 0; }
.rcpt__total strong { font-size: clamp(48px, 5vw, 88px); }
.rcpt__foot, .rcpt__quote { font-size: clamp(13px, 1vw, 16px); }
.rcpt__k { font-size: clamp(11px, .85vw, 14px); }
.cta__h, .portal__line { font-size: clamp(36px, 4.8vw, 84px); }
.cta__risk { font-size: clamp(16px, 1.3vw, 21px); }
.cta__team { font-size: clamp(14px, 1.05vw, 17px); }

/* gate 4 · beats 7–14 critic fixes */
.btn--big { font-size: clamp(18px, 1.55vw, 28px); padding: 1.05em 2.1em; }
.is-tall .btn--big { width: 100%; height: calc(var(--u) * 15); font-size: calc(var(--u) * 5.2); }
.is-tall .cta { gap: calc(var(--u) * 5); }
.review figcaption { font-size: clamp(13px, 1vw, 17px); }
.is-tall .review figcaption { font-size: calc(var(--u) * 3.3); }
.is-tall .review__stars { font-size: calc(var(--u) * 5.5); }

.admin { left: 8px; right: 8px; bottom: 10px; border-radius: 16px; padding-bottom: 20px; }

/* each look has its own typeface (producer note 2026-10-03) */
.sk[data-font="clean"] .sk-h { font-family: var(--font-ui); font-weight: 600; letter-spacing: -.035em; }
.sk[data-font="clean"] .sk-logo { font-family: var(--font-ui); font-weight: 600; letter-spacing: -.02em; }
.sk[data-font="bold"] .sk-h { font-family: "Anton", Impact, sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: .005em; line-height: .96; font-size: 5.6cqw; }
.sk[data-font="bold"] .sk-logo, .sk[data-font="bold"] .sk-mod__h { font-family: "Anton", Impact, sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: .02em; }
.sk[data-font="bold"] .sk-btn, .sk[data-font="bold"] .sk-btn2 { text-transform: uppercase; letter-spacing: .06em; border-radius: .4cqw; }
.sk[data-font="warm"] .sk-h, .sk[data-font="warm"] .sk-logo, .sk[data-font="warm"] .sk-mod__h { font-family: "Nunito", system-ui, sans-serif; font-weight: 800; letter-spacing: -.01em; }
.sk[data-font="warm"] .sk-btn, .sk[data-font="warm"] .sk-btn2 { font-family: "Nunito", system-ui, sans-serif; font-weight: 800; }
.sk[data-font="premium"] .sk-h, .sk[data-font="premium"] .sk-logo, .sk[data-font="premium"] .sk-mod__h { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; letter-spacing: -.005em; }
.sk[data-font="premium"] .sk-h { font-size: 5.6cqw; line-height: 1; }
.sk[data-font="premium"] .sk-btn, .sk[data-font="premium"] .sk-btn2 { border-radius: 0; letter-spacing: .12em; text-transform: uppercase; font-size: 1.2cqw; }
@container (max-width: 560px) {
  .sk[data-font="bold"] .sk-h { font-size: 12cqw; } .sk[data-font="premium"] .sk-h { font-size: 11.5cqw; }
  .sk[data-font="premium"] .sk-btn, .sk[data-font="premium"] .sk-btn2 { font-size: 3cqw; }
}
/* the tiles preview their own type */
.picker--tiles button[data-style="clean-modern"] { font-family: var(--font-ui); font-weight: 600; letter-spacing: -.01em; }
.picker--tiles button[data-style="bold-punchy"] { font-family: "Anton", Impact, sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: .05em; font-size: 16px; }
.picker--tiles button[data-style="warm-friendly"] { font-family: "Nunito", system-ui, sans-serif; font-weight: 800; font-size: 16px; }
.picker--tiles button[data-style="premium-elegant"] { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-size: 19px; }
.is-tall .picker--tiles button[data-style="bold-punchy"], .is-tall .picker--tiles button[data-style="warm-friendly"] { font-size: calc(var(--u) * 3.8); }
.is-tall .picker--tiles button[data-style="premium-elegant"] { font-size: calc(var(--u) * 4.4); }
/* the Look layer: Aa and the sample line in the chosen face */
.plate--look[data-font="clean"] b, .plate--look[data-font="clean"] .ty { font-family: var(--font-ui); font-weight: 600; font-style: normal; }
.plate--look[data-font="bold"] b, .plate--look[data-font="bold"] .ty { font-family: "Anton", Impact, sans-serif; font-weight: 400; font-style: normal; text-transform: uppercase; }
.plate--look[data-font="warm"] b, .plate--look[data-font="warm"] .ty { font-family: "Nunito", system-ui, sans-serif; font-weight: 800; font-style: normal; }
.plate--look[data-font="premium"] b, .plate--look[data-font="premium"] .ty { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-style: normal; }

/* the sketch's picture: a line drawing for the kind of business (types.js) */
.sk-img::after, .sk-img::before { content: none; }
.sk-img { display: grid; place-items: center; }
.sk-motif { width: 46%; height: auto; fill: color-mix(in srgb, var(--sk-pale) 55%, transparent); stroke: var(--sk-cta); stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- gate 6 · the page after the film ---------- */
.hdr__nav { display: flex; gap: 26px; margin-left: auto; margin-right: 22px; }
.hdr__nav a { font: 500 14px/1 var(--font-ui); color: var(--fg); text-decoration: none; opacity: .8; }
.hdr__nav a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 5px; }
.is-tall .hdr__nav { display: none; }
@media (max-width: 900px) { .hdr__nav { display: none; } }

.after { background: var(--paper); color: var(--dark); padding: clamp(72px, 10vw, 140px) clamp(16px, 4.5vw, 64px); border-top: 1px solid rgba(22, 21, 15, .08); }
.after__inner { max-width: 1180px; margin: 0 auto; }
.after .eyebrow { color: var(--gold-ink); }
.after em { color: var(--gold-ink); }
.after .h2 { font: 400 clamp(36px, 4.4vw, 70px)/1.02 var(--font-display); letter-spacing: -.015em; margin: 0 0 22px; max-width: 18ch; }
.after__p { font-size: clamp(17px, 1.3vw, 20px); line-height: 1.55; color: #3d3a33; max-width: 52ch; margin: 0; }

.diff { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: end; }
.founder { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; padding: 22px; border: 1px solid rgba(176, 138, 62, .45); border-radius: 16px; background: #fff; }
.founder__mono { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--black); color: var(--gold); font: 400 26px/1 var(--font-display); }
.founder strong { display: block; font: 400 26px/1.1 var(--font-display); }
.founder figcaption span { display: block; font-size: 14px; color: #5c5850; margin-top: 4px; }
.founder figcaption .founder__line { color: #3d3a33; margin-top: 10px; font-size: 15px; line-height: 1.45; }

.after--services { background: var(--cream); }
.svc { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.svc li { background: var(--paper); border-radius: 16px; padding: 26px 22px 28px; border: 1px solid rgba(22, 21, 15, .08); }
.svc__n { font: 600 12px/1 var(--font-ui); letter-spacing: .14em; color: var(--gold-ink); }
.svc h3 { font: 400 clamp(24px, 2vw, 30px)/1.1 var(--font-display); margin: 18px 0 10px; }
.svc p { margin: 0; font-size: 15px; line-height: 1.5; color: #3d3a33; }

.after--review { background: var(--black); color: var(--cream-text); text-align: center; }
.review2 { margin: 0 auto; max-width: 980px; }
.review2__stars { display: block; color: var(--gold); letter-spacing: .2em; font-size: 22px; margin-bottom: 20px; }
.review2 blockquote { margin: 0; font: 400 clamp(26px, 2.9vw, 46px)/1.18 var(--font-display); }
.review2 figcaption { margin-top: 22px; font: 600 13px/1 var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: #A6A398; }

.faq { display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq__head { position: sticky; top: 96px; }
.faq__list details { border-top: 1px solid rgba(22, 21, 15, .14); }
.faq__list details:last-child { border-bottom: 1px solid rgba(22, 21, 15, .14); }
.faq__list summary { cursor: pointer; list-style: none; padding: 22px 40px 22px 0; position: relative; font: 400 clamp(21px, 1.7vw, 27px)/1.25 var(--font-display); }
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary::after { content: "+"; position: absolute; right: 4px; top: 18px; font: 300 28px/1 var(--font-ui); color: var(--gold-ink); }
.faq__list details[open] summary::after { content: "–"; }
.faq__list details p { margin: 0 0 24px; font-size: 16px; line-height: 1.6; color: #3d3a33; max-width: 60ch; }

.after--cta { background: var(--cream); text-align: center; }
.final { display: flex; flex-direction: column; align-items: center; }
.final .h2 { max-width: none; }
.final__badges { margin: 0 0 18px; font: 600 12px/1.5 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); }
.final__actions { display: flex; flex-direction: column; align-items: center; gap: 18px; margin-top: 10px; }
.final__wa { color: var(--dark); }

.foot { background: var(--black); color: var(--cream-text); padding: 64px clamp(16px, 4.5vw, 64px) 32px; }
.foot__inner { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
.foot__brand p { margin: 16px 0 0; color: #A6A398; font-size: 15px; max-width: 30ch; line-height: 1.5; }
.foot__k { margin: 0 0 12px; font: 600 11px/1 var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.foot__col a { display: block; color: var(--cream-text); text-decoration: none; font-size: 15px; padding: 5px 0; }
.foot__col a:hover { text-decoration: underline; text-underline-offset: 4px; }
.foot__legal { max-width: 1180px; margin: 48px auto 0; padding-top: 20px; border-top: 1px solid rgba(241, 238, 230, .12); color: #8a8880; font-size: 13px; }
.wordmark--ink { color: var(--cream-text); }

[data-reveal] { transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1); }
[data-reveal].is-hidden { opacity: 0; transform: translateY(24px); }
@media (prefers-reduced-motion: reduce) { [data-reveal] { transition: none; } }

@media (max-width: 900px) {
  .diff, .faq { grid-template-columns: 1fr; }
  .faq__head { position: static; }
  .svc { grid-template-columns: 1fr 1fr; }
  .foot__inner { grid-template-columns: 1fr 1fr; }
  .foot__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .svc { grid-template-columns: 1fr; }
  .final .btn--big { width: 100%; }
  .after { padding-bottom: 96px; }
  .foot { padding-bottom: 96px; }
}
.hdr.is-solid { background: rgba(250, 249, 246, .94); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(22, 21, 15, .08); --fg: #16150F; }
.hdr.is-solid .btn--hdr { background: #0C0C0D; color: #F1EEE6; }
.foot__col a { white-space: nowrap; }
.founder__mono { font-size: 26px; letter-spacing: .02em; }

.anchor { position: absolute; top: -80px; }
.band.is-off { opacity: 0; pointer-events: none; }
@media (min-width: 561px) and (max-width: 900px) { .hdr__nav { display: flex; gap: 18px; margin-right: 14px; } .hdr__nav a:not(.nav-keep) { display: none; } }
.is-tall .hdr__nav { display: none; }
@media (min-width: 561px) { .is-tall .hdr__nav { display: flex; } .is-tall .hdr__nav a:not(.nav-keep) { display: none; } }
.final__how { margin: 0 0 6px; font-size: 16px; color: #3d3a33; }
.btn--hdr { white-space: nowrap; }

/* the name field: the team's gold pencil circles it, a note invites the visitor */
.namer__ink { position: absolute; left: 1px; top: -3px; overflow: visible; pointer-events: none; max-width: none; }
.namer__ink path { fill: none; stroke: var(--gold); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: calc(var(--len, 2000) * 1px) calc(var(--len, 2000) * 2px); stroke-dashoffset: calc(var(--len, 2000) * 1px); transition: stroke-dashoffset 1.15s cubic-bezier(.65, 0, .35, 1); }
.namer.is-drawn .namer__ink path { stroke-dashoffset: 0; }
.namer.is-used .namer__ink path { opacity: .35; transition: opacity .4s; }
.namer__input:focus, .namer__trade:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(201, 168, 106, .22); }
.namer__input::placeholder { color: #a8a294; }
.is-tall .namer__label span { font-size: calc(var(--u) * 5); }
.namer.is-instant .namer__ink path { transition: none; }
.vprobe { position: fixed; left: 0; top: 0; width: 100%; height: 100svh; min-height: 560px; visibility: hidden; pointer-events: none; z-index: -1; }