/* Layout concept: white-first editorial homepage — teal and coral used only as
     accents (text, borders, pills), never as large fills, so the page reads
     lighter and cleaner than the coaching site while keeping the same
     typographic voice and pill-shaped rounded corners.

     Colors below are taken directly from the official TriCoachMatt Corebook
     brand guide: Deep Water Teal, Steel Teal, Sunrise Orange, Iron Red,
     Mist White, Ground Black. Rubik (bold italic for headings, regular for
     body) is the documented typeface, already matched. */
  :root {
    --page:         #EBF1F2; /* Mist White — official light neutral */
    --surface:      #FFFFFF; /* Clear White */
    --ink:          #261C1A; /* Ground Black */
    --ink-soft:     #5B4A44;
    --ink-faint:    #8A7A73;
    --teal:         #3C737F; /* Steel Teal */
    --teal-deep:    #134352; /* Deep Water Teal */
    --coral:        #DE5D36; /* Sunrise Orange */
    --coral-deep:   #6D080C; /* Iron Red — the brand's paired "deeper" accent */
    --coral-tint:   #FBEAE0;
    --teal-tint:    #EAF1F1;
    --gold:         #E6C100; /* Peak Gold — reserved for rare, small highlights */
    --line:         rgba(38,28,26,0.10);
    --cream-on-dark:#FDF3E7;

    --font-display: 'Rubik', -apple-system, sans-serif;
    --font-body:    'Rubik', -apple-system, sans-serif;

    color-scheme: light;
  }

  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    background: var(--page);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }
  img { max-width: 100%; display: block; }
  a { color: inherit; }
  .wrap {
    max-width: 1120px;
    margin: 0 auto;
    padding-inline: 24px;
  }
  @media (max-width: 640px) {
    .wrap { padding-inline: 20px; }
    body { font-size: 16px; }
  }

  h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 700;
    font-style: italic;
    line-height: 1.05;
    margin: 0;
    color: var(--teal-deep);
    text-wrap: balance;
  }
  .eyebrow {
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.06em;
    color: var(--coral);
  }
  p { margin: 0 0 1em; max-width: 62ch; }
  .lede { font-size: 19px; color: var(--ink-soft); }

  /* ---- Nav ---- */
  header.site-nav {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: 20;
  }
  .nav-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-block: 18px;
  }
  .wordmark {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    white-space: nowrap;
  }
  .wordmark img { display: block; width: auto; }
  .nav-row .wordmark img { height: 32px; }
  footer .wordmark img { height: 26px; }
  nav.links {
    display: flex;
    align-items: center;
    gap: 28px;
    font-size: 14px;
    font-weight: 500;
  }
  nav.links a { text-decoration: none; color: var(--ink-soft); }
  nav.links a:hover { color: var(--teal); }
  .cta-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--coral);
    color: #fff;
    padding: 10px 20px;
    border-radius: 100px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
  }
  .cta-pill.ghost {
    background: transparent;
    border: 1.5px solid var(--teal);
    color: var(--teal);
  }
  @media (max-width: 800px) {
    nav.links { display: none; }
  }

  /* ---- Hero ---- */
  .hero {
    background: var(--page);
    padding-block: 56px 64px;
  }
  .hero h1 {
    font-size: clamp(2.4rem, 5.5vw, 3.6rem);
    margin-block: 16px 20px;
    max-width: 17ch;
  }
  .hero .lede { color: var(--ink-soft); max-width: 46ch; }
  .hero-ctas { display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; }

  /* ---- Hero card (boxed panel, PMP-style) ---- */
  .hero-card {
    background: var(--surface);
    border-radius: 32px;
    padding: 44px;
    box-shadow: 0 24px 56px rgba(19,67,82,0.08);
  }
  .hero.has-photo .hero-card {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 40px;
    align-items: center;
  }
  .hero-photo img {
    width: 100%;
    height: 440px;
    object-fit: cover;
    border-radius: 22px;
  }
  @media (max-width: 900px) {
    .hero-card { padding: 28px; border-radius: 24px; }
    .hero.has-photo .hero-card { grid-template-columns: 1fr; }
    .hero-photo img { height: 280px; margin-top: 8px; }
  }

  /* ---- Stat row (under hero CTAs) ---- */
  .stat-row {
    display: flex;
    gap: 32px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
    flex-wrap: wrap;
  }
  .stat-row .stat-num {
    font-family: var(--font-display);
    font-weight: 700;
    font-style: italic;
    font-size: 1.5rem;
    color: var(--teal-deep);
    display: block;
  }
  .stat-row .stat-label {
    font-size: 12.5px;
    color: var(--ink-faint);
  }

  /* ---- Arrow suffix on primary CTAs ---- */
  .cta-primary::after,
  .arrow-link::after {
    content: "→";
    margin-left: 8px;
    display: inline-block;
  }
  .cta-primary {
    background: var(--coral);
    color: #fff;
    padding: 14px 26px;
    border-radius: 100px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
  }
  .cta-secondary {
    border: 1.5px solid var(--teal);
    color: var(--teal);
    padding: 14px 26px;
    border-radius: 100px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
  }
  .hero-visual {
    margin-top: 48px;
    border: 1px dashed var(--line);
    border-radius: 16px;
    padding: 40px 24px;
    text-align: center;
    color: var(--ink-faint);
    font-size: 13px;
    letter-spacing: 0.03em;
    background: var(--surface);
  }
  .hero-visual-mark {
    display: block;
    font-size: 10px;
    color: var(--teal);
    margin-bottom: 10px;
    opacity: 0.6;
  }

  /* ---- Scope clarifier ---- */
  .clarifier .wrap { padding-block: 28px; }
  .clarifier-box {
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 4px solid var(--coral);
    border-radius: 20px;
    padding: 24px 28px;
  }
  .clarifier-box h2 {
    font-size: 1.25rem;
    color: var(--coral-deep);
    margin-bottom: 8px;
  }
  .clarifier-box p { color: var(--ink); max-width: 68ch; margin-bottom: 0; }

  /* ---- Where we test ---- */
  section.location { padding-block: 8px 8px; }
  .location-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin-top: 24px;
  }
  .location-card {
    background: linear-gradient(165deg, var(--teal-tint) 0%, var(--surface) 55%);
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 26px 24px;
    box-shadow: 0 12px 28px rgba(19,67,82,0.05);
  }
  .location-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 16px;
    margin-bottom: 18px;
  }
  .location-card .loc-tag {
    font-weight: 600;
    font-size: 12.5px;
    letter-spacing: 0.05em;
    color: var(--coral);
    display: block;
    margin-bottom: 6px;
  }
  .location-card h3 {
    font-size: 1.15rem;
    margin-bottom: 8px;
  }
  .location-card p { color: var(--ink-soft); font-size: 15px; margin-bottom: 0; }

  /* ---- Full-bleed photo band (breaks up long text stretches) ---- */
  .photo-band { padding-block: 40px; }
  .photo-band .band-inner {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
    border-radius: 26px;
    overflow: hidden;
  }
  .photo-band.single .band-inner { grid-template-columns: 1fr; }
  .photo-band img { width: 100%; height: 340px; object-fit: cover; display: block; }
  @media (max-width: 700px) {
    .photo-band .band-inner { grid-template-columns: 1fr; }
    .photo-band img { height: 240px; }
  }

  /* ---- Permission ---- */
  .permission { padding-block: 64px 8px; text-align: left; }
  .permission h2 { font-size: clamp(1.6rem, 3.2vw, 2.1rem); max-width: 20ch; }
  .permission p { color: var(--ink-soft); margin-top: 10px; }

  /* ---- Sport grid ---- */
  section.sport-finder { padding-block: 56px 80px; }
  .section-head { margin-bottom: 28px; }
  .section-head h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
  .sport-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
  }
  .sport-card {
    background: linear-gradient(165deg, var(--teal-tint) 0%, var(--surface) 60%);
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 26px 24px;
    text-decoration: none;
    color: var(--ink);
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 12px 28px rgba(19,67,82,0.05);
    transition: border-color 0.15s ease, transform 0.15s ease;
  }
  .sport-card:hover { border-color: var(--coral); transform: translateY(-2px); }
  .sport-card:nth-child(odd) { border-top: 3px solid var(--teal); }
  .sport-card:nth-child(even) { border-top: 3px solid var(--coral); }
  .sport-card .sport-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-style: italic;
    font-size: 1.05rem;
    color: var(--teal-deep);
  }
  .sport-card .sport-q { color: var(--ink-soft); font-size: 15px; margin: 0; }
  .sport-card .sport-link { margin-top: auto; font-size: 13px; font-weight: 600; color: var(--coral); }

  /* ---- Testing menu teaser ---- */
  section.menu-teaser { background: var(--surface); padding-block: 64px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-top: 24px;
  }
  .menu-item { border-left: 2px solid var(--teal); padding-left: 14px; }
  .menu-item:nth-child(even) { border-left-color: var(--coral); }
  .menu-item .name { font-weight: 600; color: var(--teal-deep); display: block; margin-bottom: 4px; }
  .menu-item .desc { color: var(--ink-soft); font-size: 14.5px; margin: 0; }
  .menu-teaser .see-all { display: inline-block; margin-top: 32px; font-weight: 600; color: var(--coral); text-decoration: none; }

  /* ---- Case studies (honest placeholder) ---- */
  section.proof { padding-block: 64px; }
  .proof-box {
    border: 1px dashed var(--line);
    border-radius: 20px;
    padding: 36px 28px;
    text-align: left;
    background: var(--surface);
  }
  .proof-box h2 { font-size: 1.4rem; margin-bottom: 8px; }
  .proof-box p { color: var(--ink-soft); margin-bottom: 0; }

  /* ---- For clubs strip (dark rounded card, PMP-style band) ---- */
  section.clubs { padding-block: 14px; }
  .clubs-card {
    background: var(--teal-deep);
    border-radius: 28px;
    padding: 40px 36px;
  }
  .clubs-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
  }
  .clubs-card h2 { font-size: 1.5rem; max-width: 22ch; color: var(--cream-on-dark); }
  .clubs-card p { color: rgba(253,243,231,0.75); margin: 8px 0 0; max-width: 42ch; }

  /* ---- Final CTA (dark rounded card, PMP-style band) ---- */
  section.final-cta { padding-block: 24px 72px; text-align: left; }
  .final-cta-card {
    background: var(--teal-deep);
    border-radius: 28px;
    padding: 56px 44px;
  }
  .final-cta-card h2 { font-size: clamp(1.7rem, 3.5vw, 2.3rem); max-width: 18ch; color: var(--cream-on-dark); }
  @media (max-width: 640px) {
    .clubs-card, .final-cta-card { padding: 32px 24px; border-radius: 22px; }
  }

  /* ---- Footer ---- */
  footer {
    background: var(--teal-deep);
    color: rgba(253,243,231,0.7);
    padding-block: 40px;
    font-size: 14px;
  }
  footer .wordmark { color: var(--cream-on-dark); }
  footer .foot-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
  }
  footer a { text-decoration: none; color: rgba(253,243,231,0.8); }
  footer .foot-clarifier {
    border-top: 1px solid rgba(253,243,231,0.15);
    margin-top: 24px;
    padding-top: 20px;
    max-width: 68ch;
    font-size: 13.5px;
    color: rgba(253,243,231,0.6);
  }

  /* ==== Sport landing page components ==== */

  /* ---- Breadcrumb ---- */
  .breadcrumb-row { padding-block: 18px; font-size: 13px; color: var(--ink-faint); }
  .breadcrumb-row a { color: var(--ink-faint); text-decoration: none; }
  .breadcrumb-row a:hover { color: var(--teal); }

  /* ---- Sport hero (narrower than homepage hero) ---- */
  .sport-hero { padding-block: 40px 48px; }
  .sport-hero h1 { font-size: clamp(2.1rem, 4.8vw, 3rem); margin-block: 14px 16px; max-width: 18ch; }
  .sport-hero .lede { max-width: 56ch; }

  /* ---- What we test (per-sport, reuses menu-item look in a card) ---- */
  section.sport-tests { padding-block: 48px; }
  .test-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-top: 24px;
  }
  .test-card {
    background: linear-gradient(165deg, var(--teal-tint) 0%, var(--surface) 60%);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 22px 22px;
    box-shadow: 0 10px 24px rgba(19,67,82,0.05);
  }
  .test-card .name { font-weight: 600; color: var(--teal-deep); display: block; margin-bottom: 6px; font-size: 15.5px; }
  .test-card .desc { color: var(--ink-soft); font-size: 14.5px; margin: 0; }
  .test-card:nth-child(odd) { border-left: 3px solid var(--teal); }
  .test-card:nth-child(even) { border-left: 3px solid var(--coral); }

  /* ---- Suggested starting point bundle ---- */
  section.bundle { padding-block: 8px 48px; }
  .bundle-box {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: 32px 28px;
    box-shadow: 0 12px 28px rgba(19,67,82,0.05);
  }
  .bundle-box .bundle-tag {
    font-weight: 600;
    font-size: 12.5px;
    letter-spacing: 0.05em;
    color: var(--coral);
    display: block;
    margin-bottom: 8px;
  }
  .bundle-box h2 { font-size: 1.4rem; margin-bottom: 10px; }
  .bundle-items { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0; }
  .bundle-item {
    border: 1px solid var(--line);
    background: var(--page);
    padding: 8px 16px;
    border-radius: 100px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--teal-deep);
  }
  .bundle-box p.note { color: var(--ink-soft); font-size: 14.5px; margin: 0; }

  /* ---- Case study narrative (used once real stories exist) ---- */
  .story {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 4px 20px;
    align-items: start;
  }
  .story .step-label {
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--coral);
    padding-top: 3px;
  }
  .story .step-body {
    border-left: 2px solid var(--line);
    padding: 0 0 22px 18px;
    color: var(--ink-soft);
  }
  .story .step-body:last-child { padding-bottom: 0; }
  .story .step-body p { margin: 0; }
  .quote {
    font-style: italic;
    color: var(--teal-deep);
    margin-top: 8px;
  }

  /* ---- How it works steps ---- */
  section.how-it-works { padding-block: 48px; }
  .steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-top: 24px;
  }
  .step-card {
    background: linear-gradient(165deg, var(--teal-tint) 0%, var(--surface) 60%);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 24px 22px;
    box-shadow: 0 10px 24px rgba(19,67,82,0.05);
  }
  .step-card .step-num {
    font-family: var(--font-display);
    font-weight: 700;
    font-style: italic;
    font-size: 1.05rem;
    color: var(--teal-deep);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--surface);
    margin-bottom: 14px;
  }
  .step-card h3 { font-size: 1rem; margin-bottom: 6px; }
  .step-card p { color: var(--ink-soft); font-size: 14.5px; margin: 0; }

  /* ---- Inbound form ---- */
  section.inbound-form { padding-block: 16px 64px; }
  .form-box {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 32px 28px;
    max-width: 640px;
  }
  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
  .form-row.full { grid-template-columns: 1fr; }
  @media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }
  .form-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--teal-deep);
    margin-bottom: 6px;
  }
  .form-field input, .form-field select, .form-field textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 11px 14px;
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--ink);
    background: var(--page);
  }
  .form-field textarea { resize: vertical; min-height: 90px; }
  .form-field input:focus, .form-field select:focus, .form-field textarea:focus {
    outline: none;
    border-color: var(--teal);
  }
  .form-submit {
    background: var(--coral);
    color: #fff;
    border: none;
    padding: 14px 26px;
    border-radius: 100px;
    font-weight: 600;
    font-size: 15px;
    font-family: var(--font-body);
    cursor: pointer;
    margin-top: 6px;
  }
  .form-note { font-size: 13px; color: var(--ink-faint); margin-top: 14px; margin-bottom: 0; }