/**
 * tgg-site.css
 * ════════════════════════════════════════════════════════════════
 * Single source of truth for The Good Golfer's PUBLIC-facing pages
 * (index.php, faq.php, quiz.php, lets-play.php, and any future
 * content page that calls tgg_header()/tgg_footer()).
 *
 * This is a straight extraction + reskin of what used to live inline
 * in tgg-shared.php's <style> block, updated to the warmer fairway/
 * gold palette and Fraunces/IBM Plex Mono type pairing introduced in
 * lets-play.php. Every class name below is unchanged from the old
 * tgg-shared.php, so no page markup needs to change — only the
 * <link> vs <style> delivery mechanism does.
 *
 * NOT used by the internal staff tools (good-golfer-intake.html,
 * admin-tee-times.html, bookings-dashboard.php) — those run a
 * separate, utilitarian design system by design. See the chat
 * response this file was delivered in for why.
 * ════════════════════════════════════════════════════════════════
 */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --fairway-deep:  #122A1C;
    --fairway-mid:   #25523A;
    --fairway-soft:  #3E7A57;
    --turf:          #EDEAE0;
    --chalk:         #FBFAF7;
    --ink:           #15201A;
    --ink-soft:      #4A564D;
    --flag-gold:     #CE9A3C;
    --flag-gold-dk:  #B98832;
    --flag-gold-soft:#E7C87C;
    --line:          rgba(21,32,26,0.12);
    --line-light:    rgba(251,250,247,0.18);
    --border:        1px solid rgba(21,32,26,0.12);
    --radius:        14px;
    --shadow:        0 12px 32px rgba(18,42,28,0.14);
}

body { font-family: 'Inter', sans-serif; color: var(--ink); background: var(--chalk); line-height: 1.55; }
h1, h2, h3 { font-family: 'Fraunces', serif; font-weight: 600; letter-spacing: -0.01em; }

.container { max-width: 1400px; margin: 0 auto; padding: 0 24px; }
.container-wide { max-width: 1400px; margin: 0 auto; padding: 0 24px; }

/* ── HEADER / NAV ─────────────────────────────────────────────── */
header {
    background: var(--chalk);
    padding: 5px 0;
    border-bottom: 2px solid var(--flag-gold);
    position: sticky; top: 0; z-index: 100;
    box-shadow: 0 2px 16px rgba(206,154,60,0.14);
}
header .container-wide { display: flex; justify-content: space-between; align-items: center; }
.logo-section { display: flex; align-items: center; gap: 15px; }
.logo-image {
    background-image: url('/img/theGoodGolferLogo8.png');
    background-size: cover; background-position: center; background-repeat: no-repeat;
    width: 90px; height: 90px; border-radius: 50%;
}
.logo { font-family: 'Fraunces', serif; font-size: 18px; font-weight: 600; color: var(--ink); }
.logo span { color: #9ca3af; font-weight: 400; }
nav { display: flex; gap: 30px; }
nav a {
    font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600;
    text-decoration: none; color: var(--ink); text-transform: uppercase; letter-spacing: 0.3px;
    transition: color 0.3s; position: relative;
}
nav a:hover, nav a.active { color: var(--fairway-mid); }
nav a::after { content: ''; position: absolute; bottom: -8px; left: 0; width: 0; height: 2px; background: var(--flag-gold); transition: width 0.3s; }
nav a:hover::after { width: 100%; }

.wrapper { position: absolute; right: 0; bottom: 0; height: 100%; pointer-events: none; }
.flag { position: absolute; right: 67px; bottom: -4px; font-size: 48px; line-height: 1; }

/* ── PUTTING BALL (scroll-follow decoration) ─────────────────── */
.putting-ball {
    position: absolute; width: 26px; height: 26px; border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #ffffff, var(--flag-gold-soft) 55%, var(--flag-gold) 100%);
    box-shadow: 0 3px 8px rgba(0,0,0,0.25), inset -2px -2px 3px rgba(0,0,0,0.15);
    z-index: 150; pointer-events: none;
    transition: right 0.6s ease;
    animation: tgg-ball-roll 1.4s linear infinite;
}
.putting-ball.paused { animation-play-state: paused; }
@keyframes tgg-ball-roll { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ── BUTTONS ──────────────────────────────────────────────────── */
/* .btn-primary / .btn-ghost (defined further down, once, alongside the
   HERO section) are the real site-wide button classes — used by every
   page. An earlier .btn/.btn-lime/.btn-dark/.btn-outline system was
   removed here since nothing in the site actually used it. */

/* ── PAGE HERO ────────────────────────────────────────────────── */
.page-hero {
    background: linear-gradient(135deg, var(--fairway-deep) 0%, var(--fairway-mid) 100%);
    padding: 80px 24px 70px; text-align: center; position: relative; overflow: hidden;
}
.page-hero::before {
    content: ""; position: absolute; top: -40%; right: -5%;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(206,154,60,0.14) 0%, transparent 70%);
    border-radius: 50%;
}
.page-hero .container { position: relative; z-index: 2; }
.page-hero .eyebrow {
    font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700;
    color: var(--flag-gold-soft); text-transform: uppercase; letter-spacing: 3px; margin-bottom: 16px;
}
.page-hero h1 {
    font-size: clamp(32px, 5vw, 58px); font-weight: 600;
    color: var(--chalk); text-transform: none; letter-spacing: -0.01em;
    line-height: 1.08; margin-bottom: 18px;
}
.page-hero p { font-size: 17px; color: rgba(255,255,255,0.82); max-width: 640px; margin: 0 auto; line-height: 1.7; padding-bottom: 12px;}

/* ── BREADCRUMB ───────────────────────────────────────────────── */
.breadcrumb { background: var(--turf); border-bottom: 1px solid var(--line); padding: 12px 0; }
.breadcrumb span { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.breadcrumb a { color: var(--ink-soft); text-decoration: none; }
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb .sep { color: #bbb; margin: 0 8px; }
.breadcrumb .current { color: var(--ink); }
  
        /* Welcome Section */
        .welcome-section {
            padding: 60px 20px;
            background: white;
            text-align: center;
            border-bottom: 4px solid #c1ff72;
        }

        .welcome-section h2 {
            font-size: 52px;
            font-weight: 700;
            color: #1a1a1a;
            margin-bottom: 25px;
            letter-spacing: 1px;
        }

        .welcome-section p {
            font-size: 18px;
            color: #3a3a3a;
            margin: 0 auto;
            line-height: 1.8;
            letter-spacing: 0.3px;
        }

/* ── CONTENT AREA / TYPOGRAPHY ────────────────────────────────── */
.content-area { padding: 70px 24px 90px; }
.content-body { max-width: 1080px; margin: 0 auto; }
.content-body h2 {
    font-size: clamp(24px, 3vw, 34px); font-weight: 600; text-transform: none; letter-spacing: -0.01em;
    color: var(--ink); margin: 60px 0 20px; line-height: 1.2;
}
.content-body h2:first-child { margin-top: 0; }
.content-body h3 { font-size: 19px; font-weight: 600; color: var(--ink); margin: 32px 0 12px; text-transform: none; }
.content-body p { font-size: 16px; color: var(--ink-soft); line-height: 1.85; margin-bottom: 20px; }
.content-body ul, .content-body ol { padding-left: 0; margin-bottom: 20px; list-style: none; }
.content-body ul li, .content-body ol li {
    font-size: 16px; color: var(--ink-soft); line-height: 1.7;
    padding: 8px 0 8px 32px; position: relative; border-bottom: 1px solid var(--line);
}
.content-body ul li::before { content: '⛳'; position: absolute; left: 0; top: 8px; font-size: 14px; }
.content-body ol { counter-reset: tgg-counter; }
.content-body ol li { counter-increment: tgg-counter; }
.content-body ol li::before {
    content: counter(tgg-counter);
    position: absolute; left: 0; top: 8px;
    font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700;
    color: var(--flag-gold); background: var(--fairway-deep);
    width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.content-body strong { color: var(--ink); font-weight: 700; }
.content-body a { color: var(--fairway-deep); text-decoration: underline; text-underline-offset: 3px; }
.content-body a:hover { color: var(--fairway-mid); }
.eyebrow{
    font-family:'IBM Plex Mono',monospace;
    font-size:.72rem;
    letter-spacing:.16em;
    text-transform:uppercase;
    font-weight:600;
  }
  .wrap{max-width:1080px;margin:0 auto;padding:0 24px;}
  
/* ---------- SESSION FLOW (signature element) ---------- */
  .flow{
    background:var(--fairway-deep);
    color:var(--turf);
    border-radius:24px;
    padding:52px 40px 44px;
    position:relative;
    overflow:hidden;
  }
  .flow .eyebrow{color:var(--flag-gold-soft);}
  .flow h2{color:var(--chalk);}
  .flow-path{margin-top:44px;}
  
  .stop{position:relative;padding:0 14px;text-align:left;}
  .stop .dot{
    width:44px;height:44px;border-radius:50%;
    background:var(--fairway-mid);border:2px solid var(--flag-gold);
    display:flex;align-items:center;justify-content:center;
    font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:.85rem;
    color:var(--flag-gold-soft);margin-bottom:16px;
  }
  .stop h4{font-family:'Fraunces',serif;font-size:1.15rem;margin:0 0 6px;color:var(--chalk);}
  .stop p{margin:0;color:rgba(251,250,247,0.75);font-size:.95rem;}
  .stop .mins{
    display:block;font-family:'IBM Plex Mono',monospace;font-size:.72rem;
    color:var(--flag-gold-soft);margin-top:8px;letter-spacing:.04em;
  }

/* ── CALLOUT BOXES ────────────────────────────────────────────── */
.callout { border-left: 4px solid var(--flag-gold); background: #FBF6EB; padding: 20px 24px; margin: 32px 0; border-radius: 0 var(--radius) var(--radius) 0; }
.callout-title { font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--ink); margin-bottom: 8px; }
.callout p { margin-bottom: 0; font-size: 15px; }
.callout-dark { background: var(--fairway-deep); border-left: 4px solid var(--flag-gold); padding: 24px 28px; margin: 32px 0; border-radius: 0 var(--radius) var(--radius) 0; }
.callout-dark .callout-title { color: var(--flag-gold-soft); }
.callout-dark p { color: #d7ddd8; margin-bottom: 0; }

/* ── CARDS ────────────────────────────────────────────────────── */
.card-grid { 
  display: grid; 
  gap: 24px; 
  margin: 32px auto; /* Changed from '32px 0' to center it */
  max-width: 780px;
  width: 100%;       /* Ensures it fills space up to the max-width */
}

.card-grid-2 { 
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
}
.card-grid-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.info-card { border: var(--border); border-radius: var(--radius); padding: 28px 24px; background: var(--chalk); box-shadow: var(--shadow); transition: transform 0.3s, box-shadow 0.3s; }
.info-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(206,154,60,0.22); }
.info-card .card-icon { font-size: 36px; margin-bottom: 14px; display: block; }
.info-card h3 { font-size: 17px; font-weight: 600; text-transform: none; letter-spacing: normal; margin: 0 0 10px; }
.info-card p { font-size: 14px; color: var(--ink-soft); line-height: 1.65; margin: 0; }
.info-card.accent { background: #FBF0DB; }
.info-card.dark { background: var(--fairway-deep); border-color: var(--fairway-deep); }
.info-card.dark h3, .info-card.dark p { color: var(--chalk); }

/* ── SECTION DIVIDERS ─────────────────────────────────────────── */
.section-rule { border: none; border-top: 1px solid var(--line); margin: 50px 0; }
.section-label {
    font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 2.5px; color: var(--fairway-mid);
    background: transparent; display: inline-block; padding: 0; margin-bottom: 16px;
}

/* ── CTA STRIP ────────────────────────────────────────────────── */
.cta-strip { background: linear-gradient(135deg, var(--fairway-deep) 0%, var(--fairway-mid) 100%); padding: 60px 24px; text-align: center; margin: 70px 0 0; }
.cta-strip h2 { font-size: clamp(24px, 4vw, 40px); font-weight: 600; text-transform: none; color: var(--chalk); margin-bottom: 14px; letter-spacing: -0.01em; }
.cta-strip p { font-size: 16px; color: rgba(255,255,255,0.82); margin-bottom: 28px; line-height: 1.6; }

/* ── FOOTER ───────────────────────────────────────────────────── */
footer { background: var(--fairway-deep); padding: 70px 24px 30px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 50px; }
.footer-section h4 { font-family: 'Fraunces', serif; font-size: 13px; font-weight: 600; color: var(--flag-gold-soft); text-transform: none; letter-spacing: 0.3px; margin-bottom: 18px; }
.footer-section p { font-size: 14px; color: #a9b3ac; line-height: 1.8; }
.footer-section a { font-size: 13px; color: #a9b3ac; text-decoration: none; display: block; margin-bottom: 8px; transition: color 0.2s; }
.footer-section a:hover { color: var(--flag-gold-soft); }
.footer-bottom { border-top: 1px solid var(--line-light); padding-top: 24px; text-align: center; }
.footer-bottom p { font-size: 12px; color: #6f7a72; }

  .container-image {
            width: 100%;
            height: 450px;
            background: linear-gradient(135deg, #c1ff72 0%, #a3e042 100%);
            border: 3px solid #1a1a1a;
            overflow: hidden;
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
        }

        .container-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

      
        /* Pathway Section */
        .pathway {
            padding: 60px 0px;
            
        }

        .pathway h2 {
            font-size: 52px;
            font-weight: 700;
            color: #1a1a1a;
            text-align: center;
            margin-bottom: 80px;
            letter-spacing: 1px;
        }

        
        

        .flow-stops{
    display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;
  }
  .flow-stops::before{
    content:'';position:absolute;top:22px;left:8%;right:8%;height:2px;
    background:repeating-linear-gradient(90deg,var(--flag-gold-soft) 0 10px, transparent 10px 18px);
    opacity:.6;
  }

        /* Featured Stories */
        .stories-section {
            padding: 110px 20px;
            background: white;
        }

        .section-title {
            font-size: 52px;
            font-weight: 700;
            color: #1a1a1a;
            margin-bottom: 80px;
            text-align: center;
            letter-spacing: 1px;
            position: relative;
            padding-bottom: 25px;
        }

        .section-title::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 4px;
            background: #c1ff72;
        }

        .stories-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
            gap: 45px;
        }

        .story-card {
            background: white;
            border: 3px solid #1a1a1a;
            overflow: hidden;
            transition: all 0.4s;
            position: relative;
        }

        .story-card:hover {
            box-shadow: 0 16px 45px rgba(193, 255, 114, 0.25);
            transform: translateY(-8px);
        }

        .story-image {
            width: 100%;
            height: 300px;
            background: linear-gradient(135deg, #c1ff72 0%, #a3e042 100%);
            overflow: hidden;
            position: relative;
        }

        .story-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s;
        }

        .story-card:hover .story-image img {
            transform: scale(1.08);
        }

        .story-label {
            position: absolute;
            top: 15px;
            left: 15px;
            background: #1a1a1a;
            color: #c1ff72;
            padding: 8px 14px;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.5px;
            border: 2px solid #c1ff72;
        }

        .story-content {
            padding: 40px;
        }

        .story-content h3 {
            font-size: 24px;
            font-weight: 700;
            color: #1a1a1a;
            margin-bottom: 15px;
            letter-spacing: 0.5px;
        }

        .story-content p {
            font-size: 15px;
            color: #3a3a3a;
            line-height: 1.7;
            margin-bottom: 20px;
            letter-spacing: 0.3px;
        }

        .story-author {
            font-size: 12px;
            font-weight: 700;
            color: #242523;
            letter-spacing: 0.8px;
        }

        /* Community Section */
        .community-section {
            padding: 110px 20px;
            background: var(--turf);
            border-top: 4px solid #1a1a1a;
            border-bottom: 4px solid #1a1a1a;
        }

        .community-grid {
            display: grid;
            grid-template-columns: 1fr 1.2fr;
            gap: 70px;
            align-items: center;
        }

        .community-text h2 {
            font-size: 52px;
            font-weight: 700;
            color: #1a1a1a;
            margin-bottom: 30px;
            letter-spacing: 1px;
            line-height: 1.1;
        }

        .community-text p {
            font-size: 17px;
            color: #1a1a1a;
            margin-bottom: 30px;
            line-height: 1.8;
            letter-spacing: 0.3px;
        }

        .community-image {
            width: 100%;
            height: 450px;
            background: linear-gradient(135deg, #c1ff72 0%, #a3e042 100%);
            border: 3px solid #1a1a1a;
            overflow: hidden;
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
        }

        .community-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .highlight {
            color: #1a1a1a;
            font-weight: 700;
            text-decoration: underline;
            text-decoration-thickness: 3px;
            text-underline-offset: 4px;
        }

        /* Quote Section */
        .quote-section {
            background: #1a1a1a;
            color: #c1ff72;
            padding: 100px 20px;
            text-align: center;
            position: relative;
            overflow: hidden;
            border-top: 4px solid #c1ff72;
            border-bottom: 4px solid #c1ff72;
        }

        .quote-section::before {
            content: "\"";
            position: absolute;
            top: 15px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 110px;
            opacity: 0.15;
            font-family: 'Montserrat', sans-serif;
            font-weight: 700;
        }

        .quote-section p {
            font-size: 36px;
            font-weight: 700;
            max-width: 900px;
            margin: 0 auto 30px;
            line-height: 1.8;
            position: relative;
            z-index: 2;
            letter-spacing: 0.5px;
        }

        .quote-section .author {
            font-family: 'Montserrat', sans-serif;
            font-size: 13px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            color: #c1ff72;
        }

        /* Newsletter */
        .newsletter {
            font-family: 'Inter', sans-serif;
            background: white;
            padding: 100px 20px;
            text-align: center;
            border-top: 4px solid #c1ff72;
        }

        .newsletter h2 {
            font-size: 48px;
            font-weight: 700;
            color: #1a1a1a;
            margin-bottom: 18px;
            letter-spacing: 1px;
        }

        .newsletter p {
            font-size: 17px;
            color: #3a3a3a;
            margin-bottom: 45px;
            max-width: 650px;
            margin-left: auto;
            margin-right: auto;
            letter-spacing: 0.3px;
        }

        .newsletter-form {
            max-width: 580px;
            margin: 0 auto;
            display: flex;
            gap: 0;
            border: 3px solid #1a1a1a;
        }

        .newsletter-form input {
            flex: 1;
            padding: 16px 24px;
            border: none;
            border-right: 3px solid #1a1a1a;
            font-size: 14px;
            background: white;
            letter-spacing: 0.3px;
        }

        .newsletter-form input:focus {
            outline: none;
            background: #f5f5f5;
        }

/*-----------------------------------*/




 
  a{color:inherit;}
  img,svg{display:block;max-width:100%;opacity: 0.95;}
.flow-stops-grid3{
    display:grid;grid-template-columns:repeat(3,1fr);gap:0;position:relative;
  }
  .flow-stops-grid3::before{
    content:'';position:absolute;top:22px;left:8%;right:8%;height:2px;
    background:repeating-linear-gradient(90deg,var(--flag-gold-soft) 0 10px, transparent 10px 18px);
    opacity:.6;
  }
  
  /* ---------- HERO ---------- */
  .hero{
    background:
      radial-gradient(ellipse at 15% 15%, rgba(206,154,60,0.16), transparent 55%),
      linear-gradient(180deg, var(--fairway-deep) 0%, var(--fairway-mid) 100%);
    color:var(--turf);
    padding:76px 0 96px;
    position:relative;
    overflow:hidden;
  }
  .hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;}
  .hero-eyebrow{color:var(--flag-gold-soft);margin-bottom:18px;}
  .hero h1{
    font-size:clamp(2.4rem, 5.2vw, 4.1rem);
    color:var(--chalk);
    max-width:14ch;
    line-height:1.03;
  }
  .hero p.lede{
    font-size:1.18rem;
    max-width:46ch;
    color:rgba(251,250,247,0.86);
    margin:20px 0 34px;
  }
  .hero-ctas{display:flex;gap:14px;flex-wrap:wrap;align-items:center;}
  .btn-primary{
    background:var(--flag-gold);
    color:var(--fairway-deep);
    font-weight:700;
    padding:15px 28px;
    border-radius:999px;
    text-decoration:none;
    font-size:1rem;
    box-shadow:0 10px 24px rgba(206,154,60,0.3);
    border:none;cursor:pointer;
    transition:transform .15s ease;
  }
  .btn-primary:hover{transform:translateY(-1px);}
  .btn-ghost{
    color:var(--chalk);
    text-decoration:none;
    font-family:'IBM Plex Mono',monospace;
    font-size:.82rem;letter-spacing:.04em;
    border-bottom:1px solid var(--line-light);
    padding-bottom:2px;
  }
  
  .hero-photo-wrap{
    aspect-ratio:4/5;
    border-radius:20px;
    overflow:hidden;
    background:var(--fairway-mid);
    box-shadow:0 20px 50px rgba(0,0,0,0.35);
    border:1px solid var(--line-light);
  }
  .hero-photo-wrap img{width:100%;height:100%;object-fit:cover;display:block;}
  .loc-card{
    border:1px solid var(--line);border-radius:var(--radius);padding:26px 28px;
    background:var(--chalk);
  }
  .loc-card .day{font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fairway-soft);font-weight:600;}
  .loc-card h3{font-size:1.3rem;margin:8px 0 4px;}
  .loc-card p{color:var(--ink-soft);margin:0;}

  /* ---------- REUSABLE IMAGE PLACEHOLDER SIZING ---------- */
  .img-cover{width:100%;height:100%;object-fit:cover;display:block;background:var(--turf);}
  .path-photo-wrap{aspect-ratio:4/3;border-radius:12px;overflow:hidden;margin-bottom:18px;background:var(--turf);}
  .loc-photo-wrap{aspect-ratio:16/9;border-radius:10px;overflow:hidden;margin-bottom:16px;background:var(--turf);}
  .gallery{display:grid;grid-template-columns:1.3fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:14px;height:420px;}
  .gallery-item{border-radius:14px;overflow:hidden;background:var(--turf);}
  .gallery-item img{width:100%;height:100%;object-fit:cover;display:block;}
  .gallery-item.big{grid-row:1 / span 2;}
  @media (max-width:760px){
    .hero .wrap{grid-template-columns:1fr;}
    .hero-photo-wrap{aspect-ratio:16/9;order:-1;}
    .gallery{grid-template-columns:1fr 1fr;grid-template-rows:auto;height:auto;}
    .gallery-item.big{grid-row:auto;grid-column:1 / span 2;aspect-ratio:16/9;}
    .gallery-item{aspect-ratio:4/3;}
  }

  /* ---------- NEXT EVENT BANNER ---------- */
  .next-event{padding:0;margin-top:-46px;position:relative;z-index:100;}
  .next-event-card{
    background:var(--chalk);
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:24px 28px;
    display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;
  }
  .ne-tag{
    font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
    background:var(--flag-gold);color:var(--fairway-deep);padding:5px 10px;border-radius:999px;font-weight:700;
    flex-basis:100%;width:max-content;margin-bottom:6px;
  }
  .next-event-card h3{font-size:1.2rem;margin:0;flex:0 0 auto;}
  .ne-details{
    font-family:'IBM Plex Mono',monospace;font-size:.85rem;color:var(--ink-soft);
    display:flex;gap:8px;flex-wrap:wrap;align-items:center;flex:1 1 320px;
  }
  .ne-notes{flex-basis:100%;margin:2px 0 0;color:var(--ink-soft);font-size:.9rem;}
  .ne-spots{
    font-family:'IBM Plex Mono',monospace;font-size:.78rem;font-weight:600;
    color:var(--fairway-mid);flex-basis:100%;
  }
  .ne-cta{padding:11px 22px;font-size:.9rem;box-shadow:none;margin-left:auto;}
  @media (max-width:760px){
    .next-event{margin-top:-32px;}
    .next-event-card{padding:20px;}
    .ne-cta{margin-left:0;width:100%;text-align:center;}
  }

  /* ---------- SECTION SHELL ---------- */
  section{padding:42px 0;}
  .section-head{max-width:100%;margin:0 auto 24px;text-align:left;}
  .section-head .eyebrow{color:var(--fairway-soft);margin-bottom:10px;}
  .section-head h2{font-size:clamp(1.7rem,3vw,2.3rem);color:var(--ink);}
  .section-head p{color:var(--ink-soft);font-size:1.05rem;max-width:52ch;}

  /* ---------- PATHS ---------- */
  .paths{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
  .path-card{
    background:var(--chalk);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:32px;
    box-shadow:var(--shadow);
    position:relative;
  }
  .path-card .tag{
    display:inline-block;font-family:'IBM Plex Mono',monospace;
    font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
    background:var(--turf);color:var(--fairway-mid);
    padding:5px 10px;border-radius:999px;margin-bottom:16px;font-weight:600;
  }
  .path-card h3{font-size:1.4rem;margin-bottom:10px;}
  .path-card p{color:var(--ink-soft);margin-bottom:0;}
  .path-card.highlight{border-color:var(--flag-gold);}
  .path-card.highlight .tag{background:var(--flag-gold);color:var(--fairway-deep);}

  
  /* ---------- THIS WEEK'S TEE TIMES ---------- */
  .week-list{display:flex;flex-direction:column;gap:10px;}
  .week-item{
    display:flex;align-items:center;gap:16px;
    background:var(--chalk);border:1px solid var(--line);border-radius:var(--radius);
    padding:16px 20px;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    position:relative;
  }
  .week-item:not(.full):hover{
    transform:translateY(-3px);
    box-shadow:0 10px 24px rgba(18,42,28,0.14);
    border-color:var(--flag-gold);
  }
  .week-item.full{opacity:.6;}
  .week-date{
    font-family:'IBM Plex Mono',monospace;background:var(--fairway-deep);color:var(--chalk);
    border-radius:10px;padding:8px 10px;text-align:center;min-width:58px;flex-shrink:0;
  }
  .week-date .wd-day{font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;color:var(--flag-gold-soft);}
  .week-date .wd-num{font-size:1.15rem;font-weight:700;line-height:1.15;}
  .week-date .wd-mon{font-size:.6rem;color:rgba(251,250,247,0.7);}
  .week-info{flex:1;min-width:0;}
  .week-info h4{font-size:1rem;margin:0 0 2px;}
  .week-info p{margin:0;color:var(--ink-soft);font-size:.85rem;}
  .week-spots{font-family:'IBM Plex Mono',monospace;font-size:.8rem;font-weight:600;color:var(--fairway-soft);white-space:nowrap;}
  .week-spots.low{color:var(--flag-gold);}
  .week-spots.full{color:#B14A2E;}
  .week-empty{color:var(--ink-soft);font-size:.95rem;background:var(--chalk);border:1px dashed var(--line);border-radius:var(--radius);padding:20px;}
  /* Discreet quick-book button — invisible until hover, so the tile
     grid stays clean and uncluttered at rest. */
  .week-book-btn{
    font-family:'IBM Plex Mono',monospace;font-size:.68rem;font-weight:700;
    letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;
    background:var(--flag-gold);color:var(--fairway-deep);
    border:none;border-radius:999px;padding:7px 14px;cursor:pointer;
    opacity:0;transform:translateY(2px);
    transition:opacity .18s ease, transform .18s ease, background .15s ease;
  }
  .week-item:not(.full):hover .week-book-btn{opacity:1;transform:translateY(0);}
  .week-book-btn:hover{background:var(--flag-gold-dk);}
  @media (hover:none){
    /* Touch devices have no hover state — show the button permanently
       rather than hiding a feature behind an interaction that doesn't
       exist on the device. */
    .week-book-btn{opacity:1;transform:none;}
  }
  @media (max-width:560px){
    .week-item{flex-wrap:wrap;}
    .week-spots{flex-basis:100%;padding-left:74px;}
    .week-book-btn{flex-basis:100%;margin-top:6px;opacity:1;transform:none;}
  }

  /* ---------- PRICING SCORECARD ---------- */
  .pricing{background:var(--turf);}
  .scorecard{
    background:var(--chalk);
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    overflow:hidden;
  }
  .scorecard-head{
    display:flex;justify-content:space-between;align-items:center;
    padding:20px 28px;background:var(--fairway-deep);color:var(--chalk);
  }
  .scorecard-head span{font-family:'IBM Plex Mono',monospace;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--flag-gold-soft);}
  .rows{display:grid;grid-template-columns:1fr 1fr;}
  .row{padding:30px 28px;border-top:1px solid var(--line);}
  .row:first-child{border-right:1px solid var(--line);}
  .row .price{font-family:'Fraunces',serif;font-size:2.2rem;font-weight:600;margin:6px 0 4px;}
  .row .price small{font-family:'IBM Plex Mono',monospace;font-size:.9rem;font-weight:500;color:var(--ink-soft);}
  .row .badge{
    display:inline-block;background:var(--flag-gold);color:var(--fairway-deep);
    font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
    padding:4px 9px;border-radius:999px;font-weight:700;margin-bottom:10px;
  }
  .row p.note{color:var(--ink-soft);font-size:.92rem;margin:8px 0 0;}
  .extras{
    padding:20px 28px;border-top:1px solid var(--line);
    font-family:'IBM Plex Mono',monospace;font-size:.82rem;color:var(--ink-soft);
    background:var(--turf);
  }

  /* ---------- LOGISTICS ---------- */
  .logistics{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
  
  /* ---------- FAQ ---------- */
  .faq-item{border-top:1px solid var(--line);padding:20px 0;}
  .faq-item:last-child{border-bottom:1px solid var(--line);}
  .faq-item h4{font-family:'Fraunces',serif;font-size:1.1rem;margin:0 0 6px;}
  .faq-item p{margin:0;color:var(--ink-soft);}

  /* ---------- FORM ---------- */
  .signup{
    background:linear-gradient(180deg, var(--fairway-mid) 0%, var(--fairway-deep) 100%);
    color:var(--chalk);
  }
  .signup .section-head h2{color:var(--chalk);}
  .signup .section-head p{color:rgba(251,250,247,0.78);}
  .signup .section-head .eyebrow{color:var(--flag-gold-soft);}
  .form-card{
    background:var(--chalk);color:var(--ink);
    border-radius:var(--radius);
    padding:36px;
    box-shadow:0 24px 60px rgba(0,0,0,0.28);
    max-width:100%;
  }
  .field{margin-bottom:18px;}
  .field label{
    display:block;font-family:'IBM Plex Mono',monospace;font-size:.72rem;
    letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:7px;font-weight:600;
  }
  .field input[type=text],
  .field input[type=email],
  .field input[type=tel]{
    width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:8px;
    font-family:'Inter',sans-serif;font-size:.98rem;background:var(--turf);
  }
  .field input:focus{outline:2px solid var(--fairway-soft);outline-offset:1px;}
  .price-choice-group{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
  .price-choice{
    border:1px solid var(--line);border-radius:var(--radius);padding:18px;cursor:pointer;
    background:var(--turf);transition:border-color .15s ease, background .15s ease, box-shadow .15s ease;
    position:relative;
  }
  .price-choice:has(input:checked){border-color:var(--flag-gold);background:#FBF0DB;box-shadow:0 0 0 2px rgba(206,154,60,.25);}
  .price-choice input{position:absolute;top:16px;right:16px;width:18px;height:18px;accent-color:var(--flag-gold);}
  .price-choice .pc-badge{
    display:block;width:max-content;font-family:'IBM Plex Mono',monospace;font-size:.65rem;letter-spacing:.08em;text-transform:uppercase;
    background:var(--flag-gold);color:var(--fairway-deep);padding:3px 8px;border-radius:999px;font-weight:700;margin-bottom:10px;
  }
  .price-choice .pc-label{
    font-family:'Inter',sans-serif;font-size:.8rem;font-weight:600;color:var(--ink-soft);
    padding-right:26px;line-height:1.35;margin-bottom:6px;
  }
  .price-choice .pc-amount{font-family:'Fraunces',serif;font-size:1.6rem;font-weight:600;color:var(--ink);margin-bottom:2px;}
  .price-choice .pc-amount small{font-family:'IBM Plex Mono',monospace;font-size:.8rem;font-weight:500;color:var(--ink-soft);}
  .price-choice .pc-desc{font-size:.85rem;color:var(--ink-soft);margin:0;}
  @media (max-width:480px){.price-choice-group{grid-template-columns:1fr;}}

  .choice-group{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
  .choice-group.three{grid-template-columns:1fr 1fr 1fr;}
  .choice-group.times{grid-template-columns:1fr 1fr;}
  .field .hint{display:block;font-family:'Inter',sans-serif;text-transform:none;letter-spacing:normal;font-size:.82rem;color:var(--ink-soft);font-weight:400;margin-top:-2px;margin-bottom:10px;}
  .choice{
    border:1px solid var(--line);border-radius:8px;padding:12px 14px;cursor:pointer;
    font-size:.9rem;background:var(--turf);transition:border-color .15s ease, background .15s ease;
  }
  .choice input{margin-right:8px;}
  .choice:has(input:checked){border-color:var(--fairway-soft);background:#E4EEE6;}
  .consent{display:flex;align-items:flex-start;gap:10px;font-size:.85rem;color:var(--ink-soft);margin-bottom:22px;}
  .consent input{margin-top:3px;}
  .honeypot{position:absolute;left:-9999px;opacity:0;height:0;width:0;}
  .submit-btn{
    width:100%;background:var(--flag-gold);color:var(--fairway-deep);
    font-weight:700;padding:15px;border:none;border-radius:999px;font-size:1rem;cursor:pointer;
  }
  .form-msg{margin-top:14px;font-size:.9rem;padding:12px 14px;border-radius:8px;display:none;}
  .form-msg.show{display:block;}
  .form-msg.success{background:#E4EEE6;color:#1E4A2F;}
  .form-msg.error{background:#F7E3DD;color:#7A2B12;}

  
  @media (max-width:760px){
    .paths, .logistics, .rows{grid-template-columns:1fr;}
    .row:first-child{border-right:none;border-bottom:1px solid var(--line);}
    .choice-group.three, .choice-group.times{grid-template-columns:1fr;}
    .nav-brand{font-size:.92rem;}
    .hero{padding:56px 0 64px;}
    section{padding:56px 0;}
  }




/* ── RESPONSIVE ───────────────────────────────────────────────── */
@media (max-width: 768px) {
    nav { gap: 16px; }
    nav a { font-size: 9px; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
    .flow-stops{grid-template-columns:1fr;gap:28px;}
    .flow-stops::before{display:none;}
    
}
@media (max-width: 480px) {
    .footer-grid { grid-template-columns: 1fr; }
    .flag { display: none; }
    .flow-stops{grid-template-columns:1fr;gap:28px;}
    .flow-stops::before{display:none;}
    
}
/* Responsive */
        @media (max-width: 768px) {
            .container {
                padding: 0 15px;
            }
            :root {
                    --header-height: 165px; /* taller mobile header */
                }
            header .container {
                flex-direction: column;
                gap: 35px;
                text-align: center;
            }

            .logo-section {
                justify-content: center;
            }

            nav {
                justify-content: center;
                flex-wrap: wrap;
                gap: 15px;
                top: -38px;
            }

            .page-hero h1 {
                font-size: 48px;
            }

            .page-hero p {
                font-size: 18px;
            }

            nav a {
                font-size: 10px;
            }

            .community-grid {
                grid-template-columns: 1fr;
            }

            .pathway-grid {
                grid-template-columns: 1fr;
            }

            .section-title, .pathway h2, .welcome-section h2 {
                font-size: 36px;
            }

            .quote-section p {
                font-size: 26px;
            }

            .newsletter-form {
                flex-direction: column;
                border: none;
            }

            .newsletter-form input {
                border: 3px solid #1a1a1a;
                border-bottom: none;
            }

            .cta-buttons {
                flex-direction: column;
                align-items: center;
            }

            .btn {
                width: 100%;
                max-width: 320px;
            }
        }