/* =====================================================================
   SHANA FRANCIS  |  portfolio.shanafrancis.com
   One stylesheet for the whole site. Sections, in order:

     01  Tokens and reset
     02  Typography and shared utilities
     03  Buttons and links
     04  Sticky nav
     05  Hero
     06  Intro video and credibility band (navy)
     07  Work grid, filter chips, cards
     08  Video modal
     09  Audience band (navy, rendered by stats.js)
     10  Brand logo bar
     11  Formats and services
     12  About
     13  Rates
     14  Contact band (navy)
     15  Footer
     16  Reveal animations and reduced motion
     17  Breakpoints reference

   Edit any section without reading the rest. Mobile first: base styles
   are the 375px view, min-width queries scale up.
   ===================================================================== */

/* == 01  TOKENS AND RESET ============================================= */

:root {
  --navy: #1B2A4A;
  --gold: #C9A227;
  --plum: #6B3F5E;
  --cream: #F7F5F0;
  --ink: #14141A;

  /* Derived tints. Alpha variants of the five brand colours only. */
  --navy-12: rgba(27, 42, 74, 0.12);
  --navy-70: rgba(27, 42, 74, 0.70);
  --cream-06: rgba(247, 245, 240, 0.06);
  --cream-16: rgba(247, 245, 240, 0.16);
  --cream-72: rgba(247, 245, 240, 0.72);
  --shadow: 0 10px 30px rgba(20, 20, 26, 0.10);
  --shadow-lift: 0 18px 44px rgba(20, 20, 26, 0.16);

  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, "Segoe UI", Arial, sans-serif;

  --wrap: 1160px;
  --pad: 20px;
  --radius: 14px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 84px; /* keep anchored sections clear of sticky nav */
}

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--navy);
  background: var(--cream);
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; } /* width/height attributes set the ratio, CSS sets the size */

/* Focus. Navy ring on cream, gold ring inside navy bands. */
:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
  border-radius: 4px;
}
.band :focus-visible { outline-color: var(--gold); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 12px 18px;
  background: var(--navy);
  color: var(--cream);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { left: 12px; top: 12px; }

/* == 02  TYPOGRAPHY AND SHARED UTILITIES ============================== */

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.6rem, 9vw, 4.6rem); }
h2 { font-size: clamp(1.9rem, 5vw, 2.8rem); }
h3 { font-size: 1.25rem; line-height: 1.3; }

p { margin: 0 0 1em; }

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

section { padding: 72px 0; }

/* Eyebrow: the small letterspaced label above every heading. */
.eyebrow {
  display: inline-block;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--plum);
  margin-bottom: 14px;
}
.band .eyebrow { color: var(--gold); }

/* Navy full-width band */
.band {
  background: var(--navy);
  color: var(--cream);
}
.band h2, .band h3 { color: var(--cream); }

/* Small plum rule used as a section break accent */
.rule {
  width: 44px;
  height: 3px;
  background: var(--plum);
  border: 0;
  margin: 0 0 22px;
}
.band .rule { background: var(--gold); }

.section-close {
  margin-top: 34px;
  font-size: 0.98rem;
}
.section-close a {
  color: var(--plum);
  font-weight: 600;
  text-decoration-color: var(--gold);
  text-underline-offset: 3px;
}
.band .section-close a { color: var(--gold); }

.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;
}

/* == 03  BUTTONS AND LINKS ============================================ */

.btn {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease,
              border-color 160ms ease, transform 160ms ease;
}
.btn:active { transform: translateY(1px); }

/* Gold fill, navy text. 5.9:1, passes AA. */
.btn-gold {
  background: var(--gold);
  color: var(--navy);
}
.btn-gold:hover { background: var(--plum); color: var(--cream); }

/* Outline button on cream */
.btn-ghost {
  background: transparent;
  color: var(--navy);
  border-color: var(--navy);
}
.btn-ghost:hover { border-color: var(--plum); color: var(--plum); }

/* Outline button inside navy bands */
.band .btn-ghost {
  color: var(--cream);
  border-color: var(--cream-72);
}
.band .btn-ghost:hover { border-color: var(--gold); color: var(--gold); }

/* == 04  STICKY NAV =================================================== */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--cream);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.nav.is-stuck {
  border-bottom-color: var(--navy-12);
  box-shadow: 0 4px 18px rgba(20, 20, 26, 0.06);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 68px;
}

.wordmark {
  display: flex;
  align-items: center;
  padding: 6px 0;
}
.wordmark-logo {
  height: 46px;
  width: 46px;
}

.nav-links {
  display: none; /* mobile: hidden behind hamburger */
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
  gap: 26px;
}
.nav-links a {
  color: var(--navy);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  padding: 6px 2px;
}
.nav-links a:hover { color: var(--plum); }
.nav-links .btn {
  padding: 10px 22px;
  font-size: 0.92rem;
}

/* Hamburger */
.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--navy);
  transition: transform 200ms ease, opacity 200ms ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu panel */
.nav-links.is-open {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--cream);
  border-bottom: 1px solid var(--navy-12);
  box-shadow: 0 18px 30px rgba(20, 20, 26, 0.10);
  padding: 10px var(--pad) 22px;
  gap: 2px;
}
.nav-links.is-open a {
  padding: 13px 4px;
  font-size: 1.05rem;
  border-bottom: 1px solid var(--navy-12);
}
.nav-links.is-open li:last-child a { border-bottom: 0; }
.nav-links.is-open .btn {
  margin-top: 12px;
  text-align: center;
}

@media (min-width: 768px) {
  .nav-toggle { display: none; }
  .nav-links { display: flex; }
}

/* == 05  HERO ========================================================= */

.hero { padding: 44px 0 64px; }

.hero-grid {
  display: grid;
  gap: 36px;
}

.hero-copy .eyebrow { margin-bottom: 10px; }

.hero-lede {
  font-size: 1.16rem;
  line-height: 1.6;
  max-width: 34em;
  margin-bottom: 28px;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.hero-photo {
  position: relative;
  max-width: 420px;
}
.hero-photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
/* Offset gold frame behind the photo */
.hero-photo::before {
  content: "";
  position: absolute;
  inset: 18px -14px -14px 18px;
  border: 2px solid var(--gold);
  border-radius: var(--radius);
  z-index: -1;
}

@media (min-width: 900px) {
  .hero { padding: 72px 0 90px; }
  .hero-grid {
    grid-template-columns: 1.2fr 1fr;
    align-items: center;
    gap: 64px;
  }
  .hero-photo { justify-self: end; width: 100%; }
}

/* == 06  INTRO VIDEO AND CREDIBILITY BAND ============================ */

.intro-head {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 40px;
}
.intro-head p { color: var(--cream-72); }

/* Copy left, media mosaic right; stacks to one column under 900px */
.intro-grid {
  display: grid;
  gap: 48px;
}
.intro-location {
  color: var(--cream-72);
  margin: -6px 0 8px;
}
.intro-copy h3 {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--cream);
  margin: 28px 0 14px;
}
.intro-close {
  font-weight: 600;
  font-size: 1.08rem;
  margin: 26px 0 22px;
}

/* Plain bullet list for What to know */
.know-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.know-list li {
  position: relative;
  padding-left: 20px;
  font-size: 1rem;
}
.know-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
}

/* Media mosaic: large intro video as the main piece, two photos beside */
.intro-mosaic {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: auto 1fr;
  gap: 14px;
  max-width: 620px;
  align-self: start;
}
.mosaic-video {
  grid-row: 1 / 3;
  position: relative;
}
.mosaic-video video {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: var(--ink);
}
.mosaic-video::before {
  content: "";
  position: absolute;
  inset: 16px -12px -12px 16px;
  border: 2px solid var(--gold);
  border-radius: var(--radius);
  z-index: -1;
}
.mosaic-photo {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.mosaic-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mosaic-photo-top { aspect-ratio: 4 / 3; }
.mosaic-photo-bottom { min-height: 0; }

@media (min-width: 900px) {
  .intro-grid {
    grid-template-columns: 1fr 1.05fr;
    gap: 64px;
    align-items: start;
  }
  .intro-mosaic { justify-self: end; width: 100%; }
}

/* Credibility bar: three items in a row beneath the intro grid */
.creds-row {
  display: grid;
  gap: 26px;
  margin-top: 56px;
  padding-top: 44px;
  border-top: 1px solid var(--cream-16);
}
@media (min-width: 768px) {
  .creds-row { grid-template-columns: repeat(3, 1fr); }
}
.cred {
  text-align: left;
  padding-left: 18px;
  border-left: 2px solid var(--gold);
}
.cred-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0 0 3px;
}
.cred-sub {
  font-size: 0.86rem;
  color: var(--cream-72);
  margin: 0;
}
.cred-icon {
  width: 36px;
  height: 36px;
  color: var(--gold);
  margin-bottom: 10px;
}

/* == 07  WORK GRID, FILTER CHIPS, CARDS =============================== */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 26px 0 34px;
}
.chip {
  padding: 9px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--navy-12);
  background: transparent;
  color: var(--navy);
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
}
.chip:hover { border-color: var(--plum); color: var(--plum); }
.chip[aria-pressed="true"] {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--cream);
}

.work-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* mobile and tablet */
  gap: 18px;
  /* It is a <ul>: clear the browser's default list indent, otherwise
     the whole grid sits pushed to the right. */
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 1000px) {
  .work-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
}

.card { /* each card is a <li> */
  list-style: none;
}
.card.is-hidden { display: none; }

.card-button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  color: var(--navy);
  border-radius: var(--radius);
}

.card-media {
  display: block; /* spans inside the button need block layout */
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--navy);
  box-shadow: var(--shadow);
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.card-button:hover .card-media,
.card-button:focus-visible .card-media {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
}
.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Format pill over the poster */
.card-pill {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--navy);
  color: var(--cream);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Play affordance */
.card-play {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--gold);
  display: grid;
  place-items: center;
  transition: transform 160ms ease, background-color 160ms ease;
}
.card-play svg { width: 16px; height: 16px; fill: var(--navy); margin-left: 2px; }
.card-button:hover .card-play { transform: scale(1.12); background: var(--cream); }

.card-meta { display: block; padding: 12px 4px 0; }
.card-brand {
  display: block;
  font-weight: 600;
  font-size: 1rem;
  margin: 0;
}
.card-label {
  display: block;
  font-size: 0.85rem;
  color: var(--plum);
  margin: 1px 0 0;
}

/* == 08  VIDEO MODAL ================================================== */

.modal {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(20, 20, 26, 0.92);
}
.modal.is-open { display: flex; }

.modal-panel {
  position: relative;
  width: min(420px, 92vw);
}
.modal-video {
  width: 100%;
  max-height: 82vh;
  aspect-ratio: 9 / 16;
  border-radius: var(--radius);
  background: #000;
}
.modal-caption {
  color: var(--cream);
  font-size: 0.95rem;
  text-align: center;
  margin: 12px 0 0;
}
.modal-caption span { color: var(--gold); }

.modal-close {
  position: absolute;
  top: -52px;
  right: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--cream-72);
  background: transparent;
  color: var(--cream);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.modal-close:hover { border-color: var(--gold); color: var(--gold); }

/* == 09  AUDIENCE BAND (rendered by stats.js) ========================= */

.audience-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.updated-chip {
  font-size: 0.82rem;
  color: var(--cream-72);
  border: 1px solid var(--cream-16);
  border-radius: 999px;
  padding: 6px 14px;
  white-space: nowrap;
}
.audience-lede {
  max-width: 40em;
  color: var(--cream-72);
  margin-bottom: 8px;
}

/* Loading and error states */
.audience-note {
  padding: 28px 0 8px;
  color: var(--cream-72);
  font-size: 1rem;
}

.stat-cards {
  display: grid;
  gap: 20px;
  margin-top: 34px;
}
@media (min-width: 820px) {
  .stat-cards { grid-template-columns: 1fr 1fr; }
}

.stat-card {
  background: var(--cream-06);
  border: 1px solid var(--cream-16);
  border-radius: var(--radius);
  padding: 26px 26px 22px;
}
.stat-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 18px;
}
.stat-platform {
  font-weight: 600;
  font-size: 1.05rem;
  margin: 0;
}
.stat-handle {
  font-size: 0.85rem;
  color: var(--cream-72);
  text-decoration: none;
}
.stat-handle:hover { color: var(--gold); }

.stat-hero-number {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.4rem, 6vw, 3.2rem);
  line-height: 1;
  color: var(--gold);
  margin: 0;
}
.stat-hero-label {
  font-size: 0.88rem;
  color: var(--cream-72);
  margin: 6px 0 18px;
}

.stat-rows {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
  border-top: 1px solid var(--cream-16);
  padding-top: 16px;
  margin: 0;
}
.stat-rows div { margin: 0; }
.stat-rows dt {
  font-size: 0.8rem;
  color: var(--cream-72);
  margin-bottom: 2px;
}
.stat-rows dd {
  margin: 0;
  font-weight: 600;
  font-size: 1.05rem;
}

.stat-highlight {
  margin: 16px 0 0;
  font-size: 0.9rem;
  color: var(--gold);
}

/* Demographics */
.demo-block { margin-top: 44px; }
.demo-title {
  font-size: 1.15rem;
  margin-bottom: 4px;
}
.demo-sub {
  font-size: 0.88rem;
  color: var(--cream-72);
  margin-bottom: 24px;
}
.demo-grid {
  display: grid;
  gap: 30px;
}
@media (min-width: 820px) {
  .demo-grid { grid-template-columns: repeat(3, 1fr); }
}
.demo-col h4 {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cream-72);
  margin: 0 0 14px;
}
.bar-row { margin-bottom: 12px; }
.bar-row:last-child { margin-bottom: 0; }
.bar-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.88rem;
  margin-bottom: 5px;
}
.bar-label strong { font-weight: 600; }
.bar-track {
  height: 8px;
  border-radius: 999px;
  background: var(--cream-16);
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--gold);
  /* stats.js sets the real width when the section scrolls into view */
  transition: width 1200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.bar-fill.alt { background: var(--plum); }

/* Count-up numbers: reserve space so the layout cannot shift as digits
   change, and stop the browser hyphenating a number mid-animation. */
.count {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .bar-fill { transition: none !important; }
}

/* Newsletter strip */
.newsletter {
  margin-top: 44px;
  padding: 22px 26px;
  border: 1px solid var(--cream-16);
  border-radius: var(--radius);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.newsletter p { margin: 0; font-size: 1rem; }

/* == 10  BRAND LOGO BAR =============================================== */

/* Sits directly beneath the hero, above the navy intro band */
.brands { padding: 8px 0 64px; }
.brands-title {
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--plum);
  margin-bottom: 34px;
}
.brands-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 36px 72px;
}
/* Logos in full colour at a uniform visual size */
.brands-row img {
  height: 52px;
  width: auto;
}
.brands-row img.logo-badge { height: 80px; }

/* == 11  FORMATS AND SERVICES ========================================= */

.formats-grid {
  display: grid;
  gap: 18px;
  margin-top: 34px;
}
@media (min-width: 700px) {
  .formats-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
}

.format-card {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--navy-12);
  border-radius: var(--radius);
  padding: 26px;
}
.format-card h3 { margin-bottom: 8px; }
.format-card p { margin: 0; font-size: 0.98rem; }

/* Niches list (lives in the navy intro band) */
.niche-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.niche-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 1rem;
}
.niche-icon {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  color: var(--gold);
  margin-top: 1px;
}

.terms {
  display: grid;
  gap: 24px;
  margin-top: 40px;
  padding-top: 36px;
  border-top: 1px solid var(--navy-12);
}
@media (min-width: 820px) {
  .terms { grid-template-columns: repeat(3, 1fr); }
}
.term h4 {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--plum);
  margin: 0 0 8px;
}
.term p { margin: 0; font-size: 0.96rem; }

/* == 12  ABOUT ======================================================== */

.about-grid {
  display: grid;
  gap: 36px;
}
@media (min-width: 900px) {
  .about-grid {
    grid-template-columns: 380px 1fr;
    gap: 64px;
    align-items: start;
  }
}
.about-photo {
  position: relative;
  max-width: 380px;
}
.about-photo img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.about-photo::before {
  content: "";
  position: absolute;
  inset: -14px 18px 18px -14px;
  border: 2px solid var(--plum);
  border-radius: var(--radius);
  z-index: -1;
}
.about-copy p { max-width: 38em; }

/* == 13  RATES ======================================================== */

.rates-grid {
  display: grid;
  gap: 24px;
  margin-top: 34px;
}
@media (min-width: 900px) {
  .rates-grid { grid-template-columns: 1fr 1fr; align-items: start; }
}

.rate-table {
  border: 1.5px solid var(--navy-12);
  border-radius: var(--radius);
  padding: 28px;
  background: rgba(255, 255, 255, 0.55);
}
.rate-table h3 { margin-bottom: 2px; }
.rate-tagline {
  font-size: 0.9rem;
  color: var(--plum);
  margin-bottom: 20px;
}
.rate-rows {
  list-style: none;
  margin: 0;
  padding: 0;
}
.rate-rows li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  padding: 13px 0;
  border-top: 1px solid var(--navy-12);
  font-size: 0.98rem;
}
.rate-price {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  white-space: nowrap;
}
.rate-note {
  margin: 18px 0 0;
  font-size: 0.86rem;
  color: var(--plum);
}
.rates-close {
  text-align: center;
  margin-top: 38px;
}
.rates-close p { margin-bottom: 16px; }

/* == 14  CONTACT BAND ================================================= */

.contact { text-align: center; }
.contact h2 { max-width: 15em; margin-left: auto; margin-right: auto; }
.contact-email {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 4.5vw, 1.9rem);
  font-weight: 600;
  color: var(--gold);
  text-decoration: none;
  margin: 8px 0 26px;
  overflow-wrap: anywhere;
}
.contact-email:hover { text-decoration: underline; text-underline-offset: 5px; }
.contact-ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-bottom: 22px;
}
.contact-response {
  color: var(--cream-72);
  font-size: 0.95rem;
  margin: 0;
}
.copy-confirm {
  display: block;
  min-height: 1.4em;
  font-size: 0.88rem;
  color: var(--gold);
  margin-top: 10px;
}

/* == 14b DECORATIVE PHOTO TILES ======================================
   Scattered photo accents in the reference-site style: rounded tiles,
   accent border, hard offset shadow, slight rotation. Desktop only so
   they never crowd content on smaller screens. All aria-hidden.      */

.has-decor { position: relative; }

/* Photo tiles: contact band only, one each side */
.decor {
  display: none;
  position: absolute;
  border-radius: 18px;
  z-index: 1;
}
.decor-contact {
  width: 165px;
  left: 5%;
  bottom: 60px;
  transform: rotate(-3deg);
  border: 3px solid var(--cream-72);
  box-shadow: 10px 10px 0 rgba(20, 20, 26, 0.4);
}
.decor-contact-right {
  width: 165px;
  right: 5%;
  top: 70px;
  transform: rotate(3deg);
  border: 3px solid var(--gold);
  box-shadow: -10px 10px 0 rgba(20, 20, 26, 0.4);
}

/* Abstract accent marks: small brand-coloured shapes that dress the
   empty gutters without ever sitting over content. */
.accent {
  display: none;
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
.accent-gold { color: var(--gold); }
.accent-plum { color: var(--plum); }

.accent-hero-star { width: 34px; top: 90px; left: 55%; opacity: 0.85; }
.accent-hero-ring { width: 72px; bottom: 36px; left: 3%; opacity: 0.5; }
.accent-work-ring { width: 90px; top: 70px; right: 4%; opacity: 0.5; }
.accent-work-star { width: 26px; top: 180px; right: 9%; opacity: 0.85; }
.accent-formats-squiggle { width: 130px; top: 110px; right: 5%; opacity: 0.7; }
.accent-rates-star { width: 32px; bottom: 140px; left: 3.5%; opacity: 0.85; }
.accent-rates-star-sm { width: 18px; bottom: 110px; left: 6%; opacity: 0.6; }

@media (min-width: 1240px) {
  .decor, .accent { display: block; }
}

/* == 15  FOOTER ======================================================= */

.footer {
  background: var(--navy);
  color: var(--cream-72);
  border-top: 1px solid var(--cream-16);
  padding: 0 0 40px;
}

/* Scrolling niche ticker across the top of the footer */
.ticker {
  overflow: hidden;
  border-bottom: 1px solid var(--cream-16);
  padding: 22px 0;
  margin-bottom: 32px;
}
.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker-scroll 32s linear infinite;
}
.ticker-half {
  display: flex;
  align-items: baseline;
  gap: 28px;
  padding-right: 28px;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cream);
}
.ticker-half .dot { color: var(--gold); }
@keyframes ticker-scroll {
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  /* !important is required here: the global rule in section 16 sets
     animation-duration on every element, which would otherwise snap the
     ticker to its end position and leave it looking frozen mid-scroll. */
  .ticker-track {
    animation: none !important;
    transform: none !important;
  }
}
.footer-inner {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
  text-align: center;
}
.footer-links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  margin: 0;
  padding: 0;
}
.footer-links a {
  color: var(--cream);
  text-decoration: none;
  font-size: 0.92rem;
}
.footer-links a:hover { color: var(--gold); }
.footer-small {
  font-size: 0.82rem;
  margin: 0;
}
@media (min-width: 820px) {
  .footer-inner { flex-direction: row; justify-content: space-between; text-align: left; }
}

/* == 16  REVEAL ANIMATIONS AND REDUCED MOTION ========================= */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 500ms ease, transform 500ms ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .card-button:hover .card-media { transform: none; }
  .card-button:hover .card-play { transform: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* == 17  BREAKPOINTS REFERENCE ========================================
   375px   base: single column, 2-across work grid, hamburger nav
   700px   formats 2-up
   768px   full nav appears, intro band goes two-column
   820px   stat cards 2-up, demographics 3-up, terms 3-up
   900px   hero and about go two-column, rates 2-up
   1000px  work grid 4-across
   1160px  content max width reached
   ===================================================================== */