:root{
  --navy:#152C50;
  --navy-2:#0E1F3A;
  --navy-soft:#1E3A66;
  --paper:#ffffff;
  --cloud:#F5F7FA;
  --line:#E3E8F0;
  --red:#ED1C24;
  --orange:#F58020;
  --yellow:#F6EB16;
  --green:#0DB260;
  --blue:#6C84C2;
  --sky:#62CDF6;
  --pink:#F7A9B8;
  --ink:#1C2434;
  --muted:#5B6779;
  --radius:16px;
  --rainbow:linear-gradient(90deg,var(--red),var(--orange),var(--yellow),var(--green),var(--blue),var(--sky),var(--pink));
  /* ---- Liquid Glass material tokens (see DESIGN-SYSTEM.md) ----
     Semantic roles, not component names: the same tokens feed the header,
     menus, sheets and toolbars here and map 1:1 onto the future staff app. */
  --header-h:73px;                                /* measured header height — .subnav/.jump derive from it */
  --glass-blur:22px;                              /* Regular material backdrop blur */
  --glass-blur-menu:20px;                         /* popovers/menus */
  --glass-sat:180%;                               /* backdrop saturation = "picks up surrounding color" */
  --glass-dark:rgba(21,44,80,.93);                /* Regular, dark (navy) — nav bar over content. Darkened .80→.93 at Keith's request 2026-07-21: the bar must READ as the brand's deep navy; content now only ghosts through faintly. (Darker = better link contrast, so the old .80 a11y floor is comfortably kept.) */
  --glass-dark-sheet:rgba(14,31,58,.88);          /* Regular, dark, large sheet (mobile menu) — steadier */
  --glass-light:rgba(255,255,255,.76);            /* Regular, light — toolbars over content */
  --glass-light-menu:rgba(255,255,255,.88);       /* Regular, light, floating menus (higher fill = legibility) */
  --glass-clear:rgba(255,255,255,.12);            /* Clear — only over media with a dim layer beneath */
  --glass-edge-hi:inset 0 1px 0 rgba(255,255,255,.10);      /* top rim catch-light, dark surfaces */
  --glass-edge-hi-light:inset 0 1px 0 rgba(255,255,255,.65);/* top rim catch-light, light surfaces */
  --glass-hairline:rgba(21,44,80,.10);            /* structural hairline on light glass */
  --glass-shadow:0 18px 44px rgba(14,31,58,.22);  /* floating separation, near */
  --glass-shadow-far:0 24px 60px rgba(14,31,58,.30);
  --spring:cubic-bezier(.34,1.56,.64,1);          /* gel press */
  --ease-glass:cubic-bezier(.3,1.08,.3,1);        /* morph/settle */
  color-scheme:light;                             /* brand is light-only; keeps UA widgets consistent */
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--paper);color:var(--ink);line-height:1.6;
}
.rainbow-line{height:5px;width:100%;background:var(--rainbow)}
/* the nav bar's rainbow line drifts continuously; gradient starts and ends on
   the same color so the loop is seamless */
header .rainbow-line{background:linear-gradient(90deg,var(--red),var(--orange),var(--yellow),var(--green),var(--blue),var(--sky),var(--pink),var(--red));background-size:200% 100%;animation:rainbowFlow 8s linear infinite}
@keyframes rainbowFlow{to{background-position:200% 0}}
@media (prefers-reduced-motion:reduce){header .rainbow-line{animation:none}}

/* Header — navy Liquid Glass bar. The solid navy is the universal fallback;
   capable browsers swap it for a navy-tinted glass. The blur lives on a
   ::before pseudo (NOT on header itself): an ancestor backdrop-filter would
   become the "backdrop root" and break sampling for the .nd-menu dropdown's
   own glass, which hangs below the bar. */
header{position:sticky;top:0;z-index:50;background:var(--navy)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  header{background:transparent}
  header::before{content:"";position:absolute;inset:0;z-index:-1;
    background:linear-gradient(180deg,rgba(21,44,80,.965),var(--glass-dark));
    -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
    backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
    box-shadow:var(--glass-edge-hi)}
}
/* pointer-tracked specular: glass.js feeds --gx/--gy while the pointer is
   over the bar; static browsers and touch devices simply never see it */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  header::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .35s ease;
    background:radial-gradient(220px 90px at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.05),transparent 70%)}
  header.glass-lit::after{opacity:1}
}
/* scroll-edge: the bar casts a deeper shadow only once content is under it */
@supports (animation-timeline:scroll()){
  header{animation:glassEdge linear both;animation-timeline:scroll();animation-range:0 140px}
  @keyframes glassEdge{from{box-shadow:0 0 0 rgba(14,31,58,0)}to{box-shadow:0 14px 34px -14px rgba(14,31,58,.5)}}
}
.nav-wrap{display:flex;align-items:center;gap:28px;padding:12px 22px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff}
.brand img{width:44px;height:44px}
.brand-name{font-weight:900;letter-spacing:.06em;font-size:16px;white-space:nowrap;text-transform:uppercase}
nav{margin-left:auto;display:flex;gap:26px;align-items:center}
/* 9px vertical padding lifts the hit area to 44px without growing the bar
   (the 44px brand logo still sets the row height) */
nav a{color:#E2EAF6;text-decoration:none;font-size:14.5px;font-weight:600;padding:9px 0;border-bottom:3px solid transparent}
nav a:hover{color:#fff}
nav a.active{color:#fff;font-weight:800;border-bottom:3px solid #fff}
/* Tournaments hover dropdown */
.navdrop{position:relative;display:flex;align-items:center}
.navdrop>a{display:inline-flex;align-items:center;gap:6px}
.nd-caret{width:10px;height:6px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s}
.navdrop:hover .nd-caret,.navdrop:focus-within .nd-caret{transform:rotate(180deg)}
/* Popover glass: light Regular material, high fill for text legibility.
   Emerges from its control — scales up from the top edge. Concentric radii:
   18px outer − 8px padding = 10px items. */
.nd-menu{position:absolute;top:calc(100% + 10px);left:50%;transform:translate(-50%,6px) scale(.97);transform-origin:50% 0;min-width:240px;background:#fff;border-radius:18px;box-shadow:var(--glass-shadow-far),var(--glass-edge-hi-light);border:1px solid var(--glass-hairline);padding:8px;opacity:0;visibility:hidden;transition:opacity .16s,transform .18s var(--ease-glass),visibility .16s;z-index:80}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .nd-menu{background:var(--glass-light-menu);-webkit-backdrop-filter:blur(var(--glass-blur-menu)) saturate(var(--glass-sat));backdrop-filter:blur(var(--glass-blur-menu)) saturate(var(--glass-sat))}
}
.nd-menu::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.navdrop:hover .nd-menu,.navdrop:focus-within .nd-menu{opacity:1;visibility:visible;transform:translate(-50%,0) scale(1)}
.nd-menu a{display:block;padding:11px 14px;border-radius:10px;border-bottom:0}
.nd-menu a b{display:block;font-size:14.5px;font-weight:800;color:var(--navy)}
.nd-menu a span{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-top:2px}
.nd-menu a:hover{background:#F2F5FB}
/* "All Tournaments" lives in the markup for the mobile accordion only; on
   desktop (and the mobile no-JS flatten) the parent link already navigates
   to /tournaments, so the row stays hidden everywhere but body.ndjs mobile. */
.nd-menu .nd-all{display:none}
/* 901-960px: tighten nav gap so all ten items (plus the dropdown caret) fit
   without horizontal overflow before the 900px hamburger cutover */
@media (min-width:901px) and (max-width:960px){nav{gap:14px}}
.btn{
  display:inline-block;background:var(--navy);color:#fff;text-decoration:none;
  font-weight:800;padding:12px 22px;border-radius:999px;font-size:15px;
  border:none;cursor:pointer;transition:transform .12s ease,background .12s;
}
.btn:hover{transform:translateY(-1px);background:var(--navy-soft)}
.btn:active{transform:translateY(0) scale(.97);transition-timing-function:var(--spring)}
/* Ghost buttons sit over hero photography (which already carries a ≥35% dim
   gradient) — that is the one place the Clear glass variant is allowed */
.btn.ghost{background:transparent;border:2px solid rgba(255,255,255,.55);color:#fff}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .btn.ghost{background:var(--glass-clear);-webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);box-shadow:var(--glass-edge-hi)}
}
.btn.ghost:hover{background:rgba(255,255,255,.18)}
.btn.gold{background:var(--yellow);color:var(--navy-2)}
.btn.outline{background:#fff;border:2px solid var(--navy);color:var(--navy)}
.btn.outline:hover{background:var(--cloud)}
.menu-toggle{display:none;margin-left:auto;background:none;border:0;color:#fff;font-size:26px;width:44px;height:44px;line-height:1;align-items:center;justify-content:center;border-radius:12px;cursor:pointer}
.menu-toggle:active{transform:translateY(-50%) scale(.92)}

/* Home hero — full-bleed photo */
.hero-full{position:relative;z-index:5;min-height:min(80vh,740px);display:flex;align-items:flex-end;background:var(--navy-2)}
.hero-full img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 25%}
.hero-full::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(14,31,58,.08) 0%,rgba(14,31,58,.28) 45%,rgba(14,31,58,.82) 100%),linear-gradient(90deg,rgba(14,31,58,.5) 0%,rgba(14,31,58,.12) 55%)}
.hero-full::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:var(--rainbow);z-index:2}
.hero-full .hf-inner{position:relative;z-index:3;max-width:1200px;margin:0 auto;width:100%;padding:88px 24px 30px}
.hero-full .kicker{color:var(--yellow)}
.hero-full .kicker::before{background:var(--yellow)}
.hero-full h1{color:#fff;font-size:clamp(44px,5.6vw,76px);line-height:1.0}
.hero-full h1 .rb{background:linear-gradient(90deg,#FF5A5F,var(--orange),var(--yellow),#2FD57F,var(--sky));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-full p.lede{margin-top:10px;font-size:19px;color:#E2EAF6;max-width:32em;text-shadow:0 1px 12px rgba(14,31,58,.4)}
.hero-full .finder{margin-top:20px}
.hero-full .finder input{border-color:rgba(255,255,255,.35);box-shadow:0 18px 44px rgba(14,31,58,.35)}
.hero-full .finder-hint{color:#C9D5E8}
.hero-full .finder-hint a{color:#fff}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.step{background:#fff;border:1.5px solid var(--line);border-radius:var(--radius);padding:34px 28px;position:relative;box-shadow:0 10px 28px rgba(21,44,80,.06)}
.step b.num{position:absolute;top:-18px;left:26px;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:17px}
.step:nth-child(1) b.num{background:var(--red);color:#fff}
.step:nth-child(2) b.num{background:var(--yellow);color:var(--navy-2)}
.step:nth-child(3) b.num{background:var(--sky);color:var(--navy-2)}
.step h3{font-size:20px;font-weight:900;text-transform:uppercase;margin-bottom:10px;margin-top:6px;color:var(--navy)}
.step p{color:var(--muted);font-size:15.5px}

/* Community (navy) */
.community{background:var(--navy)}
.community .wrap{display:grid;grid-template-columns:1fr;gap:24px;align-items:center;max-width:800px;text-align:center}
.community h2{color:#fff}
.community h2 span{color:var(--pink)}
.community p{color:#C4D0E4;margin-top:14px}
.community a{color:var(--sky)}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.chip{border:1.5px solid #3D5580;border-radius:999px;padding:9px 18px;font-size:14px;font-weight:700;color:#E8EEF8}
.chip.hl{border-color:var(--pink);color:var(--pink)}
.chip.on-light{border-color:#C9D3E2;color:var(--navy)}
.chip.on-light.hl{border-color:var(--red);color:var(--red)}

/* App strip */
.app-strip .wrap{display:flex;align-items:center;justify-content:space-between;gap:30px;background:var(--cloud);border:1.5px solid var(--line);border-radius:22px;padding:40px 46px}
.app-strip h2{font-size:28px}
.app-strip p{color:var(--muted);margin-top:8px;max-width:30em}
.store-btns{display:flex;gap:14px;flex-shrink:0}
.store-btn{background:var(--navy);border-radius:12px;padding:13px 22px;color:#fff;text-decoration:none;font-weight:700;font-size:14.5px;display:flex;align-items:center;gap:8px}
.store-btn:hover{background:var(--navy-soft)}

/* Page hero (photo banner) */
.page-hero{position:relative;min-height:320px;display:flex;align-items:flex-end;overflow:hidden}
.page-hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 28%}
.page-hero img.bg2{opacity:0;transition:opacity 1.1s ease}
.page-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,31,58,.25) 0%,rgba(14,31,58,.78) 100%);z-index:1}
.page-hero .ph-inner{position:relative;z-index:2;max-width:1200px;margin:0 auto;width:100%;padding:70px 24px 42px;color:#fff}
.page-hero .kicker{color:var(--yellow)}
.page-hero .kicker::before{background:var(--yellow)}
.page-hero h1{color:#fff;font-size:clamp(36px,4.6vw,58px)}
.page-hero p.sub{margin-top:10px;font-size:18px;color:#DCE5F2;max-width:38em}
.page-hero.short{min-height:240px}
/* Desktop gets a much taller banner so the photography actually reads;
   mobile keeps the compact 320px band. */
@media (min-width:900.02px){.page-hero{min-height:clamp(440px,52vh,560px)}}

/* Plain page head (no photo) */
.page-head{background:var(--cloud);border-bottom:1px solid var(--line)}
section.page-head{padding:0}
.page-head .ph-inner{max-width:1200px;margin:0 auto;padding:26px 24px 22px}
.page-head h1{font-size:clamp(28px,3.4vw,40px);color:var(--navy)}
.page-head p.sub{margin-top:8px;font-size:16px;color:var(--muted);max-width:38em}
.page-head .kicker{margin-bottom:10px}

.kicker{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:18px}
.kicker::before{content:"";width:26px;height:3px;background:var(--red)}
h1{font-size:clamp(38px,4.8vw,62px);line-height:1.05;font-weight:900;letter-spacing:-.02em;text-transform:uppercase;color:var(--navy)}
h2{font-size:clamp(26px,3.2vw,38px);font-weight:900;text-transform:uppercase;letter-spacing:-.01em;line-height:1.1;color:var(--navy)}

section{padding:70px 0}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.sec-head{max-width:660px;margin-bottom:38px}
.sec-head p{margin-top:12px;color:var(--muted);font-size:17px}
.sep{border:none;height:1px;background:var(--line);margin:54px 0 46px}

/* City sub-nav */
html{scroll-behavior:smooth}
/* Sticky toolbar glass: light Regular material; offset derives from the
   shared --header-h token (was a hardcoded 74px vs the real 73px bar). */
.subnav{position:sticky;top:var(--header-h);z-index:40;background:#fff;border-bottom:1px solid var(--line)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .subnav{background:var(--glass-light);-webkit-backdrop-filter:blur(18px) saturate(var(--glass-sat));backdrop-filter:blur(18px) saturate(var(--glass-sat));border-bottom:1px solid var(--glass-hairline)}
}
.subnav-inner{max-width:1200px;margin:0 auto;padding:0 24px;display:flex;gap:4px;overflow-x:auto}
.subnav a{padding:15px 14px 13px;font-weight:700;font-size:14.5px;color:#47506B;text-decoration:none;border-bottom:2.5px solid transparent;white-space:nowrap;transition:color .15s,border-color .15s}
.subnav a:hover{color:var(--navy)}
.subnav a.on{color:var(--navy);border-bottom-color:var(--navy)}
.jump{scroll-margin-top:calc(var(--header-h) + 55px)}
.alt{background:var(--cloud);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* City finder */
.finder{position:relative;max-width:520px}
.finder input{
  width:100%;padding:18px 22px;font-size:17px;border-radius:14px;border:2px solid #C9D3E2;
  background:#fff;color:var(--ink);outline:none;box-shadow:0 8px 24px rgba(21,44,80,.07);
}
.finder input:focus{border-color:var(--navy)}
.finder-results{
  position:absolute;left:0;right:0;top:calc(100% + 8px);background:#fff;border:1px solid var(--line);
  border-radius:14px;max-height:280px;overflow:auto;display:none;z-index:40;box-shadow:0 24px 60px rgba(21,44,80,.18)
}
/* menu glass — high fill because it floats over hero photography */
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .finder-results{background:rgba(255,255,255,.90);-webkit-backdrop-filter:blur(var(--glass-blur-menu)) saturate(var(--glass-sat));backdrop-filter:blur(var(--glass-blur-menu)) saturate(var(--glass-sat));border-color:var(--glass-hairline)}
}
.finder-results a{display:flex;justify-content:space-between;align-items:center;padding:13px 20px;color:var(--ink);text-decoration:none;font-weight:600;font-size:15.5px;border-bottom:1px solid #EEF1F6}
.finder-results a:last-child{border-bottom:0}
.finder-results a:hover{background:var(--cloud)}
.finder-results a span{font-size:12px;color:var(--navy);font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.finder-hint{margin-top:12px;font-size:13.5px;color:var(--muted)}
.finder-hint a{color:var(--navy);font-weight:700}

/* City directory */
.city-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.city-card{
  display:flex;justify-content:center;align-items:center;background:var(--navy);border:1.5px solid var(--navy);
  border-radius:10px;padding:11px 12px;color:#fff;text-decoration:none;font-weight:700;font-size:14px;text-align:center;
  transition:transform .1s ease,background .12s,border-color .1s,box-shadow .12s;
}
.city-card:hover{transform:translateY(-2px);background:#1F3D6E;border-color:#1F3D6E;box-shadow:0 10px 24px rgba(21,44,80,.22)}

/* Sports chips */
.sports{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.sport{
  background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:22px 16px;text-align:center;
  font-weight:800;font-size:15.5px;color:var(--navy);transition:transform .12s ease,border-color .12s,box-shadow .12s;
}
.sport:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(21,44,80,.10)}
.sport em{display:flex;justify-content:center;font-style:normal;margin-bottom:10px;color:var(--navy)}
.sport em svg{width:26px;height:26px;display:block}
.sport:nth-child(7n+1):hover{border-color:var(--red)}.sport:nth-child(7n+2):hover{border-color:var(--orange)}
.sport:nth-child(7n+3):hover{border-color:#E0C400}.sport:nth-child(7n+4):hover{border-color:var(--green)}
.sport:nth-child(7n+5):hover{border-color:var(--blue)}.sport:nth-child(7n+6):hover{border-color:var(--sky)}
.sport:nth-child(7n):hover{border-color:var(--pink)}

/* Tournament cards */
.event{border-radius:22px;overflow:hidden;display:grid;grid-template-columns:1.2fr .8fr;box-shadow:0 24px 60px rgba(21,44,80,.16);margin-bottom:34px}
.event.green{background:linear-gradient(135deg,#0c3b24,#14532d)}
.event.navy{background:linear-gradient(135deg,#122745,#1E3A66)}
.event.cc27{background:linear-gradient(135deg,#521B2A,#823047)}
.event.cc27 .event-txt .meta{color:#F2D8DE}
.event.cc27 .event-txt p{color:#E9C7CF}
.event-txt{padding:46px}
.event-txt .tag{display:inline-block;background:var(--yellow);color:#1c1c1c;font-weight:900;font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:7px 14px;border-radius:999px;margin-bottom:18px}
.event-txt .tag.past{background:#8FA2C4;color:var(--navy-2)}
.event-txt h3{font-size:32px;font-weight:900;text-transform:uppercase;line-height:1.08;color:#fff}
.event-txt .meta{margin:14px 0 10px;font-weight:700;color:#D6E4F5;font-size:16.5px}
.event.green .event-txt .meta{color:#d6f5e3}
.event-txt p{color:#C4D0E4;max-width:34em}
.event.green .event-txt p{color:#c2e8d2}
.event-txt .btn{margin-top:26px}
.event-art{display:flex;align-items:center;justify-content:center;padding:30px;background:rgba(255,255,255,.06)}
.event-art img{max-width:82%;max-height:280px;filter:drop-shadow(0 18px 40px rgba(0,0,0,.35))}

/* Tabs */
/* Segmented control — lives in the CONTENT layer, so deliberately NOT glass
   (HIG: glass is for the floating functional layer only). Concentric radii:
   12px track − 4px padding = 8px tabs. Gel press only. */
.tabs{display:inline-flex;background:#EDF1F7;border:1px solid var(--line);border-radius:12px;padding:4px;gap:4px;margin-bottom:26px}
.tab{border:none;background:transparent;padding:10px 22px;border-radius:8px;font-weight:800;font-size:14.5px;color:var(--muted);cursor:pointer;transition:background .15s,color .15s,box-shadow .15s,transform .15s var(--spring)}
.tab:hover{color:var(--navy)}
.tab:active{transform:scale(.96)}
.tab.active{background:var(--navy);color:#fff;box-shadow:0 2px 6px rgba(21,44,80,.28)}
.rules-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:26px}
.rules-bar .tabs{margin-bottom:0}
#docFilter{padding:11px 16px;border:1px solid var(--line);border-radius:10px;font-size:14.5px;min-width:240px;outline:none;background:#fff;color:var(--navy);transition:border-color .15s}
#docFilter:focus{border-color:var(--navy)}
#docFilter::placeholder{color:var(--muted)}
.wrap-sub{color:var(--muted);margin-bottom:22px}
.sec-head .kicker{margin-bottom:10px}
.doc span{line-height:1.3}
.logo-tile{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;text-decoration:none;color:var(--navy);font-weight:700;font-size:15px;transition:transform .14s,border-color .14s,box-shadow .14s}
.logo-tile:hover{transform:translateY(-2px);border-color:var(--navy);box-shadow:0 12px 28px rgba(21,44,80,.10)}
.logo-tile .thumb{display:block;background:#fff;border-bottom:1px solid var(--line);height:160px}
.logo-tile .thumb img{width:100%;height:100%;object-fit:contain;padding:14px;box-sizing:border-box}
.logo-tile .lt-name{padding:13px 16px}
.logo-tile small{display:block;font-weight:600;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.06em;margin-top:2px}

/* Doc / resource lists */
.doc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.doc{
  position:relative;display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:16px 44px 16px 18px;color:var(--navy);text-decoration:none;font-weight:700;font-size:15.5px;letter-spacing:-.01em;
  transition:transform .14s ease,border-color .14s,box-shadow .14s;
}
.doc::after{content:"\2192";position:absolute;right:18px;top:50%;transform:translate(-6px,-50%);font-weight:800;color:var(--navy);opacity:0;transition:opacity .14s,transform .14s}
.doc:hover{transform:translateY(-2px);border-color:var(--navy);box-shadow:0 12px 28px rgba(21,44,80,.10)}
.doc:hover::after{opacity:1;transform:translate(0,-50%)}
.doc .ico{width:42px;height:42px;flex-shrink:0;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--cloud);border:1px solid var(--line);color:var(--navy);transition:background .14s,color .14s,border-color .14s}
.doc:hover .ico{background:var(--navy);border-color:var(--navy);color:#fff}
.doc .ico svg{width:20px;height:20px;display:block}
.doc .ico .ico-img{width:28px;height:28px;display:block;background-color:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}
/* Sport icons — official set, one class per sport. PNG alpha is the mask, color inherits from currentColor.
   Usage anywhere on the site: <span class="spico spico-kickball"></span>. New sport: drop /sport-icons/<sport>.png, add a line here. */
.spico{display:block;width:24px;height:24px;background-color:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}
.spico-basketball{-webkit-mask-image:url(/sport-icons/basketball.png);mask-image:url(/sport-icons/basketball.png)}
.spico-billiards{-webkit-mask-image:url(/sport-icons/billiards.png);mask-image:url(/sport-icons/billiards.png)}
.spico-bocce{-webkit-mask-image:url(/sport-icons/bocce.png);mask-image:url(/sport-icons/bocce.png)}
.spico-bowling{-webkit-mask-image:url(/sport-icons/bowling.png);mask-image:url(/sport-icons/bowling.png)}
.spico-cornhole{-webkit-mask-image:url(/sport-icons/cornhole.png);mask-image:url(/sport-icons/cornhole.png)}
.spico-darts{-webkit-mask-image:url(/sport-icons/darts.png);mask-image:url(/sport-icons/darts.png)}
.spico-dodgeball{-webkit-mask-image:url(/sport-icons/dodgeball.png);mask-image:url(/sport-icons/dodgeball.png)}
.spico-kickball{-webkit-mask-image:url(/sport-icons/kickball.png);mask-image:url(/sport-icons/kickball.png)}
.spico-pickleball{-webkit-mask-image:url(/sport-icons/pickleball.png);mask-image:url(/sport-icons/pickleball.png)}
.spico-soccer{-webkit-mask-image:url(/sport-icons/soccer.png);mask-image:url(/sport-icons/soccer.png)}
.spico-softball{-webkit-mask-image:url(/sport-icons/softball.png);mask-image:url(/sport-icons/softball.png)}
.spico-spades{-webkit-mask-image:url(/sport-icons/spades.png);mask-image:url(/sport-icons/spades.png)}
.spico-volleyball{-webkit-mask-image:url(/sport-icons/volleyball.png);mask-image:url(/sport-icons/volleyball.png)}
.sport em .spico{width:26px;height:26px}
.doc .ico .spico{width:28px;height:28px}
.doc small{display:block;font-weight:600;color:var(--muted);font-size:12.5px;text-transform:uppercase;letter-spacing:.06em}
.note{display:block;margin-top:20px;background:var(--cloud);border:1px solid var(--line);border-left:3px solid var(--navy);border-radius:10px;padding:12px 16px;color:var(--muted);font-size:14.5px}
.note a{color:var(--navy);font-weight:700}

/* Timeline */
.timeline{position:relative;margin-top:10px}
.timeline::before{content:"";position:absolute;left:19px;top:6px;bottom:6px;width:4px;border-radius:2px;background:var(--rainbow)}
.tl-item{position:relative;padding:0 0 34px 62px}
.tl-item:last-child{padding-bottom:0}
.tl-item .dot{position:absolute;left:8px;top:4px;width:26px;height:26px;border-radius:50%;background:#fff;border:5px solid var(--navy)}
.tl-item h3{font-size:20px;font-weight:900;color:var(--navy);text-transform:uppercase}
.tl-item p{color:var(--muted);max-width:46em;margin-top:4px}

/* Photo gallery */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.album{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:4/3;display:block;text-decoration:none;box-shadow:0 14px 34px rgba(21,44,80,.14)}
.album img{width:100%;height:100%;object-fit:cover;transition:transform .25s ease}
.album:hover img{transform:scale(1.04)}
.album b{position:absolute;left:0;right:0;bottom:0;padding:40px 18px 14px;color:#fff;font-size:17px;font-weight:800;background:linear-gradient(180deg,rgba(14,31,58,0),rgba(14,31,58,.85))}

/* Logo asset grid */
.logo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.logo-card{background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:18px;text-align:center;color:var(--navy);text-decoration:none;font-weight:700;font-size:14px;transition:transform .1s,box-shadow .12s}
.logo-card:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(21,44,80,.10)}
.logo-card .swatch{height:110px;border-radius:10px;background:var(--cloud);display:flex;align-items:center;justify-content:center;margin-bottom:12px;font-size:34px}
.logo-card small{display:block;color:var(--muted);font-weight:600;font-size:12px}

/* Contact */
.contact-card{background:#fff;border:1.5px solid var(--line);border-radius:22px;padding:46px;box-shadow:0 18px 44px rgba(21,44,80,.08);display:grid;grid-template-columns:1fr 1fr;gap:40px}
.contact-card h3{font-size:22px;font-weight:900;text-transform:uppercase;color:var(--navy);margin-bottom:10px}
.contact-card p{color:var(--muted)}
.contact-card .big-mail{display:inline-block;margin-top:16px;font-size:clamp(16px,6.4vw,22px);font-weight:900;color:var(--navy);text-decoration:none;border-bottom:3px solid;border-image:var(--rainbow) 1;overflow-wrap:anywhere}
.social-row{display:flex;gap:12px;margin-top:18px}
.social-row a{width:46px;height:46px;border-radius:12px;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;text-decoration:none;font-weight:800;font-size:15px}
.social-row a:hover{background:var(--navy-soft)}

/* Stats band */
.stats{background:var(--navy)}
.stats-inner{max-width:1200px;margin:0 auto;padding:34px 24px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;text-align:center}
.stat b{display:block;font-size:36px;font-weight:900;letter-spacing:-.02em;color:#fff}
.stat:nth-child(1) b{color:#FF6B70}.stat:nth-child(2) b{color:var(--yellow)}
.stat:nth-child(3) b{color:#4ED88F}.stat:nth-child(4) b{color:var(--sky)}
.stat i{font-style:normal;font-size:13.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#9FB0CC}

/* CTA band */
.cta-band{background:var(--navy)}
.cta-band .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-top:52px;padding-bottom:52px}
.cta-band h2{color:#fff}
.cta-band p{color:#C4D0E4;margin-top:6px}

footer{background:var(--navy-2);padding:54px 0 34px;color:#fff}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:36px;margin-bottom:38px}
.foot-grid h4{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#8FA2C4;margin-bottom:14px}
.foot-grid a{display:block;color:#D9E2F2;text-decoration:none;font-size:15px;margin-bottom:9px}
.foot-grid a:hover{color:#fff}
.foot-brand{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.foot-brand img{width:42px;height:42px}
.social-icons{display:flex;gap:14px;margin-top:4px}
.social-icons a{display:inline-flex}
.social-icons svg{width:24px;height:24px;color:#C7D3E8}
.social-icons a:hover svg{color:#fff}
.foot-note{color:#8FA2C4;font-size:13.5px;border-top:1px solid #24406B;padding-top:22px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

@keyframes navDrop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.about-cols{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:start}
@media (max-width:900px){
  header nav{display:none}
  .about-cols{grid-template-columns:1fr;gap:40px}
  /* Mobile menu = large glass sheet. Large surfaces stay steadier and more
     opaque than small controls (88% fill) so links never flicker over page
     content. Scrolls within the viewport and respects the home-indicator
     safe area on notched phones. */
  body.nav-open header nav{display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:var(--navy-2);padding:8px 24px calc(20px + env(safe-area-inset-bottom,0px));gap:0;box-shadow:0 22px 34px rgba(14,31,58,.38);z-index:60;animation:navDrop .22s ease;max-height:calc(100vh - var(--header-h));max-height:calc(100dvh - var(--header-h));overflow-y:auto;overscroll-behavior:contain}
  @supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
    body.nav-open header nav{background:var(--glass-dark-sheet);-webkit-backdrop-filter:blur(28px) saturate(160%);backdrop-filter:blur(28px) saturate(160%)}
  }
  body.nav-open header nav a{padding:13px 0;font-size:16.5px;border-bottom:1px solid rgba(255,255,255,.08)}
  body.nav-open header nav a.active{border-bottom:1px solid rgba(255,255,255,.08);text-decoration:underline;text-underline-offset:6px}
  body.nav-open header nav a.cta{margin-top:14px;text-align:center;border-bottom:0}
  .nav-wrap{position:relative;justify-content:center}
  .brand img{position:absolute;left:16px;top:50%;transform:translateY(-50%)}
  .menu-toggle{display:flex;position:absolute;right:12px;top:50%;transform:translateY(-50%);margin-left:0}
  .hero-full{min-height:560px}
  .hero-full .hf-inner{padding:44px 20px 16px}
  .steps{grid-template-columns:1fr;gap:30px}
  .community .wrap{grid-template-columns:1fr}
  .app-strip .wrap{flex-direction:column;align-items:flex-start}
  .city-grid{grid-template-columns:repeat(2,1fr)}
  .sports{grid-template-columns:repeat(2,1fr)}
  .event{grid-template-columns:1fr}
  .doc-grid{grid-template-columns:1fr}
  .tabs{display:flex;width:100%}
  .tab{flex:1;padding:10px 10px;font-size:13.5px}
  #docFilter{width:100%}
  .gallery{grid-template-columns:1fr 1fr}
  .logo-grid{grid-template-columns:repeat(2,1fr)}
  .contact-card{grid-template-columns:1fr;padding:32px}
  .stats-inner{grid-template-columns:repeat(3,1fr)}
  footer{padding:40px 0 22px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:24px 18px;margin-bottom:22px}
  .foot-grid>div:first-child{grid-column:1/-1}
  .foot-brand{margin-bottom:4px}
  .foot-note{flex-direction:column;gap:8px;text-align:center;padding-top:18px}
  .foot-grid{grid-template-columns:1fr 1fr}
  /* Tournaments dropdown flattens into the mobile menu as indented links */
  .navdrop{display:contents}
  .nd-caret{display:none}
  .nd-menu{position:static;opacity:1;visibility:visible;transform:none;transition:none;background:transparent;box-shadow:none;padding:0;min-width:0;border-radius:0;border:0;-webkit-backdrop-filter:none;backdrop-filter:none}
  /* JS-enhanced mobile accordion: design-live.js stamps body.ndjs, then the
     WHOLE Tournaments row (label + arrow together) becomes one disclosure
     button — the anchor gets role=button/aria-expanded and design-live.js
     intercepts its click. Without JS (e.g. 404) the flattened always-open
     menu above stays in effect, so nothing is ever unreachable. */
  body.ndjs .navdrop{display:block}
  /* Optical centering: the caret (10px) + its 8px gap sit after the label, so
     an equal left pad keeps "Tournaments" on the menu's true centerline. The
     row keeps a 48px min hit target. */
  body.ndjs .navdrop>a{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;padding-left:18px}
  body.ndjs .nd-caret{display:inline-block;margin-left:0;flex:0 0 auto}
  /* Subtle entrance: menu items rise in with a soft stagger when the hamburger
     opens. Purely decorative - switched off for reduced-motion users. */
  @media (prefers-reduced-motion: no-preference){
    body.nav-open header nav>*{animation:ndNavIn .34s cubic-bezier(.22,.9,.35,1) both}
    body.nav-open header nav>*:nth-child(1){animation-delay:.02s}
    body.nav-open header nav>*:nth-child(2){animation-delay:.06s}
    body.nav-open header nav>*:nth-child(3){animation-delay:.10s}
    body.nav-open header nav>*:nth-child(4){animation-delay:.14s}
    body.nav-open header nav>*:nth-child(5){animation-delay:.18s}
    body.nav-open header nav>*:nth-child(6){animation-delay:.22s}
    body.nav-open header nav>*:nth-child(7){animation-delay:.26s}
    body.nav-open header nav>*:nth-child(8){animation-delay:.30s}
    body.nav-open header nav>*:nth-child(9){animation-delay:.34s}
    body.nav-open header nav>*:nth-child(10){animation-delay:.38s}
  }
  @keyframes ndNavIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  /* The submenu stays rendered but collapsed (max-height:0 + overflow clip)
     so open/close is one smooth height reveal; visibility keeps closed items
     out of the tab order and off screen readers. The 2px vertical / 4px side
     padding leaves room for the submenu links' focus rings. Cap comfortably
     above the 3-row content so the ease never visibly clips. */
  body.ndjs .nd-menu{max-height:0;overflow:hidden;visibility:hidden;padding:2px 4px;
    transition:max-height .34s var(--ease-glass),visibility .34s}
  body.ndjs .navdrop:hover .nd-caret{transform:none}
  body.ndjs .navdrop.nd-open .nd-menu{max-height:280px;visibility:visible}
  body.ndjs .navdrop.nd-open .nd-caret{transform:rotate(180deg)}
  /* The mobile submenu lists ONLY the two tournaments (Keith, 2026-07-22).
     The parent row stays a pure disclosure button, so /tournaments has no
     mobile nav entry by design — it is reached from in-page links. The
     .nd-all row stays hidden here just like on desktop. */
  /* must outrank the (0,3,0) desktop open-state rule or hover/focus re-applies translate(-50%) */
  .navdrop:hover .nd-menu,.navdrop:focus-within .nd-menu{transform:none}
  .nd-menu::before{display:none}
  body.nav-open header nav .nd-menu a{padding:12px 0 12px 22px;border-radius:0;border-bottom:1px solid rgba(255,255,255,.08)}
  body.nav-open header nav .nd-menu a b{color:#DCE5F5;font-size:15px;font-weight:700}
  body.nav-open header nav .nd-menu a span{color:#9FB0D0;font-size:12px;margin-top:1px}
  .nd-menu a:hover{background:none}
}


/* Mobile: lighter album captions on the photos grid */
@media(max-width:600px){.gallery .album b{font-size:13px;line-height:1.35}}

/* ≤380px: the centered nowrap brand name must clear the absolute logo (left)
   and the 44px hamburger (right) without touching either */
@media(max-width:380px){.brand-name{font-size:13px;letter-spacing:.04em}}
@media(max-width:330px){.brand-name{font-size:11.5px;letter-spacing:.02em}}

/* Modern city-search dropdown */
.finder-results{border-radius:16px;padding:6px;box-shadow:0 24px 60px rgba(21,44,80,.22);animation:fresDrop .18s ease}
.finder-results a{border-bottom:0;border-radius:10px;padding:12px 16px}
.finder-results a::after{content:'→';opacity:0;transform:translateX(-4px);transition:opacity .15s,transform .15s;font-weight:800}
.finder-results a:hover{background:var(--navy);color:#fff}
.finder-results a:hover::after{opacity:1;transform:none}
@keyframes fresDrop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ===== Liquid Glass — accessibility + environment adaptations =====
   The material must never be the only thing standing between the user and
   legibility. Each block below re-solidifies the glass when the user (or
   the platform) asks for it. These blocks (and the focus rules after them)
   MUST stay last in this file so they win the cascade — add new rules
   ABOVE this banner. `node tools/check-glass.mjs` enforces this. */

/* Reduced transparency: frost the glass to near-opaque, drop the blur.
   (.nd-menu only above 900px — inside the mobile drawer it must stay the
   transparent flattened list, not a white patch.) */
@media (prefers-reduced-transparency:reduce){
  header,header::before{background:var(--navy);-webkit-backdrop-filter:none;backdrop-filter:none}
  header::after{content:none}
  @media (min-width:900.02px){.nd-menu{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}}
  .finder-results{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;animation:none}
  .subnav{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
  body.nav-open header nav{background:var(--navy-2);-webkit-backdrop-filter:none;backdrop-filter:none}
  .btn.ghost{background:rgba(14,31,58,.55);-webkit-backdrop-filter:none;backdrop-filter:none}
  .btn.ghost:hover{background:rgba(14,31,58,.78)} /* (0,3,0) — must match the base hover's specificity */
}

/* Increased contrast: opaque surfaces, pronounced edges, stronger states. */
@media (prefers-contrast:more){
  header,header::before{background:var(--navy-2);-webkit-backdrop-filter:none;backdrop-filter:none}
  header::after{content:none}
  nav a{color:#E8EEF8}
  @media (min-width:900.02px){.nd-menu{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;border:2px solid var(--navy)}}
  .nd-menu a span{color:var(--muted)}
  .finder-results{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;border:2px solid var(--navy)}
  .subnav{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:2px solid var(--navy)}
  body.nav-open header nav{background:var(--navy-2);-webkit-backdrop-filter:none;backdrop-filter:none;border-top:2px solid #fff}
  .btn.ghost{background:var(--navy-2);border-color:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
  .btn.ghost:hover{background:var(--navy)} /* opaque hover that still reads as feedback */
}

/* Reduced motion: state changes stay, elasticity and light-play go. The
   rainbowFlow guard higher up already stops the header's drifting line. */
@media (prefers-reduced-motion:reduce){
  header{animation:none;box-shadow:0 10px 26px -14px rgba(14,31,58,.4)}
  header::after{content:none}
  @media (min-width:900.02px){.nd-menu{transition:opacity .12s,visibility .12s;transform:translate(-50%,0) scale(1)}}
  body.ndjs .nd-menu{transition:none} /* accordion snaps open/closed */
  .nd-caret{transition:none}
  .btn,.btn:hover,.btn:active,.tab:active{transform:none;transition:background .12s,color .12s}
  .menu-toggle:active{transform:translateY(-50%)} /* keep the positioning transform, drop only the squish */
  .finder-results{animation:none}
  body.nav-open header nav{animation:none}
}

/* Forced colors (Windows High Contrast): the UA strips backgrounds; give
   every floating surface a real border so structure survives. */
@media (forced-colors:active){
  header{border-bottom:1px solid CanvasText}
  .nd-menu,.finder-results,.subnav{border:1px solid CanvasText}
  nav a.active{text-decoration:underline}
}

/* Visible keyboard focus on the functional layer (was outline-free).
   Ring color follows the surface: sky on the dark header/drawer, navy on
   light toolbars; buttons get a two-tone ring (navy + white halo) so it
   reads on white content, navy bands, and heroes alike. No border-radius
   on controls — outlines follow each element's own corners. */
header nav a:focus-visible,.menu-toggle:focus-visible{outline:2px solid var(--sky);outline-offset:3px;border-radius:6px}
.subnav a:focus-visible{outline:2px solid var(--navy);outline-offset:-3px;border-radius:6px}
.tab:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.btn:focus-visible{outline:2px solid var(--navy);box-shadow:0 0 0 5px rgba(255,255,255,.9)}
@media (min-width:900.02px){.nd-menu a:focus-visible{outline:2px solid var(--navy);outline-offset:-2px}}

/* ---- Quick Human Check (tournament contact + sponsor forms) ----
   The same sport-icon picker /contact runs, injected by cc-classic.js.
   Colors ride the tournament theme vars (.cc-theme maroon / .pg-theme green);
   --cchc-bd is set per theme to match that form's input borders. */
.cchc{margin-top:18px;background:var(--paper,#F6F8FC);border:1.5px solid var(--cchc-bd,#CDD8E7);border-radius:14px;padding:15px 16px}
.cchc-kick{display:block;font-size:11px;font-weight:800;letter-spacing:2.4px;text-transform:uppercase;color:#8A6114}
.cchc-ask{display:block;font-weight:800;font-size:15px;color:var(--mar,#152C50);margin-top:4px}
.cchc-icons{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px;margin-top:12px;min-height:52px;align-items:center}
.cchc .cchc-ic{width:100%;aspect-ratio:1;max-height:60px;margin:0;border-radius:12px;border:1.5px solid var(--cchc-bd,#CDD8E7);background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--mar,#152C50);padding:0;font-size:inherit;box-shadow:0 1px 4px rgba(0,0,0,.05);transition:transform .15s,border-color .15s,background .15s,box-shadow .15s}
.cchc .cchc-ic .spico{width:24px;height:24px}
.cchc .cchc-ic:hover{border-color:var(--org,#C99B3F);background:#fff;transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.12)}
.cchc .cchc-ic.on,.cchc .cchc-ic.on:hover{background:var(--mar,#152C50);border-color:var(--mar,#152C50);color:#fff;transform:none;box-shadow:0 8px 20px rgba(0,0,0,.25)}
.cchc .cchc-ic:focus-visible,.cchc .cchc-retry:focus-visible{outline:3px solid #8A6420;outline-offset:2px}
.cchc-note{font-size:12.5px;color:var(--ink,#5A6A80);grid-column:1/-1}
.cchc .cchc-retry{grid-column:1/-1;justify-self:start;margin:0;background:none;border:0;border-radius:0;cursor:pointer;font:inherit;font-size:13.5px;font-weight:800;color:var(--mar,#152C50);text-decoration:underline;padding:6px 0}
.cchc-locked{text-align:center;padding:26px 8px}
.cchc-locked svg{width:52px;height:52px;stroke:var(--org,#B27F26);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;margin-bottom:12px}
.cchc-locked h3{font-size:21px;font-weight:800;color:var(--mar,#152C50);margin:0 0 8px}
.cchc-locked p{font-size:14.5px;line-height:1.6;color:var(--ink,#44536A);margin:0 auto;max-width:34em}
.cchc-locked a{color:var(--mar,#152C50);font-weight:800}
.cchc-locked label{display:block;text-align:left;font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#8A6114;margin:18px 0 6px}
.cchc-locked textarea{width:100%;min-height:110px;padding:12px 14px;border-radius:12px;border:2px solid var(--cchc-bd,#CFD9E6);background:#fff;color:var(--ink,#333);font:inherit;font-size:14.5px;resize:vertical}
@media (max-width:640px){.cchc-icons{grid-template-columns:repeat(4,minmax(0,1fr))}.cchc .cchc-ic{max-height:none}}
@media (prefers-reduced-motion:reduce){.cchc .cchc-ic,.cchc .cchc-ic:hover{transition:none;transform:none}}