/* ============================================================
   Hillcrest Golf — Washington, IL
   Modern turf classic. No build step, no dependencies.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
img, svg { max-width: 100%; display: block; }

/* ---------- TOKENS ----------
   Brand palette:
     #23A634  Medium Jungle  — brand green (matches the logo exactly)
     #F9FCF9  Porcelain      — cards and raised surfaces
     #FBF6ED  Floral White   — page background
     #000000  Black          — headings and all neutral text/lines
   The extra greens below are all derived from Medium Jungle (hue 128) purely
   for contrast: #23A634 on Floral White is only 3:1, which fails AA for body
   text, so accent TEXT uses --green-dark and solid buttons use --green-deep.
   ---------------------------------------------------------------- */
:root {
  /* brand green + derived ramp */
  --green:       #23A634;   /* Medium Jungle: fills, rules, icons, large accents */
  --green-dark:  #17701F;   /* accent text + links on light  (5.8:1 on Floral White) */
  --green-deep:  #114E19;   /* solid buttons, card headers   (9.9:1 with white) */
  --green-950:   #0B2E11;   /* dark bands, footer, top bar */
  --green-light: #6FCB7A;   /* small accents on dark */
  --green-pale:  #BEE7C4;   /* labels + eyebrows on dark    (10.9:1 on --green-950) */

  /* paper */
  --cream:     #FBF6ED;     /* Floral White — page background */
  --cream-2:   #F3ECDE;     /* alternating band, tinted from Floral White */
  --cream-3:   #EBE2D0;     /* note block */
  --porcelain: #F9FCF9;     /* Porcelain — cards, inputs, raised surfaces */
  --on-dark:   #FBF6ED;     /* Floral White as text on the dark greens */

  /* black-derived neutrals */
  --ink:       #000000;
  --body:      #3A3A3A;
  --muted:     #6E6E6E;
  --line:      rgba(0, 0, 0, .13);
  --line-soft: rgba(0, 0, 0, .07);

  --danger: #A8452F;

  /* Scorecard chart — validated for CVD separation against the Floral White
     surface (normal ΔE 24.3, deutan 24.2). Do not substitute by eye. */
  --par-4: #2A7D35;
  --par-3: #6FCB7A;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --wrap: 1140px;
  --radius: 4px;
  --shadow: 0 1px 2px rgba(0,0,0,.05), 0 12px 32px rgba(0,0,0,.08);
  --shadow-lg: 0 2px 4px rgba(0,0,0,.06), 0 24px 60px rgba(0,0,0,.14);
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--body);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--serif); color: var(--ink); margin: 0; line-height: 1.15; font-weight: 600; }
p { margin: 0; }
a { color: var(--green-dark); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
section { padding: clamp(56px, 6.4vw, 92px) 0; }

.eyebrow {
  font-family: var(--mono); font-size: 12px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--green-dark); font-weight: 600; margin: 0;
}
.rule { width: 46px; height: 2px; background: var(--green); border: 0; margin: 18px 0 0; }
.sec-head { max-width: 62ch; }
.sec-head h2 { font-size: clamp(30px, 4.4vw, 46px); margin-top: 14px; letter-spacing: -.01em; }
.sec-head > p { margin-top: 18px; font-size: 18px; color: var(--muted); }
.center { margin-left: auto; margin-right: auto; text-align: center; }
.center .rule { margin-left: auto; margin-right: auto; }

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px; justify-content: center;
  padding: 14px 26px; border-radius: var(--radius); font-family: var(--sans);
  font-size: 15px; font-weight: 650; text-decoration: none; cursor: pointer;
  border: 1.5px solid transparent; transition: transform .12s ease, background .18s ease, color .18s ease, border-color .18s ease;
  letter-spacing: .01em;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--green-deep); color: var(--on-dark); }
.btn-primary:hover { background: var(--green-dark); }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-outline:hover { border-color: var(--green-dark); color: var(--green-dark); }
.btn-on-dark { background: var(--on-dark); color: var(--green-950); }
.btn-on-dark:hover { background: #fff; }
.btn-ghost-light { background: transparent; color: var(--on-dark); border-color: rgba(251,246,237,.4); }
.btn-ghost-light:hover { border-color: var(--on-dark); background: rgba(251,246,237,.08); }
.btn svg { width: 17px; height: 17px; flex: none; }

/* ---------- TOP BAR ---------- */
.topbar {
  background: var(--green-950); color: var(--green-pale);
  font-size: 13.5px; letter-spacing: .01em;
}
.topbar .wrap { display: flex; align-items: center; gap: 22px; height: 40px; }
.topbar a { color: var(--green-pale); text-decoration: none; display: inline-flex; align-items: center; gap: 7px; }
.topbar a:hover { color: #fff; }
.topbar svg { width: 14px; height: 14px; }
.topbar .spacer { margin-left: auto; }
@media (max-width: 620px) { .topbar .hide-sm { display: none; } }

/* ---------- HEADER ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(251,246,237,.92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.header-inner { display: flex; align-items: center; gap: 24px; height: 78px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.brand .mark { width: 54px; height: 54px; flex: none; display: block; }
@media (max-width: 460px) { .brand .mark { width: 46px; height: 46px; } }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-text b { font-family: var(--serif); font-size: 20px; color: var(--ink); font-weight: 600; letter-spacing: .01em; }
.brand-text span { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }

.nav { display: flex; align-items: center; gap: 21px; }
.nav a {
  text-decoration: none; color: var(--body); font-size: 15px; font-weight: 550;
  padding: 6px 0; border-bottom: 2px solid transparent; white-space: nowrap;
  transition: color .15s ease, border-color .15s ease;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--green-dark); border-color: var(--green); }
.header-cta { display: flex; align-items: center; gap: 12px; }

.menu-btn {
  display: none; background: none; border: 1px solid var(--line); border-radius: var(--radius);
  width: 42px; height: 42px; cursor: pointer; color: var(--ink); place-items: center;
}
@media (max-width: 1080px) {
  .nav, .header-cta .btn { display: none; }
  .menu-btn { display: grid; }
  .site-header.open .nav {
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--cream); border-bottom: 1px solid var(--line);
    padding: 14px 24px 22px; box-shadow: var(--shadow);
  }
  .site-header.open .nav a { padding: 11px 0; width: 100%; border-bottom: 1px solid var(--line-soft); }
}

/* ---------- HERO ---------- */
.hero { position: relative; overflow: hidden; background: var(--green-950); }
/* ------------------------------------------------------------------
   HERO MOTION — a slow Ken Burns over the real course photo, with
   sunlight drifting across it. Deliberately NOT the canvas particle
   mesh (WITCO) or the video loop (@BAT). transform/opacity only, pure
   CSS, and fully disabled under prefers-reduced-motion.
   ------------------------------------------------------------------ */
.hero-media { position: absolute; inset: 0; overflow: hidden; background: var(--green-950); }

.hero-photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 58%;
  transform-origin: 50% 62%; will-change: transform;
  animation: hc-kenburns 38s ease-in-out infinite alternate;
}
@keyframes hc-kenburns {
  from { transform: scale(1.06) translate3d(-1.2%, 0.6%, 0); }
  to   { transform: scale(1.15) translate3d( 1.2%, -1.0%, 0); }
}

/* sunlight sweeping across the scene */
.hero-sun {
  position: absolute; top: -12%; bottom: -12%; left: -45%; width: 40%;
  background: linear-gradient(100deg, transparent 0%, rgba(255,246,214,.10) 42%, rgba(255,246,214,.17) 50%, rgba(255,246,214,.10) 58%, transparent 100%);
  filter: blur(12px); will-change: transform, opacity; pointer-events: none;
  animation: hc-sun 21s ease-in-out infinite;
}
@keyframes hc-sun {
  0%   { transform: translate3d(0,0,0);    opacity: 0; }
  14%  { opacity: 1; }
  86%  { opacity: 1; }
  100% { transform: translate3d(350%,0,0); opacity: 0; }
}

/* soft haze breathing along the treeline */
.hero-haze {
  position: absolute; left: 0; right: 0; top: 30%; height: 22%;
  background: linear-gradient(180deg, transparent, rgba(233,240,228,.16), transparent);
  will-change: transform, opacity; pointer-events: none;
  animation: hc-haze 15s ease-in-out infinite alternate;
}
@keyframes hc-haze {
  from { opacity: .35; transform: translate3d(0,0,0) scaleY(1); }
  to   { opacity: .62; transform: translate3d(0,-8px,0) scaleY(1.16); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-photo, .hero-sun, .hero-haze { animation: none !important; }
  .hero-photo { transform: scale(1.04); }
  .hero-sun { opacity: .6; transform: translate3d(170%,0,0); }
}
.hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(11,46,17,.58) 0%, rgba(11,46,17,.30) 34%, rgba(11,46,17,.68) 100%);
}
.hero-inner {
  position: relative; z-index: 2; text-align: center;
  padding: clamp(78px, 11.5vw, 138px) 0 clamp(62px, 7.5vw, 88px);
  color: var(--on-dark);
}
.hero .eyebrow { color: var(--on-dark); text-shadow: 0 1px 14px rgba(0,0,0,.55); }
.hero h1 {
  color: var(--on-dark); font-size: clamp(44px, 8.4vw, 92px); margin-top: 20px;
  letter-spacing: -.015em; text-shadow: 0 2px 30px rgba(0,0,0,.3);
}
.hero-sub {
  margin: 22px auto 0; max-width: 54ch; font-size: clamp(17px, 2.1vw, 20px);
  color: rgba(251,246,237,.9); text-shadow: 0 1px 16px rgba(0,0,0,.35);
}
.hero-actions { margin-top: 36px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hero-facts {
  margin-top: clamp(38px, 4.6vw, 56px); display: flex; gap: 14px 34px;
  justify-content: center; flex-wrap: wrap;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(251,246,237,.82);
}
.hero-facts span { display: inline-flex; align-items: center; gap: 10px; }
.hero-facts span::before { content: "◆"; color: var(--green); font-size: 9px; }

/* photo slot marker */
.photo-slot {
  position: absolute; z-index: 3; bottom: 14px; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(251,246,237,.55); border: 1px dashed rgba(251,246,237,.35);
  padding: 5px 12px; border-radius: 3px; background: rgba(0,0,0,.2);
}

/* ---------- WELCOME ---------- */
.welcome { background: var(--cream); }
.welcome-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(36px, 6vw, 76px); align-items: center; }
@media (max-width: 900px) { .welcome-grid { grid-template-columns: 1fr; } }
.welcome-grid h2 { font-size: clamp(30px, 4.2vw, 44px); margin-top: 14px; }
.welcome-body p + p { margin-top: 18px; }
.welcome-body { font-size: 18px; }
.phone-line { margin-top: 26px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.phone-line .lbl { font-family: var(--mono); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.phone-line a { font-family: var(--serif); font-size: 27px; color: var(--green-deep); text-decoration: none; font-weight: 600; }
.phone-line a:hover { color: var(--green-dark); }

.photo-frame {
  position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-lg); background: var(--green-deep);
}
.photo-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo-frame.wide { aspect-ratio: 16 / 10; }

/* ---------- OFFERINGS ---------- */
.offerings { background: var(--cream-2); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 52px; }
@media (max-width: 1000px) { .card-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px)  { .card-grid { grid-template-columns: 1fr; } }
.card {
  background: var(--porcelain); border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: 30px 26px 28px; box-shadow: var(--shadow); display: flex; flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.card .ico {
  width: 46px; height: 46px; border-radius: 50%; background: var(--green-deep); color: var(--green-pale);
  display: grid; place-items: center; margin-bottom: 20px;
}
.card .ico svg { width: 23px; height: 23px; }
.card h3 { font-size: 22px; }
.card p { margin-top: 11px; font-size: 15.5px; color: var(--muted); flex: 1; }
.card .more {
  margin-top: 20px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--green-dark); text-decoration: none; font-weight: 600;
  display: inline-flex; align-items: center; gap: 7px;
}
.card .more:hover { color: var(--green-dark); }
.card .more svg { width: 13px; height: 13px; }

/* ---------- COURSE / STATS ---------- */
.course { background: var(--cream); }
.course-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(36px, 6vw, 76px); align-items: center; }
@media (max-width: 900px) { .course-grid { grid-template-columns: 1fr; } .course-grid .photo-frame { order: -1; } }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 34px; border-top: 1px solid var(--line); }
.stat { padding: 22px 0; border-bottom: 1px solid var(--line); }
.stat + .stat { border-left: 1px solid var(--line); padding-left: 22px; }
.stat b { display: block; font-family: var(--serif); font-size: 33px; color: var(--green-deep); font-weight: 600; line-height: 1; }
.stat span { display: block; margin-top: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 560px) { .stats { grid-template-columns: 1fr 1fr; } .stat:nth-child(3) { border-left: none; padding-left: 0; } }

/* ---------- BAND (dark call-out) ---------- */
.band { background: var(--green-950); color: rgba(251,246,237,.86); position: relative; overflow: hidden; }
/* NOTE: this url() lives in the stylesheet on purpose. A url() passed in
   through a custom property resolves against the stylesheet, not the page,
   so an inline --band-photo would 404 from assets/css/. */
.band.has-photo::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: url("../img/driving-range.jpg");
  background-size: cover; background-position: center 62%;
  opacity: .26; filter: saturate(.7);
}
.band.has-photo > .wrap { position: relative; z-index: 2; }
.band::after {
  content: ""; position: absolute; left: -10%; right: -10%; top: 0; bottom: -40%;
  background: repeating-linear-gradient(100deg, rgba(255,255,255,.03) 0 60px, rgba(0,0,0,.03) 60px 120px);
  transform: perspective(600px) rotateX(60deg); transform-origin: top center; pointer-events: none;
}
.band .wrap { position: relative; z-index: 2; }
.band h2 { color: var(--on-dark); }
.band .eyebrow { color: var(--green-pale); }
.band p { color: rgba(251,246,237,.8); }

/* ---------- LESSONS ---------- */
.pros { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 44px; max-width: 760px; }
@media (max-width: 700px) { .pros { grid-template-columns: 1fr; } }
.pro {
  border: 1px solid rgba(251,246,237,.16); border-radius: var(--radius);
  padding: 26px; background: rgba(251,246,237,.045); display: flex; gap: 16px; align-items: center;
}
.pro .av {
  width: 52px; height: 52px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--green-dark); color: var(--green-pale); font-family: var(--serif); font-size: 19px; font-weight: 600;
  border: 1px solid rgba(251,246,237,.2);
}
.pro b { display: block; font-family: var(--serif); font-size: 20px; color: var(--on-dark); font-weight: 600; }
.pro span { display: block; margin-top: 4px; font-size: 14px; color: rgba(251,246,237,.62); }

/* ---------- VISIT ---------- */
.visit { background: var(--cream-2); border-top: 1px solid var(--line-soft); }
.visit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 60px); margin-top: 50px; }
@media (max-width: 860px) { .visit-grid { grid-template-columns: 1fr; } }
.info-block { background: var(--porcelain); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 32px; box-shadow: var(--shadow); }
.info-block h3 { font-size: 23px; }
.info-row { display: flex; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--line-soft); align-items: flex-start; }
.info-row:last-child { border-bottom: none; padding-bottom: 0; }
.info-row:first-of-type { padding-top: 20px; }
.info-row .k { font-family: var(--mono); font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); min-width: 108px; padding-top: 3px; flex: none; }
.info-row .v { color: var(--ink); font-size: 16px; }
.info-row .v a { text-decoration: none; }
.info-row .v a:hover { text-decoration: underline; }
.note {
  margin-top: 22px; padding: 14px 16px; border-left: 3px solid var(--green);
  background: var(--cream-3); font-size: 14.5px; color: var(--body); border-radius: 0 var(--radius) var(--radius) 0;
}

/* fill-in marker */
.tbd {
  font-family: var(--mono); font-size: .88em; letter-spacing: .04em;
  color: var(--muted); background: rgba(0,0,0,.05);
  border: 1px dashed rgba(0,0,0,.38); border-radius: 3px; padding: 1px 7px; white-space: nowrap;
}

/* ---------- CONTACT / FORM ---------- */
.form-card { background: var(--porcelain); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 32px; box-shadow: var(--shadow); }
.field { margin-bottom: 18px; }
.field:last-of-type { margin-bottom: 22px; }
.field label { display: block; font-family: var(--mono); font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.field .req { color: var(--danger); }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 14px; font-family: var(--sans); font-size: 16px; color: var(--ink);
  background: var(--porcelain); border: 1px solid var(--line); border-radius: var(--radius); outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--green-dark); box-shadow: 0 0 0 3px rgba(35,166,52,.20);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }
.form-note { margin-top: 14px; font-size: 14px; color: var(--muted); }
.form-status { margin-top: 14px; font-size: 15px; font-weight: 600; display: none; }
.form-status.ok { display: block; color: var(--green-dark); }
.form-status.err { display: block; color: var(--danger); }

/* Honeypot: off-screen for people, still fillable by bots. Not display:none,
   which some bots skip. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* ---------- FOOTER ---------- */
.site-footer { background: var(--green-950); color: rgba(251,246,237,.66); padding: 56px 0 32px; font-size: 14.5px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
@media (max-width: 800px) { .foot-grid { grid-template-columns: 1fr; gap: 30px; } }
.site-footer .brand-text b { color: var(--on-dark); }
.site-footer .brand-text span { color: rgba(251,246,237,.5); }
.site-footer h4 { font-family: var(--mono); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--green-pale); font-weight: 600; margin-bottom: 14px; }
.site-footer a { color: rgba(251,246,237,.72); text-decoration: none; display: block; padding: 5px 0; }
.site-footer a:hover { color: var(--on-dark); }
.foot-bottom {
  margin-top: 42px; padding-top: 22px; border-top: 1px solid rgba(251,246,237,.14);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13.5px; color: rgba(251,246,237,.5);
}

/* ---------- RATES PAGE ---------- */
.page-head { background: var(--green-950); position: relative; overflow: hidden; padding: clamp(56px, 8vw, 92px) 0 clamp(48px, 6vw, 72px); }
.page-head::after {
  content: ""; position: absolute; left: -10%; right: -10%; top: 30%; bottom: -40%;
  background: repeating-linear-gradient(100deg, rgba(255,255,255,.035) 0 50px, rgba(0,0,0,.035) 50px 100px);
  transform: perspective(600px) rotateX(60deg); transform-origin: top center;
}
.page-head .wrap { position: relative; z-index: 2; }
.page-head h1 { color: var(--on-dark); font-size: clamp(36px, 6vw, 62px); margin-top: 16px; }
.page-head .eyebrow { color: var(--green-pale); }
.page-head p { color: rgba(251,246,237,.78); margin-top: 18px; max-width: 58ch; }

.rate-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 860px) { .rate-grid { grid-template-columns: 1fr; } }
.rate-card {
  background: var(--porcelain); border: 1px solid var(--line-soft); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column;
}
.rate-card > header {
  background: var(--green-deep); color: var(--on-dark); padding: 18px 26px;
  display: flex; align-items: center; gap: 12px;
}
.rate-card > header svg { width: 20px; height: 20px; color: var(--green-pale); flex: none; }
.rate-card > header h2, .rate-card > header h3 { color: var(--on-dark); font-size: 20px; margin: 0; }
.rate-card .body { padding: 8px 26px 24px; }
.rate-sub {
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--green-dark); font-weight: 600; margin-top: 20px; padding-bottom: 8px; border-bottom: 1px solid var(--line);
}
.rate-row { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.rate-row:last-child { border-bottom: none; }
.rate-row .name { color: var(--ink); font-size: 15.5px; }
.rate-row .name small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.rate-row .price { font-family: var(--serif); font-size: 20px; color: var(--green-deep); font-weight: 600; white-space: nowrap; }
.disclaimer {
  margin-top: 40px; padding: 20px 24px; background: var(--cream-2);
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  font-size: 14.5px; color: var(--muted); text-align: center;
}

/* ---------- REVEAL ---------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .65s ease, transform .65s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

:focus-visible { outline: 2px solid var(--green-dark); outline-offset: 2px; border-radius: 3px; }
.skip {
  position: absolute; left: -9999px; top: 0; background: var(--green-deep); color: #fff;
  padding: 12px 18px; z-index: 999; text-decoration: none;
}
.skip:focus { left: 12px; top: 12px; }


/* ============ THE CARD (hole by hole) ============ */
.card-sec { background: var(--cream-2); border-top: 1px solid var(--line-soft); }

.course-stats { display: flex; margin-top: 44px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.course-stats .s { padding: 22px 34px 22px 0; }
.course-stats .s + .s { border-left: 1px solid var(--line); padding-left: 34px; }
.course-stats b { display: block; font-family: var(--serif); font-size: 40px; line-height: 1; color: var(--green-deep); font-weight: 600; }
.course-stats span { display: block; margin-top: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 560px) { .course-stats .s { padding-right: 20px; } .course-stats .s + .s { padding-left: 20px; } .course-stats b { font-size: 32px; } }

.profile-legend { display: flex; gap: 22px; align-items: center; margin: 44px 0 22px; flex-wrap: wrap; }
.profile-legend .k { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; color: var(--body); }
.profile-legend .sw { width: 13px; height: 13px; border-radius: 3px; flex: none; }
.profile-legend .sw.p4 { background: var(--par-4); }
.profile-legend .sw.p3 { background: var(--par-3); }
.profile-legend .legend-note { margin-left: auto; font-size: 13.5px; color: var(--muted); }
@media (max-width: 760px) { .profile-legend .legend-note { margin-left: 0; flex-basis: 100%; } }

/* overflow-x:auto computes overflow-y to auto, which would clip the hover
   tooltips — so reserve headroom inside the scroll box for them. */
.profile-scroll { overflow-x: auto; overflow-y: hidden; padding: 52px 0 6px; margin-top: -52px; }
.profile { display: flex; align-items: flex-end; gap: 30px; min-width: 680px; }
.nine-wrap { flex: 1; min-width: 0; }
.nine { display: flex; align-items: flex-end; gap: 3px; }

.hole { flex: 1; display: flex; flex-direction: column; align-items: center; position: relative; }
.hole .yds { font-family: var(--mono); font-size: 10.5px; color: var(--muted); margin-bottom: 6px; }
.hole .bar {
  width: 100%; border-radius: 4px 4px 0 0; background: var(--par-3);
  height: calc(var(--y) * 0.523px); transition: filter .15s ease;
}
.hole[data-par="4"] .bar { background: var(--par-4); }
.hole:hover .bar { filter: brightness(1.09); }
.hole .no {
  margin-top: 9px; padding-top: 8px; width: 100%; text-align: center;
  border-top: 1px solid var(--line); font-family: var(--mono); font-size: 12px;
  color: var(--ink); font-weight: 600;
}
.hole .tip {
  --tx: -50%;
  position: absolute; bottom: 100%; left: 50%; transform: translateX(var(--tx)) translateY(2px);
  background: var(--green-950); color: var(--on-dark); border-radius: var(--radius);
  padding: 7px 11px; font-size: 12.5px; line-height: 1.4; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .14s ease, transform .14s ease;
  box-shadow: 0 6px 20px rgba(0,0,0,.3); z-index: 5;
}
.hole .tip b { color: var(--par-3); font-weight: 650; }
.hole:hover .tip { opacity: 1; transform: translateX(var(--tx)) translateY(-4px); }

/* The tooltip is far wider than one bar, so centring it on the outermost holes
   pushes it past the scroll container and it gets clipped. Anchor the first two
   holes of the front nine to their left edge and the last two of the back nine
   to their right edge. */
.profile > .nine-wrap:first-child .hole:nth-child(-n+2) .tip { --tx: 0; left: 0; right: auto; }
.profile > .nine-wrap:last-child  .hole:nth-last-child(-n+2) .tip { --tx: 0; left: auto; right: 0; }

.nine-foot {
  margin-top: 14px; display: flex; justify-content: space-between; gap: 12px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
}
.nine-foot .lbl { color: var(--green-dark); font-weight: 600; }
.nine-foot .val { color: var(--muted); }

.scorecard-wrap { margin-top: 54px; overflow-x: auto; border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--porcelain); box-shadow: var(--shadow); }
table.scorecard { border-collapse: collapse; width: 100%; min-width: 780px; font-size: 14px; }
table.scorecard caption { text-align: left; padding: 18px 20px 2px; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
table.scorecard th, table.scorecard td { padding: 11px 7px; text-align: center; border-bottom: 1px solid var(--line-soft); }
table.scorecard th[scope="row"] { text-align: left; padding-left: 20px; font-family: var(--mono); font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); font-weight: 600; white-space: nowrap; }
table.scorecard thead th { font-family: var(--mono); font-size: 12px; color: var(--ink); font-weight: 600; border-bottom: 1px solid var(--line); }
table.scorecard .tot { background: rgba(0,0,0,.04); font-weight: 700; color: var(--green-deep); }
table.scorecard tbody tr:last-child th, table.scorecard tbody tr:last-child td { border-bottom: none; }
table.scorecard td:last-child, table.scorecard thead th:last-child { padding-right: 20px; }

.rules { margin-top: 60px; }
.rules h3 { font-size: 26px; }
.rules-list {
  list-style: none; padding: 0; margin: 22px 0 0;
  columns: 2; column-gap: 44px;
}
@media (max-width: 720px) { .rules-list { columns: 1; } }
.rules-list li {
  break-inside: avoid; padding: 11px 0 11px 26px; position: relative;
  color: var(--muted); font-size: 15.5px; line-height: 1.6;
}
.rules-list li::before {
  content: ""; position: absolute; left: 0; top: 20px;
  width: 11px; height: 2px; background: var(--green); border-radius: 2px;
}

@media (forced-colors: active) {
  .hole .bar { border: 1px solid CanvasText; }
  .hole[data-par="4"] .bar { border-width: 3px; border-style: double; }
}