/* KaddieIQ BallFIT page.
 *
 * The blueprint below is declared here rather than in a style attribute on
 * the element. A url() inside a custom property resolves against the
 * stylesheet that uses the var(), not the document — so a page-relative path
 * would 404 from here and the mask would render as nothing at all. Declaring
 * it in the sheet that consumes it makes the relative path the natural one.
 * This page's blueprint never changes, so it belongs in CSS.
 */
:root{--bp-land:url("../images/holes/road-land.svg");--bp-port:url("../images/holes/road-port.svg")}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);scroll-padding-top:80px}body{font-family:var(--body);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;transition:background-color .4s ease,color .4s ease}
img{display:block;max-width:100%}a{text-decoration:none}
:root{--r:12px}
.btn{display:inline-block;font:var(--fw-title) 14px/1 var(--head);letter-spacing:.04em;border-radius:2px;cursor:pointer;transition:background-color .2s,color .2s;
  padding:.85em 1.3em;border:1px solid var(--gold);color:var(--gold-hi);background:transparent;text-decoration:none}
.btn:hover,.btn:focus-visible{background:var(--gold-fill);color:var(--on-gold);outline:none}
.btn .arr{margin-left:.45em;display:inline-block;transition:transform .2s}
.btn:hover .arr{transform:translateX(3px)}
.btn-ghost{border-color:var(--rule);color:var(--soft)}
.btn-ghost:hover{background:rgba(200,168,75,.1);color:var(--gold-hi)}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── tokens the four-col footer needs ── */


.cookie-banner{display:none;position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:200;
  width:min(540px,calc(100vw - 32px));background:var(--bg-2);border:1px solid var(--rule);border-radius:14px;
  padding:16px 20px;box-shadow:0 16px 40px rgba(0,0,0,.35)}
.cookie-inner{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.cookie-icon{font-size:20px}.cookie-copy{flex:1;font-size:13.5px;color:var(--soft);line-height:1.5}
.cookie-copy a{color:var(--gold-hi);text-decoration:underline;text-underline-offset:3px}
.cookie-actions{display:flex;gap:8px}
.btn-decline,.btn-accept{font:var(--fw-label) 13px/1 var(--body);padding:8px 14px;border-radius:6px;cursor:pointer;border:1px solid var(--rule)}
.btn-decline{background:transparent;color:var(--muted)}.btn-decline:hover{color:var(--ink)}
.btn-accept{background:var(--gold-fill);color:var(--on-gold);border-color:var(--gold-fill)}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms !important;animation:none !important}}
/* min-height, not height: the hero used to be a fixed box with the text
   pinned to its bottom via position:absolute — safe as long as the text
   fit inside that box, and silently clipped the H1 clean off-screen on
   narrow phones the moment it didn't (two theme-toggle-driven H1 rewrites
   this ran into it without anyone noticing, since overflow:hidden hides
   a clipping bug as thoroughly as it hides anything else). Now the image
   and scrim are the absolutely-positioned layer, and the text sits in
   normal flow — the box grows to fit whatever the copy needs, with the
   clamp() only setting a floor for when it doesn't need the room. */
.bf-hero-img{position:relative;width:100%;min-height:clamp(285px,42vw,480px);overflow:hidden;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end}
.bf-hero-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 62%;display:block;opacity:.92;mix-blend-mode:luminosity;-webkit-mask:linear-gradient(to bottom,#000 0%,#000 25%,transparent 72%);mask:linear-gradient(to bottom,#000 0%,#000 25%,transparent 72%)}
.bf-hero-scrim{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(13,28,21,.0) 0%,rgba(13,28,21,.0) 30%,rgba(13,28,21,.72) 68%,rgba(13,28,21,.97) 100%)}
:root[data-theme="light"] .bf-hero-scrim{background:linear-gradient(to bottom,rgba(236,239,228,.0) 0%,rgba(236,239,228,.0) 30%,rgba(236,239,228,.75) 68%,rgba(236,239,228,.99) 100%)}
@media(prefers-color-scheme:light){:root[data-theme="system"] .bf-hero-scrim{background:linear-gradient(to bottom,rgba(236,239,228,.0) 0%,rgba(236,239,228,.0) 30%,rgba(236,239,228,.75) 68%,rgba(236,239,228,.99) 100%)}}
.bf-hero-body{position:relative;padding:clamp(24px,4vw,48px) clamp(20px,5vw,60px) clamp(32px,5vw,52px)}
.bf-kicker{font:var(--fw-label) 11px/1 var(--head);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.72);display:block;margin-bottom:14px}
:root[data-theme="light"] .bf-kicker,:root[data-theme="system"] .bf-kicker{color:var(--gold-hi)}
.bf-h1{font:var(--fw-display) clamp(32px,5.8vw,64px)/1.06 var(--head);letter-spacing:-.02em;color:#fff;margin-bottom:18px;text-shadow:0 2px 18px rgba(0,0,0,.35)}
:root[data-theme="light"] .bf-h1,:root[data-theme="system"] .bf-h1{color:var(--ink);text-shadow:none}
.bf-h1 .g{color:#96e89a}
:root[data-theme="light"] .bf-h1 .g,:root[data-theme="system"] .bf-h1 .g{color:var(--wm)}
.bf-lede{font-size:clamp(15px,1.8vw,18px);line-height:1.65;color:rgba(255,255,255,.82);max-width:56ch;margin-bottom:10px;text-shadow:0 1px 8px rgba(0,0,0,.25)}
:root[data-theme="light"] .bf-lede,:root[data-theme="system"] .bf-lede{color:var(--soft);text-shadow:none}
.bf-free{font-size:clamp(13.5px,1.4vw,15.5px);color:rgba(255,255,255,.62);margin-bottom:26px}
.bf-free strong{color:rgba(255,255,255,.9)}
:root[data-theme="light"] .bf-free,:root[data-theme="system"] .bf-free{color:var(--muted)}
:root[data-theme="light"] .bf-free strong,:root[data-theme="system"] .bf-free strong{color:var(--ink)}
.bf-cta-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.bf-cta-row .btn{font-size:14px;border-color:rgba(255,255,255,.5);color:#fff;background:rgba(255,255,255,.1);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.bf-cta-row .btn:hover{background:var(--gold-fill);border-color:var(--gold-fill);color:var(--on-gold)}
.bf-cta-row .btn.btn-ghost{border-color:rgba(255,255,255,.28);color:rgba(255,255,255,.68);background:transparent}
.bf-cta-row .btn.btn-ghost:hover{background:rgba(255,255,255,.1);color:#fff}
:root[data-theme="light"] .bf-cta-row .btn,:root[data-theme="system"] .bf-cta-row .btn{border-color:var(--gold);color:var(--gold-hi);background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
:root[data-theme="light"] .bf-cta-row .btn.btn-ghost,:root[data-theme="system"] .bf-cta-row .btn.btn-ghost{border-color:var(--rule);color:var(--soft);background:transparent}
.bf-pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:900px;padding:24px clamp(20px,5vw,60px) clamp(48px,8vw,80px)}
@media(max-width:680px){.bf-pillars{grid-template-columns:1fr}}
.bf-pillar{padding:24px;border-top:1px solid var(--hair);background:var(--surface);border-radius:var(--r)}
.bf-pnum{font:var(--fw-display) 32px/1 var(--head);color:var(--hair);letter-spacing:-.02em;margin-bottom:10px}
.bf-ptitle{font:var(--fw-title) 17px/1.2 var(--head);color:var(--ink);margin-bottom:8px}
.bf-pcopy{font-size:14.5px;color:var(--soft);line-height:1.6}
.bf-enter{padding:clamp(40px,7vw,80px) clamp(20px,5vw,60px);text-align:center;border-top:1px solid var(--rule)}
.bf-enter-label{font:var(--fw-label) 11px/1 var(--head);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-hi);margin-bottom:14px}
.bf-enter h2{font:var(--fw-display) clamp(26px,4vw,42px)/1.1 var(--head);color:var(--ink);margin-bottom:12px;letter-spacing:-.01em}
.bf-enter p{color:var(--soft);margin-bottom:28px;font-size:15px;max-width:50ch;margin-left:auto;margin-right:auto}
.bf-enter .btn{font-size:15px}

.bf-comp-banner{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;
  margin:0 clamp(20px,5vw,60px) clamp(32px,6vw,56px);padding:16px 22px;border-radius:var(--r,14px);
  border:1px solid var(--gold);background:color-mix(in srgb,var(--gold) 8%,var(--surface));
  text-decoration:none;transition:background-color .2s ease}
.bf-comp-banner:hover{background:color-mix(in srgb,var(--gold) 14%,var(--surface))}
.bf-comp-kicker{font:var(--fw-label) 11px/1 var(--head);letter-spacing:.1em;text-transform:uppercase;color:var(--gold-hi);flex:none}
.bf-comp-text{font-size:14px;color:var(--ink);line-height:1.4}
.bf-comp-arr{color:var(--gold-hi);font-weight:700;flex:none}