/* ============================================================
   King Slayer Sportfishing: shared component layer (Deep Water)
   Requires tokens.css to be loaded first.
   Ported from bakeoff/a4 plus new components in the same idiom.
   Rules: tokens only for colour and type, no border-radius.

   Two-tier action system, owner call 2026-07-26:
     TIER 1, RED (--red): the booking path only. .btn-book, label always
       "Book Now". Every red button on the site goes to a booking screen.
       The .badge stays red because it flags a bookable package.
     TIER 2, BLUE ACCENT (--blue-bright on --deep-900 text): every
       non-booking action. .btn-action carries Learn More, See Pricing
       and Read Reviews. Same padding and typography as .btn-book, so
       the pair reads as one control group with one clear first move.
     TERTIARY: .btn-line, outline only. Disabled form submit and the
       "Leave a Google review" outbound link. Nothing else.
   Where a red and a blue button sit together, red comes first in DOM
   order so the booking path is the first thing read and tabbed to.
   ============================================================ */

/* ============ Layout scaffolding ============ */
.wrap{
  max-width:var(--measure);
  margin:0 auto;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}
.section{padding:clamp(3.5rem,7vw,6rem) 0}
.section-deep{background:var(--deep-900)}
.section-mid{background:var(--deep-700)}
.section-band{background:var(--deep-800)}

.section-head{margin-bottom:clamp(2.25rem,4.5vw,3.75rem)}
.section-head h2,
h2.display-head{
  font-family:var(--display);
  font-stretch:125%;
  font-variation-settings:'wdth' 125;
  font-weight:760;
  font-size:clamp(1.9rem,3.6vw,3rem);
  line-height:1.05;
  text-transform:uppercase;
  color:var(--cream);
  margin-bottom:.9rem;
}
.section-head h2::after,
h2.display-head::after{
  content:"";display:block;
  width:4.5rem;height:3px;
  background:var(--blue);
  margin-top:1rem;
}
.section-head p{color:var(--dim);max-width:34rem;font-size:1rem}

.card-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(1.25rem,2.5vw,2rem);
  align-items:stretch; /* cards share one top line, equal height */
}
.grid-2{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(1.25rem,2.5vw,2rem);
}

/* ============ Typography controls ============ */
/* text-wrap is a progressive enhancement: engines without it fall back to
   normal wrapping, so no layout depends on either value landing */
h1,h2,h3,.display-head{text-wrap:balance}
p{text-wrap:pretty}
/* wrap "King Slayer Sportfishing" and any other unit that must never split */
.nowrap{white-space:nowrap}

/* ============ Local token supplement ============ */
/* tokens.css owns the brand scale. This is the one layout token the component
   layer adds: the shared measure a stacked action button takes on a phone, so
   two buttons that wrap onto separate rows still read as one control group
   instead of two full-bleed bars. */
:root{
  --btn-stack-w:20rem;
}

/* ============ Buttons ============ */
.btn{
  display:inline-block;
  font-family:var(--display);
  font-stretch:125%;
  font-variation-settings:'wdth' 125;
  font-weight:680;
  font-size:.8125rem;
  text-transform:uppercase;
  letter-spacing:.11em;
  text-decoration:none;
  padding:.95em 1.8em;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease;
}
.btn-book{background:var(--red);color:#ffffff;border:1px solid var(--red)}
.btn-book:hover{background:var(--red-tint);border-color:var(--red-tint)}
/* .btn-action is the secondary accent: solid blue, dark text, same
   footprint as .btn-book so a pairing reads as one control group. It
   carries every non-booking label (Learn More, See Pricing, Read
   Reviews). It never links to the booking screen. */
.btn-action{background:var(--blue-bright);color:var(--deep-900);border:1px solid var(--blue-bright)}
.btn-action:hover{background:var(--ice);border-color:var(--ice);color:var(--deep-900)}
/* tertiary only: in-page jumps and side notes that must not compete */
.btn-line{background:transparent;color:var(--ice);border:1px solid var(--blue)}
.btn-line:hover{border-color:var(--blue-bright);color:var(--blue-bright)}

.call-link{
  font-family:var(--display);
  font-stretch:125%;
  font-variation-settings:'wdth' 125;
  font-weight:650;
  font-size:.95rem;
  letter-spacing:.07em;
  color:var(--ice);
  text-decoration:none;
  border-bottom:2px solid var(--blue);
  padding-bottom:.15em;
}
.call-link:hover{color:var(--blue-bright);border-color:var(--blue-bright)}

/* ============ Eyebrow ============ */
.eyebrow{
  font-family:var(--display);
  font-stretch:125%;
  font-variation-settings:'wdth' 125;
  font-weight:600;
  font-size:.78rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--blue-bright);
  margin-bottom:1.5rem;
}

/* ============ Header ============ */
.site-header{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;gap:1.75rem;
  padding:.75rem var(--gutter);
  background:rgba(13,23,48,.93);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.brand-mark{display:flex;align-items:center;text-decoration:none}
.brand-mark img{height:76px;width:auto}
.site-header .btn{padding:.68em 1.25em}

.site-nav{display:flex;align-items:center;gap:1.6rem;margin-left:auto}
.site-nav > a,
.nav-group > a{
  font-size:.9rem;font-weight:600;text-decoration:none;color:var(--dim);
  transition:color .15s ease;
}
.site-nav > a:hover,
.nav-group > a:hover{color:var(--blue-bright)}

/* ============ Header dropdown ============ */
.nav-group{
  position:relative;
  /* the vertical padding keeps the pointer inside the group on the way down */
  padding:.9rem 0;
  margin:-.9rem 0;
}
.nav-group > a{display:inline-flex;align-items:center;gap:.4rem}
.nav-group > a::after{
  content:"";
  width:0;height:0;flex:none;
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  border-top:4px solid currentColor;
}
.nav-drop{
  display:none;
  position:absolute;top:100%;left:-1rem;
  min-width:240px;
  background:var(--deep-800);
  border:1px solid var(--line);
  padding:.35rem 0;
  z-index:70;
}
.nav-group:hover > .nav-drop,
.nav-group:focus-within > .nav-drop,
.nav-group.is-open > .nav-drop{display:block}
.nav-drop a{
  display:block;
  padding:.62rem 1.1rem;
  font-size:.88rem;font-weight:600;
  text-decoration:none;color:var(--dim);
  transition:color .15s ease,background-color .15s ease;
}
.nav-drop a + a{border-top:1px solid var(--line)}
.nav-drop a:hover{color:var(--blue-bright);background:var(--deep-700)}

/* ============ Burger + mobile drawer ============ */
.nav-burger{
  display:none;
  flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:40px;
  padding:0 9px;
  background:transparent;
  border:1px solid var(--line);
  cursor:pointer;
}
.nav-burger span{
  display:block;height:2px;width:100%;
  background:var(--ice);
}
.nav-burger[aria-expanded="true"] span{background:var(--blue-bright)}

/* The drawer is a three-zone popup, not a bare list: a header row that
   repeats the cream logo and carries the close control, a scrolling body of
   link groups, and a pinned footer row with the booking button and the phone.
   It sits ABOVE .site-header, z-index set in the 880 breakpoint, so its own
   header row is the only chrome on screen and the X, not the burger, is the
   close path. The burger's aria-expanded is still kept in sync by nav.js. */
.nav-drawer{display:none}
.drawer-inner{
  height:100%;
  display:flex;flex-direction:column;
}
/* same padding and logo size as .site-header, so the row lands at the same
   height the header occupied and the logo does not jump on open */
.drawer-head{
  flex:none;
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;
  padding:.75rem var(--gutter);
  border-bottom:1px solid var(--line);
}
/* the X is drawn from two rotated bars: no glyph font, no icon dependency */
.drawer-close{
  position:relative;
  flex:none;
  width:44px;height:44px;
  padding:0;
  background:transparent;
  border:1px solid var(--line);
  cursor:pointer;
}
.drawer-close span{
  position:absolute;
  top:50%;left:50%;
  width:20px;height:2px;
  margin:-1px 0 0 -10px;
  background:var(--ice);
}
.drawer-close span:first-child{transform:rotate(45deg)}
.drawer-close span:last-child{transform:rotate(-45deg)}
.drawer-close:hover span{background:var(--blue-bright)}
.drawer-body{
  flex:1 1 auto;
  min-height:0; /* a flex child will not scroll without this */
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:1.5rem var(--gutter);
}
.drawer-group{margin-bottom:1.6rem}
.drawer-group:last-child{margin-bottom:0}
.drawer-label{
  font-family:var(--display);
  font-stretch:125%;
  font-variation-settings:'wdth' 125;
  font-weight:600;
  font-size:.72rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--blue-bright);
  padding-bottom:.55rem;
  border-bottom:1px solid var(--line);
  margin-bottom:.35rem;
}
/* scoped to the body so the header logo and the footer button keep their own
   styling instead of picking up the list rule */
.drawer-body a{
  display:block;
  padding:.7rem 0;
  font-size:1.02rem;font-weight:600;
  text-decoration:none;color:var(--ice);
  border-bottom:1px solid var(--line);
}
.drawer-body a:hover{color:var(--blue-bright)}
/* pinned to the bottom of the drawer. Book Now runs the full width here on
   purpose: inside a popup menu a full-width primary action is the convention,
   which is why the shared stacked-button measure does not apply to it */
.drawer-foot{
  flex:none;
  display:flex;flex-direction:column;align-items:stretch;
  gap:.85rem;
  padding:1.1rem var(--gutter);
  padding-bottom:calc(1.1rem + env(safe-area-inset-bottom, 0px));
  border-top:1px solid var(--line);
}
.drawer-foot .btn{display:block;width:100%;text-align:center}
.drawer-phone{
  display:block;
  text-align:center;
  font-family:var(--display);
  font-stretch:125%;
  font-variation-settings:'wdth' 125;
  font-weight:700;
  font-size:1.2rem;
  letter-spacing:.04em;
  color:var(--cream);
  text-decoration:none;
  transition:color .15s ease;
}
.drawer-phone:hover{color:var(--blue-bright)}

/* ============ Breadcrumbs ============ */
.crumbs{
  font-family:var(--display);
  font-stretch:125%;
  font-variation-settings:'wdth' 125;
  font-weight:600;
  font-size:.74rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--dim);
  padding:1rem 0;
}
.crumbs a{text-decoration:none;color:var(--dim)}
.crumbs a:hover{color:var(--blue-bright)}
.crumbs [aria-current="page"]{color:var(--ice)}
.crumbs > * + *::before{
  content:"\203A";
  margin:0 .6rem;
  color:var(--blue);
}

/* ============ Shared page hero: photo band + bottom scrim ============
   Used by every interior page. The home page keeps its own split hero.
   Same idiom as the Lake Ontario hero: full-bleed photo, copy carried by
   the scrim, uppercase Archivo H1, red .btn-book plus one blue .btn-action. */
.page-hero{
  position:relative;
  display:flex;
  align-items:flex-end;
  min-height:clamp(420px,56vh,640px);
  overflow:hidden;
  background:var(--deep-900);
  border-bottom:2px solid var(--blue); /* the waterline seam */
}
/* the photo fills the band, so it overrides the HTML width/height attributes
   on purpose: those are presentational hints that would otherwise render the
   photo at full pixel height. An explicit height is the guard here (height:auto
   would collapse an absolutely positioned image), and the scrim below it
   carries the copy contrast */
.page-hero-img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center 40%;
  transform:translateZ(0); /* forces layer promotion; Chrome can skip painting the abs-positioned photo under the ::after scrim without it */
}
.page-hero::after{
  content:"";
  position:absolute;inset:0;
  /* scrim resolves to var(--deep-700) #14224a so the band meets the page */
  background:
    linear-gradient(to top, rgba(20,34,74,.94) 0%, rgba(20,34,74,.55) 18%, rgba(20,34,74,0) 42%),
    linear-gradient(to right, rgba(20,34,74,.92) 0%, rgba(20,34,74,.72) 36%, rgba(20,34,74,.24) 68%, rgba(20,34,74,.06) 100%);
  pointer-events:none;
}
.page-hero-inner{
  position:relative;z-index:1;
  width:100%;
  max-width:var(--measure);
  margin:0 auto;
  padding:clamp(5rem,13vw,8rem) var(--gutter) clamp(2.25rem,4.5vw,3.25rem);
}
.page-hero .eyebrow{margin-bottom:1.1rem}
.page-hero h1{
  font-family:var(--display);
  font-stretch:125%;
  font-variation-settings:'wdth' 125;
  font-weight:760;
  font-size:clamp(2rem,4.2vw,3.4rem);
  line-height:1.03;
  text-transform:uppercase;
  letter-spacing:.008em;
  color:var(--cream);
  max-width:20ch;
  margin-bottom:1.2rem;
}
/* two short sentences at most: the scrim only protects this much copy */
.page-hero-sub{
  max-width:42rem;
  color:var(--ice);
  font-size:clamp(1rem,1.35vw,1.125rem);
}
.page-hero-cta{
  display:flex;flex-wrap:wrap;align-items:center;gap:.9rem;
  max-width:42rem;
  margin-top:1.8rem;
  padding-top:1.5rem;
  border-top:1px solid var(--line);
}

/* ============ Bridge CTA: mid-page nudge between sections ============ */
.bridge-cta{
  text-align:center;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:clamp(2.25rem,5vw,3.25rem) var(--gutter);
}
.bridge-cta .eyebrow{margin-bottom:1.1rem}
.bridge-cta h2{
  font-family:var(--display);
  font-stretch:125%;
  font-variation-settings:'wdth' 125;
  font-weight:760;
  font-size:clamp(1.4rem,2.8vw,2rem);
  line-height:1.08;
  text-transform:uppercase;
  color:var(--cream);
  max-width:30rem;
  margin:0 auto 1.4rem;
}
.bridge-cta .btn{margin:0 auto}
/* one line of reassurance, nothing longer */
.bridge-cta-note{
  color:var(--dim);
  font-size:.95rem;
  max-width:34rem;
  margin:1rem auto 0;
}

/* ============ Trust strip: depth-gauge band ============ */
.trust{
  background:var(--deep-800);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.trust-inner{
  max-width:var(--measure);margin:0 auto;
  padding:0 var(--gutter);
  display:grid;grid-template-columns:repeat(4,1fr);
}
.trust-item{
  display:flex;align-items:center;gap:.8rem;
  padding:1.2rem 1rem 1.2rem 0;
  font-family:var(--display);
  font-stretch:125%;
  font-variation-settings:'wdth' 125;
  font-weight:600;
  font-size:.8rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--ice);
}
.trust-item::before{
  content:"";width:2px;height:1.05rem;flex:none;
  background:var(--blue-bright);
}

/* ============ Package cards ============ */
.pkg-card{
  background:var(--panel);
  border:1px solid var(--line);
  display:flex;flex-direction:column;
  transition:border-color .2s ease;
}
.pkg-card:hover{border-color:var(--blue-bright)}
.card-photo{position:relative}
/* height:auto is required: the HTML height attribute is a presentational hint
   that would otherwise beat aspect-ratio and render the photo at full pixel height */
.card-photo img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.card-photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(26,44,94,.6),rgba(26,44,94,0) 45%);
}
.badge{
  position:absolute;top:.9rem;left:.9rem;z-index:1;
  background:var(--red);color:#ffffff;
  font-family:var(--display);
  font-stretch:125%;
  font-variation-settings:'wdth' 125;
  font-weight:700;font-size:.7rem;
  letter-spacing:.13em;text-transform:uppercase;
  padding:.45em .85em;
}
.card-body{
  padding:1.6rem 1.6rem 1.7rem;
  display:flex;flex-direction:column;flex:1;
}
.card-body h3{
  font-family:var(--display);
  font-stretch:125%;
  font-variation-settings:'wdth' 125;
  font-weight:700;
  font-size:1.28rem;
  line-height:1.15;
  text-transform:uppercase;
  letter-spacing:.02em;
  color:var(--cream);
  margin-bottom:.8rem;
}
.card-body > p{color:var(--dim);font-size:.98rem;margin-bottom:1.25rem}
.chips{
  display:flex;flex-wrap:wrap;gap:.45rem;
  list-style:none;
  margin-top:auto;
  margin-bottom:1.35rem;
}
.chips span,
.chips li{
  font-family:var(--display);
  font-stretch:125%;
  font-variation-settings:'wdth' 125;
  font-weight:600;
  font-size:.72rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--blue-bright);
  border:1px solid var(--blue);
  padding:.3em .7em;
  /* "1-6 guests" and "Apr to Oct" stay on one line, the row wraps instead */
  white-space:nowrap;
}
.price-row{
  border-top:1px solid var(--line);
  padding-top:1.15rem;
  margin-bottom:1.3rem;
}
.price{
  font-family:var(--display);
  font-stretch:125%;
  font-variation-settings:'wdth' 125;
  font-weight:760;
  font-size:2rem;
  line-height:1;
  color:var(--ice);
  white-space:nowrap; /* "From $500" never splits across two lines */
}
.price-note{color:var(--dim);font-size:.9rem;margin-top:.35rem}
.pkg-card .btn{text-align:center}

/* ============ Biting now: month-keyed band ============ */
.biting-now{
  background:var(--panel);
  border:1px solid var(--line);
  border-left:3px solid var(--blue-bright);
  padding:1.4rem 1.6rem 1.5rem;
}
.biting-now .eyebrow{margin-bottom:.9rem}
.biting-now h2{
  font-family:var(--display);
  font-stretch:125%;
  font-variation-settings:'wdth' 125;
  font-weight:700;
  font-size:clamp(1.35rem,2.4vw,1.75rem);
  line-height:1.1;
  text-transform:uppercase;
  color:var(--cream);
  margin-bottom:.95rem;
}
.biting-now p + p{margin-top:.75rem}
.biting-list{
  display:flex;flex-wrap:wrap;gap:.45rem;
  list-style:none;
  margin-bottom:1rem;
}
.biting-list li{
  font-family:var(--display);
  font-stretch:125%;
  font-variation-settings:'wdth' 125;
  font-weight:600;
  font-size:.72rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--blue-bright);
  border:1px solid var(--blue);
  padding:.3em .7em;
}
.biting-now p{color:var(--dim);font-size:.96rem}
.biting-now p + .btn,
.biting-now .btn{margin-top:1.1rem}

/* ============ Review card ============ */
.review-card{
  background:var(--panel);
  border:1px solid var(--line);
  padding:1.5rem 1.6rem 1.6rem;
  display:flex;flex-direction:column;
}
.review-stars{
  color:var(--blue-bright);
  letter-spacing:.24em;
  font-size:.95rem;
  margin-bottom:.9rem;
}
.review-card blockquote{
  color:var(--ice);
  font-size:1rem;
  margin-bottom:1.2rem;
}
.review-meta{
  margin-top:auto;
  border-top:1px solid var(--line);
  padding-top:.9rem;
  font-family:var(--display);
  font-stretch:125%;
  font-variation-settings:'wdth' 125;
  font-weight:600;
  font-size:.74rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--dim);
}

/* ============ FAQ item ============ */
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{
  position:relative;
  list-style:none;
  cursor:pointer;
  padding:1.15rem 2.4rem 1.15rem 0;
  font-family:var(--display);
  font-stretch:125%;
  font-variation-settings:'wdth' 125;
  font-weight:650;
  font-size:1rem;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--cream);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--blue-bright)}
.faq-item summary::before,
.faq-item summary::after{
  content:"";position:absolute;top:50%;
  background:var(--blue-bright);
}
.faq-item summary::before{
  right:.25rem;
  width:.85rem;height:2px;
  transform:translateY(-50%);
}
.faq-item summary::after{
  right:calc(.675rem - 1px);
  width:2px;height:.85rem;
  transform:translateY(-50%);
  transition:transform .18s ease,opacity .18s ease;
}
.faq-item[open] summary::after{transform:translateY(-50%) scaleY(0);opacity:0}
.faq-item[open] summary{color:var(--blue-bright)}
.faq-answer{color:var(--dim);padding:0 2.4rem 1.35rem 0}
.faq-answer p + p{margin-top:.8rem}

/* ============ Video band: the reel, in the Deep Water frame ============
   Shared by the home page and the captains page. Standard .section-head
   above a 16:9 media frame carried by the --line border. Playback is the
   native <video> control set: no autoplay, no loop, preload="none", so
   the poster is the only byte spent until a visitor asks for the reel.
   The red badge is a real <button> that hands off to video.play(). It
   ships with the hidden attribute and video-band.js reveals it, so a
   visitor without JS gets the native controls unobstructed. */
.video-frame{
  position:relative;
  max-width:60rem;
  margin:0 auto;
  border:1px solid var(--line);
  background:var(--deep-900);
}
.video-frame video{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16 / 9;   /* guard: holds the box before metadata loads */
  object-fit:cover;
  background:var(--deep-900);
}
.video-play{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:0;
  background:rgba(13,23,48,.32);
  cursor:pointer;
  transition:background-color .18s ease;
}
.video-play[hidden]{display:none}
.video-play:hover{background:rgba(13,23,48,.14)}
.video-play::before{
  content:"";
  width:clamp(3.25rem,6vw,4.5rem);
  height:clamp(3.25rem,6vw,4.5rem);
  background:var(--red);
  transition:background-color .18s ease;
}
.video-play:hover::before{background:var(--red-tint)}
.video-play::after{
  content:"";
  position:absolute;
  top:50%;left:50%;
  transform:translate(-32%,-50%);
  border-left:1.05rem solid #ffffff;
  border-top:.66rem solid transparent;
  border-bottom:.66rem solid transparent;
}

/* ============ CTA band ============ */
.cta-band{
  background:var(--deep-800);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:clamp(2.75rem,6vw,4.5rem) 0;
}
.cta-band-inner{
  max-width:var(--measure);margin:0 auto;
  padding:0 var(--gutter);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1.6rem;
}
.cta-band h2{
  font-family:var(--display);
  font-stretch:125%;
  font-variation-settings:'wdth' 125;
  font-weight:760;
  font-size:clamp(1.6rem,3.2vw,2.6rem);
  line-height:1.06;
  text-transform:uppercase;
  color:var(--cream);
  max-width:34rem;
}
.cta-band p{color:var(--dim);margin-top:.7rem;max-width:34rem}
.cta-band-actions{display:flex;flex-wrap:wrap;align-items:center;gap:1.3rem}

/* ============ Footer ============ */
.site-footer{
  background:var(--deep-900);
  border-top:1px solid var(--line);
}
.footer-inner{
  max-width:var(--measure);margin:0 auto;
  padding:clamp(2.5rem,5vw,3.75rem) var(--gutter) 1.6rem;
}
/* Three zones in one band: brand + action, one slim nav row, fine print.
   The sitemap columns are gone. Everything a visitor still needs from the
   footer is either a booking action or a single row of essential links. */
.footer-top{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1.5rem 2.5rem;
  padding-bottom:1.6rem;
}
.footer-brand{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:1.1rem;
  max-width:40rem;
}
.footer-brand .brand-mark img{height:48px;width:auto;display:block}
.footer-brand p{
  color:var(--dim);
  font-size:.95rem;
  max-width:26rem;
}
.footer-action{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:1.25rem 1.6rem;
}
/* phone bookings are a real conversion path, so the number is set at
   display weight rather than as a line of fine print */
.footer-phone{
  display:inline-block;
  font-family:var(--display);
  font-stretch:125%;
  font-variation-settings:'wdth' 125;
  font-weight:700;
  font-size:clamp(1.35rem,2.6vw,1.75rem);
  letter-spacing:.04em;
  color:var(--cream);
  text-decoration:none;
  transition:color .15s ease;
}
.footer-phone:hover{color:var(--blue-bright)}

.footer-nav{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:.95rem 0;
  display:flex;flex-wrap:wrap;align-items:center;
  gap:.35rem 1.05rem;
}
.footer-nav a{
  font-size:.92rem;
  text-decoration:none;
  color:var(--dim);
  padding:.2rem 0;
  transition:color .15s ease;
}
.footer-nav a:hover{color:var(--blue-bright)}
.footer-nav a + a::before{
  content:"";
  display:inline-block;
  width:3px;height:3px;
  margin-right:1.05rem;
  vertical-align:middle;
  background:var(--blue-bright);
  opacity:.55;
}

.footer-fine{
  padding-top:1.3rem;
  display:flex;flex-wrap:wrap;align-items:center;
  gap:.4rem 1.4rem;
  color:var(--dim);
  font-size:.82rem;
}
.footer-fine address{font-style:normal}
.footer-fine a{color:var(--dim);text-decoration:none;transition:color .15s ease}
.footer-fine a:hover{color:var(--blue-bright)}
.footer-copy{margin-left:auto}

/* ============ Responsive ============ */
@media (max-width:1080px){
  /* the 76px logo takes ~169px, so the header gap tightens and the
     horizontal padding trims back to keep the full nav plus Book Now
     on one line down to 1024px */
  .site-header{gap:1.25rem;padding-left:1.5rem;padding-right:1.5rem}
  .site-nav{gap:1.15rem}
  .site-nav > a,
  .nav-group > a{font-size:.85rem}
}
@media (max-width:880px){
  .site-nav{display:none}
  .site-header .btn-book{margin-left:auto}
  .nav-burger{display:flex}
  /* above .site-header (z-index 60) so the drawer's own header row replaces
     the site header rather than stacking a second logo under it. The body
     zone scrolls, the drawer itself does not */
  .nav-drawer{
    position:fixed;inset:0;z-index:80;
    background:var(--deep-900);
    overflow:hidden;
  }
  .nav-drawer.is-open{display:block}
  .nav-drawer:focus{outline:none}
  .card-row{grid-template-columns:1fr;max-width:34rem;margin:0 auto}
  .grid-2{grid-template-columns:1fr}
  .trust-inner{grid-template-columns:1fr 1fr}
  .trust-item{padding:1rem 0}
  .footer-top{align-items:flex-start}
}
@media (max-width:640px){
  .site-header{gap:.9rem;padding:.6rem var(--gutter)}
  /* 50px (was 40px), shared by .site-header and .drawer-head since both
     use .brand-mark img; width stays auto, proportional to the 1500x675 source */
  .brand-mark img{height:50px}
  .site-header .btn{padding:.6em .95em;font-size:.75rem;letter-spacing:.08em}
  /* the drawer header row tracks the site header's padding at every step */
  .drawer-head{padding:.6rem var(--gutter)}
  /* the footer zones stack, the nav row keeps wrapping, and the phone
     number stays at display size because it is the fastest booking path
     on a handset */
  .footer-top{flex-direction:column;align-items:flex-start;gap:1.35rem}
  .footer-brand{align-items:flex-start}
  .footer-action{width:100%;justify-content:space-between}
  .footer-copy{margin-left:0;width:100%}
  .cta-band-inner{flex-direction:column;align-items:flex-start}
  .cta-band-actions{width:100%}
  .page-hero{min-height:420px}
  .page-hero-inner{padding:clamp(6.5rem,26vw,8.5rem) var(--gutter) 2rem}
  .page-hero h1{font-size:clamp(1.75rem,7.4vw,2.3rem);max-width:none}
  .page-hero-cta{margin-top:1.4rem;padding-top:1.2rem}
  /* a chip only wraps when it cannot fit its card, so the ones that still fit
     keep sitting on one line. "Alumacraft Mar-Oct, 1-3 guests" runs 302px set
     solid, wider than the card gives it at 390 and below */
  .chips span,
  .chips li{white-space:normal}
}

/* ============ Narrow phones: the 320px column ============ */
/* A 320 viewport leaves 280px between the gutters. Archivo at wdth 125 is a
   wide face, so a long uppercase word can measure more than that column on its
   own: CANCELLATIONS runs 339px at the section H2 floor, SPORTFISHING 279px at
   the page hero H1 floor. The floors come down here until the longest word on
   the site fits, and the trust strip runs one item per row instead of two. */
@media (max-width:360px){
  .trust-inner{grid-template-columns:1fr}
  .section-head h2,
  h2.display-head{font-size:clamp(1.5rem,7vw,1.9rem)}
  .page-hero h1{font-size:clamp(1.55rem,7.2vw,1.85rem)}
  /* answers carry email addresses and other strings with no break point.
     Headings are never allowed to break mid-word, they only get smaller */
  .faq-answer p{overflow-wrap:break-word}
}

/* ============ Stacked action buttons on phones ============ */
/* When an action pairing wraps to one button per row, the buttons stop at a
   shared measure (--btn-stack-w) instead of running the full column. Both
   buttons in a pairing resolve to the same width, so the pair still reads as
   one control group, and neither goes full-bleed at 390. Below ~360 the
   min() falls back to the column width, which is the correct behaviour there.
   Excluded on purpose: buttons inside a card or a package card, which span
   their card so a row of cards stays comparable, and the drawer's Book Now,
   which spans the drawer because that is the popup-menu convention.
   The selectors carry the button's own class through :is() so they outrank
   the per-page sheets, which load after this file and set flex:1 1 100%. */
@media (max-width:640px){
  .page-hero-cta .btn:is(.btn-book,.btn-action,.btn-line),
  .cta-band-actions .btn:is(.btn-book,.btn-action,.btn-line),
  .hero-cta .btn:is(.btn-book,.btn-action,.btn-line),
  .lo-hero-cta .btn:is(.btn-book,.btn-action,.btn-line),
  .hold-links .btn:is(.btn-book,.btn-action,.btn-line),
  .bring-band-foot .btn:is(.btn-book,.btn-action,.btn-line),
  .gr-rating .btn:is(.btn-book,.btn-action,.btn-line),
  .rev-invite .btn:is(.btn-book,.btn-action,.btn-line){
    flex:0 1 auto;
    width:min(100%, var(--btn-stack-w));
    text-align:center;
  }
  /* the bridge CTA is a centred block, so its button keeps the same measure
     but stays centred rather than aligning to the start like the pairings */
  .bridge-cta .btn:is(.btn-book,.btn-action,.btn-line){
    display:block;
    width:min(100%, var(--btn-stack-w));
    margin-left:auto;
    margin-right:auto;
    text-align:center;
  }
}

/* ============ Horizontal guard ============ */
/* This is a guard, not a fix. Every overflow the 390 and 320 audit found is
   fixed by the rules above. This line only catches what a later edit might
   introduce, so a stray wide element clips instead of handing the whole page a
   sideways scroll. overflow-x:clip rather than hidden: clip creates no scroll
   container, so the sticky header keeps working. When the audit finds a new
   overflow, fix the element, do not lean on this line. */
html{overflow-x:clip}