/* ═══════════════════════════════════════════════════════════════════════════
   SPEC — the DATASHEET archetype. Names no colour.

   This studio has no photographs, no portfolio and no testimonials, and will
   not invent any. What it has is a performance budget that is enforced rather
   than promised, a zero-cookie property, one stated price and a list of
   exclusions. So the page is built the way a specification sheet is built:
   claims paired with the number that backs them.

   ONE signature move — the ledger, a monospaced two-column run of figure and
   meaning. The research is blunt that an avant-garde site loses a plumber, and
   that design carries 46.1% of credibility judgements: prototypical skeleton,
   exceptional execution, one move. This is the move.
   ═══════════════════════════════════════════════════════════════════════════ */

.top{position:sticky;top:0;z-index:40;background:var(--bg);border-bottom:1px solid var(--line)}
.top .in{max-width:1180px;margin-inline:auto;padding:0 clamp(20px,4vw,36px);
  display:flex;align-items:center;gap:28px;min-height:70px}
.brand{font-weight:700;font-size:1.15rem;letter-spacing:-.05em;color:var(--ink);
  text-decoration:none;margin-right:auto}
.top nav{display:flex;gap:24px}
.top nav a{color:var(--body);text-decoration:none;font-size:.9375rem}
.top nav a:hover{color:var(--accent-dark)}
.top nav a[aria-current]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--accent)}
.top .call{font-family:var(--font-mono);font-size:.875rem;color:var(--ink);text-decoration:none;
  display:inline-flex;align-items:center;min-height:44px}
.top .call:hover{color:var(--accent-dark)}
@media (max-width:860px){.top nav{display:none}}

.band{max-width:1180px;margin-inline:auto;padding:clamp(52px,7vw,100px) clamp(20px,4vw,36px)}
.band--tall{padding-block:clamp(72px,10vw,150px)}
.band--short{padding-block:clamp(36px,5vw,64px)}
.tint{background:var(--surface);border-block:1px solid var(--line)}
.rule{border-top:1px solid var(--line)}

/* ── opening ────────────────────────────────────────────────────────────── */
.open h1{font-size:var(--step-6);max-width:15ch;margin:0 0 26px}
.open .sub{font-size:clamp(1.0625rem,1rem + .5vw,1.4rem);color:var(--body);max-width:50ch;margin:0 0 34px}
.open .acts{display:flex;gap:12px;flex-wrap:wrap;max-width:none;margin:0}

/* ── the ledger: the one signature move ─────────────────────────────────── */
.ledger{border-top:2px solid var(--ink);margin-top:clamp(40px,5vw,64px)}
.ledger .line{display:grid;gap:4px 28px;padding:20px 0;border-bottom:1px solid var(--line);
  align-items:baseline}
@media (min-width:720px){.ledger .line{grid-template-columns:8.5rem minmax(0,1fr)}}
.ledger .fig{font-family:var(--font-mono);font-weight:600;font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem);
  color:var(--accent);line-height:1;letter-spacing:-.02em}
.ledger .lab{font-weight:600;color:var(--ink);margin:0 0 4px}
.ledger p{margin:0;color:var(--muted);max-width:58ch;font-size:.9375rem}

.say h2{font-size:clamp(1.6rem,1.2rem + 1.9vw,2.5rem);max-width:20ch;margin:0 0 22px}
.say .col{max-width:62ch;color:var(--body)}
.say .col p{margin:0 0 18px}
.say .col p:last-child{margin:0}

/* ── the two products ───────────────────────────────────────────────────── */
.products{display:grid;gap:2px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden}
@media (min-width:820px){.products{grid-template-columns:1fr 1fr}}
.product{background:var(--card);padding:clamp(26px,3.4vw,40px);display:flex;flex-direction:column;
  gap:12px;text-decoration:none;color:inherit;transition:background .18s}
a.product:hover{background:var(--surface)}
.product h3{font-size:clamp(1.2rem,1.05rem + .8vw,1.55rem);margin:0}
.product > p{margin:0;color:var(--body);flex:1}
.product .go{font-family:var(--font-mono);font-size:.8125rem;color:var(--accent-dark);font-weight:600}

/* ── included list, with a monospaced figure on every line ──────────────── */
.incl{list-style:none;margin:0;padding:0;column-gap:clamp(32px,5vw,64px)}
@media (min-width:680px){.incl{columns:2}}
.incl li{padding:12px 0;border-top:1px solid var(--line);break-inside:avoid;
  display:flex;gap:14px;align-items:baseline}
.incl b{font-family:var(--font-mono);font-weight:600;color:var(--accent-dark);font-size:.875rem;
  min-width:4.2em;flex:none}
.incl span{color:var(--body);font-size:.9375rem}

/* ── price ──────────────────────────────────────────────────────────────── */
.cost{display:grid;gap:32px;align-items:start}
@media (min-width:860px){.cost{grid-template-columns:minmax(0,1fr) 300px;gap:64px}}
.cost h2{font-size:clamp(1.5rem,1.2rem + 1.5vw,2.2rem);margin:0 0 16px;max-width:22ch}
.cost > div > p{margin:0;color:var(--body);max-width:56ch}
.tag{background:var(--ink);border-radius:var(--radius);padding:30px;position:sticky;top:90px}
.tag .fig{display:block;font-family:var(--font-mono);font-weight:600;letter-spacing:-.04em;
  font-size:clamp(2.2rem,1.7rem + 2.2vw,3rem);color:var(--card);line-height:1;margin-bottom:8px}
.tag .lab{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--on-ink-muted);display:block;margin-bottom:22px}
.tag .btn{width:100%;background:var(--card);color:var(--ink);border-color:var(--card)}
.tag .btn:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}

/* ── steps ──────────────────────────────────────────────────────────────── */
.steps{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));counter-reset:s}
.steps > div{border-top:1px solid var(--ink);padding-top:16px}
.steps > div::before{counter-increment:s;content:counter(s,decimal-leading-zero);display:block;
  font-family:var(--font-mono);font-weight:600;font-size:.875rem;color:var(--accent);
  margin-bottom:12px;line-height:1}
.steps h3{font-size:1.0625rem;margin:0 0 6px;font-weight:600}
.steps p{margin:0;color:var(--muted);font-size:.9375rem}

/* ── faq ────────────────────────────────────────────────────────────────── */
.faq details{border-top:1px solid var(--line)}
.faq details:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:20px 44px 20px 0;position:relative;
  font-size:1.0625rem;color:var(--ink);font-weight:500;min-height:44px;display:flex;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'';position:absolute;right:12px;top:50%;width:10px;height:10px;
  margin-top:-7px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(45deg)}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.faq details p{margin:0 0 20px;color:var(--body);max-width:64ch}

/* ── closing ────────────────────────────────────────────────────────────── */
.close{background:var(--ink)}
.close .in{max-width:1180px;margin-inline:auto;padding:clamp(56px,8vw,110px) clamp(20px,4vw,36px)}
.close h2{color:var(--on-ink);font-size:clamp(1.6rem,1.2rem + 2vw,2.5rem);max-width:16ch;margin-bottom:24px}
.close .acts{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:52px;max-width:none}
.close .btn{background:var(--card);color:var(--ink);border-color:var(--card)}
.close .btn:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.close .btn--line{background:transparent;color:var(--on-ink);border-color:var(--on-ink-muted)}
.close .btn--line:hover{background:var(--card);color:var(--ink);border-color:var(--card)}
.close .cols{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  padding-top:36px;border-top:1px solid var(--on-ink-muted)}
.close h3{color:var(--on-ink);font-family:var(--font-mono);font-size:.75rem;letter-spacing:.1em;
  text-transform:uppercase;margin-bottom:12px}
.close ul{list-style:none;margin:0;padding:0}
.close li{padding:4px 0;font-size:.9375rem;color:var(--on-ink-muted)}
.close a{color:var(--on-ink);text-decoration:none}
.close a:hover{color:var(--card)}
.close .fine{margin-top:44px;font-size:.8125rem;color:var(--on-ink-muted);max-width:70ch}