/* ============================================================
   Hive design system — shared across all pages.
   Extracted from the home page; sub-page components at the end.
   ============================================================ */

/* ============ Reset & root ============ */
*,*::before,*::after{box-sizing:border-box;margin:0}
img{display:block;max-width:100%}
button{cursor:pointer;font-family:inherit;color:inherit}
a{color:inherit}
ul,ol{list-style:none;padding:0}
input,textarea{font-family:inherit}
:focus-visible{outline:2px solid var(--brand-light);outline-offset:2px}
[hidden]{display:none!important}

:root{
  /* ---- Fonts: change the whole site's typeface here ---- */
  --font-sans:"Onest",system-ui,sans-serif;

  /* ---- Type scale: change global text sizes here ---- */
  --text-2xs:0.65rem;  --text-xs:0.75rem;   --text-sm:0.875rem;
  --text-base:1rem;    --text-lg:1.125rem;  --text-xl:1.25rem;
  --text-2xl:1.5rem;   --text-3xl:1.875rem; --text-4xl:2.25rem;
  --text-5xl:3rem;     --text-6xl:3.75rem;  --text-7xl:4.5rem;
  --text-hero:12.5vw;  --text-ghost:8.2vw;

  /* ---- Colors: change the whole palette here ---- */
  --background:#ffffff;  --foreground:#0a0a0a;
  --brand:#2563c9;       --brand-deep:#0a091a;
  --brand-deep-rgb:10, 9, 26; /* --brand-deep as R,G,B for rgba() overlays */
  --brand-light:#5790e6; --accent-teal:#0b6e97;
  --surface:#f4f4f4;     --surface-card:#ffffff;
  --ink:#0a0a0a;         --ink-soft:#717784;
  --ghost:#d7dae1;       --hairline:#e6e8ec;
  --on-brand:#ffffff;
  --brand-yellow:#e7de12;
  --radius-card:1.5rem;  --radius-card-lg:2rem; --radius-pill:62.5rem;
  --ease-expo:cubic-bezier(0.16,1,0.3,1);
  --ease-quart:cubic-bezier(0.25,1,0.5,1);
  --ease-inout-cubic:cubic-bezier(0.645,0.045,0.355,1);
}

/* Adaptive rem grid — design base 1920, FONT_BASE 16 */
html{font-size:16px}
@media (max-width:1920px){ html{font-size:0.833333vw} }
@media (max-width:1440px){ html{font-size:1.111111vw} }
@media (max-width:1024px){ html{font-size:1.5625vw} }
@media (max-width:640px) { html{font-size:4.444444vw} }

html.locked{position:relative;overflow:hidden;height:100%}

body{
  min-height:100vh;
  background:var(--background);
  color:var(--foreground);
  font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;
}

main{width:100%;overflow-x:clip;padding:0.5rem}
@media (min-width:640px){ main{padding:0.75rem} }

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

/* ============ Reveal primitives ============ */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:0.14em;margin-bottom:-0.14em}
.wi{display:inline-block;transform:translateY(115%);opacity:0;will-change:transform,opacity}
.stacked .line{display:block;overflow:hidden;padding-bottom:0.14em;margin-bottom:-0.14em}
.stacked .line-inner{display:block;transform:translateY(115%);will-change:transform}
.fw{display:inline-block;transform:translateY(18px);opacity:0;will-change:transform,opacity}

/* ============ Shared components ============ */
.eyebrow{display:inline-flex;align-items:center;gap:0.5rem;font-size:var(--text-xs);font-weight:500;text-transform:uppercase;letter-spacing:0.22em;color:var(--ink-soft)}
.eyebrow .dot{width:0.375rem;height:0.375rem;border-radius:var(--radius-pill);background:var(--brand)}
.eyebrow-light{color:rgba(255,255,255,0.7)}
.eyebrow-light .dot{background:var(--brand-light)}
.eyebrow a{color:inherit;text-decoration:none}
.eyebrow a:hover{color:var(--ink)}
.eyebrow-light a:hover{color:#fff}
.crumb-sep{opacity:0.5}

.pill{display:inline-flex;align-items:center;gap:0.5rem;border:0;border-radius:var(--radius-pill);padding:0.875rem 1.75rem;font-size:var(--text-sm);font-weight:500;text-transform:uppercase;letter-spacing:0.08em;text-decoration:none;transition:background-color .25s ease,color .25s ease}
.pill svg{width:1rem;height:1rem}
.pill-light{background:#fff;color:var(--brand-deep)}
.pill-light:hover{background:var(--brand-light);color:#fff}
.pill-solid{background:var(--ink);color:#fff}
.pill-solid:hover{background:var(--brand-deep)}
.pill-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,0.35)}
.pill-ghost:hover{background:rgba(255,255,255,0.15)}
.pill-outline{background:transparent;color:var(--ink);border:1px solid var(--hairline)}
.pill-outline:hover{border-color:var(--ink)}

.arrow-btn{width:3rem;height:3rem;border-radius:var(--radius-pill);display:grid;place-items:center;background:transparent;transition:background-color .25s ease,border-color .25s ease}
@media (min-width:640px){ .arrow-btn{width:3.5rem;height:3.5rem} }
.arrow-btn svg{width:1.25rem;height:1.25rem}
.arrow-outline{border:1px solid var(--hairline);color:var(--ink)}
.arrow-outline:hover{border-color:var(--ink)}
.arrow-solid{border:1px solid var(--ink);background:var(--ink);color:#fff}
.arrow-solid:hover{background:var(--brand-deep);border-color:var(--brand-deep)}
.flip{display:grid;transform:scaleX(-1)}

.dots{display:flex;gap:0.5rem}
.dots button{padding:0.375rem;background:none;border:0;display:grid;place-items:center}
.dots .pip{display:block;height:0.375rem;width:0.375rem;border-radius:var(--radius-pill);transition:width .3s ease,background-color .3s ease}
.dots-dark .pip{background:var(--ghost)}
.dots-dark button[aria-current] .pip{width:1.25rem;background:var(--ink)}
.dots-light .pip{background:rgba(255,255,255,0.4)}
.dots-light button[aria-current] .pip{width:1.25rem;background:#fff}

.glass{border:1px solid rgba(255,255,255,0.15);background:rgba(255,255,255,0.10);border-radius:var(--radius-card);box-shadow:0 20px 40px -12px rgba(var(--brand-deep-rgb),0.2);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:0.75rem}

.glass-cap{position:absolute;left:0.75rem;right:0.75rem;bottom:0.75rem;border-radius:0.75rem;color:#fff;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:0.5rem 0.75rem}

.title-xl{font-size:var(--text-5xl);font-weight:500;line-height:0.95;letter-spacing:-0.02em}

/* ============ Loader ============ */
/* Splash visuals are pure CSS so they play on every page the instant the curtain paints. */
#loader{position:fixed;inset:0;z-index:200;background:var(--brand-deep);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem}
.loader-mark{display:flex;align-items:center;gap:0.75rem;font-size:var(--text-2xl);font-weight:500;text-transform:uppercase;letter-spacing:0.2em;opacity:0;transform:translateY(16px);animation:loaderMarkIn 700ms var(--ease-expo) 80ms forwards}
.loader-mark svg{width:1.75rem;height:1.75rem}
.loader-track{width:10rem;height:1px;border-radius:var(--radius-pill);background:rgba(255,255,255,0.2);overflow:hidden}
.loader-fill{height:100%;width:100%;background:#fff;transform:scaleX(0);transform-origin:left;animation:loaderFill 1280ms var(--ease-inout-cubic) 120ms forwards}
@keyframes loaderMarkIn{to{opacity:1;transform:translateY(0)}}
@keyframes loaderFill{to{transform:scaleX(1)}}
@media (prefers-reduced-motion: reduce){
  .loader-mark{animation-duration:1ms;animation-delay:0ms}
  .loader-fill{animation-duration:1ms;animation-delay:0ms}
}

/* ============ Header ============ */
.site-header{display:flex;align-items:center;padding:1.5rem 1.5rem 0;font-size:var(--text-xs);color:#fff}
@media (min-width:640px){ .site-header{padding:2rem 2.5rem 0} }
.h-left{display:none;flex:1;gap:2rem;align-items:center}
@media (min-width:1024px){ .h-left{display:flex} }
.h-left a,.h-navlink{background:none;border:0;padding:0;font-size:var(--text-xs);color:rgba(255,255,255,0.9);text-decoration:none}
.h-left a:hover,.h-navlink:hover{color:#fff}
.h-brand{flex:1;display:flex;align-items:center;gap:0.5rem;font-size:var(--text-base);font-weight:500;text-transform:uppercase;letter-spacing:0.2em;white-space:nowrap;color:#fff;text-decoration:none}
@media (min-width:1024px){ .h-brand{justify-content:center} }
.h-brand svg{width:1.25rem;height:1.25rem;flex:none}
.h-right{flex:1;display:flex;justify-content:flex-end;align-items:center;gap:1rem}
@media (min-width:640px){ .h-right{gap:1.25rem} }
.h-book{display:none;background:none;border:0;color:#fff;font-size:var(--text-xs);font-weight:500;text-transform:uppercase;letter-spacing:0.08em;text-decoration:none}
@media (min-width:640px){ .h-book{display:inline-block} }
.h-book:hover{text-decoration:underline}
.burger{width:2.5rem;height:2.5rem;border:0;border-radius:var(--radius-pill);background:rgba(255,255,255,0.15);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:grid;place-items:center;transition:background-color .25s ease}
.burger:hover{background:rgba(255,255,255,0.25)}
.burger .bars{display:grid;gap:5px}
.burger .bars span{display:block;width:1rem;height:1px;background:#fff}

/* ============ Home hero (kept for future home adoption) ============ */
.hero{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--radius-card-lg);background:var(--brand-deep);color:var(--on-brand);height:calc(100svh - 1rem);min-height:36rem;display:flex;flex-direction:column}
@media (min-width:640px){ .hero{height:calc(100svh - 1.5rem)} }
.hero-bg{position:absolute;inset:0;z-index:-10}
.hero-plate{position:absolute;left:0;right:0;top:-16%;height:132%;width:100%}
.hero-plate img{width:100%;height:100%;object-fit:cover}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(var(--brand-deep-rgb),0.65),rgba(var(--brand-deep-rgb),0.35),rgba(var(--brand-deep-rgb),0.75))}
.hero-title-wrap{padding:1rem 1.5rem 0}
@media (min-width:640px){ .hero-title-wrap{padding-left:2.5rem;padding-right:2.5rem} }
.hero-title{font-size:var(--text-hero);font-weight:500;text-transform:uppercase;line-height:0.85;letter-spacing:-0.02em;white-space:nowrap}
.hero-bottom{margin-top:auto;padding:0 1.5rem 2rem;display:flex;flex-direction:column;gap:1.5rem}
@media (min-width:640px){ .hero-bottom{flex-direction:row;justify-content:space-between;align-items:flex-end;padding:0 2.5rem 2.5rem} }
.hero-tagline{font-size:2.4rem;font-weight:500;text-transform:uppercase;line-height:0.95;letter-spacing:-0.02em;color:rgba(255,255,255,0.85)}
.hero-right{display:flex;align-items:flex-end;gap:1rem}

/* ============ Page hero (sub-pages) ============ */
.page-hero{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--radius-card-lg);background:var(--brand-deep);color:var(--on-brand);display:flex;flex-direction:column;min-height:30rem}
.ph-body{padding:4rem 1.5rem 4.5rem;max-width:62rem}
@media (min-width:640px){ .ph-body{padding:5rem 2.5rem 5.5rem} }
.ph-title{font-size:2.75rem;font-weight:500;line-height:0.95;letter-spacing:-0.02em;margin-top:1.25rem}
@media (min-width:640px){ .ph-title{font-size:var(--text-7xl)} }
.ph-sub{font-size:var(--text-base);color:rgba(255,255,255,0.75);line-height:1.625;max-width:34rem;margin-top:1.5rem}
.ph-actions{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;margin-top:2.25rem}

/* Decorative device grid (optional hero/band visual) */
.device-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:0.5rem;padding:1rem;border:1px solid rgba(255,255,255,0.15);background:rgba(255,255,255,0.08);border-radius:var(--radius-card);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.device-cell{aspect-ratio:1;border-radius:0.5rem;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.10);display:grid;place-items:center}
.device-cell .dot{width:0.375rem;height:0.375rem;border-radius:var(--radius-pill);background:var(--brand-light)}
.device-cell.ok .dot{background:#4ade80}
.device-cell.warn .dot{background:#facc15}
.device-cell.err .dot{background:#f87171}

/* ============ Bands (generic sections) ============ */
.band{padding:5rem 1.5rem}
@media (min-width:640px){ .band{padding-left:2.5rem;padding-right:2.5rem} }
.band-surface{background:var(--surface)}
.band-navy{background:var(--brand-deep);color:var(--on-brand);border-radius:var(--radius-card-lg);margin-top:0.75rem}
.band-overlap{background:var(--background);border-radius:var(--radius-card-lg);margin-top:-2.5rem;position:relative}
.band-head{max-width:46rem}
.band-head .title-xl{margin-top:1rem}
.lead{font-size:var(--text-sm);color:var(--ink-soft);line-height:1.625;max-width:28rem;margin-top:1.5rem}
.band-navy .lead{color:rgba(255,255,255,0.7)}

/* ============ Numbered rows (programs pattern, generic) ============ */
.prog-list{margin-top:3.5rem}
.prog-row{display:block;text-decoration:none;border-top:1px solid var(--hairline);transition:background-color .25s ease}
li:last-child>.prog-row{border-bottom:1px solid var(--hairline)}
.prog-row:hover,.prog-row:focus-visible{background:var(--background)}
.band-navy .prog-row{border-color:rgba(255,255,255,0.15)}
.band-navy .prog-row:hover{background:rgba(255,255,255,0.06)}
.prog-inner{display:flex;align-items:center;gap:1.5rem;padding:1.75rem 0}
.prog-idx{width:2.5rem;flex:none;font-size:var(--text-sm);font-weight:500;color:var(--ink-soft)}
.band-navy .prog-idx{color:rgba(255,255,255,0.55)}
.prog-main{flex:1;min-width:0}
.prog-name{font-size:var(--text-2xl);font-weight:500;letter-spacing:-0.02em}
@media (min-width:640px){ .prog-name{font-size:var(--text-3xl)} }
.prog-desc{display:block;font-size:var(--text-sm);color:var(--ink-soft);margin-top:0.25rem}
.band-navy .prog-desc{color:rgba(255,255,255,0.65)}
.prog-arrow{width:2.75rem;height:2.75rem;flex:none;border-radius:var(--radius-pill);border:1px solid var(--hairline);display:grid;place-items:center;color:var(--ink)}
.band-navy .prog-arrow{border-color:rgba(255,255,255,0.25);color:#fff}
.prog-arrow svg{width:1.25rem;height:1.25rem;opacity:0.55}

/* ============ Card grids ============ */
.card-grid{display:grid;grid-template-columns:1fr;gap:1.25rem;margin-top:3.5rem}
@media (min-width:640px){ .card-grid.cols-2{grid-template-columns:repeat(2,1fr)} .card-grid.cols-4{grid-template-columns:repeat(2,1fr)} }
@media (min-width:768px){ .card-grid.cols-3{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1024px){ .card-grid.cols-4{grid-template-columns:repeat(4,1fr)} }
.info-card{display:flex;flex-direction:column;border-radius:var(--radius-card);background:var(--surface);padding:1.75rem}
.band-surface .info-card{background:var(--background)}
.band-navy .info-card{background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.12)}
.info-card h3{font-size:var(--text-lg);font-weight:500;letter-spacing:-0.01em}
.info-card p{font-size:var(--text-sm);color:var(--ink-soft);line-height:1.625;margin-top:0.75rem}
.band-navy .info-card p{color:rgba(255,255,255,0.7)}
.ic-num{font-size:var(--text-sm);font-weight:500;color:var(--brand);margin-bottom:1rem}
.band-navy .ic-num{color:var(--brand-light)}
.ic-link{margin-top:auto;padding-top:1.25rem;font-size:var(--text-xs);font-weight:500;text-transform:uppercase;letter-spacing:0.08em;color:var(--ink);text-decoration:none}
.ic-link:hover{text-decoration:underline}
.band-navy .ic-link{color:#fff}

/* ============ Check list ============ */
.check-list{margin-top:1.25rem;display:flex;flex-direction:column;gap:0.625rem}
.check-list li{display:flex;gap:0.625rem;align-items:flex-start;font-size:var(--text-sm);color:var(--ink-soft);line-height:1.5}
.check-list svg{width:1rem;height:1rem;flex:none;color:var(--brand);margin-top:0.125rem}
.band-navy .check-list li{color:rgba(255,255,255,0.75)}
.band-navy .check-list svg{color:var(--brand-light)}

/* ============ Detail sections (capability / industry anchors) ============ */
.detail{border-top:1px solid var(--hairline);padding:3.5rem 0;display:grid;gap:2rem;scroll-margin-top:2rem}
@media (min-width:768px){ .detail{grid-template-columns:1fr 1fr;gap:2.5rem} }
.d-index{display:block;font-size:var(--text-sm);font-weight:500;color:var(--ink-soft);margin-bottom:0.75rem}
.detail h3{font-size:var(--text-3xl);font-weight:500;letter-spacing:-0.02em;line-height:1.05}
@media (min-width:640px){ .detail h3{font-size:var(--text-4xl)} }
.detail>div>p{font-size:var(--text-sm);color:var(--ink-soft);line-height:1.625;margin-top:1rem;max-width:26rem}

/* ============ Stats (navy band) ============ */
.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);column-gap:2rem;row-gap:3rem;margin-top:4rem}
@media (min-width:1024px){ .stats-grid{grid-template-columns:repeat(4,1fr)} }
.stat{border-top:1px solid rgba(255,255,255,0.2);padding-top:1.25rem}
.stat-val{display:block;font-size:var(--text-6xl);font-weight:500;letter-spacing:-0.02em;line-height:1}
@media (min-width:640px){ .stat-val{font-size:var(--text-7xl)} }
.stat-label{display:block;font-size:var(--text-sm);color:rgba(255,255,255,0.65);margin-top:0.75rem}

/* ============ Testimonial / quote cards ============ */
.t-grid{display:grid;grid-template-columns:1fr;gap:1.25rem;margin-top:3.5rem}
@media (min-width:768px){ .t-grid{grid-template-columns:repeat(3,1fr)} }
.t-grid li{display:flex}
.t-card{display:flex;flex-direction:column;justify-content:space-between;height:100%;width:100%;border-radius:var(--radius-card);background:var(--surface);padding:1.75rem}
.band-surface .t-card{background:var(--background)}
.t-quote-mark{font-size:var(--text-4xl);color:var(--brand);line-height:1}
.t-card blockquote{font-size:var(--text-lg);line-height:1.625;color:var(--ink);margin-top:1rem}
.t-card figcaption{border-top:1px solid var(--hairline);padding-top:1rem;margin-top:1.5rem}
.t-name{font-weight:500}
.t-role{font-size:var(--text-sm);color:var(--ink-soft)}
.quote-band blockquote{font-size:var(--text-2xl);line-height:1.4;letter-spacing:-0.01em;max-width:44rem;margin-top:2rem}
@media (min-width:640px){ .quote-band blockquote{font-size:var(--text-3xl)} }

/* ============ Plans (pricing) ============ */
.plan-grid{display:grid;grid-template-columns:1fr;gap:1.25rem;margin-top:3.5rem}
@media (min-width:640px){ .plan-grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1024px){ .plan-grid{grid-template-columns:repeat(4,1fr)} }
.plan{display:flex;flex-direction:column;border-radius:var(--radius-card);background:var(--surface);padding:1.75rem}
.plan.featured{background:var(--brand-deep);color:#fff}
.plan-tag{display:inline-block;align-self:flex-start;font-size:var(--text-2xs);font-weight:500;text-transform:uppercase;letter-spacing:0.18em;border-radius:var(--radius-pill);background:rgba(255,255,255,0.15);padding:0.375rem 0.75rem;margin-bottom:1rem}
.plan-name{font-size:var(--text-lg);font-weight:500}
.plan-price{font-size:var(--text-4xl);font-weight:500;letter-spacing:-0.02em;margin-top:1rem}
.plan-price span{font-size:var(--text-sm);font-weight:400;letter-spacing:0;color:var(--ink-soft)}
.plan.featured .plan-price span{color:rgba(255,255,255,0.65)}
.plan-blurb{font-size:var(--text-sm);color:var(--ink-soft);line-height:1.5;margin-top:0.5rem}
.plan.featured .plan-blurb{color:rgba(255,255,255,0.7)}
.plan .check-list{margin:1.5rem 0}
.plan.featured .check-list li{color:rgba(255,255,255,0.75)}
.plan.featured .check-list svg{color:var(--brand-light)}
.plan .pill{margin-top:auto;justify-content:center}

/* ============ Matrix / comparison table ============ */
.matrix-wrap{overflow-x:auto;margin-top:3.5rem;border:1px solid var(--hairline);border-radius:var(--radius-card);background:var(--background)}
.matrix{width:100%;border-collapse:collapse;font-size:var(--text-sm);min-width:44rem}
.matrix th,.matrix td{padding:1rem 1.25rem;text-align:left;border-bottom:1px solid var(--hairline)}
.matrix thead th{font-size:var(--text-xs);font-weight:500;text-transform:uppercase;letter-spacing:0.12em;color:var(--ink-soft);background:var(--surface)}
.matrix tbody tr:last-child td{border-bottom:0}
.matrix td{color:var(--ink-soft)}
.matrix td:first-child{color:var(--ink);font-weight:500}
.matrix .yes{color:var(--brand);font-weight:500}
.matrix .no{color:var(--ghost)}

/* ============ FAQ ============ */
.faq{margin-top:3.5rem;border-top:1px solid var(--hairline)}
.faq details{border-bottom:1px solid var(--hairline)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;padding:1.5rem 0;font-size:var(--text-lg);font-weight:500;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:var(--text-2xl);color:var(--ink-soft);transition:transform .3s var(--ease-expo)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq-a{padding:0 0 1.5rem;font-size:var(--text-sm);color:var(--ink-soft);line-height:1.625;max-width:40rem}

/* ============ Tag strip (integrations, locations, chips) ============ */
.tag-strip{display:flex;flex-wrap:wrap;gap:0.75rem;margin-top:2.5rem}
.tag-chip{font-size:var(--text-xs);font-weight:500;text-transform:uppercase;letter-spacing:0.08em;border:1px solid var(--hairline);border-radius:var(--radius-pill);padding:0.625rem 1.125rem;color:var(--ink-soft)}
.band-navy .tag-chip{border-color:rgba(255,255,255,0.2);color:rgba(255,255,255,0.75)}

/* ============ Ghost heading (oversized) ============ */
.ghost-h{pointer-events:none;user-select:none;font-size:var(--text-ghost);font-weight:500;text-transform:uppercase;line-height:1.02;letter-spacing:-0.02em;color:var(--ghost);margin-top:3rem}
.ghost-h .gw{display:inline-block;overflow:hidden;padding-bottom:0.12em;margin-bottom:-0.12em}
.ghost-h .gw-ink{color:var(--ink)}
.ghost-row{display:flex;justify-content:space-between}

/* ============ Legal / long-form prose ============ */
.prose{max-width:46rem;margin-top:3.5rem;color:var(--ink-soft);font-size:0.9375rem;line-height:1.75}
.prose section{scroll-margin-top:2rem}
.prose h2{font-size:var(--text-2xl);font-weight:500;letter-spacing:-0.01em;color:var(--ink);margin-top:3rem}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.0625rem;font-weight:500;color:var(--ink);margin-top:1.75rem}
.prose p{margin-top:1rem}
.prose ul{margin-top:1rem;padding-left:1.25rem;list-style:disc;display:flex;flex-direction:column;gap:0.5rem}
.prose a{color:var(--brand);text-decoration:none}
.prose a:hover{text-decoration:underline}
.prose strong{color:var(--ink);font-weight:500}
.prose-updated{display:inline-block;font-size:var(--text-xs);font-weight:500;text-transform:uppercase;letter-spacing:0.12em;color:var(--ink-soft);border:1px solid var(--hairline);border-radius:var(--radius-pill);padding:0.5rem 1rem;margin-top:2rem}

/* ============ Footer ============ */
.site-footer{background:var(--brand-deep);color:var(--on-brand);border-radius:var(--radius-card-lg);margin-top:0.75rem;padding:3.5rem 1.5rem}
@media (min-width:640px){ .site-footer{padding:4rem 2.5rem} }
.cta-band{border-bottom:1px solid rgba(255,255,255,0.15);padding-bottom:3.5rem;display:flex;flex-direction:column;gap:2rem}
@media (min-width:640px){ .cta-band{flex-direction:row;justify-content:space-between;align-items:flex-end} }
.cta-title{font-size:var(--text-6xl);font-weight:500;line-height:0.92;letter-spacing:-0.02em;margin-top:1rem}
.footer-cols{display:grid;gap:2.5rem;padding:3.5rem 0}
@media (min-width:640px){ .footer-cols{grid-template-columns:repeat(3,1fr)} .f-brand{grid-column:1/-1} }
@media (min-width:1024px){ .footer-cols{grid-template-columns:1.4fr repeat(5,1fr)} .f-brand{grid-column:auto} }
.f-brand{max-width:20rem}
.f-mark{display:flex;align-items:center;gap:0.5rem;font-size:var(--text-lg);font-weight:500;text-transform:uppercase;letter-spacing:0.2em;color:#fff;text-decoration:none}
.f-mark svg{width:1.25rem;height:1.25rem}
.f-blurb{font-size:var(--text-sm);color:rgba(255,255,255,0.65);margin-top:1rem;line-height:1.625}
.f-brand address{font-style:normal;margin-top:1.5rem;color:rgba(255,255,255,0.8);font-size:var(--text-sm)}
.f-brand address a{display:block;text-decoration:none;margin-top:0.25rem}
.f-brand address a:hover{text-decoration:underline}
.f-muted{display:block;color:rgba(255,255,255,0.55);margin-top:0.25rem}
.f-col h3{font-size:var(--text-xs);font-weight:500;text-transform:uppercase;letter-spacing:0.2em;color:rgba(255,255,255,0.5)}
.f-col h3 a{text-decoration:none}
.f-col h3 a:hover{color:#fff}
.f-col ul{margin-top:1.25rem;font-size:var(--text-sm);color:rgba(255,255,255,0.8)}
.f-col li + li{margin-top:0.75rem}
.f-col a{text-decoration:none}
.f-col a:hover{color:#fff}
.f-bottom{border-top:1px solid rgba(255,255,255,0.15);padding-top:2rem;font-size:var(--text-sm);color:rgba(255,255,255,0.6);display:flex;flex-direction:column;gap:1.25rem}
@media (min-width:640px){ .f-bottom{flex-direction:row;justify-content:space-between;align-items:center} }
.f-links{display:flex;gap:1.25rem}
.f-links a{text-decoration:none}
.f-links a:hover{color:#fff}

/* ============ Contact / demo modal ============ */
.modal{position:fixed;inset:0;z-index:90;display:flex;align-items:flex-end;justify-content:center;padding:0.75rem;pointer-events:none;visibility:hidden}
.modal.open{pointer-events:auto;visibility:visible}
@media (min-width:640px){ .modal{align-items:center;padding:1.5rem} }
.modal-backdrop{position:absolute;inset:0;background:rgba(var(--brand-deep-rgb),0.4);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0}
.modal-panel{position:relative;width:100%;max-height:92svh;overflow-y:auto;border-radius:var(--radius-card-lg);background:var(--surface-card);color:var(--ink);padding:1.5rem;box-shadow:0 40px 90px -20px rgba(var(--brand-deep-rgb),0.5);opacity:0}
@media (min-width:640px){ .modal-panel{max-width:32rem;padding:2rem} }
.modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
.modal-title{font-size:var(--text-4xl);font-weight:500;line-height:0.95;letter-spacing:-0.02em;margin-top:0.75rem}
@media (min-width:640px){ .modal-title{font-size:var(--text-5xl)} }
.close-btn{width:2.5rem;height:2.5rem;flex:none;border:0;border-radius:var(--radius-pill);background:var(--surface);display:grid;place-items:center;transition:background-color .25s ease}
.close-btn:hover{background:var(--hairline)}
.close-btn svg{width:1.125rem;height:1.125rem}
.visit-form{margin-top:1.75rem;display:flex;flex-direction:column;gap:1rem}
.field label{display:block;font-size:var(--text-xs);font-weight:500;text-transform:uppercase;letter-spacing:0.18em;color:var(--ink-soft);margin-bottom:0.5rem}
.field input,.field textarea{width:100%;border-radius:0.75rem;border:1px solid var(--hairline);background:var(--background);padding:0.75rem 1rem;font-size:var(--text-sm);color:var(--ink);resize:vertical}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--brand-light);box-shadow:0 0 0 3px rgba(87,144,230,0.25)}
.submit-btn{align-self:flex-start;border:0;border-radius:var(--radius-pill);background:var(--ink);color:#fff;padding:0.875rem 1.75rem;font-size:var(--text-sm);font-weight:500;text-transform:uppercase;letter-spacing:0.08em;transition:background-color .25s ease,opacity .25s ease}
.submit-btn:hover{background:var(--brand-deep)}
.submit-btn:disabled{opacity:0.6;cursor:default}
.success{margin-top:2rem;border-radius:var(--radius-card);background:var(--surface);padding:1.5rem;text-align:center}
.success-check{width:3rem;height:3rem;margin:0 auto;border-radius:var(--radius-pill);background:var(--brand);display:grid;place-items:center;color:#fff}
.success-check svg{width:1.5rem;height:1.5rem}
.success h3{font-size:var(--text-lg);font-weight:500;margin-top:1rem}
.success p{font-size:var(--text-sm);color:var(--ink-soft);margin-top:0.5rem}
.success .pill-solid{margin-top:1.25rem}

/* ============ Fullscreen menu ============ */
.menu{position:fixed;inset:0;z-index:70;display:flex;flex-direction:column;pointer-events:none;visibility:hidden}
.menu.open{pointer-events:auto;visibility:visible}
.menu-backdrop{position:absolute;inset:0;background:var(--brand-deep);opacity:0}
.menu-panel{position:relative;flex:1;display:flex;flex-direction:column;color:#fff;padding:0.5rem;opacity:0}
@media (min-width:640px){ .menu-panel{padding:0.75rem} }
.menu-inner{flex:1;display:flex;flex-direction:column;padding:1.5rem;min-height:0}
@media (min-width:640px){ .menu-inner{padding:2rem 2.5rem} }
.menu-top{display:flex;justify-content:space-between;align-items:center}
.menu-brand{display:flex;align-items:center;gap:0.5rem;font-size:var(--text-base);font-weight:500;text-transform:uppercase;letter-spacing:0.2em;color:#fff;text-decoration:none}
.menu-brand svg{width:1.25rem;height:1.25rem}
.menu-close{width:2.5rem;height:2.5rem;border:0;border-radius:var(--radius-pill);background:rgba(255,255,255,0.15);display:grid;place-items:center;color:#fff;transition:background-color .25s ease}
.menu-close:hover{background:rgba(255,255,255,0.25)}
.menu-close svg{width:1.125rem;height:1.125rem}
.menu-nav{flex:1;min-height:0;position:relative;display:flex;flex-direction:column;overflow-y:auto}
.menu-primary{margin:auto 0;padding:1.5rem 0;display:flex;flex-direction:column}
@media (min-width:1024px){ .menu-primary{width:52%} }
.menu-group{border-bottom:1px solid rgba(255,255,255,0.08)}
.menu-group:last-child{border-bottom:0}
@media (min-width:1024px){ .menu-group{border-bottom:0} }
.menu-glink{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;background:none;border:0;padding:0.55rem 0;color:#fff;font-size:2rem;font-weight:500;letter-spacing:-0.02em;line-height:1.05;text-align:left;text-decoration:none;transition:color .2s ease}
@media (min-width:640px){ .menu-glink{font-size:2.75rem} }
.menu-glink:hover{color:var(--brand-light)}
.menu-plus{width:1.375rem;height:1.375rem;flex:none;opacity:0.55;transition:transform .3s var(--ease-expo)}
.menu-group.open .menu-plus{transform:rotate(45deg)}
.menu-children{height:0;overflow:hidden;transition:height .4s var(--ease-expo)}
.menu-children-inner{display:flex;flex-direction:column;gap:0.65rem;padding:0.25rem 0 1.25rem}
.menu-children a{font-size:var(--text-base);color:rgba(255,255,255,0.75);text-decoration:none;transition:color .2s ease}
.menu-children a:hover{color:#fff}
.menu-child-label{display:none}
@media (min-width:1024px){
  .menu-glink{color:rgba(255,255,255,0.45)}
  .menu-glink:hover{color:var(--brand-light)}
  .menu-glink.current{color:rgba(255,255,255,0.75)}
  .menu-group.active>.menu-glink{color:#fff}
  .menu-plus{display:none}
  .menu-children{position:absolute;left:58%;right:0;top:50%;transform:translateY(-50%);height:auto;max-height:100%;overflow-y:auto;transition:none;display:none}
  .menu-group.active .menu-children{display:block}
  .menu-children-inner{gap:0.75rem;padding:0}
  .menu-children a{font-size:var(--text-lg);color:rgba(255,255,255,0.8)}
  .menu-child-label{display:inline-flex;margin-bottom:1rem}
}
.menu-bottom{border-top:1px solid rgba(255,255,255,0.15);padding-top:2rem;display:flex;flex-direction:column;gap:1.25rem}
@media (min-width:640px){ .menu-bottom{flex-direction:row;justify-content:space-between;align-items:center} }
.menu-actions{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}
.menu-util{font-size:var(--text-sm);font-weight:500;text-transform:uppercase;letter-spacing:0.08em;color:rgba(255,255,255,0.85);text-decoration:none}
.menu-util:hover{color:#fff;text-decoration:underline}
.menu-social{display:flex;gap:1.25rem;font-size:var(--text-sm);color:rgba(255,255,255,0.7)}
.menu-social a{text-decoration:none}
.menu-social a:hover{color:#fff}


/* ============================================================
   Home page (index.html) sections
   ============================================================ */
/* Collection slider */
.collection-slider{display:none;opacity:0}
@media (min-width:768px){ .collection-slider{display:flex;flex-direction:column;gap:0.75rem;width:16rem} }
.cs-holder{position:relative}
.cs-card{display:flex;gap:0.75rem;align-items:flex-start}
.cs-img{width:3.5rem;height:3.5rem;flex:none;border-radius:0.75rem;object-fit:cover}
.cs-info{display:flex;flex-direction:column;gap:0.125rem;min-width:0}
.cs-brand{font-size:0.7rem;font-weight:500;text-transform:uppercase;letter-spacing:0.08em}
.cs-title{font-size:0.7rem;text-transform:uppercase;opacity:0.8}
.cs-cta{font-size:var(--text-2xs);text-decoration:underline;margin-top:0.25rem}

/* Membership card */
.membership{width:100%;max-width:20rem;display:flex;gap:0.75rem;align-items:stretch;opacity:0}
@media (min-width:640px){ .membership{width:15rem;max-width:none} }
.mem-left{flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:0.5rem;min-width:0}
.mem-value{font-size:var(--text-3xl);font-weight:500;line-height:1}
.avatars{display:flex}
.avatars span{width:1.25rem;height:1.25rem;border-radius:var(--radius-pill);border:1px solid rgba(var(--brand-deep-rgb),0.4)}
.avatars span + span{margin-left:-0.5rem}
.mem-cap{font-size:var(--text-2xs);opacity:0.8}
.mem-img{width:4rem;flex:none;aspect-ratio:3/4;border-radius:0.75rem;object-fit:cover;height:auto}

/* ============ Trust ============ */
.trust{position:relative;isolation:isolate;overflow:hidden;background:var(--background);padding:4rem 1.5rem}
@media (min-width:640px){ .trust{padding:5rem 2.5rem} }
.trust-top{position:relative;z-index:20;display:flex;flex-direction:column;gap:2rem}
@media (min-width:640px){ .trust-top{flex-direction:row;justify-content:space-between;align-items:flex-start} }
.pct-badge{width:7rem;height:7rem;flex:none;border-radius:var(--radius-pill);background:var(--surface);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:0.25rem}
@media (min-width:640px){ .pct-badge{width:8rem;height:8rem} }
.pct{font-size:var(--text-2xl);font-weight:500}
.pct-cap{font-size:0.6rem;color:var(--ink-soft);max-width:7em}
.badge-card{max-width:28rem;display:flex;gap:1rem;align-items:flex-start;border-radius:var(--radius-card);background:var(--surface);padding:1.25rem}
@media (min-width:640px){ .badge-card{gap:1.25rem;padding:1.5rem} }
.badge-idx{flex:none;border-radius:0.75rem;background:var(--background);padding:0.5rem 1rem;font-size:var(--text-xl);font-weight:500}
.badge-title{font-size:var(--text-lg);font-weight:500}
.badge-body{font-size:var(--text-xs);color:var(--ink-soft);line-height:1.625;margin-top:0.375rem}

.trust-ghost{position:relative;z-index:0;pointer-events:none;user-select:none;max-width:88rem;margin:3rem auto 0;font-size:var(--text-ghost);font-weight:500;text-transform:uppercase;line-height:1.02;letter-spacing:-0.02em;color:var(--ghost)}
.ghost-row{display:flex;justify-content:space-between}
.gw{display:inline-block;overflow:hidden;padding-bottom:0.12em;margin-bottom:-0.12em}
.gw-ink{color:var(--ink)}

.coach-wrap{position:relative;z-index:10;width:13rem;margin:2.5rem auto 0}
@media (min-width:640px){ .coach-wrap{position:absolute;left:50%;top:50%;translate:-50% -50%;width:16rem;margin:0} }
.coach-card{position:relative;transform:rotate(6deg);aspect-ratio:3/4;border-radius:var(--radius-card);background:var(--brand);overflow:hidden}
.coach-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#coachImgB{opacity:0}
.coach-cap{background:rgba(var(--brand-deep-rgb),0.4)}
.coach-name{font-size:var(--text-sm);font-weight:500}
.coach-role{font-size:var(--text-2xs);opacity:0.8}

.trust-controls{position:relative;z-index:20;margin-top:3rem;display:flex;justify-content:space-between;align-items:center}
@media (min-width:640px){ .trust-controls{margin-top:6rem} }

/* ============ Programs ============ */
.programs{background:var(--surface);padding:6rem 1.5rem}
@media (min-width:640px){ .programs{padding-left:2.5rem;padding-right:2.5rem} }
.programs h2{margin-top:1rem}
.prog-list{margin-top:3.5rem}
.prog-row{display:block;text-decoration:none;border-top:1px solid var(--hairline);transition:background-color .25s ease}
.prog-row:hover,.prog-row:focus-visible{background:var(--background)}
.prog-inner{display:flex;align-items:center;gap:1.5rem;padding:1.75rem 0}
.prog-idx{width:2.5rem;flex:none;font-size:var(--text-sm);font-weight:500;color:var(--ink-soft)}
.prog-main{flex:1;min-width:0}
.prog-name{font-size:var(--text-2xl);font-weight:500;letter-spacing:-0.02em}
@media (min-width:640px){ .prog-name{font-size:var(--text-3xl)} }
.prog-desc{font-size:var(--text-sm);color:var(--ink-soft);margin-top:0.25rem}
.prog-arrow{width:2.75rem;height:2.75rem;flex:none;border-radius:var(--radius-pill);border:1px solid var(--hairline);display:grid;place-items:center;color:var(--ink)}
.prog-arrow svg{width:1.25rem;height:1.25rem;opacity:0.55}

/* ============ Facilities ============ */
.facilities{position:relative;background:var(--background);border-radius:var(--radius-card-lg);margin-top:-2.5rem;padding:4rem 1.5rem 5rem}
@media (min-width:640px){ .facilities{padding-left:2.5rem;padding-right:2.5rem} }
.fac-grid{display:grid;grid-template-columns:1fr;align-items:end;gap:2.5rem}
@media (min-width:768px){ .fac-grid{grid-template-columns:1fr 1fr} }
.fac-intro{max-width:24rem}
.fac-icon{width:4rem;height:4rem;border-radius:var(--radius-card);object-fit:cover;opacity:0}
.fac-intro h2{margin-top:1.5rem}
.fac-body{font-size:var(--text-sm);color:var(--ink-soft);line-height:1.625;max-width:20rem;margin-top:1.5rem}
.fac-cards{display:flex;align-items:flex-end;gap:1.25rem}
.court-card{position:relative;flex:1;aspect-ratio:3/4;border-radius:var(--radius-card);overflow:hidden;background:var(--surface)}
.court-card-2{margin-bottom:2rem}
.court-card img{width:100%;height:100%;object-fit:cover}
.court-cap{padding:0.75rem 1rem}
.cap-clay{background:rgba(var(--brand-deep-rgb),0.4)}
.cap-blue{background:rgba(11,110,151,0.55)}
.court-name{font-size:var(--text-sm);font-weight:500}
.court-desc{font-size:var(--text-2xs);opacity:0.85;margin-top:0.125rem}

/* ============ Stats ============ */
.stats{background:var(--brand-deep);color:var(--on-brand);border-radius:var(--radius-card-lg);margin-top:0.75rem;padding:5rem 1.5rem}
@media (min-width:640px){ .stats{padding-left:2.5rem;padding-right:2.5rem} }
.stats h2{margin-top:1rem}
.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);column-gap:2rem;row-gap:3rem;margin-top:4rem}
@media (min-width:1024px){ .stats-grid{grid-template-columns:repeat(4,1fr)} }
.stat{border-top:1px solid rgba(255,255,255,0.2);padding-top:1.25rem}
.stat-val{display:block;font-size:var(--text-6xl);font-weight:500;letter-spacing:-0.02em;line-height:1}
@media (min-width:640px){ .stat-val{font-size:var(--text-7xl)} }
.stat-label{display:block;font-size:var(--text-sm);color:rgba(255,255,255,0.65);margin-top:0.75rem}

/* ============ Testimonials ============ */
.testimonials{background:var(--background);padding:5rem 1.5rem}
@media (min-width:640px){ .testimonials{padding:6rem 2.5rem} }
.testimonials h2{margin-top:1rem}
.t-grid{display:grid;grid-template-columns:1fr;gap:1.25rem;margin-top:3.5rem}
@media (min-width:768px){ .t-grid{grid-template-columns:repeat(3,1fr)} }
.t-grid li{display:flex}
.t-card{display:flex;flex-direction:column;justify-content:space-between;height:100%;width:100%;border-radius:var(--radius-card);background:var(--surface);padding:1.75rem}
.t-quote-mark{font-size:var(--text-4xl);color:var(--brand);line-height:1}
.t-card blockquote{font-size:var(--text-lg);line-height:1.625;color:var(--ink);margin-top:1rem}
.t-card figcaption{border-top:1px solid var(--hairline);padding-top:1rem;margin-top:1.5rem}
.t-name{font-weight:500}
.t-role{font-size:var(--text-sm);color:var(--ink-soft)}

/* ============ Hive home visuals (CSS-built, no photos) ============ */
.hero-grid{position:absolute;inset:-2% 0;display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:1fr;gap:0.75rem;padding:1rem;opacity:0.9}
.hg-cell{border-radius:0.75rem;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.07);display:grid;place-items:center}
.hg-dot{width:0.4rem;height:0.4rem;border-radius:var(--radius-pill);background:var(--brand-light)}
.hg-cell.ok .hg-dot{background:#4ade80}
.hg-cell.warn .hg-dot{background:var(--brand-yellow)}
.hg-cell.dim .hg-dot{opacity:0.22}
.cs-thumb{width:3.5rem;height:3.5rem;flex:none;border-radius:0.75rem;background:var(--brand-deep);border:1px solid rgba(255,255,255,0.15);display:flex;flex-direction:column;gap:0.3rem;align-items:flex-start;justify-content:center;padding:0.6rem}
.cs-thumb span{display:block;height:0.28rem;border-radius:var(--radius-pill);background:rgba(255,255,255,0.35)}
.cs-thumb span:nth-child(1){width:70%}
.cs-thumb span:nth-child(2){width:45%;background:var(--brand-yellow)}
.cs-thumb span:nth-child(3){width:58%}
.mem-visual{width:4rem;flex:none;aspect-ratio:3/4;border-radius:0.75rem;background:var(--brand-deep);border:1px solid rgba(255,255,255,0.15);display:grid;grid-template-columns:repeat(2,1fr);gap:0.35rem;padding:0.5rem;align-content:center}
.mem-visual i{display:block;aspect-ratio:1;border-radius:0.4rem;background:rgba(255,255,255,0.12)}
.mem-visual i.on{background:var(--brand-light)}
.console-mock{position:absolute;inset:0;background:linear-gradient(160deg,#1c1b40,var(--brand-deep));display:flex;flex-direction:column;gap:0.65rem;padding:1.1rem 1.1rem 4.5rem}
.cm-row{display:flex;align-items:center;gap:0.5rem}
.cm-dot{width:0.45rem;height:0.45rem;border-radius:var(--radius-pill);background:#4ade80;flex:none}
.cm-dot.warn{background:var(--brand-yellow)}
.cm-dot.err{background:#f87171}
.cm-bar{height:0.35rem;border-radius:var(--radius-pill);background:rgba(255,255,255,0.25)}
.court-link{flex:1;display:block;text-decoration:none;color:inherit}
.court-link .court-card{width:100%}
.court-visual{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0.5rem;padding:1rem;align-content:start}
.court-visual i{display:block;aspect-ratio:1;border-radius:0.6rem;background:rgba(255,255,255,0.14);border:1px solid rgba(255,255,255,0.12)}
.cv-vending{background:linear-gradient(170deg,#232152,var(--brand-deep))}
.cv-retail{background:linear-gradient(170deg,var(--accent-teal),#07344a)}
a.tag-chip{text-decoration:none;transition:border-color .2s ease,color .2s ease}
.band-navy a.tag-chip:hover{border-color:#fff;color:#fff}
.band-surface a.tag-chip:hover,.band a.tag-chip:hover{border-color:var(--ink);color:var(--ink)}
.cta-stack{display:flex;flex-direction:column;align-items:flex-start}
@media (min-width:640px){ .cta-stack{align-items:flex-end} }
.cta-links{display:flex;gap:1.25rem;margin-top:1rem;font-size:var(--text-sm)}
.cta-links a{color:rgba(255,255,255,0.75);text-decoration:none}
.cta-links a:hover{color:#fff;text-decoration:underline}