/* ═══════════════════════════════════════════════════════════════════════════
   SPECIMEN — structure only.

   No hex value, no rgb(), no font-family anywhere in this file. Every colour
   is a token from theme.css; the only mixed values are neutral scrims derived
   from --bg over --ink, which survive any palette swap because they are made
   OF the palette rather than beside it.

   The skeleton is deliberately prototypical — header where headers go, nav
   that reads like nav, hero → proof → what it is → what you buy → price →
   how it goes → objections → contact. The judgement forms in 17ms and it is a
   judgement about familiarity, not cleverness.

   The one signature move is the rail: a two-digit index and a fixed-pitch
   label hanging in the left margin of every section, with a hairline above it.
   It costs one grid column, works with no images at all, and is the reason
   this reads as a specification rather than a brochure.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── container ────────────────────────────────────────────────────────────── */

.in{max-width:var(--container);margin-inline:auto;
  padding-inline:clamp(20px,5vw,56px)}

/* ── header ───────────────────────────────────────────────────────────────
   Two rows on a phone (identity + phone, then nav under a hairline), one row
   from 880px. The phone number is a target, not a footnote: it is on the first
   screen at every width, because that is the conversion path for this buyer
   and because a studio that buries its own number is arguing against itself. */

.top{background:var(--bg);border-bottom:1px solid var(--line)}
.top .in{display:grid;align-items:center;gap:0 var(--s4);
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"brand call" "nav nav"}
.brand{grid-area:brand;color:var(--ink);text-decoration:none;
  font-size:1.125rem;padding-block:var(--s3)}
.top nav{grid-area:nav;display:flex;flex-wrap:wrap;gap:0 var(--s5);
  border-top:1px solid var(--line);margin-top:var(--s1)}
.top nav a{color:var(--body);text-decoration:none;font-size:.9375rem}
.top nav a:hover{color:var(--accent-dark)}
/* The current-page marker is drawn once, by the shared page furniture. Adding
   a second one here would double the rule on every inner page. */
.call{grid-area:call;justify-self:end;color:var(--ink);text-decoration:none;
  font-size:.875rem;padding-inline:var(--s4);border:1px solid var(--line);
  display:inline-flex;align-items:center;min-height:44px}
.call:hover{border-color:var(--accent);color:var(--accent-dark)}

@media (min-width:880px){
  .top .in{grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-areas:"brand nav call";gap:var(--s6)}
  .top nav{border-top:0;margin-top:0;justify-content:flex-end;gap:0 var(--s6)}
  .brand{font-size:1.25rem;padding-block:var(--s4)}
}

/* ── section rhythm ───────────────────────────────────────────────────────
   Six different vertical values across the page, on purpose. Uniform section
   heights are the loudest "this is a template" tell there is, and the fix
   costs nothing but the decision. */

.band{border-top:1px solid var(--line);padding-block:clamp(56px,8vw,116px)}
.phead + .band,.proof + .band,.hero + .band{border-top:0}

.cols{display:grid;gap:var(--s6)}
.rail{display:flex;align-items:baseline;gap:var(--s4);
  border-top:2px solid var(--ink);padding-top:var(--s3)}
.idx{font-size:.75rem;color:var(--accent-dark)}
.rail .sec-label{margin:0;font-size:.75rem}
.main{min-width:0}

@media (min-width:1000px){
  .cols{grid-template-columns:9.5rem minmax(0,1fr);
    gap:var(--s7) clamp(32px,5vw,88px)}
  .rail{flex-direction:column;align-items:stretch;gap:var(--s3);
    position:sticky;top:var(--s5);align-self:start}
  .rail .sec-label{max-width:9ch}
}

/* ── hero ─────────────────────────────────────────────────────────────────
   Type only. There is no photograph in this content and there is not going to
   be one, so the first screen is an editorial 8/5 split: the headline on the
   left at display size, the objection-killing sub and the two actions bottom-
   aligned in a narrower column on the right. */

.hero{padding-block:clamp(48px,8vw,124px) clamp(52px,8vw,120px)}
.hero .in{display:grid;gap:clamp(28px,4vw,44px)}
.hero .eyebrow{margin-bottom:var(--s5)}
.hero h1{font-size:var(--step-6);margin:0;max-width:15ch}
.hero-side{border-top:1px solid var(--line);padding-top:var(--s5)}
.hero-sub{font-size:var(--step-1);color:var(--body);margin:0 0 var(--s6);
  max-width:40ch}
.hero-tel{display:flex;align-items:center;flex-wrap:wrap;gap:0 var(--s2);
  margin:var(--s4) 0 0;font-size:var(--step--1);color:var(--muted)}
.hero-tel a{color:var(--accent-dark);text-decoration:none;
  text-underline-offset:.25em}
.hero-tel a:hover{text-decoration:underline}

/* From 960px the sidebar's rule turns through ninety degrees and becomes a
   column rule instead. A horizontal rule floating beside a three-line headline
   aligns with nothing; a vertical one is aligned by construction, top and
   bottom, to the two things beside it. */
@media (min-width:960px){
  .hero .in{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
    gap:clamp(40px,5vw,80px);align-items:end}
  .hero-side{border-top:0;border-left:1px solid var(--line);
    padding:var(--s2) 0 var(--s2) clamp(32px,4vw,64px)}
}

.acts{display:flex;flex-wrap:wrap;gap:var(--s3);margin:0;max-width:none}

/* In the hero the two actions live inside a narrow column, so they stack and
   share one width rather than sitting at two accidental widths side by side.
   Between 560px and the point the sidebar appears there is room for a row. */
.hero-side .acts{display:grid;gap:var(--s3)}
@media (min-width:560px) and (max-width:959px){
  .hero-side .acts{grid-auto-flow:column;justify-content:start}
}

/* ── proof band ───────────────────────────────────────────────────────────
   The two measured claims, inverted, immediately under the hero. This is the
   whole credibility argument and it is made with numbers rather than badges,
   because there are no clients yet and inventing some is the one line that
   cannot be walked back. */

.proof{background:var(--ink);color:var(--bg)}
.proof .in{padding-block:clamp(40px,5.5vw,80px)}
.stats{list-style:none;margin:0;padding:0;display:grid}
.stats li{padding-block:clamp(22px,3vw,32px)}
.stats li + li{border-top:1px solid color-mix(in oklab,var(--bg) 20%,transparent)}
.stats .fig{display:block;font-size:clamp(2.6rem,1.95rem + 3.1vw,4.5rem);
  line-height:.95;color:var(--bg)}
.stats .lab{display:block;margin-top:var(--s4);font-size:.75rem;color:var(--bg)}
.stats .note{display:block;margin-top:var(--s3);font-size:var(--step--1);
  max-width:36ch;color:color-mix(in oklab,var(--bg) 80%,var(--ink))}

@media (min-width:820px){
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats li{padding-block:0;padding-inline:0 clamp(28px,4vw,64px)}
  .stats li + li{border-top:0;
    border-left:1px solid color-mix(in oklab,var(--bg) 20%,transparent);
    padding-inline:clamp(28px,4vw,64px) 0}
}

/* ── intro ────────────────────────────────────────────────────────────────── */

.intro{padding-block:clamp(64px,10vw,164px)}
.big{font-size:clamp(1.9rem,1.4rem + 2.4vw,3.4rem);max-width:18ch;
  margin:0 0 clamp(28px,3.5vw,52px)}
.intro-body{max-width:var(--prose)}
.intro-body p{font-size:var(--step-1);color:var(--body)}
.intro-body p:last-child{margin-bottom:0}

/* ── pull quote (rendered only when the content has one) ──────────────────── */

.pull{padding-block:clamp(56px,7vw,104px)}
.pull figure{margin:0}
.pull blockquote{margin:0;padding:0}
.pull blockquote p{font-size:clamp(1.6rem,1.2rem + 2vw,2.75rem);max-width:22ch;
  margin:0;color:var(--ink);line-height:1.15}
.pull figcaption{margin-top:var(--s5);font-size:var(--step--1);color:var(--muted)}

/* ── offers ───────────────────────────────────────────────────────────────
   Two panels, hairline-divided, each carrying its own specification list. One
   block instead of a services teaser plus a features grid — the same six lines
   said twice is what makes a page feel padded. */

.offers-band{padding-block:clamp(60px,8.5vw,132px)}
.offers{display:grid;gap:0}
.offer{min-width:0}
.offer + .offer{border-top:1px solid var(--line);margin-top:var(--s7);
  padding-top:var(--s7)}
.offer-n{font-size:.75rem;color:var(--accent-dark);margin:0 0 var(--s4)}
.offer h2,.offer h3{font-size:clamp(1.5rem,1.2rem + 1.3vw,2.1rem);
  margin:0 0 var(--s4);max-width:16ch}
.offer h2 a,.offer h3 a{color:var(--ink);text-decoration:none;
  display:inline-block;min-height:44px}
.offer h2 a:hover,.offer h3 a:hover{color:var(--accent-dark)}
.offer-blurb{color:var(--body);margin:0;max-width:44ch}

@media (min-width:900px){
  .offers{grid-template-columns:repeat(2,minmax(0,1fr))}
  .offer{padding-inline:0 clamp(28px,3.2vw,56px)}
  .offer + .offer{border-top:0;margin-top:0;padding-top:0;
    border-left:1px solid var(--line);
    padding-inline:clamp(28px,3.2vw,56px) 0}
}

/* ── specification list ───────────────────────────────────────────────────── */

.spec{list-style:none;margin:var(--s6) 0 0;padding:0;
  border-top:1px solid var(--line)}
.spec li{display:grid;gap:var(--s2);padding-block:var(--s4);
  border-bottom:1px solid var(--line)}
.spec .k{font-size:.8125rem;color:var(--ink)}
.spec .v{font-size:.9375rem;color:var(--body);max-width:56ch}
.spec-n{font-size:.75rem;color:var(--accent-dark)}

.spec-band{padding-block:clamp(56px,7vw,104px)}
.spec--wide{margin-top:0}
@media (min-width:760px){
  .spec--wide li{grid-template-columns:3rem minmax(0,15rem) minmax(0,1fr);
    gap:0 clamp(20px,3vw,44px);align-items:baseline;
    padding-block:var(--s5)}
}

/* ── price ────────────────────────────────────────────────────────────────
   The figure gets the heaviest rule on the page above it and nothing else
   competing beside it. The exclusions live one click away on the FAQ, which is
   the only reason this template is allowed to state a price at all. */

.price-band{background:var(--surface);padding-block:clamp(52px,6.5vw,100px)}
.price{display:grid;gap:clamp(28px,4vw,56px)}
.price-fig{border-top:2px solid var(--ink);padding-top:var(--s4)}
.price-lab{font-size:.75rem;color:var(--muted);margin:0 0 var(--s3)}
.price .fig{display:block;margin:0;font-size:clamp(2.5rem,2rem + 2.4vw,4rem);
  line-height:.95;color:var(--ink)}
.price-say h2{font-size:clamp(1.5rem,1.2rem + 1.5vw,2.4rem);max-width:20ch;
  margin:0 0 var(--s5)}
.price-say .lede{font-size:var(--step-1);color:var(--body);max-width:54ch;
  margin:0}

@media (min-width:820px){
  .price{grid-template-columns:minmax(0,14rem) minmax(0,1fr);
    gap:clamp(32px,5vw,80px);align-items:start}
}

/* ── process ──────────────────────────────────────────────────────────────── */

.steps-band{padding-block:clamp(52px,6.5vw,100px)}
.steps-band h2{font-size:clamp(1.5rem,1.2rem + 1.4vw,2.3rem);max-width:20ch}
.steps{list-style:none;margin:clamp(32px,4vw,56px) 0 0;padding:0;display:grid}
.steps li{border-top:1px solid var(--line);padding-block:var(--s5) var(--s6)}
.steps li:last-child{padding-bottom:0}
.step-n{display:block;font-size:.75rem;color:var(--accent-dark);
  margin-bottom:var(--s4)}
.steps h3{font-size:clamp(1.05rem,1rem + .45vw,1.3rem);margin:0 0 var(--s3)}
.steps p{margin:0;font-size:.9375rem;color:var(--body);max-width:34ch}

@media (min-width:900px){
  .steps{grid-template-columns:repeat(4,minmax(0,1fr))}
  .steps li{padding-block:var(--s5) 0;padding-inline:0 clamp(18px,2vw,32px)}
  .steps li + li{border-left:1px solid var(--line);
    padding-inline:clamp(18px,2vw,32px) clamp(18px,2vw,32px)}
}

/* ── questions ────────────────────────────────────────────────────────────
   Index, question, answer — three columns, like a schedule of works. The FAQ
   is one of the few genuinely unusual assets this content has, so it gets the
   most horizontal room on the site rather than being hidden in an accordion
   nobody opens. */

.faq-band{padding-block:clamp(60px,9vw,148px)}
.faq-band > .in > h2,.faq-band .main > h2{
  font-size:clamp(1.5rem,1.2rem + 1.4vw,2.3rem);max-width:20ch}
.qa{margin-top:clamp(32px,4vw,56px);border-top:1px solid var(--line)}
.faq-band > .in > .qa{margin-top:0}
.qa-row{display:grid;gap:var(--s3);padding-block:clamp(26px,3.2vw,44px);
  border-bottom:1px solid var(--line)}
.qa-n{font-size:.75rem;color:var(--accent-dark)}
.qa-row h2,.qa-row h3{font-size:clamp(1.1rem,1rem + .5vw,1.35rem);margin:0;
  max-width:26ch}
.qa-row p{margin:0;color:var(--body);max-width:58ch}

@media (min-width:960px){
  .qa-row{grid-template-columns:3rem minmax(0,25ch) minmax(0,1fr);
    gap:0 clamp(24px,3.2vw,56px);align-items:start}
}

/* ── links out of a section ───────────────────────────────────────────────── */

.more{margin:clamp(28px,3.5vw,48px) 0 0;max-width:none}
.more a{display:inline-flex;align-items:center;min-height:44px;
  color:var(--accent-dark);font-weight:600;font-size:.9375rem;
  text-decoration:underline;text-underline-offset:.3em;
  text-decoration-thickness:1px}
.more a:hover{text-decoration-thickness:2px}

/* ── disclaimers ──────────────────────────────────────────────────────────
   Body size, inside the component they qualify, above the rule rather than
   below it. Florida 4-7.12(d) forbids the fine print; New York 7.4 wants the
   disclaimer larger than the claim. Neither is satisfied by a footnote. */

.notes{margin-top:clamp(32px,4vw,56px);border-top:2px solid var(--ink);
  padding-top:var(--s5)}
.note-item h3{font-size:1rem;margin:0 0 var(--s2)}
.note-item p{margin:0 0 var(--s5);font-size:var(--step-0);color:var(--body)}
.note-item:last-child p{margin-bottom:0}

/* ── closing call to action ───────────────────────────────────────────────── */

.cta{background:var(--ink);color:var(--bg);border-top:0;
  padding-block:clamp(56px,8vw,124px)}
.cta .sec-label{color:color-mix(in oklab,var(--bg) 72%,var(--ink));
  margin-bottom:var(--s5)}
.cta h2{color:var(--bg);font-size:clamp(1.8rem,1.35rem + 2.2vw,3.2rem);
  max-width:15ch;margin:0 0 var(--s5)}
.cta .lede{color:color-mix(in oklab,var(--bg) 80%,var(--ink));max-width:44ch;
  margin:0;font-size:var(--step-1)}
.cta-in{display:grid;gap:clamp(36px,5vw,80px)}
.cta-acts{display:flex;flex-direction:column;align-items:flex-start;
  gap:var(--s4);border-top:1px solid color-mix(in oklab,var(--bg) 20%,transparent);
  padding-top:var(--s5)}
.cta .bignum{color:var(--bg)}
.cta .bignum:hover{color:var(--bg);text-decoration:underline;
  text-underline-offset:.25em}
.cta .fineprint{color:color-mix(in oklab,var(--bg) 76%,var(--ink));margin:0}

@media (min-width:900px){
  .cta-in{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:end}
}

/* ── page headers ─────────────────────────────────────────────────────────── */

.phead .in{max-width:var(--container);padding-inline:clamp(20px,5vw,56px);
  padding-block:clamp(44px,6.5vw,112px) clamp(36px,5vw,76px)}
.phead h1{font-size:clamp(2.2rem,1.5rem + 3.3vw,4rem);max-width:17ch;
  margin:0 0 var(--s5)}
.phead .lede{max-width:52ch}
.phead .eyebrow a{display:inline-flex;align-items:center;min-height:44px;
  text-decoration:underline;text-underline-offset:.3em}

/* ── services hub rows (shared furniture, re-tuned) ───────────────────────── */

.rows{margin:0}
.row{gap:var(--s3) clamp(24px,3vw,56px)}
.row .n{color:var(--accent-dark)}
.row h2{max-width:20ch}

/* ── contact ──────────────────────────────────────────────────────────────── */

.form{max-width:none}
.field label{display:flex;align-items:baseline;gap:var(--s2);flex-wrap:wrap}
.req{font-size:.6875rem;color:var(--muted)}
/* A field's border is the only thing that says a field is there, so WCAG 1.4.11
   asks it to clear 3:1 against the page — which a hairline drawn in --line does
   not. Mixed rather than hard-coded, so it darkens or lightens with whatever
   palette the theme file carries. */
.field input,.field textarea{
  border-color:color-mix(in oklab,var(--ink) 58%,var(--bg))}
.field input:hover,.field textarea:hover{border-color:var(--ink)}
.field input::placeholder,.field textarea::placeholder{color:var(--muted);
  opacity:1}
.form .acts{margin-top:var(--s6)}
.form .fineprint{margin-top:var(--s5)}
.aside .bignum{margin-bottom:var(--s2)}
.aside > p{margin-bottom:var(--s4)}

/* ── footer ───────────────────────────────────────────────────────────────── */

.foot{background:var(--ink);color:color-mix(in oklab,var(--bg) 80%,var(--ink));
  border-top:1px solid color-mix(in oklab,var(--bg) 20%,transparent)}
.foot .in{padding-block:clamp(44px,5.5vw,84px) clamp(28px,3.5vw,52px)}
.foot-grid{display:grid;gap:clamp(32px,4vw,56px)}
.foot-brand{margin:0 0 var(--s3);font-size:.8125rem;color:var(--bg)}
.foot-tag{margin:0;font-size:var(--step--1);max-width:32ch;
  color:color-mix(in oklab,var(--bg) 80%,var(--ink))}
.foot .sec-label{margin:0 0 var(--s2);
  color:color-mix(in oklab,var(--bg) 72%,var(--ink))}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{font-size:.9375rem}
.foot a{color:var(--bg);text-decoration:none}
.foot a:hover{text-decoration:underline;text-underline-offset:.25em}
/* The rule runs the full width of the footer; the note keeps a readable
   measure inside it. Putting the border on the paragraph itself would stop the
   line wherever the sentence happened to stop. */
.foot-end{margin-top:clamp(36px,4.5vw,64px);padding-top:var(--s5);
  border-top:1px solid color-mix(in oklab,var(--bg) 20%,transparent)}
.foot-note{margin:0;font-size:var(--step--1);max-width:66ch;
  color:color-mix(in oklab,var(--bg) 76%,var(--ink))}

@media (min-width:820px){
  .foot-grid{grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);
    gap:clamp(32px,4vw,72px)}
}

/* ── focus, on a dark ground ──────────────────────────────────────────────
   The accent ring disappears against near-black. On the inverted bands the
   ring becomes the paper colour instead, which is the same ring doing the same
   job with the palette turned over. */

.proof :focus-visible,.cta :focus-visible,.foot :focus-visible{
  outline-color:var(--bg)}