/* ==========================================================================
   South Bound River Anglers — landing page
   Standalone stylesheet for the redesigned home page. Independent of the
   Divi export used by the remaining pages, so nothing here can leak into
   them (and their rules cannot reach in here).

   Every colour, size and rhythm value is a token in :root below — retune the
   design from that block alone.
   ========================================================================== */

/* ---------- tokens ---------- */
:root {
  /* brand */
  --blue:        #2a4b9b;   /* section eyebrows, links, accents        */
  --blue-deep:   #16357f;   /* primary buttons, "why choose" wash      */
  --ink:         #1a1a2e;   /* headings                                */
  --body:        #5f6368;   /* paragraph copy                          */
  --muted:       #8a8f96;   /* meta, legal line                        */
  --chip:        #e9e9e9;   /* secondary "Explore …" buttons           */
  --chip-hover:  #dcdcdc;
  --hairline:    #dcdcdc;
  --black:       #131313;   /* footer                                  */
  --white:       #ffffff;
  --placeholder: #b9bcc0;   /* shows through until real photos land    */

  /* layout */
  --wrap:        1120px;    /* feature rows, footer                    */
  --wrap-narrow: 720px;     /* centred intro + CTA copy                */
  --gutter:      clamp(20px, 5vw, 60px);
  --radius:      4px;
  --radius-card: 10px;

  /* type */
  --font: "Montserrat", "Open Sans", -apple-system, BlinkMacSystemFont,
          "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* body copy - shared by every running paragraph so they stay in step */
  --copy-size:    15.5px;   /* lede, feature rows, planning CTA */
  --copy-size-sm: 14px;     /* inside the narrower "why choose" cards */
  --copy-weight:  500;

  /* vertical rhythm */
  --section-y:   clamp(56px, 8vw, 104px);
}

/* ---------- reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.75;
  color: var(--body);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

p { margin: 0; }
/* figure carries a 40px UA side-margin that would shrink every photo slot. */
figure, figcaption { margin: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

.wrap        { width: 100%; max-width: var(--wrap);        margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { width: 100%; max-width: var(--wrap-narrow); margin-inline: auto; padding-inline: var(--gutter); }

/* Screen-reader-only helper (skip link, icon labels). */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--gutter); top: -60px; z-index: 100;
  background: var(--white); color: var(--ink);
  padding: 10px 18px; border-radius: var(--radius);
  transition: top .2s ease;
}
.skip-link:focus { top: 14px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 17px 42px;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color .2s ease, transform .2s ease;
}
.btn-primary {
  background: var(--blue-deep);
  color: var(--white);
}
.btn-primary:hover { background: #102a68; transform: translateY(-1px); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--chip);
  color: var(--ink);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: none;
  padding: 11px 20px;
  border-radius: var(--radius);
  transition: background-color .2s ease;
}
.btn-ghost:hover { background: var(--chip-hover); }
.btn-ghost .arrow { transition: transform .2s ease; }
.btn-ghost:hover .arrow { transform: translateX(3px); }

/* ==========================================================================
   Header — transparent, sitting over the hero
   ========================================================================== */
.site-header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px var(--gutter);
}

.brand img { height: clamp(40px, 4.4vw, 58px); width: auto; }

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 24px; height: 2px;
  margin: 5px 0;
  background: var(--white);
  transition: transform .25s ease, opacity .25s ease;
}

.site-nav { display: flex; align-items: center; gap: clamp(18px, 2.6vw, 38px); }

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.6vw, 38px);
  margin: 0; padding: 0;
  list-style: none;
}
.nav-links a {
  position: relative;
  color: var(--white);
  /* 1.5x the original 14px. Flat rather than clamped: at this size the five
     items fit the bar at every width down to the 760px hamburger. */
  font-size: 21px;
  font-weight: 600;
  letter-spacing: .02em;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .35);
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -6px;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.nav-links a:hover::after { transform: scaleX(1); }

.social { display: flex; align-items: center; gap: 10px; }
.social a {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  color: var(--white);
  border-radius: 3px;
  transition: opacity .2s ease;
}
.social a:hover { opacity: .7; }
.social svg { width: 15px; height: 15px; fill: currentColor; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(520px, 78vh, 860px);
  padding: 140px var(--gutter) 96px;
  text-align: center;
  background: var(--placeholder);
  overflow: hidden;
}
/* Applies to either an <img> or the <video> that replaced it. */
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  pointer-events: none;      /* never intercepts clicks on the hero CTA */
  background: var(--placeholder);
}
/* Scrim keeps white type legible over any photo. The mid-band carries real
   weight because the headline can land on bright water or gravel — measured
   at 2.9:1 over the sunlit gravel bar with a lighter wash. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(0,0,0,.46) 0%, rgba(0,0,0,.30) 28%, rgba(0,0,0,.30) 64%, rgba(0,0,0,.44) 100%);
}
.hero-inner { position: relative; z-index: 2; max-width: 900px; }

.hero h1 {
  color: var(--white);
  font-size: clamp(32px, 5.4vw, 62px);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-shadow: 0 3px 26px rgba(0, 0, 0, .4);
}
.hero p {
  margin: 20px auto 38px;
  max-width: 620px;
  color: rgba(255, 255, 255, .95);
  font-size: clamp(15px, 1.5vw, 18px);
  font-weight: 300;
  text-shadow: 0 2px 16px rgba(0, 0, 0, .45);
}

/* ==========================================================================
   Intro — eyebrow, headline, ornament, lede
   ========================================================================== */
.intro {
  padding: var(--section-y) 0 clamp(30px, 4vw, 54px);
  text-align: center;
}
/* Two stacked lines at the same size: the brand name carries the weight,
   the lead-in stays light and slightly wider-tracked. Spans are block-level
   so the break holds at every width without a <br>. */
.eyebrow {
  margin-bottom: clamp(34px, 5vw, 60px);
  color: var(--blue);
  font-size: clamp(19px, 2.5vw, 30px);
  line-height: 1.22;
  text-transform: uppercase;
}
.eyebrow span { display: block; }
.eyebrow-lead { font-weight: 400; letter-spacing: .07em; }
.eyebrow-name { font-weight: 700; letter-spacing: .03em; }
/* Staggered two-line heading: first line flush left, second flush right,
   inside a box deliberately WIDER than either line. Shrink-wrapping would
   sit both lines on the same left edge and kill the stagger. Each instance
   sets its own width in em, so the offset scales with the clamped font-size
   rather than drifting at small screens. */
.stagger-title {
  display: block;
  margin-inline: auto;
  font-size: clamp(24px, 3.1vw, 36px);
  line-height: 1.2;
}
.stagger-title span { display: block; }
.stagger-title .line-a { text-align: left; }
.stagger-title .line-b { text-align: right; }

/* Intro: weight contrast between the two lines. */
.intro h2 { width: min(100%, 12.4em); }
.intro h2 .line-a { font-weight: 700; }
.intro h2 .line-b { font-weight: 400; }
.ornament {
  display: block;
  width: min(300px, 70%);
  margin: clamp(20px, 3vw, 34px) auto;
  color: var(--hairline);
}
.intro .lede {
  max-width: 620px;
  margin-inline: auto;
  font-size: var(--copy-size);
  font-weight: var(--copy-weight);
  line-height: 1.85;
}

/* ==========================================================================
   Feature rows — alternating copy / imagery
   ========================================================================== */
.features {
  display: grid;
  gap: clamp(56px, 8vw, 104px);
  padding-bottom: var(--section-y);
}

.feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.95fr);
  align-items: center;
  gap: clamp(28px, 4.5vw, 64px);
}
/* Imagery first, copy second. */
.feature--reverse { grid-template-columns: minmax(0, 1.95fr) minmax(0, 1fr); }
.feature--reverse .feature-copy { order: 2; }
.feature--reverse .feature-media { order: 1; }

.feature-copy h3 {
  font-size: clamp(19px, 2.1vw, 25px);
  font-weight: 500;
  line-height: 1.35;
}
.feature-copy p {
  margin: 18px 0 26px;
  font-size: var(--copy-size);
  font-weight: var(--copy-weight);
  line-height: 1.8;
}

/* Row 1 — single wide guide photo. Label and corners baked into the asset. */
.media-single { display: block; }
.media-single img { width: 100%; height: auto; border-radius: var(--radius-card); }

/* Row 2 — the three cards ship as ONE transparent PNG with the stagger,
   rounded corners and river names already baked in. No grid, no overlays:
   a transparent asset must not sit on .shot's grey fill or get clipped by
   its border-radius. */
.media-rivers { display: block; }
.media-rivers img { width: 100%; height: auto; }

/* Row 3 — lodge interior + exterior.
   Both source files are 820px tall, so flex-grow set to their intrinsic
   widths (1050 and 578) lines the two heights up exactly while each keeps
   its natural aspect. No object-fit: cover here — cropping would shave the
   baked-in "LODGE" wordmark off the bottom of the exterior shot.
   Swapping either photo means revisiting these two numbers. */
.media-lodges {
  display: flex;
  align-items: flex-start;
  gap: clamp(8px, 1.2vw, 16px);
}
.media-lodges img {
  width: 100%;
  height: auto;
  min-width: 0;              /* flex default is auto = intrinsic width, which
                                would refuse to shrink and overflow the row */
  border-radius: var(--radius-card);
}
.media-lodges .lodge-interior { flex: 1050 1 0; }
.media-lodges .lodge-exterior { flex: 578 1 0; }

/* Row 4 — guest stories. Label and corners are baked into the asset. */
.media-stories { display: block; }
.media-stories img { width: 100%; height: auto; border-radius: var(--radius-card); }

/* ==========================================================================
   Planning CTA + full-bleed banner
   ========================================================================== */
.planning {
  padding-bottom: clamp(34px, 5vw, 56px);
  text-align: center;
}
/* Planning CTA: both lines carry full weight. */
.planning h2 { width: min(100%, 13.5em); }
.planning h2 span { font-weight: 700; }
.planning p {
  max-width: 620px;
  margin: clamp(18px, 2.4vw, 26px) auto clamp(26px, 3.4vw, 38px);
  font-size: var(--copy-size);
  font-weight: var(--copy-weight);
}

/* Wordmarks are burned into the artwork. Natural aspect only — the source is
   4.53:1 and the old 3.73:1 crop would have shaved "PLAN" and "JOURNEY" off
   the left and right edges. */
.banner {
  position: relative;
  display: block;
  margin: 0 auto clamp(54px, 7vw, 86px);
  max-width: var(--wrap);
  width: calc(100% - (2 * var(--gutter)));
  overflow: hidden;
  border-radius: var(--radius-card);
}
.banner img {
  width: 100%; height: auto;
  transition: transform .6s ease;
}
.banner:hover img { transform: scale(1.03); }

/* ==========================================================================
   "Why anglers choose Southbound"
   ========================================================================== */
.why {
  position: relative;
  padding: clamp(44px, 6vw, 72px) 0 clamp(52px, 7vw, 84px);
  overflow: hidden;
  background: var(--blue-deep);
}
/* The artwork ships with the blue treatment already applied, so it runs at
   full opacity and carries no extra wash — layering the old overlay on top
   would darken it twice. --blue-deep stays on .why purely as the backdrop
   the photo is cropped against. */
.why-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.why > .wrap { position: relative; z-index: 2; }

.why h2 {
  margin-bottom: clamp(28px, 4vw, 46px);
  color: var(--white);
  font-size: clamp(18px, 2.3vw, 27px);
  font-weight: 600;
  letter-spacing: .06em;
  text-align: center;
  text-transform: uppercase;
}

.why-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 30px);
}
.why-card {
  padding: clamp(24px, 3vw, 36px) clamp(18px, 2.2vw, 28px);
  text-align: center;
  background: var(--white);
  border-radius: 6px;
}
/* Supplied line-art icons. They are block-level images inside a centred card,
   so they need auto side margins - text-align alone would not centre them. */
.why-card img {
  width: 34px; height: 34px;
  margin: 0 auto 16px;
}
.why-card h3 {
  margin-bottom: 12px;
  font-size: clamp(14px, 1.5vw, 17px);
  font-weight: 500;
}
.why-card p {
  font-size: var(--copy-size-sm);
  font-weight: var(--copy-weight);
  line-height: 1.75;
}

/* ==========================================================================
   Instagram strip
   ========================================================================== */
/* Breathing room between the blue "why choose" band and the photo strip.
   Floor is 1.6cm rather than 1.5cm: browsers round layout to 1/64px, so a
   literal 1.5cm lands a hair UNDER the 56.69px it should be. max() lets the
   gap open up on wide screens. Sits on the strip, not inside .why, so the
   space falls outside the blue background. */
.instagram { margin-top: max(1.6cm, 4vw); }

.insta-strip {
  display: block;
  transition: opacity .3s ease;
}
.insta-strip img { width: 100%; height: auto; }
.insta-strip:hover { opacity: .92; }

.insta-follow {
  padding: clamp(20px, 2.8vw, 30px) var(--gutter);
  color: var(--blue);
  font-size: clamp(13px, 1.4vw, 16px);
  font-weight: 500;
  text-align: center;
}
.insta-follow a:hover { text-decoration: underline; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--black); color: var(--white); }

.footer-main {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
  padding: clamp(38px, 5vw, 58px) var(--gutter);
}

.footer-nav { margin: 0; padding: 0; list-style: none; }
.footer-nav li + li { margin-top: 9px; }
.footer-nav a {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: opacity .2s ease;
}
.footer-nav a:hover { opacity: .65; }

.footer-logo { justify-self: center; }
.footer-logo img { height: clamp(76px, 9vw, 116px); width: auto; }

.footer-contact {
  justify-self: end;
  text-align: right;
}
.footer-contact .social {
  justify-content: flex-end;
  margin-bottom: 16px;
}
.footer-contact h4 {
  color: var(--white);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.footer-contact a[href^="mailto:"] {
  display: inline-block;
  margin-top: 6px;
  color: rgba(255, 255, 255, .82);
  font-size: 12.5px;
  font-weight: 300;
  word-break: break-word;
}
.footer-contact a[href^="mailto:"]:hover { color: var(--white); }
.footer-contact address {
  margin-top: 12px;
  color: rgba(255, 255, 255, .6);
  font-size: 11.5px;
  font-style: normal;
  font-weight: 300;
  line-height: 1.6;
}

.footer-legal {
  padding: 15px var(--gutter);
  color: rgba(255, 255, 255, .55);
  font-size: 11px;
  font-weight: 300;
  text-align: center;
  background: #0b0b0b;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.footer-legal a:hover { color: var(--white); text-decoration: underline; }

/* ==========================================================================
   Shared interior-page furniture
   Used by every page except the home page (which has its own taller hero
   and its own closing sections). Lives here rather than in a per-page
   stylesheet so Fishing, Guides and any later page stay identical.
   ========================================================================== */

/* ==========================================================================
   Page hero — shorter than the landing hero, no CTA
   ========================================================================== */
.page-hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(420px, 56vw, 620px);
  padding: 150px var(--gutter) 70px;
  text-align: center;
  overflow: hidden;
  background: var(--placeholder);
}
.page-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}
/* Same reasoning as the landing hero: white type has to survive whatever
   photo sits behind it, including bright water. */
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,.50) 0%, rgba(0,0,0,.34) 30%,
                                      rgba(0,0,0,.34) 66%, rgba(0,0,0,.46) 100%);
}
.page-hero-inner { position: relative; z-index: 2; max-width: 760px; }

.page-hero h1 {
  color: var(--white);
  font-size: clamp(22px, 2.6vw, 34px);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-shadow: 0 3px 22px rgba(0, 0, 0, .45);
}
.page-hero p {
  margin: 18px auto 0;
  max-width: 560px;
  color: rgba(255, 255, 255, .95);
  font-size: var(--copy-size);
  font-weight: var(--copy-weight);
  line-height: 1.7;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .5);
}

/* ==========================================================================
   Closing CTA band
   ========================================================================== */
.cta-band {
  padding: clamp(40px, 5.5vw, 70px) var(--gutter);
  /* Gap before the footer. Floor is 1.6cm rather than 1.5cm: browsers round
     layout to 1/64px, so a literal 1.5cm can land a hair under the 56.69px
     it should be. margin (not padding) so the page's white background shows
     through instead of just extending this section's own blue. Lives here
     rather than on the shared .site-footer rule in sbra.css, which the home
     page also uses and has no cta-band before it. */
  margin-bottom: max(1.6cm, 4vw);
  text-align: center;
  background: var(--blue-deep);
}
.cta-band h2 {
  color: var(--white);
  font-size: clamp(18px, 2.2vw, 27px);
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.cta-band p {
  max-width: 620px;
  margin: 16px auto clamp(22px, 3vw, 32px);
  color: rgba(255, 255, 255, .92);
  font-size: var(--copy-size-sm);
  font-weight: var(--copy-weight);
  line-height: 1.7;
}
.btn-light {
  background: #cfcfcf;
  color: var(--ink);
}
.btn-light:hover { background: var(--white); transform: translateY(-1px); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
  .feature,
  .feature--reverse { grid-template-columns: minmax(0, 1fr); }
  .feature--reverse .feature-copy,
  .feature--reverse .feature-media { order: 0; }
  .feature-copy { text-align: center; }

  .why-cards { grid-template-columns: minmax(0, 1fr); }

  .footer-main {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
    gap: 30px;
  }
  .footer-nav { text-align: center; }
  .footer-contact { justify-self: center; text-align: center; }
  .footer-contact .social { justify-content: center; }
  .footer-logo { order: -1; }
}

@media (max-width: 760px) {
  /* Collapse the nav behind a toggle. */
  .nav-toggle { display: block; }

  .site-header { align-items: center; }

  .site-nav {
    position: absolute;
    inset: 100% var(--gutter) auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 10px 0;
    background: rgba(12, 14, 22, .96);
    border-radius: 8px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .35);
    /* Hidden by default; .is-open (set by the toggle) reveals it. */
    display: none;
  }
  .site-nav.is-open { display: flex; }

  .nav-links { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-links a { display: block; padding: 12px 22px; text-shadow: none; }
  .nav-links a::after { display: none; }
  .nav-links a:hover { background: rgba(255, 255, 255, .07); }

  .social { justify-content: center; padding: 12px 22px 4px; }

}

@media (max-width: 520px) {
  .media-lodges { flex-direction: column; }
  .media-lodges .lodge-interior,
  .media-lodges .lodge-exterior { flex: 0 0 auto; }
  .btn { width: 100%; max-width: 320px; padding-inline: 20px; }
}

/* ---------- motion / print ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}