/* Allen Sportswear — brand.css
   REVISED design system for the locked brand foundation ("Dress the champions").
   This supersedes the earlier "editorial-industrial" tokens.css used by the
   prior ABC round. What changed and why is documented on the Design System board.

   Defended carry-overs:  pure white ground, ink, the earned Allen red, restrained radii.
   Resets:                type (athletic grotesque + warm serif accent, mono retired),
                          palette tightened (gold/fern credential accents removed),
                          buttons re-ranked to browse-primary / rep-secondary,
                          photography treatment formalized, proof-scoreboard device added.
*/

:root {
  /* ── Color ───────────────────────────────────────────
     Warm paper ground (kept — a 20-year family shop sits on paper, not white).
     One earned red. One deep field tone for dark moments. Amber is for
     review stars ONLY (functional, never decorative / never a credential mark). */
  --ink:        #16130F;   /* warm near-black: text, headings */
  --ink-2:      #3A332B;   /* secondary text */
  --ink-3:      #6B6157;   /* muted / captions */
  --line:       rgba(22,19,15,.14);
  --line-soft:  rgba(22,19,15,.07);

  --paper:      #FFFFFF;   /* pure white — locked from Claude Design (warm cream was prototype only) */
  --paper-2:    #F7F6F4;   /* alternating section bands — near-white, not cream */
  --paper-warm: #FAF8F3;   /* About page only */
  --snow:       #FFFFFF;   /* cards, forms, elevated surfaces */

  --field:      #1B1611;   /* deep WARM near-black: dark sections + reveal + footer.
                              This + the warm ink is where the brand keeps its soul. */
  --field-2:    #2A2219;

  --red:        #D71C24;   /* Allen red — locked from Claude Design handoff */
  --red-deep:   #93091F;   /* red over ground for body emphasis + hover */
  --star:       #E0A526;   /* review stars only */
  --field-line: rgba(245,240,232,.16);

  --sport:      var(--red);   /* per-sport accent hook (one hairline only) */

  /* ── Type ────────────────────────────────────────────
     Archivo Black = the shout (hero word, sport names, proof numbers): athletic,
       confident, American, not a varsity cartoon.
     Archivo       = the workhorse (subheads, body, UI, labels).
     Newsreader it.= the warmth (the human + emotional lines, the price relief).
     Monospace retired: it read SaaS/tech; uppercase tracked Archivo reads
       printed-program / locker-room, which is the right register. */
  --shout:  "Archivo Black", "Archivo", system-ui, sans-serif;
  --sans:   "Archivo", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --serif:  "Newsreader", Georgia, "Times New Roman", serif;

  /* ── Spacing (8pt) ───────────────────────────────────── */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;

  /* ── Radius (restrained — confidence reads square) ───── */
  --r-1:3px; --r-2:6px; --r-3:10px; --r-pill:999px;

  /* ── Elevation (low, dry — no glossy float) ──────────── */
  --sh-1: 0 1px 2px rgba(22,19,15,.06);
  --sh-2: 0 2px 4px rgba(22,19,15,.06), 0 10px 26px rgba(22,19,15,.08);
  --sh-3: 0 4px 10px rgba(22,19,15,.10), 0 22px 48px rgba(22,19,15,.14);
}

/* ── Reset (artboard-scoped) ─────────────────────────── */
.aw, .aw * { box-sizing: border-box; }
.aw {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.5;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.aw h1, .aw h2, .aw h3, .aw h4 { margin: 0; font-weight: 600; }
.aw p { margin: 0; text-wrap: pretty; }
.aw a { color: inherit; text-decoration: none; }
.aw button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; padding: 0; }
.aw ul, .aw ol { margin: 0; padding: 0; list-style: none; }
.aw img { display: block; max-width: 100%; }

/* ── Display / shout ─────────────────────────────────── */
.aw .shout {
  font-family: var(--shout);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-transform: none;
}
.aw .serif { font-family: var(--serif); font-weight: 400; }
.aw .serif-it { font-family: var(--serif); font-weight: 400; font-style: italic; letter-spacing: -0.01em; }

/* Eyebrow — tracked uppercase Archivo (NOT mono). Printed-program register. */
.aw .eyebrow {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.aw .eyebrow--red { color: var(--red); }
.aw .eyebrow--paper { color: rgba(245,240,232,.6); }

/* ── Buttons ──────────────────────────────────────────
   Re-ranked per locked CTA pattern:
   primary  = "Browse your sport"  (light commitment, solid ink)
   secondary= "Talk to a rep"      (harder ask, outline)
   accent   = red, used once at peak intent (post-proof rep ask / close) */
.aw .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 22px;
  font-family: var(--sans); font-weight: 700; font-size: 15px;
  letter-spacing: 0.01em; line-height: 1; white-space: nowrap;
  border-radius: var(--r-1);
  transition: transform .08s, background .14s, color .14s, box-shadow .14s, border-color .14s;
}
.aw .btn--lg { padding: 18px 28px; font-size: 16px; }
.aw .btn .arr { transition: transform .14s; }
.aw .btn:hover .arr { transform: translateX(3px); }

.aw .btn--primary { background: var(--ink); color: var(--snow); }
.aw .btn--primary:hover { background: #000; }
.aw .btn--secondary { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.aw .btn--secondary:hover { background: var(--ink); color: var(--snow); }
.aw .btn--accent { background: var(--red); color: #fff; }
.aw .btn--accent:hover { background: var(--red-deep); }
.aw .btn--ghost-paper { background: transparent; color: var(--snow); box-shadow: inset 0 0 0 1.5px var(--field-line); }
.aw .btn--ghost-paper:hover { background: rgba(245,240,232,.1); }
.aw .btn--on-field { background: var(--snow); color: var(--ink); }
.aw .btn--on-field:hover { background: #fff; }

/* ── Section frame ───────────────────────────────────── */
.aw .section { padding: var(--s-9) var(--s-8); }
.aw .section--paper2 { background: var(--paper-2); }
.aw .section--field { background: var(--field); color: var(--snow); }
.aw .section--snow { background: var(--snow); }
.aw-mob .section { padding: var(--s-7) var(--s-5); }

/* ── Rule with label ─────────────────────────────────── */
.aw .rule {
  display: flex; align-items: center; gap: 16px;
  font-family: var(--sans); font-weight: 700; font-size: 12px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3);
}
.aw .rule::before, .aw .rule::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.aw .rule.left::before { display: none; }

/* ── Stat / scoreboard line (SIGNATURE DEVICE) ───────── */
.aw .scoreboard {
  display: grid;
  border: 1.5px solid var(--ink);
  border-radius: var(--r-2);
  overflow: hidden;
  background: var(--snow);
}
.aw .scoreboard--field { border-color: var(--field-line); background: rgba(245,240,232,.04); }
.aw .stat { padding: 22px 24px; border-right: 1px solid var(--line); }
.aw .scoreboard--field .stat { border-right-color: var(--field-line); }
.aw .stat:last-child { border-right: none; }
.aw .stat .num { font-family: var(--shout); font-weight: 900; line-height: .9; letter-spacing: -0.02em; font-size: 52px; }
.aw .stat .lab { font-family: var(--sans); font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-top: 10px; }
.aw .scoreboard--field .stat .lab { color: rgba(245,240,232,.6); }
.aw .stat .num .u { font-size: .42em; vertical-align: 0.32em; margin-left: 2px; color: var(--red); }

/* ── Live review widget (the conversion centerpiece) ─── */
.aw .reviewcard {
  background: var(--snow);
  border: 1.5px solid var(--ink);
  border-radius: var(--r-3);
  overflow: hidden;
}
.aw .live-dot {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--sans); font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
}
.aw .live-dot::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: #21a45d;
  box-shadow: 0 0 0 0 rgba(33,164,93,.5); animation: aw-pulse 2s infinite;
}
@keyframes aw-pulse { 0%{box-shadow:0 0 0 0 rgba(33,164,93,.45)} 70%{box-shadow:0 0 0 7px rgba(33,164,93,0)} 100%{box-shadow:0 0 0 0 rgba(33,164,93,0)} }
.aw .stars { color: var(--star); letter-spacing: 2px; font-size: 18px; }

/* ── Breadth list (flat, marquee names ride inside) ──── */
.aw .breadth {
  columns: 3; column-gap: 40px;
  font-family: var(--sans); font-size: 16px; line-height: 1.9; color: var(--ink-2);
}
.aw .breadth li { break-inside: avoid; }
.aw .breadth .marquee { font-weight: 700; color: var(--ink); }
.aw-mob .breadth { columns: 2; column-gap: 20px; font-size: 14px; }
.aw .disclaimer { font-size: 12px; color: var(--ink-3); line-height: 1.5; max-width: 70ch; }

/* ── Photo treatment ──────────────────────────────────
   Documentary team/coach/reveal photography. Never a folded-jersey packshot.
   Placeholder surfaces are art-directed: each says exactly what it WILL be. */
.aw .photo {
  position: relative; overflow: hidden;
  background:
    linear-gradient(135deg, rgba(22,19,15,.04), rgba(22,19,15,.10)),
    var(--paper-2);
  border-radius: var(--r-2);
  color: var(--ink-2);
  display: flex; flex-direction: column; justify-content: flex-end;
}
.aw .photo--field {
  background: linear-gradient(160deg, #241d16, #110d09);
  color: rgba(245,240,232,.82);
}
.aw .photo__art {
  position: absolute; inset: 0; padding: 18px;
  display: flex; align-items: center; justify-content: center; text-align: center;
}
.aw .photo__dir {
  font-family: var(--serif); font-style: italic; font-size: 17px; line-height: 1.3;
  color: var(--ink-3); max-width: 30ch;
}
.aw .photo--field .photo__dir { color: rgba(245,240,232,.5); }
.aw .photo__tag {
  position: relative; margin: 14px; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 10px; border-radius: var(--r-pill);
  background: rgba(22,19,15,.78); color: var(--snow);
  font-family: var(--sans); font-weight: 700; font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
}
.aw .photo__tag::before { content:""; width:5px; height:5px; border-radius:50%; background: var(--red); }
.aw .photo__cap {
  position: relative; margin: 0 14px 14px; align-self: flex-start;
  font-family: var(--sans); font-weight: 700; font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--snow); text-shadow: 0 1px 8px rgba(0,0,0,.6);
}

/* image-slot inherits radius + sits on the same warm ground */
.aw image-slot { border-radius: var(--r-2); overflow: hidden; }

/* ── Two-tier photography ──────────────────────────────
   The asset reality is two libraries: A-roll (cinematic, dark, warm/red team
   shots + reveals) and B-roll (the real client archive: warm-cast locker rooms,
   field snaps, mixed cameras/resolution). Cast by tier, not by slot:
     .photo-wrap.tier-a  -> hero / reveal, full size, no grade needed
     .photo-wrap.tier-b  -> demoted small + a unifying warm-red grade so a
                            ragged set reads as one brand and ties to Allen red. */
.aw .photo-wrap { position: relative; }
.aw .photo-wrap.tier-b image-slot,
.aw .photo-wrap.tier-b .photo { filter: saturate(1.06) contrast(1.04) brightness(1.01); }
.aw .photo-wrap.tier-b::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: var(--r-2);
  background: linear-gradient(180deg, rgba(215,28,36,.05), rgba(120,42,12,.12));
  mix-blend-mode: multiply;
}

/* ── Flow steps (families-pay handoff) ───────────────── */
.aw .flow { display: grid; gap: 14px; }
.aw .step {
  position: relative; padding: 24px; background: var(--snow);
  border: 1px solid var(--line); border-radius: var(--r-3);
}
.aw .step .n {
  font-family: var(--shout); font-weight: 900; font-size: 16px; color: var(--red);
  letter-spacing: .04em;
}
.aw .step h4 { font-family: var(--sans); font-weight: 700; font-size: 20px; margin-top: 8px; letter-spacing: -0.01em; }
.aw .step p { font-size: 14.5px; color: var(--ink-2); margin-top: 8px; line-height: 1.5; }

/* ── Nav ─────────────────────────────────────────────── */
.aw .nav { display: flex; align-items: center; justify-content: space-between; padding: 18px 40px; border-bottom: 1px solid var(--line); background: var(--paper); }
.aw .nav .links { display: flex; gap: 30px; font-weight: 600; font-size: 15px; }
.aw .nav .links a { color: var(--ink-2); }
.aw .nav .links a:hover { color: var(--ink); }
.aw .nav .phone { font-family: var(--sans); font-weight: 700; font-size: 14px; letter-spacing: .01em; }
.aw .navmob { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--line); background: var(--paper); }

/* ── Sticky mobile CTA ───────────────────────────────── */
.aw .sticky {
  position: sticky; bottom: 0; z-index: 30;
  display: flex; gap: 10px; padding: 12px 16px 16px;
  background: rgba(243,239,230,.94); backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
}

/* ── Wordmark ────────────────────────────────────────── */
.aw .wordmark { display: flex; align-items: baseline; gap: 9px; }
.aw .wordmark .nm { font-family: var(--shout); font-weight: 900; font-size: 22px; letter-spacing: -0.02em; }
.aw .wordmark .sub { font-family: var(--sans); font-weight: 700; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }