/* Red Dragon Karate design system
   Tokens + components. The brand guide documents this file; every page imports it.
   Anchors from the crest: Dragon Red #AC131D, black, white. Everything else builds on those. */

@import url("https://fonts.googleapis.com/css2?family=Anton&family=Lato:ital,wght@0,400;0,700;0,900;1,400&display=swap");

/* ------------------------------------------------------------------ tokens */
:root {
  /* Core: from the crest */
  --red: #AC131D;          /* Dragon Red. Fills, buttons, red text on light */
  --red-deep: #7E0E16;     /* Hover, pressed, gradients */
  --ember: #FF4D57;        /* Red text and accents on black */
  --ink: #0B0B0C;          /* Black. Text on light, dark sections */
  --white: #FFFFFF;

  /* Neutrals */
  --charcoal: #141416;     /* Dark surfaces */
  --iron: #222226;         /* Raised dark surfaces */
  --line-dark: #2E2E33;    /* Borders on dark */
  --paper: #F6F1E7;        /* Warm light background, like a fresh gi */
  --bone: #E9E1D2;         /* Fills and borders on light */
  --stone: #6B655C;        /* Secondary text on light */
  --ash: #9A938A;          /* Secondary text on dark */

  /* Rank */
  --gold: #E0AE4A;         /* Achievement on dark */
  --gold-deep: #8A6316;    /* Gold text on light */

  /* Belts */
  --belt-white: #F4F1EA; --belt-yellow: #F2C230; --belt-orange: #F07F1F; --belt-green: #2E9E4F;
  --belt-blue: #2563C9; --belt-purple: #7B3FBF; --belt-brown: #6E4321; --belt-black: #0B0B0C;

  /* Status */
  --success: #2E9E4F; --warning: #C98A0B; --danger: var(--red);

  /* Type */
  --font-display: "Anton", Impact, "Arial Narrow Bold", sans-serif;
  --font-body: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  --fs-display: clamp(3.25rem, 9vw, 7rem);
  --fs-h1: clamp(2.5rem, 6vw, 4rem);
  --fs-h2: clamp(2rem, 4.5vw, 2.75rem);
  --fs-h3: 1.5rem;
  --fs-lead: 1.1875rem;
  --fs-body: 1rem;
  --fs-small: .875rem;
  --fs-eyebrow: .75rem;

  /* Space (4px base) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;

  /* Shape */
  --radius-sm: 3px;        /* Buttons, inputs, chips */
  --radius: 6px;           /* Cards */
  --notch: 22px;           /* The cut corner on signature cards */

  /* Depth */
  --shadow-1: 0 1px 2px rgba(11, 11, 12, .08), 0 2px 8px rgba(11, 11, 12, .06);
  --shadow-2: 0 10px 30px -12px rgba(11, 11, 12, .35);
  --shadow-red: 0 12px 28px -10px rgba(172, 19, 29, .55);

  /* Motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --fast: 140ms;
  --med: 260ms;

  --container: 1180px;
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 var(--fs-body)/1.6 var(--font-body); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: var(--red); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
a:hover { color: var(--red-deep); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--s4); }
@media (min-width: 720px) { .container { padding: 0 var(--s6); } }

.dark { background: var(--ink); color: var(--paper); }
.dark a:not(.btn) { color: var(--ember); }

/* ------------------------------------------------------------------ type */
.display, .h1, .h2 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: .005em; margin: 0; text-wrap: balance; }
.display { font-size: var(--fs-display); line-height: .9; }
.h1 { font-size: var(--fs-h1); line-height: .95; }
.h2 { font-size: var(--fs-h2); line-height: 1; }
.h3 { font: 900 var(--fs-h3)/1.2 var(--font-body); margin: 0; letter-spacing: -.005em; }
.lead { font-size: var(--fs-lead); line-height: 1.6; }
.small { font-size: var(--fs-small); }
.muted { color: var(--stone); }
.dark .muted { color: var(--ash); }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0; font: 900 var(--fs-eyebrow)/1 var(--font-body); letter-spacing: .28em; text-transform: uppercase; color: var(--red); }
.eyebrow::before { content: ""; width: 22px; height: 3px; background: currentColor; }
.dark .eyebrow { color: var(--ember); }
.text-red { color: var(--red); }
.dark .text-red { color: var(--ember); }

/* ------------------------------------------------------------------ belt rule (signature) */
/* A black belt with a red rank bar near the tip. Used as a divider and under titles. */
.belt-rule { position: relative; height: 10px; background: var(--ink); border-radius: 1px; }
.belt-rule::after { content: ""; position: absolute; top: 0; bottom: 0; right: 7%; width: 22px; background: var(--red); }
.dark .belt-rule { background: var(--paper); }
.belt-rule--short { width: 120px; height: 6px; }
.belt-rule--short::after { width: 12px; right: 14px; }

/* ------------------------------------------------------------------ buttons */
.btn { --bg: var(--ink); --fg: var(--white); --bd: var(--bg);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px;
  border: 2px solid var(--bd); border-radius: var(--radius-sm); background: var(--bg); color: var(--fg);
  font: 900 .875rem/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  cursor: pointer; transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease), transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease); }
.btn:hover { color: var(--fg); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; flex: none; transition: transform var(--fast) var(--ease); }
.btn:hover svg.nudge { transform: translateX(3px); }

.btn--primary { --bg: var(--red); --bd: var(--red); }
.btn--primary:hover { --bg: var(--red-deep); --bd: var(--red-deep); box-shadow: var(--shadow-red); }
.btn--ink:hover { --bg: #26262a; --bd: #26262a; }
.btn--outline { --bg: transparent; --fg: var(--ink); --bd: var(--ink); }
.btn--outline:hover { --bg: var(--ink); --fg: var(--white); }
.btn--ghost { --bg: transparent; --fg: var(--red); --bd: transparent; padding: 0 10px; }
.btn--ghost:hover { --fg: var(--red-deep); --bg: rgba(172, 19, 29, .07); }
.btn--light { --bg: var(--paper); --fg: var(--ink); --bd: var(--paper); }
.btn--light:hover { --bg: var(--white); --bd: var(--white); }
.btn--outline-light { --bg: transparent; --fg: var(--paper); --bd: rgba(246, 241, 231, .5); }
.btn--outline-light:hover { --bd: var(--paper); --bg: rgba(246, 241, 231, .08); }

.btn--lg { min-height: 58px; padding: 0 30px; font-size: .9375rem; }
.btn--sm { min-height: 38px; padding: 0 14px; font-size: .75rem; gap: 8px; }
.btn--block { width: 100%; }
.btn[disabled], .btn.is-disabled { --bg: var(--bone); --bd: var(--bone); --fg: var(--stone); cursor: not-allowed; box-shadow: none; transform: none; }

/* ------------------------------------------------------------------ chips + badges */
.chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 1.5px solid var(--bone); border-radius: 999px; background: var(--white);
  font: 700 .8125rem/1 var(--font-body); color: var(--ink); }
.chip svg { width: 14px; height: 14px; color: var(--red); }
.dark .chip { background: var(--iron); border-color: var(--line-dark); color: var(--paper); }
.dark .chip svg { color: var(--ember); }
button.chip { cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); }

.badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: var(--radius-sm); font: 900 .6875rem/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; background: var(--ink); color: var(--white); }
.badge--red { background: var(--red); }
.badge--gold { background: var(--gold); color: var(--ink); }
.badge--soft { background: var(--bone); color: var(--ink); }
.badge--outline { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }

/* Belt swatch: a small belt with a knot line */
.belt { display: inline-block; width: 56px; height: 14px; border-radius: 2px; background: var(--c, var(--belt-black)); box-shadow: inset 0 0 0 1px rgba(11, 11, 12, .18); position: relative; }
.belt::after { content: ""; position: absolute; top: 0; bottom: 0; right: 9px; width: 8px; background: var(--tip, transparent); }

/* ------------------------------------------------------------------ cards */
.card { position: relative; background: var(--white); border: 1px solid var(--bone); border-radius: var(--radius); padding: var(--s5); box-shadow: var(--shadow-1); }
.dark .card, .card--dark { background: var(--charcoal); border-color: var(--line-dark); color: var(--paper); box-shadow: none; }

/* Signature: a notched top-right corner, like the point of the crest */
.card--notch { border: 0; border-radius: 0; clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%); }
.card--notch::before { content: ""; position: absolute; top: 0; right: 0; width: calc(var(--notch) + 10px); height: calc(var(--notch) + 10px); background: linear-gradient(225deg, var(--red) 0 calc(var(--notch) * .7071 + 4px), transparent 0); pointer-events: none; }

.card--interactive { transition: transform var(--med) var(--ease), box-shadow var(--med) var(--ease); }
.card--interactive:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }

/* Program card: photo-free, number + age group + outcomes */
.program-card { display: flex; flex-direction: column; gap: var(--s3); min-height: 100%; padding: var(--s6) var(--s5) var(--s5); }
.program-card .num { font: 400 3rem/1 var(--font-display); color: var(--red); }
.dark .program-card .num { color: var(--ember); }
.program-card ul { margin: var(--s2) 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.program-card li { display: flex; gap: 10px; align-items: flex-start; font-size: .9375rem; }
.program-card li svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--red); }
.dark .program-card li svg { color: var(--ember); }

/* Stat */
.stat { display: grid; gap: 6px; }
.stat .n { font: 400 clamp(2.75rem, 6vw, 4rem)/.9 var(--font-display); }
.stat .n em { font-style: normal; color: var(--red); }
.dark .stat .n em { color: var(--ember); }
.stat .l { font: 900 .75rem/1.3 var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--stone); }
.dark .stat .l { color: var(--ash); }

/* Location card */
.loc-card { display: grid; gap: 6px; padding: var(--s4) var(--s5); }
.loc-card .h3 { font-size: 1.125rem; }
.loc-card .meta { font-size: .875rem; color: var(--stone); }
.loc-card .sensei { font-size: .8125rem; font-weight: 700; color: var(--gold-deep); }
.loc-card a.tel { font-weight: 900; text-decoration: none; }

/* Offer card: the 8-free-lessons block */
.offer-card, .dark .offer-card { background: var(--red); color: var(--white); border: 0; padding: var(--s6); box-shadow: var(--shadow-red); overflow: hidden; }
.offer-card .big { font: 400 clamp(3.5rem, 15vw, 7.5rem)/.85 var(--font-display); }
.offer-card .eyebrow, .dark .offer-card .eyebrow { color: var(--white); }

/* ------------------------------------------------------------------ forms */
.field { display: grid; gap: 6px; }
.label { font: 900 .75rem/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; }
.hint { font-size: .8125rem; color: var(--stone); }
.input, .select { width: 100%; height: 50px; padding: 0 14px; border: 1.5px solid #CFC6B6; border-radius: var(--radius-sm); background: var(--white); color: var(--ink);
  font: 400 1rem/1 var(--font-body); transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease); }
.input::placeholder { color: #9A938A; }
.input:hover, .select:hover { border-color: var(--stone); }
.input:focus, .select:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(224, 174, 74, .55); }
.select { appearance: none; padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0B0C' stroke-width='2.5' stroke-linecap='square'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; }
.field.is-error .input { border-color: var(--red); }
.field.is-error .hint { color: var(--red); font-weight: 700; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: .9375rem; cursor: pointer; }
.check input { appearance: none; flex: none; width: 22px; height: 22px; margin: 1px 0 0; border: 1.5px solid #CFC6B6; border-radius: var(--radius-sm); background: var(--white); display: grid; place-items: center; cursor: pointer; }
.check input[type="radio"] { border-radius: 50%; }
.check input:checked { background: var(--red); border-color: var(--red); }
.check input[type="checkbox"]:checked::after { content: ""; width: 10px; height: 6px; border: solid var(--white); border-width: 0 0 2.5px 2.5px; transform: translateY(-1px) rotate(-45deg); }
.check input[type="radio"]:checked::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--white); }

/* ------------------------------------------------------------------ alert */
.alert { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-left: 4px solid var(--ink); background: var(--white); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: .9375rem; }
.alert svg { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.alert--red { border-color: var(--red); } .alert--red svg { color: var(--red); }
.alert--gold { border-color: var(--gold); } .alert--gold svg { color: var(--gold-deep); }
.alert--green { border-color: var(--success); } .alert--green svg { color: var(--success); }

/* ------------------------------------------------------------------ accordion (FAQ) */
.faq { border-top: 2px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--bone); }
.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; cursor: pointer; font: 900 1.0625rem/1.35 var(--font-body); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .pm { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); transition: background var(--fast) var(--ease), transform var(--med) var(--ease); }
.faq summary .pm::before, .faq summary .pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2.5px; background: var(--white); transform: translate(-50%, -50%); }
.faq summary .pm::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform var(--med) var(--ease); }
.faq details[open] summary .pm { background: var(--red); }
.faq details[open] summary .pm::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq .answer { padding: 0 44px 22px 0; color: var(--stone); }

/* ------------------------------------------------------------------ nav */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(11, 11, 12, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--paper); border-bottom: 1px solid var(--line-dark); }
.nav .container { display: flex; align-items: center; gap: var(--s5); height: 72px; }
.nav .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--paper); }
.nav .brand img { height: 52px; width: auto; }
.nav .brand span { font: 400 1.125rem/1 var(--font-display); letter-spacing: .04em; text-transform: uppercase; }
.nav .brand span em { font-style: normal; color: var(--ember); }
.nav .links { display: none; gap: 4px; margin-left: auto; }
.nav .links a { padding: 8px 12px; color: var(--paper); text-decoration: none; font: 700 .875rem/1 var(--font-body); border-radius: var(--radius-sm); }
.nav .links a:hover { background: var(--iron); }
.nav .cta { margin-left: auto; }
@media (min-width: 900px) { .nav .links { display: flex; } .nav .cta { margin-left: 0; } }

/* ------------------------------------------------------------------ icons */
.icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; }