/* Reel Good Fish one-pager
   Colours: RGF Brand Guides 081026 v1, p.03-04. Fonts: p.06.
   Built by PRD (prd.nz) */

:root{
  --aqua:#009CA6;        /* Primary Aqua */
  --light-aqua:#B1E4E3;  /* Light Aqua */
  --red:#DA291C;         /* Brand Red */
  --dark-red:#9D3124;    /* Dark Red, used in fish-red.png inside the wordmark */
  --navy:#001E60;        /* Dark Navy */
  --off-white:#F9F7F4;   /* Off White */
  --gold:#D29E14;        /* Gold */
  --prd-pink:#E75795;    /* PRD signature pink */

  /* Check these family names against your Adobe Fonts web project */
  --display:"alga","Alga","DM Serif Display",Georgia,serif;
  --sans:"heimat-sans","Heimat Sans","Figtree",Arial,sans-serif;
  --mono:"heimat-mono","Heimat Mono","DM Mono","Courier New",monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--off-white);color:var(--navy);font-family:var(--sans);font-size:16px;overflow-x:hidden}
img{max-width:100%}
h1,h2{text-wrap:balance}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

.skip{position:absolute;left:-999px;top:8px;background:var(--navy);color:#fff;padding:10px 16px;border-radius:999px;z-index:10}
.skip:focus{left:8px}

.wrap{width:100%;max-width:1200px;margin:0 auto;padding-inline:clamp(16px,5vw,64px);display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(32px,6vw,96px);align-items:center}
.col{min-width:0}
.eyebrow{font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;font-size:13px;color:var(--light-aqua);margin:0 0 18px}
.eyebrow.dark{color:var(--navy)}
section h2{font-family:var(--display);font-weight:700;font-size:clamp(36px,4.6vw,58px);line-height:1.1;margin:0 0 22px}

.btn{display:inline-flex;align-items:center;gap:10px;height:62px;padding:0 28px;border-radius:999px;font-family:var(--sans);font-weight:700;font-size:16px;text-decoration:none;border:2px solid var(--navy)}
.btn svg{width:18px;height:18px;flex:none}
.btn.solid{background:var(--navy);color:#fff}
.btn.ghost{color:var(--navy);background:transparent}
.btn:hover{transform:translateY(-1px)}

/* ---------- fixed menu: colour follows the section underneath ---------- */
.site-head{position:fixed;top:0;left:0;right:0;z-index:50;padding-top:env(safe-area-inset-top,0px);color:var(--navy);background:transparent;transition:background-color .35s ease,color .35s ease,box-shadow .35s ease}
.site-head.scrolled{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 1px 0 rgba(0,30,96,.08)}
.site-head.scrolled[data-nav="aqua"]{background:rgba(0,156,166,.92)}
.site-head[data-nav="light"]{background:rgba(249,247,244,.94);color:var(--navy)}
.site-head[data-nav="dark"]{background:rgba(0,30,96,.9);color:#fff;box-shadow:0 1px 0 rgba(177,228,227,.15)}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px clamp(16px,13vw,200px)}
.brand-row{display:flex;align-items:center;gap:16px;min-width:0}
.home{display:block;color:inherit;line-height:0;flex:none;text-decoration:none}
.home-logo{display:block;height:24px;width:auto;fill:currentColor}
.home-short{display:none;font-family:var(--display);font-weight:700;font-size:20px;line-height:1;letter-spacing:.14em;margin-right:-.14em}
@media (max-width:600px){.home-logo{display:none}.home-short{display:block}}
.home:hover{opacity:.8}
.status{font-family:var(--mono);font-size:14px;color:inherit;display:flex;align-items:center;gap:8px;margin:0}
.status i{width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px rgba(210,158,20,.3)}
.status.open i{background:#3cc46a;box-shadow:0 0 0 3px rgba(60,196,106,.25)}
.status.closed i{background:currentColor;box-shadow:none;opacity:.5}
.status b{font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.status a{color:inherit;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.status a:hover{text-decoration-thickness:2px}
.status .short{display:none}
@media (max-width:360px){.status .long{display:none}.status .short{display:inline}.status{min-width:0}}
.nav{display:flex;gap:22px;font-size:15px;font-weight:500}
.nav a{color:inherit;text-decoration:none;white-space:nowrap}
.nav a:hover{text-decoration:underline;text-underline-offset:4px}

/* ---------- first screen ---------- */
.hero{position:relative;background:var(--aqua);min-height:min(900px,100svh);display:flex;flex-direction:column;overflow:hidden;isolation:isolate}
/* background video: greyscale footage screened over the aqua so it takes on the brand colour */
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;mix-blend-mode:screen;opacity:.9;filter:contrast(1.25) brightness(1.1);pointer-events:none}
/* the snapper sits above the wordmark, its lower fins running behind the letters.
   fish-solid.png has an aqua body so the video doesn't show through it */
.hero .fish{display:block;width:min(58vw,860px);max-width:none;height:auto;margin:0 auto -9%;user-select:none;pointer-events:none}
/* engraving layer: the same fish in dark red, masked to the wordmark letters by main.js */
.engrave{position:absolute;inset:0;z-index:1;pointer-events:none;visibility:hidden;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:0 0;mask-position:0 0}
.engrave.ready{visibility:visible}
.engrave .fish-red{position:absolute;max-width:none}
.centre{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:90px 16px 40px}
.wordmark{position:relative}
.wordmark{font-family:var(--display);font-weight:700;color:var(--red);font-size:clamp(52px,10vw,148px);line-height:.95;margin:0;letter-spacing:-.01em;padding:0 .04em}
.tagline{font-family:var(--mono);font-weight:500;color:var(--navy);font-size:clamp(20px,3vw,42px);letter-spacing:.04em;margin:18px 0 0}
.tagline em{font-style:normal;color:var(--light-aqua)}
.lede{font-weight:700;font-size:clamp(16px,1.4vw,19px);margin:22px 0 0}
.addr{margin:12px 0 0}
.ctas{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:44px}
.scroll{font-family:var(--mono);font-size:13px;color:var(--navy);opacity:.6;text-align:center;padding-bottom:28px;text-decoration:none;align-self:center}

/* ---------- about ---------- */
.about{position:relative;min-height:701px;display:flex;align-items:center;color:#fff;isolation:isolate;overflow:hidden;background:var(--navy)}
.about .wrap{padding-block:80px}
.about .bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:-2;opacity:0;transition:opacity 2.5s ease-in-out}
.about .bg.on{opacity:1}
.about .bg.flip{transform:scaleX(-1)}
.about::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(0,30,96,.8) 0%,rgba(0,30,96,.45) 50%,rgba(0,30,96,.72) 100%)}
.blurb{font-size:clamp(16px,1.35vw,18px);line-height:1.5;max-width:52ch;margin:0;color:var(--off-white)}
.facts{list-style:none;margin:0;padding:0}
.facts li{display:grid;grid-template-columns:minmax(150px,auto) 1fr;gap:20px;align-items:baseline;padding:22px 0;border-top:1px solid rgba(177,228,227,.35)}
.facts li:last-child{border-bottom:1px solid rgba(177,228,227,.35)}
.facts b{font-family:var(--display);font-weight:700;font-size:clamp(34px,3.6vw,46px);line-height:1}
.facts span{font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em;font-size:13px;line-height:1.55;color:var(--light-aqua)}
.facts span strong{display:block;color:#fff;font-weight:500}

/* read more */
.blurb + .blurb,.more .blurb{margin-top:14px}
.more[hidden]{display:none}
.more:not([hidden]){animation:moreIn .5s ease both}
@keyframes moreIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.readmore{margin-top:20px;background:none;border:0;padding:6px 0;font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;font-size:13px;color:var(--light-aqua);cursor:pointer;border-bottom:1px solid currentColor}
.readmore:hover{color:#fff}
.count{font-style:normal;font-variant-numeric:tabular-nums}

/* ---------- featured this week ---------- */
.featured{background:var(--navy);color:var(--off-white);padding-top:34px;border-top:1px solid rgba(177,228,227,.15)}
.featured-head{max-width:1200px;margin:0 auto;padding-inline:clamp(16px,5vw,64px);display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:8px 32px;margin-bottom:18px}
.featured-title{font-family:var(--mono);font-weight:500;text-transform:uppercase;letter-spacing:.14em;font-size:15px;color:#fff;margin:0;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.featured-title .week{font-size:12px;letter-spacing:.12em;color:var(--navy);background:var(--gold);border-radius:999px;padding:5px 12px}
.featured-note{margin:0;font-size:16px;color:var(--light-aqua)}
.featured-small{max-width:1200px;margin:0 auto;padding:12px clamp(16px,5vw,64px) 18px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--light-aqua);opacity:.75}
.featured .strip{border-top:1px solid rgba(177,228,227,.15);border-bottom:1px solid rgba(177,228,227,.15)}

/* ---------- fish strip ---------- */
.strip{background:var(--navy);height:65px;overflow:hidden;cursor:grab;user-select:none;-webkit-user-select:none;touch-action:pan-y;border-top:1px solid rgba(177,228,227,.15)}
.strip.grabbing{cursor:grabbing}
.track{display:flex;align-items:center;height:100%;width:max-content;will-change:transform}
.track span{font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;font-size:17px;color:#fff;white-space:nowrap;display:flex;align-items:center}
.track span::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--aqua);margin:0 28px}
.track span.ask{color:var(--light-aqua);font-weight:500}

/* ---------- visit ---------- */
.visit{background:var(--off-white);padding-block:110px}
.visit .wrap{grid-template-columns:1fr 1.3fr}
.details{font-family:var(--mono);font-size:16px;line-height:1.8;margin:0 0 20px}
.details b{font-weight:500}
.details a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.details a:hover{text-decoration-thickness:2px}
.visit .btn{margin-top:12px}
.map{border-radius:14px;overflow:hidden;border:2px solid var(--navy);aspect-ratio:4/3;max-width:100%;background:var(--light-aqua)}
.map iframe{width:100%;height:100%;border:0;display:block}

/* drive times */
.drive{list-style:none;margin:0 0 28px;padding:0;max-width:380px;font-family:var(--mono);font-size:15px}
.drive li{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-top:1px solid rgba(0,30,96,.15)}
.drive li:last-child{border-bottom:1px solid rgba(0,30,96,.15)}
.drive b{font-weight:500;font-variant-numeric:tabular-nums}
.visit .details + .eyebrow{margin-top:8px}

/* ---------- contact ---------- */
.contact{background:var(--navy);color:var(--off-white);padding-block:110px}
.contact .wrap{align-items:start}
.contact h2{color:#fff}
.badge{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;font-size:13px;color:var(--navy);background:var(--gold);border-radius:999px;padding:8px 16px;margin:0 0 22px}
.badge i{width:8px;height:8px;border-radius:50%;background:var(--navy)}
.intro{font-size:17px;line-height:1.5;max-width:46ch;margin:0 0 36px}
.hours{width:100%;max-width:440px;border-collapse:collapse;font-variant-numeric:tabular-nums;font-family:var(--mono)}
.hours th,.hours td{text-align:left;padding:12px 0;border-top:1px solid rgba(177,228,227,.3);font-size:16px}
.hours tr:last-child th,.hours tr:last-child td{border-bottom:1px solid rgba(177,228,227,.3)}
.hours th{font-weight:500;text-transform:uppercase;letter-spacing:.1em;color:#fff;padding-right:24px}
.hours tr.today th,.hours tr.today td{color:var(--gold)}

form{display:grid;gap:16px;background:rgba(177,228,227,.08);border:1px solid rgba(177,228,227,.25);border-radius:14px;padding:clamp(20px,3vw,32px)}
form label{display:grid;gap:6px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.1em;font-size:12px;color:var(--light-aqua)}
form input,form textarea{font:16px/1.4 var(--sans);color:var(--navy);background:var(--off-white);border:2px solid transparent;border-radius:8px;padding:12px 14px;width:100%}
form input:focus,form textarea:focus{outline:none;border-color:var(--light-aqua)}
form textarea{min-height:130px;resize:vertical}
form button{justify-self:start;font:700 16px var(--sans);color:var(--navy);background:var(--light-aqua);border:0;border-radius:999px;height:54px;padding:0 30px;cursor:pointer}
form button:hover{background:#fff}
.hp{position:absolute;left:-9999px}

/* ---------- footer ---------- */
.foot{background:var(--navy);border-top:1px solid rgba(177,228,227,.2);min-height:79px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px 24px;padding:16px clamp(16px,5vw,64px);font-family:var(--mono);font-size:13px;letter-spacing:.06em;color:var(--light-aqua)}
.foot a{color:var(--light-aqua);text-decoration:none}
.foot a b{color:var(--prd-pink);font-weight:500}
.foot a:hover b{text-decoration:underline;text-underline-offset:3px}

/* ---------- entrance motion ---------- */
/* first screen fades up on load */
.hero-in{animation:heroIn 1.1s cubic-bezier(.2,.7,.2,1) both}
.engrave.hero-in{animation-name:heroFade}
@keyframes heroIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes heroFade{from{opacity:0}to{opacity:1}}
/* sections fade and rise (or zoom) in as they scroll into view; only hidden once the script is running */
.js .reveal{opacity:0;transform:translateY(36px);transition:opacity .9s ease var(--d,0s),transform .9s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.js .reveal.zoom{transform:scale(.94)}
.js .reveal.in{opacity:1;transform:none}

/* ---------- small screens ---------- */
@media (max-width:820px){
  .topbar{padding-inline:16px}
  .nav{gap:14px;font-size:14px}
  .wrap,.visit .wrap{grid-template-columns:1fr}
  .about{min-height:0}
  .about .wrap{padding-block:72px 56px}
  .facts li{grid-template-columns:120px 1fr}
  .visit,.contact{padding-block:72px}
}
@media (max-width:480px){.brand-row{gap:10px}.status span{font-size:12px}.nav{gap:12px;font-size:13px}.topbar{gap:10px}}

@media (prefers-reduced-motion:reduce){
  .hero-in,.more:not([hidden]){animation:none}
  .js .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  .about .bg{transition:none}  .btn:hover{transform:none}
}