/* ============================================================
   whitbytourism.ca — interim landing page
   Consolidated stylesheet: brand tokens (brand book v1.0, July
   2026) + page structure + final variant styling.
   Source of truth during design: Landing Page/explorations/
   ============================================================ */

/* Whitby Tourism — shared brand tokens
   Derived from WhitbyTourism_BrandBook_V2-1.pdf (v1.0, July 2026) */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap');

:root {
  /* 2.1 Palette — Primary */
  --blue:        #182856;
  --turquoise:   #00B2A9;
  --green:       #BFD330;
  --orange:      #F16A29;
  --pink:        #C53091;

  /* 2.1 Palette — Secondary (15% tints) */
  --blue-15:     #D8D9E5;
  --turquoise-15:#DFF1EF;
  --green-15:    #F7F8DE;
  --orange-15:   #FDE6DC;
  --pink-15:     #F7E0EC;

  --black:       #000000;
  --white:       #FFFFFF;

  /* 3.2 Type proportions — headline 100 / subhead 40 / url 20, tracking -25 */
  --track:       -0.025em;
  --lead-head:   0.8;
  --lead-sub:    0.9;

  --gutter:      clamp(1.25rem, 4vw, 4.5rem);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--blue);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

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

/* 5.1 — black multiplied over photography at 15–30% for legibility */
.overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--black);
  opacity: var(--tint, 0.24);
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* Headline system per 3.2 */
.h-display {
  font-weight: 500;
  letter-spacing: var(--track);
  line-height: var(--lead-head);
  margin: 0;
}

.h-sub {
  font-weight: 500;
  letter-spacing: var(--track);
  line-height: var(--lead-sub);
  margin: 0;
}

.eyebrow {
  font-weight: 500;
  font-size: clamp(0.7rem, 0.9vw, 0.85rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-weight: 500;
  font-size: clamp(0.9rem, 1.05vw, 1.05rem);
  letter-spacing: -0.01em;
  text-decoration: none;
  padding: 0.95em 1.9em;
  border-radius: 999px;
  border: 1.5px solid transparent;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}
.btn-solid  { background: var(--white); color: var(--blue); }
.btn-solid:hover  { background: var(--turquoise); color: var(--white); }
.btn-ghost  { border-color: rgba(255,255,255,0.75); color: var(--white); }
.btn-ghost:hover  { background: rgba(255,255,255,0.14); border-color: var(--white); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* Whitby Tourism — Option C scaffold, shared structure
   Copy: WhitbyTourism_LandingPage_Copy.pdf (deck order, interim notice
   moved up to a slim banner per the deck's own short alternate).
   Type/colour: brand book v1.0 July 2026. */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.skip {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--white); color: var(--blue);
  padding: 0.8em 1.4em; font-weight: 500; text-decoration: none;
}
.skip:focus { left: 0; }

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

/* ---------- Nav ---------- */
.nav {
  position: absolute; inset: 0 0 auto 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(1.25rem, 2.4vw, 2.25rem) var(--gutter);
}
/* children get the z-index, not .nav itself: a stacking context on .nav
   would trap the logo's screen blend and render its black box */
.nav img, .nav-links { position: relative; z-index: 4; }
.nav img { width: clamp(150px, 14vw, 215px); height: auto; }
.nav-links { display: flex; gap: clamp(1.1rem, 2.4vw, 2.5rem); flex-wrap: wrap; }
.nav-links a {
  color: var(--white); text-decoration: none;
  font-weight: 500; font-size: 0.95rem; letter-spacing: -0.01em; opacity: 0.9;
}
.nav-links a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 6px; }

/* Interim page: the links only anchor within this one page, so on small
   screens they are noise — the logo carries the header alone. Restore a
   real (hamburger) nav when the full site gives it destinations. */
@media (max-width: 720px) {
  .nav-links { display: none; }
}

/* ---------- Hero (kinetic rotator) ---------- */
.hero {
  position: relative; isolation: isolate;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(7rem, 14vh, 10rem) var(--gutter) clamp(2.5rem, 5vh, 4.5rem);
  overflow: hidden;
  background: var(--blue);
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; animation: bgfade 20s infinite;
}
.hero-media img:nth-child(1) { animation-delay:  0s; opacity: 1; }
.hero-media img:nth-child(2) { animation-delay:  5s; }
.hero-media img:nth-child(3) { animation-delay: 10s; }
.hero-media img:nth-child(4) { animation-delay: 15s; }
@keyframes bgfade {
  0% { opacity: 0; transform: scale(1.06); }
  3% { opacity: 1; }
  22% { opacity: 1; }
  25% { opacity: 0; }
  100% { opacity: 0; transform: scale(1.12); }
}

/* Legibility scrim on top of the book's 15-30% multiply (.overlay).
   DEVIATION from 5.1, required because the photo rotates under fixed
   white text. Needs sign-off. */
.hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(24,40,86,0.55) 0%, rgba(24,40,86,0) 22%),
    linear-gradient(to top, rgba(24,40,86,0.72) 0%, rgba(24,40,86,0.28) 45%, rgba(24,40,86,0) 75%),
    linear-gradient(to right, rgba(24,40,86,0.55) 0%, rgba(24,40,86,0) 55%);
}

.hero-content { position: relative; z-index: 4; color: var(--white); }
.hero .eyebrow { opacity: 0.85; margin-bottom: clamp(0.9rem, 1.6vh, 1.4rem); }
.hero h1 { font-size: clamp(3.6rem, 12.5vw, 12rem); }

.rot-wrap { display: block; position: relative; height: 0.8em; } /* 3.2: leading = 0.8 x size */
.rot-wrap span {
  position: absolute; inset: 0; opacity: 0;
  animation: wordfade 20s infinite; white-space: nowrap;
}
.rot-wrap span:nth-child(1) { color: var(--w1, var(--white)); animation-delay:  0s; opacity: 1; }
.rot-wrap span:nth-child(2) { color: var(--w2, var(--white)); animation-delay:  5s; }
.rot-wrap span:nth-child(3) { color: var(--w3, var(--white)); animation-delay: 10s; }
.rot-wrap span:nth-child(4) { color: var(--w4, var(--white)); animation-delay: 15s; }
@keyframes wordfade {
  0% { opacity: 0; transform: translateY(0.14em); }
  3% { opacity: 1; transform: translateY(0); }
  22% { opacity: 1; transform: translateY(0); }
  25% { opacity: 0; transform: translateY(-0.1em); }
  100% { opacity: 0; }
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.hero-foot {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: clamp(2rem, 5vw, 5rem); flex-wrap: wrap;
  /* floor the gap at 0.3x the headline size: the rotating word's descenders
     (g/p/y) hang ~0.22em below their line box, and a vh-based margin alone
     lets short viewports close that gap into an overlap */
  margin-top: max(clamp(1.75rem, 4vh, 3rem), calc(clamp(3.6rem, 12.5vw, 12rem) * 0.3));
}
.hero-foot .h-sub { font-size: clamp(1.5rem, 3vw, 2.75rem); max-width: 14ch; }
.hero-standfirst {
  font-weight: 300; font-size: clamp(0.98rem, 1.25vw, 1.18rem);
  line-height: 1.5; letter-spacing: -0.005em;
  max-width: 36ch; margin: 0.9rem 0 0; opacity: 0.92;
}
.hero-ctas { display: flex; gap: 0.85rem; flex-wrap: wrap; }

/* ---------- Interim notice (deck s.4, slim-banner alternate) ---------- */
.banner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 0.35em 0.5em; text-align: center;
  padding: clamp(0.85rem, 1.8vh, 1.2rem) var(--gutter);
  font-size: clamp(0.9rem, 1.05vw, 1.02rem); font-weight: 400;
}
.banner strong { font-weight: 500; }
.banner a { color: inherit; font-weight: 500; text-underline-offset: 4px; }

/* ---------- Sections ---------- */
.section { padding: clamp(4.5rem, 11vh, 8.5rem) var(--gutter); }
.wrap-n { max-width: 62rem; margin: 0 auto; }
.wrap-w { max-width: 84rem; margin: 0 auto; }

.sec-kicker {
  font-weight: 500; font-size: clamp(0.7rem, 0.9vw, 0.85rem);
  letter-spacing: 0.18em; text-transform: uppercase;
  margin: 0 0 clamp(1rem, 2vh, 1.5rem); opacity: 0.65;
  display: flex; align-items: center; gap: 0.9em;
}
.sec-h2 {
  font-weight: 500; letter-spacing: var(--track); line-height: 0.95;
  font-size: clamp(2rem, 4.6vw, 3.9rem);
  margin: 0 0 clamp(1.5rem, 3.5vh, 2.5rem); max-width: 18ch;
}
.sec-h3 {
  font-weight: 500; letter-spacing: var(--track); line-height: 1.05;
  font-size: clamp(1.35rem, 2.2vw, 1.9rem);
  margin: 0 0 1rem; max-width: 26ch;
}
.body-copy p {
  font-weight: 300; font-size: clamp(1.02rem, 1.3vw, 1.25rem);
  line-height: 1.68; letter-spacing: -0.005em;
  margin: 0 0 1.35em; max-width: 56ch;
}
.body-copy p:last-child { margin-bottom: 0; }
.body-copy strong { font-weight: 500; }
.sec-lede {
  font-weight: 300; font-size: clamp(1.02rem, 1.3vw, 1.25rem);
  margin: 0 0 clamp(2rem, 4.5vh, 3.25rem);
}

/* Buttons on section grounds */
.btn-a { background: var(--blue); color: var(--white); }
.btn-a:hover { background: var(--turquoise); color: var(--white); }
.btn-b { border-color: var(--blue); color: var(--blue); }
.btn-b:hover { background: var(--blue); color: var(--white); }

/* ---------- Tiles ---------- */
.tiles {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.1rem, 2.2vw, 2rem);
}
@media (max-width: 1100px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .tiles { grid-template-columns: 1fr; } }

.tile { display: block; text-decoration: none; color: inherit; position: relative; }
.tile-media {
  position: relative; margin: 0; overflow: hidden; border-radius: 4px;
}
.tile-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 400ms ease;
}
.tile:hover .tile-media img { transform: scale(1.04); }
.tile h3 {
  font-weight: 500; letter-spacing: var(--track); line-height: 1;
  font-size: clamp(1.5rem, 2vw, 1.95rem); margin: 0 0 0.5rem;
}
.tile p {
  font-weight: 300; font-size: 0.98rem; line-height: 1.55;
  margin: 0 0 0.9rem;
}
.tile-cta {
  font-weight: 500; font-size: 0.95rem; letter-spacing: -0.01em;
  display: inline-flex; align-items: center; gap: 0.4em;
}
.tile:hover .tile-cta { text-decoration: underline; text-underline-offset: 5px; }
.ext { font-size: 0.85em; display: inline-block; } /* inline-block: exempt from the
   label's underline, so hover decoration stops cleanly at the text */

/* Split cards: photo, then text below */
.tiles--split .tile-media { aspect-ratio: 4 / 3; }
.tiles--split .tile-text { padding: 1.1rem 0.2rem 0; }

/* Overlay cards: text on the photo */
.tiles--overlay .tile { border-radius: 4px; overflow: hidden; }
.tiles--overlay .tile-media { aspect-ratio: 4 / 5; border-radius: 0; }
.tiles--overlay .tile-media::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(24,40,86,0.88) 0%, rgba(24,40,86,0.35) 45%, rgba(24,40,86,0.05) 70%);
}
.tiles--overlay .tile-text {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: clamp(1.1rem, 2vw, 1.6rem); color: var(--white);
}

/* ---------- About ---------- */
.about-grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2.5rem, 6vw, 5.5rem); align-items: center;
}
@media (max-width: 900px) { .about-grid { grid-template-columns: 1fr; } }

/* ---------- Sports ---------- */
.sports-sub {
  font-weight: 500; letter-spacing: var(--track);
  font-size: clamp(1.2rem, 1.9vw, 1.7rem); margin: 0 0 1.5rem;
}
.sports-grid {
  display: grid; grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start;
}
@media (max-width: 980px) { .sports-grid { grid-template-columns: 1fr; } }
.facility-card {
  border: 1px solid rgba(255,255,255,0.22); border-radius: 6px;
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
}
.facility-card h3 {
  font-weight: 500; font-size: 1.05rem; letter-spacing: 0.02em;
  margin: 0 0 1.1rem;
}
.facility-card ul { margin: 0; padding: 0; list-style: none; }
.facility-card li {
  font-weight: 300; font-size: 1rem; line-height: 1.5;
  padding: 0.55em 0; border-bottom: 1px solid rgba(255,255,255,0.14);
}
.facility-card li:last-child { border-bottom: 0; }
.support-line {
  font-size: 0.98rem; font-weight: 400; line-height: 1.6;
  padding: 0.9em 1.2em; border-left: 3px solid var(--turquoise);
  background: rgba(255,255,255,0.07); border-radius: 0 4px 4px 0;
  margin: 1.75rem 0; max-width: 52ch;
}
.support-line a { color: inherit; }
.sports-ctas { display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: center; margin-top: 1.5rem; }
.contact-line { font-size: 0.95rem; font-weight: 300; margin: 1rem 0 0; }
.contact-line a { color: inherit; font-weight: 500; }
.between { margin-top: clamp(3rem, 7vh, 5rem); padding-top: clamp(2.5rem, 5vh, 3.5rem); border-top: 1px solid rgba(255,255,255,0.18); }
.operators { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.5rem; padding: 0; list-style: none; }
.operators a {
  display: inline-block; text-decoration: none; color: inherit;
  font-size: 0.92rem; font-weight: 400;
  padding: 0.55em 1.1em; border: 1px solid rgba(255,255,255,0.3); border-radius: 999px;
  transition: background 160ms ease, color 160ms ease;
}
.operators a:hover { background: var(--white); color: var(--blue); }

/* ---------- Partners ---------- */
.grant-card {
  border-radius: 6px; padding: clamp(1.75rem, 3vw, 2.75rem);
  margin-top: clamp(2rem, 4vh, 3rem);
}
.grant-card .body-copy p { max-width: 60ch; }
.grant-ctas { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 1.5rem; }

/* ---------- Connect ---------- */
.connect-inner { max-width: 46rem; margin: 0 auto; text-align: center; }
.connect-inner .sec-h2, .connect-inner .body-copy p { margin-left: auto; margin-right: auto; }
.connect-ctas { display: flex; flex-wrap: wrap; gap: 0.85rem; justify-content: center; margin-top: 2rem; }

/* ---------- Footer ---------- */
.foot {
  background: var(--blue); color: var(--white);
  padding: clamp(3.5rem, 8vh, 5.5rem) var(--gutter) clamp(2rem, 4vh, 3rem);
}
.foot-grid {
  max-width: 84rem; margin: 0 auto;
  display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: 2.5rem; align-items: flex-start;
}
.foot-logo { width: clamp(130px, 12vw, 180px); height: auto; }
.foot-org { font-weight: 300; font-size: 0.98rem; line-height: 1.7; }
.foot-org strong { font-weight: 500; display: block; margin-bottom: 0.35rem; }
.foot a { color: inherit; text-underline-offset: 4px; }
.foot-meta {
  max-width: 84rem; margin: 3rem auto 0; padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.18);
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between;
  font-size: 0.85rem; font-weight: 300; opacity: 0.8;
}
.foot-meta a { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .hero-media img, .rot-wrap span { animation: none; }
  .hero-media img:not(:first-child), .rot-wrap span:not(:first-child) { opacity: 0; }
  .hero-media img:first-child, .rot-wrap span:first-child { opacity: 1; }
  .tile:hover .tile-media img { transform: none; }
}

/* ---------- Page components ---------- */

/* Editorial image positioning hook: set --pos per image to fix crops */
.tile-media img { object-position: var(--pos, 50% 50%); }



/* Full-saturation highlighter chips for light grounds — the dark theme's
   accent words translated to white pages with AA intact:
   navy text on turquoise 5.4:1 / orange 4.6:1 / green 8.5:1; white on pink 5.0:1 */
.pop { font-weight: 500; padding: 0.04em 0.24em; border-radius: 4px;
       -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.pop-t { background: var(--turquoise); color: var(--blue); }
.pop-o { background: var(--orange);    color: var(--blue); }
.pop-g { background: var(--green);     color: var(--blue); }
.pop-p { background: var(--pink);      color: var(--white); }

/* ---------- Final variant (light theme, black overlays) ---------- */
/* ============================================================
   C3a GRID x LIGHT — About on turquoise-15 (the water section), ends on blue-15
   Restricted palette: white page, navy type; the only tints are
   blue-15 and turquoise-15. Banner goes navy so full-sat
   turquoise stays a micro-accent, not a band.
   ============================================================ */
:root { --w1:#fff; --w2:var(--orange); --w3:var(--green); --w4:var(--turquoise); }
body { background: var(--white); color: var(--blue); }
.banner { background: var(--blue); color: var(--white); }
.s-intro, .s-tiles, .s-partners { background: var(--white); color: var(--blue); }
.s-about { background: var(--turquoise-15); color: var(--blue); }
.s-sports { background: var(--blue); color: var(--white); }
.s-connect { background: var(--blue-15); color: var(--blue); }
.grant-card { background: var(--blue-15); }
.s-tiles .tile { color: var(--white); }
.btn-sports-a { background: var(--white); color: var(--blue); }
.btn-sports-a:hover { background: var(--turquoise); color: var(--white); }

/* ------------------------------------------------------------
   BLACK OVERLAY VARIANT — brand book 5.1 specifies black
   multiplied over photography; this drops the navy-tinted
   scrims for neutral black, so photos keep their own colour
   temperature. Gradient assist retained for AA over the
   rotating hero (flat 15-30% alone cannot pass).
   ------------------------------------------------------------ */
.hero-scrim {
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.50) 0%, rgba(0,0,0,0) 22%),
    linear-gradient(to top, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.24) 45%, rgba(0,0,0,0) 75%),
    linear-gradient(to right, rgba(0,0,0,0.48) 0%, rgba(0,0,0,0) 55%);
}
.tiles--overlay .tile-media::before {
  /* deepened from .82/.32 so light-walled photos (climbing gym) keep card
     body copy above the 4.5:1 AA threshold */
  background: linear-gradient(to top, rgba(0,0,0,0.86) 0%, rgba(0,0,0,0.46) 45%, rgba(0,0,0,0.06) 72%);
}
.hero { background: #111; }

/* ---- R2 refinements ----
   Notice sits above About as a blue-15 strip. About goes full
   navy (the page's one dark editorial moment). Connect ends on
   turquoise-15. Between the Games gains a playful photo pair;
   operator pills get a modest padding bump. */
/* Interim notice as a floating card, not an edge-to-edge strip */
.banner { background: var(--white); color: var(--blue);
          padding: 0 var(--gutter); }
.banner span { display: inline-block; background: var(--blue-15);
               border-radius: 10px; padding: 0.95em 1.5em; max-width: 56rem; }

/* About goes navy; Sports goes blue-15 — adjacent sections, distinct colours */
.s-about { background: var(--blue); color: var(--white); }
.s-sports { background: var(--blue-15); color: var(--blue); }
.s-sports .sec-kicker { color: var(--blue); opacity: 0.65; }
.facility-card { border-color: rgba(24,40,86,0.28); background: var(--white); }
.facility-card li { border-bottom-color: rgba(24,40,86,0.14); }
.support-line { background: rgba(24,40,86,0.05); }
.btn-sports-a { background: var(--blue); color: var(--white); }
.btn-sports-a:hover { background: var(--turquoise); color: var(--white); }
.operators a { padding: 0.7em 1.25em; font-size: 0.95rem;
               border-color: rgba(24,40,86,0.35); }
.operators a:hover { background: var(--blue); color: var(--white); }

.s-connect { background: var(--turquoise-15); color: var(--blue); }
.between-grid {
  display: grid; grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 4.5vw, 4rem); align-items: center;
}
@media (max-width: 980px) { .between-grid { grid-template-columns: 1fr; } }
.between-media { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.between-media figure { margin: 0; }
.between-media img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 6px;
  object-position: var(--pos, 50% 50%);
}
.between-media figure:last-child { margin-top: 2.25rem; }

/* ---- R4 refinements ---- */

/* tighter seam between intro and Find Your Be */
.s-intro { padding-bottom: clamp(2.5rem, 6vh, 4.5rem); }
.s-tiles { padding-top: clamp(3rem, 7vh, 5.5rem); }

/* interim notice: matches the intro column, overline subtitle treatment */
.banner { background: var(--white); color: var(--blue);
          padding: 0 var(--gutter); }
.banner span { display: block; max-width: 62rem; margin: 0 auto; text-align: left;
               background: var(--blue-15); border-radius: 10px; padding: 1.6em 2em; }
.banner strong { display: block; font-size: 0.75rem; font-weight: 500;
                 letter-spacing: 0.16em; text-transform: uppercase;
                 opacity: 0.7; margin-bottom: 0.6em; }

/* sports: same blue-15 ground, more contrast layers so it doesn't read muted */
.support-line { background: var(--white); }
.operators a { background: var(--white); border-color: transparent; }
.operators a:hover { background: var(--blue); color: var(--white); }

/* the close: teal ground retired — the page ends on confident navy,
   connect flowing into the footer as one block */
.s-connect { background: var(--blue); color: var(--white); }
.s-connect .btn-a { background: var(--white); color: var(--blue); }
.s-connect .btn-a:hover { background: var(--turquoise); color: var(--white); }
.s-connect .btn-b { border-color: rgba(255,255,255,0.75); color: var(--white); }
.s-connect .btn-b:hover { background: var(--white); color: var(--blue); }
.foot { border-top: 1px solid rgba(255,255,255,0.16); }

/* About: three-image grid — imagery carries the section, copy stays short */
.about-media {
  display: grid; grid-template-columns: 1.15fr 0.85fr;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.4vw, 1.1rem);
  aspect-ratio: 10 / 9;
}
.about-media img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 6px;
  object-position: var(--pos, 50% 50%);
}
.about-media img:first-child { grid-row: 1 / -1; }

/* Grant card: stat column gives the card's width a purpose —
   the page's only number, treated as its focal point */
.grant-card { display: grid; grid-template-columns: 1.5fr 1fr;
              gap: clamp(1.25rem, 2.5vw, 2rem) clamp(1.5rem, 3.5vw, 3.5rem);
              align-items: center; }
.grant-card > .grant-ctas { grid-column: 1 / -1; margin-top: 0.25rem; }
@media (max-width: 860px) { .grant-card { grid-template-columns: 1fr; } }
.grant-stat { border-left: 1px solid rgba(24,40,86,0.18);
              padding-left: clamp(1.5rem, 3vw, 3rem); }
@media (max-width: 860px) {
  .grant-stat { border-left: 0; padding-left: 0;
                border-top: 1px solid rgba(24,40,86,0.18);
                padding-top: 1.5rem; }
}
.stat-label { font-weight: 500; font-size: 0.78rem; letter-spacing: 0.16em;
              text-transform: uppercase; opacity: 0.65; margin: 0; }
.stat-figure { font-weight: 500; letter-spacing: var(--track); line-height: 1;
               font-size: clamp(2.75rem, 4.5vw, 4.25rem); margin: 0.12em 0 0.3em; }
.stat-sub { font-weight: 300; font-size: 0.98rem; line-height: 1.5;
            max-width: 24ch; margin: 0 0 0.9em; }
.stat-meta { font-size: 0.85rem; font-weight: 400; opacity: 0.6; margin: 0; }

/* ============================================================
   CLIENT FEEDBACK R1 (S. Kostadinov via Interkom, 2026-08-27)
   1. Hero standfirst replaced with the client's experiential
      line — longer, so the measure widens a touch to keep it
      to three lines at desktop sizes.
   2. New "What's On" section between the Be grid and About.
      No event photography exists in the library, so the
      section is typographic; the card reuses the sports
      facility-card idiom (white on blue-15) rather than
      inventing a component.
   ============================================================ */

.hero-standfirst { max-width: 42ch; }

/* tiles (white) -> what's on (blue-15) -> about (navy):
   no two adjacent sections share a ground */
.s-whatson { background: var(--blue-15); color: var(--blue); }
.s-whatson .sec-kicker { color: var(--blue); opacity: 0.65; }
.s-whatson .sec-h2 { margin-bottom: clamp(1.1rem, 2.5vh, 1.75rem); }

.whatson-grid {
  display: grid; grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
@media (max-width: 980px) { .whatson-grid { grid-template-columns: 1fr; } }

.whatson-card {
  background: var(--white); border-radius: 6px;
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
}
.whatson-card h3 {
  font-weight: 500; font-size: 1.05rem; letter-spacing: 0.02em;
  margin: 0 0 0.75rem;
}
/* :not() keeps this off .whatson-alt — as `.whatson-card > p` it outranked
   the .whatson-alt rule and zeroed its top margin */
.whatson-card > p:not(.whatson-alt) {
  font-weight: 300; font-size: 1rem; line-height: 1.55;
  margin: 0 0 1.5rem; max-width: 34ch;
}
.whatson-alt { margin: clamp(1.7rem, 2.6vw, 2.2rem) 0 0;
               font-size: 0.95rem; font-weight: 400; }
.whatson-alt a {
  color: inherit; text-decoration: none;
  display: inline-flex; align-items: center; gap: 0.4em;
}
.whatson-alt a:hover { text-decoration: underline; text-underline-offset: 5px; }

/* ============================================================
   CLIENT UPDATE R2 (2026-09-02) — new WTDC social channels.
   Instagram moved from @explorewhitby to @whitbytourism and
   Facebook launched, so the footer gains a social row. Text
   pills, not icons: no icon assets exist in img/, and this
   reuses the .operators pill idiom already on the page.
   ============================================================ */

.foot-social { display: flex; flex-direction: column; gap: 0.9rem; }
.foot-social-label {
  font-weight: 500; font-size: 0.78rem; letter-spacing: 0.16em;
  text-transform: uppercase; opacity: 0.65; margin: 0;
}
.foot-social ul {
  display: flex; flex-wrap: wrap; gap: 0.6rem;
  margin: 0; padding: 0; list-style: none;
}
.foot-social a {
  display: inline-block; text-decoration: none; color: inherit;
  font-size: 0.92rem; font-weight: 400;
  padding: 0.55em 1.1em; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.35);
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.foot-social a:hover { background: var(--white); color: var(--blue); border-color: var(--white); }

/* ============================================================
   PHASE 2 (2026-09-25) — Host in Whitby grant recipients.
   A row of event cards inside What's On, below the calendar
   card: the curated, tourism-only counterpart to the Town's
   municipal calendar. White on blue-15 like .whatson-card.
   The date is the card's strongest element, per the brief.
   Logos are optional: with none supplied, the host line is
   text only, so there's no placeholder box.
   ============================================================ */

.recipients[hidden], .recipient[hidden], .grant-recipients[hidden] { display: none !important; }

.recipients {
  margin-top: clamp(3.5rem, 8vh, 5.5rem);
  padding-top: clamp(2.5rem, 5vh, 3.5rem);
  border-top: 1px solid rgba(24,40,86,0.18);
}
.recipients-head { margin-bottom: clamp(1.75rem, 3.5vh, 2.5rem); }
.recipients-label {
  font-weight: 500; font-size: 0.78rem; letter-spacing: 0.16em;
  text-transform: uppercase; opacity: 0.65; margin: 0 0 0.9rem;
}
.recipients-head .sec-h3 { margin-bottom: 0.6rem; }
.recipients-intro {
  font-weight: 300; font-size: 1rem; line-height: 1.55;
  max-width: 52ch; margin: 0;
}
.recipients-intro a { color: inherit; font-weight: 500; text-underline-offset: 4px; }

.recipient-list {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 1.8vw, 1.5rem);
  margin: 0; padding: 0; list-style: none;
}
@media (max-width: 1100px) { .recipient-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px)  { .recipient-list { grid-template-columns: 1fr; } }

.recipient {
  display: flex; flex-direction: column; align-items: flex-start;
  background: var(--white); border-radius: 6px;
  padding: clamp(1.5rem, 2.4vw, 2rem);
}

.recipient-date { margin: 0 0 1.25rem; }
.recipient-date time { display: flex; flex-direction: column; line-height: 1; }
.rd-mon {
  font-weight: 500; font-size: 0.8rem; letter-spacing: 0.16em;
  text-transform: uppercase;
}
.rd-day {
  font-weight: 500; letter-spacing: var(--track);
  font-size: clamp(2.75rem, 4vw, 3.5rem); margin: 0.1em 0 0.12em;
}
.rd-wk { font-size: 0.85rem; font-weight: 400; opacity: 0.65; }

.recipient-event {
  font-weight: 500; letter-spacing: var(--track); line-height: 1.15;
  font-size: clamp(1.15rem, 1.5vw, 1.35rem); margin: 0 0 0.5rem;
}
.recipient-meta {
  font-weight: 300; font-size: 0.95rem; line-height: 1.5; margin: 0 0 1.25rem;
}
.recipient-host {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem;
  font-size: 0.9rem; font-weight: 300;
  margin: auto 0 1.5rem; padding-top: 1.1rem; width: 100%;
  border-top: 1px solid rgba(24,40,86,0.14);
}
.recipient-host strong { font-weight: 500; }
.recipient-logo { height: 56px; width: auto; max-width: 160px; object-fit: contain; }

.recipient-links {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem;
  margin: 1.1rem 0 0; padding: 0; list-style: none;
}
.recipient-links a {
  color: inherit; text-decoration: none; font-size: 0.92rem; font-weight: 400;
}
.recipient-links a:hover { text-decoration: underline; text-underline-offset: 5px; }

/* partners: the grant card points up to its recipients */
.grant-recipients { margin: 1.25rem 0 0; font-size: 0.95rem; }
.grant-recipients a { color: inherit; font-weight: 500; text-underline-offset: 4px; }