/* Clubhouse demo: shared styles for every page (nav, footer, page sections, phone layout).
   "Tour Classic" palette: muted pine, ivory, soft sage, brick accent. Low saturation on purpose. */
:root { --green:#1e2a24; --green2:#26332c; --green3:#2f4036; --gold:#a8b5a0; --sage-ink:#5f6e58; --cream:#f3f0e8;
        --paper:#fbfaf6; --red:#c8553d; --red2:#b44a34; --ink:#141c18; --accent:#b44a34; --line:#1e2a2417;
        --nav-h:68px; --serif:"Oswald", "Arial Narrow", sans-serif; --sans:"Barlow", system-ui, sans-serif;
        --cond:"Barlow Condensed", "Arial Narrow", sans-serif; }
* { box-sizing:border-box; margin:0; }
html { scroll-behavior:smooth; }
body { background:var(--paper); color:var(--ink); font-family:var(--sans); -webkit-font-smoothing:antialiased; }
img { max-width:100%; display:block; }
button, input, select, textarea { font-family:inherit; }
a { color:inherit; }
.cond { font-family:var(--cond); text-transform:uppercase; letter-spacing:.06em; }
.wrap { width:min(1200px, 100% - 12vw); margin-inline:auto; }

/* ---------- buttons ---------- */
.btn { display:inline-flex; align-items:center; gap:10px; background:var(--accent); color:#fff; text-decoration:none; border:0;
       font:800 15px/1 var(--sans); padding:15px 24px; border-radius:999px; cursor:pointer; transition:background .2s, transform .2s; }
.btn.ghost { background:transparent; color:inherit; box-shadow:inset 0 0 0 1.5px currentColor; }
.btn.light { background:var(--cream); color:var(--green); }
.btns { display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; }

/* ---------- top nav ---------- */
.site-nav { position:fixed; inset:0 0 auto 0; z-index:60; height:var(--nav-h); display:flex; align-items:center; gap:28px;
            padding:0 28px; color:var(--cream); background:linear-gradient(#000a,#0000); transition:background .3s, box-shadow .3s; }
.site-nav.solid, body.light-top .site-nav { background:#1e2a24f5; backdrop-filter:blur(10px); box-shadow:0 1px 0 #ffffff12; }
.site-nav .logo img { height:38px; }
.site-nav .live { display:flex; align-items:center; gap:7px; font-size:13px; font-weight:800; letter-spacing:.12em; }
.site-nav .live i { width:9px; height:9px; border-radius:50%; background:var(--red); animation:pulse 1.4s infinite; }
@keyframes pulse { 50% { opacity:.25; } }
.site-nav .spacer { flex:1; }
.menu { display:flex; align-items:center; gap:4px; list-style:none; padding:0; }
.menu > li { position:relative; }
.menu > li > a, .menu > li > button { display:flex; align-items:center; gap:6px; color:var(--cream); text-decoration:none; background:none; border:0;
       font:700 14px var(--sans); padding:10px 12px; border-radius:8px; opacity:.88; cursor:pointer; }
.menu > li > a[aria-current] { opacity:1; background:#ffffff12; }
.menu .caret { width:9px; height:9px; border:solid currentColor; border-width:0 2px 2px 0; transform:rotate(45deg) translateY(-2px); transition:transform .2s; }
.menu .drop { position:absolute; top:calc(100% + 6px); left:0; min-width:250px; list-style:none; padding:8px; border-radius:14px;
              background:#fff; color:var(--ink); box-shadow:0 20px 50px #0004; opacity:0; visibility:hidden; transform:translateY(-6px);
              transition:opacity .18s, transform .18s, visibility .18s; }
.menu li:hover > .drop, .menu li:focus-within > .drop, .menu li.open > .drop { opacity:1; visibility:visible; transform:none; }
.menu li:hover .caret, .menu li.open .caret { transform:rotate(225deg) translateY(-2px); }
.drop a { display:flex; flex-direction:column; gap:2px; padding:10px 12px; border-radius:10px; text-decoration:none; }
.drop b { font-size:14px; }
.drop small { font-size:12.5px; color:#5b6b60; }
.site-nav .cta { flex:none; }
.site-nav .phone { color:var(--cream); text-decoration:none; font-weight:800; font-size:14px; opacity:.9; white-space:nowrap; }
.burger { display:none; width:44px; height:44px; border:0; background:#ffffff14; border-radius:12px; cursor:pointer; position:relative; }
.burger span, .burger span::before, .burger span::after { position:absolute; left:12px; width:20px; height:2px; background:var(--cream); border-radius:2px; transition:transform .25s, top .25s, background-color .25s; content:""; }
.burger span { top:21px; } .burger span::before { left:0; top:-6px; } .burger span::after { left:0; top:6px; }
body.drawer-open .burger span { background:transparent; }
body.drawer-open .burger span::before { top:0; transform:rotate(45deg); }
body.drawer-open .burger span::after { top:0; transform:rotate(-45deg); }

/* ---------- phone drawer ---------- */
.drawer { position:fixed; inset:0; z-index:55; background:var(--green); color:var(--cream); padding:calc(var(--nav-h) + 16px) 22px 120px;
          overflow-y:auto; opacity:0; visibility:hidden; transform:translateY(-12px); transition:opacity .25s, transform .25s, visibility .25s; }
body.drawer-open { overflow:hidden; }
body.drawer-open .drawer { opacity:1; visibility:visible; transform:none; }
body.drawer-open .site-nav { background:var(--green); }
.drawer ul { list-style:none; padding:0; }
.drawer > ul > li { border-bottom:1px solid #ffffff14; }
.drawer > ul > li > a, .drawer summary { display:flex; justify-content:space-between; align-items:center; padding:18px 2px;
       font:800 24px/1.1 var(--serif); letter-spacing:-.01em; text-decoration:none; color:var(--cream); cursor:pointer; list-style:none; }
.drawer summary::-webkit-details-marker { display:none; }
.drawer summary::after { content:"+"; font:400 28px var(--sans); opacity:.6; }
.drawer details[open] summary::after { content:"\2212"; }
.drawer details ul { padding:0 0 14px; }
.drawer details a { display:block; padding:11px 2px 11px 14px; color:#dfe6dc; text-decoration:none; font-weight:700; border-left:2px solid #ffffff1f; }
.drawer .contact { margin-top:28px; display:grid; gap:12px; }
.drawer .contact a { text-decoration:none; }
.drawer .contact .lbl { font-size:12px; color:var(--gold); letter-spacing:.16em; }
.drawer .contact .val { font-size:20px; font-weight:800; }

/* ---------- phone action bar (left side; Club Buddy sits bottom right) ---------- */
.mbar { display:none; position:fixed; left:12px; bottom:14px; z-index:50; gap:8px; }
.mbar a { display:flex; align-items:center; gap:8px; height:52px; padding:0 18px; border-radius:999px; text-decoration:none;
          font-weight:800; font-size:15px; box-shadow:0 10px 26px #0005; }
.mbar .call { background:var(--cream); color:var(--green); }
.mbar .quote { background:var(--accent); color:#fff; }
.mbar svg { width:18px; height:18px; }

/* ---------- page hero (inner pages): proof-band style, photo fading in on a 45° "/" edge ---------- */
.phero { position:relative; overflow:hidden; color:var(--cream); background:var(--green); padding:calc(var(--nav-h) + 84px) 0 84px;
         border-bottom:3px solid var(--accent); }
.phero.short { padding:calc(var(--nav-h) + 64px) 0 60px; }
.phero-img { position:absolute; inset:0 0 0 28%; background:center/cover no-repeat;
             -webkit-mask-image:linear-gradient(135deg, #0000 16%, #0009 44%, #000 70%); mask-image:linear-gradient(135deg, #0000 16%, #0009 44%, #000 70%); }
.phero-img::after { content:""; position:absolute; inset:0; background:linear-gradient(135deg, #1e2a24 8%, #1e2a2470 55%, #1e2a2430); }
.phero .wrap { position:relative; }
.crumbs { font-size:13px; font-weight:700; opacity:.75; margin-bottom:18px; display:flex; gap:8px; flex-wrap:wrap; }
.crumbs a { text-decoration:none; }
.slab { display:inline-flex; transform:skewX(-14deg); background:var(--accent); color:#fff; padding:6px 18px; font-weight:800; font-size:16px; }
.slab span { transform:skewX(14deg); display:block; }
.phero h1 { font-family:var(--serif); font-weight:800; letter-spacing:-.02em; line-height:1.03; font-size:clamp(38px,5.2vw,74px); margin-top:16px; max-width:780px; }
.phero p { margin-top:16px; font-size:19px; line-height:1.55; max-width:620px; color:#d6ded2; }
.proof { display:flex; gap:44px; margin-top:32px; flex-wrap:wrap; }
.proof b { display:block; font:800 clamp(30px,3.2vw,46px)/1 var(--serif); color:#fff; }
.proof span { display:block; margin-top:8px; font:700 12px var(--cond); letter-spacing:.16em; text-transform:uppercase; color:var(--gold); }

/* ---------- sections ---------- */
.sec { padding:104px 0; }
.sec.tight { padding:72px 0; }
.sec { color:var(--ink); }
.sec.cream { background:var(--cream); }
.sec.white { background:#fff; }
.sec.dark { background:var(--green); color:var(--cream); }
.sec.dark2 { background:radial-gradient(circle at 75% 30%,var(--green3),var(--green) 70%); color:var(--cream); }
.kicker { color:var(--sage-ink); font-size:13px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; font-family:var(--cond); }
.dark .kicker, .dark2 .kicker, .phero .kicker { color:var(--gold); }
.h2 { font-family:var(--serif); font-weight:800; letter-spacing:-.02em; line-height:1.06; font-size:clamp(30px,4vw,54px); margin-top:10px; max-width:860px; }
.h3 { font-family:var(--serif); font-weight:800; letter-spacing:-.01em; line-height:1.15; font-size:clamp(22px,2.2vw,28px); }
.lead { font-size:19px; line-height:1.6; margin-top:18px; max-width:720px; color:#33413a; }
.dark .lead, .dark2 .lead { color:#dfe6dc; }
.body p { font-size:17px; line-height:1.7; margin-top:14px; color:#33413a; }
.dark .body p, .dark2 .body p { color:#dfe6dc; }
.center { text-align:center; } .center .h2, .center .lead { margin-inline:auto; }

/* split: copy + a photo that bleeds off the screen edge and fades in along a 45° "/" edge (band language) */
.sec { overflow-x:clip; }
.split { --gut:calc((100vw - min(1200px, 100vw - 12vw)) / 2);   /* page gutter beside .wrap: the photo bleeds into it */
         display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.split.rev > :first-child { order:2; }
.split .media { align-self:stretch; min-height:520px; margin-right:calc(-1 * var(--gut)); margin-block:-40px;
                -webkit-mask-image:linear-gradient(135deg, #0000 4%, #000 40%); mask-image:linear-gradient(135deg, #0000 4%, #000 40%); }
.split.rev .media { margin-right:0; margin-left:calc(-1 * var(--gut));
                    -webkit-mask-image:linear-gradient(315deg, #0000 4%, #000 40%); mask-image:linear-gradient(315deg, #0000 4%, #000 40%); }
.split .media img { width:100%; height:100%; object-fit:cover; }
.split .h2 { font-size:clamp(30px,3.4vw,48px); }
.ticks { list-style:none; padding:0; margin-top:22px; display:grid; gap:10px; }
.ticks li { display:flex; gap:12px; align-items:flex-start; font-weight:700; font-size:16px; }
.ticks li::before { content:""; flex:none; width:20px; height:20px; margin-top:1px; border-radius:50%;
                    background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100%; }
.sub-points { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:30px; }
.sub-points > div { padding:18px 18px 20px; border:1px solid var(--line); border-radius:14px; background:#fff; box-shadow:0 10px 30px #141c1812; }
.cream .sub-points > div { background:#fffdf8; }
.dark .sub-points > div, .dark2 .sub-points > div { background:#ffffff0d; box-shadow:none; border:1px solid #ffffff1f; }
.sub-points h4 { font:800 13px var(--cond); letter-spacing:.1em; text-transform:uppercase; color:var(--accent); }
.dark .sub-points h4, .dark2 .sub-points h4 { color:#e58a73; }
.sub-points p { font-size:15px; line-height:1.6; margin-top:8px; color:#33413a; }
.dark .sub-points p, .dark2 .sub-points p { color:#d6ded2; }

/* cards */
.cards { display:grid; grid-template-columns:repeat(var(--cols,3),1fr); gap:22px; margin-top:48px; }
.card { color:var(--ink); background:#fff; border-radius:18px; overflow:hidden; border:1px solid var(--line); display:flex; flex-direction:column;
        text-decoration:none; color:inherit; }
.card .img { aspect-ratio:4/3; overflow:hidden; background:#e8e4da; }
.card .img img { width:100%; height:100%; object-fit:cover; }
.card .txt { padding:22px 22px 26px; display:flex; flex-direction:column; gap:10px; flex:1; }
.card .txt p { font-size:15.5px; line-height:1.6; color:#45534b; }
.card .more { margin-top:auto; padding-top:6px; font-weight:800; font-size:14px; color:var(--accent); }
.dark .card, .dark2 .card { background:var(--green2); border-color:#ffffff14; color:var(--cream); }
.dark .card .txt p, .dark2 .card .txt p { color:#cfd8cc; }

/* stat / feature tiles */
.tiles { display:grid; grid-template-columns:repeat(var(--cols,4),1fr); gap:1px; margin-top:52px; background:#ffffff1c; border-radius:18px; overflow:hidden; }
.tile { background:var(--green); padding:30px 26px; }
.light-tiles .tile { background:#fff; }
.light-tiles { background:var(--line); }
.tile .n { font:800 13px var(--cond); letter-spacing:.14em; color:var(--accent); }
.tile h3 { font:800 21px/1.2 var(--serif); margin-top:10px; }
.tile p { font-size:15px; line-height:1.6; margin-top:10px; opacity:.85; }

/* spec sheet (leaderboards) */
.spec { display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:start; }
.spec + .spec { margin-top:96px; padding-top:96px; border-top:1px solid var(--line); }
.spec .gal-main { border-radius:18px; overflow:hidden; aspect-ratio:16/10; background:#ddd; }
.spec .gal-main img { width:100%; height:100%; object-fit:cover; }
.spec .thumbs { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-top:8px; }
.spec .thumbs button { padding:0; border:0; border-radius:10px; overflow:hidden; aspect-ratio:1; cursor:pointer; opacity:.6; outline-offset:2px; }
.spec .thumbs button.on { opacity:1; }
.spec .thumbs img { width:100%; height:100%; object-fit:cover; }
.spec dl { margin-top:24px; border-top:1px solid var(--line); }
.spec dl div { display:grid; grid-template-columns:150px 1fr; gap:16px; padding:12px 0; border-bottom:1px solid var(--line); font-size:15px; }
.spec dt { font:800 12.5px var(--cond); letter-spacing:.1em; text-transform:uppercase; color:var(--sage-ink); padding-top:2px; }
.spec dd { font-weight:700; }
.size-tag { display:inline-block; font:800 13px var(--cond); letter-spacing:.12em; background:var(--green); color:var(--cream); padding:6px 12px; border-radius:6px; }

/* image grid + lightbox */
.grid-imgs { columns:var(--cols,3) 260px; column-gap:12px; margin-top:44px; }
.grid-imgs button { display:block; width:100%; padding:0; border:0; margin:0 0 12px; border-radius:14px; overflow:hidden; cursor:zoom-in; break-inside:avoid; background:#ddd; }
.grid-imgs img { width:100%; }
.lightbox { position:fixed; inset:0; z-index:90; background:#0b100dee; display:none; place-items:center; padding:24px; }
.lightbox.on { display:grid; }
.lightbox img { max-width:min(1400px,100%); max-height:76vh; border-radius:10px; }
.lightbox button { position:absolute; top:16px; right:16px; width:48px; height:48px; border-radius:50%; border:0; background:#fff2; color:#fff; font-size:26px; cursor:pointer; }

/* "So what's included?": dark proof-style section with a 45° photo, price callout, icon tiles and chips */
.incl-sec { position:relative; overflow:hidden; background:var(--green); color:var(--cream); padding:110px 0; }
.incl-sec .wrap { position:relative; display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:center; }
.incl-sec .kicker { color:var(--gold); }
.incl-sec .lead { color:#d6ded2; }
.price { margin-top:30px; padding:22px 24px; border:1px solid #ffffff2a; background:#1e2a24b3; backdrop-filter:blur(6px); border-radius:14px; max-width:440px; }
.price small { display:block; font:700 12px var(--cond); letter-spacing:.16em; text-transform:uppercase; color:var(--gold); }
.price b { display:block; font:800 clamp(44px,5vw,64px)/1 var(--serif); color:#fff; margin-top:6px; }
.price span { display:block; margin-top:10px; font-size:15px; line-height:1.55; color:#c3cdc0; }
.incl-panel { background:#1e2a24c4; border:1px solid #ffffff1f; border-radius:20px; padding:30px; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.incl-panel h3 { font:700 12px var(--cond); letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin:26px 0 14px; }
.incl-panel h3:first-child { margin-top:0; }
.incl-tiles { list-style:none; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.incl-tiles li { display:flex; flex-direction:column; gap:10px; padding:16px; border-radius:14px; background:#ffffff0a; border:1px solid #ffffff14; font-size:14px; line-height:1.45; color:#e3e9e0; }
.incl-tiles svg { width:34px; height:34px; padding:7px; border-radius:10px; background:var(--accent); fill:none; stroke:#fff; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.incl-panel .chips { display:flex; flex-wrap:wrap; gap:8px; }   /* scoped: the home hero also has a .chips row */
.incl-panel .chips span, .incl-panel .chips a { padding:8px 14px; border-radius:999px; border:1px solid #ffffff2a; font-size:14px; font-weight:700; color:#e3e9e0; text-decoration:none; }
.incl-panel .chips.sizes a { background:var(--accent); border-color:var(--accent); color:#fff; transition:background .2s; }
@media (max-width:960px) { .incl-sec .wrap { grid-template-columns:1fr; gap:36px; } }
@media (max-width:760px) { .incl-sec { padding:64px 0; } .incl-tiles { grid-template-columns:1fr 1fr; } .incl-panel { padding:20px; } .incl-sec .btns .btn { flex-basis:100%; } }

/* signage: six alternating product rows; variants nested in a toggle inside each row */
.prow .pnum { display:block; font:700 clamp(56px,6vw,88px)/.8 var(--serif); color:var(--accent); margin-bottom:14px; }
.variants { margin-top:24px; border-top:2px solid #1e2a2418; }
.variants summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; padding:16px 0;
                    font:600 15px var(--cond); letter-spacing:.12em; text-transform:uppercase; color:var(--green); }
.variants summary::-webkit-details-marker { display:none; }
.variants summary i { font-style:normal; width:30px; height:30px; display:grid; place-items:center; border-radius:50%; background:var(--accent); color:#fff; font-size:20px; transition:transform .25s; }
.variants[open] summary i { transform:rotate(45deg); }
.vgrid { display:grid; grid-template-columns:1fr; gap:10px; padding-bottom:6px; }
@keyframes panel-in { from { opacity:0; transform:translateY(8px); } }
.vcard { display:grid; grid-template-columns:132px 1fr; gap:16px; align-items:center; padding:10px; border-radius:14px; background:#fff; border:1px solid var(--line); }
.cream .vcard { background:#fffdf8; }
.vopen { position:relative; padding:0; border:0; cursor:zoom-in; border-radius:10px; overflow:hidden; background:#e9e5da; display:block; }
.vopen img, .vimg { width:132px; aspect-ratio:4/3; object-fit:cover; display:block; }
.vopen .zoom { position:absolute; left:6px; bottom:6px; padding:3px 8px; border-radius:999px; background:#141c18cc; color:#fff; font:600 10.5px var(--cond); letter-spacing:.1em; text-transform:uppercase; }
.vinfo { display:flex; flex-direction:column; align-items:flex-start; gap:6px; min-width:0; }
.vcat { font:600 10.5px var(--cond); letter-spacing:.14em; text-transform:uppercase; color:var(--sage-ink); }
.vcard b { display:block; font:600 18px/1.1 var(--serif); text-transform:uppercase; letter-spacing:.01em; color:var(--ink); }
.sps { display:flex; flex-wrap:wrap; gap:6px; }
.sp { display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 10px; border-radius:999px; font:600 12px/1 var(--sans); white-space:nowrap; }
.sp::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.sp.size { background:#c8553d17; color:#a8432d; }
.sp.feat { background:#1e2a2412; color:var(--green); }
.sp.note { background:#a8b5a033; color:#4f5e48; }
.vcard .tag { display:inline-flex; align-items:center; justify-content:center; height:28px; padding:0 14px; margin-top:2px; border-radius:999px; white-space:nowrap;
              background:var(--accent); color:#fff; font:700 13px/1 var(--sans); text-decoration:none; }
/* product lightbox caption: name, specs and quote button under the image */
.lightbox figure { margin:0; display:grid; gap:14px; justify-items:center; max-width:min(1100px,100%); }
.lightbox figcaption { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px 12px; color:#fff; text-align:center; }
.lightbox figcaption:empty { display:none; }
.lightbox figcaption b { width:100%; font:600 24px var(--serif); text-transform:uppercase; }
.lightbox figcaption .vcat { width:100%; color:var(--gold); }
.lightbox .sp.size { background:#c8553d40; color:#ffc7b8; } .lightbox .sp.feat { background:#ffffff1f; color:#fff; } .lightbox .sp.note { background:#a8b5a040; color:#e3e9e0; }
.lightbox figcaption .tag { display:inline-flex; align-items:center; height:36px; padding:0 18px; border-radius:999px; background:var(--accent); color:#fff; font:700 14px var(--sans); text-decoration:none; }
@media (max-width:760px) { .vcard { grid-template-columns:96px 1fr; gap:12px; } .vopen img, .vimg { width:96px; } .vcard b { font-size:16px; } }

/* marquee photo cards (21st.dev @prebuiltui pattern): endless strip, pauses on hover, hovered card eases back under a blur */
.mq { margin:44px calc(50% - 50vw) 0; overflow:hidden;
      -webkit-mask-image:linear-gradient(90deg,#0000,#000 8%,#000 88%,#0000); mask-image:linear-gradient(90deg,#0000,#000 8%,#000 88%,#0000); }
.mq-track { display:flex; width:max-content; animation:mq-scroll var(--dur,38s) linear infinite; }
.mq:focus-within .mq-track { animation-play-state:paused; }
@keyframes mq-scroll { to { transform:translateX(-50%); } }
.mq-card { position:relative; flex:none; width:260px; height:360px; margin:0 12px; padding:0; border:0; border-radius:14px; overflow:hidden;
           background:#0003; cursor:zoom-in; transition:transform .3s; }
.mq-card img { width:100%; height:100%; object-fit:cover; }
.mq-card span { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
                background:#1e2a2433; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); color:#fff;
                font:700 13px var(--cond); letter-spacing:.16em; text-transform:uppercase; opacity:0; transition:opacity .3s; }
.mq-card span svg { width:26px; height:26px; padding:10px; box-sizing:content-box; border-radius:50%; background:var(--accent); }
.mq-card:focus-visible { transform:scale(.92); }
.mq-card:focus-visible span { opacity:1; }
@media (max-width:760px) { .mq-card { width:200px; height:280px; margin:0 8px; } }
@media (prefers-reduced-motion: reduce) { .mq-track { animation:none; } .mq { overflow-x:auto; } }

/* testimonials as golf scorecards, in a scrolling wall of three columns */
.sc-wall { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; height:760px; overflow:hidden; margin-top:48px;
           -webkit-mask-image:linear-gradient(#0000,#000 12%,#000 88%,#0000); mask-image:linear-gradient(#0000,#000 12%,#000 88%,#0000); }
.sc-col { display:flex; flex-direction:column; gap:20px; animation:sc-up var(--dur,50s) linear infinite; }
.sc-col:nth-child(2) { margin-top:-120px; }
@keyframes sc-up { to { transform:translateY(calc(-50% - 10px)); } }
.sc-row { display:none; }
.scard { background:#fbf8ef; color:var(--ink); border:1px solid #1e2a2422; border-radius:6px; overflow:hidden;
         box-shadow:0 1px 0 #fff inset, 0 14px 30px #141c1814; }
.scard header { display:flex; justify-content:space-between; gap:10px; background:var(--green); color:var(--cream); padding:9px 14px;
                font:700 10.5px var(--cond); letter-spacing:.16em; text-transform:uppercase; }
.scard header span:last-child { color:var(--gold); }
.scard table { width:100%; border-collapse:collapse; font:700 12px var(--cond); text-align:center; table-layout:fixed; }
.scard th:first-child { width:58px; } .scard tr > :last-child { width:40px; }   /* equal hole columns */
.scard th, .scard td { border:1px solid #1e2a241f; padding:5px 0; }
.scard tr > :first-child { border-left:0; } .scard tr > :last-child { border-right:0; }
.scard th { font-weight:700; color:var(--sage-ink); letter-spacing:.06em; text-transform:uppercase; font-size:10.5px; padding:5px 6px; }
.scard tr:first-child th, .scard tr:first-child td { background:#efe9d9; color:var(--green); }
.scard tr.me td { font-size:13px; color:var(--ink); }
.scard .bird { display:inline-grid; place-items:center; width:20px; height:20px; margin:-2px 0; border:1.5px solid var(--accent); border-radius:50%; color:var(--accent); }
.scard blockquote { padding:16px 16px 6px; font:600 15px/1.6 var(--sans); color:#2b3832; }
.scard blockquote::before { content:"Player comments"; display:block; font:700 10.5px var(--cond); letter-spacing:.16em; text-transform:uppercase; color:var(--sage-ink); margin-bottom:6px; }
.scard footer { display:flex; align-items:center; gap:12px; margin:10px 16px 16px; padding-top:12px; border-top:1px dashed #1e2a2433; }
.scard footer img, .scard footer i { width:40px; height:40px; border-radius:50%; object-fit:cover; flex:none; }
.scard footer i { display:grid; place-items:center; background:var(--green); color:var(--cream); font:800 17px var(--serif); font-style:normal; }
.scard small { display:block; font:700 10px var(--cond); letter-spacing:.14em; text-transform:uppercase; color:var(--sage-ink); }
.scard footer b { font-size:15px; }
.scard .att { margin-left:auto; text-align:right; }
.scard .att b { font:800 20px var(--serif); color:var(--accent); }
@media (prefers-reduced-motion: reduce) { .sc-col { animation:none; } .sc-wall { height:auto; -webkit-mask-image:none; mask-image:none; } .sc-col [aria-hidden] { display:none; } }

/* logos */
.logos { display:grid; grid-template-columns:repeat(8,1fr); gap:10px; margin-top:44px; }
.logos img { width:100%; aspect-ratio:3/2; object-fit:contain; background:#fff; border-radius:12px; padding:10px; filter:grayscale(1); opacity:.7; }

/* steps */
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:48px; counter-reset:s; }
.step { border-top:3px solid var(--accent); padding-top:22px; }
.step .n { font:800 44px/1 var(--serif); color:var(--accent); }
.step h3 { font:800 22px var(--serif); margin-top:12px; }
.step p { margin-top:10px; font-size:15.5px; line-height:1.65; opacity:.86; }

/* faq */
.faq { margin-top:40px; border-top:1px solid var(--line); max-width:880px; }
.faq details { border-bottom:1px solid var(--line); }
.faq summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:24px; padding:24px 0; font:800 21px/1.3 var(--serif); }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; flex:none; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:var(--cream); font:700 22px var(--sans); color:var(--accent); }
.faq details[open] summary::after { content:"\2212"; background:var(--accent); color:#fff; }
.faq .a { padding:0 0 26px; font-size:16.5px; line-height:1.7; color:#33413a; max-width:760px; }
.faq .a ul { margin-top:10px; padding-left:20px; } .faq .a p + p { margin-top:10px; }

/* prose (legal, blog, careers) */
.prose { max-width:760px; margin-inline:auto; font-size:17.5px; line-height:1.75; color:#26332c; }
.prose h2 { font:800 clamp(26px,3vw,36px)/1.15 var(--serif); letter-spacing:-.01em; margin:48px 0 8px; color:var(--ink); }
.prose h3 { font:800 23px/1.25 var(--serif); margin:36px 0 4px; color:var(--ink); }
.prose h4, .prose h5, .prose h6 { font:800 20px/1.3 var(--serif); letter-spacing:-.005em; margin:30px 0 0; color:var(--ink); }   /* every heading is serif */
.prose p { margin-top:14px; }
.body a[href^="tel:"], .prose a[href^="tel:"], .faq a[href^="tel:"], .lead a[href^="tel:"], .prose a[href^="mailto:"] { color:var(--accent); font-weight:700; text-decoration:none; }
.prose ul { margin-top:12px; padding-left:22px; } .prose li { margin-top:6px; }
.prose img { border-radius:16px; margin:28px 0; }
.prose > :first-child { margin-top:0; }
.meta { font-size:14px; font-weight:700; opacity:.75; margin-top:14px; }

/* contact */
.contact-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:start; }
.info { display:grid; gap:16px; margin-top:28px; }
.info .row { background:#fff; border:1px solid var(--line); border-radius:16px; padding:20px 22px; }
.info .lbl { font:800 12px var(--cond); letter-spacing:.16em; text-transform:uppercase; color:var(--sage-ink); }
.info .val { font-weight:800; font-size:18px; margin-top:6px; line-height:1.5; }
.info .val a { text-decoration:none; }
.form { background:#fff; border-radius:22px; padding:34px; box-shadow:0 30px 70px #141c181f; border:1px solid var(--line); }
.form .row2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form label { display:grid; gap:7px; font-weight:800; font-size:13.5px; margin-top:16px; }
.form input, .form select, .form textarea { font:500 16px var(--sans); padding:13px 14px; border:1.5px solid #d9d4c8; border-radius:12px; background:var(--paper); color:var(--ink); width:100%; }
.form input:focus, .form select:focus, .form textarea:focus { outline:none; border-color:var(--accent); background:#fff; }
.form textarea { min-height:120px; resize:vertical; }
.form .btn { margin-top:22px; width:100%; justify-content:center; }
.form .note { font-size:13px; color:#5b6b60; margin-top:12px; text-align:center; }

/* proof + CTA band (above every footer): pine, with an event photo fading in along a 45° "/" edge */
.band { position:relative; overflow:hidden; background:var(--green); color:var(--cream); padding:112px 0; border-top:3px solid var(--accent); }
/* the photo fades in on the 45deg edge AND from its own left side (both masks intersect): the diagonal alone left the
   bottom-left corner opaque, so a hard vertical seam showed against the solid pine at the 30% mark */
.band-img { position:absolute; inset:0 0 0 30%; background:center/cover no-repeat;
            -webkit-mask-image:linear-gradient(90deg, #0000, #000 40%), linear-gradient(135deg, #0000 18%, #0009 46%, #000 72%);
            -webkit-mask-composite:source-in;
            mask-image:linear-gradient(90deg, #0000, #000 40%), linear-gradient(135deg, #0000 18%, #0009 46%, #000 72%);
            mask-composite:intersect; }
.band-img::after { content:""; position:absolute; inset:0; background:linear-gradient(135deg, #1e2a24 10%, #1e2a2466 55%, #1e2a2426); }
.band .wrap { position:relative; }
.band .kicker { color:var(--gold); }
.band .h2 { max-width:640px; }
.band .proof { display:flex; gap:44px; margin-top:34px; }
.band .proof b { display:block; font:800 clamp(34px,3.6vw,50px)/1 var(--serif); color:#fff; }
.band .proof span { display:block; margin-top:8px; font:700 12px var(--cond); letter-spacing:.16em; text-transform:uppercase; color:var(--gold); }
.band .types { display:flex; gap:12px; margin-top:36px; flex-wrap:wrap; max-width:680px; }
.band .types a { flex:1 1 180px; text-decoration:none; padding:14px 16px; border-radius:14px; background:#1e2a24b8; border:1px solid #ffffff22;
                 backdrop-filter:blur(6px); transition:border-color .2s, transform .2s; }
.band .types b { display:block; font:800 18px var(--serif); color:#fff; }
.band .types span { display:block; margin-top:4px; font-size:14px; color:#c3cdc0; }
.band .incl { display:flex; flex-wrap:wrap; align-items:center; gap:6px 18px; margin-top:22px; font-size:14px; font-weight:700; color:#c3cdc0; }
.band .incl svg { width:18px; height:18px; padding:3px; margin-right:-10px; border-radius:50%; background:var(--accent); color:#fff; }

/* footer */
.site-footer { background:var(--ink); color:#aeb9ab; padding:72px 0 32px; font-size:15px; border-top:4px solid var(--accent); }
.site-footer .cols { display:grid; grid-template-columns:1.5fr 1fr 1fr 1.05fr 1.25fr; gap:40px; }
.site-footer img.logo { height:46px; }
.site-footer .brand p { line-height:1.65; margin-top:18px; max-width:300px; }
.site-footer h3 { font:700 12px var(--cond); letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-bottom:18px; }
.site-footer h3::after { content:""; display:block; width:22px; height:2px; background:var(--accent); margin-top:9px; }   /* brick tick under each heading */
.site-footer ul { list-style:none; padding:0; display:grid; gap:10px; }
.site-footer a { text-decoration:none; color:#aeb9ab; transition:color .2s; }
.site-footer .reach { display:grid; gap:14px; align-content:start; }
.site-footer .reach h3 { margin-bottom:2px; }
.site-footer .reach a { color:#d6ded2; font-weight:400; }
.site-footer .reach small { display:block; font:700 11px var(--cond); letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:2px; }
.site-footer .social { display:flex; gap:10px; margin-top:22px; }
.site-footer .social a { width:38px; height:38px; border-radius:50%; display:grid; place-items:center; border:1px solid #ffffff22; }
.site-footer .social svg { width:16px; height:16px; fill:#fff; }
.site-footer .legal { display:flex; gap:24px; flex-wrap:wrap; margin-top:56px; padding:22px 200px 0 0; border-top:1px solid #ffffff12; font-size:13.5px; color:#7f8c7b; }
.site-footer .legal a { color:#7f8c7b; }

/* mission pull-quote (home) */
.mission { font:300 clamp(21px,2.1vw,29px)/1.55 var(--sans); color:#33413a; max-width:880px; margin:22px auto 0; letter-spacing:-.005em; }

/* scroll reveal */
.rv { opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); }
.rv.in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity:1; transform:none; transition:none; } html { scroll-behavior:auto; } }

/* ---------- tablet ---------- */
@media (max-width:1100px) {
  .site-nav .live, .site-nav .phone { display:none; }
  .logos { grid-template-columns:repeat(4,1fr); }
  .cards { --cols:2 !important; }
  .tiles { --cols:2 !important; }
  .sc-wall { grid-template-columns:1fr 1fr; } .sc-col:nth-child(3) { display:none; }
  .site-footer .cols { grid-template-columns:1fr 1fr 1fr; }
  .site-footer .brand { grid-column:1 / -1; }
}
@media (max-width:960px) {
  .menu, .site-nav .cta { display:none; }
  .burger { display:block; }
  .split, .spec, .contact-grid { grid-template-columns:1fr; gap:40px; }
  .band-img, .phero-img { inset:0; }
  .split.rev > :first-child { order:0; }
  /* stacked: photo full-bleed on top, fading down into the section */
  .split .media, .split.rev .media { order:-1; min-height:340px; margin:-40px calc(-1 * var(--gut)) 0;
    -webkit-mask-image:linear-gradient(180deg, #000 55%, #0000); mask-image:linear-gradient(180deg, #000 55%, #0000); }
}

/* ---------- phone: its own layout, not just a squeeze ---------- */
@media (max-width:760px) {
  :root { --nav-h:60px; }
  .wrap { width:calc(100% - 32px); }
  .site-nav { padding:0 12px 0 16px; gap:12px; }
  .site-nav .logo img { height:32px; }
  /* full-width action bar; Club Buddy is lifted above it (see site.js) */
  .mbar { display:flex; left:0; right:0; bottom:0; padding:10px 12px calc(10px + env(safe-area-inset-bottom)); background:#fbfaf6f2;
          backdrop-filter:blur(10px); box-shadow:0 -1px 0 #1e2a2414, 0 -10px 30px #0000001a; }
  .mbar a { flex:1; justify-content:center; height:48px; box-shadow:none; }
  .mbar .call { background:var(--green); color:var(--cream); }
  body { padding-bottom:72px; }
  body.drawer-open .mbar { display:none; }
  .sec { padding:64px 0; } .sec.tight { padding:48px 0; }
  .phero { padding:calc(var(--nav-h) + 72px) 0 48px; } .phero.short { padding:calc(var(--nav-h) + 52px) 0 40px; }
  .phero-img { inset:0; opacity:.5; } .proof { gap:22px; }
  .phero p { font-size:17px; }
  .lead { font-size:17px; }
  .cards { --cols:1 !important; gap:14px; margin-top:32px; }
  /* card rows scroll sideways on phones instead of stacking into a long column */
  .cards.swipe { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; margin-inline:-16px; padding:0 16px 8px; scrollbar-width:none; }
  .cards.swipe::-webkit-scrollbar { display:none; }
  .cards.swipe > * { flex:0 0 82%; scroll-snap-align:start; }
  .tiles { --cols:1 !important; margin-top:32px; }
  .sc-wall { display:none; }
  .sc-row { display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; margin:32px -16px 0; padding:4px 16px 12px; scrollbar-width:none; }
  .sc-row::-webkit-scrollbar { display:none; }
  .sc-row .scard { flex:0 0 86%; scroll-snap-align:center; }
  .logos { grid-template-columns:repeat(3,1fr); }
  .steps { grid-template-columns:1fr; gap:28px; }
  .sub-points { grid-template-columns:1fr; }
  .split .media, .split.rev .media { min-height:260px; margin-top:-64px; }
  .spec + .spec { margin-top:56px; padding-top:56px; }
  .spec dl div { grid-template-columns:120px 1fr; font-size:14.5px; }
  .grid-imgs { columns:2; column-gap:8px; } .grid-imgs button { margin-bottom:8px; border-radius:10px; }
  .form { padding:22px; } .form .row2 { grid-template-columns:1fr; gap:0; }
  .faq summary { font-size:18px; padding:20px 0; }
  .band { padding:64px 0 72px; }
  .band-img { opacity:.55; } .band .proof { gap:22px; } .band .types a { flex-basis:100%; } .band .btns .btn { flex-basis:100%; }
  .site-footer { padding:56px 0 40px; }
  .site-footer .cols { grid-template-columns:1fr 1fr; gap:32px 20px; }
  .site-footer .cols > :first-child, .site-footer .reach { grid-column:1 / -1; }
  .site-footer .legal { padding-right:0; gap:10px 18px; }
  .btns .btn { flex:1; justify-content:center; }
}

/* sport type: condensed uppercase headlines, ESPN / PGA TOUR broadcast feel */
.h2, .h3, .phero h1, .prose h2, .prose h3, .faq summary, .tile h3, .step h3, .step .n, .band .incl b, .scard footer i, .att b {
  font-family:var(--serif); font-weight:600; text-transform:uppercase; letter-spacing:.005em; line-height:1.04; }
.phero h1 { font-weight:700; }
.h3, .tile h3, .step h3 { letter-spacing:.02em; }
.mission { font-family:var(--sans); }

/* footer in the sport type system: Oswald headings, medium Barlow links, scoreboard-style phone numbers */
.site-footer h3 { font:600 15px/1 var(--serif); letter-spacing:.1em; color:#fff; }
.site-footer ul a, .site-footer .brand p, .site-footer .legal { font-weight:500; }
.site-footer ul a { font-size:15.5px; }
.site-footer .reach a { font:500 15.5px var(--sans); letter-spacing:0; color:#d6ded2; }   /* phones match the email and links, not headline type */

/* no hover motion on cards (operator call): links stay clickable { transform:none; box-shadow:none; }

/* contact: one pine band, call panel (scoreboard-type numbers) + quote form card */
.contact-band { position:relative; overflow:hidden; background:var(--green); color:var(--cream); padding:96px 0 110px; }
.contact-band .band-img { opacity:.55; }
.contact-band .wrap { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
.callpanel .kicker { color:var(--gold); }
.callpanel .lead { color:#d6ded2; }
.callrow { display:grid; gap:4px; margin-top:16px; padding:20px 22px; border-radius:14px;
           background:#1e2a24cc; border:1px solid #ffffff1f; backdrop-filter:blur(6px); text-decoration:none; color:#fff; }
.callpanel .callrow:first-of-type { margin-top:28px; }
.callrow small { font:600 11.5px var(--cond); letter-spacing:.16em; text-transform:uppercase; color:var(--gold); }
.callrow b { font:500 18px/1.3 var(--sans); overflow-wrap:anywhere; }   /* phones and email in one plain style; the row itself is the tap target */
.offices { display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.offices span { padding:7px 14px; border-radius:999px; border:1px solid #ffffff2a; font:600 13px var(--cond); letter-spacing:.08em; text-transform:uppercase; color:#d6ded2; }
.contact-band .form { position:relative; color:var(--ink); }   /* white card inside the pine band */
@media (max-width:960px) { .contact-band .wrap { grid-template-columns:1fr; gap:36px; } }
@media (max-width:760px) { .contact-band { padding:56px 0 72px; } .callrow b { font-size:16px; } }

/* nav in the sport type system: condensed caps links, scoreboard-style phone, condensed dropdown labels */
.menu > li > a, .menu > li > button { font:600 15px/1 var(--cond); letter-spacing:.09em; text-transform:uppercase; }
.site-nav .phone { font:600 17px/1 var(--cond); letter-spacing:.03em; }
.site-nav .live { font-weight:600; letter-spacing:.14em; }
.drop b { font:600 15px/1.2 var(--cond); letter-spacing:.06em; text-transform:uppercase; }
.drop small { font:400 13px/1.4 var(--sans); }

/* signage product viewer: framed main image (no edge fade), variant name + counter, thumbnail strip */
.pview { align-self:center; background:#fff; border:1px solid var(--line); border-radius:22px; padding:14px; box-shadow:0 24px 60px #141c1814; }
.cream .pview { background:#fffdf8; }
.pmain { display:block; width:100%; padding:0; border:0; border-radius:14px; overflow:hidden; cursor:zoom-in; background:#e9e5da; }
.pmain img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.pmeta { display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:14px 6px 4px; }
.pmeta b { font:600 22px/1.1 var(--serif); text-transform:uppercase; letter-spacing:.01em; color:var(--ink); }
.pmeta span { font:600 13px var(--cond); letter-spacing:.14em; text-transform:uppercase; color:var(--sage-ink); white-space:nowrap; }
.pthumbs { display:flex; gap:8px; padding:10px 6px 4px; overflow-x:auto; scrollbar-width:none; }
.pthumb { flex:0 0 72px; padding:0; border:2px solid transparent; border-radius:10px; overflow:hidden; cursor:pointer; background:#e9e5da; opacity:.6; }
.pthumb.on { border-color:var(--accent); opacity:1; }
.pthumb img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.vcard.on { border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
@media (max-width:960px) { .prow .pview { order:-1; } }
@media (max-width:760px) { .pview { padding:10px; border-radius:16px; } .pmeta b { font-size:18px; } .pthumb { flex-basis:60px; } }
.prow .vcard { cursor:pointer; }

/* icons are drawn as centred SVGs, not text glyphs: a "+" or "×" character sits on the font baseline and never centres in a circle */
.variants summary i, .faq summary::after, .drawer summary::after, .lightbox > button {
  font-size:0; color:transparent; background-position:center; background-repeat:no-repeat; }
.variants summary i { background-color:var(--accent); background-size:14px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 1.5v11M1.5 7h11' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.faq summary::after { content:""; background-color:var(--cream); background-size:14px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 1.5v11M1.5 7h11' stroke='%23c8553d' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.faq details[open] summary::after { content:""; background-color:var(--accent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M1.5 7h11' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.drawer summary::after { content:""; flex:none; width:24px; height:24px; opacity:.7; background-size:18px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 1.5v11M1.5 7h11' stroke='%23f3f0e8' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); }
.drawer details[open] summary::after { content:"";
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M1.5 7h11' stroke='%23f3f0e8' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); }
.lightbox > button { background-size:18px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 2.5l9 9M11.5 2.5l-9 9' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }

/* signage option cards: specs as one quiet line, not pills */
.vspecs { margin:0; font:500 13.5px/1.45 var(--sans); color:#5b6b60; }
.lightbox figcaption .vspecs { width:100%; color:#d6ded2; font-size:15px; }
/* FAQ: +/- circle centred on the question line */
.faq summary { align-items:center; }
/* signage rows: top-aligned so opening the options never re-centres (and drops) the product image; image stays in view */
.prow { align-items:start; } .prow .pview { align-self:start; }
@media (min-width:961px) { .prow .pview { position:sticky; top:calc(var(--nav-h) + 24px); } }

/* signage specs: labelled rows; product cards in pine (brick kept for the big numbers and main buttons) */
.vspec { display:grid; gap:3px; margin:2px 0 4px; width:100%; }
.vspec div { display:grid; grid-template-columns:72px 1fr; gap:10px; align-items:baseline; }
.vspec dt { font:600 11px var(--cond); letter-spacing:.12em; text-transform:uppercase; color:#7f8c7b; }
.vspec dd { margin:0; font:500 14px/1.35 var(--sans); color:var(--ink); }
.vcard .tag { background:var(--green); }
.vcard.on { border-color:var(--green); box-shadow:inset 0 0 0 1px var(--green); }
.pthumb.on { border-color:var(--green); }
.variants summary i { background-color:var(--green); }
.lightbox figcaption .vspec { width:auto; min-width:300px; text-align:left; background:#ffffff12; border-radius:12px; padding:12px 16px; }
.lightbox figcaption .vspec dt { color:var(--gold); } .lightbox figcaption .vspec dd { color:#fff; }
.lightbox figcaption .tag { background:var(--green); box-shadow:inset 0 0 0 1px #ffffff40; }
.lightbox { overflow-y:auto; }
.lightbox figure:has(figcaption:not(:empty)) img { max-height:56vh; }

/* 21st.dev "Get Started Button" (Marcellin Leclercq, MIT) port: the one hover effect on the site, by request */
.gsb { position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px; height:38px; padding:0 14px 0 18px;
       border:2px solid var(--green); border-radius:999px; background:var(--paper); color:var(--green); overflow:hidden; isolation:isolate;
       font:700 14px/1 var(--sans); text-decoration:none; transition:color .3s, transform .3s; }
.gsb-fill { position:absolute; left:50%; top:50%; width:20px; height:20px; margin:-10px 0 0 -10px; border-radius:50%; background:var(--green);
            transform:scale(0); transition:transform .5s ease-out; pointer-events:none; z-index:-1; }
.gsb:hover, .gsb:focus-visible { color:#fff; }
.gsb:hover .gsb-fill, .gsb:focus-visible .gsb-fill { transform:scale(40); }
.gsb:focus-visible { outline:none; box-shadow:0 0 0 3px var(--paper), 0 0 0 5px var(--sage-ink); }
.gsb-arrow { width:17px; height:17px; fill:none; stroke:var(--accent); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;
             transform:rotate(-45deg); transition:transform .15s linear; }
@media (hover:hover) and (prefers-reduced-motion:no-preference) { .gsb:hover { transform:translateY(-1px); } }
.lightbox figcaption .gsb { background:transparent; border-color:#fff; color:#fff; }
.lightbox figcaption .gsb .gsb-fill { background:#fff; }
.lightbox figcaption .gsb:hover { color:var(--green); }

/* home "Pro style": their promo video in place of the play-button thumbnail */
.split .media { position:relative; }
.split .media video.promo { width:100%; height:100%; object-fit:cover; display:block; cursor:pointer; }
.promo-sound { position:absolute; right:18px; bottom:18px; display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 16px 0 12px;
               border:0; border-radius:999px; background:#141c18d9; color:#fff; font:700 14px var(--sans); cursor:pointer; backdrop-filter:blur(6px); }
.promo-sound svg { width:18px; height:18px; fill:var(--accent); }
.promo-sound.hide { display:none; }
/* the promo video keeps its 16:9 frame (no edge bleed or fade) so its on-screen titles aren't cropped */
.split .media:has(video.promo) { align-self:center; min-height:0; aspect-ratio:16/9; margin:0; border-radius:18px; overflow:hidden;
                                  -webkit-mask-image:none; mask-image:none; box-shadow:0 30px 60px #141c1826; }
/* nav "Get a quote": the 21st.dev button on the dark nav: brick pill, cream fill grows on hover */
.gsb-nav { background:var(--accent); border-color:var(--accent); color:#fff; height:44px; padding:0 16px 0 20px; font-size:15px; }
.gsb-nav .gsb-fill { background:var(--cream); }
.gsb-nav .gsb-arrow { stroke:#fff; }
.gsb-nav:hover, .gsb-nav:focus-visible { color:var(--green); }
.gsb-nav:hover .gsb-arrow, .gsb-nav:focus-visible .gsb-arrow { stroke:var(--accent); }
/* "So what's included?": full-width twilight scene; pine wash keeps the copy readable on the left */
.incl-sec .incl-img { inset:0; background-position:30% 60%; -webkit-mask-image:none; mask-image:none; }
.incl-sec .incl-img::after { background:linear-gradient(90deg, #1e2a24f2 0%, #1e2a24b3 38%, #1e2a2440 70%, #1e2a2466 100%); }
.incl-sec .incl-img { background-position:80% 60%; }   /* render is pre-mirrored (board keyed after flipping): sky behind the copy, trailer behind the frosted panel */
.incl-sec .incl-img::after { background:linear-gradient(90deg, #1e2a24f0 0%, #1e2a24bf 40%, #1e2a2440 72%, #1e2a2466 100%); }

@media (max-width:960px) { .incl-sec .incl-img::after { background:#1e2a24c7; } }   /* stacked: even wash so nothing competes with the copy */

/* ---------- polish pass (impeccable): brick reserved for primary CTAs, hero slabs, product numbers, scorecard birdies ---------- */
.ticks li::before { background-color:var(--green); }
.dark .ticks li::before, .dark2 .ticks li::before { background-color:var(--sage-ink); }
.tile .n { color:var(--sage-ink); }
.dark .tile .n, .dark2 .tile .n, .tiles:not(.light-tiles) .tile .n { color:var(--gold); }
.step { border-top-color:var(--green); }
.step .n { color:var(--green); }
.dark .step, .dark2 .step { border-top-color:var(--gold); }
.dark .step .n, .dark2 .step .n { color:var(--gold); }
.sub-points h4 { color:var(--green); }
.dark .sub-points h4, .dark2 .sub-points h4 { color:var(--gold); }
.card .more { color:var(--green); }
.dark .card .more, .dark2 .card .more { color:var(--gold); }
.body a[href^="tel:"], .prose a[href^="tel:"], .faq a[href^="tel:"], .lead a[href^="tel:"], .prose a[href^="mailto:"] { color:var(--green); text-decoration:underline; text-decoration-color:#1e2a2440; text-underline-offset:3px; }
.dark .lead a[href^="tel:"] { color:#fff; }
.faq summary::after { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 1.5v11M1.5 7h11' stroke='%231e2a24' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.faq details[open] summary::after { background-color:var(--green); }
.site-footer .reach small { color:var(--gold); }
/* small labels on white meet 4.5:1 */
.vspec dt { color:var(--sage-ink); }

/* Oswald ships 200-700 only; 800 made Chrome fake the bold on the stat numbers and scorecard badges */
.proof b, .band .proof b, .band .types b, .price b, .prose h4, .prose h5, .prose h6, .drawer summary, .drawer > ul > li > a, .scard footer i, .scard .att b { font-weight:700; }

/* audit 2026-10-28 ------------------------------------------------------------------------------------------- */
/* press feedback: a tap visibly registers (press state, not a hover effect) */
.btn:active, .mbar a:active, .vcard .tag:active, .incl-panel .chips.sizes a:active { transform:scale(.97); transition:transform .1s ease-out; }
.mbar a, .vcard .tag { transition:transform .16s ease-out; }
/* phone tap targets: ~44px rows without changing the look */
.site-nav .logo { display:inline-flex; align-items:center; min-height:44px; }
.crumbs a, .vcard .tag, .incl-panel .chips.sizes a { position:relative; }
.crumbs a::after, .vcard .tag::after, .incl-panel .chips.sizes a::after { content:""; position:absolute; inset:-14px -6px; }   /* invisible hit area */
@media (max-width:760px) {
  .site-footer ul { gap:0; }
  .site-footer ul a, .site-footer .legal a { display:inline-block; padding:12px 0; }
  .site-footer .legal { gap:0 22px; }
  .site-footer .reach a { padding:6px 0; }
  .site-footer .social a { width:44px; height:44px; }
  .incl-panel .chips.sizes a { min-height:44px; display:inline-flex; align-items:center; }
}
/* reduced motion: fades or instant changes instead of movement */
@media (prefers-reduced-motion: reduce) {
  .site-nav .live i { animation:none; }
  .drawer, .menu .drop { transform:none; }
  .btn:active, .mbar a:active, .vcard .tag:active { transform:none; }
}

/* ---------- Option D crest logo (taller than the old wordmark: sized up so CLUBHOUSE stays legible) ---------- */
.site-nav .logo img[src*="crest"] { height:64px; }
.site-footer img.logo[src*="crest"] { height:96px; }
@media (max-width:760px) { .site-nav .logo img[src*="crest"] { height:56px; } }

/* ---------- home closing CTA: one line + one button on the pine photo band ---------- */
.cta-band .lead { color:#d6ded2; max-width:560px; }

/* ---------- resizable nav (after Aceternity's Resizable Navbar): scroll drives --t from 0 to 1 over the first 240px
   (site.js), and the full-width bar shrinks continuously into a floating pine pill: narrower, off the top edge, rounder,
   its pill background fading in. The live tag and phone slide out on the way. No transitions here: scroll IS the timeline.
   .menu gets one highlight that slides between the hovered items ---------- */
.site-nav { --t:0; left:50%; right:auto; translate:-50% 0; isolation:isolate;
            top:calc(14px * var(--t)); width:calc(100% - var(--t) * max(32px, 100% - 1040px));   /* = lerp(100%, min(100% - 32px, 1040px), t) */
            height:calc(var(--nav-h) - 8px * var(--t)); gap:calc(28px - 12px * var(--t));
            padding:0 calc(28px - 20px * var(--t)) 0 calc(28px - 8px * var(--t)); border-radius:calc(30px * var(--t));
            transition:background .3s, box-shadow .3s; }
.site-nav::before { content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; opacity:var(--t); pointer-events:none;
                    background:#1e2a24d9; backdrop-filter:blur(10px); box-shadow:0 0 0 1px #ffffff14, 0 1px 1px #0000000d, 0 16px 50px #00000047; }
.site-nav .live, .site-nav .phone { overflow:hidden; white-space:nowrap; max-width:calc(260px * (1 - 2.5 * var(--t))); opacity:calc(1 - 3 * var(--t)); }
.site-nav .logo img[src*="crest"] { height:calc(64px - 14px * var(--t)); }
.menu { position:relative; }
.menu > li { z-index:1; }
.menu > li > a, .menu > li > button { border-radius:999px; }
.menu .hl { position:absolute; top:50%; left:0; width:0; height:40px; translate:0 -50%; border-radius:999px; background:#ffffff1c;
            opacity:0; pointer-events:none; transition:left .3s cubic-bezier(.22,1,.36,1), width .3s cubic-bezier(.22,1,.36,1), opacity .2s; }
@media (max-width:760px) {
  .site-nav { top:calc(10px * var(--t)); width:calc(100% - 20px * var(--t)); height:calc(var(--nav-h) - 12px * var(--t)); gap:12px;
              padding:0 calc(12px - 4px * var(--t)) 0 calc(16px - 4px * var(--t)); border-radius:calc(18px * var(--t)); }
  .site-nav .logo img[src*="crest"] { height:calc(56px - 10px * var(--t)); }
}

/* "Call now" (nav) and the home closing CTA: the brick pill without the arrow; "Call now" shows the agent's number on hover */
.gsb-nav:not(:has(.gsb-arrow)) { padding:0 22px; }
.call-now .gsb-label { display:grid; text-align:center; }
.call-now .gsb-label > span { grid-area:1 / 1; transition:opacity .2s, translate .25s; }
.call-now .gsb-label > span + span { opacity:0; }
@media (hover:hover) {
  .call-now:hover .gsb-label > span:first-child, .call-now:focus-visible .gsb-label > span:first-child { opacity:0; translate:0 -6px; }
  .call-now .gsb-label > span + span { translate:0 6px; }
  .call-now:hover .gsb-label > span + span, .call-now:focus-visible .gsb-label > span + span { opacity:1; translate:none; }
}

/* ---------- phone menu: the nav's own condensed type at a calmer weight, the list sits low in thumb reach,
   orange chevrons for the expanders, and Club Buddy steps aside while it is open (it covered the quote button) ---------- */
.drawer { display:flex; flex-direction:column; padding-bottom:calc(28px + env(safe-area-inset-bottom)); transform:translateY(12px); }
.drawer > ul { margin-top:auto; }   /* auto margin pushes the list down; it collapses to 0 when the list is taller than the screen */
.drawer > ul > li > a, .drawer summary { font:600 20px/1.1 var(--cond); letter-spacing:.06em; text-transform:uppercase; padding:15px 2px; }
.drawer details a { font-weight:500; }
.drawer summary::after, .drawer details[open] summary::after { opacity:1; background-size:16px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 5.25l4 4 4-4' fill='none' stroke='%23c8553d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); transition:transform .25s; }
.drawer details[open] summary::after { transform:rotate(180deg); }
.drawer .contact .val { font:500 18px var(--sans); }
.drawer .contact .gsb { width:100%; height:52px; margin-top:8px; }
body.drawer-open elevenlabs-convai { display:none; }
/* pressed menu row: a light pine pill. The rows bleed 10px past the list edge (margin) and pad it back (padding),
   so the text stays put while the highlight gets room around it */
.drawer > ul > li > a, .drawer summary { margin:0 -10px; padding-left:12px; padding-right:12px; border-radius:12px;
                                          -webkit-tap-highlight-color:transparent; transition:background-color .15s; }
.drawer details a { -webkit-tap-highlight-color:transparent; transition:background-color .15s; border-radius:0 10px 10px 0; }
.drawer > ul > li > a:active, .drawer summary:active, .drawer details a:active { background-color:var(--green3); }

/* split sections with point cards + a CTA (Event Services): the button sits centred under the card(s) */
.pts-cta.one { max-width:calc(50% - 7px); }                  /* a lone card keeps the half width it had in the 2-column grid */
.pts-cta.one .sub-points { grid-template-columns:1fr; }
.pts-cta .btns { justify-content:center; }
@media (max-width:760px) { .pts-cta.one { max-width:none; } }