/* OceanPlayHub — deep ocean + social play + coastal UK palette */
:root{
  --oph-abyss:#091b2f;
  --oph-deep:#0f2b4a;
  --oph-wave:#0e7fa8;
  --oph-wave-soft:rgba(14,127,168,.12);
  --oph-teal:#14b8a6;
  --oph-teal-dim:rgba(20,184,166,.10);
  --oph-coral:#f87171;
  --oph-coral-dim:rgba(248,113,113,.10);
  --oph-gold:#fbbf24;
  --oph-sand:#faf7f2;
  --oph-shell:#ede8df;
  --oph-foam:#ffffff;
  --oph-ink:#12243a;
  --oph-slate:#5a6b7f;
  --oph-line:rgba(18,36,58,.08);
  --oph-display:"Sora",system-ui,sans-serif;
  --oph-body:"Source Sans 3",system-ui,sans-serif;
  --oph-mono:"JetBrains Mono",monospace;
  --oph-r-sm:6px;
  --oph-r-md:12px;
  --oph-r-lg:20px;
  --oph-shadow:0 2px 12px rgba(9,27,47,.10);
  --oph-transition:.25s cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--oph-body);color:var(--oph-ink);background:var(--oph-sand);line-height:1.7}
img{max-width:100%;height:auto;display:block}
a{color:var(--oph-wave);text-decoration:underline;text-underline-offset:3px;transition:color var(--oph-transition)}
a:hover{color:var(--oph-teal)}

/* ---------- NAV ---------- */
.oph-topbar{background:var(--oph-abyss);position:sticky;top:0;z-index:900;border-bottom:2px solid var(--oph-wave)}
.oph-topbar__inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:.75rem 1.5rem}
.oph-topbar__brand{font-family:var(--oph-display);font-weight:700;font-size:1.25rem;color:var(--oph-foam);text-decoration:none;display:flex;align-items:center;gap:.5rem}
.oph-topbar__brand svg{width:28px;height:28px}
.oph-topbar__links{display:flex;gap:1.5rem;list-style:none}
.oph-topbar__links a{color:var(--oph-shell);text-decoration:none;font-size:.92rem;font-weight:500;transition:color var(--oph-transition)}
.oph-topbar__links a:hover,.oph-topbar__links a[aria-current="page"]{color:var(--oph-teal)}
.oph-topbar__age{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:2px solid var(--oph-coral);border-radius:50%;color:var(--oph-coral);font-family:var(--oph-display);font-size:.72rem;font-weight:800;flex-shrink:0}
.oph-topbar__toggle{display:none;background:none;border:none;color:var(--oph-foam);font-size:1.5rem;cursor:pointer}

/* ---------- HERO (wave animation) ---------- */
.oph-hero{position:relative;overflow:hidden;background:linear-gradient(175deg,var(--oph-abyss) 0%,var(--oph-deep) 45%,#0c4f6e 100%);color:var(--oph-foam);padding:5rem 1.5rem 6rem;text-align:center}
.oph-hero__content{position:relative;z-index:2;max-width:800px;margin:0 auto}
.oph-hero__badge{display:inline-block;background:var(--oph-wave-soft);border:1px solid var(--oph-wave);color:var(--oph-teal);font-family:var(--oph-display);font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;padding:.35rem 1rem;border-radius:var(--oph-r-sm);margin-bottom:1.25rem}
.oph-hero__title{font-family:var(--oph-display);font-size:clamp(2rem,5vw,3.2rem);font-weight:800;line-height:1.15;margin-bottom:1rem}
.oph-hero__sub{font-size:1.15rem;color:rgba(255,255,255,.78);max-width:620px;margin:0 auto 2rem;line-height:1.7}
.oph-hero__cta{display:inline-flex;align-items:center;gap:.5rem;background:var(--oph-teal);color:var(--oph-abyss);font-family:var(--oph-display);font-weight:700;font-size:.95rem;padding:.85rem 2rem;border-radius:var(--oph-r-md);text-decoration:none;transition:background var(--oph-transition),transform var(--oph-transition)}
.oph-hero__cta:hover{background:var(--oph-gold);transform:translateY(-2px);color:var(--oph-abyss)}

/* wave decoration */
.oph-hero__waves{position:absolute;bottom:0;left:0;width:100%;height:120px;z-index:1}
.oph-hero__wave{position:absolute;bottom:0;left:0;width:200%;height:100%;animation:oph-drift linear infinite;opacity:.25}
.oph-hero__wave--1{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100'%3E%3Cpath fill='%230e7fa8' d='M0,60 C360,100 720,20 1080,60 C1260,80 1440,40 1440,40 L1440,100 L0,100Z'/%3E%3C/svg%3E") repeat-x;background-size:50% 100%;animation-duration:18s}
.oph-hero__wave--2{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100'%3E%3Cpath fill='%2314b8a6' d='M0,40 C320,80 640,10 960,50 C1200,70 1440,30 1440,30 L1440,100 L0,100Z'/%3E%3C/svg%3E") repeat-x;background-size:50% 100%;animation-duration:24s;animation-direction:reverse;opacity:.18}
.oph-hero__wave--3{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100'%3E%3Cpath fill='%23faf7f2' d='M0,70 C280,30 560,90 840,50 C1120,20 1440,60 1440,60 L1440,100 L0,100Z'/%3E%3C/svg%3E") repeat-x;background-size:50% 100%;animation-duration:14s;opacity:.35}
@keyframes oph-drift{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ---------- SECTION WRAPPER ---------- */
.oph-section{padding:4rem 1.5rem}
.oph-section--alt{background:var(--oph-foam)}
.oph-section__inner{max-width:1100px;margin:0 auto}
.oph-section__title{font-family:var(--oph-display);font-size:clamp(1.5rem,3.5vw,2.2rem);font-weight:800;color:var(--oph-ink);margin-bottom:.5rem}
.oph-section__lead{color:var(--oph-slate);font-size:1.05rem;margin-bottom:2.5rem;max-width:720px}

/* ---------- TRIDENT GRID (3-col pillars) ---------- */
.oph-trident{display:grid;grid-template-columns:repeat(3,1fr);gap:1.75rem;margin-bottom:3rem}
.oph-trident__prong{background:var(--oph-foam);border:1px solid var(--oph-line);border-radius:var(--oph-r-md);padding:2rem 1.5rem;position:relative;overflow:hidden;transition:box-shadow var(--oph-transition),transform var(--oph-transition)}
.oph-trident__prong:hover{box-shadow:var(--oph-shadow);transform:translateY(-3px)}
.oph-trident__prong::before{content:"";position:absolute;top:0;left:0;right:0;height:4px}
.oph-trident__prong:nth-child(1)::before{background:var(--oph-wave)}
.oph-trident__prong:nth-child(2)::before{background:var(--oph-teal)}
.oph-trident__prong:nth-child(3)::before{background:var(--oph-coral)}
.oph-trident__icon{font-size:2rem;margin-bottom:.75rem}
.oph-trident__heading{font-family:var(--oph-display);font-size:1.15rem;font-weight:700;margin-bottom:.5rem}
.oph-trident__text{color:var(--oph-slate);font-size:.95rem;line-height:1.7}

/* ---------- TIDE CARDS (stats) ---------- */
.oph-tide{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}
.oph-tide__card{text-align:center;background:var(--oph-foam);border:1px solid var(--oph-line);border-radius:var(--oph-r-md);padding:1.75rem 1rem;transition:box-shadow var(--oph-transition)}
.oph-tide__card:hover{box-shadow:var(--oph-shadow)}
.oph-tide__num{font-family:var(--oph-display);font-size:2rem;font-weight:800;color:var(--oph-wave)}
.oph-tide__label{color:var(--oph-slate);font-size:.85rem;margin-top:.35rem}

/* ---------- DEPTH EDITORIAL (asymmetric 2-col) ---------- */
.oph-depth{display:grid;grid-template-columns:2fr 3fr;gap:2.5rem;align-items:start}
.oph-depth__sidebar{background:var(--oph-deep);color:var(--oph-foam);border-radius:var(--oph-r-lg);padding:2.5rem 2rem}
.oph-depth__sidebar h3{font-family:var(--oph-display);font-size:1.3rem;margin-bottom:1rem}
.oph-depth__sidebar p{color:rgba(255,255,255,.78);font-size:.95rem;line-height:1.7}
.oph-depth__main h3{font-family:var(--oph-display);font-size:1.2rem;font-weight:700;margin-bottom:.75rem}
.oph-depth__main p{color:var(--oph-slate);line-height:1.75;margin-bottom:1rem}

/* ---------- REEF GRID (topic tiles — 2-col masonry look) ---------- */
.oph-reef{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem}
.oph-reef__tile{display:flex;gap:1rem;align-items:flex-start;background:var(--oph-foam);border:1px solid var(--oph-line);border-radius:var(--oph-r-md);padding:1.5rem;text-decoration:none;color:var(--oph-ink);transition:box-shadow var(--oph-transition),border-color var(--oph-transition)}
.oph-reef__tile:hover{box-shadow:var(--oph-shadow);border-color:var(--oph-wave)}
.oph-reef__tile-icon{font-size:1.5rem;flex-shrink:0;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--oph-wave-soft);border-radius:var(--oph-r-sm)}
.oph-reef__tile-body h4{font-family:var(--oph-display);font-size:1rem;font-weight:700;margin-bottom:.25rem}
.oph-reef__tile-body p{color:var(--oph-slate);font-size:.88rem;line-height:1.6}

/* ---------- ANCHOR LIST (checklist) ---------- */
.oph-anchor{list-style:none;columns:2;column-gap:2rem}
.oph-anchor li{break-inside:avoid;padding:.65rem 0 .65rem 2rem;position:relative;color:var(--oph-ink);font-size:.95rem;border-bottom:1px solid var(--oph-line)}
.oph-anchor li::before{content:"⚓";position:absolute;left:0;top:.65rem;font-size:1rem}

/* ---------- CURRENT FAQ (accordion-style) ---------- */
.oph-current{max-width:800px}
.oph-current__item{border-bottom:1px solid var(--oph-line);padding:1.25rem 0}
.oph-current__q{font-family:var(--oph-display);font-weight:700;font-size:1rem;color:var(--oph-ink)}
.oph-current__a{color:var(--oph-slate);font-size:.95rem;line-height:1.7;margin-top:.5rem}

/* ---------- LIGHTHOUSE BANNER (help strip) ---------- */
.oph-lighthouse{background:var(--oph-deep);color:var(--oph-foam);padding:2.5rem 1.5rem;text-align:center}
.oph-lighthouse__inner{max-width:800px;margin:0 auto}
.oph-lighthouse__title{font-family:var(--oph-display);font-size:1.3rem;font-weight:700;margin-bottom:.75rem}
.oph-lighthouse__text{color:rgba(255,255,255,.78);font-size:.95rem;line-height:1.7;margin-bottom:1rem}
.oph-lighthouse__links{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem}
.oph-lighthouse__link{display:inline-flex;align-items:center;gap:.4rem;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);padding:.55rem 1.25rem;border-radius:var(--oph-r-sm);color:var(--oph-foam);text-decoration:none;font-size:.88rem;font-weight:600;transition:background var(--oph-transition)}
.oph-lighthouse__link:hover{background:rgba(255,255,255,.15);color:var(--oph-foam)}

/* ---------- FOOTER ---------- */
.oph-footer{background:var(--oph-abyss);color:rgba(255,255,255,.6);padding:3rem 1.5rem 1.5rem}
.oph-footer__grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2rem;margin-bottom:2rem}
.oph-footer__col h4{font-family:var(--oph-display);color:var(--oph-foam);font-size:.92rem;margin-bottom:.75rem}
.oph-footer__col p,.oph-footer__col a{font-size:.85rem;color:rgba(255,255,255,.55);line-height:1.8}
.oph-footer__col a{text-decoration:none;display:block}
.oph-footer__col a:hover{color:var(--oph-teal)}
.oph-footer__bar{max-width:1100px;margin:0 auto;border-top:1px solid rgba(255,255,255,.08);padding-top:1rem;display:flex;justify-content:space-between;align-items:center;font-size:.78rem}
.oph-footer__bar a{color:rgba(255,255,255,.45);text-decoration:none}
.oph-footer__bar a:hover{color:var(--oph-teal)}

/* ---------- PROSE (inner pages) ---------- */
.oph-prose{max-width:820px;margin:0 auto}
.oph-prose h1{font-family:var(--oph-display);font-size:clamp(1.8rem,4vw,2.6rem);font-weight:800;margin-bottom:.5rem}
.oph-prose h2{font-family:var(--oph-display);font-size:1.4rem;font-weight:700;margin:2.5rem 0 .75rem;padding-bottom:.4rem;border-bottom:2px solid var(--oph-wave-soft)}
.oph-prose h3{font-family:var(--oph-display);font-size:1.15rem;font-weight:700;margin:1.75rem 0 .5rem}
.oph-prose p{margin-bottom:1rem;line-height:1.8;color:var(--oph-ink)}
.oph-prose ul,.oph-prose ol{margin:0 0 1.25rem 1.5rem;color:var(--oph-ink)}
.oph-prose li{margin-bottom:.4rem;line-height:1.7}
.oph-prose a.oph-btn{text-decoration:none}
.oph-prose strong{font-weight:700}
.oph-prose blockquote{border-left:4px solid var(--oph-wave);padding:1rem 1.5rem;background:var(--oph-wave-soft);border-radius:0 var(--oph-r-sm) var(--oph-r-sm) 0;margin:1.5rem 0;font-style:italic;color:var(--oph-slate)}
.oph-prose .oph-info-box{background:var(--oph-teal-dim);border:1px solid var(--oph-teal);border-radius:var(--oph-r-md);padding:1.5rem;margin:1.5rem 0}
.oph-prose .oph-warn-box{background:var(--oph-coral-dim);border:1px solid var(--oph-coral);border-radius:var(--oph-r-md);padding:1.5rem;margin:1.5rem 0}
.oph-prose table{width:100%;border-collapse:collapse;margin:1.5rem 0}
.oph-prose th,.oph-prose td{text-align:left;padding:.75rem 1rem;border-bottom:1px solid var(--oph-line)}
.oph-prose th{font-family:var(--oph-display);font-weight:700;font-size:.88rem;text-transform:uppercase;letter-spacing:.05em;color:var(--oph-slate)}

/* page hero (light) */
.oph-page-hero{background:var(--oph-shell);padding:3.5rem 1.5rem 2.5rem;text-align:center}
.oph-page-hero .oph-topbar__age-inline{display:inline-flex;width:28px;height:28px;border:2px solid var(--oph-coral);border-radius:50%;color:var(--oph-coral);font-family:var(--oph-display);font-size:.65rem;font-weight:800;align-items:center;justify-content:center;margin-left:.5rem;vertical-align:middle}

/* ---------- BUTTONS ---------- */
.oph-btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--oph-display);font-weight:700;font-size:.92rem;padding:.75rem 1.75rem;border-radius:var(--oph-r-md);text-decoration:none;transition:all var(--oph-transition);cursor:pointer;border:none}
.oph-btn--primary{background:var(--oph-teal);color:var(--oph-abyss)}
.oph-btn--primary:hover{background:var(--oph-gold);color:var(--oph-abyss);transform:translateY(-2px)}
.oph-btn--outline{background:transparent;border:2px solid var(--oph-wave);color:var(--oph-wave)}
.oph-btn--outline:hover{background:var(--oph-wave);color:var(--oph-foam)}

/* ---------- RESPONSIVE ---------- */
@media(max-width:900px){
  .oph-trident{grid-template-columns:1fr}
  .oph-tide{grid-template-columns:repeat(2,1fr)}
  .oph-depth{grid-template-columns:1fr}
  .oph-reef{grid-template-columns:1fr}
  .oph-footer__grid{grid-template-columns:1fr 1fr}
  .oph-anchor{columns:1}
}
@media(max-width:680px){
  .oph-topbar__links{display:none;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:var(--oph-abyss);padding:1rem 1.5rem;border-bottom:2px solid var(--oph-wave)}
  .oph-topbar__links.oph-topbar__links--open{display:flex}
  .oph-topbar__toggle{display:block}
  .oph-tide{grid-template-columns:1fr 1fr}
  .oph-footer__grid{grid-template-columns:1fr}
  .oph-hero{padding:3rem 1rem 5rem}
  .oph-footer__bar{flex-direction:column;gap:.5rem;text-align:center}
}