/* ============================================================
   Sycamore Family Sports Center — concept redesign
   Palette sampled from THEIR own assets:
     fairway green #316204 (their golf-ball mascot)
     summer sky   #6AA6E6 / #A0CEFC (their driving-range hero)
     sun-gold     from their golf balls / sun flare
   Display: Fugaz One (retro-athletic marquee) · Body: Outfit
   ============================================================ */

/* ---- self-hosted fonts ---- */
@font-face{
  font-family:'Fugaz One';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/fugazone.woff2') format('woff2');
}
@font-face{
  font-family:'Outfit';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('fonts/outfit.woff2') format('woff2');
}

:root{
  --green:#316204;        /* fairway green — mascot */
  --green-deep:#234a06;   /* dark turf band */
  --green-deeper:#19380a;
  --green-lift:#4a8a12;   /* brighter turf accent */
  --sky:#2f7fc4;          /* AA sky-blue for links/CTAs (bolder cousin of #6AA6E6) */
  --sky-soft:#6AA6E6;
  --sky-pale:#A0CEFC;
  --gold:#e0a81f;         /* sun-gold — golf balls / flare */
  --gold-deep:#b9820c;
  --cream:#faf8f1;        /* warm ground */
  --cream-2:#f3eede;
  --paper:#ffffff;
  --ink:#18220e;          /* near-black warm */
  --ink-soft:#3f4a33;
  --line:#e3ddc9;
  --shadow:0 12px 30px -14px rgba(25,56,10,.45);
  --shadow-sm:0 6px 16px -10px rgba(25,56,10,.4);
  --r:16px;
  --maxw:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:'Outfit',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--sky);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-family:'Fugaz One',Impact,sans-serif;font-weight:400;line-height:1.02;
  letter-spacing:.005em;text-transform:uppercase;margin:0}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-999px;top:0;z-index:200;background:var(--green);color:#fff;padding:10px 16px;border-radius:0 0 8px 0}
.skip:focus{left:0}

/* ---- kicker / putt-line ---- */
.kicker{font-family:'Outfit';font-weight:700;text-transform:uppercase;letter-spacing:.14em;
  font-size:.78rem;color:var(--green);display:inline-flex;align-items:center;gap:.55em;margin:0 0 .5rem}
.kicker::before{content:"";width:26px;height:0;border-top:3px dotted var(--gold);display:inline-block}
.section-head .kicker{color:var(--green-lift)}

/* putt-line heading accent: dashed path drawing to a ball dot */
.putt{display:block;height:14px;margin:.7rem 0 0;overflow:visible}
.putt line{stroke:var(--gold);stroke-width:3;stroke-dasharray:5 7;stroke-linecap:round}
.putt circle{fill:var(--green)}
.reveal .putt line{stroke-dashoffset:220;transition:stroke-dashoffset 1s ease .15s}
.reveal.in .putt line{stroke-dashoffset:0}
.reveal .putt circle{opacity:0;transform:translateX(-8px);transition:opacity .3s ease .9s,transform .3s ease .9s}
.reveal.in .putt circle{opacity:1;transform:translateX(0)}

/* ---- header ---- */
.hdr{position:sticky;top:0;z-index:100;background:rgba(250,248,241,.92);
  backdrop-filter:saturate(1.3) blur(9px);border-bottom:1px solid var(--line)}
.hdr .wrap{display:flex;align-items:center;gap:18px;height:66px}
.brand{display:flex;align-items:center;gap:11px;flex-shrink:0;color:var(--ink)}
.brand:hover{text-decoration:none}
.brand img{width:38px;height:38px}
.brand b{font-family:'Fugaz One';font-size:1.02rem;text-transform:uppercase;letter-spacing:.01em;line-height:.98;
  color:var(--green);max-width:150px}
.nav{display:flex;gap:6px;margin-left:auto;align-items:center}
.nav a{color:var(--ink-soft);font-weight:600;font-size:.95rem;padding:8px 12px;border-radius:9px;white-space:nowrap}
.nav a:hover{color:var(--green);background:rgba(74,138,18,.1);text-decoration:none}
.nav .call{background:var(--green);color:#fff;padding:9px 16px;font-weight:700;box-shadow:var(--shadow-sm)}
.nav .call:hover{background:var(--green-deep);color:#fff}
.burger{display:none;margin-left:auto;background:none;border:0;padding:8px;cursor:pointer}
.burger span{display:block;width:24px;height:2.5px;background:var(--ink);margin:5px 0;border-radius:2px;transition:.25s}

/* ---- hero ---- */
.hero{position:relative;color:#fff;overflow:hidden;
  background:linear-gradient(180deg,#16380a 0%,#20500e 100%)}
.hero-img{position:absolute;inset:0;background:center/cover no-repeat;
  transform:scale(1.04);filter:saturate(1.05)}
@media(prefers-reduced-motion:no-preference){
  .hero-img{animation:heroDrift 22s ease-in-out infinite alternate}
}
@keyframes heroDrift{to{transform:scale(1.11) translateY(-2%)}}
.hero-scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(15,40,7,.35) 0%,rgba(15,40,7,.35) 40%,rgba(15,40,7,.82) 100%)}
.hero .wrap{position:relative;padding:76px 22px 92px;min-height:min(74vh,640px);
  display:flex;flex-direction:column;justify-content:flex-end}
.hero .status{align-self:flex-start;margin-bottom:18px}
.hero h1{font-size:clamp(2.5rem,7vw,5.2rem);text-shadow:0 2px 8px rgba(8,20,3,.55);max-width:14ch}
.hero .now{color:var(--gold);}
.hero p.sub{font-family:'Outfit';font-weight:500;font-size:clamp(1.05rem,2.2vw,1.4rem);
  margin:.7rem 0 0;max-width:44ch;text-shadow:0 2px 12px rgba(10,25,4,.6)}
.hero .weather{font-size:.9rem;opacity:.85;font-weight:600;letter-spacing:.02em;text-transform:uppercase}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.mascot-peek{position:absolute;right:4%;bottom:-6px;width:clamp(80px,13vw,150px);z-index:3;
  filter:drop-shadow(0 10px 14px rgba(0,0,0,.35))}
@media(prefers-reduced-motion:no-preference){
  .mascot-peek{animation:roll-in 1s cubic-bezier(.2,.9,.3,1.2) both .3s}
}
@keyframes roll-in{from{opacity:0;transform:translateX(60px) rotate(240deg)}to{opacity:1;transform:none}}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:.5em;font-family:'Outfit';font-weight:700;
  font-size:1rem;padding:13px 24px;border-radius:999px;cursor:pointer;border:2.5px solid transparent;
  transition:transform .12s ease,box-shadow .12s ease,background .2s;text-decoration:none;line-height:1}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn-gold{background:var(--gold);color:#3a2a00;box-shadow:var(--shadow)}
.btn-gold:hover{background:#f2b92c;color:#3a2a00}
.btn-white{background:#fff;color:var(--green);box-shadow:var(--shadow-sm)}
.btn-white:hover{color:var(--green-deep)}
.btn-green{background:var(--green);color:#fff;box-shadow:var(--shadow-sm)}
.btn-green:hover{background:var(--green-deep);color:#fff}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}
.btn-ghost:hover{background:rgba(255,255,255,.14);color:#fff}
.btn-lg{font-size:1.08rem;padding:15px 30px}

/* ---- open chip ---- */
.status{display:inline-flex;align-items:center;gap:.5em;background:rgba(255,255,255,.92);
  color:var(--ink);border-radius:999px;padding:7px 15px;font-weight:700;font-size:.9rem;
  box-shadow:var(--shadow-sm)}
.status .dot{width:10px;height:10px;border-radius:50%;background:var(--green-lift);flex-shrink:0}
.status.closed .dot{background:#c0691a}
.status .dot::after{content:"";display:block;width:10px;height:10px;border-radius:50%;background:inherit}
@media(prefers-reduced-motion:no-preference){
  .status .dot{animation:pulse 2.4s ease-in-out infinite}
}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(74,138,18,.5)}50%{box-shadow:0 0 0 6px rgba(74,138,18,0)}}

/* ---- sections ---- */
section{padding:74px 0}
.section-head{max-width:640px;margin:0 0 40px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head h2{font-size:clamp(2rem,4.6vw,3.1rem);color:var(--green)}
.section-head p{color:var(--ink-soft);font-size:1.08rem;margin:.8rem 0 0}
.band-green{background:var(--green-deep);color:var(--cream)}
.band-green .section-head h2{color:#fff}
.band-green .section-head p{color:#dfe6cf}
.band-green .kicker{color:var(--gold)}
.band-cream{background:var(--cream-2)}

/* ---- activities ---- */
.acts{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.act{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .16s ease,box-shadow .16s ease}
.act:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.act .ph{aspect-ratio:4/3;background:center/cover no-repeat #dfe6cf}
.act .body{padding:20px 22px 24px}
.act h3{font-size:1.35rem;color:var(--green);text-transform:none;font-family:'Fugaz One'}
.act p{margin:.5rem 0 0;color:var(--ink-soft);font-size:.98rem;line-height:1.55}
.act .price-tag{position:absolute;top:14px;right:14px;background:var(--gold);color:#3a2a00;
  font-family:'Fugaz One';font-size:.95rem;padding:6px 13px;border-radius:999px;box-shadow:var(--shadow-sm)}
.act.wide{grid-column:span 3;display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.act.wide .ph{aspect-ratio:auto;min-height:220px}
@media(max-width:840px){.acts{grid-template-columns:1fr 1fr}.act.wide{grid-column:span 2}}

/* ---- estimator ---- */
.est-wrap{display:grid;grid-template-columns:1.35fr .9fr;gap:26px;align-items:start}
.est-panel{background:var(--paper);border-radius:var(--r);box-shadow:var(--shadow);
  border:1px solid var(--line);overflow:hidden}
.est-panel .est-head{background:linear-gradient(120deg,var(--green) 0%,var(--green-lift) 100%);
  color:#fff;padding:18px 24px;display:flex;align-items:center;gap:14px}
.est-panel .est-head img{width:46px;height:46px;flex-shrink:0}
.est-panel .est-head h3{font-size:1.3rem;text-transform:none;font-family:'Fugaz One'}
.est-panel .est-head p{margin:2px 0 0;font-size:.86rem;opacity:.92;font-weight:500}
.est-body{padding:8px 22px 22px}
.party-row{display:flex;flex-wrap:wrap;gap:16px;align-items:center;padding:16px 2px 12px;border-bottom:2px dotted var(--line)}
.party-row .fld{display:flex;flex-direction:column;gap:3px}
.party-row label{font-weight:700;font-size:.82rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft)}
.stepper{display:inline-flex;align-items:center;border:2px solid var(--line);border-radius:999px;overflow:hidden;background:#fff}
.stepper button{width:38px;height:38px;border:0;background:#fff;font-size:1.3rem;color:var(--green);cursor:pointer;font-weight:700;line-height:1}
.stepper button:hover{background:var(--cream-2)}
.stepper input{width:44px;text-align:center;border:0;font-size:1.05rem;font-weight:700;color:var(--ink);font-family:'Outfit';-moz-appearance:textfield}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

.est-cat{padding:15px 0 4px;border-bottom:1px solid var(--line)}
.est-cat:last-child{border-bottom:0}
.est-cat h4{font-family:'Fugaz One';font-size:1.05rem;color:var(--green);text-transform:none;margin:0 0 4px;
  display:flex;align-items:center;gap:8px}
.est-cat h4 .c-dot{width:9px;height:9px;border-radius:50%;background:var(--gold)}
.opt{display:flex;align-items:center;gap:12px;padding:9px 4px}
.opt .info{flex:1;min-width:0}
.opt .info .name{font-weight:600}
.opt .info .meta{font-size:.82rem;color:var(--ink-soft)}
.opt .price{font-weight:700;color:var(--green);font-variant-numeric:tabular-nums;white-space:nowrap}
.opt .stepper{transform:scale(.86);transform-origin:right center}
.opt.on{background:rgba(74,138,18,.07);border-radius:10px}

/* summary card */
.est-summary{position:sticky;top:84px;background:var(--green-deep);color:#fff;border-radius:var(--r);
  box-shadow:var(--shadow);overflow:hidden}
.est-summary .s-head{padding:18px 22px 8px}
.est-summary .s-head h3{text-transform:none;font-family:'Fugaz One';font-size:1.25rem;color:#fff}
.est-summary .s-head p{margin:2px 0 0;font-size:.84rem;color:#cdd8ba}
.s-lines{list-style:none;margin:0;padding:4px 22px;max-height:230px;overflow:auto}
.s-lines li{display:flex;justify-content:space-between;gap:10px;padding:7px 0;font-size:.92rem;
  border-bottom:1px dashed rgba(255,255,255,.16)}
.s-lines li .q{color:#bcd39a;font-variant-numeric:tabular-nums}
.s-lines .empty{color:#aebf8f;font-style:italic;border:0;justify-content:flex-start}
.s-total{padding:16px 22px 6px;background:rgba(0,0,0,.16)}
.s-total .row{display:flex;justify-content:space-between;align-items:baseline}
.s-total .row .lbl{font-family:'Fugaz One';font-size:1.05rem}
.s-total .row .amt{font-family:'Fugaz One';font-size:2.1rem;color:var(--gold);font-variant-numeric:tabular-nums}
.s-total .amt.bump{animation:bump .35s ease}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.14)}100%{transform:scale(1)}}
.s-note{padding:4px 22px 18px;font-size:.8rem;color:#bcd39a;line-height:1.45}
.bundle-flag{margin:2px 22px 14px;background:var(--gold);color:#3a2a00;border-radius:11px;
  padding:11px 14px;font-size:.9rem;font-weight:600;display:none;box-shadow:var(--shadow-sm)}
.bundle-flag.show{display:block}
.bundle-flag b{font-family:'Fugaz One';font-weight:400}
.est-foot{padding:0 22px 20px}
.est-foot .btn{width:100%;justify-content:center}
@media(max-width:900px){.est-wrap{grid-template-columns:1fr}.est-summary{position:static}}

/* ---- price list ---- */
.pricelist{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.pcard{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;box-shadow:var(--shadow-sm)}
.pcard h3{font-family:'Fugaz One';font-size:1.3rem;color:var(--green);text-transform:none;margin:0 0 4px}
.pcard .desc{font-size:.9rem;color:var(--ink-soft);margin:0 0 14px;line-height:1.5}
.pcard .prow{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px dotted var(--line);align-items:baseline}
.pcard .prow:last-child{border-bottom:0}
.pcard .prow .pl{min-width:0}
.pcard .prow .pl .n{font-weight:600}
.pcard .prow .pl .m{font-size:.8rem;color:var(--ink-soft)}
.pcard .prow .pp{font-family:'Fugaz One';color:var(--green);font-size:1.15rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.pcard .fine{font-size:.8rem;color:var(--ink-soft);margin:12px 0 0;font-style:italic}
.pcard.special{background:linear-gradient(160deg,#fff 0%,#fff7e4 100%);border-color:var(--gold)}
.pcard.special h3{color:var(--gold-deep)}
.specials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:14px}
.sp{background:#fff;border:2px solid var(--gold);border-radius:13px;padding:16px;text-align:center}
.sp .big{font-family:'Fugaz One';font-size:2rem;color:var(--gold-deep);line-height:1}
.sp .lbl{font-weight:700;margin:2px 0 8px}
.sp .inc{font-size:.82rem;color:var(--ink-soft);line-height:1.4}
@media(max-width:820px){.pricelist{grid-template-columns:1fr}.specials-grid{grid-template-columns:1fr}}

/* ---- gallery ---- */
.gal{columns:3;column-gap:14px}
.gal img{width:100%;margin:0 0 14px;border-radius:12px;box-shadow:var(--shadow-sm);transition:transform .18s ease}
.gal img:hover{transform:scale(1.02)}
@media(max-width:820px){.gal{columns:2}}
@media(max-width:520px){.gal{columns:1}}

/* ---- groups + visit ---- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center}
.split img{border-radius:var(--r);box-shadow:var(--shadow)}
.groups-card{background:var(--paper);border-radius:var(--r);padding:6px 4px}
.visit-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.info-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:26px 28px;box-shadow:var(--shadow-sm)}
.info-card h3{font-family:'Fugaz One';color:var(--green);text-transform:none;font-size:1.35rem;margin:0 0 12px}
.info-card .line{display:flex;gap:12px;padding:9px 0;border-bottom:1px dotted var(--line);align-items:flex-start}
.info-card .line:last-child{border-bottom:0}
.info-card .line .ic{color:var(--gold-deep);flex-shrink:0;margin-top:2px}
.info-card .line b{display:block}
.hours-today{background:rgba(74,138,18,.09);border-radius:10px;padding:10px 14px;font-weight:600;margin-top:6px}
.form label{display:block;font-weight:700;font-size:.82rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);margin:12px 0 4px}
.form input,.form textarea{width:100%;padding:12px 14px;border:2px solid var(--line);border-radius:10px;font-family:'Outfit';font-size:1rem;background:#fff}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--green-lift)}
.form .btn{margin-top:16px;width:100%;justify-content:center}
.form .note{font-size:.78rem;color:var(--ink-soft);margin-top:10px}
@media(max-width:820px){.split,.visit-grid{grid-template-columns:1fr}}

/* ---- footer ---- */
.foot{background:var(--green-deeper);color:#cdd8ba;padding:52px 0 26px}
.foot .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px}
.foot h4{font-family:'Fugaz One';color:#fff;text-transform:none;font-size:1.15rem;margin:0 0 12px}
.foot .brandline{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.foot .brandline img{width:44px;height:44px}
.foot .brandline b{font-family:'Fugaz One';color:#fff;font-size:1.15rem;line-height:1}
.foot a{color:#dfe6cf}
.foot ul{list-style:none;margin:0;padding:0}
.foot ul li{padding:5px 0}
.foot .legal{border-top:1px solid rgba(255,255,255,.14);margin-top:34px;padding-top:18px;font-size:.82rem;color:#9fb181;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
@media(max-width:760px){.foot .cols{grid-template-columns:1fr}}

/* ---- reveal ---- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.3,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .hero-img{animation:none}.mascot-peek{animation:none}.status .dot{animation:none}
  .reveal .putt line{stroke-dashoffset:0;transition:none}.reveal .putt circle{opacity:1;transform:none;transition:none}
}

/* ---- mobile nav ---- */
@media(max-width:900px){
  .nav{position:absolute;top:66px;left:0;right:0;background:var(--cream);flex-direction:column;
    align-items:stretch;padding:10px 16px 18px;gap:2px;border-bottom:1px solid var(--line);
    box-shadow:var(--shadow);opacity:0;pointer-events:none;transform:translateY(-8px);transition:.2s}
  .nav.open{opacity:1;pointer-events:auto;transform:none}
  .nav a{padding:13px 10px;min-height:44px;display:flex;align-items:center}
  .nav .call{text-align:center;margin-top:6px;justify-content:center;min-height:46px}
  .burger{display:block;min-width:44px;min-height:44px}
}