/* =========================================================================
   Willow Bank Fishery, example site built by The Landing Net
   Deliberately a completely different look to thelandingnet.co.uk:
   light, warm and outdoorsy rather than dark green. The point of the demo
   is to show that every build is tailored, not templated.
   ========================================================================= */

:root {
  --paper: #faf6ee;
  --paper-2: #f2ebdd;
  --paper-3: #e8dfcc;
  --ink: #10333c;
  --ink-2: #2c5560;
  --ink-soft: #5b7a83;
  --teal: #1d6b7a;
  --teal-deep: #0e3a45;
  --amber: #cf7a1c;
  --amber-soft: #f0a53f;
  --moss: #5d8a3f;
  --rust: #b1462f;

  --line: #ddd2bb;
  --line-soft: #e7ddc9;

  --slab: "Bitter", Georgia, "Times New Roman", serif;
  --sans: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --wrap: 1160px;
  --gutter: clamp(18px, 4.5vw, 36px);
  --radius: 14px;
  --radius-lg: 22px;
  --shadow: 0 18px 40px -22px rgba(16, 51, 60, 0.45);
  --shadow-lg: 0 30px 70px -30px rgba(16, 51, 60, 0.55);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--teal); }

h1, h2, h3, h4 {
  font-family: var(--slab); color: var(--ink);
  font-weight: 700; line-height: 1.15; margin: 0 0 .5em;
  letter-spacing: -0.01em; text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }
h4 { font-size: 1.02rem; }
p { margin: 0 0 1.05em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
strong { color: var(--ink); font-weight: 600; }
::selection { background: var(--amber-soft); color: var(--teal-deep); }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; border-radius: 3px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--amber); color: #fff; padding: 12px 20px; font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 780px; }
.section { padding: clamp(52px, 7vw, 92px) 0; }
.section--tight { padding: clamp(36px, 5vw, 60px) 0; }
.section--paper2 { background: var(--paper-2); }
.section--dark { background: var(--teal-deep); color: rgba(255,255,255,.82); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; }

.head { max-width: 660px; margin-bottom: clamp(28px, 4vw, 46px); }
.head--center { margin-inline: auto; text-align: center; }
.head p { color: var(--ink-soft); font-size: 1.05rem; }

.kicker {
  display: inline-block;
  font-size: .74rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--amber); margin-bottom: 12px;
}
.section--dark .kicker { color: var(--amber-soft); }
.lede { font-size: clamp(1.05rem, 1.8vw, 1.2rem); color: var(--ink-2); }
.muted { color: var(--ink-soft); }
.center { text-align: center; }
.mt-s { margin-top: 14px; } .mt-m { margin-top: 26px; } .mt-l { margin-top: 44px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--sans); font-size: .96rem; font-weight: 600;
  padding: 13px 26px; border-radius: 8px; border: 2px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--amber); color: #fff; }
.btn--primary:hover { background: #b96a13; }
.btn--outline { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn--outline:hover { background: var(--ink); color: var(--paper); }
.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { background: var(--paper-2); }
.btn--ghost-light { border-color: rgba(255,255,255,.45); color: #fff; }
.btn--ghost-light:hover { background: rgba(255,255,255,.12); }
.btn--sm { padding: 9px 18px; font-size: .87rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.head--center .btn-row { justify-content: center; }

.tlink {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--teal); font-weight: 600; text-decoration: none;
  border-bottom: 2px solid rgba(29,107,122,.3); padding-bottom: 2px;
}
.tlink:hover { border-color: var(--teal); }

/* =========================================================================
   Routes back to The Landing Net
   The demo has to sell the agency, not the fictional fishery, so there is a
   persistent way out from anywhere on the page plus a closing band in the
   agency's own brand colours (deep green + gold) rather than the fishery's.
   ========================================================================= */
.return-pill {
  position: fixed; right: 20px; bottom: 20px; z-index: 80;
  display: inline-flex; align-items: center; gap: 9px;
  background: #032e25; color: #fff; text-decoration: none;
  border: 1px solid rgba(233, 184, 114, .45);
  border-radius: 999px; padding: 12px 20px;
  font-size: .87rem; font-weight: 600; line-height: 1;
  box-shadow: 0 16px 36px -12px rgba(0, 0, 0, .65);
  transition: background .22s var(--ease), border-color .22s var(--ease), transform .22s var(--ease);
}
.return-pill svg { flex-shrink: 0; transition: transform .22s var(--ease); }
.return-pill:hover { background: #e9b872; color: #032e25; border-color: #e9b872; transform: translateY(-2px); }
.return-pill:hover svg { transform: translateX(-3px); }
@media (max-width: 620px) {
  .return-pill {
    left: 12px; right: 12px; bottom: 12px;
    justify-content: center; padding: 13px 18px;
  }
}
@media print { .return-pill { display: none; } }

.demo-cta {
  background: #032e25; color: rgba(255, 255, 255, .78);
  padding: clamp(48px, 7vw, 82px) 0;
  text-align: center; position: relative; overflow: hidden;
}
.demo-cta::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(50% 70% at 50% 0%, rgba(233, 184, 114, .14), transparent 70%);
}
.demo-cta .wrap { position: relative; }
.demo-cta .kicker { color: #e9b872; }
.demo-cta h2 {
  color: #fff;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
}
.demo-cta p { color: rgba(255, 255, 255, .72); max-width: 54ch; margin-inline: auto; }
.demo-cta .btn-row { justify-content: center; margin-top: 26px; }
.demo-cta .btn--gold { background: #e9b872; color: #032e25; border-radius: 999px; }
.demo-cta .btn--gold:hover { background: #f4cd8a; }
.demo-cta .btn--wire {
  border-color: rgba(255, 255, 255, .28); color: #fff; border-radius: 999px;
}
.demo-cta .btn--wire:hover { background: rgba(255, 255, 255, .1); }
.demo-cta .logo-strip {
  display: block; height: 58px; width: auto; margin: 0 auto 22px; opacity: .95;
}

/* ---------- Live weather bar ----------
   Conditions at the lake, pulled from Open-Meteo. Hidden until real data
   arrives, so a failed request or JS being off leaves no empty strip. */
.weather-bar {
  background: #10333c; color: rgba(255, 255, 255, .85);
  font-size: .84rem; padding: 9px 0;
  position: relative; z-index: 60;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.weather-bar[hidden] { display: none; }
.weather-bar .wrap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 6px 22px;
}
.wx-item { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.wx-item svg { flex-shrink: 0; color: var(--amber-soft); }
.wx-item b { color: #fff; font-weight: 600; }
.wx-label { color: rgba(255, 255, 255, .55); }
.wx-place { font-weight: 600; color: #fff; }
.wx-place::after {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 10px;
  border-radius: 50%; background: #7fc45f; vertical-align: middle;
}
@media (max-width: 700px) {
  .weather-bar { font-size: .8rem; padding: 8px 0; }
  .weather-bar .wrap { gap: 4px 14px; }
  .wx-hide-sm { display: none; }
}

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250, 246, 238, .93);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 74px; }

.logo { display: flex; align-items: center; gap: 11px; text-decoration: none; flex-shrink: 0; }
.logo-mark {
  width: 42px; height: 42px; border-radius: 11px; flex-shrink: 0;
  background: var(--teal-deep); display: grid; place-items: center; color: var(--amber-soft);
}
.logo-text { display: grid; line-height: 1.1; }
.logo-text b { font-family: var(--slab); font-size: 1.12rem; color: var(--ink); font-weight: 700; letter-spacing: -.01em; }
.logo-text span { font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; }

.nav { display: flex; align-items: center; gap: 2px; }
.nav a {
  text-decoration: none; color: var(--ink-2); font-size: .93rem; font-weight: 500;
  padding: 8px 13px; border-radius: 7px;
}
.nav a:hover { background: var(--paper-3); color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); font-weight: 700; box-shadow: inset 0 -3px 0 var(--amber); border-radius: 7px 7px 0 0; }
.header-cta { display: flex; align-items: center; gap: 10px; }

.burger {
  display: none; width: 42px; height: 42px; align-items: center; justify-content: center;
  background: transparent; border: 2px solid var(--line); border-radius: 9px; cursor: pointer; color: var(--ink);
}
.burger span { display: block; width: 17px; height: 2px; background: currentColor; position: relative; }
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 17px; height: 2px; background: currentColor;
  transition: transform .25s var(--ease);
}
.burger span::before { top: -6px; } .burger span::after { top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1000px) {
  .burger { display: inline-flex; }
  .header-cta .btn { display: none; }
  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--paper); border-bottom: 1px solid var(--line);
    padding: 14px var(--gutter) 22px;
    box-shadow: var(--shadow);
    opacity: 0; transform: translateY(-8px); pointer-events: none;
    transition: opacity .22s var(--ease), transform .22s var(--ease);
    max-height: calc(100vh - 120px); overflow-y: auto;
  }
  .nav.open { opacity: 1; transform: none; pointer-events: auto; }
  .nav a { padding: 13px; font-size: 1.02rem; }
  .nav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--amber); border-radius: 7px; }
  .nav .btn { display: inline-flex; margin-top: 12px; }
}
.nav .btn { display: none; }

/* ---------- Photographs ----------
   Each photo sits on top of the SVG illustration it replaces. If the JPG is
   missing the img removes itself (see the onerror attribute) and the drawing
   underneath shows through, so the page never renders broken. */
.ph { position: relative; overflow: hidden; }
.ph > svg, .ph > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ph > img { z-index: 1; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; background: var(--teal-deep); }
.hero-scene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-photo, .banner-photo {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
}
/* Scrim so copy stays readable over the bright dawn band, and over a real
   photograph later, whatever its exposure. */
.hero::after, .banner::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg,
    rgba(8, 38, 47, .88) 0%, rgba(8, 38, 47, .74) 34%,
    rgba(8, 38, 47, .38) 62%, rgba(8, 38, 47, .12) 100%);
}
@media (max-width: 780px) {
  .hero::after, .banner::after {
    background: linear-gradient(180deg, rgba(8, 38, 47, .82) 0%, rgba(8, 38, 47, .62) 60%, rgba(8, 38, 47, .78) 100%);
  }
}
.hero-inner {
  position: relative; z-index: 2;
  padding: clamp(64px, 11vw, 132px) 0 clamp(52px, 8vw, 96px);
  color: #fff;
}
.hero h1 { color: #fff; max-width: 15ch; text-shadow: 0 2px 24px rgba(6,33,42,.5); }
.hero p { max-width: 46ch; font-size: clamp(1.05rem, 2vw, 1.24rem); color: rgba(255,255,255,.9); }
.hero .btn-row { margin-top: 28px; }

.hero-facts {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: #fff; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  margin-bottom: -46px;
  overflow: hidden;
}
.hero-facts > div { padding: 20px 22px; border-right: 1px solid var(--line-soft); }
.hero-facts > div:last-child { border-right: 0; }
.hero-facts b { display: block; font-family: var(--slab); font-size: 1.35rem; color: var(--ink); line-height: 1.1; }
.hero-facts span { font-size: .82rem; color: var(--ink-soft); }
@media (max-width: 780px) {
  .hero-facts { grid-template-columns: repeat(2, 1fr); }
  .hero-facts > div:nth-child(2) { border-right: 0; }
  .hero-facts > div:nth-child(-n+2) { border-bottom: 1px solid var(--line-soft); }
}

/* Page banner for inner pages */
.banner { background: var(--teal-deep); color: #fff; position: relative; overflow: hidden; }
.banner .hero-scene { opacity: .9; }
.banner-inner { position: relative; z-index: 2; padding: clamp(46px, 7vw, 86px) 0; }
.banner h1 { color: #fff; margin-bottom: .3em; }
.banner p { color: rgba(255,255,255,.85); max-width: 56ch; }
.crumbs { font-size: .84rem; color: rgba(255,255,255,.62); margin-bottom: 14px; }
.crumbs a { color: rgba(255,255,255,.82); text-decoration: none; }
.crumbs a:hover { color: #fff; text-decoration: underline; }

/* ---------- Cards & grids ---------- */
.grid { display: grid; gap: 22px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 940px) { .g3, .g4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } }

.card {
  background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.card-body { padding: 22px; flex: 1; display: flex; flex-direction: column; }
.card-body h3 { margin-bottom: 8px; }
.card-body p { color: var(--ink-soft); font-size: .96rem; }
.card-body .tlink { margin-top: auto; padding-top: 14px; align-self: flex-start; }
.card-art { aspect-ratio: 16 / 10; background: var(--paper-3); position: relative; }
.card-art svg { width: 100%; height: 100%; }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
}
.pill--open { background: #e4f0da; color: #3f6b25; }
.pill--few { background: #fdeccd; color: #8a5410; }
.pill--full { background: #f8dcd6; color: #963421; }
.pill--live { background: #d9ecef; color: #10606f; }
.pill--amber { background: #fdeccd; color: #8a5410; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 60px); align-items: center; }
.split--wide { grid-template-columns: 1.1fr .9fr; }
@media (max-width: 900px) { .split, .split--wide { grid-template-columns: 1fr; } }

.panel {
  background: #fff; border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg); padding: clamp(22px, 3.5vw, 34px);
  box-shadow: var(--shadow);
}
.panel--flat { box-shadow: none; }

/* ---------- Lists ---------- */
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.ticks li { position: relative; padding-left: 30px; font-size: .97rem; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 4px; width: 19px; height: 19px; border-radius: 50%;
  background: #e4f0da url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235d8a3f' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px no-repeat;
}
.ticks--2 { grid-template-columns: 1fr 1fr; gap: 11px 26px; }
@media (max-width: 700px) { .ticks--2 { grid-template-columns: 1fr; } }

.crosses li::before {
  background: #f8dcd6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23963421' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E") center/10px no-repeat;
}

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
/* Wide enough that cells stay on one line; the wrapper scrolls on narrow screens. */
table { width: 100%; border-collapse: collapse; min-width: 660px; }
th:first-child, td:first-child { white-space: nowrap; }
caption { text-align: left; padding: 16px 18px 0; font-weight: 600; color: var(--ink-soft); font-size: .9rem; }
th, td { padding: 13px 18px; text-align: left; border-bottom: 1px solid var(--line-soft); font-size: .95rem; }
thead th {
  background: var(--paper-2); color: var(--ink);
  font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700;
  border-bottom: 2px solid var(--line);
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fdfbf7; }
td .price { font-family: var(--slab); font-weight: 700; color: var(--ink); font-size: 1.02rem; }
.num { text-align: right; }

/* Live-data marker */
.live-note {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .8rem; color: var(--teal); background: #e2eff2;
  border: 1px dashed rgba(29,107,122,.4);
  padding: 7px 14px; border-radius: 999px; margin-bottom: 16px;
}
.live-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--moss);
  box-shadow: 0 0 0 0 rgba(93,138,63,.7); animation: pulse 2.2s infinite;
}
@keyframes pulse {
  70% { box-shadow: 0 0 0 7px rgba(93,138,63,0); }
  100% { box-shadow: 0 0 0 0 rgba(93,138,63,0); }
}

/* ---------- Lake plan ---------- */
.lake { background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 26px; }
.lake-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  padding: 20px 24px; border-bottom: 1px solid var(--line-soft); background: var(--paper-2);
}
.lake-head h3 { margin: 0; }
.lake-grid { display: grid; grid-template-columns: 1.25fr .75fr; }
@media (max-width: 860px) { .lake-grid { grid-template-columns: 1fr; } }
.lake-plan { padding: 18px; background: #f4faf9; border-right: 1px solid var(--line-soft); }
@media (max-width: 860px) { .lake-plan { border-right: 0; border-bottom: 1px solid var(--line-soft); } }
.lake-info { padding: 24px; }
.spec { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 0; }
.spec li { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px dashed var(--line); font-size: .94rem; }
.spec li:last-child { border-bottom: 0; }
.spec dt, .spec .k { color: var(--ink-soft); }
.spec .v { color: var(--ink); font-weight: 600; text-align: right; }

/* ---------- News ---------- */
.post-art { aspect-ratio: 16/9; }
.meta { font-size: .8rem; color: var(--ink-soft); letter-spacing: .04em; text-transform: uppercase; font-weight: 600; margin-bottom: 8px; }
.post { border-bottom: 1px solid var(--line-soft); padding: 26px 0; }
.post:first-of-type { padding-top: 0; }
.post:last-child { border-bottom: 0; }
.post h3 { margin-bottom: 6px; }
.post p { color: var(--ink-soft); font-size: .96rem; }

/* ---------- Gallery ---------- */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 860px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
.gallery figure { margin: 0; border-radius: var(--radius); overflow: hidden; aspect-ratio: 1; background: var(--paper-3); }
.gallery svg { width: 100%; height: 100%; }

/* ---------- Find us ---------- */
.map-frame { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: #eaf2ee; }
.map-frame svg { width: 100%; height: auto; display: block; }
.dir-list { counter-reset: step; list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.dir-list li { position: relative; padding-left: 46px; }
.dir-list li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: -2px;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--teal-deep); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: .9rem;
}

/* ---------- CTA ---------- */
.cta { background: var(--teal-deep); color: #fff; text-align: center; padding: clamp(48px, 7vw, 84px) 0; position: relative; overflow: hidden; }
.cta h2 { color: #fff; }
.cta p { color: rgba(255,255,255,.82); max-width: 52ch; margin-inline: auto; }
.cta .btn-row { justify-content: center; margin-top: 26px; }

/* ---------- Footer ---------- */
.site-footer { background: #0b2a33; color: rgba(255,255,255,.68); padding: clamp(44px, 6vw, 70px) 0 26px; font-size: .93rem; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: clamp(24px, 4vw, 44px); padding-bottom: 36px; }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: 1fr; } }
.site-footer h4 { color: #fff; font-family: var(--sans); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 14px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.site-footer a { color: rgba(255,255,255,.78); text-decoration: none; }
.site-footer a:hover { color: var(--amber-soft); }
.site-footer .logo-text b { color: #fff; }
.site-footer .logo-text span { color: rgba(255,255,255,.5); }
.foot-bottom {
  border-top: 1px solid rgba(255,255,255,.14); padding-top: 22px;
  display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: space-between;
  font-size: .84rem; color: rgba(255,255,255,.5);
}
.socials { display: flex; gap: 9px; margin-top: 14px; }
.socials a {
  width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.8);
}
.socials a:hover { background: var(--amber); border-color: var(--amber); color: #fff; }

/* The return pill is fixed to the bottom of the screen on narrow viewports, so
   the footer needs clearance or its last line sits permanently underneath it.
   Declared after .site-footer's padding shorthand so it actually wins. */
@media (max-width: 620px) {
  .site-footer { padding-bottom: 88px; }
}

/* ---------- Reveal ---------- */
.js .rv { opacity: 0; transform: translateY(16px); }
.js .rv.in { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .6s var(--ease); }
@media (prefers-reduced-motion: reduce) { .js .rv { opacity: 1; transform: none; } }