/* ============================================================
   GOLD KEY BOATHOUSE — multi-page components
   Loads after styles.css. Same gold/black system,
   Fraunces (display) + Hanken Grotesk (body).
   ============================================================ */

/* ---- compact sub-page hero (not full-viewport) ---- */
.hero--compact{ min-height:auto; padding:170px 0 84px; align-items:center; }
.hero--compact .hero__inner{ max-width:1240px; }
.hero__kicker{ /* alias of eyebrow used in page heroes */ }

/* ---- trust / proof pill row ---- */
.pillrow{ display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.pill{ display:inline-flex; align-items:center; gap:9px; border:1px solid var(--gold-line); border-radius:100px; padding:9px 18px; font-size:.86rem; color:var(--text); background:rgba(255,255,255,.02); }
.pill svg{ width:15px; height:15px; stroke:var(--gold); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* ---- "freedom from" list ---- */
.freedoms{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px 40px; list-style:none; margin-top:10px; }
.freedoms li{ display:flex; align-items:flex-start; gap:13px; color:var(--text); font-size:1.04rem; line-height:1.4; }
.freedoms li::before{ content:""; flex:none; margin-top:9px; width:18px; height:1px; background:var(--gold); }

/* ---- big stat tiles (3 across) ---- */
.stattiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.stile{ border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); padding:34px 28px; text-align:center; transition:transform .4s var(--ease), border-color .4s; }
.stile:hover{ transform:translateY(-4px); border-color:var(--gold-line); }
.stile__num{ font-family:var(--font-display); font-weight:400; font-size:clamp(2.2rem,5vw,3.3rem); color:var(--gold-bright); line-height:1; display:block; letter-spacing:-.01em; }
.stile__label{ display:block; margin-top:14px; color:var(--muted); font-size:.95rem; line-height:1.4; }

/* ---- spec / definition table ---- */
.spec{ width:100%; border-collapse:collapse; }
.spec tr{ border-top:1px solid var(--line); }
.spec tr:first-child{ border-top:none; }
.spec th{ text-align:left; vertical-align:top; width:38%; padding:18px 32px 18px 0; color:var(--gold); font-family:var(--font-display); font-weight:500; font-size:1.06rem; line-height:1.3; }
.spec td{ padding:18px 0; color:var(--text); font-size:1rem; line-height:1.55; }

/* ---- data table (ramps, rate cards) ---- */
.tablewrap{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.tablewrap + .tablewrap{ margin-top:22px; }
.tablewrap__scroll{ overflow-x:auto; }
.dtable{ width:100%; border-collapse:collapse; min-width:520px; }
.dtable th{ text-transform:uppercase; letter-spacing:.1em; font-size:.7rem; font-weight:600; color:var(--gold); text-align:left; padding:15px 22px; border-bottom:1px solid var(--gold-line); background:var(--panel); white-space:nowrap; }
.dtable td{ padding:14px 22px; border-bottom:1px solid var(--line); color:var(--text); font-size:.95rem; }
.dtable tbody tr:last-child td{ border-bottom:none; }
.dtable tbody tr:hover td{ background:var(--gold-soft); }
.dtable .time, .dtable .num{ color:var(--gold-bright); font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }
.table-cap{ font-family:var(--font-display); color:var(--cream); font-size:1.15rem; margin:0 0 14px; }

/* ---- callout box (Stickney Point, retrieval, RV note, disclaimers) ---- */
.callout{ border:1px solid var(--gold-line); border-radius:var(--radius-lg); background:linear-gradient(180deg,var(--panel),var(--ink-3)); padding:clamp(26px,4vw,40px); }
.callout--plain{ border-color:var(--line); }
.callout__k{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); font-weight:600; margin-bottom:14px; display:block; }
.callout__title{ font-family:var(--font-display); font-weight:500; font-size:clamp(1.35rem,3vw,1.95rem); color:var(--cream); margin-bottom:14px; line-height:1.15; }
.callout p{ color:var(--muted); font-size:1.04rem; line-height:1.65; }
.callout p + p{ margin-top:12px; }

/* ---- route cards (find your door / who we serve) ---- */
.routes{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.route{ display:flex; flex-direction:column; gap:12px; padding:32px 32px 28px; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); transition:transform .4s var(--ease), border-color .4s, background .4s; color:inherit; }
.route:hover{ transform:translateY(-5px); border-color:var(--gold-line); background:var(--panel-2); }
.route h3{ font-family:var(--font-display); font-weight:500; font-size:1.4rem; color:var(--cream); }
.route p{ color:var(--muted); font-size:.98rem; flex:1; line-height:1.5; }
.route__go{ color:var(--gold); font-weight:600; font-size:.9rem; letter-spacing:.04em; text-transform:uppercase; display:inline-flex; align-items:center; gap:8px; }
.route__go .a{ transition:transform .35s var(--ease); }
.route:hover .route__go .a{ transform:translateX(4px); }

/* ---- path cards (two-up: individual/institutional, boat/RV, etc.) ---- */
.paths{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.path{ padding:clamp(28px,3.5vw,40px); border:1px solid var(--line); border-radius:var(--radius-lg); background:linear-gradient(180deg,var(--panel),var(--ink-3)); display:flex; flex-direction:column; gap:14px; }
.path h3{ font-family:var(--font-display); font-weight:500; font-size:1.5rem; color:var(--gold); }
.path p{ color:var(--muted); line-height:1.6; flex:1; }
.path em{ color:var(--text); font-style:italic; }

/* ---- leadership ---- */
.leader{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(30px,5vw,60px); align-items:start; }
.leader__media{ border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; background:linear-gradient(180deg,var(--panel-2),var(--panel)); aspect-ratio:4/5; display:flex; align-items:center; justify-content:center; position:relative; }
.leader__media img{ width:100%; height:100%; object-fit:cover; }
.leader__media .mono{ font-family:var(--font-display); font-size:5rem; color:var(--gold-line); }
.leader__name{ font-family:var(--font-display); font-weight:500; font-size:clamp(1.7rem,3.4vw,2.4rem); color:var(--cream); }
.leader__role{ color:var(--gold); font-size:1rem; letter-spacing:.04em; margin:6px 0 24px; }
.leader p{ color:var(--muted); line-height:1.65; margin-bottom:16px; }
.leader__creds{ list-style:none; columns:2; column-gap:26px; margin-top:10px; }
.leader__creds li{ position:relative; padding-left:22px; color:var(--text); font-size:.92rem; margin-bottom:9px; break-inside:avoid; -webkit-column-break-inside:avoid; }
@media (max-width:600px){ .leader__creds{ columns:1; } }
.leader__creds li::before{ content:""; position:absolute; left:0; top:9px; width:12px; height:1px; background:var(--gold); }

/* ---- leadership: naval honors treatment ---- */
.leader__body{ min-width:0; }
.leader--featured .leader__media{ border-color:rgba(233,185,73,.28); box-shadow:0 24px 60px rgba(0,0,0,.5); }
.leader__rank{ position:absolute; left:14px; bottom:14px; display:inline-flex; align-items:center; gap:7px;
  padding:6px 12px; background:rgba(18,30,54,.86); border:1px solid rgba(233,185,73,.45); border-radius:999px;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  font-size:.64rem; letter-spacing:.13em; text-transform:uppercase; color:var(--cream); font-weight:700; }
.leader__rank svg{ width:14px; height:14px; fill:var(--gold); }
.leader__role{ margin-bottom:10px; }
.leader__service{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; color:var(--cream);
  font-size:.98rem; font-weight:500; margin:0 0 16px; }
.leader__stars{ color:var(--gold); letter-spacing:1px; font-size:.9rem; }
.leader__ribbons{ display:flex; gap:5px; margin:0 0 24px; }
.leader__ribbons span{ width:40px; height:13px; border-radius:2px; border:1px solid rgba(255,255,255,.14); box-shadow:0 1px 3px rgba(0,0,0,.45); }
.leader__ribbons span:nth-child(1){ background:linear-gradient(90deg,#21436e 0 34%,#c8902b 34% 66%,#21436e 66%); }
.leader__ribbons span:nth-child(2){ background:linear-gradient(90deg,#6e2433 0 30%,#d8cfbf 30% 70%,#6e2433 70%); }
.leader__ribbons span:nth-child(3){ background:linear-gradient(0deg,#21436e 0 34%,#e9b949 34% 66%,#21436e 66%); }
.leader__ribbons span:nth-child(4){ background:linear-gradient(90deg,#274f3d 0 50%,#d8cfbf 50%); }
.leader__ribbons span:nth-child(5){ background:linear-gradient(135deg,#c8902b,#e9b949); }
.leader__ribbons span:nth-child(6){ background:linear-gradient(90deg,#21436e 0 25%,#d8cfbf 25% 50%,#6e2433 50% 75%,#d8cfbf 75%); }
.leader__quote{ font-family:var(--font-display); font-style:italic; font-weight:340;
  font-size:clamp(1.14rem,1.9vw,1.42rem); line-height:1.46; color:var(--cream); margin:24px 0;
  padding-top:22px; border-top:1px solid var(--gold-line); }
.leader__honors{ margin:24px 0 4px; }
.leader__honors-k{ display:block; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold); font-weight:700; margin-bottom:13px; }
.leader__honors ul{ list-style:none; display:grid; gap:13px; }
.leader__honors li{ position:relative; padding-left:25px; }
.leader__honors li::before{ content:"\2605"; position:absolute; left:0; top:1px; color:var(--gold); font-size:.78rem; }
.leader__honors strong{ display:block; color:var(--cream); font-size:1rem; font-weight:600; }
.leader__honors span{ display:block; color:var(--muted); font-size:.9rem; margin-top:2px; }
@media (max-width:760px){ .leader{ grid-template-columns:1fr; } .leader__media{ max-width:360px; } }

/* ---- firsts / credibility tiles ---- */
.firsts{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.first{ padding:32px 28px; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); transition:transform .4s var(--ease), border-color .4s; }
.first:hover{ transform:translateY(-5px); border-color:var(--gold-line); }
.first__tag{ font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); font-weight:600; }
.first p{ color:var(--text); margin-top:16px; font-size:1.06rem; line-height:1.45; }

/* ---- generic prose / split layouts ---- */
.prose{ max-width:68ch; color:var(--muted); font-size:1.18rem; line-height:1.72; }
.prose strong{ color:var(--text); font-weight:600; }
.prose p + p{ margin-top:18px; }
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,70px); align-items:start; }
.split--center{ align-items:center; }
.split--media{ grid-template-columns:1fr 1.05fr; align-items:center; }
.split__media{ position:relative; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line); box-shadow:0 40px 80px -40px rgba(0,0,0,.8); }
.split__media img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; }
/* tall vertical media (e.g. "A closer look" — match the spec list height) */
.split--tall{ align-items:stretch; }
.split--tall .split__media{ height:100%; min-height:clamp(440px,52vw,660px); }
.split--tall .split__media img{ height:100%; aspect-ratio:auto; }

/* ---- validation: scroll-driven demand chart ---- */
.valgrid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,5vw,72px); align-items:center; margin-top:6px; }
.valviz{ margin:0; }
.valviz__frame{ position:relative; overflow:hidden; padding:20px 20px 16px; border-radius:var(--radius-lg);
  background:linear-gradient(180deg, rgba(22,22,26,.92), rgba(12,12,14,.94)); border:1px solid var(--line);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.9); }
.valviz__frame::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 85% at 82% -10%, rgba(233,185,73,.12), transparent 60%); }
.valviz__head{ position:relative; display:block; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold); font-weight:700; margin-bottom:8px; }
.valviz__canvas{ position:relative; display:block; width:100%; height:auto; }
.valviz__legend{ position:relative; display:flex; gap:22px; flex-wrap:wrap; margin-top:12px; }
.valviz__key{ display:inline-flex; align-items:center; gap:8px; font-size:.82rem; color:var(--muted); }
.valviz__key i{ width:15px; height:3px; border-radius:2px; }
.valviz__key--demand i{ background:var(--gold-grad); box-shadow:0 0 8px rgba(233,185,73,.65); }
.valviz__key--supply i{ background:#5b6472; }
.valviz__note{ position:relative; margin-top:9px; color:var(--cream); font-size:.92rem; line-height:1.5; }
@media (max-width:860px){ .valgrid{ grid-template-columns:1fr; } }

/* ---- bullet proof list ---- */
.proofs{ list-style:none; display:flex; flex-direction:column; gap:14px; max-width:64ch; }
.proofs li{ position:relative; padding-left:30px; color:var(--text); font-size:1.04rem; line-height:1.5; }
.proofs li::before{ content:""; position:absolute; left:0; top:3px; width:18px; height:18px; border-radius:5px; background:var(--gold-soft); border:1px solid var(--gold-line);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E9B949' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:center; background-size:11px; }

/* ---- compliance microcopy / disclaimer ---- */
.micro{ font-size:.84rem; color:var(--muted-2); line-height:1.65; max-width:74ch; }
.disclaimer{ border:1px solid var(--line); border-radius:var(--radius); background:var(--ink-2); padding:24px 28px; }
.disclaimer .micro{ max-width:none; }

/* ---- map embed placeholder ---- */
.mapframe{ width:100%; aspect-ratio:16/8; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; }
.mapframe iframe{ width:100%; height:100%; border:0; filter:grayscale(.2) contrast(1.05); }

/* ---- footer: 4-column variant ---- */
.footer__inner--4{ grid-template-columns:1.6fr 1fr 1fr 1.2fr; }
.footer__meta{ display:flex; flex-direction:column; gap:8px; }
.footer__meta span{ color:var(--muted); font-size:.95rem; line-height:1.4; }
.nav__links a.secondary{ opacity:.8; }

/* ---- disclosure modal (native <dialog>) ---- */
.disclosure{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:22px; }
.disclosure__line{ font-size:.85rem; color:var(--muted-2); max-width:48ch; }
.disclosure-link{ font-family:inherit; color:var(--gold); font-weight:600; font-size:.86rem; letter-spacing:.02em; text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--gold-line); cursor:pointer; background:none; border:none; padding:0; transition:color .3s; white-space:nowrap; }
.disclosure-link:hover{ color:var(--gold-bright); }
.modal{ border:none; background:transparent; padding:0; max-width:580px; width:92%; overflow:visible; margin:0; top:50%; left:50%; transform:translate(-50%,-50%); }
.modal::backdrop{ background:rgba(8,8,9,.74); backdrop-filter:blur(4px); }
.modal__panel{ background:linear-gradient(180deg,var(--panel),var(--ink-3)); border:1px solid var(--gold-line); border-radius:var(--radius-lg); padding:clamp(28px,4vw,40px); position:relative; box-shadow:0 50px 100px -30px rgba(0,0,0,.85); }
.modal[open] .modal__panel{ animation:modalIn .35s var(--ease); }
@keyframes modalIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
.modal__k{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); font-weight:600; display:block; margin-bottom:12px; }
.modal__title{ font-family:var(--font-display); font-weight:500; font-size:1.5rem; color:var(--cream); margin-bottom:16px; line-height:1.15; }
.modal__panel p{ color:var(--muted); line-height:1.7; margin-bottom:22px; font-size:.98rem; }
.modal__close{ position:absolute; top:14px; right:16px; width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.5rem; line-height:1; color:var(--muted); border:1px solid var(--line); background:transparent; cursor:pointer; transition:color .3s, border-color .3s; }
.modal__close:hover{ color:var(--gold); border-color:var(--gold-line); }

/* ---- animated bar chart ---- */
.barchart{ display:flex; flex-direction:column; gap:20px; max-width:780px; }
.bar{ display:grid; grid-template-columns:minmax(150px,210px) 1fr auto; gap:20px; align-items:center; }
.bar__label{ color:var(--text); font-size:.96rem; line-height:1.3; }
.bar__track{ height:16px; background:var(--ink-2); border:1px solid var(--line); border-radius:100px; overflow:hidden; }
.bar__fill{ height:100%; width:0; background:var(--gold-grad); border-radius:100px; transition:width 1.3s var(--ease); }
.barchart.in .bar__fill{ width:var(--w); }
.bar--dim .bar__fill{ background:linear-gradient(135deg,#6f6a60,#3a372f); }
.bar__val{ font-family:var(--font-display); font-weight:500; color:var(--gold-bright); font-size:1.15rem; min-width:104px; text-align:right; font-variant-numeric:tabular-nums; }
.bar--dim .bar__val{ color:var(--muted); }

/* ---- full-bleed image band ---- */
.band{ position:relative; min-height:clamp(300px,44vw,520px); display:flex; align-items:center; overflow:hidden; z-index:3; }
.band__bg{ position:absolute; inset:0; z-index:0; }
.band__bg img{ width:100%; height:100%; object-fit:cover; }
.band__veil{ position:absolute; inset:0; background:linear-gradient(90deg, rgba(10,10,11,.92) 0%, rgba(10,10,11,.6) 50%, rgba(10,10,11,.3) 100%); }
.band__inner{ position:relative; z-index:2; max-width:800px; }
.band__k{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); font-weight:600; }
.band__title{ font-family:var(--font-display); font-weight:340; font-size:clamp(1.8rem,4vw,3rem); color:var(--cream); line-height:1.08; margin:14px 0 16px; }
.band__title span, .band__title em{ display:block; }
.band__title em{ font-style:italic; }
.cta__title span{ display:block; }
.band p{ color:var(--text); font-size:1.06rem; line-height:1.6; }

/* ---- headline line-wrapping (balance soft wraps; keep manual breaks on desktop) ---- */
.hero__title, .sec-title, .exp__title, .inq__title, .legal__title, .pillar__title, .quote__text, .modal__title, .invest__intro h3{ text-wrap:balance; }
/* longer hero headline (investors): size down a step so balance can split it into even lines */
.hero__title--long{ font-size:clamp(2.4rem, 6.4vw, 5.4rem); }
@media (max-width:640px){ br.brk{ display:none; } }

/* ---- brand logo: draw-in + shine (inline SVG injected by main.js) ---- */
.brand__logo--svg{ position:relative; display:inline-block; height:50px; filter:none; }
.brand--footer .brand__logo--svg{ height:64px; }
.brand__logo--svg svg{ height:100%; width:auto; display:block; overflow:visible; filter:drop-shadow(0 2px 7px rgba(0,0,0,.4)); }
.brand__logo--svg .gk-word{ animation:gkWordIn .7s var(--ease) both; }
@keyframes gkWordIn{ from{ opacity:0; transform:translateY(9px); } to{ opacity:1; transform:none; } }
.brand__logo--svg .gk-key{ fill-opacity:1; stroke:#F9E1A1; stroke-width:0; vector-effect:non-scaling-stroke; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:0; animation:gkKeyDraw 1.6s var(--ease) .2s both; }
@keyframes gkKeyDraw{
  0%{ stroke-dashoffset:1; fill-opacity:0; stroke-width:2; }
  55%{ stroke-dashoffset:0; fill-opacity:0; stroke-width:2; }
  100%{ stroke-dashoffset:0; fill-opacity:1; stroke-width:0; }
}
.brand__shine{ position:absolute; inset:0; pointer-events:none; will-change:background-position;
  -webkit-mask:url("../img/goldkey-logo.svg?v=3") no-repeat center/contain;
  mask:url("../img/goldkey-logo.svg?v=3") no-repeat center/contain;
  background:linear-gradient(100deg, transparent 40%, rgba(255,255,255,.62) 50%, transparent 60%);
  background-size:250% 100%; background-position:-130% 0;
  animation:gkShine 7.5s ease-in-out 2.4s infinite; }
/* one-shot sweep wave — fired when a nav link is hovered */
.brand__logo--svg.is-sweep .brand__shine{ animation:gkShine 1s cubic-bezier(.2,.7,.2,1) 1; }
/* direct hover — a soft spotlight that tracks the cursor smoothly */
.brand__logo--svg.is-tracking .brand__shine{ animation:none;
  background:radial-gradient(circle at center, rgba(255,255,255,.62), rgba(255,255,255,.12) 40%, transparent 64%);
  background-repeat:no-repeat; background-size:150px 280%;
  background-position:calc(var(--shine-x, 50%) - 75px) center;
  transition:background-position .13s cubic-bezier(.2,.7,.2,1); }
@keyframes gkShine{ 0%{ background-position:-130% 0; } 16%,100%{ background-position:210% 0; } }
@media (prefers-reduced-motion:reduce){
  .brand__logo--svg .gk-word{ animation:none; opacity:1; transform:none; }
  .brand__logo--svg .gk-key{ animation:none; fill-opacity:1; stroke-width:0; }
  .brand__shine{ display:none; animation:none; }
}

/* ---- responsive ---- */
@media (max-width:1000px){
  .footer__inner--4{ grid-template-columns:1fr 1fr; }
}
@media (max-width:900px){
  .freedoms, .stattiles, .routes, .paths, .firsts, .split, .split--media, .leader, .leader__creds{ grid-template-columns:1fr; }
  .leader__media{ aspect-ratio:16/10; max-width:420px; }
  .spec th{ width:auto; display:block; padding:16px 0 4px; }
  .spec td{ display:block; padding:0 0 16px; }
  .spec tr{ display:block; }
}

.valviz__foot{ display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-top:14px; }
.valviz__ratio{ flex:none; text-align:right; line-height:1; }
.valviz__ratio-num{ display:block; font-family:"Fraunces",Georgia,serif; font-weight:500; font-size:clamp(2rem,3.4vw,2.8rem); color:var(--gold-bright); text-shadow:0 0 22px rgba(233,185,73,.35); }
.valviz__ratio-label{ display:block; margin-top:5px; font-size:.7rem; letter-spacing:.04em; color:var(--muted); max-width:13ch; }
@media (max-width:480px){ .valviz__foot{ flex-direction:column; align-items:flex-start; } .valviz__ratio{ text-align:left; } .valviz__ratio-label{ max-width:none; } }

/* ============================================================
   Protection & Convenience — feature-page components (v=12)
   ============================================================ */

/* responsive card grid (protection stack 5, storm cards 4, reasons 3) */
.cardgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:16px; }
.cardgrid--3{ grid-template-columns:repeat(3,1fr); }
.cardgrid--4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:1024px){ .cardgrid--3,.cardgrid--4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .cardgrid--3,.cardgrid--4{ grid-template-columns:1fr; } }

/* big pull-stat */
.bigstat{ display:flex; flex-direction:column; gap:7px; margin:6px 0 4px; }
.bigstat__num{ font-family:var(--font-display); font-weight:500; font-size:clamp(2.7rem,6.5vw,4.4rem); line-height:.92; color:var(--gold-bright); letter-spacing:-.015em; }
.bigstat__label{ color:var(--text); font-size:1rem; line-height:1.4; max-width:34ch; }
.bigstat__sub{ color:var(--muted-2); font-size:.85rem; }
.savestat{ font-family:var(--font-display); color:var(--gold-bright); font-weight:500; }

/* ---- STORM SHIELD: navy program band ---- */
.section--storm{ position:relative; overflow:hidden; background:linear-gradient(180deg,#0c1830 0%,#0a1325 58%,var(--ink) 100%); }
.section--storm::before{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(85% 70% at 82% -8%, rgba(233,185,73,.10), transparent 60%); }
.storm__badge{ display:inline-flex; align-items:center; gap:9px; padding:7px 15px; border:1px solid rgba(233,185,73,.42); border-radius:999px; background:rgba(13,24,46,.55); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-bright); font-weight:700; }
.storm__badge svg{ width:15px; height:15px; fill:var(--gold); }
.storm__quote{ position:relative; font-family:var(--font-display); font-style:italic; font-weight:340; font-size:clamp(1.6rem,3.6vw,2.5rem); line-height:1.18; color:var(--cream); max-width:18ch; margin:0; }
.storm__quote cite{ display:block; font-style:normal; font-size:.86rem; letter-spacing:.05em; color:var(--gold); margin-top:16px; }
.scard{ background:rgba(255,255,255,.028); border-color:rgba(255,255,255,.1); }
.scard .acard__icon{ background:rgba(233,185,73,.14); border-color:rgba(233,185,73,.42); }
.callout--navy{ background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015)); border-color:rgba(255,255,255,.12); }

/* ---- stylized map graphic (ramps / flood zone) ---- */
.mapcard{ position:relative; border:1px solid var(--gold-line); border-radius:var(--radius-lg); overflow:hidden; background:linear-gradient(180deg,#0b1526,#0a0f1c); box-shadow:0 40px 80px -45px rgba(0,0,0,.85); }
.mapcard svg{ display:block; width:100%; height:auto; }
.mapcard__cap{ position:absolute; left:18px; bottom:14px; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); font-weight:700; }

/* ---- Concierge animated flow timeline ---- */
.flowwrap{ position:relative; margin-top:8px; }
.flow{ position:relative; display:grid; grid-template-columns:repeat(8,1fr); gap:14px; }
.flow::before{ content:""; position:absolute; left:6.25%; width:87.5%; top:34px; height:2px; background:var(--line); }
.flow::after{ content:""; position:absolute; left:6.25%; width:0; top:34px; height:2px; background:var(--gold-grad); box-shadow:0 0 12px rgba(233,185,73,.6); transition:width 2.4s var(--ease), height 2.4s var(--ease); }
.flow.in::after{ width:87.5%; }
.flow__step{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; }
.flow__node{ position:relative; z-index:1; width:68px; height:68px; border-radius:50%; display:grid; place-items:center; background:var(--ink-2); border:1px solid var(--gold-line); transition:border-color .45s var(--ease), box-shadow .45s var(--ease), transform .45s var(--ease); }
.flow__step.in .flow__node{ border-color:var(--gold); box-shadow:0 0 0 5px rgba(233,185,73,.07), 0 0 24px -4px rgba(233,185,73,.55); }
.flow__node svg{ width:28px; height:28px; fill:none; stroke:var(--gold); stroke-width:1.55; stroke-linecap:round; stroke-linejoin:round; }
.flow__n{ position:absolute; top:-7px; right:-7px; width:22px; height:22px; border-radius:50%; background:var(--gold-grad); color:#1a1206; font-size:.72rem; font-weight:700; display:grid; place-items:center; font-family:var(--font-display); }
.flow__t{ margin-top:14px; font-family:var(--font-display); font-weight:500; font-size:1rem; color:var(--cream); line-height:1.2; }
.flow__d{ margin-top:6px; font-size:.82rem; color:var(--muted); line-height:1.45; }
.flow__quote{ font-family:var(--font-display); font-style:italic; font-weight:340; font-size:clamp(1.3rem,2.7vw,1.75rem); color:var(--cream); max-width:30ch; margin:0 0 30px; }
@media (max-width:960px){
  .flow{ grid-template-columns:1fr; gap:0; }
  .flow::before{ left:26px; right:auto; width:2px; top:18px; bottom:18px; height:auto; }
  .flow::after{ left:26px; width:2px; top:18px; height:0; }
  .flow.in::after{ width:2px; height:calc(100% - 36px); }
  .flow__step{ flex-direction:row; align-items:flex-start; text-align:left; gap:18px; padding:12px 0; }
  .flow__node{ width:54px; height:54px; }
  .flow__node svg{ width:23px; height:23px; }
  .flow__txt{ padding-top:5px; }
  .flow__t,.flow__d{ margin-top:0; }
  .flow__d{ margin-top:5px; max-width:48ch; }
}

/* ---- Dockwa phone mockup ---- */
.phone{ position:relative; width:clamp(238px,82%,294px); margin-inline:auto; aspect-ratio:9/18.6; border-radius:40px; background:linear-gradient(155deg,#2a2a31,#101015); padding:11px; box-shadow:0 55px 95px -42px rgba(0,0,0,.92), inset 0 0 0 1px rgba(255,255,255,.06); }
.phone__screen{ position:relative; width:100%; height:100%; border-radius:29px; overflow:hidden; background:linear-gradient(180deg,#0e1828,#0a0f1c); display:flex; flex-direction:column; }
.phone__notch{ position:absolute; top:9px; left:50%; transform:translateX(-50%); width:36%; height:17px; border-radius:0 0 11px 11px; background:#101015; z-index:3; }
.phone__top{ padding:30px 16px 14px; border-bottom:1px solid rgba(255,255,255,.07); }
.phone__brand{ display:flex; align-items:center; gap:8px; }
.phone__brand svg{ width:20px; height:20px; }
.phone__brand b{ font-family:var(--font-display); color:var(--cream); font-size:.92rem; font-weight:500; }
.phone__brand small{ display:block; color:var(--gold); font-size:.6rem; letter-spacing:.13em; text-transform:uppercase; }
.phone__hero{ margin:14px 16px 0; padding:13px 14px; border-radius:12px; background:linear-gradient(135deg,rgba(233,185,73,.16),rgba(233,185,73,.03)); border:1px solid var(--gold-line); }
.phone__hero span{ font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); font-weight:700; }
.phone__hero b{ display:block; margin-top:3px; color:var(--cream); font-family:var(--font-display); font-size:1.04rem; }
.phone__rows{ padding:13px 16px; display:flex; flex-direction:column; gap:9px; }
.phone__row{ display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:12px; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.06); }
.phone__row svg{ width:17px; height:17px; flex:none; fill:none; stroke:var(--gold); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.phone__row span{ color:var(--text); font-size:.8rem; }
.phone__cta{ margin:auto 16px 18px; text-align:center; padding:11px; border-radius:12px; background:var(--gold-grad); color:#1a1206; font-weight:700; font-size:.82rem; }

/* ---- app-store badges ---- */
.appbadges{ display:flex; gap:12px; flex-wrap:wrap; margin-top:24px; }
.appbadge{ display:inline-flex; align-items:center; gap:10px; padding:9px 16px; border:1px solid var(--line); border-radius:12px; background:var(--panel); transition:border-color .3s, transform .3s; }
.appbadge:hover{ border-color:var(--gold-line); transform:translateY(-2px); }
.appbadge svg{ width:22px; height:22px; fill:var(--cream); flex:none; }
.appbadge small{ display:block; font-size:.6rem; color:var(--muted); letter-spacing:.04em; }
.appbadge b{ display:block; font-size:.92rem; font-weight:600; color:var(--cream); line-height:1.1; }

/* ---- feature lines (Dockwa right column) ---- */
.featlines{ list-style:none; display:flex; flex-direction:column; gap:20px; }
.featline{ display:flex; gap:15px; align-items:flex-start; }
.featline__ic{ flex:none; width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:var(--gold-soft); border:1px solid var(--gold-line); }
.featline__ic svg{ width:21px; height:21px; fill:none; stroke:var(--gold); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.featline h3{ font-family:var(--font-display); font-weight:500; font-size:1.12rem; color:var(--cream); margin-bottom:4px; }
.featline p{ color:var(--muted); font-size:.95rem; line-height:1.5; }

/* ---- protection storm-surge canvas ---- */
.mapcard__canvas{ display:block; width:100%; height:auto; }
/* ---- concierge flow energy pulse ---- */
.flow__step .flow__node{ transition:border-color .4s var(--ease), box-shadow .4s var(--ease), transform .4s var(--ease); }
.flow__pulse{ position:absolute; top:34px; left:6.25%; width:15px; height:15px; margin:-7.5px 0 0 -7.5px; border-radius:50%; pointer-events:none; opacity:0; z-index:2; background:radial-gradient(circle, #fff 0%, var(--gold-bright) 38%, rgba(233,185,73,0) 72%); box-shadow:0 0 20px 5px rgba(233,185,73,.7); transition:opacity .5s var(--ease); }
.flow.in .flow__pulse{ opacity:1; }
.flow__step.lit .flow__node{ border-color:var(--gold-bright); box-shadow:0 0 0 6px rgba(233,185,73,.12), 0 0 30px -2px rgba(233,185,73,.85); transform:translateY(-3px); }
.flow__step.lit .flow__n{ box-shadow:0 0 12px rgba(233,185,73,.8); }
@media (max-width:960px){ .flow__pulse{ top:18px; left:26px; } }
@media (prefers-reduced-motion:reduce){ .flow__pulse{ display:none; } }

/* ============================================================
   The Key Club — members' community page (v=15)
   ============================================================ */
.container--narrow{ max-width:900px; }

/* three-layer model — builds bottom-up on scroll */
.layers{ display:flex; flex-direction:column; gap:14px; }
.layer{ display:flex; align-items:center; gap:18px; padding:22px 24px; border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(180deg,var(--panel),var(--ink-3)); }
.layer__ic{ flex:none; width:46px; height:46px; border-radius:12px; display:grid; place-items:center; background:var(--gold-soft); border:1px solid var(--gold-line); }
.layer__ic svg{ width:23px; height:23px; fill:none; stroke:var(--gold); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.layer h3{ font-family:var(--font-display); font-weight:500; font-size:1.25rem; color:var(--cream); display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.layer p{ color:var(--muted); font-size:.98rem; margin-top:3px; line-height:1.45; }
.layer__tag{ font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:#1a1206; background:var(--gold-grad); padding:3px 9px; border-radius:100px; font-weight:700; }
.layer--crown{ border-color:var(--gold-line); background:linear-gradient(180deg,rgba(233,185,73,.10),rgba(233,185,73,.02)); box-shadow:0 24px 60px -34px rgba(233,185,73,.5); }
.layer--crown .layer__ic{ background:var(--gold-grad); border-color:transparent; }
.layer--crown .layer__ic svg{ stroke:#1a1206; }
.layer--crown h3{ color:var(--gold-bright); }
.layers .layer{ opacity:0; transform:translateY(22px) scale(.985); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.layers.in .layer{ opacity:1; transform:none; }
.layers.in .layer:nth-child(1){ transition-delay:.05s; }
.layers.in .layer:nth-child(2){ transition-delay:.24s; }
.layers.in .layer:nth-child(3){ transition-delay:.44s; }

/* big pull quote (the difference) */
.bigquote{ margin:clamp(34px,5vw,52px) 0 0; font-family:var(--font-display); font-weight:330; font-style:italic; font-size:clamp(1.5rem,3.6vw,2.6rem); line-height:1.22; color:var(--cream); max-width:24ch; }
.bigquote em{ font-style:italic; color:var(--gold-bright); }

/* membership cards */
.memcards{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.memcard{ padding:clamp(28px,3vw,38px); border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--panel); display:flex; flex-direction:column; transition:transform .4s var(--ease), border-color .4s, background .4s; }
.memcard:hover{ transform:translateY(-5px); border-color:var(--gold-line); background:var(--panel-2); }
.memcard__k{ font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); font-weight:700; margin-bottom:14px; }
.memcard h3{ font-family:var(--font-display); font-weight:500; font-size:1.45rem; color:var(--cream); margin-bottom:12px; line-height:1.12; }
.memcard p{ color:var(--muted); font-size:1rem; line-height:1.6; }
.memcard--feature{ border-color:var(--gold-line); background:linear-gradient(180deg,rgba(233,185,73,.07),var(--panel)); }
@media (max-width:820px){ .memcards{ grid-template-columns:1fr; } }

/* founding section */
.section--founding{ position:relative; overflow:hidden; background:linear-gradient(180deg,var(--ink-2),var(--ink)); }
.section--founding::before{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(70% 60% at 80% 0%, rgba(233,185,73,.10), transparent 62%); }
.founding__list{ list-style:none; display:grid; gap:13px; margin:24px 0 0; }
.founding__list li{ display:flex; align-items:flex-start; gap:14px; color:var(--text); font-size:1.04rem; line-height:1.45; }
.ck{ flex:none; width:24px; height:24px; border-radius:6px; background:var(--gold-soft); border:1px solid var(--gold-line); display:grid; place-items:center; margin-top:1px; }
.ck svg{ width:14px; height:14px; fill:none; stroke:var(--gold-bright); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:26; stroke-dashoffset:0; }
@media (prefers-reduced-motion:reduce){ .ck svg{ stroke-dashoffset:0; } }

/* founding burgee (waving club flag) */
.burgee-stage{ display:flex; justify-content:center; align-items:center; min-height:clamp(320px,40vw,440px); perspective:900px; }
.burgee{ position:relative; height:clamp(300px,38vw,420px); width:clamp(214px,28vw,304px); }
.burgee__pole{ position:absolute; left:0; top:0; width:4px; height:100%; border-radius:3px; background:linear-gradient(180deg,#3a3a42,#17171c); box-shadow:0 0 0 1px rgba(255,255,255,.04); }
.burgee__pole::before{ content:""; position:absolute; left:-3px; top:-8px; width:10px; height:10px; border-radius:50%; background:var(--gold-grad); box-shadow:0 0 10px rgba(233,185,73,.6); }
.burgee__riser{ position:absolute; left:4px; top:0; will-change:transform; }
.burgee__flag{ position:relative; width:clamp(210px,26vw,300px); aspect-ratio:5/3; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:11px; padding-left:clamp(18px,2.4vw,30px); background:linear-gradient(135deg,#11151f,#0c0f17); border:1px solid var(--gold-line); border-right:none; clip-path:polygon(0 0, 100% 0, 78% 50%, 100% 100%, 0 100%); box-shadow:0 30px 70px -34px rgba(0,0,0,.85); transform-origin:left center; animation:burgeeWave 5.5s ease-in-out infinite; }
.burgee__flag::before{ content:""; position:absolute; inset:0; background:radial-gradient(60% 80% at 30% 30%, rgba(233,185,73,.14), transparent 70%); clip-path:inherit; }
.burgee__mark{ width:56%; max-width:160px; height:auto; position:relative; }
.burgee__label{ position:relative; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-bright); font-weight:700; }
@keyframes burgeeWave{ 0%,100%{ transform:rotateY(0deg) skewY(0deg); } 35%{ transform:rotateY(-12deg) skewY(1.2deg); } 65%{ transform:rotateY(9deg) skewY(-1deg); } }

/* render placeholder slot (drop renderings in later) */
.render-slot{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; min-height:clamp(260px,32vw,360px); border:1px dashed var(--gold-line); border-radius:var(--radius-lg); background:linear-gradient(180deg,var(--panel-2),var(--ink-3)); overflow:hidden; }
.render-slot::before{ content:""; position:absolute; inset:0; background:radial-gradient(80% 80% at 50% 30%, rgba(233,185,73,.06), transparent 70%); }
.render-slot__tag{ position:absolute; top:14px; left:16px; font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); font-weight:700; opacity:.8; }
.render-slot__mark{ width:clamp(120px,20vw,180px); height:auto; opacity:.5; }
.render-slot__cap{ position:relative; font-family:var(--font-display); color:var(--cream); font-size:1.1rem; }

/* Clubhouse interior renders (photo variant of the render slot) */
.split--triple{ grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.2vw,26px); }
.render-slot--photo{ min-height:0; border-style:solid; background:var(--ink-3); }
.render-slot--photo::before{ content:none; }
.render-slot--photo::after{ content:""; position:absolute; inset:auto 0 0 0; height:46%; z-index:1; background:linear-gradient(180deg, transparent, rgba(5,6,9,.82)); pointer-events:none; }
.render-slot__img{ display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; transition:transform .8s cubic-bezier(.22,.61,.36,1); }
.render-slot--photo:hover .render-slot__img{ transform:scale(1.045); }
.render-slot--photo .render-slot__tag{ z-index:2; text-shadow:0 1px 8px rgba(0,0,0,.6); }
.render-slot--photo .render-slot__cap{ position:absolute; left:16px; right:16px; bottom:12px; z-index:2; font-size:1.02rem; text-shadow:0 1px 10px rgba(0,0,0,.75); }
@media (max-width:900px){ .split--triple{ grid-template-columns:1fr; } .split--triple .render-slot--photo{ width:100%; max-width:560px; margin-inline:auto; } }
@media (prefers-reduced-motion:reduce){ .render-slot__img{ transition:none; } .render-slot--photo:hover .render-slot__img{ transform:none; } }

/* FAQ (native details accordion) */
.faqx{ display:flex; flex-direction:column; border-top:1px solid var(--line); }
.faqx__item{ border-bottom:1px solid var(--line); }
.faqx__item summary{ list-style:none; cursor:pointer; padding:22px 44px 22px 4px; position:relative; font-family:var(--font-display); font-weight:500; font-size:clamp(1.1rem,2vw,1.32rem); color:var(--cream); transition:color .3s; }
.faqx__item summary::-webkit-details-marker{ display:none; }
.faqx__item summary::after{ content:""; position:absolute; right:8px; top:50%; width:11px; height:11px; margin-top:-7px; border-right:2px solid var(--gold); border-bottom:2px solid var(--gold); transform:rotate(45deg); transition:transform .35s var(--ease); }
.faqx__item[open] summary::after{ transform:rotate(-135deg); margin-top:-3px; }
.faqx__item summary:hover{ color:var(--gold-bright); }
.faqx__item p{ padding:0 44px 24px 4px; color:var(--muted); font-size:1.06rem; line-height:1.7; max-width:70ch; }
@media (prefers-reduced-motion:reduce){ .layers .layer{ opacity:1; transform:none; } .burgee__flag{ animation:none; } }

/* homepage: featured Key Club route card */
.route--feature{ grid-column:1 / -1; flex-direction:row; align-items:center; gap:24px; border-color:var(--gold-line); background:linear-gradient(110deg,rgba(233,185,73,.08),var(--panel)); }
.route--feature .route__body{ flex:1; }
.route--feature h3{ color:var(--gold-bright); }
@media (max-width:600px){ .route--feature{ flex-direction:column; align-items:flex-start; } }

/* map: GKBH logo pin overlay (canvas storm map / svg ramp map) */
.mapcard{ position:relative; }
.mapcard__logo{ position:absolute; width:clamp(58px,8%,84px); height:auto; transform:translate(-50%,-115%); pointer-events:none; filter:drop-shadow(0 4px 10px rgba(0,0,0,.6)); z-index:2; }

/* =========================================================
   STORAGE SAVINGS CALCULATOR (home)   (v=18)
   ========================================================= */
.calc{ display:grid; grid-template-columns:1.02fr 1.18fr; gap:clamp(18px,2.4vw,28px); align-items:stretch; }
.calc__panel{ background:linear-gradient(180deg,var(--panel),var(--ink-3)); border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(26px,3.2vw,40px); }
.calc__results{ position:relative; overflow:hidden; box-shadow:0 50px 90px -50px rgba(0,0,0,.9); }
.calc__results::before{ content:""; position:absolute; inset:0; background:radial-gradient(120% 80% at 100% 0,var(--gold-soft),transparent 55%); pointer-events:none; }

/* ---- controls: slider ---- */
.calc__field{ margin-bottom:28px; }
.calc__field:last-of-type{ margin-bottom:22px; }
.calc__field-top{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin-bottom:14px; }
.calc__field-top label,
.calc__field-label{ display:block; font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:500; }
.calc__field-label{ margin-bottom:12px; }
.calc__field-label .opt{ display:block; margin-top:5px; text-transform:none; letter-spacing:.01em; color:var(--muted-2); font-weight:400; font-size:.78rem; }
.calc__readout{ font-family:var(--font-display); font-weight:500; font-size:clamp(1.5rem,3vw,2rem); color:var(--gold-bright); line-height:1; letter-spacing:-.01em; }

.calc__range{ -webkit-appearance:none; appearance:none; width:100%; height:4px; border-radius:100px; background:var(--line); outline-offset:6px; cursor:pointer; }
.calc__range::-webkit-slider-runnable-track{ height:4px; border-radius:100px; background:linear-gradient(90deg, var(--gold) 0%, var(--gold) var(--fill,40%), var(--panel-3) var(--fill,40%), var(--panel-3) 100%); }
.calc__range::-moz-range-track{ height:4px; border-radius:100px; background:var(--panel-3); }
.calc__range::-moz-range-progress{ height:4px; border-radius:100px; background:var(--gold); }
.calc__range::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:24px; height:24px; margin-top:-10px; border-radius:50%; background:var(--gold-grad); border:2px solid var(--ink); box-shadow:0 4px 14px -3px rgba(233,185,73,.7), inset 0 1px 0 rgba(255,255,255,.5); transition:transform .25s var(--ease); }
.calc__range::-moz-range-thumb{ width:22px; height:22px; border-radius:50%; background:var(--gold); border:2px solid var(--ink); box-shadow:0 4px 14px -3px rgba(233,185,73,.7); }
.calc__range:hover::-webkit-slider-thumb{ transform:scale(1.1); }
.calc__range:active::-webkit-slider-thumb{ transform:scale(.96); }
.calc__range:focus-visible{ outline:2px solid var(--gold); outline-offset:6px; }
.calc__scale{ display:flex; justify-content:space-between; margin-top:11px; font-size:.74rem; color:var(--muted-2); letter-spacing:.04em; }

/* ---- controls: money input ---- */
.calc__money{ display:flex; align-items:center; background:var(--ink); border:1px solid var(--line); border-radius:12px; padding:0 16px; transition:border-color .3s, box-shadow .3s, background .3s; }
.calc__money:focus-within{ border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-soft); background:var(--ink-2); }
.calc__money-sign{ color:var(--gold); font-size:1.05rem; font-weight:500; flex:none; }
.calc__money-suf{ color:var(--muted-2); font-size:.92rem; flex:none; }
.calc__input{ flex:1; min-width:0; width:100%; background:transparent; border:none; outline:none; color:var(--cream); font-family:inherit; font-size:1rem; padding:14px 10px; }
.calc__input::placeholder{ color:var(--muted-2); font-size:.92rem; }
.calc__input::-webkit-outer-spin-button,
.calc__input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.calc__input[type=number]{ -moz-appearance:textfield; }
.calc__hint{ margin-top:10px; font-size:.82rem; color:var(--muted-2); line-height:1.5; }

/* ---- controls: assumptions list ---- */
.calc__assume{ list-style:none; display:flex; flex-direction:column; gap:11px; margin-top:24px; padding-top:22px; border-top:1px solid var(--line); }
.calc__assume li{ position:relative; padding-left:28px; color:var(--text); font-size:.95rem; line-height:1.45; }
.calc__assume li::before{ content:""; position:absolute; left:0; top:1px; width:18px; height:18px; border-radius:6px; background:var(--gold-soft); border:1px solid var(--gold-line); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E9B949' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:center; background-size:11px; }

/* ---- results: headline savings ---- */
.calc__resgrid{ position:relative; display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2vw,28px); }
.calc__res{ position:relative; padding-right:14px; }
.calc__res + .calc__res{ padding-left:clamp(16px,2vw,28px); border-left:1px solid var(--line); }
.calc__res-k{ display:block; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); font-weight:600; margin-bottom:14px; }
.calc__res-num{ display:flex; align-items:baseline; gap:1px; font-family:var(--font-display); color:var(--gold-bright); line-height:.95; letter-spacing:-.02em; }
.calc__pre{ font-size:clamp(1.3rem,2.6vw,1.9rem); font-weight:400; }
.calc__val{ font-size:clamp(2.4rem,6vw,3.7rem); font-weight:400; font-variant-numeric:tabular-nums; }
.calc__suf{ font-size:clamp(1rem,2vw,1.3rem); font-weight:400; color:var(--gold); margin-left:4px; }
.calc__res-sub{ display:block; margin-top:10px; font-size:.92rem; color:var(--muted); }
.calc__res-sub span{ color:var(--text); font-weight:600; font-variant-numeric:tabular-nums; }

/* ---- results: comparison bars ---- */
.calc__bars{ position:relative; display:flex; flex-direction:column; gap:14px; margin-top:clamp(26px,3vw,34px); padding-top:clamp(26px,3vw,34px); border-top:1px solid var(--line); }
.calc__bar-row{ display:grid; grid-template-columns:84px 1fr auto; align-items:center; gap:14px; }
.calc__bar-label{ font-size:.84rem; color:var(--muted); white-space:nowrap; }
.calc__bar-row--ours .calc__bar-label{ color:var(--gold-bright); font-weight:600; }
.calc__bar-track{ position:relative; height:10px; border-radius:100px; background:var(--ink); border:1px solid var(--line-2); overflow:hidden; }
.calc__bar-fill{ position:absolute; inset:0 auto 0 0; width:0; border-radius:100px; transition:width .9s var(--ease); }
.calc__bar-fill--slip{ background:linear-gradient(90deg,#5b6472,#3c424d); }
.calc__bar-fill--lot{ background:linear-gradient(90deg,#7a6a4a,#564a32); }
.calc__bar-fill--ours{ background:var(--gold-grad); box-shadow:0 0 14px -2px rgba(233,185,73,.6); }
.calc__bar-cost{ font-size:.86rem; color:var(--text); font-variant-numeric:tabular-nums; white-space:nowrap; min-width:64px; text-align:right; }
.calc__bar-row--ours .calc__bar-cost{ color:var(--gold-bright); font-weight:600; }

/* ---- results: cta + disclaimer ---- */
.calc__cta{ display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-top:clamp(26px,3vw,34px); }
.calc__why{ font-size:.9rem; font-weight:500; color:var(--muted); letter-spacing:.01em; text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--line); transition:color .3s, text-decoration-color .3s; }
.calc__why:hover{ color:var(--gold); text-decoration-color:var(--gold-line); }
.calc__disclaimer{ margin-top:18px; font-size:.78rem; line-height:1.55; color:var(--muted-2); letter-spacing:.01em; }

@media (max-width:900px){
  .calc{ grid-template-columns:1fr; }
}
@media (max-width:480px){
  .calc__resgrid{ grid-template-columns:1fr; gap:24px; }
  .calc__res + .calc__res{ padding-left:0; border-left:none; padding-top:24px; border-top:1px solid var(--line); }
  .calc__bar-row{ grid-template-columns:70px 1fr auto; gap:10px; }
}
@media (prefers-reduced-motion:reduce){
  .calc__bar-fill{ transition:none; }
}

/* ============================================================
   STORAGE FORMAT COMPARISON (indoor vs wet slip vs outdoor)
   Real <table>; Gold Key column elevated. Stacks on mobile.   (v=18)
   ============================================================ */
.section--compare{ background:var(--ink-2); }

.cmp{ margin-top:clamp(8px,2vw,18px); }

/* horizontal scroll only as a last resort on very narrow tablets;
   the table never forces page overflow, and the region is focusable */
.cmp__scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--radius-lg); }
.cmp__scroll:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

.cmp__table{ width:100%; min-width:680px; border-collapse:separate; border-spacing:0; }

/* visible caption: reads as a quiet sub-label, not a heading */
.cmp__caption{
  caption-side:top; text-align:left; color:var(--muted);
  font-size:.86rem; line-height:1.5; margin-bottom:18px; max-width:74ch;
}

/* ---- column headers ---- */
.cmp__corner{ background:transparent; border:none; width:23%; }
.cmp__col{
  vertical-align:bottom; text-align:left;
  padding:20px 22px; width:25.6%;
  background:var(--panel); border-bottom:1px solid var(--line);
  border-left:1px solid var(--line-2);
}
.cmp__coltag{
  display:block; font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); font-weight:600; margin-bottom:8px;
}
.cmp__colname{
  display:block; font-family:var(--font-display); font-weight:500;
  font-size:clamp(1.1rem,1.7vw,1.4rem); color:var(--cream); line-height:1.12;
}

/* ---- the elevated Gold Key column ---- */
.cmp__col--gold{
  background:linear-gradient(180deg,rgba(233,185,73,.14),rgba(233,185,73,.04));
  border-bottom:1px solid var(--gold);
  box-shadow:0 -1px 0 var(--gold-line) inset;
}
.cmp__col--gold .cmp__coltag{ color:var(--gold); }
.cmp__col--gold .cmp__colname{ color:var(--gold-bright); }

/* ---- row labels ---- */
.cmp__row{
  text-align:left; vertical-align:top; width:23%;
  padding:20px 24px 20px 4px;
  font-family:var(--font-display); font-weight:500; font-size:1.04rem;
  color:var(--text); line-height:1.3;
  border-bottom:1px solid var(--line);
}

/* ---- body cells ---- */
.cmp__cell{
  vertical-align:top; padding:20px 22px;
  color:var(--muted); font-size:.96rem; line-height:1.5;
  border-bottom:1px solid var(--line);
  border-left:1px solid var(--line-2);
}
.cmp__table tbody tr:last-child .cmp__cell,
.cmp__table tbody tr:last-child .cmp__row{ border-bottom:none; }

.cmp__cell--gold{
  background:rgba(233,185,73,.05);
  color:var(--text);
  border-left:1px solid var(--gold-line);
  border-right:1px solid var(--gold-line);
}
.cmp__table tbody tr:last-child .cmp__cell--gold{ border-bottom:1px solid var(--gold-line); border-radius:0 0 var(--radius) var(--radius); }
.cmp__table tbody tr:first-child .cmp__cell--gold{ box-shadow:0 -1px 0 var(--gold) inset; }

/* ---- status marks (token-built shapes, no icon font) ---- */
.cmp__mark{
  display:inline-block; width:16px; height:16px; border-radius:5px;
  margin-right:10px; vertical-align:-2px; position:relative; flex:none;
  border:1px solid var(--line);
}
.cmp__mark--yes{
  background:var(--gold-soft); border-color:var(--gold-line);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E9B949' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center; background-size:11px;
}
.cmp__mark--no{
  background:rgba(255,255,255,.03); border-color:var(--line);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238E887D' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center; background-size:10px;
}
.cmp__mark--part{
  background:rgba(255,255,255,.03); border-color:var(--line);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='none' fill='%23ABA59A'%3E%3Crect x='5' y='11' width='14' height='2.4' rx='1.2'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center; background-size:12px;
}

/* ---- legend ---- */
.cmp__legend{
  display:flex; flex-wrap:wrap; gap:14px 26px; margin-top:20px;
  font-size:.84rem; color:var(--muted);
}
.cmp__lk{ display:inline-flex; align-items:center; }

/* ============================================================
   COMPARISON - responsive stack
   Below 760px the table reflows into stacked groups.
   ============================================================ */
@media (max-width:760px){
  .cmp__scroll{ overflow:visible; }
  .cmp__table,
  .cmp__table tbody,
  .cmp__table tbody tr,
  .cmp__row,
  .cmp__cell{ display:block; width:auto; }
  .cmp__table{ min-width:0; }

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

  .cmp__table tbody tr{
    border:1px solid var(--line); border-radius:var(--radius);
    background:var(--panel); margin-bottom:16px; overflow:hidden;
  }
  .cmp__row{
    padding:16px 18px; border-bottom:1px solid var(--line);
    background:var(--ink-3); font-size:1.08rem; color:var(--cream);
  }
  .cmp__cell{
    padding:14px 18px 14px 46px; position:relative;
    border-bottom:1px solid var(--line-2); border-left:none;
    font-size:.95rem;
  }
  .cmp__table tbody tr .cmp__cell:last-child{ border-bottom:none; }

  .cmp__cell::before{
    content:attr(data-col);
    display:block; margin:0 0 4px -28px;
    font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
    color:var(--muted); font-weight:600;
  }
  .cmp__mark{ position:absolute; left:18px; top:34px; margin:0; }

  .cmp__cell--gold{
    background:rgba(233,185,73,.06);
    border-left:2px solid var(--gold); border-right:none;
  }
  .cmp__cell--gold::before{ color:var(--gold); }
  .cmp__table tbody tr:last-child .cmp__cell--gold{ border-radius:0; }
}

/* ===== Key Club membership cards — premium pass (v=19) ===== */
.memcard{ position:relative; overflow:hidden; transition:transform .45s var(--ease), border-color .4s, box-shadow .45s; }
.memcard:hover{ transform:translateY(-7px); border-color:var(--gold-line); box-shadow:0 36px 70px -34px rgba(0,0,0,.8); }
.memcard__glow{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0; transition:opacity .4s; background:radial-gradient(240px 220px at var(--mx,50%) var(--my,0%), rgba(233,185,73,.16), transparent 62%); }
.memcard:hover .memcard__glow{ opacity:1; }
.memcard__k, .memcard h3, .memcard p, .memcard__rank, .memcard__badge{ position:relative; z-index:1; }
.memcard__rank{ position:absolute; top:16px; right:20px; font-family:var(--font-display); font-size:2.3rem; font-weight:340; line-height:1; color:var(--gold-line); letter-spacing:.02em; transition:color .4s, transform .4s; }
.memcard:hover .memcard__rank{ color:var(--gold); transform:translateY(-2px); }
.memcard--feature .memcard__rank{ color:var(--gold-bright); }
.memcard__badge{ position:absolute; top:0; left:0; font-size:.6rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#1a1206; background:var(--gold-grad); padding:5px 12px; border-bottom-right-radius:12px; }
@media (prefers-reduced-motion:reduce){ .memcard:hover{ transform:none; } .memcard__glow{ display:none; } }

/* ===== members-only tech showcase (facility preview) (v=20) ===== */
.facshow{ max-width:1000px; margin:0 auto; }
.facshow .fac__stage{ aspect-ratio:16/9; min-height:340px; }
.facshow__note{ margin-top:16px; text-align:center; font-size:.82rem; color:var(--muted-2); max-width:62ch; margin-inline:auto; }
.fac__stage{ position:relative; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line); background:radial-gradient(120% 100% at 50% 0%, #14151b, #07070a 72%); box-shadow:inset 0 0 0 1px rgba(233,185,73,.08); }
.fac__stage::after{ content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit; box-shadow:inset 0 0 130px 12px rgba(0,0,0,.5); z-index:5; }
#facilityCanvas{ display:block; width:100%; height:100%; }
.fac__marker{ position:absolute; transform:translate(-50%,-100%); pointer-events:none; display:flex; flex-direction:column; align-items:center; gap:5px; opacity:0; }
.fac__marker-label{ font-size:.64rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#1a1206; background:var(--gold-grad); padding:4px 11px; border-radius:100px; white-space:nowrap; box-shadow:0 6px 16px rgba(0,0,0,.55); }
.fac__marker-dot{ width:10px; height:10px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 4px rgba(233,185,73,.22), 0 0 12px var(--gold); }
.fac__loading{ position:absolute; inset:0; display:grid; place-items:center; color:var(--muted); font-size:.85rem; }
.fac__hud{ position:absolute; left:14px; bottom:12px; display:flex; flex-direction:column; gap:2px; }
.fac__hud-tag{ font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); font-weight:700; }
.fac__hud-loc{ color:var(--cream); font-size:.82rem; }
.fac--unsupported .fac__stage{ display:none; }

/* fix: aspect-ratio + min-height derived width from height on mobile; pin the width */
.fac__stage{ width:100%; }

/* CC-BY model credit on the Key Club facility showcase */
.fac__hud-credit{display:block;margin-top:2px;font-size:10px;color:var(--muted-2)}
.fac__hud-credit a{color:var(--muted);text-decoration:underline}

/* =========================================================
   VIDEO TOUR — poster tile + cinematic <dialog> lightbox
   ========================================================= */
.vtour{
  position:relative; display:block; width:100%; aspect-ratio:16/9;
  border-radius:var(--radius-lg); overflow:hidden; cursor:pointer;
  border:1px solid var(--gold-line); background:var(--ink-2);
  box-shadow:0 44px 90px -44px rgba(0,0,0,.85), inset 0 0 0 1px rgba(233,185,73,.06);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s;
}
.vtour:hover{ transform:translateY(-3px); border-color:var(--gold); box-shadow:0 54px 110px -44px rgba(0,0,0,.9); }
.vtour:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.vtour__poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.vtour:hover .vtour__poster{ transform:scale(1.045); }
.vtour__veil{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,11,.12) 0%, rgba(10,10,11,0) 38%, rgba(10,10,11,.5) 72%, rgba(10,10,11,.86) 100%); }
.vtour__play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:clamp(62px,7.5vw,88px); height:clamp(62px,7.5vw,88px); border-radius:50%;
  display:grid; place-items:center; background:rgba(10,10,11,.5);
  border:1.5px solid var(--gold-line); backdrop-filter:blur(4px);
  transition:transform .45s var(--ease), background .4s, border-color .4s;
}
.vtour__play::before{ content:""; position:absolute; inset:-9px; border-radius:50%; border:1px solid rgba(233,185,73,.4); animation:vtourPulse 2.8s ease-out infinite; }
@keyframes vtourPulse{ 0%{ transform:scale(.92); opacity:.7; } 70%{ opacity:0; } 100%{ transform:scale(1.4); opacity:0; } }
.vtour__play svg{ width:34%; height:34%; fill:var(--gold-bright); margin-left:5%; }
.vtour:hover .vtour__play{ transform:translate(-50%,-50%) scale(1.08); background:rgba(10,10,11,.68); border-color:var(--gold); }
.vtour__meta{ position:absolute; left:0; right:0; bottom:0; padding:clamp(18px,3vw,32px); display:flex; flex-direction:column; gap:7px; text-align:left; }
.vtour__k{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); font-weight:600; }
.vtour__title{ font-family:var(--font-display); font-weight:400; font-size:clamp(1.2rem,2.6vw,1.75rem); color:var(--cream); line-height:1.12; }
.vtour__sub{ font-size:.9rem; color:var(--text); max-width:52ch; }
@media (prefers-reduced-motion:reduce){ .vtour__play::before{ animation:none; } }

.modal--video{ max-width:min(1120px,94vw); width:min(1120px,94vw); }
.modal__video-wrap{
  position:relative; width:100%; aspect-ratio:16/9; max-height:86vh;
  border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--gold-line);
  background:#000; box-shadow:0 50px 100px -30px rgba(0,0,0,.9);
}
.modal--video[open] .modal__video-wrap{ animation:modalIn .35s var(--ease); }
.modal__video{ position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:contain; background:#000; }
.modal--video .modal__close{ top:12px; right:12px; z-index:6; background:rgba(10,10,11,.62); backdrop-filter:blur(5px); }