/* Saltwater Tours: a fictional sample business by BloomOps (noindex).
   Three colours only: Deep Water, Low Sun, Salt. Wet sand is a tint, muted is a text shade. */
/* Two self-hosted variable fonts (SIL OFL 1.1, see fonts/README.txt). */
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:700 800;font-display:swap;src:url(fonts/bricolage-grotesque-latin.woff2) format("woff2")}
@font-face{font-family:Manrope;font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/manrope-latin.woff2) format("woff2")}
:root{
  --deep:#0B3C5D; --sun:#F2B632; --sun-press:#E0A21F; --salt:#F6F1E7;
  --sand:#EAE3D4; --muted:#4A5A66;
  --shadow:0 8px 24px rgba(11,60,93,.10);
  --display:"Bricolage Grotesque",system-ui,sans-serif;
  --body:Manrope,system-ui,-apple-system,"Segoe UI",sans-serif;
  --gutter:20px; --max:1180px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:72px}
body{margin:0;background:var(--salt);color:var(--deep);font:400 17px/1.6 var(--body)}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--deep);outline-offset:2px;border-radius:4px}
.on-dark :focus-visible,.dark :focus-visible,.hero :focus-visible,.menu :focus-visible,.footer :focus-visible,.ribbon :focus-visible{outline-color:var(--sun)}
h1,h2,h3{font-family:var(--display);font-optical-sizing:auto;font-weight:800;line-height:1.05;letter-spacing:-.02em;margin:0 0 16px}
h1{font-size:44px}
h2{font-size:32px}
h3{font-size:22px;line-height:1.15}
p{margin:0 0 16px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.section{padding:64px 0}
.eyebrow{font:700 13px/1.3 var(--body);letter-spacing:.12em;text-transform:uppercase;margin:0 0 12px}
.small{font-size:14px;line-height:1.5}
.muted{color:var(--muted)}
.skip{position:absolute;left:-999px;top:0;background:var(--salt);padding:12px;z-index:100}
.skip:focus{left:8px;top:8px}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Photo crops come from --pos-m (phones) and --pos-d (desktop) on the <img>. */
picture img{object-position:var(--pos-m,50% 50%)}

/* Ribbon: first element, scrolls away, not dismissible */
.ribbon{background:var(--deep);color:var(--salt);font:500 12px/28px var(--body);height:28px;text-align:center;padding:0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative;z-index:40}

/* Header */
.header{position:sticky;top:0;z-index:30;height:60px;transition:background .2s,box-shadow .2s}
.header .wrap{display:flex;align-items:center;justify-content:space-between;height:60px;gap:16px}
.has-hero .header{margin-bottom:-60px;color:var(--salt)}
.has-hero .header.solid,.header{background:var(--salt);color:var(--deep)}
.has-hero .header:not(.solid){background:linear-gradient(180deg,rgba(11,60,93,.8) 0%,rgba(11,60,93,.5) 70%,rgba(11,60,93,0) 100%);color:var(--salt)}
.header.solid{box-shadow:0 1px 0 rgba(11,60,93,.12)}
.wordmark{font:800 20px/1 var(--display);text-decoration:none;text-transform:uppercase;white-space:nowrap;display:inline-flex;align-items:center;min-height:48px}
.wordmark .w1{letter-spacing:-.02em}
.wordmark .w2{letter-spacing:.06em;margin-left:.28em}
.wordmark.big{font-size:clamp(28px,8.4vw,40px);min-height:0}
.wordmark.big .w2{letter-spacing:0}
.wordmark.big .w2 span:nth-child(1){letter-spacing:.04em}
.wordmark.big .w2 span:nth-child(2){letter-spacing:.08em}
.wordmark.big .w2 span:nth-child(3){letter-spacing:.12em}
.wordmark.big .w2 span:nth-child(4){letter-spacing:.16em}
.wordmark.big .w2 span:nth-child(5){letter-spacing:.20em}
.subline{font:700 11px/1.4 var(--body);letter-spacing:.18em;text-transform:uppercase;margin-top:8px}
.nav{display:none}
.head-right{display:flex;align-items:center;gap:8px}
.lang{font:500 15px/1 var(--body);display:flex;align-items:center;gap:2px}
.lang a,.lang span{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:48px;text-decoration:none}
.lang [aria-current]{font-weight:800;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
.menu-btn{width:48px;height:48px;border:2px solid currentColor;border-radius:999px;background:transparent;color:inherit;font:700 13px var(--body);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.menu-btn .bars{width:18px;height:12px;border-top:2px solid currentColor;border-bottom:2px solid currentColor;position:relative}
.menu-btn .bars::after{content:"";position:absolute;left:0;right:0;top:3px;border-top:2px solid currentColor}
.langhint{background:var(--sand);font-size:14px;text-align:center;padding:0 var(--gutter);margin:0}
.langhint p{margin:0}
.langhint a{display:inline-flex;align-items:center;min-height:44px}
.langhint a{font-weight:700}

/* Mobile menu sheet */
.menu{position:fixed;inset:0;z-index:60;background:var(--deep);color:var(--salt);display:none;flex-direction:column;padding:16px var(--gutter) calc(24px + env(safe-area-inset-bottom))}
.menu.open{display:flex}
.menu-top{display:flex;justify-content:space-between;align-items:center;height:60px}
.menu-close{width:48px;height:48px;border-radius:999px;border:2px solid var(--salt);background:transparent;color:var(--salt);font:700 22px/1 var(--body);cursor:pointer}
.menu nav{display:flex;flex-direction:column;margin-top:24px}
.menu nav a{font:800 32px/1.2 var(--display);text-decoration:none;padding:8px 0;min-height:48px}
.menu .menu-bottom{margin-top:auto;display:flex;flex-direction:column;gap:12px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 24px;border-radius:999px;font:700 16px/1.2 var(--body);text-decoration:none;cursor:pointer;border:2px solid transparent;text-align:center;transition:background .15s}
.btn-sun{background:var(--sun);color:var(--deep);border-color:var(--sun)}
.btn-sun:hover,.btn-sun:active{background:var(--sun-press);border-color:var(--sun-press)}
.btn-line{background:transparent;color:var(--deep);border-color:var(--deep)}
.btn-line-light{background:transparent;color:var(--salt);border-color:var(--salt)}
.btn-small{min-height:48px;padding:0 18px;font-size:15px}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
.link{font-weight:700;text-underline-offset:4px;display:inline-flex;align-items:center;min-height:48px}
.under-book{font-size:13px;color:var(--muted);margin-top:8px}
.dark .under-book{color:var(--salt);opacity:.85}

/* Hero (photo) */
.hero{position:relative;min-height:640px;height:100svh;max-height:900px;color:var(--salt);display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;background:var(--deep)}
.hero picture,.hero > picture img{position:absolute;inset:0;width:100%;height:100%}
.hero picture img{object-fit:cover;object-position:var(--pos-m,50% 50%)}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,60,93,.45) 0%,rgba(11,60,93,0) 20%,rgba(11,60,93,0) 42%,rgba(11,60,93,.88) 60%,rgba(11,60,93,.88) 100%)}
.hero-inner::after{background:linear-gradient(180deg,rgba(11,60,93,.45) 0%,rgba(11,60,93,.05) 25%,rgba(11,60,93,.35) 50%,rgba(11,60,93,.85) 78%)}
.hero .wrap{position:relative;z-index:1;width:100%;padding-bottom:12px}
.hero h1{color:var(--salt);margin-bottom:12px;max-width:14ch}
.hero .eyebrow{color:var(--sun)}
.hero .sub{font-size:17px;line-height:1.5;color:rgba(246,241,231,.92);max-width:36em;margin-bottom:20px}
.hero .btns{display:flex;flex-direction:column;gap:8px}
.hero .btns .btn{width:100%}
.hero .fact{font-size:14px;font-weight:600;margin:14px 0 0;color:var(--salt);opacity:.92}
.hero-inner{min-height:520px;height:72svh;max-height:640px}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--sand);color:var(--deep);border-radius:10px;padding:6px 10px;font:700 13px/1.2 var(--body)}
.hero .chip{background:var(--salt)}

/* Plain page head (FAQ, Book, Credits, Policies) */
.page-head{padding:48px 0 24px}

/* Door cards */
.doors{display:grid;gap:20px}
.door{position:relative;display:block;border-radius:28px;overflow:hidden;text-decoration:none;color:var(--salt);aspect-ratio:4/5;background:var(--deep);box-shadow:var(--shadow)}
.door picture,.door img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.door::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,60,93,0) 35%,rgba(11,60,93,.9) 100%)}
.door .door-text{position:absolute;left:0;right:0;bottom:0;padding:24px;z-index:1}
.door h3{font-size:28px;color:var(--salt);margin-bottom:8px}
.door p{font-size:15px;line-height:1.5;margin-bottom:12px}
.door .go{font-weight:800;text-decoration:underline;text-underline-offset:4px}

/* Dark band */
.dark{background:var(--deep);color:var(--salt)}
.dark h2,.dark h3{color:var(--salt)}
.dark .eyebrow{color:var(--sun)}
.dark .muted{color:var(--salt);opacity:.8}
.minis{position:relative;display:grid;gap:16px;grid-auto-flow:column;grid-auto-columns:minmax(260px,82%);overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 0 16px;margin:0 calc(-1 * var(--gutter));padding-left:var(--gutter);padding-right:var(--gutter);scrollbar-width:thin}
.mini{position:relative;scroll-snap-align:start;background:var(--salt);color:var(--deep);border-radius:18px;padding:20px;display:grid;grid-template-columns:64px 1fr;gap:16px;align-items:start}
.date{background:var(--sand);border-radius:10px;text-align:center;padding:8px 4px;font:800 13px/1.2 var(--body);letter-spacing:.06em;text-transform:uppercase}
.date b{display:block;font:800 28px/1 var(--display);letter-spacing:-.02em;margin:2px 0}
.mini h3{font-size:19px;margin-bottom:6px}
.mini .meta{font-size:14px;line-height:1.4;margin-bottom:8px}
.mini .left{font-weight:800;font-size:14px}
.mini .price{font-weight:800;margin:6px 0 2px}
.mini .btn{margin-top:10px;width:100%}

/* Facts grid */
.facts{display:grid;gap:24px;margin:0;padding:0;list-style:none}
.facts li{border-top:2px solid var(--deep);padding-top:16px}
.facts b{display:block;font:800 20px/1.2 var(--display);margin-bottom:6px}
.note{font-size:14px;color:var(--muted);margin-top:24px}

/* Photo break */
.break{height:62svh;min-height:360px;max-height:640px;position:relative;overflow:hidden;background:var(--deep)}
.break picture,.break img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* Quotes */
.quotes{display:grid;gap:24px;margin:0;padding:0;list-style:none}
.quotes blockquote{margin:0;font:700 22px/1.3 var(--display);letter-spacing:-.01em}
.quotes cite{display:block;font:500 15px/1.4 var(--body);font-style:normal;margin-top:10px}
.slot{background:var(--sand);border-radius:18px;padding:24px;font-size:15px;color:var(--deep)}
.map-slot{min-height:180px;display:flex;align-items:center;justify-content:center;text-align:center;margin-top:24px}

/* Steps */
.steps{counter-reset:s;list-style:none;padding:0;margin:24px 0 0;display:grid;gap:16px}
.steps li{counter-increment:s;display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:start}
.steps li::before{content:counter(s);width:44px;height:44px;border-radius:999px;border:2px solid currentColor;display:flex;align-items:center;justify-content:center;font:800 18px var(--display)}

/* Product cards */
.cards{display:grid;gap:24px}
.card{background:var(--salt);border-radius:18px;box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;scroll-margin-top:72px}
.card .ph{aspect-ratio:4/3;position:relative;background:var(--sand)}
.card .ph picture,.card .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card .body{padding:20px;display:flex;flex-direction:column;gap:12px;flex:1}
.card h2{font-size:26px;margin:0}
.card .chips{display:flex;flex-wrap:wrap;gap:8px}
.card p{margin:0}
.glance{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:15px;line-height:1.45;border-top:1px solid var(--sand);padding-top:12px}
.glance dt{font-weight:800}
.glance dd{margin:0}
.price-line{font-weight:800;font-size:18px}
.price-line .usd{font-weight:500;font-size:14px;color:var(--muted)}
.price-line .sp{display:inline-block;font:700 12px/1 var(--body);letter-spacing:.04em;background:var(--sand);border-radius:10px;padding:5px 8px;margin-left:6px;vertical-align:middle}
.card .actions{margin-top:auto;display:flex;flex-direction:column;gap:6px}
.card .actions .btn{width:100%}
.pairs{font-size:14px}
.pairs a{font-weight:700}
.promise{background:var(--sand);border-radius:10px;padding:12px 14px;font-size:15px}
.rows{display:grid;gap:24px;margin-top:24px}
.tag{display:inline-flex;background:var(--sand);color:var(--deep);border-radius:10px;padding:6px 10px;font:700 13px/1.2 var(--body)}

/* Lists */
.two{display:grid;gap:32px}
.plain{list-style:none;padding:0;margin:0}
.plain li{padding:10px 0;border-bottom:1px solid var(--sand)}
.levels{display:grid;gap:16px}
.level{background:var(--sand);border-radius:18px;padding:20px}
.level b{font-family:var(--display);font-size:20px;display:block;margin-bottom:6px}

/* Banner */
.banner{background:var(--sand);border-radius:18px;padding:20px;margin-top:-32px;position:relative;z-index:2;box-shadow:var(--shadow)}
.banner[hidden]{display:none}
.banner h2{font-size:22px;margin-bottom:8px}

/* Rules band (no photo: plain Deep Water) */
.rules ul{padding-left:20px;margin:0}
.rules li{margin-bottom:10px}

/* FAQ */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 24px}
.filters button{min-height:48px;padding:0 18px;border-radius:10px;border:2px solid var(--deep);background:transparent;color:var(--deep);font:700 15px var(--body);cursor:pointer}
.filters button[aria-pressed="true"]{background:var(--deep);color:var(--salt)}
.faq-group h2{font-size:26px;margin:32px 0 8px}
details{border-bottom:1px solid var(--sand)}
summary{cursor:pointer;list-style:none;padding:16px 36px 16px 0;font:700 18px/1.35 var(--body);position:relative;min-height:48px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:4px;top:12px;font:800 24px/1 var(--display)}
details[open] summary::after{content:"–"}
details .ans{padding:0 0 18px}

/* Book page */
.tiles{display:grid;gap:20px}
.tile{position:relative;display:block;border-radius:28px;overflow:hidden;color:var(--salt);text-decoration:none;min-height:300px;background:var(--deep)}
.tile picture,.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,60,93,.35) 0%,rgba(11,60,93,.6) 40%,rgba(11,60,93,.92) 70%)}
.tile .t{position:absolute;left:0;right:0;bottom:0;padding:24px;z-index:1}
.tile h2{color:var(--salt);font-size:28px;margin-bottom:6px}
.tile .go{font-weight:800;text-decoration:underline;text-underline-offset:4px}
.notice{background:var(--sand);border-radius:10px;padding:12px 16px;font-size:15px;margin:0 0 24px}
.plist{list-style:none;padding:0;margin:0}
.plist li{display:grid;grid-template-columns:1fr;gap:10px;padding:16px 0;border-bottom:1px solid var(--sand)}
.plist .n{font-weight:800}
.plist .d{font-size:14px;color:var(--muted)}

/* Closing band */
.closing{position:relative;color:var(--salt);overflow:hidden;background:var(--deep);min-height:420px;display:flex;align-items:flex-end}
.closing picture,.closing img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.closing::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,60,93,.15) 0%,rgba(11,60,93,.88) 70%)}
.closing .wrap{position:relative;z-index:1;padding-top:220px;padding-bottom:56px;width:100%}
.closing h2{color:var(--salt);font-size:36px;max-width:14ch}
.closing .btn-row .btn{flex:1 1 220px}

/* Footer */
.footer{background:var(--deep);color:var(--salt);padding:56px 0 calc(40px + env(safe-area-inset-bottom))}
.footer .tagline{font-size:17px;margin:10px 0 24px}
.footer nav{display:flex;flex-wrap:wrap;gap:0 20px;margin-bottom:16px}
.footer nav a{display:inline-flex;align-items:center;justify-content:flex-start;min-height:48px;min-width:48px;text-decoration:none;font-weight:600}
.footer .fine a,.credits a,.page-head .small a,.pairs a,.slot a,.ans a{display:inline-flex;align-items:center;min-height:44px}
.footer .fine{font-size:14px;line-height:1.6;opacity:.9}
.footer .sample{border-top:1px solid rgba(246,241,231,.3);margin-top:24px;padding-top:20px;font-size:14px}

/* WhatsApp sheet */
dialog.sheet{border:0;padding:0;margin:auto auto 0;width:100%;max-width:560px;border-radius:18px 18px 0 0;background:var(--salt);color:var(--deep)}
dialog.sheet::backdrop{background:rgba(11,60,93,.6)}
.sheet .in{padding:24px var(--gutter) calc(24px + env(safe-area-inset-bottom))}
.sheet h2{font-size:22px}
.sheet .msg{background:var(--sand);border-radius:10px;padding:14px 16px;font-size:15px;margin:0 0 16px}
.sheet .btn{width:100%}

/* Sticky book bar: phones only, after the hero Book button has scrolled out */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:25;background:var(--deep);display:flex;gap:8px;padding:8px 12px calc(8px + env(safe-area-inset-bottom));transform:translateY(110%);transition:transform .2s;height:calc(64px + env(safe-area-inset-bottom))}
.bar.show{transform:none}
.bar .btn{min-height:48px;padding:0 12px;font-size:14px;white-space:nowrap}
.bar .wa{flex:0 0 auto;padding:0 16px}
.bar .bk{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis}
@media (max-width:399px){.bar .from{display:none}}

/* Credits / policies; text columns stay left-aligned with the other sections */
.prose>*{max-width:760px}
.prose h2{font-size:26px;margin-top:40px}
.prose>h2:first-child{font-size:32px;margin-top:0}
.prose ul{padding-left:20px}
.prose li{margin-bottom:10px}
.credits li{margin-bottom:8px}
.credits a,.prose .small a{min-width:44px;justify-content:center}

@media (min-width:720px){
  .doors{grid-template-columns:repeat(3,1fr)}
  .facts{grid-template-columns:repeat(2,1fr)}
  .quotes{grid-template-columns:repeat(3,1fr)}
  .cards.two-up{grid-template-columns:repeat(2,1fr);align-items:start}
  .two{grid-template-columns:1fr 1fr}
  .levels{grid-template-columns:repeat(3,1fr)}
  .tiles{grid-template-columns:1fr 1fr}
  .minis{grid-auto-flow:row;grid-template-columns:repeat(2,1fr);overflow:visible;margin:0;padding:4px 0 16px}
  .plist li{grid-template-columns:1fr auto;align-items:center}
  .row-card{flex-direction:row}
  .row-card .ph{flex:0 0 42%;aspect-ratio:auto;min-height:320px}
  .hero .btns{flex-direction:row}
  .hero .btns .btn{width:auto}
}
@media (min-width:1024px){
  :root{--gutter:32px}
  h1{font-size:88px}
  h2{font-size:52px}
  h3{font-size:26px}
  .section{padding:112px 0}
  .nav{display:flex;align-items:center;gap:4px;margin-left:auto}
  .head-right .head-book{display:inline-flex;min-height:48px;margin-right:8px}
  .nav a{text-decoration:none;font-weight:600;padding:0 10px;min-height:48px;display:inline-flex;align-items:center}
  .menu-btn{display:none}
  .hero .wrap{padding-bottom:56px}
  picture img,.hero picture img{object-position:var(--pos-d,var(--pos-m,50% 50%))}
  .hero-inner .wrap{padding-top:120px}
  .hero.hero-inner h1{font-size:68px;max-width:15ch}
  .prose>h2:first-child{font-size:52px}
  .hero h1{max-width:12ch}
  .minis{grid-template-columns:repeat(4,1fr)}
  .facts{grid-template-columns:repeat(3,1fr)}
  .card h2{font-size:30px}
  .closing h2{font-size:52px}
  .closing .btn-row .btn{flex:0 0 auto}
  .langhint:not([hidden]) ~ main .hero-home{height:calc(100svh - 72px)}
  .bar{display:none}
  .card .actions{flex-direction:row;flex-wrap:wrap;align-items:center}
  .card .actions .btn{width:auto}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
.panel{border-radius:28px;overflow:hidden;min-height:360px;position:relative;background:var(--sand)}
.panel picture,.panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lang .dot{min-width:0;padding:0 2px}
.head-book{display:none}
/* Whales banner overlaps the hero bottom: keep the hero button clear of it */
@media (max-width:1023px){
  .hero-inner .wrap{padding-bottom:56px}
  body:has(.bar){padding-bottom:calc(72px + env(safe-area-inset-bottom))}
}
/* Crew: text-only cards (no stock photo stands in for an invented person) */
.crew-cards{display:grid;gap:20px}
.crew-card{background:var(--sand);border-radius:18px;padding:24px;display:grid;grid-template-columns:72px 1fr;gap:20px;align-items:start}
.crew-card .initial{font:800 64px/1 var(--display);letter-spacing:-.03em;color:var(--deep)}
.crew-card .chip{background:var(--salt)}
.crew-card h3{margin:12px 0 8px}
.crew-card p{margin:0}
@media (min-width:720px){.crew-cards{grid-template-columns:1fr 1fr}}
/* Home hero, phones (brief S1 y-map): the photo is a block on top with nothing on it,
   and the text sits below it on solid Deep Water, so the eyebrow and H1 never land on
   the whale or its spray, on any phone height (short phones simply scroll further). */
@media (max-width:719px){
  .hero-home{height:auto;min-height:0;max-height:none;display:block}
  .hero-home picture{position:relative;display:block;inset:auto;height:clamp(340px,52svh,440px)}
  .hero-home picture img{position:absolute;inset:0;width:100%;height:100%;object-position:50% 45%;-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,1) 76%,transparent);mask-image:linear-gradient(180deg,rgba(0,0,0,1) 76%,transparent)}
  .hero-home .wrap{margin-top:-20px;padding-bottom:28px}
}
/* Home hero, desktop: the photo is widened so the whale sits right of the headline;
   a soft Deep Water shade on the left keeps the text readable. */
@media (min-width:1024px){
  .hero-home picture img{width:118%;max-width:none}
  .hero-home h1{max-width:11ch}
  .hero-home .eyebrow{display:inline-block;background:var(--deep);padding:6px 10px;border-radius:10px}
  .hero-home::after{background:linear-gradient(90deg,rgba(11,60,93,.62) 0%,rgba(11,60,93,.42) 38%,rgba(11,60,93,0) 58%),linear-gradient(180deg,rgba(11,60,93,.45) 0%,rgba(11,60,93,0) 20%,rgba(11,60,93,0) 42%,rgba(11,60,93,.88) 60%,rgba(11,60,93,.88) 100%)}
}
@media (min-width:1024px) and (max-width:1279px){.hero-home h1{font-size:72px}}
.dark .mini h3{color:var(--deep)}
.minis{margin:0;padding:4px 0 16px}
.mini[hidden]{display:none}
/* QA round 2 */
@media (max-width:719px){.hero-whales picture img{height:62%;-webkit-mask-image:linear-gradient(180deg,#000 78%,transparent);mask-image:linear-gradient(180deg,#000 78%,transparent)}}
@media (max-width:374px){.hero-inner h1{font-size:36px}}