/* AM Strength — site styles. Token-only: `npm run lint` fails on any raw color.

   Premium pass 2026-09-27 (Gus's "blend B"): Anton poster headlines, JetBrains Mono labels,
   her photos in one black-and-white grade, light buttons, orange as the ONE accent word.
   The reusable parts (photo hero, stat band, featured quote, carousel, gallery lightbox, FAQ,
   offers) are 406-site-kit v0.9.0 components; this file only brands them. */

/* ---- Type: Anton is one weight, so every chassis rule asking --display for 600/700 is
   reset to 400 here (declared as a KIT-EXCEPTION in tokens.css). Headlines run in caps,
   poster-style; body copy never does. ---- */
h1, h2, h3, .h-xl, .h-lg, .h-md, .brand-name, .footer-name, .k-stat-value { font-weight: 400; }
h1, h2, .h-xl, .h-lg { text-transform: uppercase; letter-spacing: 0.01em; line-height: 0.95; }
.h-xl { font-size: clamp(3rem, 8vw, 6rem); }
.h-lg { font-size: clamp(2.2rem, 5vw, 3.6rem); }
h3 { letter-spacing: 0.01em; }
.spark { color: var(--spark); }
.nw { white-space: nowrap; }

/* Section labels: mono, spaced, one color everywhere. */
.section-label { color: var(--accent); margin-bottom: 1rem; }

/* ---- Buttons: light fill + light ghost (the concept's restraint). Teal and orange stay
   off buttons: orange by the brand kit's rule, teal because a colored button on every
   section is what made the first build read like a startup. ---- */
.btn { font-family: var(--body); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--fs-200); padding: 1rem 1.6rem; border-radius: 2px; }
.btn-light, .btn-solid { background: var(--on-dark); color: var(--surface-dark); }
.btn-light:hover, .btn-solid:hover { background: var(--ink-soft); color: var(--surface-dark); transform: translateY(-1px); }
.btn-ghost-light, .btn-ghost { border: 1px solid var(--on-dark-faint); color: var(--on-dark); }
.btn-ghost-light:hover, .btn-ghost:hover { background: var(--on-dark); color: var(--surface-dark); }

/* ---- Header ---- */
.brand-mark { width: 72px; }
.brand-name { text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--fs-700); }
.brand-sub { font-family: var(--label-font); letter-spacing: 0.18em; }

/* ---- Hero (kit .k-hero-photo) ---- */
.hero-am h1.poster { font-size: clamp(3.4rem, 11vw, 9.4rem); line-height: 0.86; margin: 0; max-width: 11ch; }
.poster-line { display: block; }
.hero-lede { max-width: 34em; margin-top: 1.6rem; }
.hero-ctas { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-top: 2rem; }
.cred-band .k-stat-band { border-top: 0; }
.cred-band .k-stat-value { text-transform: uppercase; }

/* ---- Who I coach: a numbered editorial list, not six boxes ---- */
.who-list { list-style: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 clamp(1.5rem, 4vw, 3rem); }
.who-list > li { min-width: 0; border-top: 1px solid var(--line); padding: 1.4rem 0 1.8rem; }
.who-num { color: var(--spark); }
.who-list h3 { font-size: var(--fs-800); margin: 0.6rem 0 0.4rem; }
.who-list p { margin: 0; color: var(--ink-soft); font-size: var(--fs-300); }

/* ---- Offers ---- */
.k-offers { margin-top: 0.5rem; }
.k-offer h3 { font-size: var(--fs-800); }

/* ---- Reviews: the featured quote reads in the body face. Anton is a poster face; a
   sixty-word quote set in it at display size is a wall. ---- */
.k-quote-feature blockquote p { font-family: var(--body); font-weight: 500; letter-spacing: -0.01em; }
.reviews-home .k-quote-feature { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.k-carousel-slide blockquote p { color: var(--ink-soft); font-size: var(--fs-300); margin: 0 0 1rem; }
.k-carousel-slide figcaption { color: var(--ink-muted); }
.k-carousel-slide { display: flex; flex-direction: column; justify-content: space-between; }
.more-link { margin-top: 1.4rem; font-family: var(--label-font); font-size: var(--fs-200); letter-spacing: 0.12em; text-transform: uppercase; }
.more-link a { color: var(--ink); }
.featured-review { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.review-cols { columns: 2; column-gap: clamp(1rem, 2.5vw, 1.5rem); }
.review-cols > figure { margin: 0 0 clamp(1rem, 2.5vw, 1.5rem); break-inside: avoid; }
.stars { color: var(--spark); letter-spacing: 0.15em; }
.review-text { color: var(--ink-soft); margin: 0.5rem 0 0; }
.quote-cite { margin-top: 0.8rem; font-family: var(--label-font); font-size: var(--fs-100); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-muted); }
blockquote { margin: 0; }

/* ---- How it starts ---- */
.steps { counter-reset: step; display: grid; gap: 1.3rem; margin-top: 1.8rem; padding: 0; list-style: none; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 2.6rem 1fr; gap: 1rem; align-items: start; color: var(--ink-soft); }
.steps li::before {
  content: "0" counter(step); font-family: var(--label-font); font-size: var(--fs-200);
  color: var(--accent); border: 1px solid var(--accent); border-radius: 50%;
  width: 2.6rem; height: 2.6rem; display: grid; place-items: center;
}
.steps strong { color: var(--ink); display: block; }
.steps-feature { align-items: center; }
.steps-photo { margin: 0; }
.steps-photo img { border-radius: var(--radius); }

/* ---- FAQ: questions in the body face at weight, answers soft ---- */
.faq-home .k-faq { margin-top: clamp(1.6rem, 3vw, 2.4rem); }
.k-faq summary { font-family: var(--body); font-weight: 600; font-size: var(--fs-500); }

/* ---- Gallery (kit .k-gallery) ---- */
.k-gallery { margin-top: 0.5rem; }

/* ---- About ---- */
.about-photo { display: block; width: 100%; height: auto; border-radius: var(--radius); }
.about-split { align-items: start; }
.about-split > .about-photo-col { margin-top: 0; }
@media (min-width: 861px) { .about-photo-col { position: sticky; top: 6rem; } }
.disclaimer { font-size: var(--fs-200); color: var(--ink-muted); max-width: 46rem; }

/* ---- Apply ---- */
.contact-split { display: grid; grid-template-columns: 7fr 4fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.contact-split > * { min-width: 0; }
.aside-block + .aside-block { margin-top: 2rem; }

/* ---- Carried from the 2026-09-26 style audit ---- */
/* Footer sat 4-7rem below the last section; on pages ending in a dark CTA that showed as an
   empty band between two dark blocks. A full-width hairline marks the edge instead. */
.site-footer { margin-top: 0; border-top: 1px solid var(--line-on-dark); }
/* The base-row divider ran into the wrap's side padding (wider than the content above it). */
.footer-base { border-top: 0; position: relative; }
.footer-base::before {
  content: ""; position: absolute; top: 0; height: 1px; background: var(--line-on-dark);
  left: clamp(1.25rem, 4vw, 2.5rem); right: clamp(1.25rem, 4vw, 2.5rem);
}
.footer-head { font-family: var(--label-font); }

@media (max-width: 860px) {
  .brand-mark { width: 60px; }
  .brand-name { font-size: var(--fs-600); }
  .who-list { grid-template-columns: 1fr 1fr; }
  .review-cols { columns: 1; }
  .contact-split { grid-template-columns: 1fr; }
  .k-section-head .btn { display: none; } /* the offers heading's CTA repeats the hero's on a phone */
}
@media (max-width: 560px) {
  /* Never split "Kalispell, Montana": on phones the location takes its own line. */
  .k-hero-photo .k-label { flex-wrap: wrap; row-gap: 0.3rem; }
  .k-hero-photo .kicker-sep { display: none; }
  .k-hero-photo .k-label .nw { flex-basis: 100%; padding-left: 3.1rem; }
  .who-list { grid-template-columns: 1fr; }
}
.footer-name { text-transform: uppercase; letter-spacing: 0.06em; }

/* Twelve curated photos (2026-09-27, family photo added at her OK): three even rows of four on
   a desktop, never a ragged last row (an orphan reads as unfinished). Phones keep the kit's
   two-up (six even rows). Keep the count a multiple of 4 (and of 2) when photos change. */
@media (min-width: 1000px) { .k-gallery { grid-template-columns: repeat(4, 1fr); } }