/* ============================================================
   KATE WHELAN  ·  Animal Frequency
   Shared site stylesheet
   Palette: midnight navy + warm gold on soft paper
   Type: Cormorant Garamond (display) / Jost (utility)
   ============================================================ */

:root {
  --navy:      #0d1b2e;
  --navy-mid:  #142238;
  --navy-lt:   #1c3050;
  --ink:       #0e1a28;
  --ink-mid:   rgba(14,26,40,0.72);
  --ink-soft:  rgba(14,26,40,0.45);
  --paper:     #f5eedf;
  --paper-2:   #ede5d4;
  --paper-3:   #e6dcc6;
  --gold:      #c9954a;
  --gold-lt:   #e0b46a;
  --gold-pale: rgba(201,149,74,0.15);
  --rule:      rgba(14,26,40,0.11);
  --rule-gold: rgba(201,149,74,0.28);
  --cream-dim: rgba(245,238,223,0.62);
  --shadow:    0 30px 80px -30px rgba(8,16,28,0.55);
  --maxw:      1240px;
  --gutter:    clamp(1.4rem, 5vw, 4.2rem);
}

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

html {
  font-size:17px;
  scroll-behavior:smooth;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

body {
  font-family:'Cormorant Garamond',Georgia,serif;
  background:var(--paper);
  color:var(--ink);
  overflow-x:hidden;
  line-height:1.6;
}

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

a { color:inherit; }

::selection { background:var(--gold); color:var(--navy); }

/* ---- Skip link (accessibility) ---- */
.skip {
  position:absolute; left:-999px; top:0; z-index:500;
  background:var(--navy); color:#f5eedf;
  padding:0.8rem 1.4rem; font-family:'Jost',sans-serif;
  font-size:0.75rem; letter-spacing:0.18em; text-transform:uppercase;
}
.skip:focus { left:1rem; top:1rem; }

/* ---- Focus visibility ---- */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible {
  outline:2px solid var(--gold-lt);
  outline-offset:3px;
}

/* ============================================================
   TYPOGRAPHY UTILITIES
   ============================================================ */
.eyebrow {
  font-family:'Jost',sans-serif; font-weight:300;
  font-size:0.72rem; letter-spacing:0.32em; text-transform:uppercase;
  color:var(--gold);
}
.eyebrow-cream { color:var(--gold-lt); }

h1,h2,h3 { font-family:'Cormorant Garamond',serif; font-weight:400; line-height:1.08; }

.display {
  font-size:clamp(2.4rem, 6vw, 4.6rem);
  font-weight:300; letter-spacing:-0.01em;
}
.h2 {
  font-size:clamp(1.9rem, 4vw, 3.1rem);
  font-weight:300; letter-spacing:-0.005em;
}
.h3 {
  font-size:clamp(1.4rem, 2.4vw, 2rem);
  font-weight:400;
}
.lede {
  font-size:clamp(1.15rem, 1.7vw, 1.42rem);
  color:var(--ink-mid); font-weight:400;
}
.prose p { font-size:1.18rem; color:var(--ink-mid); margin-bottom:1.3rem; max-width:64ch; }
.prose p:last-child { margin-bottom:0; }
.prose strong { color:var(--ink); font-weight:500; }
.prose em { font-style:italic; }

.signoff {
  font-style:italic; font-size:clamp(1.5rem,2.6vw,2.1rem);
  color:var(--gold); font-weight:400; line-height:1.25;
}

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.5rem var(--gutter);
  transition:background 0.4s ease, padding 0.3s ease, border-color 0.4s ease;
  border-bottom:1px solid transparent;
}
.nav.scrolled {
  background:rgba(13,27,46,0.94);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  padding:0.95rem var(--gutter);
  border-bottom:1px solid var(--rule-gold);
}
.nav-logo {
  font-family:'Cormorant Garamond',serif;
  font-size:1.1rem; font-weight:300;
  letter-spacing:0.2em; text-transform:uppercase;
  color:#f5eedf; text-decoration:none; flex-shrink:0;
  transition:color 0.25s;
}
.nav-logo:hover { color:var(--gold-lt); }
.nav-links { display:flex; gap:2.2rem; list-style:none; align-items:center; }
.nav-links a {
  font-family:'Jost',sans-serif; font-weight:300;
  font-size:0.72rem; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--cream-dim); text-decoration:none;
  transition:color 0.25s; position:relative; padding:0.2rem 0;
}
.nav-links a::after {
  content:''; position:absolute; bottom:-3px; left:0;
  width:0; height:1px;
  background:linear-gradient(to right,var(--gold),var(--gold-lt));
  transition:width 0.3s ease;
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color:#f5eedf; }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { width:100%; }

.nav-cta {
  font-family:'Jost',sans-serif; font-weight:400;
  font-size:0.7rem; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--navy); background:linear-gradient(135deg,var(--gold-lt),var(--gold));
  padding:0.7rem 1.4rem; border-radius:2px; text-decoration:none;
  transition:transform 0.25s ease, box-shadow 0.25s ease;
}
.nav-cta::after { display:none; }
.nav-cta:hover { transform:translateY(-1px); box-shadow:0 10px 30px -10px rgba(201,149,74,0.6); color:var(--navy); }

.nav-toggle {
  display:none; background:none; border:none; cursor:pointer;
  width:30px; height:22px; position:relative; z-index:210;
}
.nav-toggle span {
  position:absolute; left:0; width:100%; height:1.5px;
  background:#f5eedf; transition:transform 0.3s ease, opacity 0.3s ease, top 0.3s ease;
}
.nav-toggle span:nth-child(1){ top:0; }
.nav-toggle span:nth-child(2){ top:10px; }
.nav-toggle span:nth-child(3){ top:20px; }
.nav-toggle.open span:nth-child(1){ top:10px; transform:rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ top:10px; transform:rotate(-45deg); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display:inline-flex; align-items:center; gap:0.55rem;
  font-family:'Jost',sans-serif; font-weight:400;
  font-size:0.74rem; letter-spacing:0.2em; text-transform:uppercase;
  text-decoration:none; cursor:pointer; border:none;
  padding:0.95rem 1.9rem; border-radius:2px;
  transition:transform 0.25s ease, box-shadow 0.25s ease, background 0.3s ease, color 0.3s ease;
}
.btn .arw { transition:transform 0.25s ease; }
.btn:hover .arw { transform:translateX(4px); }
.btn-gold { background:linear-gradient(135deg,var(--gold-lt),var(--gold)); color:var(--navy); }
.btn-gold:hover { transform:translateY(-2px); box-shadow:0 16px 40px -14px rgba(201,149,74,0.65); }
.btn-outline { background:transparent; color:#f5eedf; border:1px solid var(--rule-gold); }
.btn-outline:hover { background:var(--gold-pale); border-color:var(--gold); }
.btn-ink { background:transparent; color:var(--ink); border:1px solid var(--rule); }
.btn-ink:hover { border-color:var(--gold); color:var(--gold); }
.btn-link {
  font-family:'Jost',sans-serif; font-weight:300;
  font-size:0.76rem; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--gold); text-decoration:none; display:inline-flex; gap:0.5rem; align-items:center;
  border-bottom:1px solid transparent; padding-bottom:2px; transition:border-color 0.25s;
}
.btn-link:hover { border-color:var(--gold); }
.btn-link .arw { transition:transform 0.25s ease; }
.btn-link:hover .arw { transform:translateX(4px); }
.btn-row { display:flex; flex-wrap:wrap; gap:1rem; align-items:center; }

/* ============================================================
   LAYOUT PRIMITIVES
   ============================================================ */
.section { padding:clamp(4.5rem,9vw,8rem) var(--gutter); }
.wrap { max-width:var(--maxw); margin:0 auto; width:100%; }
.wrap-narrow { max-width:820px; margin:0 auto; width:100%; }
.on-navy { background:var(--navy); color:#f5eedf; }
.on-navy .lede, .on-navy .prose p { color:rgba(245,238,223,0.78); }
.on-navy .prose strong { color:#f5eedf; }
.on-paper-2 { background:var(--paper-2); }
.divider-gold {
  width:54px; height:1px; background:linear-gradient(to right,var(--gold),transparent);
  margin:1.6rem 0;
}
.on-navy .divider-gold { background:linear-gradient(to right,var(--gold-lt),transparent); }

/* Reveal on scroll */
.reveal { opacity:0; transform:translateY(26px); transition:opacity 0.9s ease, transform 0.9s ease; }
.reveal.in { opacity:1; transform:none; }

/* ============================================================
   HERO  (home)
   ============================================================ */
.hero {
  position:relative; min-height:100svh; width:100%;
  display:flex; align-items:flex-end;
  overflow:hidden; background:var(--navy);
}
/* ambient blurred fill */
.hero-fill {
  position:absolute; inset:-6%;
  background-size:cover; background-position:center;
  filter:blur(34px) brightness(0.42) saturate(0.85);
  transform:scale(1.12); z-index:1;
}
.hero-fill::after {
  content:''; position:absolute; inset:0;
  background:radial-gradient(120% 90% at 70% 40%, rgba(13,27,46,0.2), rgba(13,27,46,0.86));
}
/* sharp foreground film */
.hero-film {
  position:absolute; z-index:2; top:0; right:6%; height:100%;
  aspect-ratio:9/16;
  display:flex; align-items:center; justify-content:center;
}
.hero-film video, .hero-film img.hero-still {
  height:100%; width:100%; object-fit:cover; object-position:center;
}
.hero-film::after {
  content:''; position:absolute; inset:0;
  box-shadow:inset 0 0 120px 30px rgba(13,27,46,0.5);
  pointer-events:none;
}
/* text scrim over the left */
.hero-scrim {
  position:absolute; inset:0; z-index:3;
  background:linear-gradient(90deg, rgba(13,27,46,0.92) 0%, rgba(13,27,46,0.7) 34%, rgba(13,27,46,0.05) 62%, transparent 100%),
             linear-gradient(0deg, rgba(13,27,46,0.6), transparent 40%);
}
.hero-inner {
  position:relative; z-index:4; width:100%;
  max-width:var(--maxw); margin:0 auto;
  padding:0 var(--gutter) clamp(3.2rem,8vh,6rem);
}
.hero-copy { max-width:640px; }
.hero-wordmark {
  font-family:'Cormorant Garamond',serif; font-weight:300;
  font-size:clamp(1.1rem,1.6vw,1.35rem); letter-spacing:0.42em;
  text-transform:uppercase; color:#f5eedf; margin-bottom:0.4rem;
}
.hero-role {
  font-family:'Jost',sans-serif; font-weight:300;
  font-size:0.76rem; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--gold-lt); margin-bottom:1.9rem;
  display:flex; align-items:center; gap:0.7rem;
}
.hero-role .dot { width:4px; height:4px; background:var(--gold); border-radius:50%; }
.hero h1 {
  color:#f5eedf; font-weight:300;
  font-size:clamp(2.1rem,4.4vw,3.9rem); line-height:1.1;
  letter-spacing:-0.01em; margin-bottom:1.5rem;
}
.hero-body {
  font-size:clamp(1.08rem,1.4vw,1.28rem); line-height:1.65;
  color:rgba(245,238,223,0.82); margin-bottom:2.3rem; max-width:52ch;
}
.hero .btn-row { gap:1rem; }
.scroll-hint {
  position:absolute; bottom:1.6rem; left:50%; transform:translateX(-50%);
  z-index:4; font-family:'Jost',sans-serif; font-size:0.62rem;
  letter-spacing:0.3em; text-transform:uppercase; color:rgba(245,238,223,0.5);
  display:flex; flex-direction:column; align-items:center; gap:0.5rem;
}
.scroll-hint .line { width:1px; height:34px; background:linear-gradient(var(--gold),transparent); animation:scrollpulse 2.4s ease-in-out infinite; }
@keyframes scrollpulse { 0%,100%{ opacity:0.3; transform:scaleY(0.6); } 50%{ opacity:1; transform:scaleY(1); } }

/* ============================================================
   PAGE HEADER (interior pages)
   ============================================================ */
.pagehead {
  position:relative; background:var(--navy); color:#f5eedf;
  padding:clamp(9rem,16vh,12rem) var(--gutter) clamp(4rem,8vw,6rem);
  overflow:hidden;
}
.pagehead::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(90% 80% at 80% 0%, rgba(201,149,74,0.14), transparent 60%);
}
.pagehead .wrap { position:relative; z-index:2; }
.pagehead h1 { color:#f5eedf; font-weight:300; font-size:clamp(2.6rem,6vw,5rem); margin:0.8rem 0; }
.pagehead .lede { color:rgba(245,238,223,0.8); max-width:60ch; }

/* ============================================================
   FEATURE / ALT BLOCKS (asymmetric, not cards)
   ============================================================ */
.split {
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem);
  align-items:center;
}
.split.reverse .split-media { order:2; }
.split-media { position:relative; }
.split-media img {
  width:100%; height:100%; object-fit:cover; border-radius:2px;
  box-shadow:var(--shadow);
}
.media-frame { position:relative; }
.media-frame::before {
  content:''; position:absolute; inset:-10px -10px auto auto;
  width:60%; height:60%; border-top:1px solid var(--rule-gold);
  border-right:1px solid var(--rule-gold); z-index:-1;
}

.themes { display:grid; gap:0; margin-top:2.5rem; }
.theme-row {
  display:grid; grid-template-columns:auto 1fr; gap:clamp(1.4rem,3vw,3rem);
  padding:2.4rem 0; border-top:1px solid var(--rule);
  align-items:start;
}
.on-navy .theme-row { border-top-color:rgba(245,238,223,0.14); }
.theme-row:last-child { border-bottom:1px solid var(--rule); }
.on-navy .theme-row:last-child { border-bottom-color:rgba(245,238,223,0.14); }
.theme-num {
  font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:clamp(1.6rem,3vw,2.4rem); color:var(--gold); line-height:1;
  min-width:2ch;
}
.theme-row h3 { margin-bottom:0.7rem; }
.on-navy .theme-row h3 { color:#f5eedf; }

/* image placeholder */
.ph {
  position:relative; background:
    linear-gradient(135deg, var(--navy-mid), var(--navy));
  border:1px solid var(--rule-gold); border-radius:2px;
  display:flex; align-items:center; justify-content:center;
  color:var(--cream-dim); text-align:center;
  font-family:'Jost',sans-serif; font-size:0.72rem; letter-spacing:0.2em;
  text-transform:uppercase; padding:2rem; overflow:hidden; min-height:280px;
}
.ph::after {
  content:''; position:absolute; inset:0;
  background:radial-gradient(60% 60% at 50% 40%, rgba(201,149,74,0.1), transparent);
}
.ph span { position:relative; z-index:2; max-width:34ch; line-height:1.8; }

/* video placeholder 16:9 */
.video-ph {
  position:relative; width:100%; aspect-ratio:16/9;
  background:linear-gradient(135deg,var(--navy-mid),var(--navy));
  border:1px solid var(--rule-gold); border-radius:3px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1.2rem; overflow:hidden;
}
.video-ph::after { content:''; position:absolute; inset:0; background:radial-gradient(55% 55% at 50% 45%, rgba(201,149,74,0.12), transparent); }
.video-ph .play {
  position:relative; z-index:2; width:74px; height:74px; border-radius:50%;
  border:1px solid var(--rule-gold); display:flex; align-items:center; justify-content:center;
}
.video-ph .play::before {
  content:''; border-left:16px solid var(--gold-lt);
  border-top:10px solid transparent; border-bottom:10px solid transparent; margin-left:4px;
}
.video-ph .label {
  position:relative; z-index:2; font-family:'Jost',sans-serif; font-size:0.72rem;
  letter-spacing:0.22em; text-transform:uppercase; color:var(--cream-dim); text-align:center;
}

/* ============================================================
   LISTEN / OPT-IN
   ============================================================ */
.optin {
  display:grid; grid-template-columns:1fr; gap:1.2rem; max-width:520px;
}
.optin form { display:flex; flex-direction:column; gap:0.9rem; }
.field-row { display:flex; gap:0.8rem; flex-wrap:wrap; }
.optin input[type=email], .optin input[type=text], .form-wrap input, .form-wrap textarea {
  width:100%; font-family:'Cormorant Garamond',serif; font-size:1.05rem;
  background:rgba(245,238,223,0.06); border:1px solid rgba(245,238,223,0.22);
  color:#f5eedf; padding:0.95rem 1.1rem; border-radius:2px; transition:border-color 0.25s;
}
.optin input::placeholder { color:rgba(245,238,223,0.4); }
.optin input:focus { border-color:var(--gold); outline:none; }
.consent {
  font-family:'Jost',sans-serif; font-weight:200; font-size:0.72rem;
  letter-spacing:0.04em; color:rgba(245,238,223,0.55); line-height:1.6;
}
.consent a { color:var(--gold-lt); text-decoration:underline; text-underline-offset:2px; }

/* ============================================================
   FORMS (Book Kate, on paper)
   ============================================================ */
.form-wrap { display:flex; flex-direction:column; gap:1.1rem; max-width:640px; }
.form-wrap.on-paper input, .form-wrap.on-paper textarea {
  background:#fff; border:1px solid var(--rule); color:var(--ink);
}
.form-wrap.on-paper input:focus, .form-wrap.on-paper textarea:focus { border-color:var(--gold); outline:none; }
.form-wrap label {
  font-family:'Jost',sans-serif; font-weight:300; font-size:0.72rem;
  letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-soft);
  margin-bottom:0.4rem; display:block;
}
.on-navy .form-wrap label { color:rgba(245,238,223,0.6); }
.form-field { display:flex; flex-direction:column; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.form-wrap textarea { min-height:150px; resize:vertical; }
.form-note {
  font-family:'Jost',sans-serif; font-weight:200; font-size:0.72rem;
  letter-spacing:0.04em; color:var(--ink-soft); line-height:1.6;
}
.on-navy .form-note { color:rgba(245,238,223,0.55); }
.form-note a, .on-navy .form-note a { color:var(--gold); }

/* ============================================================
   LOGO STRIP
   ============================================================ */
.logostrip {
  display:flex; flex-wrap:wrap; gap:clamp(1.6rem,4vw,3.4rem); align-items:center;
  opacity:0.85;
}
.logostrip span {
  font-family:'Jost',sans-serif; font-weight:300; font-size:0.95rem;
  letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-soft);
}
.on-navy .logostrip span { color:rgba(245,238,223,0.6); }

/* ============================================================
   CTA BAND
   ============================================================ */
.ctaband { text-align:center; }
.ctaband h2 { margin-bottom:1.4rem; }
.ctaband .btn-row { justify-content:center; }
.ctaband .subrow {
  margin-top:1.8rem; display:flex; gap:1.6rem; justify-content:center; flex-wrap:wrap;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background:var(--navy); color:#f5eedf; padding:clamp(3.5rem,7vw,5.5rem) var(--gutter) 2.5rem; }
.footer-grid {
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.5rem;
  padding-bottom:3rem; border-bottom:1px solid rgba(245,238,223,0.14);
}
.footer-brand .fmark {
  font-family:'Cormorant Garamond',serif; font-size:1.5rem; font-weight:300;
  letter-spacing:0.18em; text-transform:uppercase; margin-bottom:0.9rem;
}
.footer-brand p { color:rgba(245,238,223,0.6); font-size:1.02rem; max-width:34ch; }
.footer h4 {
  font-family:'Jost',sans-serif; font-weight:300; font-size:0.68rem;
  letter-spacing:0.22em; text-transform:uppercase; color:var(--gold);
  margin-bottom:1.1rem;
}
.footer ul { list-style:none; display:flex; flex-direction:column; gap:0.7rem; }
.footer a {
  color:rgba(245,238,223,0.7); text-decoration:none; font-size:1.02rem;
  font-family:'Cormorant Garamond',serif; transition:color 0.25s;
}
.footer a:hover { color:var(--gold-lt); }
.footer-base {
  max-width:var(--maxw); margin:2rem auto 0;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem;
  font-family:'Jost',sans-serif; font-weight:200; font-size:0.72rem;
  letter-spacing:0.08em; color:rgba(245,238,223,0.45);
}
.footer-base a { font-family:'Jost',sans-serif; font-size:0.72rem; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .nav-toggle { display:block; }
  .nav-links {
    position:fixed; inset:0 0 0 auto; width:min(78vw,340px);
    background:rgba(13,27,46,0.98); backdrop-filter:blur(20px);
    flex-direction:column; justify-content:center; gap:2rem;
    padding:2rem; transform:translateX(100%); transition:transform 0.4s ease;
    align-items:flex-start; border-left:1px solid var(--rule-gold);
  }
  .nav-links.open { transform:translateX(0); }
  .nav-links a { font-size:0.9rem; }
  .nav-cta { margin-top:0.5rem; }

  .split { grid-template-columns:1fr; gap:2.2rem; }
  .split.reverse .split-media { order:0; }
  .form-grid { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; gap:2rem; }

  /* HERO → full-bleed portrait on mobile */
  .hero { align-items:flex-end; }
  .hero-film { position:absolute; inset:0; right:0; height:100%; width:100%; aspect-ratio:auto; }
  .hero-film video, .hero-film img.hero-still { width:100%; height:100%; object-fit:cover; }
  .hero-fill { display:none; }
  .hero-scrim {
    background:linear-gradient(0deg, rgba(13,27,46,0.94) 4%, rgba(13,27,46,0.55) 34%, rgba(13,27,46,0.15) 66%, rgba(13,27,46,0.35) 100%);
  }
  .hero-inner { padding-bottom:clamp(2.6rem,7vh,4rem); }
  .hero-copy { max-width:100%; }
  .scroll-hint { display:none; }
}

@media (max-width:520px){
  html { font-size:16px; }
  .btn-row { width:100%; }
  .btn { justify-content:center; flex:1 1 auto; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  * { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .reveal { opacity:1; transform:none; }
  .hero-film video { display:none; }
  .hero-film img.hero-still { display:block; }
}
.hero-film img.hero-still { display:none; }

/* ============================================================
   BRAND LOGO (real mark)
   ============================================================ */
.nav-logo { display:inline-flex; align-items:center; gap:0.55rem; }
.nav-logo .nav-mark { height:24px; width:auto; flex-shrink:0; }
@media (max-width:520px){
  .nav-logo .nav-mark { height:20px; }
  .nav-logo { gap:0.45rem; }
}
.fmark-logo { width:clamp(220px,24vw,280px); height:auto; margin-bottom:1.1rem; display:block; }

/* Two-line brand wordmark in nav (with Animal Frequency) */
.nav-logo { gap:0.62rem; }
.nav-logo .nav-mark { height:23px; }
.nav-word { display:flex; flex-direction:column; line-height:1.02; }
.nav-name { font-family:'Cormorant Garamond',serif; font-weight:300; font-size:1.02rem; letter-spacing:0.16em; text-transform:uppercase; color:#f5eedf; }
.nav-sub { font-family:'Jost',sans-serif; font-weight:300; font-size:0.5rem; letter-spacing:0.34em; text-transform:uppercase; color:var(--gold-lt); margin-top:3px; }
@media (max-width:520px){
  .nav-name { font-size:0.9rem; }
  .nav-sub { font-size:0.45rem; letter-spacing:0.28em; }
  .nav-logo .nav-mark { height:20px; }
}

/* ============================================================
   BOOKER RESOURCE STRIP  (For event organisers)
   ============================================================ */
.resource-strip { border-top:1px solid var(--rule-gold); border-bottom:1px solid var(--rule-gold); padding:2.1rem 0; }
.on-navy .resource-strip { border-color:rgba(201,149,74,0.32); }
.resource-eyebrow { font-family:'Jost',sans-serif; font-weight:300; font-size:0.7rem; letter-spacing:0.28em; text-transform:uppercase; color:var(--gold); text-align:center; margin-bottom:1.5rem; }
.resource-links { list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.resource-links li { border-left:1px solid var(--rule); padding:0.5rem 1.5rem; }
.resource-links li:first-child { border-left:none; }
.on-navy .resource-links li { border-left-color:rgba(245,238,223,0.16); }
.resource-links a { display:flex; align-items:center; justify-content:space-between; gap:0.9rem; text-decoration:none; color:var(--ink); font-family:'Cormorant Garamond',serif; font-size:1.14rem; line-height:1.25; transition:color .25s; }
.on-navy .resource-links a { color:#f5eedf; }
.resource-links a .arw { color:var(--gold); transition:transform .25s; flex-shrink:0; }
.resource-links a:hover { color:var(--gold); }
.on-navy .resource-links a:hover { color:var(--gold-lt); }
.resource-links a:hover .arw { transform:translateX(3px); }
@media (max-width:820px){
  .resource-links { grid-template-columns:1fr; }
  .resource-links li { border-left:none; border-top:1px solid var(--rule); padding:1rem 0; }
  .resource-links li:first-child { border-top:none; }
  .on-navy .resource-links li { border-top-color:rgba(245,238,223,0.16); }
}

/* Showreel */
.showreel-wrap { max-width:1000px; margin:0 auto; }
.showreel-video { width:100%; border-radius:3px; box-shadow:var(--shadow); display:block; }
.onesheet-preview { max-width:520px; margin:0 auto; }

/* Visibility fix: opt-in email input on pale sections */
.on-paper-2 .optin input[type=email], .on-paper-2 .optin input[type=text] {
  background:#ffffff; border:1px solid var(--ink); color:var(--ink);
}
.on-paper-2 .optin input[type=email]::placeholder, .on-paper-2 .optin input[type=text]::placeholder { color:var(--ink-soft); }
.on-paper-2 .optin input[type=email]:focus, .on-paper-2 .optin input[type=text]:focus { border-color:var(--gold); outline:none; }

/* Direct email contact (Book Kate) */
.email-direct { margin-top:2rem; }
.email-direct .eyebrow { margin-bottom:0.55rem; }
.email-direct a {
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(1.45rem,2.6vw,2rem); font-weight:400;
  color:var(--ink); text-decoration:none;
  border-bottom:1px solid var(--gold); padding-bottom:3px;
  transition:color .25s ease, border-color .25s ease;
}
.email-direct a:hover { color:var(--gold); }

/* ============================================================
   SPEAKER SHOWREEL — portrait 9:16 YouTube embed (editorial panel)
   ============================================================ */
.showreel-portrait { width:100%; max-width:360px; margin:0 auto; }
.showreel-frame {
  position:relative; width:100%; aspect-ratio:9 / 16;
  border-radius:4px; overflow:hidden; background:#000; box-shadow:var(--shadow);
}
.showreel-frame iframe { position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
.showreel-cta { display:flex; flex-wrap:wrap; gap:0.8rem; margin-top:1.9rem; }
@media (max-width:900px){
  .showreel-portrait { max-width:min(420px, 86vw); }
  .showreel-cta { justify-content:flex-start; }
}

/* Private listening page — audio player */
.audio-player {
  margin:2rem 0 1.5rem; padding:1.1rem 1.2rem;
  background:rgba(245,238,223,0.06);
  border:1px solid var(--rule-gold); border-radius:4px;
}
.audio-player audio { width:100%; display:block; }

/* Connected Campaigns embed — brand-matched panel around the hosted form */
.cc-embed {
  width:100%; max-width:560px;
  border:1px solid var(--rule-gold); border-radius:10px;
  padding:6px; background:rgba(245,238,223,0.04);
}
.cc-embed iframe { display:block; width:100%; border-radius:8px; }

/* ============================================================
   MOBILE FIXES
   ============================================================ */
@media (max-width:900px){
  /* Put the image above the copy (mobile) for selected intro sections,
     so two photos don't stack and the photo sits under the page heading */
  .split.split--media-first .split-media { order:-1; margin-bottom:0.4rem; }

  /* Mobile menu: the scrolled nav's backdrop-filter was trapping the
     fixed menu panel inside the 64px bar. Drop it on mobile so the panel
     spans the full viewport height again. */
  .nav.scrolled { backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(13,27,46,0.97); }
  .nav-links { overflow-y:auto; }
}

/* Hero role line reads as two clean stacked lines on small screens
   instead of two ragged columns with a floating dot */
@media (max-width:600px){
  .hero-role { flex-direction:column; align-items:flex-start; gap:0.2rem; }
  .hero-role .dot { display:none; }
}

/* Decorative page-header glow must never intercept clicks (fixes tappable
   links/audio placed directly inside .pagehead, e.g. /maiden-flight-audio/) */
.pagehead::before { pointer-events:none; }
.pagehead .wrap-narrow { position:relative; z-index:2; }

/* ============================================================
   ROLLING TESTIMONIALS
   ============================================================ */
.testimonials { position:relative; max-width:760px; margin:0 auto 2.6rem; text-align:center; }
.t-slide { display:none; }
.t-slide.is-active { display:block; animation:tfade .7s ease; }
@keyframes tfade { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
.t-quote {
  font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:clamp(1.3rem,2.4vw,1.85rem); line-height:1.42; color:var(--ink);
  margin:0 auto 1.3rem; max-width:60ch; border:none; padding:0;
}
.t-quote::before { content:'\201C'; color:var(--gold); font-size:1.3em; line-height:0; vertical-align:-0.32em; margin-right:0.04em; }
.t-attr { font-family:'Jost',sans-serif; font-weight:300; font-size:0.78rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--gold); }
.t-dots { display:flex; gap:0.55rem; justify-content:center; margin-top:1.7rem; }
.t-dot { width:8px; height:8px; border-radius:50%; border:1px solid var(--rule-gold); background:transparent; cursor:pointer; padding:0; transition:background .25s, border-color .25s; }
.t-dot.is-active { background:var(--gold); border-color:var(--gold); }

/* Testimonials on navy (gold heading + beige quote) */
.on-navy .t-quote { color:#f5eedf; }
.on-navy .t-attr { color:var(--gold-lt); }
.on-navy .t-quote::before { color:var(--gold-lt); }
.on-navy .t-dot { border-color:rgba(224,180,106,0.5); }
.on-navy .t-dot.is-active { background:var(--gold-lt); border-color:var(--gold-lt); }


/* Prose lists (legal pages) */
.prose ul { margin:0 0 1.3rem 1.25rem; padding:0; list-style:disc; }
.prose li { font-size:1.18rem; color:var(--ink-mid); line-height:1.6; margin-bottom:0.5rem; max-width:64ch; }
.prose li::marker { color:var(--gold); }