/* ScoreLabs — styles
 * Hallmark custom theme · "morning newsprint, press-red masthead, verified ink"
 * All colours/fonts come from tokens.css. No raw values here.
 * Macrostructure: Editorial Ledger. Nav: masthead rule. Footer: statement.
 */

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }
body {
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--color-ink); text-decoration-color: var(--color-accent); text-underline-offset: 3px; }
a:hover { color: var(--color-accent); }
::selection { background: var(--color-accent); color: var(--color-accent-ink); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2.5rem); }

/* ---------- masthead ---------- */
.masthead { border-bottom: var(--border-ink); background: var(--color-paper); position: sticky; top: 0; z-index: 50; }
.masthead__in { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: .8rem 0; }
.masthead__brand { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; letter-spacing: -.01em; text-decoration: none; }
.masthead__brand em { font-style: normal; color: var(--color-accent); }
.masthead__nav { display: flex; gap: clamp(.9rem, 2.5vw, 1.8rem); align-items: center; }
.masthead__nav a { font-size: var(--size-small); text-decoration: none; color: var(--color-ink-2); }
.masthead__nav a:hover { color: var(--color-accent); }
.masthead__nav a.cta { border: var(--border-ink); padding: .42rem .95rem; border-radius: var(--radius); color: var(--color-ink); font-weight: 600; }
.masthead__nav a.cta:hover { background: var(--color-ink); color: var(--color-paper); }
@media (max-width: 720px) { .masthead__nav a:not(.cta) { display: none; } }

/* ---------- hero ---------- */
.hero { padding: var(--space-5) 0 var(--space-4); border-bottom: var(--border); }
.hero__label { font-family: var(--font-data); font-size: var(--size-tiny); letter-spacing: .18em; text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--space-2); }
.hero h1 { font-family: var(--font-display); font-size: var(--size-hero); line-height: 1.04; letter-spacing: -.02em; font-weight: 700; max-width: 15ch; }
.hero__lede { max-width: var(--wrap-text); margin-top: var(--space-3); font-size: 1.15rem; color: var(--color-ink-2); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.hero__kicker { margin-top: var(--space-3); font-family: var(--font-display); font-style: italic; font-size: 1.05rem; color: var(--color-muted); }

.btn { display: inline-block; font-weight: 600; font-size: var(--size-small); text-decoration: none; border-radius: var(--radius); padding: .8rem 1.5rem; transition: transform .18s var(--ease), background .18s var(--ease), color .18s var(--ease); }
.btn--solid { background: var(--color-accent); color: var(--color-accent-ink); border: 1.5px solid var(--color-accent); }
.btn--solid:hover { background: var(--color-focus); color: var(--color-accent-ink); transform: translateY(-1px); }
.btn--ghost { border: var(--border-ink); color: var(--color-ink); }
.btn--ghost:hover { background: var(--color-ink); color: var(--color-paper); }

/* ---------- ticker strip ---------- */
.strip { border-bottom: var(--border); background: var(--color-paper-2); }
.strip__in { display: flex; flex-wrap: wrap; gap: .4rem 2.2rem; padding: .7rem 0; font-family: var(--font-data); font-size: var(--size-tiny); letter-spacing: .14em; text-transform: uppercase; color: var(--color-muted); }
.strip__in b { color: var(--color-accent); font-weight: 400; }

/* ---------- sections ---------- */
section { padding: var(--space-5) 0; }
.sec-label { font-family: var(--font-data); font-size: var(--size-tiny); letter-spacing: .18em; text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--space-1); }
h2 { font-family: var(--font-display); font-size: var(--size-h2); line-height: 1.12; letter-spacing: -.015em; font-weight: 700; max-width: 24ch; }
.sec-lede { max-width: var(--wrap-text); margin-top: var(--space-2); color: var(--color-ink-2); }

/* ---------- how it works ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: var(--space-4); border-top: var(--border-ink); }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
.step { padding: var(--space-3) var(--space-2) var(--space-3) 0; border-bottom: var(--border); }
.step__num { font-family: var(--font-display); font-size: 2.2rem; color: var(--color-accent); font-weight: 700; line-height: 1; }
.step h3 { font-family: var(--font-display); font-size: var(--size-h3); margin: var(--space-1) 0 .4rem; }
.step p { font-size: var(--size-small); color: var(--color-muted); }

/* ---------- packages ---------- */
#packages { background: var(--color-paper-2); border-top: var(--border); border-bottom: var(--border); }
.packs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); margin-top: var(--space-4); }
@media (max-width: 1080px) { .packs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .packs { grid-template-columns: 1fr; } }
.pack { background: var(--color-paper); border: var(--border-ink); border-radius: var(--radius); padding: var(--space-3); display: flex; flex-direction: column; }
.pack--lead { box-shadow: 6px 6px 0 var(--color-accent); }
.pack__tier { font-family: var(--font-data); font-size: var(--size-tiny); letter-spacing: .16em; text-transform: uppercase; color: var(--color-muted); }
.pack h3 { font-family: var(--font-display); font-size: 1.45rem; margin-top: .35rem; }
.pack__price { font-family: var(--font-data); font-size: 1.6rem; margin: var(--space-2) 0 .2rem; }
.pack__price span { font-size: var(--size-small); color: var(--color-muted); }
.pack__tag { font-size: var(--size-small); color: var(--color-accent); font-weight: 600; margin-bottom: var(--space-2); }
.pack ul { list-style: none; display: grid; gap: .55rem; font-size: var(--size-small); color: var(--color-ink-2); margin-bottom: var(--space-3); }
.pack li { padding-left: 1.1rem; position: relative; }
.pack li::before { content: "—"; position: absolute; left: 0; color: var(--color-accent); }
.pack__note { font-size: var(--size-tiny); color: var(--color-muted); margin-bottom: var(--space-2); border-top: var(--border); padding-top: var(--space-1); }
.pack .btn { margin-top: auto; text-align: center; }
.packs-foot { margin-top: var(--space-3); font-size: var(--size-small); color: var(--color-muted); max-width: var(--wrap-text); }

/* ---------- the truth ---------- */
.truth { border-top: 3px double var(--color-rule-2); border-bottom: 3px double var(--color-rule-2); }
.truth__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3) var(--space-4); margin-top: var(--space-4); }
@media (max-width: 800px) { .truth__grid { grid-template-columns: 1fr; } }
.tru h3 { font-family: var(--font-display); font-size: var(--size-h3); margin-bottom: .45rem; }
.tru h3::before { content: "¶ "; color: var(--color-accent); }
.tru p { font-size: var(--size-small); color: var(--color-ink-2); }

/* ---------- score form ---------- */
/* ---------- phone line ---------- */
.phoneline {
  font-family: var(--font-data);
  font-size: 1.25rem;
  margin-top: var(--space-2);
  color: var(--color-ink);
}
.phoneline a { color: var(--color-accent); text-decoration: none; border-bottom: 1.5px solid transparent; white-space: nowrap; }
.phoneline a:hover, .phoneline a:focus-visible { border-bottom-color: var(--color-accent); }
.phoneline span { display: block; margin-top: .3rem; font-size: var(--size-small); color: var(--color-muted, #6b6b6b); }
#score .phoneline { color: var(--color-paper); }
#score .phoneline a { color: var(--color-paper); border-bottom-color: var(--color-accent); }
#score .phoneline a:hover { color: var(--color-accent-ink); }
#score .phoneline span { color: var(--color-paper); opacity: .7; }
#how-we-run a[href^="tel:"] { font-family: var(--font-data); color: var(--color-accent); text-decoration: none; border-bottom: 1px solid currentColor; white-space: nowrap; }
@media (max-width: 720px) { .phoneline { font-size: 1.05rem; } }

#score { background: var(--color-ink); color: var(--color-paper); }
#score .sec-label { color: var(--color-accent-ink); background: var(--color-accent); display: inline-block; padding: .2rem .6rem; }
#score h2, #score .sec-lede { color: var(--color-paper); }
#score .sec-lede { opacity: .85; }
.scoreform { margin-top: var(--space-4); max-width: var(--wrap-text); display: grid; gap: var(--space-2); }
.scoreform .row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
@media (max-width: 640px) { .scoreform .row { grid-template-columns: 1fr; } }
.scoreform label { font-family: var(--font-data); font-size: var(--size-tiny); letter-spacing: .12em; text-transform: uppercase; opacity: .8; display: block; margin-bottom: .35rem; }
.scoreform input[type="text"], .scoreform input[type="email"], .scoreform input[type="tel"], .scoreform input[type="url"], .scoreform textarea {
  width: 100%; background: transparent; border: 1px solid var(--color-neutral); border-radius: var(--radius);
  color: var(--color-paper); font-family: var(--font-body); font-size: var(--size-body); padding: .75rem .9rem;
}
.scoreform input:focus, .scoreform textarea:focus { border-color: var(--color-accent); outline: none; }
.scoreform .consent { display: flex; gap: .6rem; align-items: flex-start; font-size: var(--size-tiny); opacity: .8; text-transform: none; letter-spacing: normal; font-family: var(--font-body); }
#score a { color: var(--color-paper); text-decoration-color: var(--color-accent); }
#score a:hover { color: var(--color-accent-ink); }
.scoreform .consent input { margin-top: .2rem; }
.scoreform .hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }
.scoreform .btn--solid { justify-self: start; }
.form-msg { font-size: var(--size-small); }
.form-msg.ok { color: var(--color-ok); }
.form-msg.err { color: var(--color-error); }

/* ---------- faq ---------- */
.faqs { margin-top: var(--space-4); max-width: var(--wrap-text); border-top: var(--border-ink); }
.faqs details { border-bottom: var(--border); padding: var(--space-2) 0; }
.faqs summary { font-family: var(--font-display); font-size: var(--size-h3); font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: var(--space-2); }
.faqs summary::-webkit-details-marker { display: none; }
.faqs summary::after { content: "+"; color: var(--color-accent); font-family: var(--font-data); }
.faqs details[open] summary::after { content: "–"; }
.faqs details p { margin-top: var(--space-1); font-size: var(--size-small); color: var(--color-ink-2); max-width: 60ch; }

/* ---------- footer ---------- */
footer { border-top: var(--border-ink); padding: var(--space-4) 0; background: var(--color-paper-2); }
.foot__state { font-family: var(--font-display); font-size: 1.3rem; max-width: 30ch; margin-bottom: var(--space-3); }
.foot__grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); font-size: var(--size-tiny); color: var(--color-muted); }
.foot__grid a { color: var(--color-muted); }
.foot__links { display: flex; gap: 1.2rem; }

/* ---------- reveal motion ---------- */
html.js [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--d, 0) * 90ms); }
html.js [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- confirmation pages (/booked, /thank-you) ---------- */
.confirm { padding: var(--space-5) 0; }
.confirm__mark { font-family: var(--font-data); font-size: var(--size-tiny); letter-spacing: .18em; text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--space-2); }
.confirm h1 { font-family: var(--font-display); font-size: clamp(2.2rem, 5.5vw, 3.4rem); line-height: 1.06; letter-spacing: -.02em; font-weight: 700; max-width: 16ch; }
.confirm__lede { max-width: var(--wrap-text); margin-top: var(--space-3); font-size: 1.1rem; color: var(--color-ink-2); }
.confirm__next { list-style: none; max-width: var(--wrap-text); margin-top: var(--space-4); border-top: var(--border-ink); }
.confirm__next li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2); padding: var(--space-2) 0; border-bottom: var(--border); font-size: var(--size-small); color: var(--color-ink-2); }
.confirm__next b { font-family: var(--font-data); font-weight: 400; color: var(--color-accent); }
.confirm__next strong { color: var(--color-ink); font-weight: 600; }
.confirm__foot { max-width: var(--wrap-text); margin-top: var(--space-3); font-size: var(--size-tiny); color: var(--color-muted); }
.confirm__ctas { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }

/* ---------- legal pages ---------- */
.legal { max-width: var(--wrap-text); padding: var(--space-4) 0 var(--space-5); }
.legal h1 { font-family: var(--font-display); font-size: 2.2rem; margin-bottom: var(--space-1); }
.legal .updated { font-family: var(--font-data); font-size: var(--size-tiny); color: var(--color-muted); margin-bottom: var(--space-3); }
.legal h2 { font-size: 1.3rem; margin: var(--space-3) 0 var(--space-1); }
.legal p, .legal li { font-size: var(--size-small); color: var(--color-ink-2); margin-bottom: var(--space-1); }
.legal ul { padding-left: 1.2rem; }