@font-face{font-family:Oswald;src:url(fonts/Oswald.ttf) format("truetype");font-weight:200 700;font-display:swap}
@font-face{font-family:Montserrat;src:url(fonts/Montserrat.ttf) format("truetype");font-weight:100 900;font-display:swap}
:root{--bg:#0F2530;--ink:#F4EFE6;--acc:#6FB7C2;--cu:#E09A5F}
*{box-sizing:border-box}html,body{margin:0}
body{min-height:100vh;display:flex;flex-direction:column;background:radial-gradient(ellipse at 50% 0%,#1b3b49 0%,var(--bg) 65%);color:var(--ink);font-family:Montserrat,system-ui,sans-serif;line-height:1.6}
.hero{flex:1;max-width:820px;margin:0 auto;padding:clamp(48px,9vh,110px) 24px 24px;text-align:center}
.logo{width:min(440px,88vw);height:auto}
.kicker{margin:2.5rem 0 .5rem;color:var(--cu);font-weight:600;letter-spacing:.3em;text-transform:uppercase;font-size:.85rem}
h1{font-family:Oswald,Impact,sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.03em;font-size:clamp(2.1rem,6vw,3.8rem);line-height:1.1;margin:.2rem 0 1.2rem}
.lede{font-size:clamp(1rem,2.2vw,1.15rem);opacity:.9;max-width:640px;margin:0 auto}
.products{list-style:none;padding:0;margin:2rem 0;display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center}
.products li{border:1px solid var(--acc);color:var(--acc);padding:.35rem .9rem;border-radius:999px;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase}
.soon{font-style:italic;opacity:.75}
.waves{display:block;width:100%;height:110px}
footer{text-align:center;font-size:.78rem;opacity:.6;padding:0 16px 24px}
/* Hero photo: watermarked web copy only (watermark option 1 — swappable for 1b/1c by regenerating photos/web). Anchored bottom-right so the watermark stays in frame. */
.hero{background:linear-gradient(180deg,rgba(15,37,48,.55) 0%,rgba(15,37,48,.35) 40%,rgba(15,37,48,.7) 100%),url(img/orca-fog-hero-working_wm1.jpg) right bottom/cover no-repeat,var(--bg)}
@media (max-width:700px){.hero{background-image:linear-gradient(180deg,rgba(15,37,48,.55) 0%,rgba(15,37,48,.35) 40%,rgba(15,37,48,.7) 100%),url(img/orca-fog-working-1024_wm1.jpg)}}
.hero h1,.hero .lede,.hero .soon,footer{text-shadow:0 1px 8px rgba(0,0,0,.55)}
.kicker{background:rgba(15,37,48,.6);width:fit-content;margin-left:auto;margin-right:auto;padding:.3rem .9rem;border-radius:4px}
.products li{background:rgba(15,37,48,.55)}
.logo{display:block;margin:0 auto}
/* Second section: watermarked dock-chair photo (option 1 watermark) */
.dock{min-height:60vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:80px 24px;background:linear-gradient(180deg,var(--bg) 0%,rgba(15,37,48,.25) 25%,rgba(15,37,48,.25) 75%,var(--bg) 100%),url(img/dock-chair-sunset-1920_wm1.jpg) right bottom/cover no-repeat}
@media (max-width:700px){.dock{background-image:linear-gradient(180deg,var(--bg) 0%,rgba(15,37,48,.25) 25%,rgba(15,37,48,.25) 75%,var(--bg) 100%),url(img/dock-chair-sunset-1024_wm1.jpg)}}
.dock h2{font-family:Oswald,Impact,sans-serif;text-transform:uppercase;font-size:clamp(1.8rem,5vw,3rem);margin:0 0 .5rem;text-shadow:0 2px 10px rgba(0,0,0,.7)}
.dock p{max-width:560px;text-shadow:0 1px 8px rgba(0,0,0,.8);font-weight:500}
.hero{max-width:none;padding-left:max(24px,calc(50% - 386px));padding-right:max(24px,calc(50% - 386px));padding-bottom:90px}
body{background:var(--bg)}
.hero{width:100%;margin:0}
/* Oct 18 rev: hero text block pushed down into the lower water, clear of the fin/horizon; bigger title */
.hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:clamp(28px,4vh,48px)}
.hero .logo{width:min(380px,80vw)}
.hero .kicker{margin-top:auto}
.hero h1{font-size:clamp(2.8rem,8vw,5.6rem)}
.hero .soon{margin-bottom:0}
.hero{background:linear-gradient(180deg,rgba(15,37,48,.6) 0%,rgba(15,37,48,.15) 30%,rgba(15,37,48,.55) 55%,rgba(15,37,48,.85) 100%),url(img/orca-fog-hero-working_wm1.jpg) right bottom/cover no-repeat}
@media (max-width:700px){.hero{background-image:linear-gradient(180deg,rgba(15,37,48,.6) 0%,rgba(15,37,48,.15) 30%,rgba(15,37,48,.55) 55%,rgba(15,37,48,.85) 100%),url(img/orca-fog-working-1024_wm1.jpg)}}
.hero{padding-left:max(20px,calc(50% - 560px));padding-right:max(20px,calc(50% - 560px));padding-bottom:28px}
.hero h1{font-size:clamp(2.6rem,6vw,5.4rem);margin:.1rem 0 .8rem;line-height:1.02}
.hero .lede{max-width:760px}
.hero .products{margin:1.2rem 0}
.hero .kicker{margin-bottom:.6rem}
.hero h1{font-size:clamp(1.56rem,3.6vw,3.24rem)} /* Oct 18: ~60% of previous clamp(2.6rem,6vw,5.4rem) */
.hero .logo{width:min(600px,92vw)} /* Oct 18: ~1.6x larger (was min(380px,80vw)) */
.hero .logo{transform:translateX(clamp(-90px,-5vw,-10px))} /* Oct 18: modest shift left */
@media (max-width:700px){.hero .logo{transform:translateX(-8px)}}
/* Oct 18: B7 fog-badge logo replaces v1 wordmark; round badge sized to similar visual weight, same left shift */
.hero .logo{width:clamp(150px,16vw,230px)}
/* Oct 18 (rev): logo moved LEFT 30vw from its previous spot (desktop -5vw, mobile -8px), clamped to keep >=24px from the left edge */
.hero .logo{transform:translateX(max(calc(clamp(-90px,-5vw,-10px) - 30vw), calc(24px - 50vw + clamp(150px,16vw,230px) / 2)))}
@media (max-width:700px){.hero .logo{transform:translateX(max(calc(-8px - 30vw), calc(24px - 50vw + clamp(150px,16vw,230px) / 2)))}}
/* Oct 18 (rev): photo shifted LEFT so the fin moves left. The desktop image already fills the width, so it's scaled to 121.8% (right/bottom anchored, watermark stays in frame). That moves the fin left by 15% of the width; a full 20% would put the fin under the logo. */
@media (min-width:701px){.hero{background-size:auto,121.8% auto;background-position:0 0,right bottom}}
/* Oct 18 (rev2): scene moved down ~20% of the viewport height (~180px at 1440x900). Done by reducing the zoom from 121.8% to 104.6% (still right/bottom anchored), because shifting down at 121.8% would crop the bottom-right watermark. */
@media (min-width:701px){.hero{background-size:auto,104.6% auto}}
/* Oct 18 (rev2): logo moved right 10vw from its rev1 spot */
.hero .logo{transform:translateX(calc(max(calc(clamp(-90px,-5vw,-10px) - 30vw), calc(24px - 50vw + clamp(150px,16vw,230px) / 2)) + 10vw))}
@media (max-width:700px){.hero .logo{transform:translateX(calc(max(calc(-8px - 30vw), calc(24px - 50vw + clamp(150px,16vw,230px) / 2)) + 10vw))}}
/* Mobile keeps the right/bottom crop (mountains); there the fin would sit behind the text. */
/* Oct 18 (working, NO watermark; watermark gets applied before deploy, see NEXT-STEPS.md): levelled working hero. Fin sits ~20% of the width further left than the original layout, scene lower. */
.hero{background-image:linear-gradient(180deg,rgba(15,37,48,.6) 0%,rgba(15,37,48,.15) 30%,rgba(15,37,48,.55) 55%,rgba(15,37,48,.85) 100%),url(img/orca-fog-hero-working_wm1.jpg)}
@media (min-width:701px){.hero{background-size:auto,128.4% auto;background-position:0 0,right 52% }}
@media (max-width:700px){.hero{background-image:linear-gradient(180deg,rgba(15,37,48,.6) 0%,rgba(15,37,48,.15) 30%,rgba(15,37,48,.55) 55%,rgba(15,37,48,.85) 100%),url(img/orca-fog-hero-working_wm1.jpg);background-position:0 0,right bottom}}
/* Oct 18: logo moved down 10vh (separate translate property, so the horizontal transform stays as is) */
.hero .logo{translate:0 10vh}
/* Oct 18: logo moved up 5vh (net 5vh down from the earlier spot) */
.hero .logo{translate:0 5vh}
/* Oct 18: logo moved left 5vw (via translate; on mobile the left edge stays ~44px from the edge, above the 24px minimum) */
.hero .logo{translate:-5vw 5vh}
/* Oct 18: "Coming soon to Etsy" label removed; the headline takes over margin-top:auto so it keeps its exact position */
.hero h1{margin-top:auto}
/* FINAL (watermarked): desktop uses the hero with the option-1 mark inset 22% from the bottom-right so it stays inside the approved crop; mobile uses the 1024 copy with the standard 3% margin */
.hero{background-image:linear-gradient(180deg,rgba(15,37,48,.6) 0%,rgba(15,37,48,.15) 30%,rgba(15,37,48,.55) 55%,rgba(15,37,48,.85) 100%),url(img/orca-fog-hero-working_wm1.jpg)}
@media (max-width:700px){.hero{background-image:linear-gradient(180deg,rgba(15,37,48,.6) 0%,rgba(15,37,48,.15) 30%,rgba(15,37,48,.55) 55%,rgba(15,37,48,.85) 100%),url(img/orca-fog-working-1024_wm1.jpg)}}
/* FINAL: intro is now one line shorter; reserve that line so the headline keeps its approved position */
.hero .lede{margin-bottom:1lh}
/* FINAL: tall/portrait screens in the desktop range fall back to cover so there is no empty band */
@media (min-width:701px) and (max-aspect-ratio:11/10){.hero{background-size:auto,cover;background-position:0 0,right bottom}}

/* VIDEO HERO (Oct 18): looping orca clip, same levelled crop/geometry as orca-fog-hero-working_wm1.jpg (1842x1318, mark baked in at the same spot).
   Mirrors the photo's desktop sizing (128.4% width, anchored right / 52%). Photo background stays underneath as fallback;
   video hidden on small screens and with prefers-reduced-motion. */
.hero{position:relative;isolation:isolate;overflow:hidden}
.hero-video,.hero-shade{display:none}
@media (min-width:701px) and (min-aspect-ratio:11/10) and (prefers-reduced-motion:no-preference){
  .hero-video{display:block;position:absolute;z-index:-2;width:128.4%;height:auto;max-width:none;right:0;top:calc((100% - 128.4vw * 1318 / 1842) * .52);pointer-events:none}
  .hero-shade{display:block;position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(15,37,48,.6) 0%,rgba(15,37,48,.15) 30%,rgba(15,37,48,.55) 55%,rgba(15,37,48,.85) 100%);pointer-events:none}
}