/* Sea Change Media: The Swell. Front page styles. */
@font-face{
  font-family:"Instrument Sans";
  src:url("../fonts/instrument-sans-var.woff2") format("woff2-variations"), url("../fonts/instrument-sans-var.woff2") format("woff2");
  font-weight:400 700; font-stretch:75% 100%; font-style:normal; font-display:swap;
}
:root{
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  --abyss:#0A1F26; --deep:#163B47; --mid:#2F6B78; --shallow:#5A96A0; --surface:#A9C9CE; --paper:#F5F1E8; --reef:#E8714A;
  --bg:#F5F1E8; --ink:#0A1F26; --ink2:#163B47; --rule:rgba(10,31,38,.28); --scrim:rgba(245,241,232,.62);
  --gutter:clamp(20px,6vw,88px);
  --sans:"Instrument Sans","Helvetica Neue",Helvetica,sans-serif;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --scrim:rgba(245,241,232,.62); } }
:root[data-theme="dark"]{ --scrim:rgba(245,241,232,.62); }
html{ scroll-padding-top:env(safe-area-inset-top,0px); scroll-behavior:smooth; }
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; }
body{ background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:1.0625rem; line-height:1.6; -webkit-font-smoothing:antialiased; font-variant-numeric:tabular-nums; }
body[data-tone="dark"]{ --ink:#F5F1E8; --ink2:#A9C9CE; --rule:rgba(169,201,206,.3); --scrim:rgba(10,31,38,.55); }
body[data-tone="dark"].mid{ --ink2:#F5F1E8; }
body.nocanvas{ background:linear-gradient(#F5F1E8 0%,#A9C9CE 10%,#5A96A0 25%,#2F6B78 45%,#163B47 65%,#0A1F26 85%); }
canvas#sea{ position:fixed; inset:0; width:100%; height:100%; display:block; z-index:0; }
a{ color:inherit; text-underline-offset:3px; text-decoration-thickness:1px; }
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{ outline:3px solid var(--reef); outline-offset:3px; }

/* header */
.bar{ position:fixed; top:0; left:0; right:0; z-index:10; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:calc(env(safe-area-inset-top,0px) + 14px) var(--gutter) 14px; color:var(--ink); }
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; min-height:44px; }
.brand svg{ width:42px; height:42px; display:block; }
.brand .d{ display:none; } body[data-tone="dark"] .brand .l{ display:none; } body[data-tone="dark"] .brand .d{ display:block; }
.wm{ display:flex; flex-direction:column; gap:4px; line-height:1; }
.wm b{ font-weight:600; font-stretch:92%; letter-spacing:.1em; font-size:.92rem; }
.wm span{ font-weight:500; letter-spacing:.52em; font-size:.6rem; color:var(--ink2); }
.nav{ display:flex; gap:26px; align-items:center; font-size:.95rem; }
.nav a{ text-decoration:none; padding:10px 0; border-bottom:1.5px solid transparent; }
.nav a:hover,.nav a.on{ border-color:currentColor; }
.nav ul{ list-style:none; margin:0; padding:0; display:flex; gap:26px; align-items:center; }
.nav li{ margin:0; }
.nav li.cta a,.nav a.cta{ border:1.5px solid var(--reef); border-radius:999px; padding:9px 16px; }

/* depth gauge */
.gauge{ position:fixed; right:var(--gutter); bottom:calc(env(safe-area-inset-bottom,0px) + 26px); z-index:10; color:var(--ink); text-align:right; pointer-events:none; }
.gauge .num{ font-size:1.6rem; font-weight:500; font-stretch:88%; line-height:1; }
.gauge .num small{ font-size:.85rem; margin-left:3px; }
.gauge .zone{ font-size:.85rem; margin-top:6px; color:var(--ink2); }
.gauge .track{ position:absolute; right:-18px; bottom:0; width:1.5px; height:128px; background:currentColor; opacity:.35; }
.gauge .dot{ position:absolute; right:-21.5px; width:8px; height:8px; border-radius:50%; background:var(--reef); bottom:0; }

/* sections */
main{ position:relative; z-index:2; }
.sec{ min-height:115vh; display:flex; align-items:center; padding:16vh var(--gutter); }
.sec.r{ justify-content:flex-end; }
.copy{ position:relative; max-width:35rem; }
h1,h2,h3{ font-family:var(--sans); margin:0; }
h1{ font-size:clamp(2.8rem,6.4vw,5.6rem); line-height:.98; font-weight:600; font-stretch:84%; letter-spacing:-.025em; max-width:13ch; margin-bottom:.45em; }
h2{ font-size:clamp(2rem,4vw,3.4rem); line-height:1.04; font-weight:600; font-stretch:88%; letter-spacing:-.02em; margin-bottom:.5em; }
p{ margin:0 0 1em; }
.lead{ font-size:1.25rem; line-height:1.55; max-width:31rem; }
.meta{ font-size:.95rem; font-weight:500; color:var(--ink2); margin-bottom:12px; }
.aside{ font-size:1.2rem; line-height:1.5; font-weight:500; font-stretch:94%; }
.portal{ font-size:1rem; }
.portal a{ text-decoration-color:var(--reef); text-decoration-thickness:2px; }
.hero{ min-height:100vh; align-items:flex-end; padding-bottom:16vh; }
.hero .copy{ max-width:40rem; }
.cue{ display:inline-flex; align-items:center; gap:12px; min-height:44px; margin-top:14px; font-weight:500; text-decoration:none; }
.cue i{ display:block; width:1.5px; height:40px; background:var(--reef); transform-origin:top; animation:drop 2.6s ease-in-out infinite; }
@keyframes drop{ 0%{transform:scaleY(0)} 50%{transform:scaleY(1)} 100%{transform:scaleY(1);opacity:0} }
ol.steps{ list-style:none; padding:0; margin:26px 0 22px; display:flex; flex-direction:column; gap:20px; }
ol.steps li{ display:grid; grid-template-columns:2.2rem 1fr; gap:2px 10px; }
ol.steps .n{ font-size:1.6rem; font-weight:600; font-stretch:80%; line-height:1.1; color:var(--reef); grid-row:span 2; }
ol.steps b{ font-weight:600; font-size:1.15rem; }

/* the drift */
.sec.drift{ display:block; min-height:auto; padding-top:18vh; padding-bottom:18vh; }
.drift .head{ max-width:44rem; }
.stage{ position:relative; margin-top:28px; height:580px; border-radius:28px; overflow:hidden; background:rgba(10,31,38,.42); border:1px solid rgba(169,201,206,.22); }
.stage canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.chips{ position:absolute; inset:0; pointer-events:none; }
.chip{ pointer-events:auto; position:absolute; transform:translate(-50%,-50%); font:inherit; font-size:.95rem; white-space:nowrap; min-height:44px; padding:.55rem 1rem; border-radius:999px; cursor:pointer; color:var(--paper); background:rgba(10,31,38,.72); border:1.5px solid rgba(169,201,206,.55); animation:bob ease-in-out infinite; }
.chip:hover{ border-color:var(--reef); }
.chip[aria-pressed="true"]{ background:var(--reef); color:var(--abyss); border-color:var(--reef); font-weight:600; }
@keyframes bob{ 0%,100%{ transform:translate(-50%,-50%) } 50%{ transform:translate(-50%,calc(-50% - 8px)) } }
.reeflabels{ position:absolute; left:0; right:0; bottom:10px; height:30px; pointer-events:none; }
.reeflabels span{ position:absolute; transform:translateX(-50%); font-size:.9rem; font-weight:600; color:var(--surface); white-space:nowrap; transition:color .4s; }
.reeflabels span.on{ color:var(--reef); }
.btn{ font:inherit; font-weight:600; font-size:1.02rem; color:var(--abyss); background:var(--reef); border:0; border-radius:999px; padding:.85rem 1.5rem; min-height:50px; cursor:pointer; }
.result{ margin-top:30px; max-width:44rem; }
.out{ min-height:5em; font-size:1.12rem; line-height:1.55; }
.out b{ font-weight:600; }
.fine{ font-size:.9rem; color:var(--ink2); margin-top:18px; }

/* floor + form */
.floor{ display:block; min-height:auto; padding-top:24vh; padding-bottom:10vh; }
.floorgrid{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.15fr); gap:clamp(28px,5vw,80px); align-items:start; }
.foot{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; margin-top:12vh; padding-top:22px; border-top:1px solid var(--rule); font-size:.92rem; color:var(--ink2); }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

@media (max-width: 860px){
  .nav li:not(.cta){ display:none; }
  .sec,.sec.r{ justify-content:flex-start; align-items:flex-end; padding-bottom:18vh; }
  .hero{ padding-bottom:12vh; }
  .gauge{ bottom:auto; top:calc(env(safe-area-inset-top,0px) + 76px); }
  .gauge .track,.gauge .dot{ display:none; }
  .gauge .num{ font-size:1.15rem; }
  .stage{ height:auto; min-height:460px; padding-top:12px; }
  .chips{ position:relative; inset:auto; display:flex; flex-wrap:wrap; gap:8px; padding:0 12px; z-index:2; }
  .chip{ position:static; transform:none; animation:none; font-size:.88rem; }
  .result,.floorgrid{ grid-template-columns:1fr; }
  .reeflabels span{ font-size:.76rem; }
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .cue i,.chip{ animation:none; }
}

/* skip link and admin bar */
.skip{ position:absolute; left:12px; top:-60px; z-index:20; background:var(--reef); color:var(--abyss); padding:10px 16px; border-radius:999px; font-weight:600; text-decoration:none; }
.skip:focus{ top:12px; }
body.admin-bar .bar{ top:32px; }
@media (max-width: 782px){ body.admin-bar .bar{ top:46px; } }

/* contact: Formidable Forms, styled to the Swell */
.scm-form{ background:rgba(22,59,71,.86); border:1px solid rgba(169,201,206,.22); border-radius:28px; padding:clamp(22px,3.5vw,40px); color:var(--paper); }
.scm-form .form-missing{ margin:0; font-size:1.15rem; }
.scm-form .frm_forms, .scm-form .frm_forms *{ font-family:var(--sans); box-sizing:border-box; }
.scm-form .frm_forms form{ margin:0; }
.scm-form .frm_forms fieldset{ border:0; margin:0; padding:0; min-width:0; }
.scm-form .frm_screen_reader, .scm-form .frm_forms legend.frm_hidden, .scm-form .frm_hidden_container > label.frm_primary_label.frm_hidden{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.scm-form .frm_fields_container{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:18px 16px; }
.scm-form .frm_form_field{ grid-column:span 12; margin:0; position:relative; }
.scm-form .frm_half{ grid-column:span 6; }
.scm-form .frm_third{ grid-column:span 4; }
.scm-form .frm_two_thirds{ grid-column:span 8; }
.scm-form .frm_fourth{ grid-column:span 3; }
.scm-form .frm_primary_label{ display:block; margin:0 0 7px; padding:0; font-size:.95rem; font-weight:400; color:var(--surface); }
.scm-form .frm_required{ color:var(--reef); margin-left:.2rem; }
.scm-form .frm_description{ margin-top:6px; font-size:.88rem; color:var(--surface); }
.scm-form .frm_forms input[type="text"], .scm-form .frm_forms input[type="email"], .scm-form .frm_forms input[type="tel"], .scm-form .frm_forms input[type="url"], .scm-form .frm_forms input[type="number"], .scm-form .frm_forms select, .scm-form .frm_forms textarea{
  width:100%; font-size:1.05rem; line-height:1.4; color:var(--paper); background:var(--abyss); border:1.5px solid rgba(169,201,206,.35); border-radius:12px; padding:.8rem .95rem; min-height:50px; box-shadow:none; }
.scm-form .frm_forms textarea{ min-height:130px; resize:vertical; }
.scm-form .frm_forms input:focus, .scm-form .frm_forms select:focus, .scm-form .frm_forms textarea:focus{ outline:none; border-color:var(--reef); box-shadow:0 0 0 3px rgba(232,113,74,.3); background:var(--abyss); }
.scm-form .frm_forms ::placeholder{ color:#7FA9B0; opacity:1; }
.scm-form .frm_opt_container{ display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.scm-form .frm_radio, .scm-form .frm_checkbox{ margin:0; }
.scm-form .frm_radio label, .scm-form .frm_checkbox label{ position:relative; display:inline-flex; align-items:center; min-height:44px; padding:.5rem 1rem; border-radius:999px; border:1.5px solid var(--shallow); font-size:.98rem; color:var(--paper); cursor:pointer; }
.scm-form .frm_radio label:hover, .scm-form .frm_checkbox label:hover{ border-color:var(--surface); }
.scm-form .frm_radio input, .scm-form .frm_checkbox input{ position:absolute; opacity:0; width:1px; height:1px; margin:0; }
.scm-form .frm_radio label:has(input:checked), .scm-form .frm_checkbox label:has(input:checked){ background:var(--surface); border-color:var(--surface); color:var(--abyss); font-weight:600; }
.scm-form .frm_radio label:has(input:focus-visible), .scm-form .frm_checkbox label:has(input:focus-visible){ outline:3px solid var(--reef); outline-offset:3px; }
.scm-form .cf-turnstile, .scm-form .frm-cf-turnstile{ min-height:65px; }
.scm-form .frm_submit{ grid-column:span 12; margin:4px 0 0; display:flex; flex-wrap:wrap; align-items:center; gap:14px; }
.scm-form .frm_submit button, .scm-form .frm_submit input[type="submit"], .scm-form .frm_button_submit{
  font-family:var(--sans); font-weight:600; font-size:1.02rem; color:var(--abyss); background:var(--reef); border:0; border-radius:999px; padding:.85rem 1.6rem; min-height:50px; cursor:pointer; box-shadow:none; text-shadow:none; }
.scm-form .frm_button_submit:hover{ background:#EE8763; color:var(--abyss); }
.scm-form .frm_button_submit:focus-visible{ outline:3px solid var(--paper); outline-offset:3px; }
.scm-form .frm_loading_form .frm_button_submit{ opacity:.6; pointer-events:none; }
.scm-form .frm_error{ margin-top:6px; font-size:.9rem; color:#F3B19A; }
.scm-form .frm_blank_field input, .scm-form .frm_blank_field select, .scm-form .frm_blank_field textarea{ border-color:#F3B19A; }
.scm-form .frm_error_style{ margin:0 0 18px; padding:.9rem 1.1rem; border-radius:12px; background:rgba(232,113,74,.14); color:var(--paper); font-size:.95rem; }
.scm-form .frm_message{ padding:6px 0; font-size:1.15rem; line-height:1.55; color:var(--paper); }
.scm-form .frm_message p{ margin:0 0 .6em; }
@media (max-width: 860px){ .scm-form .frm_half, .scm-form .frm_third, .scm-form .frm_two_thirds, .scm-form .frm_fourth{ grid-column:span 12; } }