:root{
  --green:#2e7d32;--yellow:#e6b400;--red:#d32f2f;--double:#b71c1c;--purple:#7b1fa2;
  --sandy:#f2e8d5;--ocean:#0288d1;--navy:#0b2b40;--ink:#12202b;--paper:#fffdf8;
}
*{box-sizing:border-box;margin:0;padding:0}

html{min-height:100%}
body{font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--ink);min-height:100vh;
  background:url("bg_beach.png") no-repeat center center fixed;background-size:cover;background-attachment:fixed;background-color:#cfe0ea;}

.wrap{max-width:1000px;margin:0 auto;padding:0 14px}
.wrap-top{max-width:1000px;margin:0 auto}
.homebar{position:absolute;top:12px;left:14px;right:14px;display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-start;gap:12px;padding:10px 16px;background:rgba(8,24,36,.92);border:1px solid rgba(255,255,255,.14);border-radius:18px;box-shadow:0 4px 14px rgba(0,0,0,.3);z-index:20}
.homebar .brand{font-size:28px;font-weight:600}
.homebar .brand:visited,.homebar .brand:link{color:#fff;text-decoration:none}
.homebar .navtoggle{margin-left:auto}
.homebar .nav{display:none;position:absolute;top:calc(100% + 10px);left:0;right:0;flex-direction:column;align-items:stretch;gap:8px;background:rgba(8,24,36,.98);padding:12px;border:1px solid rgba(255,255,255,.16);border-radius:14px;box-shadow:0 12px 30px rgba(0,0,0,.45)}
.homebar .nav a{text-align:center;padding:12px;font-size:15px;color:#fff;text-decoration:none;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);border-radius:16px}
.homebar .nav.open{display:flex}
.homebar .nav a{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);border-radius:16px;padding:7px 12px;color:#fff;text-decoration:none;font-weight:700;font-size:13px;white-space:nowrap;background:rgba(255,255,255,.12)}
.homebar .nav a:hover{background:rgba(255,255,255,.22);color:#fff}
/* top nav */
.nav{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;position:sticky;top:0;z-index:50;background:linear-gradient(180deg,rgba(8,24,36,.88),rgba(8,24,36,.66));padding:8px 12px;border-bottom:1px solid rgba(255,255,255,.15)}
.menu{display:flex;gap:6px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;align-items:center}
.menu::-webkit-scrollbar{display:none}
.menu a,.nav a{color:#fff;text-decoration:none;font-size:13px;font-weight:700;padding:6px 11px;border-radius:16px;background:rgba(10,28,40,.66);border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(4px);white-space:nowrap;flex-shrink:0}
.menu a:hover,.nav a:hover{background:rgba(2,18,28,.85);border-color:#fff}
.brand:visited,.brand:link{color:#fff;text-decoration:none}
.nav a:visited,.nav a:link{color:#fff}
.menu a:visited,.menu a:link{color:#fff}

/* ---- New responsive header (Base subpages): brand + inline links | hamburger on mobile ---- */
.navbar{position:relative;top:0;z-index:60;display:flex;flex-wrap:nowrap;align-items:center;gap:10px;margin:8px 0 10px;background:rgba(8,24,36,.92);border-radius:14px;padding:10px 14px;box-shadow:0 4px 14px rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.12)}
.navbar .brand{font-size:24px;font-weight:900;flex-shrink:0}
.navbar .brand:visited,.navbar .brand:link{color:#fff;text-decoration:none}
.navlinks-inline{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;margin-left:6px}
.navlinks-inline a{color:#fff;text-decoration:none;font-size:13px;font-weight:700;padding:7px 12px;border-radius:16px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.32);white-space:nowrap;flex-shrink:0}
.navlinks-inline a:hover{background:rgba(255,255,255,.26);color:#fff}
.navlinks-inline a:visited,.navlinks-inline a:link{color:#fff}
.navlinks a:visited,.navlinks a:link{color:#fff;text-decoration:none}
.navlinks a.hotlink:visited{color:#fff}
.navlinks{display:none;position:absolute;top:calc(100% + 4px);left:0;right:0;flex-direction:column;gap:8px;padding:12px;background:rgba(8,24,36,.98);border:1px solid rgba(255,255,255,.16);border-radius:14px;box-shadow:0 12px 30px rgba(0,0,0,.45);z-index:55}
.navlinks.open{display:flex}
.navlinks a{color:#fff;text-decoration:none;font-size:14px;font-weight:700;text-align:center;padding:11px;border-radius:16px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28)}
.navlinks a:hover{background:rgba(255,255,255,.22)}
.navlinks a.hotlink{background:var(--red);border-color:#ff8a80}
.navtoggle{display:flex;cursor:pointer;background:none;border:none;padding:8px;flex-direction:column;gap:5px;margin-left:auto;flex-shrink:0}
.navtoggle span{display:block;width:26px;height:3px;background:#fff;border-radius:2px}

/* Homepage homebar: always-visible inline links + dropdown */
.homebar .home-inline{display:flex;align-items:center;gap:6px;flex-wrap:nowrap}
.homebar .home-inline a{color:#fff;text-decoration:none;font-size:13px;font-weight:700;padding:7px 12px;border-radius:16px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.32);white-space:nowrap}
.homebar .home-inline a:hover{background:rgba(255,255,255,.26);color:#fff}
.homebar .home-inline a:visited,.homebar .home-inline a:link{color:#fff}
/* hero */
.hero{position:relative;min-height:64vh;border-radius:0 0 18px 18px;overflow:hidden;margin:0 0 26px;display:flex;align-items:flex-end;background:#0b2b40}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,20,30,.30) 0%,rgba(6,20,30,0) 40%,rgba(6,20,30,.82) 100%)}
.hero .content{position:relative;padding:26px 22px;width:100%;color:#fff}
.hero h1{font-size:34px;font-weight:800}
.hero .loc{font-size:13px;letter-spacing:.08em;opacity:.92;text-transform:uppercase}
.hero .stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-top:14px;color:#fff}
.stat{background:rgba(255,255,255,.16);border-radius:12px;padding:6px 4px;min-width:0;text-align:center}
.stat.wind{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0}
.stat .k{font-size:10px;opacity:.85}
.stat .small{font-size:10px;white-space:nowrap}
.stat .v{font-size:17px;font-weight:800;white-space:nowrap}
.flag{position:relative;display:inline-flex;align-items:center;gap:6px;border-radius:20px;padding:6px 12px;font-size:13px;font-weight:700;color:#fff;cursor:help}
.flag .tip{visibility:hidden;opacity:0;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(4px);width:210px;background:#12202b;color:#fff;font-size:11px;font-weight:500;line-height:1.4;padding:9px 11px;border-radius:9px;box-shadow:0 6px 20px rgba(0,0,0,.5);z-index:70;transition:.15s;pointer-events:none}
.flag:hover .tip{visibility:visible;opacity:1;transform:translateX(-50%) translateY(0)}
.cta{display:inline-block;border-radius:24px;padding:13px 22px;font-weight:800;font-size:15px;background:#123a52;color:#fff;text-decoration:none;box-shadow:0 6px 18px rgba(0,0,0,.18);border:1px solid #0e2f44;transition:.15s}
.cta.primary{background:var(--ocean);color:#fff}
.ctarow{display:flex;gap:10px;margin:0 0 18px;flex-wrap:wrap;align-items:stretch}
.cta.offer{background:var(--red);color:#fff;border-color:#a52a2a;box-shadow:0 0 0 0 rgba(211,47,47,.55);animation:pulse 2s infinite;font-size:16px}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,80,80,.55)}70%{box-shadow:0 0 0 14px rgba(255,80,80,0)}100%{box-shadow:0 0 0 0 rgba(255,80,80,0)}}
/* generic sections */
.card{background:#fff;border-radius:14px;padding:22px;margin-bottom:22px}
.card h2{font-size:22px;margin-bottom:12px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.tile{background:var(--sandy);border-radius:12px;padding:16px}
.tile h3{font-size:15px}
.small{font-size:12px;color:#6b7a84}
.asof{font-size:12px;color:#7a8a93}
/* rip-current — compact card, thin bar, thin byline */
.rip{display:inline-flex;flex-direction:column;gap:7px;max-width:340px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18);border-radius:16px;padding:12px 16px;margin-top:14px;backdrop-filter:blur(5px)}
.rip .lbl{font-size:10px;letter-spacing:.09em;opacity:.85;font-weight:700}
.ripbar{display:flex;gap:4px;height:8px;border-radius:6px;overflow:hidden}
.ripbar .seg{flex:1;border-radius:0;background:rgba(255,255,255,.18)}
.ripbar .seg.on{background:currentColor}
.ripbar .seg.low .oncap{color:var(--green)}
.ripbar .seg.mid .oncap{color:var(--yellow)}
.ripbar .seg.high .oncap{color:var(--red)}.pagehead{margin:0 0 20px;padding:12px 16px;color:#fff;text-align:left;font-weight:800;background:rgba(6,26,40,.35);border-bottom:2px solid rgba(255,255,255,.35);font-size:20px;letter-spacing:.3px;text-shadow:0 2px 8px rgba(0,0,0,.5)}
.card table{width:100%;border-collapse:separate;border-spacing:0 10px}
.card table th{text-align:left;font-size:11px;letter-spacing:.4px;text-transform:uppercase;color:#2b5c77;padding-bottom:4px}
.card table td{font-size:14px;padding:8px 12px 8px 0;vertical-align:top}
.card table td:first-child{width:54%;color:#0e2f44;font-weight:600}
.card table td:nth-child(2){width:46%;color:#3f5665;padding-left:12px;border-left:1px solid #d9e6ee}

.fc-green{--c:#2e7d32;background:linear-gradient(135deg,rgba(46,125,50,.28),rgba(46,125,50,.10) 55%,#fff 92%)}
.fc-yellow{--c:#e6b400;background:linear-gradient(135deg,rgba(230,180,0,.30),rgba(230,180,0,.12) 55%,#fff 92%)}
.fc-red{--c:#d32f2f;background:linear-gradient(135deg,rgba(211,47,47,.28),rgba(211,47,47,.10) 55%,#fff 92%)}
.fc-double{--c:#b71c1c;background:linear-gradient(135deg,rgba(183,28,28,.34),rgba(183,28,28,.12) 55%,#fff 92%)}
.fc-purple{--c:#7b1fa2;background:linear-gradient(135deg,rgba(123,31,162,.28),rgba(123,31,162,.10) 55%,#fff 92%)}
.flagdot{width:14px;height:14px;border-radius:50%;display:inline-block;margin-right:10px;vertical-align:middle;flex-shrink:0}

.flagcard{border-radius:14px;padding:16px 18px;margin-bottom:14px;border-left:6px solid var(--c);box-shadow:0 4px 14px rgba(0,0,0,.10);background:#fff;display:flex;align-items:center;gap:8px;width:auto;box-sizing:border-box}
.flagcard .fl-title{flex:0 0 34%;min-width:140px}
.flagcard .fl-title h3{color:#0e2f44;margin:0}
.flagcard .hazard{display:inline-block;font-weight:800;font-size:12px;letter-spacing:.5px;text-transform:uppercase;margin:6px 0 0;padding:3px 10px;border-radius:10px;color:#fff;background:var(--c);opacity:.92}
.flagcard p{flex:1;font-size:14px;color:#3f5665;line-height:1.55;margin:0}

.fc-green{--c:#2e7d32;background:linear-gradient(90deg,rgba(46,125,50,.85) 0%,rgba(46,125,50,.35) 32%,#fff 46%)}
.fc-yellow{--c:#e6b400;background:linear-gradient(90deg,rgba(230,180,0,.85) 0%,rgba(230,180,0,.35) 32%,#fff 46%)}
.fc-red{--c:#d32f2f;background:linear-gradient(90deg,rgba(211,47,47,.85) 0%,rgba(211,47,47,.35) 32%,#fff 46%)}
.fc-double{--c:#b71c1c;background:linear-gradient(90deg,rgba(183,28,28,.88) 0%,rgba(183,28,28,.35) 32%,#fff 46%)}
.fc-purple{--c:#7b1fa2;background:linear-gradient(90deg,rgba(123,31,162,.85) 0%,rgba(123,31,162,.35) 32%,#fff 46%)}

/* ---- Site footer (global) ---- */
.site-footer{padding:26px 16px 30px;max-width:1000px;margin:0 auto;background:rgba(8,24,36,.92);border:1px solid rgba(255,255,255,.16);border-radius:18px;text-align:center;color:#dbe7ef}
.footer-inner{display:flex;flex-direction:column;align-items:center;gap:14px}
.footer-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px}
.footer-nav a{color:#dbe7ef;text-decoration:none;font-size:13px;font-weight:600;white-space:nowrap}
.footer-nav a:hover{color:#fff;text-decoration:underline}
.footer-nav a:link,.footer-nav a:visited{color:#dbe7ef}
.footer-legal{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;font-size:12.5px}
.footer-legal a{color:#9db8c9;text-decoration:none}
.footer-legal a:hover{color:#fff;text-decoration:underline}
.footer-legal .dot{color:#5c7a8c}
.footer-copy{font-size:12.5px;color:#c9dce8}

/* ===== Responsive navigation ===== */
/* Mobile (narrow screens): hide the pill row; the hamburger menu holds ALL items and scrolls. */
@media (max-width: 860px){
  .navbar{flex-wrap:nowrap}
  .navlinks-inline{display:none}
  .navlinks .navlinks-mobile{display:flex;flex-direction:column;gap:8px;width:100%}
  .navlinks{max-height:80vh;overflow-y:auto}
}
/* Desktop (wide screens): show pills, keep the mobile group hidden inside the dropdown. */
@media (min-width: 861px){
  .navlinks .navlinks-mobile{display:none}
}