/* ================== Base typography & helpers ================== */
*,
*::before,
*::after { box-sizing: border-box; }

img { max-width: 100%; height: auto; display: block; }

body, p, li, small {
  font-family: 'Richmond Text', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  margin: 0;
}
h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4, .display-5 {
  font-family: 'Richmond Display', sans-serif;
}
h1, .display-4 { font-weight: 800; letter-spacing: -.01em; }
h2 { font-weight: 700; letter-spacing: -.005em; }

.section-pad { padding: 2rem 0; }
.lead-tight { max-width: 65ch; }
.bg-cover { background-size: cover; background-position: center; background-repeat: no-repeat; }
.text-white{color:#fff;}
/* Anchor offset for sticky header */
[id] { scroll-margin-top: calc(var(--nav-height, 82px) + 8px); }

/* ================== Variables ================== */
:root{
  --nav-height: 82px;
  --nav-height-shrink: 60px;
  --nav-logo-pad-y: 10px;
  --nav-font-size: .9rem;
  --nav-letterspace: .14em;

  --container-max: 80rem; /* ~1280px */
  --gutter: 1rem;
}
/* ================== Masthead (internal pages) ================== */
.masthead{
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;         /* fills on all viewports */
  background-position: 50% 30%;   /* adjust to taste */
  color: #fff;
}
.masthead::before{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,.15));
}
.masthead .container{
  position: relative;             /* sit above overlay */
  padding: clamp(28px, 7vw, 96px) var(--gutter);
}


/* Centered container helper (keeps content centered site-wide) */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ================== NAV: sticky + shrink ================== */
.navbar.jd-nav{
  position: sticky; top: 0; z-index: 1050;
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,.08);
  padding: 0;
  min-height: var(--nav-height);
  display: flex;
  transition: background .25s ease, box-shadow .25s ease, min-height .25s ease;
  overflow-anchor: none;
}
.navbar.jd-nav .container{
  min-height: inherit;
  display: flex; align-items: center; gap: 1rem;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.navbar.jd-nav .navbar-brand{ display:block; padding:0; margin:0; }
.navbar.jd-nav .navbar-brand img{ max-height: 100%; }

.jd-nav .jd-logo{
  height: calc(var(--nav-height) - 2 * var(--nav-logo-pad-y));
  width: auto; display: block;
}

.navbar.jd-nav .nav-link{
  padding: 0 1.05rem;
  text-transform: uppercase;
  letter-spacing: var(--nav-letterspace);
  font-size: var(--nav-font-size);
  font-weight: 700;
  line-height: 1;
  color: #6c757d;
}
.navbar.jd-nav .nav-link:hover,
.navbar.jd-nav .nav-link:focus,
.navbar.jd-nav .nav-link.active{ color:#111; }

.navbar.jd-nav.shrink{
  min-height: var(--nav-height-shrink);
  background: rgba(255,255,255,.95);
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
.navbar.jd-nav.shrink .jd-logo{
  height: calc(var(--nav-height-shrink) - 2 * var(--nav-logo-pad-y));
  transform: translateY(-1px);
  transition: height .25s ease, transform .25s ease;
}

/* ================== HERO (base = phones/tablets) ================== */
/* Background image defaults: desktop band look comes from responsive.css */
.home-hero{
  background-image: url("../img/Rainbow-Image-Edited-more-fade-black-panel.webp");
  background-repeat: no-repeat;
  background-size: contain;         /* desktop will keep “contain” */
  background-position: center bottom;
  /* no aspect-ratio here — mobile/tablet can grow naturally */
  width: 100%;
  background-color: #000;
}

/* Inner container */
.hero-inner{
  max-width: var(--container-max);
  margin: 0 auto;
  padding: clamp(16px, 3vw, 32px) var(--gutter);
}

/* Content rows — mobile/tablet default: STACKED */
.hero-row, .org-logos-row{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(12px, 2vw, 24px);
  margin-block: clamp(16px, 4vh, 40px);
}
.hero-gap{ display: none; } /* middle gap only exists on desktop grid */

.hero-photo{ margin: 0; }
.hero-photo-img{
  width:100%; height:auto; display:block;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
}
.hero-copy{
  border-top:1px solid rgba(255,255,255,.25);
  padding-top:1rem; max-width:34rem;
}

.hero-spacer{ block-size: clamp(12px, 4vh, 32px); }

/* Heron image (row 2) */
.heron{
  width: clamp(300px, 42vw, 680px);
  height: auto;
  filter: drop-shadow(0 0 3px rgba(0,0,0,.45));
  opacity: .95;
}

/* Fly-in animation */
.heron.heron--pre{ transform: translate3d(-160px,0,0) scale(.98); opacity: 0; }
@keyframes heronFlyIn{
  0%{ transform: translate3d(-160px,0,0) scale(.98); opacity:0; }
  60%{ opacity:.95; }
  100%{ transform: translate3d(0,0,0) scale(1); opacity:.95; }
}
.heron.heron--in{ animation: heronFlyIn 1.4s ease-out both; }

/*=============== ABOUT PAGE ========================*/
/* 1) Make the hero behave like a proper full-bleed banner */
.about-hero{
  /* add the variable + keep your existing URL */
  --about-hero-img: url("../img/Jo-and-Dog1800x900.webp");
  background-image: var(--about-hero-img);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center 95%;
  min-height: clamp(48vh, 62vh, 72vh);
  position: relative;
  z-index: 1;
}.about-hero .hero-inner{ height: 100%; }

/* 2) Put the panel on the right on desktop, centred on mobile */
.about-hero .hero-row{
  height: 100%;
  display: flex;
  flex-direction: column;   /* keep your existing structure */
  justify-content: center;
  align-items: center;      /* mobile: centred */
  gap: clamp(12px, 2vw, 24px);
  margin-block: clamp(16px, 4vh, 40px);
}

/* 3) Make the panel readable above the photo */
.about-hero-copy{
  max-width: 42rem;                         /* a bit wider for long lines */
  background: rgba(255,255,255,.88);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  padding: clamp(12px, 2.5vw, 24px);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  color: #111;
  border: 0;                                /* you had a white border-top; not needed now */
}

/* Optional: subtle veil to help legibility over busy photos */
.about-hero::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(to bottom, rgba(0,0,0,.10), rgba(0,0,0,.25));
  z-index: 0;
}
.about-hero .hero-row, .about-hero-copy{ position: relative; z-index: 2; }

/* Dark band section (full-width background behind the container) */
.section-dark{
  background-color: #141414;        /* the band */
  color: #e9ecef;                   /* default text colour inside */
}

/* Make headings truly white for contrast */
.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark .h5 { color: #fff; }

/* Fine-tune body text + rules on dark */
.section-dark p,
.section-dark li,
.section-dark .lead-tight { color: #dfe3e6; }

.section-dark hr{
  border: 0; height: 2px;
  background: rgba(255,255,255,.6);
  margin: 1rem 0 1.5rem;
}

/* Optional: image edge looks cleaner on dark */
.section-dark .about-figure img{
  box-shadow: 0 10px 24px rgba(0,0,0,.4);
  border: 1px solid rgba(255,255,255,.06);
}
.section-dark a{
  color: #fff;
  text-decoration-color: rgba(255,255,255,.45);
}
.section-dark a:hover{ text-decoration-color: rgba(255,255,255,.8); }


/* ================== “Benefits” logos ================== */
.org-logos img{
  width: clamp(160px, 70%, 320px);
  height: auto;
  display: block;
  margin: 0 0 1.25rem auto;
}
.org-logos hr{
  width: clamp(160px, 70%, 320px);
  margin: 1rem 0 1.5rem auto;
  opacity: .6;
}

/* ============ ABOUT PAGE LOGO PAIR ============ */
.about-logos .row {
  align-items: stretch;      /* make all columns equal height */
}

.about-logos .org-logos {
  display: flex;
  align-items: flex-end;     /* bottom align the image */
  justify-content: center;
}

.about-logos .org-logos img {
  width: 220px;              /* consistent width */
  height: auto;
  display: block;
}

/* ================== Lists / small tweaks ================== */
.icon-bullet{ list-style: none; padding-left: 0; }
.icon-bullet li{ position: relative; padding-left: 2rem; margin-bottom: .5rem; }
.icon-bullet li::before{ content:"•"; position:absolute; left:0; top:0; font-weight:700; }
.section-pad.bg-light{ background-color:#f8f9fa; }

/* Home — Benefits list (no bullets) */
.benefits-list .icon-bullet{ list-style: none; padding-left: 0; margin: 0; }
.benefits-list .icon-bullet li{ padding-left: 0; margin-bottom: .6rem; }
.benefits-list .icon-bullet li::before{ content: none; }


/* ================== Footer scenic band ================== */
.footer-bg, .footer-scenic{
  aspect-ratio: 1800 / 370;
  background-image: url("../img/Mountain-Image-1800x370px.webp");
  background-size: contain;
  background-position: center bottom;
  background-color: transparent;
  position: relative;
  overflow: hidden;
}
.footer-bg::before, .footer-scenic::before{
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: clamp(80px, 12vw, 180px);
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.95) 0%,
    rgba(255,255,255,0.70) 35%,
    rgba(255,255,255,0.00) 100%
  );
}

/* ================== Buttons ================== */
.btn-swap{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  padding:.6rem 1.1rem;
  border:1px solid rgba(0,0,0,.45);
  background:rgba(0,0,0,.06);
  color:#222; text-decoration:none;
  letter-spacing:.28em; font-weight:300;
  overflow:hidden;
  transition:background .28s ease, border-color .28s ease, color .28s ease;
}
.btn-swap::after{
  content:attr(data-hover);
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform:translateY(4px);
  transition:opacity .28s ease, transform .28s ease;
  pointer-events:none;
}
.btn-swap:hover::after,
.btn-swap:focus-visible::after{ opacity:1; transform:translateY(0) }
.btn-swap:hover{ background:rgba(0,0,0,.08) }
.btn-swap:focus-visible{ outline:2px solid #000; outline-offset:2px }

/* Back to top + smooth scroll */
html { scroll-behavior: smooth; }
.btn-top.is-fab{
  position:fixed; right:1rem; bottom:1rem; z-index:1000; border-radius:.5rem;
}