/* S.S Media Production: light and gold.
   Tokens from AI-OS website-design-direction.md. Mobile first. */

@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-latin-wght-normal.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('/assets/fonts/playfair-display-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('/assets/fonts/playfair-display-latin-400-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Review quotes (Round 5): Newsreader, roman, one weight. Loaded only where a quote is shown. */
@font-face {
  font-family: 'Newsreader';
  src: url('/assets/fonts/newsreader-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #F6F1E7;
  --bg2: #EEE6D6;
  --surface: #FFFFFF;
  --text: #1B1712;
  --muted: #5F574B;
  --gold: #D4AF37;
  --goldtext: #7A6012;
  --goldhover: #5C480D;
  --line: rgba(122, 96, 18, 0.22);
  --glow: 0 24px 50px -26px rgba(122, 96, 18, 0.45);
  --glow-hover: 0 30px 60px -24px rgba(122, 96, 18, 0.6), 0 0 38px -10px rgba(212, 175, 55, 0.45);
  --btntext: #1B1712;
  --quiet: rgba(27, 23, 18, 0.06);
  --dark: #0E0C09;
  --darkmuted: #A9A193;
  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  /* Review quotes (Round 5): readable roman type. */
  --quote: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --gutter: 16px;
  --header-h: 68px;
  --radius: 4px;
  color-scheme: light;
}
@media (min-width: 768px) { :root { --gutter: 32px; } }
@media (min-width: 1024px) { :root { --gutter: 48px; --header-h: 88px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* Anchored sections land clear of the sticky header (e.g. /about#team, /faq#late-delivery-guarantee). */
[id] { scroll-margin-top: calc(var(--header-h) + 24px); }
main[id] { scroll-margin-top: 0; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* clip, not hidden: hidden turns the body into a scroll box of its own while a pop-up locks the
     page (html overflow: hidden), and on iPhones the Home scroll film stopped pinning after any
     pop-up had been opened (Shaz, 2 Oct 2026). Browsers without clip keep hidden. */
  overflow-x: hidden;
  overflow-x: clip;
}
@media (min-width: 1024px) { body { font-size: 17px; } }
img, video, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--goldtext); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--goldhover); }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.12; margin: 0; letter-spacing: -0.005em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
main { display: block; outline: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--goldtext); outline-offset: 3px; border-radius: 2px; }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--text); color: #fff; border-radius: 999px; text-decoration: none; }
.skip:focus { top: 12px; color: #fff; }
.muted { color: var(--muted); }

/* A visible marker for copy or checks that are still open. */
.todo { background: #FFF3C4; color: #5C480D; border: 1px dashed #7A6012; border-radius: 3px; padding: 0 4px; font-family: var(--sans); font-size: 0.86em; font-style: normal; }

.wrap { width: 100%; max-width: calc(1248px + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.wrap--narrow { max-width: calc(820px + 2 * var(--gutter)); }
.wrap--film { max-width: calc(1100px + 2 * var(--gutter)); }

/* ---------- Type pieces */
.eyebrow { font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--goldtext); font-weight: 500; margin-bottom: 14px; }
.eyebrow--light { color: var(--gold); }
@media (min-width: 1024px) { .eyebrow { font-size: 12px; letter-spacing: 0.34em; } }

.section { padding: 72px 0; }
.section--top { padding-top: 40px; }
@media (min-width: 1024px) { .section { padding: 120px 0; } .section--top { padding-top: 64px; } }

.section-head { display: flex; flex-direction: column; gap: 18px; margin-bottom: 32px; }
.section-head__title { font-size: 34px; }
.section-head__line { color: var(--muted); margin-top: 14px; max-width: 46ch; }
@media (min-width: 1024px) {
  .section-head { margin-bottom: 52px; }
  .section-head--split { flex-direction: row; justify-content: space-between; align-items: flex-end; }
  .section-head__title { font-size: 54px; }
}

.page-head { max-width: 760px; margin-bottom: 40px; }
.page-head__title { font-size: 42px; }
.page-head__intro { font-size: 18px; color: var(--muted); margin-top: 18px; line-height: 1.6; }
.page-head__hint { font-size: 14px; color: var(--muted); margin-top: 14px; }
.hint-touch { display: none; }
@media (hover: none) { .hint-hover { display: none; } .hint-touch { display: inline; } }
@media (min-width: 1024px) { .page-head { margin-bottom: 56px; } .page-head__title { font-size: 64px; } .page-head__intro { font-size: 19px; } }

.text-link { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--goldtext); text-decoration: none; font-weight: 500; }
.text-link svg { transition: transform .2s ease; }
.text-link:hover svg { transform: translateX(3px); }
.back-link { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--goldtext); text-decoration: none; font-weight: 500; }

.prose p + p, .prose p + ul, .prose ul + p { margin-top: 1em; }
.prose ul { padding-left: 1.2em; }
.prose li + li { margin-top: 0.35em; }

/* ---------- Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 12px 26px; border-radius: 999px; border: 1px solid transparent; font-size: 15px; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; white-space: nowrap; }
.btn--sm { min-height: 40px; padding: 9px 18px; font-size: 14px; }
.btn--lg { min-height: 52px; padding: 15px 38px; }
.btn--gold { background: var(--gold); color: var(--btntext); }
.btn--gold:hover { background: #E2C155; color: var(--btntext); }
.btn--ghost { background: transparent; border-color: var(--line); color: var(--text); font-weight: 500; }
.btn--ghost:hover { border-color: var(--goldtext); color: var(--text); }
.btn--glass { background: rgba(0, 0, 0, 0.18); border-color: rgba(255, 255, 255, 0.55); color: #fff; font-weight: 500; backdrop-filter: blur(4px); }
.btn--glass:hover { background: rgba(0, 0, 0, 0.32); color: #fff; }
.btn svg { flex: none; }
.round-btn { width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.round-btn:hover { border-color: var(--goldtext); }
.round-btn:disabled { opacity: .35; cursor: default; }

/* ---------- Header */
.site-header { position: sticky; top: 0; z-index: 50; height: var(--header-h); background: rgba(246, 241, 231, 0.94); border-bottom: 1px solid var(--line); transition: background-color .3s ease, border-color .3s ease, color .3s ease; }
/* The blur sits on a layer behind the header, never on the header itself: a backdrop-filter on the
   header makes it the frame for the fixed phone menu inside it, which squashed the open menu into
   the header's own height in Chrome-based browsers (review, 2 Oct 2026). */
@supports (backdrop-filter: blur(8px)) {
  .site-header { background: transparent; }
  .site-header::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(246, 241, 231, 0.86); backdrop-filter: blur(10px); transition: opacity .3s ease; }
  .site-header--over:not(.is-solid)::before { opacity: 0; }
}
.site-header__inner { height: 100%; max-width: calc(1248px + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: center; gap: 12px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; margin-right: auto; min-width: 0; }
.brand__mark { width: 36px; height: 36px; flex: none; }
.brand__name { display: flex; flex-direction: column; gap: 2px; line-height: 1; }
.brand__ss { font-size: 12px; letter-spacing: 0.3em; color: var(--text); white-space: nowrap; }
.brand__prod { font-size: 8px; letter-spacing: 0.5em; color: var(--goldtext); font-weight: 600; white-space: nowrap; }
@media (min-width: 1024px) {
  .brand { gap: 14px; }
  .brand__mark { width: 46px; height: 46px; }
  .brand__ss { font-size: 15px; letter-spacing: 0.32em; }
  .brand__prod { font-size: 10px; letter-spacing: 0.52em; }
}
.site-header--over:not(.is-solid) { background: transparent; border-bottom-color: transparent; backdrop-filter: none; }
.site-header--over:not(.is-solid) .brand__ss, .site-header--over:not(.is-solid) .nav__link, .site-header--over:not(.is-solid) .menu-btn { color: #fff; }
.site-header--over:not(.is-solid) .brand__prod { color: var(--gold); }
.site-header--over:not(.is-solid) .nav__link--quiet { color: rgba(255, 255, 255, 0.75); }

.nav__list { list-style: none; }
.nav__link { color: var(--text); text-decoration: none; font-size: 14px; letter-spacing: 0.04em; transition: color .25s ease, text-shadow .25s ease; -webkit-tap-highlight-color: transparent; }
.nav__link:hover, .nav__link:focus-visible, .nav__link:active { color: var(--goldtext); text-shadow: 0 0 18px rgba(212, 175, 55, 0.35); }
.site-header--over:not(.is-solid) .nav__link:hover, .site-header--over:not(.is-solid) .nav__link:focus-visible, .site-header--over:not(.is-solid) .nav__link:active { color: var(--gold); text-shadow: 0 0 16px rgba(212, 175, 55, 0.55); }
.nav__link[aria-current="page"] { color: var(--goldtext); }
.nav__link--quiet { color: var(--muted); }
.menu-btn { width: 44px; height: 44px; margin-right: -8px; border: 0; background: transparent; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text); }
.site-header__enquire { flex: none; }

@media (max-width: 1023px) {
  .nav { position: fixed; left: 0; right: 0; top: var(--header-h); bottom: 0; background: var(--bg); padding: 28px var(--gutter) 40px; overflow-y: auto; transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s; }
  .nav-open .nav { transform: none; opacity: 1; visibility: visible; transition: opacity .25s ease, transform .25s ease; }
  .nav__list { display: flex; flex-direction: column; }
  .nav__list li { border-bottom: 1px solid var(--line); }
  /* Every item the same: one modest size, all in the readable gold, Client login included (Shaz,
     2 Oct 2026). The over-the-hero white is for the header bar only, never the open menu. */
  .nav .nav__link, .site-header--over:not(.is-solid) .nav .nav__link { display: block; padding: 16px 0; font-family: var(--serif); font-size: 19px; letter-spacing: 0.02em; color: var(--goldtext); text-shadow: none; }
  .nav .nav__link:hover, .nav .nav__link:focus-visible, .nav .nav__link:active,
  .site-header--over:not(.is-solid) .nav .nav__link:hover, .site-header--over:not(.is-solid) .nav .nav__link:focus-visible, .site-header--over:not(.is-solid) .nav .nav__link:active { color: var(--goldhover); text-shadow: 0 0 18px rgba(212, 175, 55, 0.35); }
  .nav:focus { outline: none; }
  .nav-open .site-header { background: var(--bg); border-bottom-color: var(--line); }
  .nav-open .site-header .brand__ss, .nav-open .site-header .menu-btn { color: var(--text); }
  .nav-open .site-header .brand__prod { color: var(--goldtext); }
  .nav-open { overflow: hidden; }
}
@media (min-width: 1024px) {
  .menu-btn { display: none; }
  .nav__list { display: flex; align-items: center; gap: 34px; }
  .site-header__enquire { margin-left: 34px; }
}

/* ---------- Media slots and placeholders */
.media { position: relative; display: block; overflow: hidden; background: #EAE0CC url('/assets/img/aperture-line.svg') no-repeat center / 44px; }
.media--dark { background: #1D1913 url('/assets/img/aperture-line.svg') no-repeat center / 52px; }
.media--light { background-color: #EAE0CC; }
.media > img, .media > video, .media > picture, .media > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.media.is-missing > img, .media.is-missing > picture, .media > img.is-missing, .media > video.is-missing { visibility: hidden; }
.media__note { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 0; font-size: 12px; line-height: 1.4; color: var(--goldtext); text-align: center; font-style: italic; }
.media--dark .media__note { color: #C9B37A; }

/* ---------- Home hero */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 580px; max-height: 1000px; margin-top: calc(-1 * var(--header-h)); color: #fff; display: flex; align-items: flex-end; overflow: hidden; }
.hero__media { position: absolute; inset: 0; }
.hero__poster { z-index: 1; }
.hero__video { z-index: 2; opacity: 0; transition: opacity .8s ease; }
.hero__video.is-playing { opacity: 1; }
.hero__shade { position: absolute; inset: 0; z-index: 3; background: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.08) 26%, rgba(0,0,0,0.42) 62%, var(--bg) 100%); }
.hero__content { position: relative; z-index: 4; width: 100%; padding: 0 var(--gutter) 88px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; }
.hero__title { font-size: 32px; line-height: 1.1; max-width: 16ch; }
.hero__phrase { display: inline-block; }
.hero .eyebrow { font-weight: 600; text-shadow: 0 1px 2px rgba(0,0,0,0.45), 0 0 18px rgba(0,0,0,0.5); }
/* "Est. 2015" as a small gold hallmark between two hairlines, above the eyebrow. */
.hero__est { display: flex; align-items: center; gap: 14px; margin-bottom: -4px; font-family: var(--serif); font-size: 14px; letter-spacing: 0.32em; text-transform: uppercase; color: #F0DA94; text-shadow: 0 1px 3px rgba(0,0,0,0.7), 0 0 14px rgba(0,0,0,0.6), 0 0 28px rgba(0,0,0,0.45); }
.hero__est::before, .hero__est::after { content: ''; width: 28px; height: 1px; background: linear-gradient(to right, rgba(240,218,148,0), #F0DA94); box-shadow: 0 0 6px rgba(0,0,0,0.5); }
.hero__est::after { transform: scaleX(-1); }
.hero__est > span[aria-hidden] { margin-right: -0.32em; }
.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }
/* Phones: the text sits low, where the ivory fade began, over a vertical loop that opens bright.
   Darker for longer, the fade only in the last strip, the paler gold eyebrow and a soft shadow on
   the headline (review, 2 Oct 2026: hero text too faint on phones). */
@media (max-width: 767px) {
  .hero__shade { background: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.12) 24%, rgba(0,0,0,0.5) 52%, rgba(0,0,0,0.66) 88%, var(--bg) 100%); }
  .hero .eyebrow { color: #F0DA94; text-shadow: 0 1px 3px rgba(0,0,0,0.7), 0 0 14px rgba(0,0,0,0.6); }
  .hero__title { text-shadow: 0 2px 18px rgba(0,0,0,0.45); }
}
.hero__enquire { display: none; }
.hero__sound .i-muted, .hero__sound.is-on .i-sound { display: none; }
.hero__sound.is-on .i-muted { display: inline; }
.no-js .hero__sound { display: none; }
@media (min-width: 768px) {
  .hero { align-items: center; }
  .hero__content { padding-bottom: 0; padding-top: 40px; gap: 24px; }
  .hero__title { font-size: 57px; max-width: 16ch; }
  .hero__est { font-size: 16px; gap: 18px; margin-bottom: -10px; }
  .hero__est::before, .hero__est::after { width: 44px; }
  .hero__enquire { display: inline-flex; }
  .hero__actions { margin-top: 18px; gap: 16px; }
}

/* ---------- Trust strip: six facts (Round 9). Three across in two rows (phones too since Round 10,
   in smaller type: Shaz, 2 Oct 2026), and from 1600px one row of six that runs the full width of
   the window: on a maximised screen the four-fact strip stopped well short of both edges (Shaz).
   Hairlines only between facts, never on an outside edge. */
.trust { padding-top: 8px; }
.trust__strip { list-style: none; display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.trust__item { display: flex; flex-direction: column; gap: 5px; padding: 18px 8px; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); min-width: 0; }
.trust__item:nth-child(3n+1) { padding-left: 0; border-left: 0; }
.trust__item:nth-child(3n) { padding-right: 0; }
.trust__item:nth-last-child(-n+3) { border-bottom: 0; }
.trust__big { font-family: var(--serif); font-size: clamp(12.5px, 3.6vw, 16px); line-height: 1.22; color: var(--goldtext); overflow-wrap: break-word; hyphens: auto; }
.trust__small { font-size: clamp(10px, 2.8vw, 12px); color: var(--muted); line-height: 1.4; }
.trust__small a { color: var(--goldtext); white-space: nowrap; }
@media (min-width: 640px) { .trust__item { padding: 24px 16px; } }
@media (min-width: 900px) {
  .trust__item { padding: 38px 28px; }
  .trust__big { font-size: 24px; }
  .trust__small { font-size: 13px; }
}
@media (min-width: 1600px) {
  .trust .wrap { max-width: none; }
  .trust__strip { --cols: 6; }
  .trust__item:nth-child(n) { padding: 38px 28px; border-left: 1px solid var(--line); border-bottom: 0; }
  .trust__item:first-child { padding-left: 0; border-left: 0; }
  .trust__item:last-child { padding-right: 0; }
}

/* ---------- Film tiles and grids */
.tile { position: relative; display: block; border-radius: var(--radius); overflow: hidden; box-shadow: var(--glow); transition: box-shadow .45s ease; color: #fff; text-decoration: none; isolation: isolate; -webkit-tap-highlight-color: transparent; }
.tile__media { position: absolute; inset: 0; }
.tile__video { opacity: 0; transition: opacity .6s ease, transform .6s ease; z-index: 2; }
.tile__video.is-playing { opacity: 1; }
.tile__poster { transition: transform .6s ease; }
.tile:hover .tile__video, .tile:hover .tile__poster { transform: scale(1.025); }
.tile::after { content: ''; position: absolute; inset: auto 0 0 0; height: 60%; z-index: 3; background: linear-gradient(to top, rgba(0,0,0,0.78), rgba(0,0,0,0)); pointer-events: none; }
.tile__text { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; padding: 12px 12px 12px; display: flex; flex-direction: column; gap: 3px; }
.tile__names { font-family: var(--serif); font-size: 16px; line-height: 1.2; }
.tile__line { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.82); line-height: 1.35; }
.tile__sound { position: absolute; top: 10px; right: 10px; z-index: 4; width: 32px; height: 32px; border-radius: 999px; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(.9); transition: opacity .2s ease, transform .2s ease; }
.tile.is-audible .tile__sound { opacity: 1; transform: none; }
.tile:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
@media (min-width: 1024px) {
  .tile__text { padding: 20px; gap: 4px; }
  .tile__names { font-size: 21px; }
  .tile__line { font-size: 11px; letter-spacing: 0.14em; }
}

.film-grid--home { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.film-grid--home .tile { aspect-ratio: 4 / 3; }
.film-grid--home .tile:first-child, .film-grid--home .tile:last-child { grid-column: span 2; aspect-ratio: 16 / 9; }
.film-grid--home .tile:not(:first-child):not(:last-child) .tile__line { display: none; }
@media (min-width: 900px) {
  .film-grid--home { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .film-grid--home .tile, .film-grid--home .tile:first-child, .film-grid--home .tile:last-child { grid-column: auto; aspect-ratio: 16 / 9; }
  .film-grid--home .tile .tile__line { display: block; }
}

.film-grid--full { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; grid-auto-flow: dense; }
.film-grid--full .tile--h { grid-column: span 2; aspect-ratio: 16 / 9; }
.film-grid--full .tile--v { aspect-ratio: 9 / 16; }
@media (min-width: 640px) {
  .film-grid--full { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .film-grid--full .tile--h { grid-column: span 1; }
  /* A vertical film, if one comes back, spans three landscape rows (close to 9:16 at this width). */
  .film-grid--full .tile--v { grid-row: span 3; aspect-ratio: auto; }
  .film-grid--full .tile__names { font-size: 20px; }
  /* An odd film out at the end sits centred rather than alone on the left. */
  .film-grid--full .tile--h:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc((100% - 16px) / 2); }
}
@media (min-width: 1024px) {
  .film-grid--full { gap: 28px; }
  .film-grid--full .tile--h:last-child:nth-child(odd) { width: calc((100% - 28px) / 2); }
  .film-grid--full .tile__text { padding: 26px 28px; }
  .film-grid--full .tile__names { font-size: 27px; }
  .film-grid--full .tile__line { font-size: 12px; }
  .film-grid--full .tile__sound { top: 16px; right: 16px; width: 38px; height: 38px; }
}

/* ---------- Scroll film placeholder (scroll-craft later) */
.scroll-film { position: relative; background: var(--dark); color: #fff; }
.scroll-film__sticky { position: relative; min-height: 70vh; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.scroll-film__media { position: absolute; inset: 0; }
.scroll-film__poster { z-index: 1; }
.scroll-film__video { z-index: 2; opacity: 0; transition: opacity .5s ease; }
.scroll-film__video.is-ready { opacity: 1; }
/* The lines sit dead centre (Shaz, Round 8), over the hands, so a soft oval of shade sits just
   behind them to keep the words readable over the bright venue; the edges of the frame stay bright. */
.scroll-film__shade { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(ellipse 72% 34% at 50% 50%, rgba(10, 8, 6, 0.5) 0%, rgba(10, 8, 6, 0.25) 55%, rgba(10, 8, 6, 0) 100%); }
.scroll-film__lines { position: relative; z-index: 4; display: flex; flex-direction: column; gap: 18px; padding: 80px var(--gutter); text-align: center; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 0 24px rgba(0, 0, 0, 0.45); }
.scroll-film__line { font-family: var(--serif); font-size: 30px; line-height: 1.2; }
.js .scroll-film.is-live { height: 260vh; }
.js .scroll-film.is-live .scroll-film__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 0; }
.js .scroll-film.is-live .scroll-film__lines { display: grid; }
.js .scroll-film.is-live .scroll-film__line { grid-area: 1 / 1; opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.js .scroll-film.is-live .scroll-film__line.is-active { opacity: 1; transform: none; }
@media (min-width: 1024px) { .scroll-film__line { font-size: 52px; } }

/* ---------- Reviews */
.review { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 26px 24px; display: flex; flex-direction: column; gap: 16px; height: 100%; }
.stars { display: inline-flex; gap: 3px; color: var(--gold); }
.review__quote { margin: 0; flex: 1; }
.review__quote p { font-family: var(--quote); font-style: normal; font-weight: 400; font-size: 17px; line-height: 1.62; color: var(--text); }
.review__name { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--goldtext); font-weight: 600; }
.review__suffix { color: var(--goldtext); }
@media (min-width: 1024px) {
  .review { padding: 34px 32px; }
  .review__quote p { font-size: 18px; }
}

/* ---------- Drifting rows (reviews, Home photo strip) */
.marquee { position: relative; }
.marquee__viewport { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; scroll-snap-type: x proximity; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%); outline-offset: -3px; }
.marquee__viewport::-webkit-scrollbar { display: none; }
.marquee__track { display: flex; width: max-content; }
.marquee__set { list-style: none; margin: 0; display: flex; align-items: stretch; gap: var(--mq-gap, 16px); padding: 10px calc(var(--mq-gap, 16px) / 2) 44px; }
.marquee__item { flex: none; scroll-snap-align: center; }
.marquee.is-moving .marquee__viewport { overflow: hidden; scroll-snap-type: none; touch-action: pan-y; }
.marquee.is-moving .marquee__track { will-change: transform; }
.marquee__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.marquee__nav { display: flex; gap: 10px; margin-left: auto; }
.marquee__pause .i-play, .marquee.is-user-paused .marquee__pause .i-pause { display: none; }
.marquee.is-user-paused .marquee__pause .i-play { display: inline; }
.marquee:not(.is-moving) .marquee__pause { display: none; }
.marquee--reviews { --mq-gap: 16px; }
.marquee--reviews .marquee__item { width: 72vw; max-width: 300px; }
.review--mini { padding: 22px 20px; gap: 12px; }
.review--mini .review__quote p { font-size: 16px; line-height: 1.6; }
.review--mini .stars svg { width: 15px; height: 15px; }
.marquee--photos { --mq-gap: 12px; }
.marquee--photos .marquee__item .media { height: 300px; width: auto; border-radius: var(--radius); box-shadow: var(--glow); }
@media (min-width: 768px) {
  .marquee--reviews { --mq-gap: 20px; }
  .marquee--reviews .marquee__item { width: 280px; }
}
@media (min-width: 900px) {
  .marquee--photos { --mq-gap: 24px; }
  .marquee--photos .marquee__item .media { height: 420px; }
}

/* ---------- Every review, on the page */
/* A gallery wall like Photography (Round 11, Shaz): small cards of different heights, two across
   on phones, three on tablets, four on laptops, five on big screens. Short reviews are dark
   pull-quote cards in larger type; every fourth of the rest is gold-tinted. */
.reviews-all__grid { list-style: none; columns: 2; column-gap: 10px; }
/* Round 12: the space under each card is padding, not margin, and cards are flow-root boxes, not
   inline-block. With either of the old ones, Safari started every column after the first a few
   pixels lower. Checked at 14 widths from 320 to 1440: no card splits between columns. */
.reviews-all__grid > li { break-inside: avoid; -webkit-column-break-inside: avoid; display: flow-root; padding-bottom: 10px; }
.reviews-all__grid .review { padding: 14px 12px 13px; gap: 9px; border-radius: 8px; box-shadow: 0 16px 34px -26px rgba(122, 96, 18, 0.5); }
.reviews-all__grid .review__quote p { font-size: 13px; line-height: 1.5; }
.reviews-all__grid .stars svg { width: 11px; height: 11px; }
.reviews-all__grid .review__name { font-size: 9.5px; letter-spacing: 0.18em; }
.reviews-all__grid .review--tint { background: var(--bg2); border-color: rgba(122, 96, 18, 0.35); }
.reviews-all__grid .review--pull { background: var(--dark); border-color: rgba(212, 175, 55, 0.35); }
.reviews-all__grid .review--pull .review__quote p { color: #F3ECDD; font-size: 16px; line-height: 1.4; }
.reviews-all__grid .review--pull .review__name { color: var(--gold); }
@media (min-width: 640px) {
  .reviews-all__grid { columns: 3; column-gap: 14px; }
  .reviews-all__grid > li { padding-bottom: 14px; }
  .reviews-all__grid .review { padding: 18px 16px; gap: 11px; }
  .reviews-all__grid .review__quote p { font-size: 14px; }
  .reviews-all__grid .review--pull .review__quote p { font-size: 18px; }
}
@media (min-width: 1024px) {
  .reviews-all__grid { columns: 4; column-gap: 18px; }
  .reviews-all__grid > li { padding-bottom: 18px; }
  .reviews-all__grid .review { padding: 22px 20px; gap: 12px; }
  .reviews-all__grid .review__quote p { font-size: 15px; }
  .reviews-all__grid .stars svg { width: 13px; height: 13px; }
  .reviews-all__grid .review__name { font-size: 10.5px; }
  .reviews-all__grid .review--pull .review__quote p { font-size: 20px; }
}
@media (min-width: 1440px) { .reviews-all__grid { columns: 5; } }
/* Long reviews show their first lines; "Read more" (or a tap on the card) opens the whole review. */
/* A height cap (8 lines; 9 on laptops), not line-clamp: Safari mis-measured clamped cards in the
   column layout and split one across two columns. A cut quote fades out at the bottom. */
.reviews-all__grid .review__quote p { max-height: 12em; overflow: hidden; }
.reviews-all__grid .review.is-clamped .review__quote p { -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent); mask-image: linear-gradient(to bottom, #000 80%, transparent); }
@media (min-width: 1024px) { .reviews-all__grid .review__quote p { max-height: 13.5em; } }
.reviews-all__grid .review.is-clamped { cursor: pointer; }
.review__more { align-self: flex-start; margin: -7px 0 -3px; padding: 4px 0; border: 0; background: none; font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: var(--goldtext); cursor: pointer; }
.review--pull .review__more { color: var(--gold); }
.review-dialog { width: min(560px, calc(100% - 40px)); max-width: none; max-height: none; padding: 0; border: 0; background: transparent; overflow: visible; }
.review-dialog::backdrop { background: rgba(14, 12, 9, 0.62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.review-dialog__body { max-height: min(78vh, 720px); max-height: min(78svh, 720px); overflow-y: auto; overscroll-behavior: contain; border-radius: 12px; }
.review-dialog__body .review { padding: 30px 24px 24px; border-radius: 12px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.45); }
.review-dialog__body .review__quote p { font-size: 17px; line-height: 1.62; }
.review-dialog__close { position: absolute; top: -16px; right: -12px; z-index: 2; width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2); }
.review-dialog__close:hover { border-color: var(--goldtext); }

/* ---------- Portal */
.portal { background: var(--bg2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.portal__grid { display: grid; gap: 32px; }
.portal__intro { color: var(--muted); font-size: 17px; margin-top: 22px; max-width: 58ch; }
/* Four boxes, two to a row, phones included (Shaz, 2 Oct 2026). */
.portal__features { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.portal__feature { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px 13px; font-size: 13px; line-height: 1.45; color: var(--muted); }
.portal__feature strong { display: block; color: var(--text); font-weight: 600; margin-bottom: 4px; font-size: 14px; line-height: 1.3; }
@media (min-width: 640px) {
  .portal__features { gap: 12px; }
  .portal__feature { padding: 16px 18px; font-size: 15px; line-height: 1.6; }
  .portal__feature strong { font-size: inherit; margin-bottom: 2px; }
}
/* The S.S Media App artwork: a dark, gold-lit card on the ivory section. */
.portal-app { margin: 0 auto; width: 100%; max-width: 420px; }
.portal-app__media { border-radius: 10px; box-shadow: 0 34px 70px -30px rgba(122, 96, 18, 0.6), 0 0 0 1px rgba(212, 175, 55, 0.18); transition: box-shadow .45s ease; }
@media (hover: hover) { .portal-app__media:hover { box-shadow: 0 40px 80px -28px rgba(122, 96, 18, 0.7), 0 0 46px -8px rgba(212, 175, 55, 0.5), 0 0 0 1px rgba(212, 175, 55, 0.3); } }
.journey { list-style: none; display: grid; gap: 18px; border-top: 1px solid var(--line); padding-top: 28px; }
.journey__step { display: grid; grid-template-columns: 40px 1fr; column-gap: 12px; font-size: 15px; color: var(--muted); }
.journey__step strong { color: var(--text); font-weight: 600; }
.journey__step > span:last-child { grid-column: 2; }
.journey__num { grid-row: span 2; font-family: var(--serif); font-size: 22px; color: var(--goldtext); line-height: 1.2; }
.portal__login { font-size: 15px; color: var(--muted); }
.portal__login a { font-weight: 500; }
@media (min-width: 900px) {
  /* Copy and feature cards on the left, the app artwork on the right. */
  .portal__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); column-gap: 80px; row-gap: 40px; }
  .portal__text { grid-column: 1; grid-row: 1; align-self: end; }
  .portal__features { grid-column: 1; grid-row: 2; grid-template-columns: 1fr 1fr; align-self: start; }
  .portal-app { grid-column: 2; grid-row: 1 / span 2; align-self: center; justify-self: end; max-width: 440px; margin: 0; }
  .journey { margin-top: 16px; }
  .journey { grid-column: 1 / -1; grid-template-columns: repeat(4, 1fr); gap: 24px; }
  .journey__step { grid-template-columns: 1fr; }
  .journey__num { grid-row: auto; margin-bottom: 6px; }
  .journey__step > span:last-child { grid-column: 1; }
  .portal__login { grid-column: 1 / -1; }
}

/* ---------- Photos */
.photo-masonry { columns: 2; column-gap: 12px; }
.photo-masonry__item { margin: 0 0 12px; break-inside: avoid; }
.photo-masonry__item .media { border-radius: var(--radius); box-shadow: var(--glow); }
@media (min-width: 1024px) { .photo-masonry { columns: 3; column-gap: 24px; } .photo-masonry__item { margin-bottom: 24px; } }

.photo-link { display: block; border-radius: var(--radius); cursor: zoom-in; }
.photo-link:focus-visible { outline: 2px solid var(--goldtext); outline-offset: 3px; }

.lightbox { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: #fff; overflow: hidden; }
.lightbox::backdrop { background: rgba(5, 5, 5, 0.94); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.lightbox[open] { display: block; }
.lightbox__stage { margin: 0; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 68px 16px 88px; touch-action: pan-y pinch-zoom; }
.lightbox__stage picture { display: flex; max-width: 100%; max-height: 100%; }
.lightbox__img { width: auto; height: auto; max-width: 100%; max-height: calc(100vh - 156px); max-height: calc(100svh - 156px); object-fit: contain; border-radius: 4px; box-shadow: 0 40px 120px -30px rgba(212, 175, 55, 0.35); transition: opacity .3s ease; }
.lightbox__img.is-loading { opacity: 0.4; }
.lightbox__close, .lightbox__arrow { position: fixed; z-index: 2; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(0, 0, 0, 0.35); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color .2s ease; }
.lightbox__close { top: 12px; right: 12px; width: 48px; height: 48px; }
.lightbox__arrow { bottom: 18px; width: 52px; height: 52px; }
.lightbox__arrow--prev { left: 16px; }
.lightbox__arrow--next { right: 16px; }
.lightbox__close:hover, .lightbox__arrow:hover { border-color: var(--gold); }
.lightbox__close:focus-visible, .lightbox__arrow:focus-visible { outline-color: var(--gold); }
.lightbox__count { position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%); margin: 0; font-size: 13px; letter-spacing: 0.14em; color: rgba(255, 255, 255, 0.82); font-variant-numeric: tabular-nums; }
@media (min-width: 768px) {
  .lightbox__stage { padding: 72px 96px 64px; }
  .lightbox__img { max-height: calc(100vh - 136px); max-height: calc(100svh - 136px); }
  .lightbox__close { top: 24px; right: 32px; }
  .lightbox__arrow { top: 50%; bottom: auto; transform: translateY(-50%); }
  .lightbox__arrow--prev { left: 28px; }
  .lightbox__arrow--next { right: 28px; }
  .lightbox__count { bottom: 22px; }
}

/* ---------- Instagram (5e: the Worker fills the grid with the latest four posts). 3:4 tiles, like
   Instagram's own profile grid, so reel covers are cropped the way they were designed to be. */
.insta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.insta-grid__item { aspect-ratio: 3 / 4; border-radius: var(--radius); box-shadow: var(--glow); transition: box-shadow .45s ease; -webkit-tap-highlight-color: transparent; }
.insta-grid__badge { position: absolute; top: 10px; right: 10px; z-index: 2; display: flex; color: #fff; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55)); pointer-events: none; }
.instagram__follow { margin-top: 28px; text-align: center; }
@media (min-width: 900px) { .insta-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; } }

/* ---------- Page close */
.close-cta { padding: 88px 0; text-align: center; }
.close-cta__title { font-family: var(--serif); font-size: 36px; line-height: 1.12; }
.close-cta__line { color: var(--muted); font-size: 17px; margin-top: 16px; }
.close-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 28px; }
.close-cta__small { font-size: 13px; color: var(--muted); margin-top: 18px; }
.close-cta__back { margin-top: 28px; }
.close-cta--film { border-top: 1px solid var(--line); }
@media (min-width: 1024px) { .close-cta { padding: 140px 0; } .close-cta__title { font-size: 60px; } .close-cta__line { font-size: 18px; } }

/* ---------- Player (always dark) */
.player { position: relative; border-radius: 6px; overflow: hidden; background: #000; color: #fff; }
.player__stage { aspect-ratio: 16 / 9; }
.player--v .player__stage { aspect-ratio: 9 / 16; }
.player__video { object-fit: contain !important; background: transparent; }
.player__big { position: absolute; z-index: 3; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.5); background: rgba(0,0,0,0.45); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform .2s ease, background-color .2s ease; }
.player__big svg { width: 26px; height: 26px; margin-left: 3px; }
.player__big:hover { transform: scale(1.05); background: rgba(0,0,0,0.6); }
.player.is-started .player__big { display: none; }
.player__bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; align-items: center; gap: 10px; padding: 48px 12px 10px; background: linear-gradient(to top, rgba(0,0,0,0.78), rgba(0,0,0,0)); transition: opacity .3s ease; }
.player.is-playing.is-idle .player__bar { opacity: 0; }
.player__btn { width: 40px; height: 40px; flex: none; border: 0; background: transparent; color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.player__btn:focus-visible, .player__big:focus-visible { outline-color: var(--gold); }
.player__time { font-size: 12px; color: rgba(255,255,255,0.85); font-variant-numeric: tabular-nums; flex: none; }
.player .i-pause, .player .i-muted { display: none; }
.player.is-playing .i-play { display: none; }
.player.is-playing .i-pause { display: inline; }
.player.is-muted .i-sound { display: none; }
.player.is-muted .i-muted { display: inline; }
.player__seek { --p: 0%; flex: 1; min-width: 40px; height: 20px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.player__seek::-webkit-slider-runnable-track { height: 3px; border-radius: 2px; background: linear-gradient(to right, var(--gold) var(--p), rgba(255,255,255,0.28) var(--p)); }
.player__seek::-moz-range-track { height: 3px; border-radius: 2px; background: rgba(255,255,255,0.28); }
.player__seek::-moz-range-progress { height: 3px; border-radius: 2px; background: var(--gold); }
.player__seek::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -4.5px; border-radius: 999px; background: var(--gold); border: 0; }
.player__seek::-moz-range-thumb { width: 12px; height: 12px; border-radius: 999px; background: var(--gold); border: 0; }
.player__seek:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (max-width: 480px) { .player__bar { gap: 4px; padding: 40px 6px 6px; } .player__time[data-time] { display: none; } }

/* ---------- Film pop-up (always dark, like a cinema) */
.film-dialog { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: #fff; overflow: auto; }
.film-dialog::backdrop { background: rgba(5, 5, 5, 0.94); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.film-dialog[open] { display: flex; }
.film-dialog__inner { margin: auto; width: 100%; padding: 64px var(--gutter) 28px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.film-dialog .player { width: 100%; max-width: 1040px; box-shadow: 0 40px 120px -30px rgba(212, 175, 55, 0.4); }
.film-dialog .player--h { max-width: min(1040px, calc((100svh - 230px) * 16 / 9)); }
.film-dialog .player--v { max-width: min(420px, calc((100svh - 230px) * 9 / 16)); }
.film-dialog__close { position: fixed; top: 12px; right: 12px; z-index: 5; width: 48px; height: 48px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.3); background: rgba(0,0,0,0.3); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.film-dialog__close:hover { border-color: var(--gold); }
.film-dialog__close:focus-visible { outline-color: var(--gold); }
.film-dialog__meta { width: 100%; max-width: 1040px; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.film-dialog .player--v + .film-dialog__meta { max-width: 420px; }
.film-dialog__title { font-size: 26px; }
.film-dialog__line { color: var(--darkmuted); font-size: 14px; margin-top: 6px; }
.film-dialog__line:empty { display: none; }
@media (min-width: 768px) {
  .film-dialog__inner { padding-top: 72px; }
  .film-dialog__close { top: 24px; right: 32px; }
  .film-dialog__meta { flex-direction: row; justify-content: space-between; align-items: center; }
  .film-dialog__title { font-size: 34px; }
}
.dialog-open { overflow: hidden; }

/* ---------- Film page */
.film-page { padding: 24px 0 64px; }
.film-page .back-link { margin-bottom: 20px; }
.film-page .player { box-shadow: var(--glow); }
.film-page .player--v { max-width: 420px; margin: 0 auto; }
.film-page__grid { display: grid; gap: 24px; margin-top: 32px; }
.film-page__title { font-size: 40px; }
.film-page__line { color: var(--muted); margin-top: 10px; font-size: 15px; }
.film-page__desc { font-size: 17px; line-height: 1.7; }
.film-page__related { margin-top: 16px; }
.film-page__details { margin: 28px 0 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.film-page__details > div { display: grid; grid-template-columns: 90px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.film-page__details dt { color: var(--goldtext); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; padding-top: 3px; }
.film-page__details dd { margin: 0; }
.film-page__review { margin-top: 40px; max-width: 720px; }
@media (min-width: 1024px) {
  .film-page { padding-top: 40px; }
  .film-page__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); column-gap: 64px; margin-top: 48px; }
  .film-page__title { font-size: 56px; }
}

/* ---------- About */
.about-story__text .prose { margin-top: 28px; color: var(--text); font-size: 17px; }
.about-story__text .prose p + p { margin-top: 1.1em; }
/* Phones and tablets (Round 10, Shaz): a small photo to the right of the first paragraph. */
.about-story__photo { float: right; width: 38%; max-width: 230px; margin: 32px 0 10px 16px; }
.about-story__media { aspect-ratio: 4 / 5; border-radius: var(--radius); box-shadow: var(--glow); }
.about-story__photo figcaption { font-size: 11px; color: var(--muted); margin-top: 8px; letter-spacing: 0.04em; line-height: 1.35; }
@media (min-width: 640px) { .about-story__photo { margin-left: 28px; } .about-story__photo figcaption { font-size: 13px; margin-top: 12px; } }
.about-award { background: var(--bg2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.about-award__grid { display: grid; gap: 32px; align-items: center; }
.about-award__media { aspect-ratio: 1 / 1.41; max-width: 420px; width: 100%; border-radius: var(--radius); box-shadow: var(--glow); }
.about-award__media > img { object-fit: contain; background: #fff; }
.about-award__body { color: var(--muted); font-size: 17px; margin-top: 18px; }
.about-team__text { max-width: 760px; }
.about-team__text .prose { margin-top: 22px; color: var(--muted); font-size: 17px; }
.about-team__media { aspect-ratio: 16 / 9; margin-top: 40px; border-radius: var(--radius); box-shadow: var(--glow); }
.about-female { padding-top: 0; }
.about-female__grid { display: grid; gap: 32px; align-items: center; }
.about-female__body { color: var(--muted); font-size: 17px; margin-top: 18px; }
.about-bts { background: var(--dark); color: #fff; }
.about-bts .eyebrow { color: var(--gold); }
.about-bts__line { color: var(--darkmuted); font-size: 17px; margin-top: 18px; }
.about-bts__grid { display: grid; gap: 32px; align-items: center; }
/* Two clips: a swipeable row on phones (the second peeks in), side by side from 640px. */
.about-bts__clips { display: grid; grid-auto-flow: column; grid-auto-columns: min(76vw, 340px); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 6px; scroll-padding: 0 var(--gutter); scrollbar-width: none; }
.about-bts__clips::-webkit-scrollbar { display: none; }
.about-bts__clip { margin: 0; scroll-snap-align: start; }
.about-bts__player { aspect-ratio: 9 / 16; width: 100%; border-radius: 6px; box-shadow: 0 30px 80px -30px rgba(212, 175, 55, 0.35); }
.about-bts__caption { margin-top: 14px; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); text-align: center; }
.about-bts__caption span { color: var(--darkmuted); }
.about-bts__caption span::before { content: '·'; margin: 0 8px 0 4px; color: var(--gold); }
@media (min-width: 640px) {
  .about-bts__clips { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 340px)); justify-content: center; gap: 24px; overflow: visible; margin: 0; padding: 0; }
}
.about-bts__video { opacity: 0; transition: opacity .6s ease; z-index: 2; }
.about-bts__video.is-playing { opacity: 1; }
.about-bts__sound { position: absolute; z-index: 3; left: 50%; bottom: 16px; transform: translateX(-50%); }
.about-bts__sound .i-muted, .about-bts__sound.is-on .i-sound { display: none; }
.about-bts__sound.is-on .i-muted { display: inline; }
.no-js .about-bts__sound { display: none; }
@media (min-width: 900px) {
  /* Story on the left, the tall photo on the right, held in view while the story scrolls. The
     last row takes the photo's extra height, so the eyebrow and heading never spread apart. */
  .about-story__text { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); grid-template-rows: auto auto 1fr; column-gap: 80px; }
  .about-story__text > :not(.about-story__photo) { grid-column: 1; }
  .about-story__photo { float: none; width: auto; max-width: none; margin: 0; grid-column: 2; grid-row: 1 / span 3; align-self: start; position: sticky; top: calc(var(--header-h) + 32px); }
  .about-award__grid { grid-template-columns: 0.8fr 1.2fr; column-gap: 80px; }
  .about-female__grid { grid-template-columns: 1fr 1fr; column-gap: 80px; }
  .about-bts__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); column-gap: 72px; }
  /* The words come first in the page (above the clips on phones, Shaz Round 10); here the clips
     keep the left-hand column, as before. */
  .about-bts__clips { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; grid-column: 1; grid-row: 1; }
  .about-bts__text { grid-column: 2; grid-row: 1; }
}

/* ---------- FAQ */
.faq { border-top: 1px solid var(--line); }
.faq__item { padding: 30px 0; border-bottom: 1px solid var(--line); }
.faq__q { font-size: 24px; }
.faq__a { margin-top: 14px; color: var(--muted); font-size: 16px; }
.faq__a strong { color: var(--text); font-weight: 600; }
/* ==text== in the copy: a gold-lit pill, used on "free photo album" (Shaz, 2 Oct 2026). */
.hl { background: linear-gradient(180deg, rgba(212, 175, 55, 0.2), rgba(212, 175, 55, 0.32)); color: var(--text); font-weight: 600; padding: 1px 9px 2px; border: 1px solid rgba(212, 175, 55, 0.65); border-radius: 999px; box-shadow: 0 0 16px -2px rgba(212, 175, 55, 0.55); white-space: nowrap; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.faq__item:target { background: linear-gradient(to right, rgba(212,175,55,0.1), transparent 60%); }
@media (min-width: 1024px) { .faq__q { font-size: 30px; } .faq__a { font-size: 17px; } }

/* ---------- Enquire form */
.enquire__grid { display: grid; gap: 48px; }
.enquire__budget { font-family: var(--serif); font-size: 22px; color: var(--goldtext); margin: 28px 0 8px; }
.form { display: flex; flex-direction: column; gap: 24px; margin-top: 12px; }
.form__alert { background: #FBEDE8; border: 1px solid #C0503A; color: #7A2413; border-radius: 8px; padding: 12px 16px; font-size: 15px; }
.field { display: flex; flex-direction: column; gap: 6px; border: 0; padding: 0; margin: 0; min-width: 0; }
.field__label { font-weight: 600; font-size: 15px; padding: 0; }
.field__label--small { font-weight: 500; font-size: 14px; }
.field__help { font-size: 14px; color: var(--muted); line-height: 1.45; }
.field__error { font-size: 14px; color: #A3301B; font-weight: 500; }
.input { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid rgba(95, 87, 75, 0.45); border-radius: 8px; background: var(--surface); font-size: 16px; line-height: 1.3; }
.input::placeholder { color: #8C8375; }
.input:focus { outline: 2px solid var(--gold); outline-offset: 0; border-color: var(--goldtext); }
.textarea { min-height: 120px; resize: vertical; }
.select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; }
.is-invalid .input, .is-invalid .chips { border-color: #A3301B; box-shadow: 0 0 0 1px #A3301B; }
.is-invalid .chips { border-radius: 10px; }
.field-row { display: grid; gap: 24px; }
@media (min-width: 640px) { .field-row { grid-template-columns: minmax(0, 1fr) 180px; align-items: start; } }
.dates { display: flex; flex-direction: column; gap: 14px; padding: 18px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,0.5); }
.dates__list { display: flex; flex-direction: column; gap: 16px; }
.date-row { display: flex; flex-direction: column; gap: 6px; }
.date-row__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.date-row__controls .input { width: auto; flex: 1 1 180px; max-width: 260px; }
.date-row.is-notset .input { opacity: .5; }
.check { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; cursor: pointer; min-height: 44px; }
.check input { width: 20px; height: 20px; accent-color: var(--goldtext); margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 16px; border: 1px solid rgba(95, 87, 75, 0.45); border-radius: 999px; background: var(--surface); font-size: 15px; transition: background-color .15s ease, border-color .15s ease; }
.chip:hover span { border-color: var(--goldtext); }
.chip input:checked + span { background: var(--gold); border-color: var(--gold); color: var(--btntext); font-weight: 600; }
.chip input:focus-visible + span { outline: 2px solid var(--goldtext); outline-offset: 2px; }
.field--other { margin-top: 12px; }
.form__privacy { font-size: 14px; color: var(--muted); }
/* Turnstile: takes no space unless it has to show a checkbox to a suspected bot. */
.form__turnstile:empty { display: none; }
.form__turnstile iframe { max-width: 100%; }
.form__submit { align-self: flex-start; min-width: 180px; }
.form__submit[disabled] { opacity: .7; cursor: progress; }
.form__status { font-size: 14px; color: var(--muted); min-height: 1em; }
.enquire__side { display: flex; flex-direction: column; gap: 20px; }
.enquire__reviews { display: grid; gap: 16px; }
.talk { background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 24px; }
.talk__title { font-size: 26px; margin-bottom: 12px; }
.talk__list { list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.talk__list a, .talk__hours { display: inline-flex; align-items: center; gap: 10px; min-height: 32px; }
/* Every line gets the same 22px icon slot, so the text lines up. WhatsApp keeps its green. */
.talk__icon { flex: none; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; color: var(--goldtext); }
.talk__icon svg { width: 20px; height: 20px; }
.talk__icon--wa { color: #1E9E50; }
.talk__icon--wa svg { width: 22px; height: 22px; }
@media (min-width: 1024px) {
  .enquire__grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); column-gap: 80px; align-items: start; }
  .enquire__side { position: sticky; top: calc(var(--header-h) + 32px); padding-top: 120px; }
}

/* ---------- Thank you */
.thanks__lede { font-size: 20px; margin-top: 16px; }
.thanks .page-head__title + .thanks__lede { margin-top: 24px; }
.thanks__small { color: var(--muted); font-size: 15px; margin-top: 20px; }
.wait { padding-top: 0; }
.wait__cards { display: grid; gap: 16px; margin-top: 28px; }
.wait__card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.wait__title { font-size: 24px; }
.wait__card p { color: var(--muted); }
@media (min-width: 768px) { .wait__cards { grid-template-columns: 1fr 1fr; } }

/* ---------- Privacy */
.prose--legal h2 { font-size: 26px; margin: 44px 0 14px; }
.prose--legal p, .prose--legal ul { color: var(--text); }
.prose--legal .muted { margin-top: 12px; }
.optout { margin-top: 1em; padding: 20px; background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; }
.optout p + p { margin-top: 12px; }

/* ---------- 410 */
.gone { text-align: center; padding-bottom: 120px; }
.gone .page-head__intro { margin-left: auto; margin-right: auto; max-width: 40ch; }
.gone__actions { margin-top: 32px; }
.gone__links { margin-top: 22px; color: var(--muted); }

/* ---------- Footer */
.site-footer { background: var(--bg2); border-top: 1px solid var(--line); padding: 56px 0 28px; font-size: 14px; }
.site-footer__grid { display: grid; gap: 36px; }
.brand--footer { margin-right: 0; }
.site-footer__award { color: var(--muted); margin-top: 16px; max-width: 34ch; line-height: 1.6; }
.site-footer__links { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; }
.site-footer__links a { color: var(--text); text-decoration: none; display: inline-block; padding: 3px 0; }
.site-footer__links a:hover { color: var(--goldtext); }
.site-footer__touch { margin: 0; display: grid; gap: 10px; }
.site-footer__touch > div { display: grid; grid-template-columns: 84px 1fr; gap: 12px; }
.site-footer__touch dt { color: var(--goldtext); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; padding-top: 3px; }
.site-footer__touch dd { margin: 0; color: var(--muted); }
.site-footer__touch a { color: var(--text); text-decoration: none; }
.site-footer__social { list-style: none; display: flex; gap: 6px; margin-top: 20px; }
.site-footer__social a { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 999px; color: var(--text); }
.site-footer__social a:hover { border-color: var(--goldtext); color: var(--goldtext); }
.site-footer__bottom { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; line-height: 1.6; }
@media (min-width: 900px) {
  .site-footer { padding-top: 72px; }
  .site-footer__grid { grid-template-columns: 1.1fr 0.8fr 1.3fr; column-gap: 64px; }
  .site-footer__links { grid-template-columns: 1fr; }
}

/* ---------- Floating WhatsApp */
.wa { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 40; width: 56px; height: 56px; border-radius: 999px; background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22); transition: transform .2s ease, bottom .3s ease; }
.wa:hover { color: #fff; transform: scale(1.05); }
.wa:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.wa__tip { position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%); background: var(--text); color: #fff; font-size: 13px; padding: 7px 12px; border-radius: 999px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
@media (hover: hover) and (min-width: 1024px) { .wa:hover .wa__tip, .wa:focus-visible .wa__tip { opacity: 1; } .wa { width: 60px; height: 60px; right: 32px; bottom: 32px; } }
.dialog-open .wa { visibility: hidden; }

/* ---------- Did you know? Phones (Round 10, Shaz: "a fly on the wall"): a small speech bubble that
   grows out of the bottom-left corner, clear of the WhatsApp button, never a sheet across the
   screen. Wider screens keep the card in the same corner. */
.dyk { position: fixed; z-index: 45; left: max(12px, env(safe-area-inset-left)); bottom: max(18px, env(safe-area-inset-bottom)); width: min(250px, calc(100vw - 104px)); background: rgba(255, 255, 255, 0.95); border: 1px solid var(--line); border-radius: 16px 16px 16px 4px; box-shadow: 0 12px 30px -10px rgba(60, 45, 10, 0.3); padding: 9px 12px 9px 13px; opacity: 0; transform: translateY(10px) scale(0.5); transform-origin: 0 100%; transition: transform .5s cubic-bezier(.2, .8, .2, 1), opacity .35s ease; }
.dyk.is-in { opacity: 1; transform: none; }
.dyk__head { display: flex; justify-content: space-between; align-items: center; }
.dyk__label { font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--goldtext); font-weight: 600; }
.dyk__close { width: 36px; height: 36px; margin: -11px -12px -11px 0; border: 0; background: transparent; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
@media (max-width: 767px) { .dyk__close svg { width: 14px; height: 14px; } }
/* On phones site.js sets the height to the fact showing, so a short fact makes a small bubble. */
/* No free scrolling: site.js moves it one fact at a time (swipe, arrows, arrow keys). */
.dyk__track { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; align-items: start; overflow: hidden; touch-action: pan-y; scrollbar-width: none; margin-top: 3px; outline-offset: 4px; transition: height .3s ease; }
.dyk__track::-webkit-scrollbar { display: none; }
.dyk__fact { scroll-snap-align: start; font-size: 12.5px; line-height: 1.45; padding-right: 4px; }
.dyk__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; font-size: 12px; color: var(--muted); }
.dyk__hint { display: none; }
.dyk__dots { display: flex; gap: 4px; }
.dyk__dot { width: 4px; height: 4px; border-radius: 999px; background: var(--line); transition: background-color .2s ease, width .2s ease; }
.dyk__dot.is-on { background: var(--gold); width: 10px; }
.dyk__arrows { display: none; gap: 4px; }
.dyk__arrow { width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.dyk__arrow:disabled { opacity: .35; cursor: default; }
@media (min-width: 768px) {
  .dyk { left: 24px; bottom: 24px; width: 360px; background: var(--surface); border-radius: 12px; padding: 20px 22px 16px; box-shadow: 0 20px 50px rgba(60, 45, 10, 0.16); transform: translateY(calc(100% + 40px)); }
  .dyk__label { font-size: 11px; letter-spacing: 0.24em; }
  .dyk__close { width: 44px; height: 44px; margin: -10px -12px -10px 0; }
  .dyk__track { margin-top: 8px; }
  .dyk__fact { font-size: 15px; line-height: 1.55; }
  .dyk__foot { margin-top: 12px; }
  .dyk__dots { gap: 5px; }
  .dyk__dot { width: 6px; height: 6px; }
  .dyk__dot.is-on { width: 16px; }
  .dyk__arrows { display: inline-flex; }
}

/* ---------- A soft gold glow behind any photo or film under the mouse */
.photo-masonry__item .media, .marquee--photos .media, .about-story__media, .about-award__media, .about-team__media, .film-page .player { transition: box-shadow .45s ease; }
@media (hover: hover) {
  .tile:hover, .photo-link:hover .media, .marquee--photos .media:hover, .about-story__media:hover, .about-award__media:hover, .about-team__media:hover, .film-page .player:hover, .insta-grid__item:hover { box-shadow: var(--glow-hover); }
}
.tile:focus-visible, .photo-link:focus-visible .media, .insta-grid__item:focus-visible { box-shadow: var(--glow-hover); }
/* Focus handed back after a tap closes a pop-up: no ring (site.js `refocus`). Keyboard focus keeps it. */
.quiet-focus:focus-visible { outline: none; }
.tile.quiet-focus:focus-visible, .photo-link.quiet-focus:focus-visible .media { box-shadow: var(--glow); }

/* ---------- Scroll fade: only with JS, never above the fold, never for reduced motion */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity .9s cubic-bezier(.2, .65, .2, 1), transform .9s cubic-bezier(.2, .65, .2, 1), box-shadow .45s ease; transition-delay: var(--reveal-delay, 0ms); }
  .js .reveal.is-in { opacity: 1; transform: none; }
  .js .reveal.is-instant { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
}