/* =========================================================================
   FREE SAILING · CLASS HUB  —  built from Functional Specification v2.0
   and the supplied mockups (image2–image7). No build step, no framework,
   no external requests.
   Palette measured from the Free Sailing logo; orange CTA accent from the
   mockups.
   ========================================================================= */

:root{
  --navy:      #022B83;
  --navy-deep: #011C57;
  --cyan:      #02A2EE;
  --teal:      #01B9BA;
  --hl:        #22DDF9;
  --pale:      #EEF3F8;
  --ink:       #0D1417;

  --orange:      #F98A57;
  --orange-deep: #EE7442;

  --ink-60:  #48555C;
  --ink-40:  #74838B;
  --line:    #DCE5EF;
  --line-2:  #EAF0F7;
  --white:   #fff;

  --sans: "DIN Next LT Pro","DIN Next","DIN Next W01","Helvetica Neue",Helvetica,Arial,sans-serif;

  --shadow-1: 0 1px 2px rgba(2,43,131,.05), 0 6px 18px rgba(2,43,131,.05);
  --shadow-2: 0 2px 6px rgba(2,43,131,.07), 0 18px 44px rgba(2,43,131,.10);

  --r:   14px;
  --r-s: 9px;
  --hd:  64px;
  --wrap: 1240px;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--pale);
  font-size:16px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img{ max-width:100%; display:block; }
a{ color:var(--navy); text-decoration:none; }
a:hover{ text-decoration:underline; }
button{ font:inherit; color:inherit; }
h1,h2,h3,h4{ margin:0; line-height:1.12; letter-spacing:-.015em; font-weight:700; }
p{ margin:0; }

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 22px; }

/* ---------------------------------------------------------------- header */
.site-hd{
  background:var(--navy);
  position:sticky; top:0; z-index:60;
  box-shadow:0 1px 0 rgba(255,255,255,.10), 0 6px 20px rgba(1,20,60,.18);
}
.hd-in{
  max-width:var(--wrap); margin:0 auto; padding:0 22px;
  height:var(--hd); display:flex; align-items:center; gap:20px;
}
.lockup{ display:flex; align-items:center; gap:11px; flex:0 0 auto; text-decoration:none; }
.lockup:hover{ text-decoration:none; }
.lockup .mark{
  display:block; width:118px; border-radius:5px; overflow:hidden;
  background:#EDF2F9; line-height:0; flex:0 0 auto;
}
.lockup .mark img{ width:100%; height:auto; }
.lockup .byline{
  color:#C9D9F2; font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  font-weight:600; line-height:1.15; max-width:88px;
}

.hd-nav{ display:flex; align-items:center; gap:4px; margin-left:auto; }
.hd-nav a{
  color:#D6E2F6; text-decoration:none; font-size:14.5px; font-weight:500;
  padding:21px 13px 20px; position:relative; white-space:nowrap; letter-spacing:.005em;
}
.hd-nav a:hover{ color:#fff; text-decoration:none; }
.hd-nav a.is-active{ color:#fff; font-weight:700; }
.hd-nav a.is-active::after{
  content:""; position:absolute; left:11px; right:11px; bottom:11px;
  height:3px; border-radius:2px; background:var(--hl);
}
.hd-nav a.share{ color:var(--orange); font-weight:700; letter-spacing:.05em; text-transform:uppercase; font-size:13.5px; }
.hd-nav a.share:hover{ color:#FFB68F; }

.hd-right{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.hd-search{
  width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.28);
  background:transparent; display:grid; place-items:center; cursor:pointer; color:#D6E2F6;
}
.hd-search:hover{ background:rgba(255,255,255,.10); color:#fff; }
.btn-cta{
  background:linear-gradient(180deg,var(--orange),var(--orange-deep));
  color:#fff !important; border:0; border-radius:999px;
  padding:10px 19px; font-weight:700; font-size:14px; white-space:nowrap; cursor:pointer;
  box-shadow:0 2px 8px rgba(238,116,66,.42);
}
.btn-cta:hover{ text-decoration:none; filter:brightness(1.05); }

.burger{
  display:none; width:40px; height:38px; border-radius:9px; cursor:pointer;
  border:1px solid rgba(255,255,255,.28); background:transparent;
}
.burger span{ display:block; width:18px; height:2px; background:#fff; margin:3px auto; border-radius:2px; }

.hd-drawer{ display:none; background:var(--navy-deep); border-top:1px solid rgba(255,255,255,.12); }
.hd-drawer.open{ display:block; }
.hd-drawer a{
  display:block; color:#D6E2F6; padding:13px 22px; font-size:15.5px; font-weight:500;
  border-bottom:1px solid rgba(255,255,255,.07); text-decoration:none;
}
.hd-drawer a.is-active{ color:#fff; font-weight:700; box-shadow:inset 3px 0 0 var(--hl); }
.hd-drawer .drawer-foot{ display:flex; gap:10px; padding:14px 22px 18px; }
.hd-drawer .drawer-foot a{ border:0; padding:0; }
.dr-search{
  flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid rgba(255,255,255,.3) !important; border-radius:999px; padding:10px 14px !important;
  color:#fff !important; font-weight:600;
}

/* -------------------------------------------------------- class sub-nav */
.classbar{ background:#fff; border-bottom:1px solid var(--line); }
.classbar-in{
  max-width:var(--wrap); margin:0 auto; padding:0 22px;
  display:flex; align-items:center; gap:18px; overflow-x:auto; scrollbar-width:none;
}
.classbar-in::-webkit-scrollbar{ display:none; }
.classbar .cb-name{
  font-weight:700; color:var(--navy); font-size:14px; padding:13px 0;
  white-space:nowrap; letter-spacing:.02em; text-transform:uppercase;
}
.classbar .cb-name em{ font-style:normal; color:var(--ink-40); font-weight:600; }
.classbar a{
  color:var(--ink-60); font-size:14px; font-weight:600; padding:14px 2px 11px;
  border-bottom:3px solid transparent; white-space:nowrap; text-decoration:none;
}
.classbar a:hover{ color:var(--navy); text-decoration:none; }
.classbar a.is-active{ color:var(--navy); border-bottom-color:var(--cyan); }

/* -------------------------------------------------------------- helpers */
.section{ padding:34px 0; }
.section-hd{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:16px; flex-wrap:wrap; }
.section-hd h2{ font-size:26px; color:var(--navy); }
.section-hd .sub{ color:var(--ink-40); font-size:14.5px; margin-top:5px; }
.section-hd .more{ font-size:14px; font-weight:700; color:var(--cyan); }

.eyebrow{
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--cyan);
}
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow-1);
}
.card-pad{ padding:22px; }
.grid{ display:grid; gap:18px; }
.g2{ grid-template-columns:repeat(2,1fr); }
.g3{ grid-template-columns:repeat(3,1fr); }
.g4{ grid-template-columns:repeat(4,1fr); }
.muted{ color:var(--ink-40); }
.small{ font-size:13.5px; }
.tiny{ font-size:12px; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius:999px; padding:11px 20px; font-weight:700; font-size:14.5px;
  border:1px solid transparent; cursor:pointer; text-decoration:none; white-space:nowrap;
}
.btn:hover{ text-decoration:none; filter:brightness(1.04); }
.btn-orange{ background:linear-gradient(180deg,var(--orange),var(--orange-deep)); color:#fff; box-shadow:0 2px 8px rgba(238,116,66,.35); }
.btn-navy{ background:#0C5C86; color:#fff; }
.btn-navy.deep{ background:var(--navy); }
.btn-ghost{ background:#fff; color:var(--navy); border-color:var(--line); box-shadow:var(--shadow-1); }
.btn-outline{ background:#fff; color:var(--orange-deep); border-color:var(--orange); }
.btn-block{ display:flex; width:100%; }

.chip{
  display:inline-flex; align-items:center; gap:6px; border-radius:999px;
  padding:5px 12px; font-size:11.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  background:#fff; color:var(--navy); border:1px solid var(--line);
}
.tagline-tags{ color:var(--cyan); font-weight:700; font-size:12.5px; }
.tagline-tags span::after{ content:" • "; color:var(--line); }
.tagline-tags span:last-child::after{ content:""; }

/* ----------------------------------------------------------------- hero */
.hero{ position:relative; background:#0E4E77; overflow:hidden; }
.hero-art{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-in{ position:relative; max-width:var(--wrap); margin:0 auto; padding:34px 22px 30px; min-height:330px; display:flex; flex-direction:column; justify-content:center; }
.hero h1{ color:#fff; font-size:64px; letter-spacing:-.03em; margin:14px 0 6px; text-shadow:0 2px 18px rgba(3,30,60,.35); }
.hero .prop{ color:#EAF4FB; font-size:22px; font-weight:400; text-shadow:0 1px 10px rgba(3,30,60,.45); }
.hero .hero-chip{ align-self:flex-start; background:#fff; color:var(--ink); border:0; }
.hero-actions{ display:flex; gap:12px; margin-top:22px; flex-wrap:wrap; }
.hero-social{ position:absolute; right:22px; bottom:26px; display:flex; gap:10px; }
.pill-social{
  background:#fff; border-radius:999px; padding:8px 17px; font-size:13px; font-weight:700; color:#28313A;
  box-shadow:0 2px 10px rgba(2,20,50,.20); display:inline-flex; align-items:center; gap:7px;
}
.pill-social.ig{ background:#F6EEFB; }
.pill-social.yt{ background:#FDEFE9; }
.pill-social.fb{ background:#EAF1FC; }
.pill-social .vtick{ color:var(--teal); font-size:11px; }

/* ------------------------------------------------------ class at glance */
.glance-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px 16px; margin-top:18px; }
.glance-k{ font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-40); }
.glance-v{ font-size:25px; font-weight:700; color:var(--ink); margin-top:3px; letter-spacing:-.01em; }
.glance-drawing{ width:132px; flex:0 0 auto; text-align:center; }
.glance-drawing img{ width:100%; }
.glance-drawing a{ font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink); text-decoration:underline; }

.suit-row{ display:grid; grid-template-columns:120px 1fr 156px; align-items:center; gap:12px; padding:9px 0; }
.suit-row .lab{ font-weight:700; font-size:14.5px; }
.suit-row .val{ color:var(--ink-40); font-size:14px; }
.bars{ display:flex; gap:7px; justify-self:end; }
.bars i{ width:26px; height:11px; border-radius:6px; background:#E2EAF1; display:block; }
.bars i.on{ background:var(--teal); }
.dots{ display:flex; gap:5px; }
.dots i{ width:11px; height:11px; border-radius:50%; background:#fff; border:1.5px solid #9FB2C0; display:block; }
.dots i.on{ background:#334F66; border-color:#334F66; }

/* -------------------------------------------------------- event teaser */
.teaser{ border:2px solid var(--ink); border-radius:4px; padding:10px; background:#fff; }
.teaser-in{ display:flex; gap:14px; }
.teaser-art{ width:180px; flex:0 0 auto; border-radius:3px; overflow:hidden; }
.teaser-art img{ width:100%; height:88px; object-fit:cover; }
.teaser-link{ font-weight:700; font-size:14.5px; color:var(--ink); text-decoration:underline; display:inline-block; }
.teaser-ev{ font-weight:700; font-size:14.5px; margin-top:4px; }

/* ------------------------------------------------------------- heat map */
.map-shell{ position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.map-shell canvas{ display:block; width:100%; touch-action:none; cursor:grab; background:#E7F1FA; }
.map-shell canvas:active{ cursor:grabbing; }
.map-tag{
  position:absolute; left:14px; top:14px; background:#E4F4FB; color:#0C5C86;
  font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:6px 13px; border-radius:999px;
}
.map-legend{
  position:absolute; right:14px; top:14px; background:rgba(255,255,255,.92); border-radius:999px;
  padding:6px 13px; font-size:12px; color:var(--ink-60); display:flex; gap:14px;
}
.map-legend b{ display:inline-flex; align-items:center; gap:6px; font-weight:500; }
.map-legend b::before{ content:""; width:9px; height:9px; border-radius:50%; background:#31586F; }
.map-legend b.growing::before{ background:#5FA6C8; }
.privacy-box{
  position:absolute; left:14px; bottom:14px; background:#fff; border:1px solid var(--line);
  border-radius:8px; padding:11px 14px; max-width:340px; box-shadow:var(--shadow-1);
}
.privacy-box b{ font-size:13.5px; }
.privacy-box p{ font-size:12.5px; color:var(--ink-60); margin-top:3px; }
.map-zoom{ position:absolute; right:14px; bottom:14px; display:flex; flex-direction:column; gap:6px; }
.map-zoom button{
  width:32px; height:32px; border-radius:8px; border:1px solid var(--line); background:#fff;
  font-size:17px; font-weight:700; color:var(--navy); cursor:pointer; box-shadow:var(--shadow-1); line-height:1;
}

.filterbar{ display:grid; grid-template-columns:repeat(4,1fr) auto auto; gap:12px; align-items:stretch; }
.field{ background:#fff; border:1px solid var(--line); border-radius:11px; padding:9px 14px; box-shadow:var(--shadow-1); }
.field label{ display:block; font-size:10.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-40); }
.field select,.field input{
  border:0; outline:0; background:transparent; font:inherit; font-size:16px; font-weight:600; color:var(--ink);
  width:100%; padding:2px 0 0; -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='7'><path d='M1 1l4.5 4.5L10 1' fill='none' stroke='%2374838B' stroke-width='1.6'/></svg>");
  background-repeat:no-repeat; background-position:right center;
}
.field input{ background-image:none; }
.field.plain select{ background-image:none; }

.loc-item{
  display:flex; align-items:center; gap:12px; background:var(--pale); border-radius:11px;
  padding:14px 16px; margin-bottom:11px; cursor:pointer; border:1px solid transparent; width:100%; text-align:left;
}
.loc-item:hover{ border-color:var(--cyan); background:#fff; }
.loc-item.sel{ border-color:var(--cyan); background:#fff; box-shadow:var(--shadow-1); }
.loc-item h4{ font-size:16.5px; color:var(--navy); }
.loc-item .place{ color:var(--ink-40); font-size:13.5px; margin-top:2px; }
.loc-item .arrow{ margin-left:auto; color:var(--orange); font-size:17px; }

/* ----------------------------------------------------------- spec table */
.spectable{ width:100%; border-collapse:separate; border-spacing:0 3px; font-size:13.5px; }
.spectable th{
  text-align:right; background:#B9EEFB; color:#08343F; font-weight:700; padding:6px 10px;
  width:47%; border-radius:3px 0 0 3px; white-space:nowrap;
}
.spectable td{ background:#F4F8FB; padding:6px 10px; border-radius:0 3px 3px 0; }

.builder-card{
  background:#0C5C86; color:#fff; border-radius:8px; padding:20px 16px; min-width:172px;
  font-weight:700; font-size:16px; text-align:center; flex:0 0 auto; text-decoration:none;
}
.builder-card:hover{ text-decoration:none; background:#0E6C9C; }
.builder-card small{ display:block; font-weight:500; font-size:12px; opacity:.8; margin-top:4px; }
.hscroll{ display:flex; gap:16px; overflow-x:auto; padding-bottom:6px; }
.hscroll::-webkit-scrollbar{ height:7px; }
.hscroll::-webkit-scrollbar-thumb{ background:#CBD8E4; border-radius:4px; }

.gal-strip{ display:flex; gap:14px; overflow-x:auto; padding-bottom:6px; }
.gal-strip button{
  flex:0 0 auto; width:158px; border:1px solid var(--navy); border-radius:4px; background:#fff;
  padding:0; cursor:pointer; overflow:hidden;
}
.gal-strip img{ width:100%; height:88px; object-fit:cover; }
.lightbox{
  position:fixed; inset:0; background:rgba(4,16,36,.85); z-index:200; display:none;
  align-items:center; justify-content:center; padding:24px;
}
.lightbox.open{ display:flex; }
.lightbox img{ max-width:min(920px,92vw); max-height:80vh; border-radius:10px; }
.lightbox .cap{ color:#D6E2F6; text-align:center; margin-top:12px; font-size:13.5px; }
.lightbox .x{ position:absolute; top:18px; right:22px; background:none; border:0; color:#fff; font-size:30px; cursor:pointer; }

/* ------------------------------------------------------------- listings */
.list-row{
  display:flex; align-items:center; gap:14px; background:var(--pale);
  border-radius:9px; padding:13px 16px; margin-bottom:10px;
}
.list-row .price{ margin-left:auto; font-weight:700; font-size:16.5px; white-space:nowrap; }
.badge-free{
  background:#DBF3E3; color:#1C6B3C; border-radius:5px; padding:4px 9px;
  font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
}
.svc-row{
  display:flex; align-items:center; gap:12px; background:var(--pale); border-radius:8px;
  padding:11px 14px; margin-bottom:9px; text-decoration:none;
}
.svc-row:hover{ text-decoration:none; background:#E4EEF7; }
.svc-row b{ color:var(--navy); font-size:14.5px; }
.svc-row .arrow{ margin-left:auto; color:var(--orange); }

.social-cluster{ display:flex; flex-wrap:wrap; gap:12px; }
.social-cluster a{
  width:44px; height:44px; border-radius:9px; display:grid; place-items:center;
  color:#fff; font-weight:700; font-size:16px; text-decoration:none;
}
.social-cluster a:hover{ text-decoration:none; filter:brightness(1.1); }

.opp-card{ border:1px solid var(--line); border-radius:11px; padding:18px; margin-bottom:14px; background:#fff; }
.opp-card h3{ font-size:19px; }

/* --------------------------------------------------------- class cards */
.class-card{ background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-1); display:flex; flex-direction:column; }
.class-card:hover{ box-shadow:var(--shadow-2); }
.class-card .art{ height:132px; overflow:hidden; }
.class-card .art img{ width:100%; height:100%; object-fit:cover; }
.class-card .bd{ padding:15px 16px 17px; display:flex; flex-direction:column; flex:1; }
.class-card h3{ font-size:19px; color:var(--navy); }
.class-card .one{ color:var(--ink-60); font-size:13.5px; margin-top:5px; }
.class-card .fit{ font-size:13px; color:var(--teal); font-weight:700; margin-top:9px; }
.class-card .counts{ display:flex; gap:14px; color:var(--ink-40); font-size:12.5px; margin-top:9px; }
.class-card .acts{ display:flex; flex-wrap:wrap; gap:8px; margin-top:13px; padding-top:12px; border-top:1px solid var(--line-2); }
.class-card .acts a{ font-size:12.5px; font-weight:700; color:var(--cyan); }

/* --------------------------------------------------------------- search */
.searchpanel{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:20px; box-shadow:var(--shadow-1); }
.searchpanel .row{ display:grid; gap:12px; }
.bigsearch{ position:relative; }
.bigsearch input{
  width:100%; font:inherit; font-size:17px; padding:15px 18px 15px 46px;
  border:1px solid var(--line); border-radius:11px; outline:0; background:var(--pale);
}
.bigsearch input:focus{ border-color:var(--cyan); background:#fff; }
.bigsearch .ico{ position:absolute; left:16px; top:50%; transform:translateY(-50%); color:var(--ink-40); }
.suggest{
  position:absolute; left:0; right:0; top:calc(100% + 5px); background:#fff; border:1px solid var(--line);
  border-radius:11px; box-shadow:var(--shadow-2); z-index:30; overflow:hidden; display:none;
}
.suggest.open{ display:block; }
.suggest button{
  display:block; width:100%; text-align:left; background:none; border:0; padding:11px 16px; cursor:pointer; font-size:15px;
}
.suggest button:hover{ background:var(--pale); }
.suggest .alias{ color:var(--ink-40); font-size:12.5px; }
.adv-toggle{ background:none; border:0; color:var(--cyan); font-weight:700; font-size:14px; cursor:pointer; padding:0; }
.advanced{ display:none; margin-top:18px; padding-top:18px; border-top:1px dashed var(--line); }
.advanced.open{ display:block; }
.chip-row{ display:flex; flex-wrap:wrap; gap:8px; }
.chip-row button{
  border:1px solid var(--line); background:#fff; border-radius:999px; padding:7px 14px;
  font-size:13px; font-weight:600; cursor:pointer; color:var(--ink-60);
}
.chip-row button.on{ background:var(--navy); color:#fff; border-color:var(--navy); }

/* ---------------------------------------------------------------- share */
.sharepanel{
  position:fixed; right:18px; top:calc(var(--hd) + 12px); width:300px; background:#fff;
  border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-2);
  padding:18px; z-index:120; display:none;
}
.sharepanel.open{ display:block; }
.sharepanel h4{ font-size:16px; color:var(--navy); }
.sharepanel .copyrow{ display:flex; gap:8px; margin-top:12px; }
.sharepanel input{ flex:1; min-width:0; font:inherit; font-size:12.5px; padding:9px 11px; border:1px solid var(--line); border-radius:8px; background:var(--pale); }

/* --------------------------------------------------------------- footer */
.site-ft{ background:var(--navy-deep); color:#B9CBE8; margin-top:40px; padding:38px 0 30px; }
.site-ft .cols{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:26px; }
.site-ft h5{ color:#fff; font-size:12px; letter-spacing:.13em; text-transform:uppercase; margin:0 0 11px; }
.site-ft a{ color:#B9CBE8; display:block; padding:4px 0; font-size:14px; }
.site-ft a:hover{ color:#fff; }
.site-ft .note{ margin-top:26px; padding-top:18px; border-top:1px solid rgba(255,255,255,.13); font-size:12.5px; color:#8DA4C7; }
.site-ft .mark{ width:150px; border-radius:5px; overflow:hidden; background:#EDF2F9; }

/* -------------------------------------------------------------- pagehead */
.pagehead{ padding:30px 0 8px; }
.pagehead h1{ font-size:40px; color:var(--navy); letter-spacing:-.025em; }
.pagehead h1 .lt{ font-weight:400; color:var(--ink); }
.pagehead .sub{ color:var(--ink-40); font-size:16.5px; margin-top:7px; }
.crumbs{ font-size:13.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--cyan); margin-top:8px; }
.crumbs a{ color:var(--cyan); }
.crumbs span{ color:#9FB6C6; }

/* ------------------------------------------------------------ responsive */
@media (max-width:1080px){
  .hd-nav a{ padding:21px 9px 20px; font-size:14px; }
  .site-ft .cols{ grid-template-columns:1fr 1fr; }
}
@media (max-width:900px){
  .hd-nav{ display:none; }
  .burger{ display:block; margin-left:auto; }
  .hd-right .btn-cta{ display:none; }
  .hd-right{ order:3; }
  .filterbar{ grid-template-columns:1fr 1fr; }
  .g4{ grid-template-columns:1fr 1fr; }
  .g3{ grid-template-columns:1fr; }
  .g2{ grid-template-columns:1fr; }
  .hero h1{ font-size:44px; }
  .hero .prop{ font-size:18px; }
  .hero-social{ position:static; margin-top:18px; flex-wrap:wrap; }
  .pagehead h1{ font-size:30px; }
  .glance-grid{ grid-template-columns:1fr 1fr; }
  .suit-row{ grid-template-columns:1fr; gap:4px; }
  .bars{ justify-self:start; }
  .privacy-box{ position:static; max-width:none; margin:12px; }
  .map-zoom{ bottom:auto; top:56px; }
  .teaser-in{ flex-direction:column; }
  .teaser-art{ width:100%; }
}
@media (max-width:640px){
  :root{ --hd:58px; }
  .wrap{ padding:0 15px; }
  .hd-in{ padding:0 15px; gap:10px; }
  .lockup .mark{ width:96px; }
  .lockup .byline{ display:none; }
  .hero h1{ font-size:36px; }
  .hero-in{ min-height:260px; padding:26px 15px; }
  .g4,.g2,.g3{ grid-template-columns:1fr; }
  .filterbar{ grid-template-columns:1fr; }
  .glance-grid{ grid-template-columns:1fr 1fr; }
  .glance-v{ font-size:21px; }
  .site-ft .cols{ grid-template-columns:1fr; }
  .card-pad{ padding:17px; }
  .section-hd h2{ font-size:22px; }
  .sharepanel{ right:10px; left:10px; width:auto; }
}

/* =========================================================================
   ROUND TWO — the real map, the real modules, motion and focus.
   Appended, so nothing above is redefined except where a rule is deliberately
   superseded (marked).
   ========================================================================= */

/* ------------------------------------------------------------ a11y basics */
.skip{
  position:absolute; left:-9999px; top:0; z-index:400; background:#fff; color:var(--navy);
  padding:12px 18px; border-radius:0 0 10px 0; font-weight:700;
}
.skip:focus{ left:0; }
:focus-visible{ outline:3px solid var(--hl); outline-offset:2px; border-radius:4px; }
.btn:focus-visible,.chip-row button:focus-visible{ outline-offset:3px; }

/* --------------------------------------------------------------- motion */
.rev{ opacity:0; transform:translateY(14px); }
.rev.in{ opacity:1; transform:none; transition:opacity .5s ease, transform .5s cubic-bezier(.22,.7,.3,1); }
@media (prefers-reduced-motion: reduce){
  .rev,.rev.in{ opacity:1; transform:none; transition:none; }
  *{ scroll-behavior:auto !important; }
}
html{ scroll-behavior:smooth; }
.card,.class-card,.vcard,.loc-item,.btn,.svc-row{
  transition:box-shadow .22s ease, transform .22s ease, border-color .18s ease, background .18s ease;
}
.card:hover,.vcard:hover{ box-shadow:var(--shadow-2); }
.class-card:hover{ transform:translateY(-3px); }
.class-card .art img{ transition:transform .5s cubic-bezier(.22,.7,.3,1); }
.class-card:hover .art img{ transform:scale(1.045); }

/* ------------------------------------------------------------- the map */
.map-shell{ isolation:isolate; }
.map-canvas{ width:100%; height:560px; background:#E7F1FA; }
.map-canvas.is-mini{ height:230px; }
.map-canvas.is-mid{ height:400px; }
.leaflet-container{ font:inherit; background:#E7F1FA; }
.leaflet-container a{ color:var(--cyan); }
.leaflet-control-zoom a,.leaflet-control-layers-toggle{ border-radius:8px !important; }
.leaflet-bar a{ color:var(--navy); }
.leaflet-control-attribution{ font-size:10.5px; background:rgba(255,255,255,.82); }
.leaflet-popup-content-wrapper{ border-radius:12px; box-shadow:var(--shadow-2); }
.leaflet-popup-content{ margin:14px 15px; font-size:13.5px; }

.fsmk-wrap{ background:none; border:0; }
.fsmk{
  display:block; width:14px; height:14px; border-radius:50%; background:#31586F;
  border:2.5px solid #fff; box-shadow:0 1px 5px rgba(2,43,131,.35);
}
.fsmk-wayin{ background:var(--orange-deep); }
.fsmk-event{ background:var(--teal); border-radius:3px; transform:rotate(45deg); }

.fscl{
  display:flex; align-items:center; justify-content:center; border-radius:999px;
  background:rgba(12,92,134,.90); color:#fff; font-weight:700; font-size:12.5px;
  border:2.5px solid #fff; box-shadow:0 2px 10px rgba(2,43,131,.30);
}
.fscl-s{ width:32px; height:32px; }
.fscl-m{ width:40px; height:40px; font-size:13.5px; background:rgba(238,116,66,.92); }
.fscl-l{ width:50px; height:50px; font-size:14.5px; background:rgba(214,81,42,.94); }

.fspop-k{ font-size:10.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-40); }
.fspop h4{ font-size:16.5px; color:var(--navy); margin:5px 0 0; }
.fspop-w{ color:var(--ink-60); font-size:13px; margin-top:2px; }
.fspop-sig{ display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }
.fspop-sig span{
  background:#FFF1E9; color:var(--orange-deep); border-radius:999px; padding:3px 9px;
  font-size:11.5px; font-weight:700;
}
.fspop-q{
  margin:10px 0 0; padding:9px 11px; background:var(--pale); border-left:3px solid var(--cyan);
  border-radius:0 8px 8px 0; font-size:12.5px; color:var(--ink-60); font-style:italic;
}
.fspop-src{ font-size:11px; color:var(--ink-40); margin-top:5px; }
.fspop-a{ display:inline-block; margin-top:10px; font-weight:700; font-size:13px; }
.fspop-claim{ display:block; margin-top:7px; font-size:12.5px; color:var(--orange-deep); font-weight:700; }
.map-fallback{
  display:flex; flex-direction:column; gap:6px; align-items:center; justify-content:center;
  height:100%; min-height:240px; background:var(--pale); color:var(--ink-60); font-size:14px; text-align:center; padding:20px;
}
.map-legend{ background:rgba(255,255,255,.92); border-radius:999px; padding:6px 12px; box-shadow:var(--shadow-1); }
.map-legend b::before{ background:#31586F; }
.map-legend b.wayin::before{ background:var(--orange-deep); }
.map-legend b.event::before{ background:var(--teal); border-radius:2px; }
.map-modes{ position:absolute; left:14px; top:14px; z-index:500; display:flex; gap:4px;
  background:rgba(255,255,255,.94); border-radius:999px; padding:4px; box-shadow:var(--shadow-1); }
.map-modes button{
  border:0; background:none; border-radius:999px; padding:6px 13px; font:inherit; font-size:12.5px;
  font-weight:700; color:var(--ink-60); cursor:pointer;
}
.map-modes button.on{ background:var(--navy); color:#fff; }
.privacy-box{ z-index:500; }
.map-tag{ z-index:500; }

/* ------------------------------------------------------------ venue card */
.vcard{
  background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  box-shadow:var(--shadow-1); display:flex; flex-direction:column;
}
.vcard-art{ display:block; height:112px; overflow:hidden; }
.vcard-art img{ width:100%; height:100%; object-fit:cover; }
.vcard-bd{ padding:15px 16px 16px; display:flex; flex-direction:column; flex:1; }
.vcard h3{ font-size:17.5px; color:var(--navy); margin-top:6px; line-height:1.24; }
.vcard-w{ color:var(--ink-40); font-size:13px; margin-top:3px; }
.vcard.is-compact .vcard-bd{ padding:14px 15px; }
.siglist{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.sig{
  background:#FFF1E9; color:var(--orange-deep); border-radius:999px; padding:3px 10px;
  font-size:11.5px; font-weight:700; white-space:nowrap;
}
.vquote{
  margin:12px 0 0; padding:11px 13px; background:var(--pale); border-left:3px solid var(--cyan);
  border-radius:0 9px 9px 0; font-size:13px; color:var(--ink-60); font-style:italic;
}
.vquote cite{ display:block; font-style:normal; font-size:11.5px; color:var(--ink-40); margin-top:7px; }
.vcard-ft{ display:flex; align-items:center; gap:12px; margin-top:auto; padding-top:13px; flex-wrap:wrap; }
.vlink{ font-size:13px; font-weight:700; color:var(--cyan); }
.vmap{
  margin-left:auto; border:1px solid var(--line); background:#fff; border-radius:999px;
  padding:5px 12px; font:inherit; font-size:12.5px; font-weight:700; color:var(--navy); cursor:pointer;
}
.vmap:hover{ border-color:var(--cyan); }

/* --------------------------------------------------------- class cards+ */
.class-card .art{ position:relative; height:150px; }
.art-badge{
  position:absolute; left:11px; top:11px; background:rgba(2,43,131,.92); color:#fff;
  border-radius:999px; padding:4px 11px; font-size:11px; font-weight:700; letter-spacing:.04em;
}
.class-card .aka{ font-size:12.5px; color:var(--ink-40); margin-top:3px; }
.class-card .counts{ flex-wrap:wrap; }
.class-card .counts.strong span{ color:var(--navy); font-weight:700; }
.class-card .assoc{ font-size:13px; margin-top:10px; color:var(--ink-60); }
.class-card .assoc .lvl{ color:var(--ink-40); text-transform:capitalize; }
.class-card .acts{ margin-top:auto; }

/* ------------------------------------------------------------ empty state */
.empty{
  grid-column:1/-1; background:#fff; border:1px dashed var(--line); border-radius:var(--r);
  padding:34px 26px; text-align:center;
}
.empty h3{ color:var(--navy); font-size:20px; }
.empty p{ color:var(--ink-40); font-size:14.5px; margin-top:8px; max-width:56ch; margin-inline:auto; }
.empty .btn{ margin-top:16px; }

/* -------------------------------------------------------- search overlay */
.searchover{
  position:fixed; inset:0; background:rgba(1,28,87,.55); backdrop-filter:blur(3px);
  z-index:300; display:none; padding:8vh 20px 20px;
}
.searchover.open{ display:block; }
.searchover-in{ max-width:720px; margin:0 auto; background:#fff; border-radius:var(--r); padding:20px; box-shadow:var(--shadow-2); }
.searchover .bigsearch input{ padding-right:52px; }
.searchover .bigsearch .x{
  position:absolute; right:10px; top:50%; transform:translateY(-50%); background:none; border:0;
  font-size:26px; color:var(--ink-40); cursor:pointer; line-height:1;
}
.searchover-res{ margin-top:14px; max-height:52vh; overflow:auto; }
.sres{
  display:flex; align-items:baseline; gap:10px; padding:11px 13px; border-radius:10px;
  color:var(--ink); flex-wrap:wrap;
}
.sres:hover{ background:var(--pale); text-decoration:none; }
.sres b{ color:var(--navy); font-size:15.5px; }
.sres .via{ font-size:12.5px; color:var(--orange-deep); font-weight:700; }
.sres .bits{ margin-left:auto; font-size:12.5px; color:var(--ink-40); }
.sres.more{ font-weight:700; color:var(--cyan); justify-content:center; }

/* ----------------------------------------------------------------- modal */
.modal{ position:fixed; inset:0; background:rgba(1,28,87,.55); backdrop-filter:blur(3px); z-index:300; display:none; padding:8vh 20px 20px; }
.modal.open{ display:block; }
.modal-in{ position:relative; max-width:560px; margin:0 auto; background:#fff; border-radius:var(--r); padding:24px; box-shadow:var(--shadow-2); }
.modal-in h3{ font-size:24px; color:var(--navy); margin-top:6px; }
.modal-in .x{ position:absolute; top:12px; right:16px; background:none; border:0; font-size:28px; color:var(--ink-40); cursor:pointer; line-height:1; }
.modal-in .row{ display:grid; grid-template-columns:1fr 1fr; }

/* ------------------------------------------------------------ h-scroller */
.hrail-wrap{ position:relative; }
.hrail{ display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x proximity; padding-bottom:8px; }
.hrail > *{ scroll-snap-align:start; flex:0 0 auto; }
.hrail::-webkit-scrollbar{ height:7px; }
.hrail::-webkit-scrollbar-thumb{ background:#CBD8E4; border-radius:4px; }
.hnav{ display:flex; gap:7px; }
.hnav button{
  width:34px; height:34px; border-radius:50%; border:1px solid var(--line); background:#fff;
  color:var(--navy); font-size:16px; cursor:pointer; box-shadow:var(--shadow-1);
}
.hnav button:disabled{ opacity:.35; cursor:default; }

/* ----------------------------------------------------------- misc blocks */
.statrow{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.stat{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:18px 20px; box-shadow:var(--shadow-1); }
.stat b{ display:block; font-size:32px; color:var(--navy); letter-spacing:-.02em; line-height:1.05; }
.stat span{ display:block; font-size:12.5px; color:var(--ink-40); margin-top:6px; }

.notebox{
  background:#F3F9FD; border:1px solid #D5E7F4; border-radius:12px; padding:15px 17px;
  font-size:13.5px; color:var(--ink-60);
}
.notebox b{ color:var(--navy); }

.orglist a{ display:flex; align-items:baseline; gap:9px; padding:9px 0; border-bottom:1px solid var(--line-2); font-size:14.5px; flex-wrap:wrap; }
.orglist a:last-child{ border-bottom:0; }
.orglist .lvl{ margin-left:auto; font-size:11.5px; color:var(--ink-40); text-transform:uppercase; letter-spacing:.08em; }

.tabbar{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px; }
.tabbar button{
  border:1px solid var(--line); background:#fff; border-radius:999px; padding:8px 16px;
  font:inherit; font-size:13.5px; font-weight:700; color:var(--ink-60); cursor:pointer;
}
.tabbar button.on{ background:var(--navy); color:#fff; border-color:var(--navy); }

.gal-strip img{ height:120px; }
.gal-strip button{ transition:transform .25s ease; }
.gal-strip button:hover{ transform:translateY(-3px); }

.hero{ background:#0E4E77; }
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(3,32,62,.62) 0%, rgba(3,32,62,.30) 42%, rgba(3,32,62,0) 72%);
}
.hero-in{ z-index:2; }
.hero-social{ z-index:2; }
.hero .prop{ max-width:52ch; }
.hero-scroll{ position:absolute; left:50%; bottom:14px; transform:translateX(-50%); color:#CFE4F3; font-size:12px; letter-spacing:.16em; text-transform:uppercase; z-index:2; }

.ft-blurb{ margin-top:12px; font-size:13.5px; max-width:34ch; }

.suit-row .val{ font-size:14px; }
.suit-note{ font-size:12.5px; color:var(--ink-40); margin-top:10px; }

.kv{ display:grid; grid-template-columns:auto 1fr; gap:8px 16px; font-size:14px; }
.kv dt{ color:var(--ink-40); }
.kv dd{ margin:0; color:var(--ink); font-weight:600; }

.pill-social{ transition:transform .2s ease; }
.pill-social:hover{ transform:translateY(-2px); }

.filterbar{ grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); }
.filterbar .btn{ align-self:stretch; }

.resultsbar{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:14px; }
.resultsbar .count{ font-weight:700; color:var(--navy); font-size:15px; }
.resultsbar .spacer{ margin-left:auto; }

.split{ display:grid; grid-template-columns:1.7fr 1fr; gap:18px; align-items:start; }
.sticky{ position:sticky; top:calc(var(--hd) + 14px); }

@media (max-width:900px){
  .split{ grid-template-columns:1fr; }
  .sticky{ position:static; }
  .statrow{ grid-template-columns:1fr 1fr; }
  .modal-in .row{ grid-template-columns:1fr; }
  .map-canvas{ height:420px; }
}
@media (max-width:640px){
  .statrow{ grid-template-columns:1fr 1fr; }
  .stat b{ font-size:25px; }
  .map-canvas{ height:340px; }
  .searchover{ padding:0; }
  .searchover-in{ border-radius:0; min-height:100vh; }
}

/* Map furniture placement — the legend collided with Leaflet's zoom control,
   which sits top-right. Legend moves to bottom-right, above attribution. */
.map-legend{ right:14px; top:auto; bottom:44px; z-index:500; flex-wrap:wrap; }
.map-shell .map-tag{ display:none; }
.privacy-box{ bottom:44px; max-width:290px; }
@media (max-width:900px){
  .map-legend{ bottom:auto; top:58px; right:10px; }
  .privacy-box{ position:static; margin:10px; max-width:none; }
  .map-modes{ left:10px; top:10px; }
}

/* =========================================================================
   Responsive override for inline grid tracks.
   Several panels set grid-template-columns inline (repeat(4,1fr), 1.55fr 1fr,
   220px 1fr …). An inline declaration beats every class rule, so on a phone
   the class-search panel rendered as four 70px columns with clipped labels
   and pushed the document 5px wider than the viewport. These rules take the
   inline value back at the two breakpoints.
   ========================================================================= */
@media (max-width:900px){
  .searchpanel .row[style],
  .advanced .row[style],
  .modal-in .row[style],
  main .grid[style*="grid-template-columns"],
  .card .grid[style*="grid-template-columns"]{
    grid-template-columns:1fr 1fr !important;
  }
  .specgrid[style], .split[style]{ grid-template-columns:1fr !important; }
  .spec-inner[style]{ grid-template-columns:1fr 1fr !important; }
}
@media (max-width:640px){
  .searchpanel .row[style],
  .advanced .row[style],
  .modal-in .row[style],
  main .grid[style*="grid-template-columns"],
  .card .grid[style*="grid-template-columns"],
  .spec-inner[style]{
    grid-template-columns:1fr !important;
  }
  .glance-grid{ grid-template-columns:1fr 1fr; }
  .hrail > *{ max-width:82vw; }
  .tabbar button{ padding:7px 12px; font-size:12.5px; }
  .filterbar{ gap:10px; }
}

/* On a phone the legend at top-right sat under Leaflet's zoom control. */
@media (max-width:900px){
  .map-legend{ top:auto; bottom:34px; left:10px; right:auto; }
}

/* With noWrap, whatever falls outside the single world shows the container
   background. Painted as sea so the map reads as a chart, not as dead space —
   and a touch of contrast so Positron's coastlines are legible at low zoom. */
.leaflet-container{ background:#DCE9F2; }
.leaflet-tile-pane{ filter:saturate(1.12) contrast(1.05); }

/* The watcher surface: a boat that went must read as gone, not as available. */
.vcard.is-gone{ opacity:.72; }
.vcard.is-gone h3{ text-decoration:line-through; text-decoration-thickness:1px; }
.sig.gone-sig{ background:#F1F2F4; color:var(--ink-40); }
.sig.new-sig{ background:#E4F6EC; color:#1B7A47; }