@font-face{
  font-family:'Toxigenesis';
  src:url('/fonts/toxigenesis-bold.otf') format('opentype');
  font-weight:700;
  font-display:swap;
}

:root{
  --ink:#0a1a14;
  --deep:#0e2e21;
  --turf:#1d4623;
  --turf-dim:#123018;
  --chalk:#f5f7f3;
  --dim:#9cb0a5;
  --line:rgba(245,247,243,0.12);
  --card:#102820;

  /* location accents */
  --clawson:#c9a227;      /* gold */
  --clawson-dim:#8a701a;
  --madison:#1d4623;      /* brand green */
  --madison-dim:#123018;
  --gold:#c9a227;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--ink);
  color:var(--chalk);
  font-family:'Oswald',sans-serif;
  font-weight:300;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none;}
em{font-style:normal;}

/* ---------- Site-wide fixed background watermark ---------- */
/* z-index:-1 paints it above the page background but below ALL content,
   so cards stay fully solid and fixed bars/modals are unaffected */
.bg-fixed-mark{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:min(1300px, 130vw);
  opacity:0.08;
  pointer-events:none;
  user-select:none;
  z-index:-1;
}

/* ---------- My Account corner button ---------- */
.account-btn{
  position:absolute;
  top:18px;
  right:20px;
  z-index:30;
  background:var(--card);
  border:1px solid var(--gold);
  color:var(--gold);
  font-family:'Oswald',sans-serif;
  font-weight:600;
  font-size:13px;
  letter-spacing:1.2px;
  text-transform:uppercase;
  padding:9px 16px;
  border-radius:999px;
  transition:background .15s ease, color .15s ease;
}
.account-btn:hover{ background:var(--gold); color:var(--ink); }
@media (max-width:640px){
  /* in the page flow on small screens so it can't overlap the logo/title */
  .account-btn{
    position:static;
    display:block;
    width:max-content;
    margin:10px 12px 0 auto;
    padding:7px 12px;
    font-size:12px;
  }
}

/* ---------- Top brand bar (text logo, centered, prominent) ---------- */
.brand-bar{
  text-align:center;
  padding:20px 24px 6px;
  position:relative;
  z-index:20;
}
.brand-bar img{
  height:auto;
  width:min(600px, 82vw);
  display:inline-block;
}

.site-header{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px 48px 14px;
  border-bottom:1px solid var(--line);
  position:relative;
  z-index:20;
}

.site-nav{ display:flex; align-items:center; }
.site-nav > a{
  margin:0 16px;
  font-size:14px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--dim);
  font-weight:500;
  transition:color .15s ease;
}
.site-nav > a:hover{ color:var(--chalk); }

.nav-dropdown{
  position:relative;
  margin:0 16px;
}
.nav-dropdown > span{
  font-size:14px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--dim);
  font-weight:500;
  cursor:pointer;
  transition:color .15s ease;
}
.nav-dropdown:hover > span{ color:var(--chalk); }
.dropdown-menu{
  position:absolute;
  top:calc(100% + 14px);
  left:50%;
  transform:translateX(-50%);
  background:var(--card);
  border:1px solid var(--line);
  border-radius:10px;
  padding:8px;
  min-width:180px;
  opacity:0;
  visibility:hidden;
  transition:opacity .15s ease, visibility .15s ease;
  box-shadow:0 10px 28px rgba(0,0,0,0.5);
}
.nav-dropdown:hover .dropdown-menu{ opacity:1; visibility:visible; }
.dropdown-menu a{
  display:block;
  padding:10px 14px;
  font-size:13.5px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--chalk);
  font-weight:500;
  border-radius:6px;
  transition:background .12s ease;
}
.dropdown-menu a:hover{ background:var(--turf-dim); }

.site-nav .nav-book{
  background:var(--gold);
  color:var(--ink);
  border-radius:999px;
  padding:9px 18px;
  margin:0 8px;
  font-size:13.5px;
  letter-spacing:1.2px;
  text-transform:uppercase;
  font-weight:700;
  transition:filter .15s ease;
}
.site-nav .nav-book:hover{ filter:brightness(1.1); color:var(--ink); }

/* ---------- Summer pricing banner (looks handwritten on top) ---------- */
.summer-banner{
  text-align:center;
  padding:16px 24px 0;
  font-family:'Permanent Marker', cursive;
  color:var(--gold);
  font-size:clamp(28px,4vw,42px);
  transform:rotate(-2deg);
  position:relative;
  z-index:10;
  line-height:1.3;
}
.summer-price{
  display:block;
  margin-top:14px;
  /* counter the banner's -2deg so the crossed-out price sits straight;
     only the new price (its own -6deg) reads as hand-tilted */
  transform:rotate(2deg);
}
.summer-price .price-old{
  color:var(--dim);
  text-decoration:line-through;
  font-weight:600;
  font-family:'Oswald',sans-serif;
  margin-right:18px;
  font-size:clamp(36px,5.4vw,54px);
  display:inline-block;
  vertical-align:middle;
}
.summer-price .price-new{
  font-family:'Permanent Marker', cursive;
  color:var(--gold);
  font-size:clamp(52px,8vw,80px);
  letter-spacing:0.5px;
  display:inline-block;
  transform:rotate(-6deg);
  margin-left:2px;
  vertical-align:middle;
}

/* ---------- Locations grid (side by side) ---------- */
.locations-grid{
  max-width:1280px;
  margin:0 auto;
  padding:14px 24px 70px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
  position:relative;
  align-items:stretch;
}
/* home-page package block: spans the full row under both location boxes on
   desktop; reordered to sit between them on the mobile single-column stack */
.pkg-home{
  grid-column:1 / -1;
  padding-top:8px;
}
.location{
  --accent: var(--gold);
  --accent-dim: var(--clawson-dim);
  display:flex;
  flex-direction:column;
  background:var(--card);
  border:1px solid var(--line);
  border-top:6px solid var(--accent);
  border-radius:16px;
  overflow:hidden;
}

.loc-media{
  position:relative;
  background:var(--ink);
  display:block;
}
.loc-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  min-height:260px;
  transition:filter .15s ease;
}
.loc-media:hover img{ filter:brightness(1.08); }
.new-tag{
  position:absolute;
  top:16px;
  right:18px;
  font-family:'Toxigenesis',sans-serif;
  color:#ffffff;
  font-size:21px;
  letter-spacing:0.5px;
  text-transform:uppercase;
  text-shadow:0 2px 8px rgba(0,0,0,0.6);
}

.loc-content{
  padding:32px 36px 30px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  flex:1;
}
.loc-content h2{
  font-family:'Toxigenesis',sans-serif;
  font-weight:400;
  font-size:32px;
  line-height:1.15;
  letter-spacing:0.5px;
  text-transform:uppercase;
  margin:0 0 16px;
  display:block;
  transition:opacity .15s ease;
}
.loc-content h2:hover{ opacity:0.82; }
.loc-content h2 em{ color:var(--accent); }

.loc-address{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:var(--chalk);
  font-size:18px;
  font-weight:600;
  letter-spacing:0.2px;
  margin:0 auto 10px;
  padding:16px 22px;
  background:var(--ink);
  border:1px solid var(--accent-dim);
  border-radius:10px;
  transition:border-color .15s ease, background .15s ease;
}
.loc-address:hover{
  border-color:var(--accent);
  background:#0d241c;
}
.addr-icon{
  color:var(--accent);
  font-size:18px;
  font-weight:700;
  flex-shrink:0;
}

.btn-book-overlay{
  position:absolute;
  left:16px;
  right:16px;
  bottom:16px;
  text-align:center;
  padding:16px;
  border-radius:10px;
  font-weight:700;
  font-size:20px;
  letter-spacing:1px;
  text-transform:uppercase;
  background:var(--accent);
  color:var(--chalk);
  box-shadow:0 6px 18px rgba(0,0,0,0.5);
  transition:filter .15s ease, transform .1s ease;
}
.loc-clawson .btn-book-overlay{ background:var(--gold); color:var(--ink); }
.loc-madison .btn-book-overlay{ background:var(--gold); color:var(--ink); }
.btn-book-overlay:hover{ filter:brightness(1.15); }
.btn-book-overlay:active{ transform:scale(0.99); }

/* ---------- Center "first hour free" circle badge ---------- */
.free-hour-badge{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:230px;
  height:230px;
  border-radius:50%;
  background:var(--deep);
  border:3px solid var(--gold);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  z-index:5;
  box-shadow:0 10px 28px rgba(0,0,0,0.55);
  padding:6px;
  gap:2px;
}
.fh-line1{
  font-size:30px;
  letter-spacing:0.5px;
  color:var(--chalk);
  font-weight:700;
  line-height:1.1;
  white-space:nowrap;
}
.fh-main{
  font-family:'Toxigenesis',sans-serif;
  font-size:46px;
  color:var(--gold);
  letter-spacing:0.5px;
  line-height:1.05;
  white-space:nowrap;
}
.fh-sub{
  font-size:30px;
  letter-spacing:0.5px;
  color:var(--chalk);
  font-weight:700;
  line-height:1.1;
  white-space:nowrap;
}

/* ---------- GSPro section ---------- */
.gspro-section{
  max-width:1100px;
  margin:0 auto;
  padding:20px 24px 90px;
  position:relative;
  z-index:3;
  background:var(--ink);
}
.gspro-card{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:44px;
  align-items:center;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:18px;
  padding:36px;
}
.gspro-card picture, .gspro-card img{
  width:100%;
  border-radius:14px;
  display:block;
  object-fit:cover;
}
.gspro-text h2{
  font-family:'Toxigenesis',sans-serif;
  font-weight:400;
  text-transform:uppercase;
  font-size:30px;
  letter-spacing:0.5px;
  margin:0 0 16px;
  color:var(--chalk);
}
.gspro-text p{
  color:var(--dim);
  font-size:16.5px;
  line-height:1.7;
  font-weight:400;
  margin:0 0 24px;
}
.gspro-text .btn-gspro{
  display:inline-block;
  background:var(--gold);
  color:var(--ink);
  padding:15px 28px;
  border-radius:10px;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  font-size:14.5px;
  transition:filter .15s ease;
}
.gspro-text .btn-gspro:hover{ filter:brightness(1.15); }

@media (max-width:760px){
  .gspro-card{ grid-template-columns:1fr; padding:26px; gap:22px; }
}

/* ---------- Footer ---------- */
.site-footer{
  text-align:center;
  padding:40px 24px;
  border-top:1px solid var(--line);
  color:var(--dim);
  font-size:13.5px;
}
.footer-mark{
  height:36px;
  width:auto;
  margin-bottom:10px;
  opacity:0.9;
}
.footer-links a{
  margin:0 12px;
  color:var(--dim);
}
.footer-links a:hover{ color:var(--gold); }
.site-footer p{ margin:6px 0; }

/* ---------- Responsive ---------- */
@media (max-width: 860px){
  .brand-bar{ padding:16px 20px 4px; }
  .brand-bar img{ width:min(300px, 78vw); }
  .site-header{ padding:8px 20px 12px; }
  .nav-dropdown{ margin:0 10px; }
  .site-nav > a{ margin:0 10px; }
  .site-nav{ flex-wrap:wrap; justify-content:center; row-gap:10px; }
  .site-nav .nav-book{ margin:0 5px; }
  .bg-fixed-mark{ width:min(900px, 160vw); opacity:0.06; }
  .locations-grid{ grid-template-columns:1fr; padding-top:12px; }
  .loc-media img{ min-height:220px; }
  .loc-media{ padding-bottom:64px; }
  .loc-content{ padding:30px 26px; }
  .free-hour-badge{
    position:static;
    transform:none;
    margin:24px auto;
    width:180px;
    height:180px;
    /* stacked layout: badge, Madison Heights, package deals, then Clawson */
    order:-2;
  }
  .loc-madison{ order:-1; }
  .pkg-home{ order:0; padding-top:4px; }
  .loc-clawson{ order:1; }
  .summer-banner{ white-space:normal; padding-top:16px; }
}

/* ---------- Location hours ---------- */
.loc-hours{
  text-align:center;
  color:var(--gold);
  font-family:'Toxigenesis',sans-serif;
  font-weight:400;
  font-size:24px;
  letter-spacing:2px;
  text-transform:uppercase;
  /* negative top margin pulls it up toward the Book button above */
  margin:-12px 0 18px;
}

/* ---------- Phone-only text layout ---------- */
/* Desktop keeps everything on one line; on phones the location titles break
   like the logo (DETROIT / GOLF SIM) and addresses split street / city. */
@media (max-width:640px){
  .loc-content h2 .t2{ display:block; }
  /* the desktop <br> would add a blank line once .t2 is a block */
  .loc-content h2 br{ display:none; }
  .a-comma{ display:none; }
  .addr-l2{ display:block; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}

/* ---------- photo carousel ---------- */
.dgs-carousel{ position:relative; overflow:hidden; }
.dgs-carousel .car-slide{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .6s ease; display:block;
}
.dgs-carousel .car-slide.on{ opacity:1; }
.dgs-carousel .car-slide:first-child{ position:relative; } /* gives the box its height */
.dgs-carousel .car-fallback{ width:100%; height:100%; object-fit:cover; display:block; }
.car-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:4;
  background:rgba(10,26,20,0.55); color:#fff; border:none; border-radius:50%;
  width:38px; height:38px; font-size:16px; cursor:pointer; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.car-arrow:hover{ background:rgba(10,26,20,0.8); }
.car-prev{ left:12px; } .car-next{ right:12px; }
.car-dots{
  position:absolute; bottom:10px; left:0; right:0; z-index:4;
  display:flex; justify-content:center; gap:7px;
}
.car-dot{
  width:9px; height:9px; border-radius:50%; border:none; padding:0; cursor:pointer;
  background:rgba(255,255,255,0.45);
}
.car-dot.on{ background:#c9a227; }
/* on the home-page location boxes the Book button occupies the bottom strip;
   lift the carousel dots above it */
.loc-media .car-dots{ bottom:78px; }
.dgs-carousel .car-fallback[hidden]{ display:none; } /* hidden attr must win */
/* equal photo-window heights: the two home boxes and the location-page heroes
   get a fixed aspect ratio; slides cover-crop into it regardless of source shape */
.loc-media .dgs-carousel{ aspect-ratio:16/10; }
.loc-hero-car{ aspect-ratio:16/9; }
.loc-media .dgs-carousel .car-slide:first-child,
.loc-hero-car .car-slide:first-child{ position:absolute; }
.loc-media .dgs-carousel .car-fallback,
.loc-hero-car .car-fallback{ position:absolute; inset:0; }