/* ============================================================
   Skeleton — black, white type, small orange accents
   ============================================================ */

/* ---------- Type: Satoshi (headings) · Instrument Serif (italic accent) · Inter (body)
   Same scheme as Mahir's speaker site. Satoshi is self-hosted from
   assets/fonts/ (Fontshare / ITF free licence); the other two load from Google. */
@font-face {
  font-family: "Satoshi";
  src: url("assets/fonts/satoshi-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("assets/fonts/satoshi-500-italic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("assets/fonts/satoshi-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("assets/fonts/satoshi-700-italic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("assets/fonts/satoshi-900.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* light base — the site is white/warm-light; dark is reserved for the
     hero, page heroes, the closing CTA and the footer */
  --bg: #ffffff;                  /* sections are white */
  --bg-alt: #e9e6df;              /* deeper grey band */
  --ink: #1d1b18;
  --ink-muted: #6b655c;
  --line-light: #dfdad0;
  /* dark moments */
  --black: #17120e;               /* lifted warm charcoal — never pitch black */
  --line: #352d24;
  --orange: #d95f0e;
  --orange-deep: #a84200;
  --cta: #e0451a;                 /* orange-red for solid CTAs */
  --glow: rgba(217, 95, 14, 0.14); /* ambient orange glow for dark sections */
  --text: #f4f4f2;
  --muted: #c9c8c3;
  --paper: #f0efec;         /* light logo strip */
  --paper-text: #1d1d1b;
  --font-display: "Satoshi", "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-accent: "Instrument Serif", "Times New Roman", Georgia, serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
  --nav-h: 78px;
  --pad-x: clamp(1.25rem, 4vw, 4rem);
}

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

html {
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

a { color: inherit; text-decoration: none; }


/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 0.85rem 1.9rem;
  border-radius: 999px;
  border: 1px solid rgba(29, 27, 24, 0.4);
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  transition: all 0.25s ease;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
  .btn--outline:hover {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
  }
}
/* dark contexts (hero, page heroes, nav, video theatre, banners, closing CTA)
   keep white outlines */
.nav .btn,
.page-hero .btn,
.action .btn,
.cta-banner .btn,
.cta-final .btn {
  border-color: rgba(255, 255, 255, 0.32);
  color: var(--text);
  background: rgba(0, 0, 0, 0.25);
}
@media (hover: hover) {
  .nav .btn--outline:hover,
  .page-hero .btn--outline:hover,
  .action .btn--outline:hover,
  .cta-banner .btn--outline:hover,
  .cta-final .btn--outline:hover {
    background: #fff;
    border-color: #fff;
    color: #000;
  }
}

/* ---------- Entrance keyframes ---------- */
@keyframes rise-fade {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}
@keyframes fade-down {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}
/* opacity-only: a transform animation on .nav would make it the containing
   block for the fixed full-screen mobile menu */
@keyframes nav-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes menu-drop {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}
@keyframes portrait-in {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}
@keyframes portrait-live {
  from { scale: 1; }
  to   { scale: 1.035; }
}

/* ---------- Announcement banner (thin strip) ---------- */
.announcement {
  position: relative;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 3rem;
  background: var(--orange-deep);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 500;
  text-align: center;
  overflow: hidden;
  transition: margin-top 0.4s ease, opacity 0.4s ease;
  animation: fade-down 0.55s ease both;
}
.announcement__close {
  position: absolute;
  right: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease;
}
.announcement__close:hover { background: rgba(0, 0, 0, 0.18); }
.announcement.is-hidden {
  animation: none; /* the load animation's fill would otherwise pin opacity at 1 */
  margin-top: -90px;
  opacity: 0;
  pointer-events: none;
}

/* ---------- Navbar ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  height: var(--nav-h);
  padding: 0 var(--pad-x);
  transition: background 0.3s ease, border-color 0.3s ease;
  border-bottom: 1px solid transparent;
  animation: nav-fade 0.7s ease both 0.1s;
}
.nav.is-scrolled {
  background: rgba(23, 18, 14, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
/* logo mark (assets/logos/mahir-logo-white.png — cropped + keyed from the
   client's "Magic Logo base.png"; a black-on-transparent twin sits beside it) */
.nav__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  height: 100%;
}
.nav__logo img {
  display: block;
  height: 58px;
  width: auto;
}
.nav__links {
  display: flex;
  gap: 2rem;
  margin: 0 auto;
  font-size: 0.9rem;
  font-weight: 500;
  color: #d8d7d2;
}
.nav__links a { position: relative; padding: 0.35rem 0; white-space: nowrap; transition: color 0.2s ease; }
.nav__links a:hover, .nav__links a.is-active { color: #fff; }
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1.5px;
  background: #fff;
  transition: width 0.25s ease;
}
.nav__links a:hover::after, .nav__links a.is-active::after { width: 100%; }
.nav__cta { font-size: 0.88rem; padding: 0.75rem 1.6rem; }
.nav__burger { display: none; }
.nav__menu-cta { display: none; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: calc(100vh - var(--nav-h));
  display: flex;
  align-items: center;
  padding: clamp(2.5rem, 5vw, 4rem) var(--pad-x);
  overflow: hidden;
  isolation: isolate;
}

.hero__backdrop {
  position: absolute;
  inset: 0;
  z-index: -4;
  background: var(--black);
}

.hero__video {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) brightness(0.35) contrast(1.05);
}
.hero__video.is-unavailable { display: none; }

/* Portrait — off to the right, larger, behind the text */
.hero__portrait {
  position: absolute;
  z-index: -2;
  right: 4vw;
  bottom: 0;
  width: min(46vw, 640px);
  pointer-events: none;
  animation: portrait-in 1.3s ease both 0.15s;
}
.hero__portrait img {
  display: block;
  width: 100%;
  height: min(92vh, 800px);
  object-fit: cover;
  object-position: 50% 18%;
  filter: grayscale(1) brightness(0.85) contrast(1.05);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 74%, transparent 98%), linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 74%, transparent 98%), linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  transform-origin: 50% 100%;
  animation: portrait-live 16s ease-in-out 2s infinite alternate;
}

.hero__vignette {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(70% 45% at 20% 108%, rgba(217, 95, 14, 0.12), transparent 65%),
    linear-gradient(to right, rgba(23, 18, 14, 0.9) 0%, rgba(23, 18, 14, 0.5) 45%, rgba(23, 18, 14, 0.12) 75%),
    linear-gradient(to top, rgba(23, 18, 14, 0.9) 0%, transparent 35%);
}

.hero__content {
  position: relative;
  z-index: 1;
  text-align: left;
  width: 100%;
  max-width: 720px;
  min-width: 0;   /* flex child: don't let the nowrap CTA widen the column past the viewport */
}
.hero__eyebrow {
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 1.3vw, 1.1rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--orange);
  animation: rise-fade 0.8s cubic-bezier(0.2, 0.7, 0.25, 1) both 0.15s;
}
.hero__eyebrow span {
  color: rgba(255, 255, 255, 0.35);
  font-weight: 400;
  margin: 0 0.2rem;
}
.hero__title {
  font-family: var(--font-display);
  color: #fff;
  line-height: 0.92;
  letter-spacing: -0.035em;
  margin: 0.9rem 0 1.3rem;
  animation: rise-fade 0.9s cubic-bezier(0.2, 0.7, 0.25, 1) both 0.3s;
}
.hero__title-name {
  display: block;
  font-size: clamp(3.4rem, 7.4vw, 5.8rem);
  font-weight: 900;
}
.hero__diamond {
  font-style: normal;
  color: var(--cta);
  font-size: 0.4em;
  vertical-align: 0.9em;
  margin-left: 0.1em;
}
.hero__title-rest {
  display: block;
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.3rem, 4.8vw, 3.9rem);
  letter-spacing: 0;
  color: #f2551f;
  margin: 0.05em 0 0 clamp(2.4rem, 7vw, 6rem);
}
.hero__title-rest small {
  font-size: 0.5em;
  color: #fff;
  margin-right: 0.25em;
}
.hero__sub {
  color: #d6d3cb;
  font-size: 0.98rem;
  font-weight: 300;
  line-height: 1.7;
  max-width: none;
  margin: 0 0 1.7rem;
  animation: rise-fade 0.9s cubic-bezier(0.2, 0.7, 0.25, 1) both 0.5s;
}

/* scrollable hero testimonials */
.hero__quotes {
  max-width: 100%;
  margin-bottom: 1.9rem;
  animation: rise-fade 0.9s cubic-bezier(0.2, 0.7, 0.25, 1) both 0.65s;
}
.hero__quotes-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  outline: none;
}
.hero__quotes-track::-webkit-scrollbar { display: none; }
.hero-quote {
  flex: 0 0 100%;
  scroll-snap-align: start;
  margin: 0;
  padding-right: 1rem;
}
.hero-quote blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.55;
  color: #efece5;
}
.hero-quote figcaption {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem 0.8rem;
  margin-top: 0.7rem;
  font-size: 0.84rem;
}
.hero-quote__name { font-weight: 600; color: var(--text); }
.hero-quote__event {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
/* client logos: inverted to white so dark marks read on the dark bg */
.hero-quote__logo {
  display: inline-flex;
  align-items: center;
}
.hero-quote__logo img {
  display: block;
  height: 24px;
  width: auto;
}
/* the hotel mark is pure black — tint it to the brand gold so it reads on dark */
.hero-quote__logo--gold img {
  filter: brightness(0) invert(1) sepia(1) saturate(2.4) hue-rotate(6deg) brightness(0.78);
}
.hero__quotes-nav {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-top: 0.9rem;
}
.hero__quotes-dots { display: flex; gap: 0.5rem; }
.hero__quotes-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  transition: background 0.2s ease;
}
.hero__quotes-dots button.is-active { background: var(--orange); }
.hero__readmore {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
  border-bottom: 1px solid rgba(217, 95, 14, 0.5);
  padding-bottom: 2px;
}

.hero__actions {
  display: flex;
  justify-content: flex-start;
  gap: 1rem;
  animation: rise-fade 0.9s cubic-bezier(0.2, 0.7, 0.25, 1) both 0.8s;
}
.hero__cta {
  background: var(--cta);
  border-color: var(--cta);
  color: #fff;
}
.hero__cta strong {
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
@media (hover: hover) {
  .hero__cta:hover {
    background: #f2551f;
    border-color: #f2551f;
    transform: translateY(-2px);
  }
}

/* ---------- Sub-page hero ---------- */
.page-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(86vh, 840px);
  padding: clamp(3rem, 6vw, 5rem) var(--pad-x);
  overflow: hidden;
  isolation: isolate;
}
.page-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) brightness(0.5) contrast(1.05);
}
.page-hero__bg--top { object-position: 50% 12%; }
.page-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(70% 40% at 30% 110%, rgba(217, 95, 14, 0.12), transparent 65%),
    linear-gradient(to right, rgba(23, 18, 14, 0.92) 0%, rgba(23, 18, 14, 0.55) 45%, rgba(23, 18, 14, 0.25) 100%),
    linear-gradient(to top, var(--black), transparent 30%);
}
.page-hero__content { max-width: 680px; }
.page-hero__eyebrow {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--orange);
  animation: rise-fade 0.8s cubic-bezier(0.2, 0.7, 0.25, 1) both 0.15s;
}
.page-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5vw, 4.2rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 1rem 0 1.3rem;
  animation: rise-fade 0.9s cubic-bezier(0.2, 0.7, 0.25, 1) both 0.3s;
}
.page-hero__title em { color: var(--orange); }
.page-hero__sub {
  color: #cfcdc7;
  font-size: 1.02rem;
  font-weight: 300;
  line-height: 1.7;
  max-width: 50ch;
  margin-bottom: 2.2rem;
  animation: rise-fade 0.9s cubic-bezier(0.2, 0.7, 0.25, 1) both 0.5s;
}
.page-hero__actions {
  animation: rise-fade 0.9s cubic-bezier(0.2, 0.7, 0.25, 1) both 0.65s;
}

/* ---------- Logo strip (light) ---------- */
.logos {
  position: relative;
  z-index: 2;
  padding: clamp(2.6rem, 6vw, 4.2rem) 0;
  background: #ffffff;
  color: var(--ink);
  border-bottom: 1px solid var(--line-light);
}
.logos__heading {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  line-height: 2;
  text-transform: uppercase;
  margin-bottom: 2.4rem;
  padding: 0 var(--pad-x);
  text-align: center;
}
.logos__heading em {
  color: var(--orange);
  font-style: normal;
}
.logos__marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}
.logos__track {
  display: flex;
  align-items: center;
  gap: clamp(3rem, 7vw, 6rem);
  width: max-content;
  padding-right: clamp(3rem, 7vw, 6rem);
  animation: marquee 36s linear infinite;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.logo-img {
  display: block;
  height: 42px;
  width: auto;
  max-width: 170px;
  object-fit: contain;
  flex-shrink: 0;
}

/* ---------- Occasions (chunky playing cards) ---------- */
.occasions {
  position: relative;
  background: var(--bg);
  padding: clamp(4.5rem, 9vw, 7rem) 0 clamp(4rem, 8vw, 6rem);
  overflow: hidden;
}
.occasions__header {
  text-align: center;
  padding: 0 var(--pad-x);
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.occasions__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.9rem, 2.5vw, 1.6rem);
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.4vw, 3.4rem);
  font-weight: 900;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.occasions__title em {
  color: var(--orange);
  font-style: italic;
}
.occasions__line {
  width: clamp(28px, 6vw, 72px);
  height: 1px;
  background: var(--orange);
  opacity: 0.8;
  flex-shrink: 0;
}
.occasions__sub {
  color: var(--ink-muted);
  font-size: 0.98rem;
  font-weight: 300;
  margin-top: 0.9rem;
}
.occasions__more {
  text-align: center;
  margin-top: 0.4rem;
}

/* the deck: four cards fanned out like a hand — outer cards tilt harder and
   sit lower. Cards start with a hairline gap; the tilt makes the lower
   corners cross (later cards on top) without covering a neighbour's copy. */
.occasions__deck {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 1.6rem var(--pad-x) 5.5rem;
}
.occasions__deck .occ-card { margin-right: 4px; }
.occasions__deck .occ-card:last-child { margin-right: 0; }

/* The card itself — thick ink border, cream face, suit colour drives the accents */
.occ-card {
  --suit: #1a1512;                       /* spades & clubs */
  --suit-soft: rgba(26, 21, 18, 0.14);
  --face: #f6efe1;
  position: relative;
  flex-shrink: 0;
  width: clamp(250px, 21vw, 315px);
  display: flex;
  flex-direction: column;
  background: var(--face);
  color: #1a1512;
  border: 3px solid #1a1512;
  border-radius: 26px;
  padding: 0.95rem 0.95rem 1.15rem;
  box-shadow: 0 30px 55px -24px rgba(43, 32, 18, 0.4);
  opacity: 0;
  transform: translateY(70px) rotate(0deg);
  transition: transform 0.6s cubic-bezier(0.22, 0.8, 0.3, 1), opacity 0.5s ease, box-shadow 0.3s ease;
}
.occ-card--red {
  --suit: #d2321c;                       /* hearts & diamonds */
  --suit-soft: rgba(210, 50, 28, 0.16);
}
/* dealt in once the section scrolls into view (JS staggers this) */
.occ-card.is-dealt {
  opacity: 1;
  transform: rotate(var(--rot, 0deg)) translateY(var(--ty, 0px));
}
.occ-card:nth-child(4n+1) { --rot: -12deg; --ty: 44px; }
.occ-card:nth-child(4n+2) { --rot: -4deg; --ty: 8px; }
.occ-card:nth-child(4n+3) { --rot: 4deg; --ty: 8px; }
.occ-card:nth-child(4n+4) { --rot: 12deg; --ty: 44px; }
/* hover pulls the card up out of the hand, keeping its tilt */
@media (hover: hover) {
  .occ-card:hover {
    transform: rotate(var(--rot, 0deg)) translateY(calc(var(--ty, 0px) - 22px)) scale(1.02);
    z-index: 10;
    box-shadow: 0 40px 65px -24px rgba(43, 32, 18, 0.5), 0 0 0 8px var(--suit-soft);
  }
}
/* printed inner frame, in the suit colour */
.occ-card::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 2px solid var(--suit);
  border-radius: 18px;
  opacity: 0.55;
  pointer-events: none;
}

/* photo block with the corner indices */
.occ-card__photo-wrap {
  position: relative;
}
.occ-card__photo {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 17px;
}
/* corner index — big rank over a big suit, like a real card but louder */
.occ-card__index {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.35rem 0.6rem 0.45rem;
  background: var(--face);
  border-radius: 17px 0 20px 0;
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 0.8;
  color: var(--suit);
}
.occ-card__index b {
  font-size: 2.5rem;
  font-weight: 900;
  letter-spacing: -0.05em;
}
.occ-card__index i {
  font-style: normal;
  font-size: 1.75rem;
  margin-top: 0.15rem;
}
.occ-card__index--bottom {
  top: auto;
  left: auto;
  right: 0;
  bottom: 0;
  transform: rotate(180deg);
}
/* copy */
.occ-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.6rem 0.5rem 0;
}
.occ-card__eyebrow {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--suit);
}
.occ-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 1.7vw, 2.05rem);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin: 0.5rem 0 0.65rem;
}
.occ-card__desc {
  font-size: 0.9rem;
  line-height: 1.55;
  color: #4d463c;
  max-width: 26ch;
  margin-bottom: 1.3rem;
}
.occ-card__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.45rem;
  border-radius: 999px;
  background: #1a1512;
  color: var(--face);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: background 0.25s ease;
}
.occ-card__cta span { transition: transform 0.25s ease; }
/* whole card is the link */
.occ-card__cta::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 26px;
}
@media (hover: hover) {
  .occ-card:hover .occ-card__cta { background: var(--cta); color: #fff; }
  .occ-card:hover .occ-card__cta span { transform: translateX(4px); }
}

/* tablet: two pairs, each pair fanned gently */
@media (max-width: 1100px) {
  .occasions__deck { padding-bottom: 4rem; }
  .occasions__deck .occ-card {
    width: min(315px, 42vw);
    margin-right: 6px;
    margin-bottom: 2.2rem;
  }
  .occasions__deck .occ-card:nth-child(2n) { margin-right: 0; }
  .occ-card:nth-child(4n+1) { --rot: -4deg; --ty: 10px; }
  .occ-card:nth-child(4n+2) { --rot: 4deg; --ty: 10px; }
  .occ-card:nth-child(4n+3) { --rot: -4deg; --ty: 10px; }
  .occ-card:nth-child(4n+4) { --rot: 4deg; --ty: 10px; }
}
/* phones: one straight stack */
@media (max-width: 560px) {
  .occasions__deck { padding-bottom: 2.4rem; }
  .occasions__deck .occ-card {
    width: min(400px, 100%);
    margin: 0 0 1.6rem;
  }
  .occ-card { --rot: 0deg !important; --ty: 0px !important; }
  .occ-card__photo { aspect-ratio: 4 / 3; }
}

/* ---------- Occasion detail blocks (occasions page) ---------- */
.occ-block {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  min-height: min(64vh, 620px);
  background: var(--bg);
  border-top: 1px solid var(--line-light);
}
.occ-block__media {
  position: relative;
  overflow: hidden;
  perspective: 1200px;
}
.occ-block__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.9);
  transform-origin: left center;
  transform: rotateY(-55deg) translateX(-40px);
  opacity: 0;
  transition: transform 1s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.6s ease;
}
.occ-block.in-view .occ-block__media img {
  transform: none;
  opacity: 1;
}
/* one-off light sweep across the photo once it lands */
.occ-block__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.16) 50%, transparent 58%);
  transform: translateX(-130%);
  pointer-events: none;
}
.occ-block.in-view .occ-block__media::after {
  animation: occ-shine 1.1s ease 0.7s forwards;
}
@keyframes occ-shine {
  to { transform: translateX(130%); }
}
.occ-block__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(3rem, 6vw, 5rem) clamp(2.5rem, 6vw, 6rem);
}
/* staggered content reveal */
.occ-block__num {
  transform: translateX(-30px);
  filter: blur(6px);
  transition: opacity 0.8s ease 0.15s, transform 0.8s cubic-bezier(0.2, 0.7, 0.25, 1) 0.15s, filter 0.8s ease 0.15s;
}
.occ-block__eyebrow,
.occ-block__title,
.occ-block__desc,
.occ-block__tags,
.occ-block__cta {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.25, 1);
}
.occ-block.in-view .occ-block__num {
  transform: none;
  filter: blur(0);
}
.occ-block.in-view .occ-block__eyebrow,
.occ-block.in-view .occ-block__title,
.occ-block.in-view .occ-block__desc,
.occ-block.in-view .occ-block__tags,
.occ-block.in-view .occ-block__cta {
  opacity: 1;
  transform: none;
}
.occ-block.in-view .occ-block__eyebrow { transition-delay: 0.25s; }
.occ-block.in-view .occ-block__title { transition-delay: 0.35s; }
.occ-block.in-view .occ-block__desc { transition-delay: 0.45s; }
.occ-block.in-view .occ-block__tags { transition-delay: 0.55s; }
.occ-block.in-view .occ-block__cta { transition-delay: 0.65s; }
.occ-block__num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(3.6rem, 6vw, 5.4rem);
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
  opacity: 0.1;
  user-select: none;
}
.occ-block__eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--orange);
  margin-top: -1.4rem;
}
.occ-block__title {
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 3.8vw, 3.3rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0.7rem 0 1.1rem;
}
.occ-block__desc {
  color: var(--ink-muted);
  font-size: 0.98rem;
  line-height: 1.75;
  max-width: 62ch;
}
.occ-block__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.6rem;
}
.occ-block__tags span {
  padding: 0.45rem 1rem;
  border: 1px solid rgba(217, 95, 14, 0.4);
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--orange);
  white-space: nowrap;
}
.occ-block__cta {
  display: block;
  margin-top: 2.2rem;
  padding: 1.1rem 1rem;
  background: var(--cta);
  border-radius: 10px;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #fff;
  transition: background 0.25s ease, transform 0.25s ease;
}
@media (hover: hover) {
  .occ-block__cta:hover {
    background: #f2551f;
    transform: translateY(-2px);
  }
}

@media (max-width: 900px) {
  .occ-block { grid-template-columns: 1fr; min-height: 0; }
  .occ-block__media { height: 280px; }
}

/* ---------- Get a Quote CTA banner ---------- */
.cta-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.6rem 3rem;
  padding: clamp(2.4rem, 5vw, 3.4rem) var(--pad-x);
  background: radial-gradient(70% 140% at 50% 150%, rgba(217, 95, 14, 0.12), transparent 60%), #1b1511;
  border-top: 1px solid var(--line);
  text-align: center;
}
.cta-banner__text {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 500;
  color: #fff;
  letter-spacing: -0.01em;
}
.cta-banner__text em {
  font-style: italic;
}

/* ---------- Watch in action ---------- */
.action {
  background: radial-gradient(75% 90% at 88% 115%, var(--glow), transparent 60%), var(--black);
  border-top: 1px solid var(--line);
  padding: clamp(4.5rem, 9vw, 7rem) var(--pad-x) clamp(4rem, 8vw, 6rem);
  text-align: center;
}
.action__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.9rem, 2.5vw, 1.6rem);
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.4vw, 3.4rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
}
.action__line {
  width: clamp(28px, 6vw, 72px);
  height: 1px;
  background: var(--orange);
  opacity: 0.8;
  flex-shrink: 0;
}
.action__title em {
  color: var(--orange);
  font-style: italic;
}
.action__sub {
  color: var(--muted);
  font-size: 0.98rem;
  font-weight: 300;
  margin-top: 0.9rem;
}
.action__frame {
  position: relative;
  width: min(360px, 86vw);
  aspect-ratio: 9 / 16;
  margin: clamp(2rem, 4vw, 3rem) auto;
  border-radius: 18px;
  overflow: hidden;
  background:
    radial-gradient(90% 70% at 50% 30%, #261e16, #16110d 75%);
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}
.action__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.action__frame.is-empty .action__video { display: none; }
.action__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  padding-left: 5px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  cursor: pointer;
  transition: transform 0.25s ease, background 0.25s ease;
}
.action__play:hover {
  transform: translate(-50%, -50%) scale(1.08);
  background: rgba(0, 0, 0, 0.65);
}
.action__frame.is-playing .action__play,
.action__frame.is-empty .action__play { display: none; }
.action__coming {
  display: none;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
}
.action__frame.is-empty .action__coming { display: block; }

/* YouTube click-to-play: poster + play button, iframe injected on click */
.action__stage {
  max-width: 940px;
  margin: clamp(2rem, 4vw, 3rem) auto 0;
}
.yt {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background: #16110d;
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  cursor: pointer;
  isolation: isolate;
}
.yt--wide { aspect-ratio: 16 / 9; width: 100%; }
.yt--tall { aspect-ratio: 9 / 16; width: min(340px, 86vw); margin: 0 auto; }
.yt__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.72);
  transition: transform 0.7s ease, filter 0.3s ease;
}
.yt:hover .yt__poster { transform: scale(1.03); filter: brightness(0.85); }
.yt__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  padding-left: 6px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  background: rgba(224, 69, 26, 0.9);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  cursor: pointer;
  transition: transform 0.25s ease, background 0.25s ease;
}
.yt:hover .yt__play {
  transform: translate(-50%, -50%) scale(1.08);
  background: #f2551f;
}
.yt iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.yt.is-playing .yt__poster,
.yt.is-playing .yt__play,
.yt.is-playing { cursor: default; }

.action__more { margin-top: clamp(1.8rem, 3.5vw, 2.6rem); }
.action__more-btn {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 1rem 2rem;
  white-space: normal;
  text-align: center;
}
.action__more-btn[aria-expanded="true"] {
  background: #fff;
  border-color: #fff;
  color: #000;
}
.action__panel {
  max-width: 940px;
  margin: clamp(1.8rem, 3.5vw, 2.6rem) auto 0;
  display: grid;
  justify-items: center;
  gap: 1.3rem;
  animation: rise-fade 0.6s cubic-bezier(0.2, 0.7, 0.25, 1) both;
}
.action__panel[hidden] { display: none; }
.action__panel-caption {
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--text);
}
.action__panel-caption span {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}
.action__yt-link {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
  border-bottom: 1px solid rgba(217, 95, 14, 0.5);
  padding-bottom: 2px;
}

/* gallery layout (videos page) */
.action__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  max-width: 1150px;
  margin: clamp(2rem, 4.5vw, 3.2rem) auto 0;
}
.action__item { margin: 0; }
.action__grid .action__frame {
  width: 100%;
  margin: 0;
}
.action__caption {
  margin-top: 0.9rem;
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--text);
  text-align: center;
}
.action__caption span {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (max-width: 900px) {
  .action__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .action__grid { grid-template-columns: 1fr; }
}

/* ---------- Testimonials ---------- */
.testimonials {
  background: var(--bg);
  border-top: 1px solid var(--line-light);
  padding: clamp(4.5rem, 9vw, 7rem) var(--pad-x) clamp(4.5rem, 9vw, 7rem);
  text-align: center;
}
.testimonials__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.9rem, 2.5vw, 1.6rem);
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.4vw, 3.4rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.testimonials__title em {
  color: var(--orange);
  font-style: italic;
}
.testimonials__line {
  width: clamp(28px, 6vw, 72px);
  height: 1px;
  background: var(--orange);
  opacity: 0.8;
  flex-shrink: 0;
}
.testimonials__sub {
  color: var(--ink-muted);
  font-size: 0.98rem;
  font-weight: 300;
  margin-top: 0.9rem;
}

.stars {
  color: var(--orange);
  font-size: 1.05rem;
  letter-spacing: 0.3em;
}
.stars--small { font-size: 0.8rem; letter-spacing: 0.24em; }

/* Featured quote */
.testimonials__feature {
  max-width: 780px;
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
}
.testimonials__feature blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink);
  margin: 1.2rem 0 1.4rem;
}
.testimonials__feature figcaption {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink);
}
.testimonials__feature .byline__name { font-size: 0.95rem; }

/* Supporting review cards */
.testimonials__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 1.5rem;
  max-width: 1150px;
  margin: clamp(2.8rem, 5vw, 4rem) auto 0;
}
.t-card {
  position: relative;
  overflow: hidden;
  text-align: left;
  padding: 1.9rem 1.8rem 1.7rem;
  background: #ffffff;
  border: 1px solid var(--line-light);
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(63, 48, 25, 0.07);
}

/* every review, in two counter-scrolling rows (full-bleed) */
.testimonials__rows {
  display: grid;
  gap: 1.4rem;
  margin: clamp(2.8rem, 5vw, 4rem) calc(-1 * var(--pad-x)) 0;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}
.t-row { overflow: hidden; }
.t-row__track {
  display: flex;
  align-items: stretch;
  gap: 1.4rem;
  width: max-content;
  padding-right: 1.4rem;
  animation: marquee 95s linear infinite;
}
.t-row--reverse .t-row__track { animation-direction: reverse; animation-duration: 85s; }
/* Cards are wide enough to show every review in full — no clamping, so the
   longest ones set the row height and shorter ones pin their byline to the
   bottom to stay level. */
.t-row .t-card {
  width: min(470px, 84vw);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}
.t-row .t-card figcaption { margin-top: auto; }
/* whole card links to the full review */
.t-card__more {
  position: absolute;
  inset: 0;
  border-radius: 14px;
}
.t-card__more span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.t-card__suit {
  position: absolute;
  right: 2px;
  bottom: -26px;
  font-family: var(--font-display);
  font-size: 7rem;
  line-height: 1;
  color: var(--ink);
  opacity: 0.05;
  pointer-events: none;
}
.t-card__suit--red {
  color: var(--orange);
  opacity: 0.1;
}
.t-card blockquote {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #4c463d;
  margin: 0.9rem 0 1.2rem;
}
.t-card figcaption {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink);
}

.testimonials__more {
  text-align: center;
  margin-top: clamp(2.4rem, 4vw, 3.2rem);
}

/* Optional company logos on corporate reviews */
.testimonials__feature-logo {
  display: inline-block;
  margin-top: 1.1rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  color: #78746b;
  white-space: nowrap;
}
.testimonials__feature-logo-img {
  display: inline-block;
  margin-top: 1.1rem;
  max-height: 30px;
  max-width: 120px;
  filter: grayscale(1) brightness(1.6);
  opacity: 0.65;
}
.t-card figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.t-card__logo {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: #6e6a61;
  white-space: nowrap;
}
.t-card__logo-img {
  max-height: 24px;
  max-width: 96px;
  filter: grayscale(1) brightness(1.6);
  opacity: 0.6;
}

/* ---------- Review attribution (three lines: name / role or party · venue / date) ---------- */
.byline {
  display: block;
  min-width: 0;
}
.byline__name {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink);
}
.byline__meta {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.55;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.byline__date {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.74rem;
  font-weight: 400;
  color: #92897b;
}
/* client logos show in their true colours on the light cards */
.byline__logo--color { filter: none !important; opacity: 1 !important; }
.byline__logo {
  display: block;
  flex-shrink: 0;
  height: 22px;
  width: auto;
  max-width: 96px;
  object-fit: contain;
}
.byline--centered { text-align: center; margin-top: 0.2rem; }

/* ---------- Review wall (reviews page) ---------- */
.review-wall {
  background: var(--bg);
  border-top: 1px solid var(--line-light);
  padding: clamp(4.5rem, 9vw, 7rem) var(--pad-x);
  text-align: center;
}
.review-wall__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.9rem, 2.5vw, 1.6rem);
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.4vw, 3.4rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.review-wall__title em {
  color: var(--orange);
  font-style: italic;
}
.review-wall__line {
  width: clamp(28px, 6vw, 72px);
  height: 1px;
  background: var(--orange);
  opacity: 0.8;
  flex-shrink: 0;
}
.review-wall__sub {
  color: var(--ink-muted);
  font-size: 0.98rem;
  font-weight: 300;
  margin-top: 0.9rem;
}
.review-wall__summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: clamp(1.8rem, 3vw, 2.6rem);
}
.review-wall__score {
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1;
}
.review-wall__count {
  font-size: 0.9rem;
  color: var(--ink-muted);
}
.stars--google { color: #fbbc04; letter-spacing: 0.12em; font-size: 1.35rem; }
.review-wall__google {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.review-wall__google:hover { color: var(--orange); border-bottom-color: currentColor; }
.review-wall__google-arrow { font-size: 0.85em; color: var(--ink-muted); }
@media (max-width: 520px) {
  .review-wall__summary--google { flex-wrap: wrap; gap: 0.6rem 0.9rem; }
}
.review-wall__grid {
  columns: 3 280px;
  column-gap: 1.4rem;
  max-width: 1200px;
  margin: clamp(2.2rem, 4vw, 3.2rem) auto 0;
  text-align: left;
}
.rw-card {
  break-inside: avoid;
  margin: 0 0 1.4rem;
  padding: 1.7rem 1.6rem 1.5rem;
  background: #ffffff;
  border: 1px solid var(--line-light);
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(63, 48, 25, 0.07);
}
.rw-card blockquote {
  font-size: 0.94rem;
  line-height: 1.65;
  color: #4c463d;
  margin: 0.8rem 0 1.1rem;
}
.rw-card--featured {
  border-color: rgba(217, 95, 14, 0.4);
  background: linear-gradient(160deg, rgba(217, 95, 14, 0.07), transparent 55%), #ffffff;
}
.rw-card--featured blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.12rem;
  line-height: 1.5;
  color: var(--ink);
}
.rw-card figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink);
}
.rw-card__logo {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: #6e6a61;
  white-space: nowrap;
}

/* ---------- About ---------- */
.about {
  background: var(--bg);
  border-top: 1px solid var(--line-light);
  padding: clamp(4.5rem, 9vw, 7rem) var(--pad-x);
}
.about__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.9rem, 2.5vw, 1.6rem);
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.4vw, 3.4rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-align: center;
}
.about__title em {
  color: var(--orange);
  font-style: italic;
}
.about__line {
  width: clamp(28px, 6vw, 72px);
  height: 1px;
  background: var(--orange);
  opacity: 0.8;
  flex-shrink: 0;
}
.about__grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
  max-width: 1100px;
  margin: clamp(2.8rem, 5vw, 4rem) auto 0;
}
/* portrait in a tilted card-style frame */
.about__media {
  position: relative;
  transform: rotate(-2deg);
  max-width: 400px;
  justify-self: center;
}
.about__media::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: rotate(3.5deg);
  border: 1px solid rgba(217, 95, 14, 0.35);
  border-radius: 16px;
}
.about__media img {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 12%;
  border-radius: 16px;
  border: 1px solid var(--line);
  filter: grayscale(1) brightness(0.95);
}
.about__copy p {
  color: var(--ink-muted);
  font-size: 0.98rem;
  line-height: 1.75;
  max-width: 58ch;
  margin-bottom: 1.2rem;
}
.about__stats {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.8rem;
  margin: 1.8rem 0 2.2rem;
}
.about__stat-num {
  display: block;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 600;
  color: #fff;
}
.about__stat-num { color: var(--orange); }
.about__stat-label {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

@media (max-width: 900px) {
  .about__grid { grid-template-columns: 1fr; }
  .about__media { max-width: 320px; }
}

/* ---------- Full-screen closing CTA ---------- */
.cta-final {
  position: relative;
  min-height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(4rem, 8vw, 6rem) var(--pad-x);
  border-top: 1px solid var(--line);
  background:
    radial-gradient(55% 45% at 50% 45%, rgba(217, 95, 14, 0.1), transparent 70%),
    radial-gradient(95% 60% at 50% 118%, var(--glow), transparent 60%),
    var(--black);
  overflow: hidden;
}
.cta-final__suit {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -52%);
  font-family: var(--font-display);
  font-size: clamp(22rem, 55vw, 40rem);
  line-height: 1;
  color: #fff;
  opacity: 0.025;
  pointer-events: none;
  user-select: none;
}
.cta-final__title {
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5.6vw, 4.6rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: #fff;
  max-width: 18ch;
}
.cta-final__title em {
  color: var(--orange);
  font-style: italic;
}
.cta-final__sub {
  position: relative;
  color: var(--muted);
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  font-weight: 300;
  max-width: 52ch;
  margin: 1.5rem 0 2.6rem;
}
.btn--big {
  font-size: 1.05rem;
  padding: 1.1rem 2.8rem;
}
.cta-final__note {
  position: relative;
  margin-top: 1.8rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #6e6a61;
}

/* ---------- Timeline ---------- */
.timeline {
  background: var(--bg);
  border-top: 1px solid var(--line-light);
  padding: clamp(4.5rem, 9vw, 7rem) var(--pad-x);
  text-align: center;
}
.timeline__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.9rem, 2.5vw, 1.6rem);
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.4vw, 3.4rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.timeline__title em {
  color: var(--orange);
  font-style: italic;
}
.timeline__hline {
  width: clamp(28px, 6vw, 72px);
  height: 1px;
  background: var(--orange);
  opacity: 0.8;
  flex-shrink: 0;
}
.timeline__sub {
  color: var(--ink-muted);
  font-size: 0.98rem;
  font-weight: 300;
  margin-top: 0.9rem;
}
.timeline__list {
  position: relative;
  max-width: 1150px;
  margin: clamp(1.5rem, 3vw, 2.5rem) auto 0;
  text-align: left;
}
.timeline__list::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line-light);
  transform: translateX(-50%);
}
.timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 8vw, 6.5rem);
  align-items: center;
  padding: clamp(2.5rem, 5vw, 4rem) 0;
}
.timeline__item:nth-child(even) .timeline__media { order: 2; }
.timeline__item:nth-child(even) .timeline__body { order: 1; }
.timeline__num {
  position: absolute;
  left: 50%;
  top: clamp(2.5rem, 5vw, 4rem);
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--orange-deep);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  z-index: 1;
}
.timeline__media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--line);
  filter: brightness(0.92);
}
.timeline__body h3 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  font-weight: 600;
  color: var(--ink);
}
.timeline__body p {
  color: var(--ink-muted);
  font-size: 0.96rem;
  line-height: 1.7;
  max-width: 48ch;
  margin-top: 0.9rem;
}
.timeline__tags {
  font-size: 0.68rem !important;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #92897b !important;
  margin-top: 1.2rem !important;
}
/* about: chapter subtitles, e.g. "(the 'ingredients')" */
.timeline__aside {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
  font-size: 0.78em;
  letter-spacing: 0;
  color: var(--orange);
}
.timeline__cta { margin-top: 1.8rem; }
/* two photos per chapter: the second is dealt over a corner of the first,
   always on the side facing the text */
.timeline__media img { aspect-ratio: 4 / 3; }
.timeline__media--duo {
  position: relative;
  padding-bottom: 16%;
}
.timeline__media--duo .timeline__inset {
  position: absolute;
  right: -7%;
  bottom: 0;
  width: 50%;
  aspect-ratio: 16 / 10;
  border: 5px solid #fff;
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
  filter: none;
  transform: rotate(3deg);
}
.timeline__media--duo .timeline__inset--tall { width: 36%; aspect-ratio: 3 / 4; }
.timeline__item:nth-child(even) .timeline__inset {
  right: auto;
  left: -7%;
  transform: rotate(-3deg);
}

@media (max-width: 900px) {
  .timeline__media--duo .timeline__inset,
  .timeline__item:nth-child(even) .timeline__inset { left: auto; right: -2%; }
  .timeline__list::before { left: 20px; }
  .timeline__item {
    grid-template-columns: 1fr;
    gap: 1.4rem;
    padding-left: 3.6rem;
  }
  .timeline__item:nth-child(even) .timeline__media { order: 0; }
  .timeline__item:nth-child(even) .timeline__body { order: 0; }
  .timeline__num {
    left: 20px;
    top: clamp(2.5rem, 5vw, 4rem);
    width: 34px;
    height: 34px;
    font-size: 0.7rem;
  }
}

/* ---------- FAQ ---------- */
.faq {
  background: var(--bg);
  border-top: 1px solid var(--line-light);
  padding: clamp(4.5rem, 9vw, 7rem) var(--pad-x);
  text-align: center;
}
.faq__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.9rem, 2.5vw, 1.6rem);
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.4vw, 3.4rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.faq__title em {
  color: var(--orange);
  font-style: italic;
}
.faq__line {
  width: clamp(28px, 6vw, 72px);
  height: 1px;
  background: var(--orange);
  opacity: 0.8;
  flex-shrink: 0;
}
.faq__sub {
  color: var(--ink-muted);
  font-size: 0.98rem;
  font-weight: 300;
  margin-top: 0.9rem;
}
.faq__list {
  max-width: 760px;
  margin: clamp(2.4rem, 4.5vw, 3.4rem) auto 0;
  text-align: left;
  border-top: 1px solid var(--line-light);
}
.faq__item { border-bottom: 1px solid var(--line-light); }
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.3rem 0.2rem;
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  transition: color 0.2s ease;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: #000; }
.faq__icon {
  font-family: var(--font-body);
  font-size: 1.3rem;
  font-weight: 300;
  line-height: 1;
  color: var(--ink-muted);
  flex-shrink: 0;
  transition: transform 0.25s ease, color 0.25s ease;
}
.faq__item[open] .faq__icon {
  transform: rotate(45deg);
  color: var(--orange);
}
.faq__answer {
  padding: 0 2.8rem 1.4rem 0.2rem;
  color: var(--ink-muted);
  font-size: 0.95rem;
  line-height: 1.7;
  max-width: none;
}
.faq__answer p + p,
.faq__answer p + ul { margin-top: 0.8rem; }
.faq__answer ul { padding-left: 1.2rem; list-style: disc; }
.faq__answer li { margin-top: 0.2rem; }
.faq__answer li::marker { color: var(--orange); }
.faq__answer a {
  color: var(--orange-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.faq__answer a:hover { color: var(--orange); }

/* ---------- Get a Quote ---------- */
.quote {
  background: var(--bg);
  border-top: 1px solid var(--line-light);
  padding: clamp(4.5rem, 9vw, 7rem) var(--pad-x);
  text-align: center;
}
.quote__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.9rem, 2.5vw, 1.6rem);
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.4vw, 3.4rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.quote__title em {
  color: var(--orange);
  font-style: italic;
}
.quote__line {
  width: clamp(28px, 6vw, 72px);
  height: 1px;
  background: var(--orange);
  opacity: 0.8;
  flex-shrink: 0;
}
.quote__sub {
  color: var(--ink-muted);
  font-size: 0.98rem;
  font-weight: 300;
  margin-top: 0.9rem;
}

/* split layout (contact page): info sidebar + form */
.quote--split {
  display: grid;
  grid-template-columns: 0.85fr 1.4fr;
  gap: clamp(3rem, 6vw, 5.5rem);
  align-items: start;
  max-width: 1280px;
  margin: 0 auto;
  text-align: left;
}
.quote--split .quote__form {
  max-width: none;
  margin: 0;
}
.quote__info-title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.quote__info-title em {
  color: var(--orange);
  font-style: italic;
}
.quote__info-blurb {
  color: var(--ink-muted);
  font-size: 0.95rem;
  line-height: 1.7;
  max-width: 40ch;
  margin-top: 0.9rem;
}
.quote__contact {
  list-style: none;
  display: grid;
  gap: 1.1rem;
  margin-top: 2.1rem;
}
.quote__contact li {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.quote__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid var(--line-light);
  color: var(--ink-muted);
}
.quote__val { font-size: 0.95rem; color: var(--ink); }
a.quote__val { text-decoration: none; transition: color 0.2s ease; }
a.quote__val:hover { color: var(--orange); }
.quote__val small {
  display: block;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #92897b;
  margin-bottom: 0.15rem;
}
.quote__avail {
  margin-top: 2.1rem;
  padding: 0.15rem 0 0.15rem 1.2rem;
  border-left: 2px solid var(--orange);
  font-size: 0.88rem;
  line-height: 1.65;
  color: #4c463d;
  max-width: 44ch;
}
.quote__avail strong { color: var(--orange); font-weight: 600; }
.quote__socials {
  display: flex;
  gap: 0.8rem;
  margin-top: 2.1rem;
}
.quote__socials a {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid var(--line-light);
  color: var(--ink-muted);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.quote__socials a:hover { color: var(--ink); border-color: rgba(217, 95, 14, 0.6); }

@media (max-width: 1024px) {
  .quote--split { grid-template-columns: 1fr; }
}

/* the form */
.quote__form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem 1.5rem;
  align-content: start;
  max-width: 860px;
  margin: clamp(2.4rem, 4.5vw, 3.4rem) auto 0;
  text-align: left;
}
.quote__form label {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-align: left;
}
.quote__form label input,
.quote__form label select,
.quote__form label textarea { margin-top: 0.55rem; }
.quote__form .req { display: inline; color: var(--orange); }
.quote__full { grid-column: 1 / -1; }
.quote__form input,
.quote__form select,
.quote__form textarea {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid var(--line-light);
  border-radius: 8px;
  padding: 0.9rem 1rem;
  width: 100%;
  transition: border-color 0.2s ease;
  resize: vertical;
}
.quote__form input::placeholder,
.quote__form textarea::placeholder { color: #b3aa9b; }
/* radio groups */
.quote__fieldset {
  border: none;
  padding: 0;
  margin: 0;
}
.quote__fieldset legend {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: 0;
  margin-bottom: 0.9rem;
}
.quote__radios {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.9rem 1.5rem;
}
.quote__radios--compact {
  grid-template-columns: repeat(auto-fill, minmax(115px, 1fr));
}
.quote__form label.quote__radio {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
  cursor: pointer;
}
.quote__form .quote__radio input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  padding: 0;
  margin: 0;
  border: 1.5px solid #b3aa9b;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.quote__form .quote__radio input[type="radio"]:hover { border-color: var(--ink-muted); }
.quote__form .quote__radio input[type="radio"]:checked {
  border-color: var(--orange);
  background: radial-gradient(circle, var(--orange) 0 40%, transparent 47%);
}
.quote__form input:focus,
.quote__form select:focus,
.quote__form textarea:focus {
  outline: none;
  border-color: var(--orange);
}
.quote__form input[type="datetime-local"] { color-scheme: light; }
.quote__submit {
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #fff;
  background: var(--cta);
  border: none;
  border-radius: 10px;
  padding: 1.15rem 1rem;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease;
}
@media (hover: hover) {
  .quote__submit:hover {
    background: #f2551f;
    transform: translateY(-2px);
  }
}
.quote__note {
  text-align: center;
  font-size: 0.8rem;
  color: #92897b;
}
.quote__status {
  text-align: center;
  font-size: 0.92rem;
  font-weight: 500;
  color: #3f8f4a;
}
.quote__status.is-error { color: #c73a1e; }
/* honeypot — visually removed, still in the form for bots */
.quote__hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 620px) {
  .quote__form { grid-template-columns: 1fr; }
}

/* ---------- Footer ---------- */
.footer {
  background: radial-gradient(100% 100% at 50% 135%, rgba(217, 95, 14, 0.1), transparent 60%), #191410;
  border-top: 1px solid var(--line);
  padding: clamp(3.5rem, 7vw, 5.5rem) var(--pad-x) 2rem;
}
.footer__top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 2.5rem;
  max-width: 1200px;
  margin: 0 auto;
}
.footer__logo {
  display: inline-block;
  margin-bottom: 1.1rem;
}
.footer__logo img {
  display: block;
  height: 64px;
  width: auto;
}
.footer__blurb {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.7;
  max-width: 36ch;
}
.footer__heading {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 1rem;
}
.footer ul {
  list-style: none;
  display: grid;
  gap: 0.55rem;
  color: var(--muted);
  font-size: 0.9rem;
}
.footer a { transition: color 0.2s ease; }
.footer__socials {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.4rem;
}
.footer__socials a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--muted);
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}
.footer .footer__socials a:hover { color: #fff; border-color: var(--orange); background: rgba(217, 95, 14, 0.12); }
.footer a:hover { color: #fff; }
.footer__fine {
  max-width: 1200px;
  margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  color: #625d53;
  font-size: 0.78rem;
}

@media (max-width: 900px) {
  .footer__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .footer__top { grid-template-columns: 1fr; gap: 2rem; }
}

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .nav__links { gap: 1.3rem; font-size: 0.85rem; }
}
@media (max-width: 900px) {
  .nav { gap: 1rem; }
  .nav__links { display: none; }
  .nav__cta { margin-left: auto; }
  .nav__burger {
    display: grid;
    gap: 5px;
    margin-left: 0.4rem;
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
  }
  .nav__burger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--text);
    transition: transform 0.25s ease, opacity 0.2s ease;
  }

  /* open mobile menu — dropdown panel */
  .nav.menu-open {
    background: rgba(25, 20, 16, 0.97);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
  .nav.menu-open .nav__links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0;
    padding: 0.3rem var(--pad-x) 1.5rem;
    background: rgba(25, 20, 16, 0.97);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
    animation: menu-drop 0.28s ease;
  }
  .nav.menu-open .nav__links a {
    width: 100%;
    padding: 0.95rem 0;
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 5vw, 1.5rem);
    font-weight: 500;
    letter-spacing: 0;
    color: #eae7e1;
  }
  .nav.menu-open .nav__links a:not(.nav__menu-cta) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }
  .nav.menu-open .nav__links a::after { display: none; }
  .nav.menu-open .nav__links a.is-active { color: var(--orange); }
  .nav.menu-open .nav__menu-cta {
    display: block;
    margin-top: 1.3rem;
    text-align: center;
    background: var(--cta);
    color: #fff;
    font-family: var(--font-body);
    font-size: 0.85rem !important;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding: 1.05rem 1rem !important;
    border-radius: 999px;
  }
  .nav.menu-open .nav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav.menu-open .nav__burger span:nth-child(2) { opacity: 0; }
  .nav.menu-open .nav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .hero__portrait { width: 74vw; right: -12vw; opacity: 0.6; }
}
@media (max-width: 560px) {
  .announcement { font-size: 0.72rem; padding: 0.5rem 2.6rem; }
  .nav { gap: 0.6rem; }
  .nav__logo img { height: 46px; }
  .nav__cta { font-size: 0.74rem; padding: 0.55rem 0.95rem; flex-shrink: 0; }
  .nav__burger { margin-left: 0; padding: 0.4rem; flex-shrink: 0; }
  .hero__actions .btn { width: 100%; }
  .hero__cta { white-space: normal; text-align: center; padding: 0.9rem 1.2rem; line-height: 1.35; }
}

@media (max-width: 400px) {
  .nav__cta { display: none; }
  .nav__burger { margin-left: auto; }
}

/* ---------- Type system ----------
   Blocky, heavy headings in Satoshi; the one accent word per title set in
   Instrument Serif italic — the same pairing as Mahir's speaker site. */
.page-hero__title,
.action__title,
.testimonials__title,
.review-wall__title,
.about__title,
.faq__title,
.quote__title,
.timeline__title,
.cta-final__title,
.quote__info-title,
.occ-block__title,
.about__stat-num,
.review-wall__score {
  font-weight: 900;
  letter-spacing: -0.025em;
}
.cta-banner__text,
.timeline__body h3 { font-weight: 700; letter-spacing: -0.015em; }
h1 em,
h2 em,
h3 em,
.cta-banner__text em,
.quote__info-title em {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
  font-size: 1.16em;
  letter-spacing: 0;
  line-height: 1;
}
/* quotes keep Satoshi's italic (as on the speaker site) at a medium weight */
.hero-quote blockquote,
.testimonials__feature blockquote,
.rw-card--featured blockquote { font-weight: 500; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .logos__track { animation: none; }
  .t-row { overflow-x: auto; }
  .t-row__track { animation: none; }
  .action__panel { animation: none; }
  .announcement, .nav, .hero__eyebrow, .hero__title, .hero__sub,
  .hero__quotes, .hero__actions,
  .hero__portrait, .hero__portrait img, .page-hero__eyebrow,
  .page-hero__title, .page-hero__sub, .page-hero__actions { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .occ-card {
    opacity: 1;
    transform: rotate(var(--rot, 0deg)) translateY(var(--ty, 0px));
  }
  .occ-block__media img,
  .occ-block__num,
  .occ-block__eyebrow,
  .occ-block__title,
  .occ-block__desc,
  .occ-block__tags,
  .occ-block__cta {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
  .occ-block__media img { opacity: 1; filter: brightness(0.9); }
  .occ-block__num { opacity: 0.08; }
  .occ-block__media::after { animation: none; }
  * { transition-duration: 0.01ms !important; }
}

/* ---------- All-light homepage (body.theme-light) ----------
   Scoped so subpages keep their dark heroes for now. Every dark
   anchor flips to a lighter shade: nav, hero, video theatre,
   banners and footer. */

/* nav */
.theme-light .nav.is-scrolled {
  background: rgba(255, 255, 255, 0.94);
  border-bottom-color: var(--line-light);
}
.theme-light .nav__links { color: #555047; }
.theme-light .nav__links a:hover,
.theme-light .nav__links a.is-active { color: var(--ink); }
.theme-light .nav__links a::after { background: var(--ink); }
.theme-light .nav__burger span { background: var(--ink); }
.theme-light .nav .btn {
  border-color: rgba(29, 27, 24, 0.4);
  color: var(--ink);
  background: transparent;
}
@media (hover: hover) {
  .theme-light .nav .btn--outline:hover {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
  }
}
@media (max-width: 900px) {
  .theme-light .nav.menu-open,
  .theme-light .nav.menu-open .nav__links {
    background: rgba(255, 255, 255, 0.97);
  }
  .theme-light .nav.menu-open .nav__links { border-bottom: 1px solid var(--line-light); }
  .theme-light .nav.menu-open .nav__links a { color: var(--ink); }
  .theme-light .nav.menu-open .nav__links a:not(.nav__menu-cta) {
    border-bottom: 1px solid rgba(29, 27, 24, 0.08);
  }
  .theme-light .nav.menu-open .nav__links a.is-active { color: var(--orange); }
}

/* ---------- Hero: full-bleed media, content on the floor ----------
   The footage runs edge to edge at full strength with a single bottom-up
   scrim carrying the type — headline and CTA bottom-left, proof points
   opposite. The page below stays light; only the hero is dark. */
.theme-light .hero {
  align-items: flex-end;        /* headline, CTA and proof sit on the bottom edge of the frame */
  justify-content: space-between;
  gap: clamp(1.6rem, 4vw, 3.5rem);
  flex-wrap: wrap;
  /* the media runs up behind the transparent nav */
  margin-top: calc(-1 * var(--nav-h));
  min-height: 100vh;
  padding-top: calc(var(--nav-h) + clamp(3rem, 7vw, 5rem));
  padding-bottom: clamp(3rem, 6vw, 4.5rem);
}
.theme-light .hero__backdrop { background: var(--black); }
.theme-light .hero__video {
  filter: none;
  opacity: 1;
}
/* the portrait is not part of this layout — the footage is the hero image */
.theme-light .hero__portrait { display: none; }
.theme-light .hero__vignette {
  background:
    linear-gradient(to top,
      rgba(15, 11, 9, 0.94) 0%,
      rgba(15, 11, 9, 0.78) 26%,
      rgba(15, 11, 9, 0.34) 55%,
      rgba(15, 11, 9, 0.12) 78%),
    linear-gradient(to bottom,
      rgba(15, 11, 9, 0.66) 0%,
      rgba(15, 11, 9, 0.42) 18%,
      rgba(15, 11, 9, 0.16) 30%,
      transparent 42%);
}
.theme-light .hero__content {
  flex: 1 1 460px;
  max-width: 780px;
}
/* kicker: bright wide-tracked caps in the top-left corner, words spaced apart
   with a short orange rule leading the line */
.theme-light .hero__eyebrow {
  position: absolute;
  top: calc(var(--nav-h) + clamp(1.5rem, 4vw, 3rem));
  left: var(--pad-x);
  right: var(--pad-x);
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1.4rem, 2.6vw, 2.6rem);
  font-family: var(--font-display);
  font-size: clamp(0.72rem, 0.85vw, 0.82rem);
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5);
  margin: 0;
}
.theme-light .hero__eyebrow::before {
  content: "";
  flex: none;
  width: 34px;
  height: 2px;
  background: var(--orange);
}
.theme-light .hero__eyebrow span {
  color: inherit;      /* the base theme dims each word; here they carry the line */
  font-weight: inherit;
  margin: 0;
}
.theme-light .hero__title { color: #fff; margin-bottom: 1.1rem; }
.theme-light .hero__title-rest small { color: #fff; }
.theme-light .hero__sub {
  color: rgba(255, 255, 255, 0.78);
  font-size: 1.05rem;
  max-width: 48ch;
  margin-bottom: 2rem;
}
/* the CTA: one confident pill, with the tagline alongside it in the accent
   serif rather than crammed inside the button */
.theme-light .hero__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(0.9rem, 2.2vw, 1.7rem);
}
.theme-light .hero__cta {
  gap: 0.65rem;
  padding: 1.05rem 2.15rem;
  font-family: var(--font-display);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--cta);
  border-color: var(--cta);
  color: #fff;
  box-shadow: 0 16px 34px -14px rgba(224, 69, 26, 0.85);
}
.hero__cta-arrow { transition: transform 0.25s ease; }
@media (hover: hover) {
  .theme-light .hero__cta:hover {
    background: #f2551f;
    border-color: #f2551f;
    transform: translateY(-2px);
    box-shadow: 0 20px 40px -14px rgba(242, 85, 31, 0.95);
  }
  .theme-light .hero__cta:hover .hero__cta-arrow { transform: translateX(4px); }
}
.hero__cta-note {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  color: rgba(255, 255, 255, 0.7);
}

/* reviews sit opposite the headline, on a hairline rule rather than a card —
   keeps the social proof without breaking the clean full-bleed hero */
.theme-light .hero__quotes {
  position: relative;
  z-index: 1;
  flex: 0 1 400px;
  max-width: 400px;
  padding-left: clamp(1.2rem, 2.4vw, 2rem);
  border-left: 1px solid rgba(255, 255, 255, 0.22);
}
.theme-light .hero-quote blockquote {
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.86);
}
.theme-light .hero-quote__name { color: #fff; }
.theme-light .hero-quote__event { color: rgba(255, 255, 255, 0.55); }
.theme-light .hero__quotes-dots button { background: rgba(255, 255, 255, 0.3); }
.theme-light .hero__quotes-dots button.is-active { background: var(--orange); }
.theme-light .hero-quote__logo img { height: 20px; }

/* nav rides over the dark hero until the page scrolls, then goes light */
.theme-light .nav:not(.is-scrolled) .nav__logo img { filter: invert(1); }
.theme-light .nav:not(.is-scrolled) .nav__links { color: rgba(255, 255, 255, 0.8); }
.theme-light .nav:not(.is-scrolled) .nav__links a:hover,
.theme-light .nav:not(.is-scrolled) .nav__links a.is-active { color: #fff; }
.theme-light .nav:not(.is-scrolled) .nav__links a::after { background: #fff; }
.theme-light .nav:not(.is-scrolled) .nav__burger span { background: #fff; }
.theme-light .nav:not(.is-scrolled) .btn {
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}
@media (hover: hover) {
  .theme-light .nav:not(.is-scrolled) .btn--outline:hover {
    background: #fff;
    border-color: #fff;
    color: var(--black);
  }
}

@media (max-width: 860px) {
  .theme-light .hero { padding-bottom: clamp(1.8rem, 5vw, 2.6rem); }
  .theme-light .hero__sub { font-size: 0.98rem; margin-bottom: 1.6rem; }
  .theme-light .hero__eyebrow {
    font-size: 0.62rem;
    letter-spacing: 0.22em;
    gap: 1rem;
  }
  .theme-light .hero__eyebrow::before { width: 22px; }
  /* stacked: the reviews sit under the CTA, rule on top instead of the side */
  .theme-light .hero__quotes {
    flex: 1 1 100%;
    max-width: none;
    padding-left: 0;
    padding-top: 1.4rem;
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.22);
  }
}

/* video theatre goes light */
.theme-light .action {
  background: var(--bg);
  border-top: 1px solid var(--line-light);
}
.theme-light .action__title { color: var(--ink); }
.theme-light .action__sub { color: var(--ink-muted); }
.theme-light .action__caption,
.theme-light .action__panel-caption { color: var(--ink); }
.theme-light .action__caption span,
.theme-light .action__panel-caption span { color: var(--ink-muted); }
.theme-light .action .btn {
  border-color: rgba(29, 27, 24, 0.4);
  color: var(--ink);
  background: transparent;
}
@media (hover: hover) {
  .theme-light .action .btn--outline:hover {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
  }
}
.theme-light .action__more-btn[aria-expanded="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

/* CTA banners stay dark — the one break in the white run */

/* footer goes light */
.theme-light .footer {
  background: radial-gradient(100% 100% at 50% 135%, rgba(217, 95, 14, 0.1), transparent 60%), var(--bg-alt);
  border-top: 1px solid var(--line-light);
}
.theme-light .footer__blurb,
.theme-light .footer ul { color: var(--ink-muted); }
.theme-light .footer a:hover { color: var(--ink); }
.theme-light .footer__fine {
  color: #92897b;
  border-top: 1px solid var(--line-light);
}


/* ---------- Subpage heroes (body.theme-light) ----------
   Same treatment as the homepage hero: the colour photo runs at full
   strength up behind the transparent nav, the type sits on the floor,
   and a single bottom-up scrim (plus a light top scrim for the nav
   links) carries legibility. No greyscale, no heavy darkening. */
.theme-light .page-hero {
  align-items: flex-end;
  margin-top: calc(-1 * var(--nav-h));
  min-height: 100vh;              /* fills the first screen, like the homepage hero */
  padding-top: calc(var(--nav-h) + clamp(3rem, 7vw, 5rem));
  padding-bottom: clamp(3rem, 6vw, 4.5rem);
  background: var(--black);
}
.theme-light .page-hero__bg { filter: none; }
.theme-light .page-hero__overlay {
  background:
    linear-gradient(to top,
      rgba(15, 11, 9, 0.94) 0%,
      rgba(15, 11, 9, 0.78) 26%,
      rgba(15, 11, 9, 0.34) 55%,
      rgba(15, 11, 9, 0.12) 78%),
    linear-gradient(to bottom,
      rgba(15, 11, 9, 0.66) 0%,
      rgba(15, 11, 9, 0.42) 18%,
      rgba(15, 11, 9, 0.16) 30%,
      transparent 42%);
}
.theme-light .page-hero__content { max-width: 760px; }
/* kicker matches the homepage: bright caps led by a short orange rule */
.theme-light .page-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-display);
  font-size: clamp(0.72rem, 0.85vw, 0.82rem);
  font-weight: 700;
  letter-spacing: 0.3em;
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5);
}
.theme-light .page-hero__eyebrow::before {
  content: "";
  flex: none;
  width: 34px;
  height: 2px;
  background: var(--orange);
}
.theme-light .page-hero__title { text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35); }
.theme-light .page-hero__sub {
  color: rgba(255, 255, 255, 0.82);
  font-weight: 400;
}
@media (max-width: 860px) {
  .theme-light .page-hero {
    padding-bottom: clamp(1.8rem, 5vw, 2.6rem);
  }
  .theme-light .page-hero__eyebrow { font-size: 0.62rem; letter-spacing: 0.22em; gap: 0.7rem; }
  .theme-light .page-hero__eyebrow::before { width: 22px; }
}

/* ---------- Magic: the nav materialises in a puff of smoke ----------
   When the white bar appears on scroll, two soft smoke clouds bloom over the
   logo while the mark flips from white to black underneath — a small
   sleight-of-hand reveal. Pure CSS: the animations sit on the .is-scrolled
   state, so they replay every time the bar comes back. */
.nav__logo { position: relative; }
.nav__logo::before,
.nav__logo::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 150px;
  height: 96px;
  margin: -48px 0 0 -75px;
  pointer-events: none;
  opacity: 0;
  filter: blur(6px);
  background:
    radial-gradient(circle at 34% 58%, rgba(92, 84, 76, 0.62) 0, rgba(92, 84, 76, 0.62) 14%, transparent 34%),
    radial-gradient(circle at 64% 42%, rgba(92, 84, 76, 0.55) 0, rgba(92, 84, 76, 0.55) 12%, transparent 30%),
    radial-gradient(circle at 48% 26%, rgba(92, 84, 76, 0.50) 0, rgba(92, 84, 76, 0.50) 10%, transparent 26%),
    radial-gradient(circle at 60% 74%, rgba(92, 84, 76, 0.45) 0, rgba(92, 84, 76, 0.45) 10%, transparent 26%);
}
@keyframes nav-poof-a {
  0%   { opacity: 0; transform: scale(0.3); }
  18%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-10px, -28px) scale(1.8) rotate(-14deg); }
}
@keyframes nav-poof-b {
  0%   { opacity: 0; transform: scale(0.3) rotate(30deg); }
  22%  { opacity: 0.85; }
  100% { opacity: 0; transform: translate(16px, -18px) scale(1.6) rotate(50deg); }
}
@keyframes nav-logo-flourish {
  0%   { transform: scale(0.94) rotate(-5deg); }
  55%  { transform: scale(1.05) rotate(2deg); }
  100% { transform: scale(1) rotate(0deg); }
}
.nav.is-scrolled .nav__logo::before { animation: nav-poof-a 1.7s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
.nav.is-scrolled .nav__logo::after  { animation: nav-poof-b 1.8s cubic-bezier(0.2, 0.7, 0.3, 1) 0.12s both; }
.nav.is-scrolled .nav__logo img     { animation: nav-logo-flourish 1.15s cubic-bezier(0.2, 0.8, 0.3, 1) 0.2s both; }
/* the colour flip happens under the thickest part of the smoke */
.theme-light .nav__logo img { transition: filter 0.45s ease 0.38s; }
@media (prefers-reduced-motion: reduce) {
  .nav__logo::before, .nav__logo::after { display: none; }
  .nav.is-scrolled .nav__logo img { animation: none; }
  .theme-light .nav__logo img { transition: none; }
}

/* ---------- Magic: the extra video appears in a puff of smoke ----------
   Same smoke as the nav. Opening "Want more reactions?" puffs on the button
   (its label swaps underneath) and over the video card, which materialises
   out of a blur. Keyed off aria-expanded and [hidden], so it replays each
   time the panel is opened. */
.action__more-btn { position: relative; overflow: visible; }
.action__panel { position: relative; }
.action__more-btn::before, .action__more-btn::after,
.action__panel::before, .action__panel::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 150px;
  height: 96px;
  margin: -48px 0 0 -75px;
  pointer-events: none;
  opacity: 0;
  filter: blur(6px);
  background:
    radial-gradient(circle at 34% 58%, rgba(92, 84, 76, 0.62) 0, rgba(92, 84, 76, 0.62) 14%, transparent 34%),
    radial-gradient(circle at 64% 42%, rgba(92, 84, 76, 0.55) 0, rgba(92, 84, 76, 0.55) 12%, transparent 30%),
    radial-gradient(circle at 48% 26%, rgba(92, 84, 76, 0.50) 0, rgba(92, 84, 76, 0.50) 10%, transparent 26%),
    radial-gradient(circle at 60% 74%, rgba(92, 84, 76, 0.45) 0, rgba(92, 84, 76, 0.45) 10%, transparent 26%);
}
/* the card's smoke is a full cloud: sized to swallow the whole 9:16 frame
   (340px wide, ~604px tall on desktop; 86vw × 153vw on phones) at its peak */
.action__panel::before, .action__panel::after {
  top: min(302px, 76vw);
  width: min(520px, 124vw);
  height: min(820px, 200vw);
  margin: calc(-1 * min(410px, 100vw)) 0 0 calc(-1 * min(260px, 62vw));
  filter: blur(16px);
  /* pale, so it reads against the dark poster; eight blobs tile the frame */
  background:
    radial-gradient(circle 150px at 30% 18%, rgba(236, 230, 222, 0.96) 0 68%, transparent 100%),
    radial-gradient(circle 140px at 72% 14%, rgba(236, 230, 222, 0.92) 0 68%, transparent 100%),
    radial-gradient(circle 160px at 24% 42%, rgba(236, 230, 222, 0.95) 0 70%, transparent 100%),
    radial-gradient(circle 165px at 74% 44%, rgba(236, 230, 222, 0.93) 0 70%, transparent 100%),
    radial-gradient(circle 170px at 50% 55%, rgba(236, 230, 222, 0.97) 0 72%, transparent 100%),
    radial-gradient(circle 150px at 28% 72%, rgba(236, 230, 222, 0.92) 0 68%, transparent 100%),
    radial-gradient(circle 155px at 72% 76%, rgba(236, 230, 222, 0.9) 0 68%, transparent 100%),
    radial-gradient(circle 140px at 50% 92%, rgba(236, 230, 222, 0.88) 0 66%, transparent 100%);
}
@keyframes card-poof-a {
  0%   { opacity: 0; transform: scale(0.55); }
  20%  { opacity: 1; transform: scale(1); }
  60%  { opacity: 0.95; transform: translate(0, -6px) scale(1.06); }
  100% { opacity: 0; transform: translate(-12px, -44px) scale(1.3) rotate(-6deg); }
}
@keyframes card-poof-b {
  0%   { opacity: 0; transform: scale(0.55) rotate(18deg); }
  24%  { opacity: 0.9; transform: scale(1) rotate(18deg); }
  100% { opacity: 0; transform: translate(16px, -32px) scale(1.25) rotate(32deg); }
}
.action__more-btn[aria-expanded="true"]::before { animation: nav-poof-a 1.3s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
.action__more-btn[aria-expanded="true"]::after  { animation: nav-poof-b 1.4s cubic-bezier(0.2, 0.7, 0.3, 1) 0.1s both; }
.action__panel:not([hidden])::before { animation: card-poof-a 1.05s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
.action__panel:not([hidden])::after  { animation: card-poof-b 1.1s cubic-bezier(0.2, 0.7, 0.3, 1) 0.05s both; }
@keyframes materialise {
  0%   { opacity: 0; transform: scale(0.9); filter: blur(12px); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: none; filter: blur(0); }
}
.action__panel:not([hidden]) .yt--tall { animation: materialise 0.85s cubic-bezier(0.2, 0.7, 0.3, 1) 0.12s both; }
@media (prefers-reduced-motion: reduce) {
  .action__more-btn::before, .action__more-btn::after,
  .action__panel::before, .action__panel::after { display: none; }
  .action__panel:not([hidden]) .yt--tall { animation: none; }
}
/* opening the panel scrolls the button to sit just under the nav, so the
   smoke on it and the card materialising below are both on screen */
.action__more { scroll-margin-top: calc(var(--nav-h) + 1.2rem); }

/* ---------- Occasions v2: five-card fan, swipeable photo strips, ribbon ----------
   Five cards need a slightly narrower card and a symmetric fan. Each photo
   block is a horizontal scroll-snap strip of two images with arrows and dots
   (main.js keeps them in sync). The strip sits above the whole-card link
   overlay so swiping and the arrows work; the copy and CTA still link. */
.occ-card { width: clamp(260px, 22vw, 340px); padding: 1.05rem 1.05rem 1.3rem; }
.occasions__deck .occ-card:nth-child(1) { --rot: -10deg; --ty: 40px; }
.occasions__deck .occ-card:nth-child(2) { --rot: -3.5deg; --ty: 6px; }
.occasions__deck .occ-card:nth-child(3) { --rot: 3.5deg;  --ty: 6px; }
.occasions__deck .occ-card:nth-child(4) { --rot: 10deg;  --ty: 40px; }
.occ-card__title { font-size: clamp(1.8rem, 1.85vw, 2.25rem); }
.occ-card__desc { font-size: 0.95rem; max-width: 27ch; }
@media (max-width: 1100px) {
  .occasions__deck .occ-card:nth-child(odd)  { --rot: -4deg; --ty: 10px; }
  .occasions__deck .occ-card:nth-child(even) { --rot: 4deg;  --ty: 10px; }
  .occ-card__title { font-size: clamp(1.7rem, 3vw, 2.05rem); }
  .occ-card__desc { font-size: 0.9rem; }
}

/* photo strip */
.occ-card__photos {
  position: relative;
  z-index: 1;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  border-radius: 17px;
}
.occ-card__photos::-webkit-scrollbar { display: none; }
.occ-card__photos .occ-card__photo { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; }
.occ-card__photos:focus-visible { outline: 2px solid var(--cta); outline-offset: 3px; }
.occ-card__dots {
  position: absolute;
  left: 50%;
  bottom: 10px;
  z-index: 2;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  padding: 5px 7px;
  border-radius: 999px;
  background: rgba(20, 15, 12, 0.35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  pointer-events: none;
}
.occ-card__dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  transition: background 0.25s ease, transform 0.25s ease;
}
.occ-card__dots i.is-active { background: #fff; transform: scale(1.25); }
.occ-card__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 32px;
  height: 32px;
  margin-top: -16px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(20, 15, 12, 0.45);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: opacity 0.25s ease, background 0.2s ease, transform 0.2s ease;
}
.occ-card__arrow--prev { left: 10px; }
.occ-card__arrow--next { right: 10px; }
.occ-card:hover .occ-card__arrow,
.occ-card__arrow:focus-visible { opacity: 1; }
.occ-card__arrow:hover { background: var(--cta); transform: scale(1.06); }
.occ-card__arrow[disabled] { opacity: 0 !important; pointer-events: none; }
@media (hover: none) { .occ-card__arrow { opacity: 0.85; } }

/* "Booking out fast!" ribbon, top-right of the photo */
.occ-card__flag {
  position: absolute;
  top: 12px;
  right: 10px;
  z-index: 3;
  padding: 0.42rem 0.75rem;
  border-radius: 999px;
  background: var(--cta);
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 8px 18px rgba(224, 69, 26, 0.35);
  pointer-events: none;
  transform: rotate(6deg);
  animation: flag-wiggle 3.2s ease-in-out infinite;
}
@keyframes flag-wiggle {
  0%, 100% { transform: rotate(6deg); }
  50%      { transform: rotate(3deg) translateY(-1px); }
}
/* the same note on the Services page, beside the eyebrow */
.occ-block__badge {
  display: inline-block;
  margin-left: 0.7rem;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  background: var(--cta);
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  vertical-align: middle;
  transform: rotate(-3deg);
}

/* brand names set inline in running copy (Startup Events) */
.inline-logo {
  display: inline-flex;
  align-items: center;
  vertical-align: -0.12em;
  line-height: 1;
}
.inline-logo img { display: block; height: 0.95em; width: auto; }
.inline-logo--text { font-weight: 800; letter-spacing: -0.01em; color: inherit; }

@media (prefers-reduced-motion: reduce) {
  .occ-card__flag { animation: none; }
}


/* ---------- Staircase: white at the top, a whisper greyer each section ----------
   Light theme throughout and always close to white: the ground steps down
   section by section by a couple of shades of warm off-white, with hard
   cuts and no glow — simple and quiet. Orange is for accents only. The dark CTA strips
   stay as punctuation. Change a section's --stair to move it up or down. */
:root {
  --stair-0: #ffffff;
  --stair-1: #fcfcfb;
  --stair-2: #f9f8f6;
  --stair-3: #f6f5f2;
  --stair-4: #f3f1ee;
  --stair-5: #f0eeea;
  --stair-6: #edebe6;
}
body.theme-light { background: var(--stair-0); }
html { background: #17120e; }          /* overscroll matches the dark footer */

/* homepage, top to bottom */
.theme-light .logos        { --stair: var(--stair-0); }
.theme-light .occasions    { --stair: var(--stair-1); }
.theme-light .action       { --stair: var(--stair-2); }
.theme-light .testimonials { --stair: var(--stair-3); }
.theme-light .about        { --stair: var(--stair-4); }
.theme-light .faq          { --stair: var(--stair-5); }
.theme-light .quote        { --stair: var(--stair-6); }
/* subpages: the content after the page hero starts white again */
.theme-light .review-wall,
.theme-light .timeline,
.theme-light .page-hero + section { --stair: var(--stair-0); }
/* services: the five occasion blocks step down one by one */
.theme-light .occ-block:nth-of-type(1) { --stair: var(--stair-0); }
.theme-light .occ-block:nth-of-type(2) { --stair: var(--stair-1); }
.theme-light .occ-block:nth-of-type(3) { --stair: var(--stair-2); }
.theme-light .occ-block:nth-of-type(4) { --stair: var(--stair-3); }
.theme-light .occ-block:nth-of-type(5) { --stair: var(--stair-4); }

.theme-light .logos,
.theme-light .occasions,
.theme-light .action,
.theme-light .testimonials,
.theme-light .about,
.theme-light .faq,
.theme-light .quote,
.theme-light .review-wall,
.theme-light .timeline,
.theme-light .occ-block {
  background: var(--stair, var(--stair-0));
  border-top-color: transparent;       /* the tone change is the edge */
}
.theme-light .logos { border-bottom-color: transparent; }

.theme-light .nav.is-scrolled { background: rgba(255, 255, 255, 0.94); }

/* ---------- Footer: its own ground ----------
   The footer steps off the staircase entirely onto the site's warm
   charcoal — the same near-black as the hero and the CTA strips — so the
   page closes on a quiet, solid dark band. Light type, white mark. */
.theme-light .footer {
  background:
    radial-gradient(100% 100% at 50% 135%, rgba(217, 95, 14, 0.12), transparent 60%),
    #17120e;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.theme-light .footer__logo img { filter: invert(1); }
.theme-light .footer__blurb,
.theme-light .footer ul { color: var(--muted); }
.theme-light .footer a:hover { color: #fff; }
.theme-light .footer__fine {
  color: #8a8479;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* ---------- Orange in the background, sparingly ----------
   Six touches on the whole page, all at very low opacity: three corner
   blooms (warm light falling in from outside the frame), two ghosted
   playing-card suits (the motif the closing CTA already uses), and one
   rule where the charcoal footer begins. */
.theme-light .occasions {
  background: radial-gradient(900px 640px at 0% 100%, rgba(217, 95, 14, 0.11), transparent 70%), var(--stair);
}
.theme-light .about {
  background: radial-gradient(900px 640px at 100% 0%, rgba(217, 95, 14, 0.1), transparent 70%), var(--stair);
}
.theme-light .quote {
  background: radial-gradient(1000px 700px at 100% 100%, rgba(217, 95, 14, 0.11), transparent 70%), var(--stair);
}
/* ghosted suits: huge, faint, cropped by the section edge, behind the content */
.theme-light .action,
.theme-light .faq {
  position: relative;
  isolation: isolate;
  overflow: clip;
}
.theme-light .action::before,
.theme-light .faq::before {
  position: absolute;
  z-index: -1;
  font-family: var(--font-display);
  font-size: clamp(22rem, 46vw, 38rem);
  line-height: 1;
  color: var(--orange);
  opacity: 0.045;
  pointer-events: none;
  user-select: none;
}
.theme-light .action::before {
  content: "\2660";                 /* spade */
  right: -0.12em;
  top: -0.08em;
  transform: rotate(12deg);
}
.theme-light .faq::before {
  content: "\2666";                 /* diamond */
  left: -0.14em;
  bottom: -0.16em;
  transform: rotate(-10deg);
}
/* an orange edge where the footer begins: a 2px rule that fades out at the
   ends, with a soft glow falling from it into the charcoal */
.theme-light .footer {
  border-top: 0;
  background:
    linear-gradient(90deg, transparent 0%, var(--orange) 10%, var(--orange) 90%, transparent 100%) top / 100% 2px no-repeat,
    linear-gradient(to bottom, rgba(217, 95, 14, 0.32), transparent) top / 100% 90px no-repeat,
    radial-gradient(100% 100% at 50% 135%, rgba(217, 95, 14, 0.12), transparent 60%),
    #17120e;
}
@media (max-width: 860px) {
  .theme-light .action::before,
  .theme-light .faq::before { font-size: 18rem; }
}

/* homepage About: the photo runs in colour; it's a landscape frame, so crop to him */
.theme-light .about__media img { filter: none; object-position: 40% 15%; }

/* occasion cards: smaller corner suit under a slightly trimmed rank */
.occ-card__index b { font-size: 2.3rem; }
.occ-card__index i { font-size: 1.25rem; margin-top: 0.1rem; }

/* ---------- Homepage review tiles: corner suits (client feedback) ----------
   Every suit sits fully inside its tile, and the four glyphs are sized to
   the same ink height. Measured in Satoshi at 100px: spade and club ink is
   60px tall, the diamond 61px, the heart 75px — so the heart is scaled to
   80% and the diamond to 98% of the spade. */
.t-card__suit {
  right: 10px;
  bottom: -6px;
}
.t-card__suit--spade,
.t-card__suit--club    { font-size: 7rem; }
.t-card__suit--diamond { font-size: 6.86rem; }
.t-card__suit--heart   { font-size: 5.58rem; }
/* the tiles get a deeper bottom band so the full-size suit has room under
   the byline and any brand logo instead of sitting behind it */
.t-card { padding-bottom: 4.6rem; }

/* contact page: the split section was capped at 1280px, so its ground (and
   the corner bloom) stopped short of the viewport edge on wide screens.
   The section now runs full width and the 1280px cap moves into its padding. */
.quote--split {
  max-width: none;
  margin: 0;
  padding-left: max(var(--pad-x), calc((100% - 1280px) / 2 + var(--pad-x)));
  padding-right: max(var(--pad-x), calc((100% - 1280px) / 2 + var(--pad-x)));
}

/* ---------- Buttons: one system, two colours, real depth (client feedback) ----------
   Every button is a solid pill with a hard bottom edge and a soft drop
   shadow, lifting on hover and pressing down on click. Orange is the
   default; on dark grounds (nav over the hero, page heroes, CTA strips,
   closing CTA) the button is white with ink type. The hero's Book Now stays
   orange as the primary call. */
:root {
  --btn-edge: #9f2f0f;             /* darker orange for the 3D edge */
  --btn-white-edge: #c4bbad;       /* warm grey edge under white buttons, same step down as orange→edge */
}
.btn,
.hero__cta,
.occ-card__cta,
.occ-block__cta,
.quote__submit,
.action__more-btn,
.nav__cta {
  border: 0;
  border-radius: 999px;
  font-weight: 700;
  color: #fff;
  background: var(--cta);
  box-shadow: 0 4px 0 var(--btn-edge), 0 12px 24px -10px rgba(224, 69, 26, 0.55);
  transform: translateY(0);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease, color 0.2s ease;
}
.btn:focus-visible, .hero__cta:focus-visible, .occ-card__cta:focus-visible, .occ-block__cta:focus-visible,
.quote__submit:focus-visible, .action__more-btn:focus-visible, .nav__cta:focus-visible {
  outline: 3px solid rgba(224, 69, 26, 0.35);
  outline-offset: 3px;
}
@media (hover: hover) {
  .btn:hover, .hero__cta:hover, .occ-block__cta:hover, .quote__submit:hover, .action__more-btn:hover, .nav__cta:hover,
  .occ-card:hover .occ-card__cta {
    background: #f2551f;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 5px 0 var(--btn-edge), 0 16px 28px -10px rgba(224, 69, 26, 0.6);
  }
}
.btn:active, .hero__cta:active, .occ-card__cta:active, .occ-block__cta:active, .quote__submit:active, .action__more-btn:active, .nav__cta:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--btn-edge), 0 6px 14px -8px rgba(224, 69, 26, 0.5);
}
/* the "more videos" toggle in its open state goes ink so it reads as "close" */
.theme-light .action__more-btn[aria-expanded="true"] {
  background: var(--ink);
  color: #fff;
  box-shadow: 0 4px 0 #000, 0 12px 24px -10px rgba(0, 0, 0, 0.45);
}

/* white variant on dark grounds */
.theme-light .nav:not(.is-scrolled) .btn,
.theme-light .page-hero .btn,
.theme-light .cta-banner .btn,
.theme-light .cta-final .btn {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 4px 0 var(--btn-white-edge), 0 12px 24px -10px rgba(0, 0, 0, 0.45);
}
@media (hover: hover) {
  .theme-light .nav:not(.is-scrolled) .btn:hover,
  .theme-light .page-hero .btn:hover,
  .theme-light .cta-banner .btn:hover,
  .theme-light .cta-final .btn:hover {
    background: #fff;
    color: var(--ink);
    box-shadow: 0 5px 0 var(--btn-white-edge), 0 16px 28px -10px rgba(0, 0, 0, 0.5);
  }
}
.theme-light .nav:not(.is-scrolled) .btn:active,
.theme-light .page-hero .btn:active,
.theme-light .cta-banner .btn:active,
.theme-light .cta-final .btn:active {
  box-shadow: 0 1px 0 var(--btn-white-edge), 0 6px 14px -8px rgba(0, 0, 0, 0.4);
}
/* the mobile menu's own CTA joins the system */
.nav__menu-cta {
  border-radius: 999px;
  background: var(--cta);
  color: #fff;
  box-shadow: 0 4px 0 var(--btn-edge);
}
@media (prefers-reduced-motion: reduce) {
  .btn, .hero__cta, .occ-card__cta, .occ-block__cta, .quote__submit, .action__more-btn, .nav__cta { transition: none; }
}
/* white buttons get a fine ink outline so they hold their shape against light backdrops */
.theme-light .nav:not(.is-scrolled) .btn,
.theme-light .page-hero .btn,
.theme-light .cta-banner .btn,
.theme-light .cta-final .btn { border: 1.5px solid var(--ink); }
/* older light-theme rules for the nav and the video section outranked the
   orange base and left those buttons transparent (they read as white with
   an orange edge). They are orange like everything else on light grounds. */
.theme-light .action .btn,
.theme-light .nav .btn {
  background: var(--cta);
  color: #fff;
  border: 0;
}
@media (hover: hover) {
  .theme-light .action .btn--outline:hover,
  .theme-light .nav .btn--outline:hover {
    background: #f2551f;
    color: #fff;
  }
}
/* …except the nav button while it rides over a hero, which stays white */
.theme-light .nav:not(.is-scrolled) .btn {
  background: #fff;
  color: var(--ink);
  border: 1.5px solid var(--ink);
}
@media (hover: hover) {
  .theme-light .nav:not(.is-scrolled) .btn--outline:hover { background: #fff; color: var(--ink); }
}
/* white buttons: same footprint and shadow as the orange ones. The outline is
   drawn inside the box (no border, so the pill doesn't grow), and the drop
   shadow uses the same offsets and a lighter alpha so it reads the same size. */
.theme-light .nav:not(.is-scrolled) .btn,
.theme-light .page-hero .btn,
.theme-light .cta-banner .btn,
.theme-light .cta-final .btn {
  border: 0;
  box-shadow: inset 0 0 0 1.5px var(--ink), 0 4px 0 var(--btn-white-edge), 0 12px 24px -10px rgba(0, 0, 0, 0.3);
}
@media (hover: hover) {
  .theme-light .nav:not(.is-scrolled) .btn:hover,
  .theme-light .page-hero .btn:hover,
  .theme-light .cta-banner .btn:hover,
  .theme-light .cta-final .btn:hover {
    box-shadow: inset 0 0 0 1.5px var(--ink), 0 5px 0 var(--btn-white-edge), 0 16px 28px -10px rgba(0, 0, 0, 0.34);
  }
}
.theme-light .nav:not(.is-scrolled) .btn:active,
.theme-light .page-hero .btn:active,
.theme-light .cta-banner .btn:active,
.theme-light .cta-final .btn:active {
  box-shadow: inset 0 0 0 1.5px var(--ink), 0 1px 0 var(--btn-white-edge), 0 6px 14px -8px rgba(0, 0, 0, 0.28);
}
/* white = the orange button recoloured: white fill, a darker step of the same
   tone as the bottom edge, the same soft shadow. No outline of any kind. */
.theme-light .nav:not(.is-scrolled) .btn,
.theme-light .page-hero .btn,
.theme-light .cta-banner .btn,
.theme-light .cta-final .btn {
  border: 0;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 4px 0 var(--btn-white-edge), 0 12px 24px -10px rgba(0, 0, 0, 0.3);
}
@media (hover: hover) {
  .theme-light .nav:not(.is-scrolled) .btn:hover,
  .theme-light .page-hero .btn:hover,
  .theme-light .cta-banner .btn:hover,
  .theme-light .cta-final .btn:hover {
    background: #fff;
    color: var(--ink);
    box-shadow: 0 5px 0 var(--btn-white-edge), 0 16px 28px -10px rgba(0, 0, 0, 0.34);
  }
}
.theme-light .nav:not(.is-scrolled) .btn:active,
.theme-light .page-hero .btn:active,
.theme-light .cta-banner .btn:active,
.theme-light .cta-final .btn:active {
  box-shadow: 0 1px 0 var(--btn-white-edge), 0 6px 14px -8px rgba(0, 0, 0, 0.28);
}

/* ---------- Hero redesign ----------
   Wordmark from the client's card in place of the typeset name, the three
   kicker words spread across the full width in thirds, a portrait on the
   right where the reviews were, and Watch Video beside Book Now. */
.theme-light .hero__eyebrow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  text-align: center;
}
.theme-light .hero__eyebrow::before { display: none; }
.theme-light .hero__eyebrow span:first-child { text-align: left; }
.theme-light .hero__eyebrow span:last-child  { text-align: right; }

.hero__wordmark {
  display: block;
  width: clamp(240px, 30vw, 470px);
  height: auto;
  margin: 0 0 0.35rem -0.4rem;   /* optical: the M's stem sits on the text edge */
  filter: drop-shadow(0 6px 24px rgba(0, 0, 0, 0.35));
  animation: rise-fade 0.9s cubic-bezier(0.2, 0.7, 0.25, 1) both 0.3s;
}
.theme-light .hero__title { margin-bottom: 1.2rem; }
.theme-light .hero__title-rest { margin-left: clamp(1.6rem, 5vw, 4.2rem); }

.theme-light .hero__content { flex: 1 1 480px; max-width: 700px; }
.theme-light .hero__figure {
  position: relative;
  z-index: 1;
  flex: 0 1 34%;
  min-width: 260px;
  max-width: 460px;
  margin: 0 0 calc(-1 * clamp(3rem, 6vw, 4.5rem)) auto;   /* stands on the hero's floor */
  align-self: flex-end;
  animation: rise-fade 1s cubic-bezier(0.2, 0.7, 0.25, 1) both 0.5s;
}
.theme-light .hero__figure img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 78vh;
  object-fit: cover;
  object-position: 50% 0;
  /* feathered on three sides so the studio black melts into the footage */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 26%, #000 92%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 18%, #000 80%, transparent 100%);
  mask-image:
    linear-gradient(to right, transparent 0%, #000 26%, #000 92%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 18%, #000 80%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* Watch Video: the white button beside the orange one */
.theme-light .hero__watch {
  gap: 0.6rem;
  padding: 1.05rem 1.9rem;
  font-family: var(--font-display);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 4px 0 var(--btn-white-edge), 0 12px 24px -10px rgba(0, 0, 0, 0.3);
}
@media (hover: hover) {
  .theme-light .hero__watch:hover {
    background: #fff;
    color: var(--ink);
    box-shadow: 0 5px 0 var(--btn-white-edge), 0 16px 28px -10px rgba(0, 0, 0, 0.34);
  }
}
.theme-light .hero__watch:active { box-shadow: 0 1px 0 var(--btn-white-edge), 0 6px 14px -8px rgba(0, 0, 0, 0.28); }

@media (max-width: 860px) {
  .theme-light .hero__eyebrow { font-size: 0.58rem; letter-spacing: 0.18em; }
  .theme-light .hero__figure {
    flex: 1 1 100%;
    max-width: 320px;
    margin: 0.5rem auto calc(-1 * clamp(1.8rem, 5vw, 2.6rem));
    order: 2;
  }
  .theme-light .hero__figure img { max-height: 52vh; }
  .hero__wordmark { width: min(70vw, 340px); }
}
/* kicker: the three words together in the centre, an orange rule either side
   (the same treatment the section headings use) */
.theme-light .hero__eyebrow {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(1.4rem, 2.6vw, 2.6rem);
  text-align: center;
}
.theme-light .hero__eyebrow::before,
.theme-light .hero__eyebrow::after {
  content: "";
  display: block;
  flex: none;
  width: clamp(40px, 6vw, 96px);
  height: 2px;
  background: var(--orange);
}
.theme-light .hero__eyebrow span:first-child,
.theme-light .hero__eyebrow span:last-child { text-align: center; }
@media (max-width: 860px) {
  .theme-light .hero__eyebrow { gap: 0.9rem; }
  .theme-light .hero__eyebrow::before, .theme-light .hero__eyebrow::after { width: 22px; }
}
/* hero, take two: the portrait stands behind the headline on the left, the
   reviews return on the right */
.theme-light .hero__figure {
  position: absolute;
  left: -5vw;              /* nudged so the face clears the wordmark's star */
  bottom: 3vh;
  z-index: 0;
  flex: none;
  width: clamp(300px, 34vw, 560px);
  max-width: none;
  min-width: 0;
  margin: 0;
  pointer-events: none;
}
.theme-light .hero__figure img {
  max-height: 92vh;
  object-position: 50% 0;
  -webkit-mask-image:
    linear-gradient(to right, #000 0%, #000 70%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
  mask-image:
    linear-gradient(to right, #000 0%, #000 70%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
}
.theme-light .hero__content { position: relative; z-index: 1; }
.theme-light .hero__quotes { position: relative; z-index: 1; }
@media (max-width: 860px) {
  .theme-light .hero__figure { width: min(78vw, 360px); left: -6vw; opacity: 0.55; order: 0; margin: 0; }
  .theme-light .hero__figure img { max-height: 70vh; }
}
/* hero, take three: the portrait stands on the right, behind the reviews */
.theme-light .hero__figure {
  left: auto;
  right: 0;
  bottom: 0;
  width: clamp(320px, 36vw, 600px);
}
.theme-light .hero__figure img {
  -webkit-mask-image:
    linear-gradient(to left, #000 0%, #000 70%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
  mask-image:
    linear-gradient(to left, #000 0%, #000 70%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
}
@media (max-width: 860px) {
  .theme-light .hero__figure { left: auto; right: -6vw; }
}
/* hero, take four: no reviews; the portrait fills the right-hand side */
.theme-light .hero__figure { width: clamp(380px, 46vw, 780px); }
.theme-light .hero__figure img { max-height: 100vh; }
@media (max-width: 860px) {
  .theme-light .hero__figure { width: min(92vw, 440px); opacity: 0.5; }
}
/* the portrait is a transparent cut-out now: no edge fades, full strength */
.theme-light .hero__figure img { -webkit-mask-image: none; mask-image: none; }
.theme-light .hero__figure { width: clamp(340px, 39vw, 660px); right: 5vw; }
@media (max-width: 860px) {
  .theme-light .hero__figure { opacity: 1; }
}
/* the left column reaches further into the middle of the frame */
.theme-light .hero__content { flex: 1 1 560px; max-width: 920px; }
.theme-light .hero__sub { max-width: 60ch; }
.hero__wordmark { width: clamp(260px, 34vw, 540px); }

/* ---------- Hero, reference layout ----------
   Kicker heading the left column, headline and copy beneath it, two buttons,
   everything left-aligned and vertically centred; the portrait stands on the
   floor to the right. */
.theme-light .hero { align-items: center; }
.theme-light .hero__eyebrow {
  position: static;
  justify-content: flex-start;
  gap: clamp(0.9rem, 1.6vw, 1.4rem);
  margin: 0 0 clamp(1.4rem, 2.6vw, 2.2rem);
  text-align: left;
}
.theme-light .hero__eyebrow::before,
.theme-light .hero__eyebrow::after { width: clamp(28px, 3.2vw, 48px); }
.theme-light .hero__title { margin-top: 0; }
@media (max-width: 860px) {
  .theme-light .hero { align-items: flex-end; }
  .theme-light .hero__eyebrow { flex-wrap: wrap; gap: 0.7rem; margin-bottom: 1.2rem; }
}
/* higher in the frame, like the reference: the column starts just under the
   nav instead of floating in the middle */
.theme-light .hero {
  align-items: flex-start;
  padding-top: calc(var(--nav-h) + clamp(2rem, 4.5vw, 3.4rem));
}
/* the kicker row is exactly as wide as the wordmark, with the rules flexing to
   fill, so the three words sit centred over the name */
.theme-light .hero__eyebrow {
  width: clamp(260px, 34vw, 540px);
  max-width: 100%;
  justify-content: center;
  margin-left: -0.4rem;          /* same optical shift as the wordmark */
}
.theme-light .hero__eyebrow::before,
.theme-light .hero__eyebrow::after { flex: 1 1 0; width: auto; min-width: 16px; }
@media (max-width: 860px) {
  .theme-light .hero { align-items: flex-end; padding-top: calc(var(--nav-h) + clamp(3rem, 7vw, 5rem)); }
  .theme-light .hero__eyebrow { width: min(70vw, 340px); }
}
/* keep the kicker on one line inside the wordmark's width: slightly tighter
   type and gaps, the rules take whatever is left either side */
.theme-light .hero__eyebrow {
  flex-wrap: nowrap;
  gap: 1rem;
  font-size: clamp(0.64rem, 0.78vw, 0.76rem);
  letter-spacing: 0.26em;
}
.theme-light .hero__eyebrow span { white-space: nowrap; }
.theme-light .hero__eyebrow::before,
.theme-light .hero__eyebrow::after { min-width: 14px; }
@media (max-width: 860px) {
  .theme-light .hero__eyebrow { flex-wrap: wrap; font-size: 0.58rem; letter-spacing: 0.18em; }
}
/* kicker back in the middle of the frame, above everything, rules either side */
.theme-light .hero__eyebrow {
  position: absolute;
  top: calc(var(--nav-h) + clamp(1.5rem, 4vw, 3rem));
  left: var(--pad-x);
  right: var(--pad-x);
  width: auto;
  max-width: none;
  margin: 0;
  justify-content: center;
  gap: clamp(1.4rem, 2.6vw, 2.6rem);
  font-size: clamp(0.72rem, 0.85vw, 0.82rem);
  letter-spacing: 0.3em;
}
.theme-light .hero__eyebrow::before,
.theme-light .hero__eyebrow::after { flex: none; width: clamp(40px, 6vw, 96px); min-width: 0; }
/* the column starts below it */
.theme-light .hero { padding-top: calc(var(--nav-h) + clamp(5.5rem, 9vw, 7.5rem)); }
@media (max-width: 860px) {
  .theme-light .hero__eyebrow { gap: 0.9rem; font-size: 0.58rem; letter-spacing: 0.18em; }
  .theme-light .hero__eyebrow::before, .theme-light .hero__eyebrow::after { width: 22px; }
}

/* ---------- Hero, floor layout ----------
   Headline, copy and buttons on the floor at the left; the three words sit
   opposite on the same baseline, divided by hairlines, the way the reference
   runs its three stats along the bottom edge. */
.theme-light .hero {
  align-items: flex-end;
  padding-top: calc(var(--nav-h) + clamp(3rem, 7vw, 5rem));
}
.theme-light .hero__eyebrow {
  top: auto;
  bottom: calc(clamp(3rem, 6vw, 4.5rem) + 1.05rem);   /* sits on the buttons' centre line */
  left: auto;
  right: var(--pad-x);
  width: auto;
  justify-content: flex-end;
  gap: 0;
  font-size: clamp(0.7rem, 0.82vw, 0.8rem);
  letter-spacing: 0.26em;
}
.theme-light .hero__eyebrow::before,
.theme-light .hero__eyebrow::after { display: none; }
.theme-light .hero__eyebrow span {
  padding: 0.15rem clamp(1.1rem, 2vw, 1.9rem);
  border-left: 1px solid rgba(255, 255, 255, 0.22);
}
.theme-light .hero__eyebrow span:first-child { border-left: 0; }
.theme-light .hero__eyebrow span:last-child { padding-right: 0; }
@media (max-width: 1100px) {
  /* the words drop under the buttons when the frame gets tight */
  .theme-light .hero__eyebrow {
    position: static;
    justify-content: flex-start;
    margin: 1.6rem 0 0;
    order: 3;
    flex-basis: 100%;
  }
  .theme-light .hero__eyebrow span:first-child { padding-left: 0; }
}
/* kicker heads the left column again: as wide as the wordmark, words centred,
   orange rules flexing either side; the column stays on the floor */
.theme-light .hero__eyebrow {
  position: static;
  width: clamp(260px, 34vw, 540px);
  max-width: 100%;
  margin: 0 0 clamp(1.4rem, 2.6vw, 2.2rem) -0.4rem;
  justify-content: center;
  gap: 1rem;
  flex-wrap: nowrap;
  font-size: clamp(0.64rem, 0.78vw, 0.76rem);
  letter-spacing: 0.26em;
  order: 0;
  flex-basis: auto;
}
.theme-light .hero__eyebrow::before,
.theme-light .hero__eyebrow::after {
  content: "";
  display: block;
  flex: 1 1 0;
  width: auto;
  min-width: 14px;
  height: 2px;
  background: var(--orange);
}
.theme-light .hero__eyebrow span { padding: 0; border-left: 0; white-space: nowrap; }
@media (max-width: 860px) {
  .theme-light .hero__eyebrow { width: min(70vw, 340px); flex-wrap: wrap; font-size: 0.58rem; letter-spacing: 0.18em; }
}
/* kicker, name and description share one column width, so the three stack
   centred on the same axis */
.theme-light .hero { --hero-col: clamp(280px, 38vw, 600px); }
.theme-light .hero__eyebrow { width: var(--hero-col); }
.hero__wordmark { width: var(--hero-col); }
.theme-light .hero__sub { max-width: var(--hero-col); }
@media (max-width: 860px) {
  .theme-light .hero { --hero-col: min(78vw, 360px); }
  .theme-light .hero__eyebrow { width: var(--hero-col); }
  .hero__wordmark { width: var(--hero-col); }
}

/* ---------- Hero tidy-up ----------
   Kicker tucked onto the name with short ticks instead of long rules, the
   wordmark ~15% smaller with "the Magician" a size up and flush to the M,
   and the paragraph given enough width to run three lines. */
.theme-light .hero { --hero-col: clamp(280px, 38vw, 600px); --hero-mark: calc(var(--hero-col) * 0.85); }
.hero__wordmark { width: var(--hero-mark); margin-bottom: 0.2rem; }
.theme-light .hero__eyebrow {
  width: var(--hero-mark);
  margin-bottom: 1.2rem;
  gap: clamp(0.9rem, 1.4vw, 1.3rem);
}
.theme-light .hero__eyebrow::before,
.theme-light .hero__eyebrow::after { flex: none; width: 26px; min-width: 0; }
.theme-light .hero__title-rest {
  margin-left: 0.15rem;
  font-size: clamp(2.6rem, 5.4vw, 4.4rem);
}
.theme-light .hero__sub {
  max-width: 680px;
  font-size: 1.02rem;
}
@media (max-width: 860px) {
  .theme-light .hero { --hero-mark: var(--hero-col); }
  .theme-light .hero__eyebrow { width: var(--hero-mark); }
  .hero__wordmark { width: var(--hero-mark); }
}

/* ---------- Hero on phones ----------
   A poster: the three words across the top, Mahir filling the space
   between them and the name (so he scales to any phone height), "MAHIR the
   Magician" over his waist only, never his cards, buttons underneath.
   The paragraph is left to desktop. */
@media (max-width: 860px) {
  .theme-light .hero {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    min-height: 92svh;
    padding-top: calc(var(--nav-h) + 1rem);
    padding-bottom: 2.4rem;
  }
  /* let the kicker, name and buttons sit in the hero's own column so
     Mahir can slot in between them */
  .theme-light .hero__content { display: contents; }
  .theme-light .hero__eyebrow {
    order: 0;
    align-self: center;
    width: auto;
    max-width: 100%;
    flex-wrap: nowrap;
    gap: 0.6rem;
    margin: 0;
    font-size: 0.55rem;
    letter-spacing: 0.14em;
  }
  .theme-light .hero__eyebrow::before,
  .theme-light .hero__eyebrow::after { width: 14px; }
  .theme-light .hero__figure {
    order: 1;
    align-self: stretch;
    display: block;
    position: relative;
    inset: auto;
    flex: 1 1 auto;
    min-height: 260px;
    width: auto;
    margin: 0.8rem 0 0;
    opacity: 1;
    z-index: 0;
    animation: none;
    transform: none;
  }
  .theme-light .hero__figure img {
    position: absolute;
    left: 50%;
    bottom: 0;
    height: 100%;
    width: auto;
    max-width: none;
    max-height: none;
    transform: translateX(-38%);   /* his body, not the photo, on the centre line */
    object-fit: contain;
    -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 98%);
    mask-image: linear-gradient(to bottom, #000 70%, transparent 98%);
  }
  /* the name overlaps only the bottom of the photo (his waist) */
  .theme-light .hero__title {
    order: 2;
    position: relative;
    z-index: 1;
    margin: -6rem 0 1.4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .theme-light .hero__title-rest { margin-left: 0; }
  .theme-light .hero__title img,
  .theme-light .hero__title-rest { filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.55)); }
  .theme-light .hero__sub { display: none; }
  .theme-light .hero__actions { order: 3; position: relative; z-index: 1; width: 100%; }
}

/* ---------- About stats on phones ----------
   One stat per row, centred, between hairlines (they used to wrap
   one-then-two on narrow screens). */
@media (max-width: 600px) {
  .about__stats {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.6rem;
    padding: 1.6rem 0;
    border-top: 1px solid var(--line-light);
    border-bottom: 1px solid var(--line-light);
    text-align: center;
  }
  .about__stat-num { font-size: 2.1rem; line-height: 1; }
  .about__stat-label { margin-top: 0.5rem; }
}

/* ---------- Open mobile menu ----------
   The menu panel is light, so once it's open the nav drops its "over the
   dark hero" whites (logo, close icon, current page) on every page,
   scrolled or not. */
@media (max-width: 900px) {
  .theme-light .nav.menu-open { background: rgba(255, 255, 255, 0.97); }
  .theme-light .nav.menu-open .nav__logo img { filter: none; transition: none; }
  .theme-light .nav.menu-open .nav__burger span { background: var(--ink); }
  .theme-light .nav.menu-open .nav__links a:not(.nav__menu-cta) { color: var(--ink); }
  .theme-light .nav.menu-open .nav__links a.is-active { color: var(--orange); }
  .theme-light .nav.menu-open .nav__links a.nav__menu-cta { color: #fff; }
}

/* ---------- Sub-page banners ----------
   Heading only (no description line) and on one line wherever there's room;
   on phones it wraps into balanced lines instead of leaving a lone word. */
.theme-light .page-hero__content { max-width: none; }
.theme-light .page-hero__title { text-wrap: balance; }
@media (min-width: 700px) {
  .theme-light .page-hero__title { white-space: nowrap; }
}