/* ==========================================================================
   Blue Fish — site.css
   Plain CSS. No framework, no build step. Sections:
   1. Fonts  2. Tokens  3. Base  4. Layout & water  5. Chrome (nav/footer)
   6. Components  7. Page blocks  8. Sea-life motion
   ========================================================================== */

/* 1. FONTS ---------------------------------------------------------------- */
/* Proxima Nova is the licensed brand face (5 cuts shipped in /fonts).
   Mulish is the metric-compatible fallback from Google Fonts. */
@import url("https://fonts.googleapis.com/css2?family=Mulish:wght@400;600;700;800;900&display=swap");
@font-face{font-family:"Proxima Nova";src:url("../fonts/Proxima_Nova_Reg.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Proxima Nova";src:url("../fonts/Proxima_Nova_Sbold.otf") format("opentype");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Proxima Nova";src:url("../fonts/Proxima_Nova_Bold.otf") format("opentype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Proxima Nova";src:url("../fonts/Proxima_Nova_Xbold.otf") format("opentype");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Proxima Nova";src:url("../fonts/Proxima_Nova_Black.otf") format("opentype");font-weight:900;font-style:normal;font-display:swap}

/* 2. TOKENS ------------------------------------------------------------- */
:root{
 /* brand palette — five values, no more */
 --bf-navy:#293E50;--bf-blue:#0BA9E0;--bf-orange-red:#DC4E36;--bf-charcoal:#484849;--bf-paper:#FFFFFF;
 /* derived navy */
 --bf-navy-900:#1B2A36;--bf-navy-800:#22333F;--bf-navy-700:#293E50;--bf-navy-600:#3D5265;--bf-navy-500:#54687A;--bf-navy-400:#7C8B98;--bf-navy-300:#A9B4BE;--bf-navy-200:#D2D8DE;--bf-navy-100:#E7EBEF;--bf-navy-050:#F4F6F8;
 /* derived blue */
 --bf-blue-700:#0679A2;--bf-blue-600:#0993C3;--bf-blue-500:#0BA9E0;--bf-blue-400:#3FBDE8;--bf-blue-200:#A6E1F5;--bf-blue-050:#EAF7FD;
 /* derived accent */
 --bf-accent-700:#A93724;--bf-accent-600:#C3422D;--bf-accent-500:#DC4E36;--bf-accent-100:#FBE4DF;
 /* sunfish — delight only */
 --bf-sunfish-500:#FFC93C;--bf-sunfish-600:#E0A211;
 /* surfaces & text */
 --surface-page:var(--bf-navy-050);--surface-card:var(--bf-paper);--surface-inverse:var(--bf-navy);--surface-inverse-deep:var(--bf-navy-900);--surface-brand-soft:var(--bf-blue-050);--surface-sunken:var(--bf-navy-100);
 --text-heading:var(--bf-navy);--text-body:var(--bf-charcoal);--text-muted:var(--bf-navy-500);--text-faint:var(--bf-navy-400);--text-on-dark:var(--bf-paper);--text-on-dark-muted:var(--bf-navy-300);--text-accent:var(--bf-accent-700);
 --border-subtle:var(--bf-navy-200);--border-strong:var(--bf-navy-300);--border-inverse:rgba(255,255,255,.18);--rule-accent:var(--bf-orange-red);
 /* actions */
 --action-primary:var(--bf-blue-700);--action-primary-hover:var(--bf-blue-600);--action-primary-active:var(--bf-blue-700);
 --action-accent:var(--bf-accent-700);--action-accent-hover:var(--bf-accent-600);--action-accent-active:var(--bf-accent-700);
 --focus-ring:var(--bf-blue);
 /* type */
 --font-sans:"Proxima Nova","Mulish",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
 --font-display:var(--font-sans);--font-mono:var(--font-sans);
 /* space */
 --space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--space-20:80px;--space-24:96px;--space-32:128px;
 /* radii */
 --radius-sm:4px;--radius-lg:10px;--radius-xl:16px;--radius-pill:999px;
 --radius-play-sm:10px;--radius-play-md:16px;--radius-play-lg:22px;--radius-play-xl:32px;
 /* elevation */
 --shadow-md:0 6px 18px rgba(41,62,80,.10);--shadow-lg:0 16px 40px rgba(41,62,80,.14);--shadow-hard-navy:14px 14px 0 var(--bf-navy);
 /* motion */
 --dur-fast:140ms;--dur-base:180ms;--ease-standard:cubic-bezier(.2,.7,.2,1);--ease-swim:cubic-bezier(.45,.05,.3,1);
 --transition-color:color var(--dur-fast) var(--ease-standard),background-color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard);
 /* layout */
 --container-max:1200px;--header-h:80px;--measure-body:68ch;
}

/* 3. BASE --------------------------------------------------------------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{margin:0;background:var(--bf-navy-900);color:var(--text-body);font:400 18px/1.55 var(--font-sans);-webkit-font-smoothing:antialiased;text-wrap:pretty;overflow-x:clip}
h1,h2,h3,h4{margin:0;color:var(--text-heading);letter-spacing:-.02em;line-height:1.15;text-wrap:balance}
p{margin:0 0 16px}
img{max-width:100%;display:block}
a{color:var(--bf-blue-700);text-decoration:none;transition:var(--transition-color)}
a:hover{color:var(--bf-navy);text-decoration:underline;text-underline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
::selection{background:var(--bf-blue-200);color:var(--bf-navy)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:200;background:#fff;padding:10px 14px;border-radius:4px}

/* 4. LAYOUT & WATER ----------------------------------------------------- */
.zone{position:relative;padding:var(--space-24) var(--space-10)}
.shell{position:relative;max-width:var(--container-max);margin:0 auto}
.abs{position:absolute}
section[id]{scroll-margin-top:96px}
/* The descent: sky, open water, sunlit shallows, the deep. */
.sky{--skw:clamp(190px,25vw,310px);position:relative;overflow-x:clip;overflow-y:visible;z-index:2;height:clamp(170px,21vw,240px);background:linear-gradient(180deg,var(--bf-paper) 0%,#F2FAFE 55%,var(--bf-blue-050) 100%)}
.ocean-full{position:relative;overflow-x:clip;background:linear-gradient(180deg,var(--bf-blue-050) 0%,var(--bf-blue-200) 5%,var(--bf-blue-400) 11%,var(--bf-blue-600) 16%,var(--bf-blue-700) 21%,#0A5C7E 31%,#104A63 43%,#1B3543 56%,var(--bf-navy-800) 71%,var(--bf-navy-900) 85%,var(--bf-navy-900) 100%)}
.open,.reef{position:relative;overflow-x:clip;background:linear-gradient(180deg,var(--bf-blue-700) 0%,#0A5C7E 60%,#08536F 100%)}
.shallows{position:relative;overflow-x:clip;background:linear-gradient(180deg,var(--bf-blue-050) 0%,var(--bf-paper) 18%,var(--bf-paper) 78%,var(--surface-page) 100%)}
.deep{position:relative;overflow-x:clip;background:linear-gradient(180deg,#104A63 0%,var(--bf-navy-800) 44%,var(--bf-navy-900) 100%)}
.shallow-top{position:relative;overflow-x:clip;background:linear-gradient(180deg,var(--bf-blue-050) 0%,var(--bf-blue-200) 22%,var(--bf-navy-050) 62%,var(--bf-navy-050) 100%)}
/* A band of open water breaking two light sections apart. */
.band{position:relative;overflow:hidden;height:clamp(190px,20vw,260px);background:linear-gradient(180deg,#0A5C7E 0%,var(--bf-blue-700) 46%,#0A5C7E 100%)}
.on-dark a{color:var(--bf-blue-200)}
.on-dark a:hover{color:var(--bf-paper)}
.head-dark h1,.head-dark h2,.head-dark h3,.head-dark p{color:var(--bf-paper)}
/* Ambient sea life only where there's gutter to spare. */
.deco-wide{display:none}
@media (min-width:1240px){.deco-wide{display:block;position:absolute;inset:0;pointer-events:none}}
.rule{border-top:1px solid var(--border-subtle)}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-6)}
.stack{display:grid;gap:var(--space-5)}
.mono{font:600 13px/1.4 var(--font-sans);letter-spacing:.04em}

/* 5. CHROME ------------------------------------------------------------- */
.navbar{position:sticky;top:0;z-index:100;background:var(--surface-card);border-bottom:1px solid var(--border-subtle)}
.navbar__in{max-width:var(--container-max);margin:0 auto;min-height:var(--header-h);padding:0 var(--space-10);display:flex;align-items:center;justify-content:space-between;gap:var(--space-8)}
.navbar img{height:34px;width:auto}
.navbar nav{display:flex;align-items:center;gap:var(--space-8)}
.nav-link{font:700 16px/1 var(--font-sans);color:var(--text-heading);padding-bottom:2px;border-bottom:2px solid transparent}
.nav-link:hover{color:var(--bf-blue-700);text-decoration:none}
.nav-link[aria-current="page"]{color:var(--bf-blue);border-bottom-color:currentColor}
@media (max-width:800px){.navbar nav{gap:var(--space-5)}.nav-link{font-size:15px}}
/* Mobile menu (<=640px): the nav drops out of the header as a column of water. */
.nav-toggle,.burger,.nav-scrim,.nav-bubbles,.nav-link--home{display:none}
@media (max-width:640px){
 .navbar__in{padding:0 var(--space-6);gap:var(--space-4)}
 .navbar img{height:30px}
 .nav-toggle{display:block;position:absolute;width:1px;height:1px;opacity:0;margin:0;pointer-events:none}
 .burger{display:flex;align-items:center;justify-content:center;width:48px;height:48px;margin-right:-10px;border-radius:var(--radius-play-sm);color:var(--bf-navy);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background var(--dur-fast) var(--ease-standard)}
 .burger:active{background:var(--bf-navy-100)}
 .burger .x{display:none}
 .nav-toggle:checked~.burger{color:var(--bf-blue-700)}
 .nav-toggle:checked~.burger .waves{display:none}
 .nav-toggle:checked~.burger .x{display:block}
 .nav-toggle:focus-visible~.burger{outline:2px solid var(--focus-ring);outline-offset:2px}
 .navbar nav{position:absolute;left:0;right:0;top:100%;display:flex;flex-direction:column;align-items:stretch;gap:0;padding:10px var(--space-6) 26px;background:linear-gradient(180deg,var(--bf-blue-700) 0%,#0A5C7E 48%,var(--bf-navy-800) 100%);box-shadow:0 18px 40px rgba(27,42,54,.35);overflow:hidden;clip-path:inset(0 0 100% 0);transition:clip-path 280ms var(--ease-swim)}
 .navbar nav::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent)}
 .nav-toggle:checked~nav{clip-path:inset(0 0 0 0)}
 .nav-bubbles{display:block;position:absolute;inset:0;overflow:hidden;pointer-events:none}
 .nav-bubbles i{position:absolute;bottom:-24px;border-radius:50%;border:2px solid rgba(255,255,255,.45);background:rgba(255,255,255,.12);animation-name:oc-rise;animation-timing-function:linear;animation-iteration-count:infinite}
 .navbar nav .nav-link{display:block;position:relative;z-index:1;padding:17px 0 17px 16px;font:800 20px/1.2 var(--font-display);letter-spacing:-.01em;color:var(--bf-paper);border-bottom:1px solid rgba(255,255,255,.16);border-left:4px solid transparent}
 .navbar nav .nav-link:hover{color:var(--bf-paper)}
 .navbar nav .nav-link[aria-current="page"]{color:var(--bf-paper);border-bottom-color:rgba(255,255,255,.16);border-left-color:var(--bf-orange-red)}
 .nav-link--home{display:block}
 .navbar nav .btn{position:relative;z-index:1;margin-top:22px;display:flex;width:100%;justify-content:center;min-height:52px;font-size:17px;background:var(--bf-paper);color:var(--bf-navy);border:none}
 .navbar nav .btn:hover{background:var(--bf-navy-100);color:var(--bf-navy)}
 .navbar nav .btn svg{color:var(--bf-navy)}
 .nav-scrim{display:block;position:fixed;inset:var(--header-h) 0 0;background:rgba(27,42,54,.55);opacity:0;pointer-events:none;transition:opacity var(--dur-base) var(--ease-standard);z-index:-1}
 .nav-toggle:checked~.nav-scrim{opacity:1;pointer-events:auto}
}
@media (max-width:640px) and (prefers-reduced-motion:reduce){.navbar nav{transition:none}}

/* Mobile tab bar: at phone width the header keeps the logo only and navigation
   moves to a fixed app-style bar at the bottom. */
.tabbar{display:none}
@media (max-width:640px){
 .navbar nav,.burger,.nav-toggle,.nav-scrim{display:none!important}
 .navbar__in{justify-content:flex-start}
 body{padding-bottom:calc(62px + env(safe-area-inset-bottom))}
 .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:120;background:var(--bf-blue);padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -6px 18px rgba(41,62,80,.18)}
 .tabbar a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:62px;padding:8px 2px;color:var(--bf-paper);font:800 11px/1 var(--font-sans);letter-spacing:.06em;text-transform:uppercase;text-align:center;-webkit-tap-highlight-color:transparent;transition:background var(--dur-fast) var(--ease-standard)}
 .tabbar a:hover,.tabbar a:active{color:var(--bf-paper);text-decoration:none;background:var(--bf-blue-600)}
 .tabbar a+a{box-shadow:inset 1px 0 0 rgba(255,255,255,.28)}
 .tabbar svg{display:block;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
 .tabbar a[aria-current="page"]{background:var(--bf-blue-700);box-shadow:inset 0 4px 10px rgba(27,42,54,.55)}
 .tabbar a[aria-current="page"] svg,.tabbar a[aria-current="page"] span{transform:translateY(1px)}
 .tabbar a[aria-current="page"]::before{content:none}
 .tabbar a[aria-current="page"],.tabbar a[aria-current="page"]:hover,.tabbar a[aria-current="page"]:active{color:var(--bf-navy-800);background:var(--bf-blue-700)}
 .tabbar a[aria-current="page"] svg,.tabbar a[aria-current="page"] span{opacity:.75}
 .tabbar a+a[aria-current="page"]{box-shadow:inset 0 4px 10px rgba(27,42,54,.55),inset 1px 0 0 rgba(255,255,255,.28)}
 .tabbar a:focus-visible{outline:2px solid var(--bf-paper);outline-offset:-4px}
}

.footer{background:var(--surface-inverse-deep);color:var(--text-on-dark-muted);padding:var(--space-20) 0 var(--space-10)}
.footer__in{max-width:var(--container-max);margin:0 auto;padding:0 var(--space-10);display:flex;gap:var(--space-16);flex-wrap:wrap;justify-content:space-between}
.footer__brand{display:flex;flex-direction:column;gap:var(--space-5);max-width:320px}
.footer__brand img{height:36px;width:auto}
.footer__contact{font:400 16px/1.6 var(--font-mono);color:var(--bf-paper)}
.footer__col{display:flex;flex-direction:column;gap:var(--space-4)}
.footer__col h2{font:800 13px/1.2 var(--font-sans);letter-spacing:.32em;text-transform:uppercase;color:var(--bf-blue-400)}
.footer a{color:var(--text-on-dark);font-size:16px}
.footer a:hover{color:var(--bf-blue-200)}
.footer__legal{max-width:var(--container-max);margin:var(--space-16) auto 0;padding:var(--space-6) var(--space-10) 0;border-top:1px solid var(--border-inverse);font:500 14px/1.4 var(--font-sans);letter-spacing:.04em;color:var(--bf-paper)}

/* 6. COMPONENTS --------------------------------------------------------- */
/* Buttons — filled darken one step on hover, nudge 1px on press. Never scale. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-3);height:48px;padding:0 var(--space-6);background:var(--action-primary);color:var(--bf-paper);border:none;border-radius:var(--radius-sm);font:700 16px/1 var(--font-sans);letter-spacing:.005em;text-decoration:none;cursor:pointer;white-space:nowrap;transition:var(--transition-color),transform var(--dur-fast) var(--ease-standard)}
.btn:hover{background:var(--action-primary-hover);color:var(--bf-paper);text-decoration:none}
.btn:active{background:var(--action-primary-active);transform:translateY(1px)}
.btn svg{flex:0 0 auto}
.btn--sm{height:36px;padding:0 var(--space-4);font-size:14px;gap:var(--space-2)}
.btn--lg{height:58px;padding:0 var(--space-8);font-size:18px}
.btn--accent{background:var(--action-accent)}
.btn--accent:hover{background:var(--action-accent-hover)}
.btn--secondary{background:var(--bf-navy)}
.btn--secondary:hover{background:var(--bf-navy-800)}
.btn--inverse{background:var(--bf-paper);color:var(--bf-navy)}
.btn--inverse:hover{background:var(--bf-navy-100);color:var(--bf-navy)}
.btn--cta,.on-dark a.btn--cta{background:#56B42B;color:#153B03}
.btn--cta:hover,.on-dark a.btn--cta:hover{background:#4a9d24;color:#153B03}
.btn--outline{background:transparent;color:var(--bf-navy);border:2px solid var(--bf-navy)}
.btn--outline:hover{background:var(--bf-navy-100);color:var(--bf-navy)}
.btn--full{display:flex;width:100%}

/* Cards — plain hairline, raised shadow, or the signature hard offset. */
.card{background:var(--surface-card);color:var(--text-body);border:1px solid var(--border-subtle);border-radius:var(--radius-play-lg);padding:var(--space-8)}
.card--raised{border:none;box-shadow:var(--shadow-md)}
.card--offset{border:none;box-shadow:var(--shadow-hard-navy);border-radius:var(--radius-lg);margin-right:14px}
.card--ghost{background:transparent;border:1px solid var(--border-inverse);border-radius:var(--radius-play-xl)}
.card--tap{transition:box-shadow var(--dur-base) var(--ease-standard)}
.card--tap:hover{box-shadow:var(--shadow-lg)}
.card h3{color:var(--bf-navy)}

/* Section headings */
.sec{display:flex;flex-direction:column;gap:var(--space-4);max-width:720px}
.sec--wide{max-width:760px}
.sec--center{align-items:center;text-align:center;margin-left:auto;margin-right:auto}
.sec h1,.sec h2{margin:0;font:800 clamp(30px,3.4vw,40px)/1.15 var(--font-display);letter-spacing:-.022em;color:var(--text-heading)}
.sec h1{font-weight:900;font-size:clamp(34px,4.4vw,56px);letter-spacing:-.025em}
.sec p{margin:0;font:400 18px/1.55 var(--font-sans);max-width:var(--measure-body)}
.sec--dark h1,.sec--dark h2{color:var(--text-on-dark)}
.sec--dark p{color:var(--bf-paper)}
.sec--dark .eyebrow{color:var(--bf-blue-400)}
.eyebrow{display:flex;align-items:center;gap:var(--space-3);font:800 13px/1.2 var(--font-sans);letter-spacing:.32em;text-transform:uppercase;color:var(--text-accent)}
/* Eyebrow stamp — white on deep accent, passes AA on any water. */
.stamp{display:inline-block;background:var(--bf-accent-700);color:var(--bf-paper);padding:7px 11px 6px;border-radius:4px}

/* Hero */
.hero h1{font:900 clamp(40px,5.6vw,68px)/1.06 var(--font-display);letter-spacing:-.028em;margin:0}
.hero__lede{margin:var(--space-6) 0 0;max-width:660px;font:400 clamp(17px,1.5vw,20px)/1.55 var(--font-sans);color:var(--bf-paper);background:var(--bf-navy);padding:18px 26px;border-radius:var(--radius-play-md)}
.hero__body{max-width:820px;margin-top:var(--space-10)}

/* Depth gauge — the brand's "data voice" */
.depth{display:flex;align-items:center;gap:var(--space-3)}
.depth i{width:32px;height:2px;background:rgba(255,255,255,.55);flex:0 0 auto}
.depth span{font:600 12px/1.4 var(--font-sans);letter-spacing:.06em;color:rgba(255,255,255,.92);white-space:nowrap}
.depth--light i{background:var(--bf-navy-500)}
.depth--light span{color:var(--bf-navy-700)}

/* Pull quote */
.quote{margin:0;padding-left:var(--space-6);border-left:4px solid var(--rule-accent)}
.quote p{margin:0;font:700 clamp(26px,3vw,40px)/1.35 var(--font-display);letter-spacing:-.01em;color:var(--text-heading)}
.quote footer{margin-top:var(--space-4);font:800 13px/1.2 var(--font-sans);letter-spacing:.32em;text-transform:uppercase;color:var(--text-muted)}
.quote--dark p{color:var(--text-on-dark)}
.quote--dark footer{color:var(--text-on-dark-muted)}
.quote footer span{color:var(--bf-navy-400)}

/* CTA banner */
.cta-frame{border:1px solid var(--border-inverse);border-radius:var(--radius-play-xl);overflow:hidden}
.cta{display:flex;gap:var(--space-12);align-items:center;justify-content:space-between;flex-wrap:wrap;padding:var(--space-12)}
.cta__text{display:flex;flex-direction:column;gap:var(--space-4);max-width:620px}
.cta h2{margin:0;font:800 clamp(28px,3.2vw,40px)/1.15 var(--font-display);letter-spacing:-.022em;color:var(--text-on-dark)}
.cta p{margin:0;font:400 18px/1.55 var(--font-sans);color:var(--bf-paper)}
.cta__contact{font:400 16px/1.6 var(--font-mono);color:var(--bf-paper);margin-top:var(--space-2)}

/* Badge & alert */
.badge{display:inline-flex;align-items:center;padding:4px 8px;border-radius:2px;font:800 13px/1.2 var(--font-sans);letter-spacing:.32em;text-transform:uppercase;background:var(--surface-sunken);color:var(--text-muted);white-space:nowrap}
.badge--accent{background:var(--bf-orange-red);color:var(--bf-paper)}
.alert{display:flex;gap:var(--space-4);padding:var(--space-4) var(--space-5);background:var(--surface-brand-soft);border-left:4px solid var(--bf-blue);border-radius:var(--radius-sm);color:var(--bf-navy)}
.alert svg{color:var(--bf-blue);flex:0 0 auto;margin-top:2px}
.alert strong{display:block;font:700 16px/1.3 var(--font-sans);margin-bottom:4px}
.alert p{margin:0;font:400 16px/1.55 var(--font-sans);color:var(--text-body)}

/* Ticked lists */
.ticks{display:grid;gap:var(--space-3);margin:var(--space-5) 0 0;padding:0;list-style:none}
.ticks li{display:flex;gap:var(--space-3);font:400 16px/1.5 var(--font-sans)}
.ticks svg{color:var(--bf-blue-700);flex:0 0 auto}

/* Labelled image well — real photography goes here. */
.well{position:relative;display:flex;align-items:flex-end;justify-content:center;background:repeating-linear-gradient(135deg,var(--bf-navy-050) 0 12px,#E7ECF1 12px 24px);border:1px solid var(--border-subtle);border-radius:var(--radius-play-lg);overflow:hidden}
.well span{margin:0 0 18px;padding:7px 12px;background:var(--bf-navy);color:var(--bf-paper);border-radius:4px;font:600 12px/1.3 var(--font-sans);letter-spacing:.04em}
.figure-panel{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;background:var(--bf-blue-050);border-radius:var(--radius-play-xl);padding:24px}
.figure-panel img{max-width:100%;max-height:100%;width:auto;object-fit:contain;mix-blend-mode:multiply}
.figure-panel--offset{box-shadow:14px 14px 0 0 var(--bf-navy)}
@media (min-width:1024px){.figure-panel{aspect-ratio:4/5}}

/* Forms */
.field{display:flex;flex-direction:column;gap:var(--space-2)}
.field label{font:700 15px/1.3 var(--font-sans);color:var(--bf-navy)}
.field label em{font-style:normal;color:var(--bf-orange-red)}
.field .hint{font:400 14px/1.4 var(--font-sans);color:var(--text-muted)}
.input,.textarea,.select{width:100%;height:58px;padding:0 var(--space-4);background:var(--bf-paper);border:1px solid var(--border-strong);border-radius:var(--radius-sm);font:400 17px/1.4 var(--font-sans);color:var(--text-body);transition:var(--transition-color),box-shadow var(--dur-fast) var(--ease-standard)}
.textarea{height:auto;padding:var(--space-4);resize:vertical}
.select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--bf-navy) 50%),linear-gradient(135deg,var(--bf-navy) 50%,transparent 50%);background-position:calc(100% - 20px) 26px,calc(100% - 14px) 26px;background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:44px}
.input:focus,.textarea:focus,.select:focus{border-color:var(--bf-blue);box-shadow:0 0 0 3px rgba(11,169,224,.35);outline:none}
.input::placeholder,.textarea::placeholder{color:var(--bf-navy-400)}

/* 7. PAGE BLOCKS -------------------------------------------------------- */
.grid-2{display:grid;gap:var(--space-6);grid-template-columns:1fr}
.grid-3{display:grid;gap:var(--space-6);grid-template-columns:1fr}
@media (min-width:760px){.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:900px){.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.split{display:grid;gap:var(--space-12);grid-template-columns:1fr;align-items:start}
.split--mid{align-items:center}
@media (min-width:1024px){
 .split{gap:var(--space-16);grid-template-columns:repeat(2,minmax(0,1fr))}
 .split--l{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
 .split--r{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
 .split--wide-l{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr)}
}
.mt-10{margin-top:var(--space-10)}
.mt-12{margin-top:var(--space-12)}
.mt-16{margin-top:var(--space-16)}
.pt-0{padding-top:0}
.pb-32{padding-bottom:var(--space-32)}

/* numbered / keyed rows */
.rows{display:grid}
.rows>div{display:grid;grid-template-columns:44px minmax(0,1fr);gap:18px;padding:20px 0;align-items:baseline;border-top:1px solid var(--border-subtle)}
.rows>div:first-child{border-top:none}
.rows .n{font:900 26px/1 var(--font-display);color:var(--bf-blue-700)}
.rows h3{font:700 20px/1.25 var(--font-display);color:var(--bf-navy)}
.rows p{margin:6px 0 0;font:400 16px/1.55 var(--font-sans)}
.creds{display:grid}
.creds>div{display:grid;grid-template-columns:78px minmax(0,1fr);gap:18px;padding:18px 0;align-items:baseline;border-top:1px solid var(--border-inverse)}
.creds>div:first-child{border-top:none}
.creds .yr{font:600 14px/1.4 var(--font-sans);letter-spacing:.04em;color:var(--bf-blue-200)}
.creds .t{font:700 19px/1.25 var(--font-display);color:var(--text-on-dark)}
.creds .o{margin-top:4px;font:400 15px/1.5 var(--font-sans);color:rgba(255,255,255,.82)}
/* Big numbered value list (About) */
.values-lg{margin-top:var(--space-12);border-top:1px solid var(--border-subtle)}
.values-lg>div{display:grid;grid-template-columns:64px minmax(0,1fr);gap:clamp(16px,3vw,48px);padding:var(--space-8) 0;border-bottom:1px solid var(--border-subtle);align-items:baseline}
.values-lg .n{font:600 15px/1.4 var(--font-sans);letter-spacing:.04em;color:var(--bf-blue-700)}
.values-lg .pair{display:grid;gap:var(--space-2)}
@media (min-width:760px){.values-lg .pair{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--space-12);align-items:baseline}}
.values-lg h3{margin:0;font:900 clamp(22px,2.4vw,30px)/1.15 var(--font-display);letter-spacing:-.02em;color:var(--bf-navy)}
.values-lg p{margin:0;font:400 18px/1.55 var(--font-sans)}
/* Know / like / trust steps */
.steps{display:grid;gap:28px;padding:25px}
.steps>div{display:grid;grid-template-columns:46px minmax(0,1fr);column-gap:18px;align-items:start}
.steps .n{font:600 18px/1.4 var(--font-sans);letter-spacing:.04em;color:var(--bf-blue-700);padding-top:3px}
.steps h3{margin:0;font:700 21px/1.2 var(--font-display);color:var(--bf-navy)}
.steps p{margin:6px 0 0;font:400 16px/1.55 var(--font-sans)}
/* Service / feature cards */
.feat svg{color:var(--bf-blue-700)}
.feat h3{margin:var(--space-5) 0 0;font:700 21px/1.25 var(--font-display)}
.feat p{margin:var(--space-3) 0 0;font:400 16px/1.55 var(--font-sans)}
/* Pricing */
.tiers{display:grid;gap:var(--space-6);grid-template-columns:1fr;align-items:stretch}
@media (min-width:900px){.tiers{grid-template-columns:repeat(3,minmax(0,1fr))}}
.price{display:flex;flex-direction:column;gap:var(--space-5);background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-8)}
.price--featured{background:var(--surface-inverse);border:none}
.price__top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}
.price__tier{font:800 13px/1.2 var(--font-sans);letter-spacing:.32em;text-transform:uppercase;color:var(--text-muted)}
.price--featured .price__tier{color:var(--bf-blue-400)}
.price__money{display:flex;align-items:baseline;gap:var(--space-2)}
.price__money b{font:900 40px/1 var(--font-display);letter-spacing:-.022em;color:var(--text-heading)}
.price__money span{font:400 16px/1.55 var(--font-sans);color:var(--text-muted)}
.price--featured .price__money b{color:var(--text-on-dark)}
.price--featured .price__money span,.price--featured .price__desc{color:var(--text-on-dark-muted)}
.price__desc{margin:0;font:400 16px/1.55 var(--font-sans)}
.price ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-3)}
.price li{display:flex;gap:var(--space-3);font:400 16px/1.55 var(--font-sans)}
.price li i{width:6px;height:6px;border-radius:999px;background:var(--bf-blue);flex:0 0 auto;margin-top:9px}
.price--featured li{color:var(--text-on-dark)}
.price__note{font:500 12px/1.4 var(--font-sans);letter-spacing:.04em;color:var(--text-faint)}
.price--featured .price__note{color:var(--bf-navy-300)}
.price__cta{margin-top:auto;padding-top:var(--space-2)}
/* Website tiers (label / copy / features) */
.tier-row{display:grid;gap:var(--space-6);grid-template-columns:1fr}
@media (min-width:900px){.tier-row{grid-template-columns:180px minmax(0,1fr) 260px;gap:var(--space-8);align-items:start}}
.tier-row h3{margin:0 0 var(--space-3);font:700 21px/1.3 var(--font-display)}
.tier-row p{margin:0;font:400 16px/1.55 var(--font-sans)}
.money b{display:block;font:900 clamp(28px,3vw,36px)/1 var(--font-display);letter-spacing:-.02em;color:var(--bf-navy)}
.money > span{display:block;margin-top:6px;font:600 13px/1.4 var(--font-sans);letter-spacing:.04em;color:var(--text-muted)}
/* Dark "everything else" tiles */
.tile{padding:var(--space-8);border:1px solid var(--border-inverse);border-radius:var(--radius-play-lg)}
.tile__top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}
.tile svg{color:var(--bf-blue-400)}
.tile__price{font:600 13px/1.4 var(--font-sans);letter-spacing:.04em;color:var(--bf-paper)}
.tile h3{margin:var(--space-5) 0 0;font:700 20px/1.25 var(--font-display);color:var(--text-on-dark)}
.tile p{margin:var(--space-3) 0 0;font:400 16px/1.55 var(--font-sans);color:rgba(255,255,255,.86)}
/* Contact detail list */
.contact-list{display:grid;gap:var(--space-5);margin-top:var(--space-10)}
.contact-list div{display:flex;align-items:center;gap:var(--space-4)}
.contact-list svg{color:var(--bf-blue)}
.contact-list a,.contact-list span{font:600 15px/1.4 var(--font-sans);letter-spacing:.04em}
.contact-list span{color:var(--bf-blue-700)}
/* Chips */
.chips{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-8)}
.chips span{padding:9px 14px;border:1px solid var(--border-inverse);border-radius:999px;font:600 13px/1.4 var(--font-sans);letter-spacing:.04em;color:var(--bf-paper)}
/* Numbered process cards (Why us). */
.feat .step-n+h3{margin-top:0}
.step-n{display:block;margin-bottom:var(--space-3);font:800 13px/1 var(--font-sans);letter-spacing:.24em;color:var(--bf-blue-700)}

/* Three generations of Bluey (About). */
.gens{display:grid;gap:1px;grid-template-columns:1fr;background:var(--border-subtle);border:1px solid var(--border-subtle);border-radius:var(--radius-play-xl);overflow:hidden}
@media (min-width:760px){.gens{grid-template-columns:repeat(3,minmax(0,1fr))}}
.gens figure{display:flex;flex-direction:column;align-items:center;gap:var(--space-6);margin:0;padding:var(--space-10) var(--space-8) var(--space-8);background:var(--surface-card)}
.gens img{height:112px;width:auto;max-width:100%;object-fit:contain;mix-blend-mode:multiply}
.gens figcaption{text-align:center}
.gens .yr{display:block;font:500 12px/1.4 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}
.gens .t{display:block;margin-top:6px;font:700 17px/1.35 var(--font-display);color:var(--bf-navy)}

/* Fact box — the business-card data voice, used beside About's opening copy. */
.factbox{margin:var(--space-8) 0 0;border-top:2px solid var(--bf-navy)}
.factbox>div{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:baseline;gap:var(--space-4);padding:13px 0;border-bottom:1px solid var(--border-subtle)}
.factbox dt{margin:0;font:500 11px/1.4 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}
.factbox dd{margin:0;font:600 16px/1.45 var(--font-sans);color:var(--bf-navy)}

/* Prose column (About) */
.prose{display:grid;gap:var(--space-6);max-width:660px}
.prose p{margin:0;font:400 18px/1.55 var(--font-sans)}
.prose .lead{font:700 clamp(19px,1.9vw,23px)/1.45 var(--font-sans);color:var(--bf-navy)}
.byline{font:700 17px/1.4 var(--font-sans);color:var(--bf-navy)}
.byline span{display:block;font:400 15px/1.5 var(--font-sans);color:var(--text-muted)}

/* 8. SEA-LIFE MOTION ---------------------------------------------------- */
@keyframes oc-bob{0%,100%{transform:translateY(0) rotate(-1.4deg)}50%{transform:translateY(-10px) rotate(1.4deg)}}
@keyframes oc-sway{0%,100%{transform:translateX(-7px)}50%{transform:translateX(7px)}}
@keyframes oc-wag{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
@keyframes oc-kelp{0%,100%{transform:rotate(-2.4deg)}50%{transform:rotate(2.4deg)}}
@keyframes oc-kick{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
@keyframes oc-swim-across{0%{transform:translateX(-20vw)}100%{transform:translateX(108vw)}}
@keyframes oc-cross{0%{transform:translateX(112vw)}100%{transform:translateX(-30vw)}}
@keyframes oc-shimmer{0%,100%{opacity:.55;transform:translateX(0) skewX(0deg)}50%{opacity:1;transform:translateX(10px) skewX(1.2deg)}}
@keyframes oc-wave{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes oc-glow{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes oc-trail{0%{transform:translateY(6px);opacity:0}25%{opacity:.7}100%{transform:translateY(-34px);opacity:0}}
@keyframes oc-drift-y{0%,100%{transform:translateY(0)}50%{transform:translateY(-26px)}}
@keyframes oc-rise{0%{transform:translateY(0) scale(.55);opacity:0}12%{opacity:.95}85%{opacity:.75}100%{transform:translateY(calc(-1 * var(--oc-rise-y,340px))) scale(1);opacity:0}}
.shafts{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.bubbles{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.bubbles span{position:absolute;border-radius:999px}
.shoal{position:absolute;inset:0;pointer-events:none}
.waterline{position:relative;height:56px;overflow:hidden;background:var(--bf-blue-050)}
.waterline>div{position:absolute;inset:0}
.waterline svg{position:absolute;left:0;width:200%;height:100%}
@media (prefers-reduced-motion:reduce){.oc-anim{animation:none!important}}

/* 9. PAGE SPECIFICS ----------------------------------------------------- */
.hero--center{max-width:860px;margin:0 auto;text-align:center;padding-top:clamp(40px,6vw,86px)}
.hero--center h1{color:var(--bf-navy)}
.hero--center .hero__lede{margin-left:auto;margin-right:auto}
.hero__cta{justify-content:center}
.pill-note{color:var(--bf-paper);background:var(--bf-navy);padding:8px 14px;border-radius:var(--radius-sm)}
.link-plain{color:var(--bf-paper);text-decoration:underline;text-underline-offset:3px}
.link-plain:hover{color:var(--bf-blue-200)}
.tier-row.card--offset{border-radius:var(--radius-lg)}
.contact-list .mono{font-size:15px}

/* 10. SERVICE PAGES (parent in top nav, children in the side nav) --------- */
.svc{display:grid;gap:var(--space-10);grid-template-columns:1fr;align-items:start}
@media (min-width:1024px){.svc{grid-template-columns:250px minmax(0,1fr);gap:var(--space-16)}}
.sidenav{display:flex;flex-direction:column;gap:2px;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-5)}
@media (min-width:1024px){.sidenav{position:sticky;top:calc(var(--header-h) + var(--space-6))}}
.sidenav h2{margin:0 0 var(--space-3);font:800 13px/1.2 var(--font-sans);letter-spacing:.32em;text-transform:uppercase;color:var(--text-muted)}
.sidenav a{display:block;padding:11px 14px;border-left:2px solid var(--border-subtle);font:700 16px/1.3 var(--font-sans);color:var(--bf-navy)}
.sidenav a:hover{background:var(--bf-navy-050);color:var(--bf-blue-700);text-decoration:none}
.sidenav a[aria-current="page"]{border-left:2px solid var(--bf-blue);color:var(--bf-blue-700);background:var(--surface-brand-soft)}
.sidenav a.sub{margin-left:14px;font:600 15px/1.3 var(--font-sans);color:var(--text-muted)}
.sidenav a.sub:hover,.sidenav a.sub[aria-current="page"]{color:var(--bf-blue-700)}
.hero--center .eyebrow{justify-content:center}
.feat h3 a{color:var(--bf-navy);text-decoration:none}
.feat h3 a:hover{color:var(--bf-blue-700);text-decoration:none}
a.card--ghost{display:flex;flex-direction:column;justify-content:center;color:var(--text-on-dark);text-decoration:none}
a.card--ghost:hover{background:rgba(255,255,255,.06);color:var(--text-on-dark);text-decoration:none}
.svc-card{display:flex;flex-direction:column;gap:var(--space-3);color:var(--text-body);text-decoration:none}
.svc-card:hover{text-decoration:none;box-shadow:var(--shadow-lg)}
.svc-card h3{margin:0;font:700 21px/1.25 var(--font-display)}
.svc-card p{margin:0;font:400 16px/1.55 var(--font-sans)}
.svc-card .go{margin-top:auto;padding-top:var(--space-3);display:flex;align-items:center;gap:var(--space-2);font:700 15px/1 var(--font-sans);color:var(--bf-blue-700)}

/* Mobile-first CTA: at phone width the hero tightens so the button clears the fold. */
@media (max-width:640px){
 .zone{padding:var(--space-16) var(--space-6)}
 .hero__body{margin-top:var(--space-5)}
 .hero h1{font-size:clamp(30px,8.2vw,38px);line-height:1.1}
 .hero__lede{margin-top:var(--space-5);padding:14px 18px;font-size:16px}
 .hero .row,.hero__cta{margin-top:var(--space-6)!important;gap:var(--space-4)}
 .hero--center{padding-top:var(--space-8)}
 .svc .sidenav+div{margin-top:0}
}

/* Homepage hero at phone width. The stack above the button is ~590px of fixed
   decoration, so all of it comes down together: sky 96>64, waterline 34>24, the
   depth gauge hides, zone and hero padding halve, and the navy lede tightens.
   Button bottom lands near 605 instead of 727. Desktop untouched. */
@media (max-width:640px){
 .sky{height:64px}
 .waterline{height:24px}
 .ocean-full>.zone:first-of-type{padding-top:var(--space-4)!important;padding-bottom:clamp(150px,26vw,200px)!important;min-height:0!important}
 .ocean-full>.zone:first-of-type .depth{display:none}
 .hero--center{padding-top:var(--space-4)}
 .hero--center .hero__lede{font-size:15px;line-height:1.45;padding:12px 16px;margin-top:var(--space-4)}
}

a[href^="mailto:"],.footer a[href^="mailto:"],.on-dark a[href^="mailto:"]{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.footer__contact a[href^="mailto:"]{color:var(--text-on-dark);font-size:inherit}