/* Jake Thiessen Films
   Layout: filmic vertical scroll. Corners hold the navigation, grotesk title cards carry the hierarchy,
   serif carries the story, typewriter slates carry the labels, and grain sits over everything.
   Red ink on white stock, with full red bands and full-bleed midnight frames for the films. */
:root {
  --red: #cf1a10;         /* deep film-safelight red */
  --paper: #fbf9f7;       /* white leader stock */
  --signal: var(--red);   /* the ink in use: red on white, white on red bands */
  --ground: var(--paper); /* the surface in use */
  --midnight: #0a0a0a;    /* film and photo frames, and text on the yellow tag */
  --gold: #f2c14e;        /* retro marigold. Accent only: over footage, or as a fill. Never text on white or red */

  --f-grot: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --f-serif: "EB Garamond", Garamond, "Times New Roman", serif;
  --f-mono: "Courier Prime", "Courier New", Courier, monospace;

  --t-cap: 13px;
  --t-sm: 14px;
  --t-body: 16px;
  --t-sub: 18px;
  --t-sub-lg: 20px;
  --t-24: 24px;
  --t-head: clamp(30px, 3.4vw, 48px);
  --t-head-lg: clamp(44px, 6.6vw, 95px);
  --t-disp-sm: clamp(56px, 8.9vw, 128px);
  --t-disp: clamp(72px, 13.2vw, 190px);
  --t-disp-xl: clamp(64px, 16.5vw, 245px);

  --gutter: clamp(16px, 2.1vw, 30px);
  --sec: clamp(84px, 10.4vw, 150px);
  --rule: 1.5px solid var(--signal);
  --hair: 1px solid var(--signal);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--ground); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--signal);
  font-family: var(--f-grot);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: 1.2;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  font-feature-settings: "tnum" 1, "ss01" 1;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
::selection { background: var(--signal); color: var(--ground); }

h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
h1, h2, h3 { font-weight: 400; text-wrap: balance; }
ul, ol { padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
:focus-visible { outline: 1.5px solid var(--signal); outline-offset: 3px; }
button { font: inherit; text-transform: inherit; color: inherit; }

.wrap {
  max-width: 1440px;
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.cap { font-size: var(--t-cap); }
.label-pair {
  display: flex; justify-content: space-between; align-items: baseline; gap: 24px;
  font-size: var(--t-cap); padding-block: 12px;
}
.label-pair > * { min-width: 0; }
.label-pair--ruled { border-bottom: var(--hair); }

.h-lg { font-size: var(--t-head-lg); line-height: .82; letter-spacing: -0.037em; }
.h-md { font-size: var(--t-head); line-height: 1; letter-spacing: -0.03em; }
.lede { font-size: var(--t-sub); line-height: 1.25; max-width: 46ch; }
.text-link { font-size: var(--t-sm); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.text-link:hover { text-decoration-thickness: 1.5px; }

/* ---------- Monogram + logo ---------- */
.mono { width: 1.2em; height: 1.2em; flex: none; overflow: visible; }
.logo {
  display: inline-flex; align-items: center; gap: .45em;
  font-size: clamp(20px, 2.3vw, 34px); line-height: 1; letter-spacing: -0.03em; white-space: nowrap;
}
.logo:hover { text-decoration: none; }

/* ---------- Floating menu (appears once the corner nav scrolls away) ---------- */
.menu-btn {
  position: fixed; z-index: 60;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  left: max(12px, env(safe-area-inset-left, 0px));
  width: 44px; height: 44px; padding: 0;
  display: grid; place-items: center;
  background: var(--ground); color: var(--signal);
  border: var(--rule); border-radius: 0; cursor: pointer;
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.menu-btn.is-visible, .menu-btn[aria-expanded="true"] { opacity: 1; pointer-events: auto; }
.menu-btn svg { width: 20px; height: 20px; }
.menu-btn .i-close { display: none; }
.menu-btn[aria-expanded="true"] .i-open { display: none; }
.menu-btn[aria-expanded="true"] .i-close { display: block; }

.menu {
  position: fixed; inset: 0; z-index: 50;
  background: var(--ground);
  display: flex; flex-direction: column; justify-content: center; gap: 30px;
  padding-block: calc(env(safe-area-inset-top, 0px) + 80px) calc(env(safe-area-inset-bottom, 0px) + 30px);
  overflow-y: auto;
}
.menu ul { display: flex; flex-direction: column; gap: 6px; }
.menu a { font-size: clamp(40px, 6.6vw, 95px); line-height: .9; letter-spacing: -0.037em; }

/* ---------- Hero / page top ---------- */
.hero {
  min-height: min(86svh, 860px); /* a little under full screen, so the top of the showreel peeks in */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: auto 1fr auto auto;
  grid-template-areas: "tl logo tr" "st st st" "dp dp dp" "ft ft ft";
  row-gap: 30px;
  padding-block: 18px 12px;
}
.hero--page { min-height: 0; grid-template-rows: auto; grid-template-areas: "tl logo tr"; }
.corner-nav { grid-area: tl; align-self: start; display: flex; flex-direction: column; gap: 5px; font-size: var(--t-cap); }
.corner-nav [aria-current="page"] { text-decoration: underline; text-underline-offset: 3px; }
.badge {
  grid-area: tr; justify-self: end; align-self: start;
  display: flex; align-items: center; gap: 12px;
  font-size: var(--t-cap); text-align: right;
}
.badge svg { width: 40px; height: 40px; flex: none; }
.hero .logo { grid-area: logo; align-self: start; }

.statement {
  grid-area: st; align-self: center; justify-self: center;
  max-width: 21ch; text-align: center; text-transform: none; text-wrap: balance;
  font-family: var(--f-serif); font-size: var(--t-head); line-height: 1; letter-spacing: -0.04em;
}
.display {
  grid-area: dp;
  font-size: var(--t-disp); line-height: .8; letter-spacing: -0.043em;
}
.display span { display: block; }
.display span + span { text-align: right; }
/* Tagline with a small 3:4 looping clip to its right, both sitting on the same bottom line */
/* Tagline centred on the page; the clip centred in the space between the tagline and the right edge.
   Both share a bottom line: the clip's bottom edge sits on the tagline's last baseline. */
.hero-intro {
  grid-area: st; align-self: center; justify-self: stretch;
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end; align-items: last baseline;
}
.hero-intro .statement { grid-area: 1 / 2; min-width: 0; align-self: auto; justify-self: auto; }
@media (min-width: 721px) {
  /* Box exactly as wide as its longest line, so the clip can centre on the real gap */
  .hero-intro .statement { width: max-content; max-width: none; }
}
@media (max-width: 720px) { .br-wide { display: none; } }
.hero-intro .hero-loop { grid-area: 1 / 3; justify-self: center; }
@media (max-width: 720px) {
  /* Phones: not enough room on both sides, so the tagline and clip sit side by side */
  .hero-intro { justify-self: center; display: flex; align-items: flex-end; align-items: last baseline; gap: 18px; }
}
.hero-loop {
  position: relative; display: block; flex: none; overflow: hidden;
  width: clamp(100px, 14vw, 212px); aspect-ratio: 3 / 4;
  background: var(--midnight);
}
.hero-loop video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: contrast(1.06); }
.hero-loop::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 28px rgba(0, 0, 0, .55); }
.hero-loop .edge {
  position: absolute; left: 8px; bottom: 6px; z-index: 1;
  font: 400 11px/1 var(--f-mono); font-style: normal;
  color: var(--gold); text-shadow: 0 0 5px rgba(10, 10, 10, .75), 0 1px 1px rgba(10, 10, 10, .6);
}
@media (max-width: 720px) { .hero-loop .edge { display: none; } }
@media (prefers-reduced-motion: no-preference) {
  .display span { animation: settle 1.6s cubic-bezier(.2, .7, .1, 1) both; }
  .display span + span { animation-delay: .12s; }
}
@keyframes settle { from { letter-spacing: 0.02em; } to { letter-spacing: -0.043em; } }

.hero-foot {
  grid-area: ft;
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px;
  font-size: var(--t-cap);
}
.hero-foot > :last-child { text-align: right; }

.page-title { padding-block: clamp(60px, 9vw, 130px) clamp(36px, 4vw, 60px); display: flex; flex-direction: column; gap: 30px; }
.page-title .display { font-size: var(--t-disp-sm); }

/* ---------- Film frames ---------- */
.frame {
  position: relative; overflow: hidden;
  width: 100%; max-width: 100%;
  background: var(--midnight); color: var(--signal);
  display: grid; place-items: center;
}
.frame > video, .frame > img, .frame > iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0;
}
.frame--reel { aspect-ratio: 3840 / 1800; min-height: 220px; cursor: pointer; }
.frame--wide { aspect-ratio: 16 / 9; }
.frame--portrait { aspect-ratio: 4 / 5; }
.frame--photo { aspect-ratio: 4 / 3; }

.vf { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.vf i { position: absolute; width: 18px; height: 18px; border: 0 solid var(--signal); }
.vf i:nth-child(1) { top: 14px; left: 14px; border-top-width: 1.5px; border-left-width: 1.5px; }
.vf i:nth-child(2) { top: 14px; right: 14px; border-top-width: 1.5px; border-right-width: 1.5px; }
.vf i:nth-child(3) { bottom: 14px; left: 14px; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.vf i:nth-child(4) { bottom: 14px; right: 14px; border-bottom-width: 1.5px; border-right-width: 1.5px; }
.frame-tag { position: absolute; z-index: 3; font-size: var(--t-cap); background: none; border: 0; padding: 0; }
.frame-tag--tl { top: 22px; left: 42px; }
.frame-tag--tr { top: 22px; right: 42px; text-align: right; }
.frame-tag--bl { bottom: 22px; left: 42px; }
.frame-tag--br { bottom: 22px; right: 42px; text-align: right; }
button.frame-tag { cursor: pointer; }
button.frame-tag:hover { text-decoration: underline; text-underline-offset: 3px; }

.play {
  position: relative; z-index: 3;
  width: 64px; height: 64px; padding: 0;
  display: grid; place-items: center;
  background: none; color: var(--signal);
  border: 1.5px solid var(--signal); border-radius: 50%; cursor: pointer;
  transition: opacity .3s ease;
}
.play svg { width: 20px; height: 20px; }
.play .i-pause { display: none; }
.play[aria-pressed="true"] .i-play { display: none; }
.play[aria-pressed="true"] .i-pause { display: block; }
.frame--wide .play { width: 56px; height: 56px; }
.is-playing .play, .is-playing .frame-tag--bl { opacity: 0; }
.is-playing:hover .play, .is-playing .play:focus-visible { opacity: 1; }
/* Showreel playing from Vimeo: Vimeo's own controls take over, our corner labels stay as an overlay */
.frame.is-vimeo { cursor: default; }
.is-vimeo > img, .is-vimeo .play, .is-vimeo .vf, .is-vimeo .frame-tag--bl, .is-vimeo .frame-tag--br { display: none; }
.is-vimeo .frame-tag { pointer-events: none; }
.is-vimeo > iframe { z-index: 0; background: var(--midnight); }
.rec-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--signal); margin-right: 6px; vertical-align: 1px; opacity: 0; }
.is-playing .rec-dot { opacity: 1; }
@media (prefers-reduced-motion: no-preference) { .is-playing .rec-dot { animation: blink 1s steps(2, start) infinite; } }
@keyframes blink { to { visibility: hidden; } }

/* ---------- Sections ---------- */
.section { padding-block: var(--sec); }
.stack { display: flex; flex-direction: column; gap: clamp(36px, 4.2vw, 60px); }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 90px); align-items: start; }
.split-text { display: flex; flex-direction: column; gap: 30px; }
.split-text p { font-size: var(--t-sub); line-height: 1.25; max-width: 46ch; }

.films-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
.film-tile {
  display: flex; flex-direction: column; min-width: 0;
  background: none; border: 0; padding: 0; text-align: left; cursor: pointer;
}
.film-tile .label-pair { padding-inline: 2px; }
.film-tile:hover .label-pair > :first-child { text-decoration: underline; text-underline-offset: 3px; }
.film-tile:focus-visible { outline-offset: -3px; }
.film-tile img { transition: opacity .3s ease; }
.film-tile:hover img { opacity: .85; }

.moments { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; }
.moments img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--midnight); }

.rows li {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 30px;
  padding-block: 20px; border-top: var(--hair);
}
.rows li:last-child { border-bottom: var(--hair); }
.rows h3 { font-size: var(--t-sub-lg); letter-spacing: -0.025em; }
.rows p { max-width: 52ch; line-height: 1.25; }

.quote-mark { font-size: var(--t-disp); line-height: .7; letter-spacing: -0.043em; height: .5em; overflow: hidden; }
.quote-feature { display: flex; flex-direction: column; gap: 24px; }
.quote-feature blockquote { font-size: var(--t-head); line-height: 1; letter-spacing: -0.03em; max-width: 26ch; text-wrap: balance; }
.quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
.quotes figure { display: flex; flex-direction: column; gap: 18px; padding-top: 20px; border-top: var(--rule); min-width: 0; }
.quotes blockquote { display: flex; flex-direction: column; gap: 14px; font-size: var(--t-body); line-height: 1.3; max-width: 52ch; }
.quotes blockquote p { margin: 0; }
.quotes footer { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; flex-wrap: wrap; }
figcaption { font-size: var(--t-cap); }
.watch { background: none; border: 0; padding: 0; cursor: pointer; font-size: var(--t-cap); text-decoration: underline; text-underline-offset: 3px; }

.steps li {
  display: grid; grid-template-columns: minmax(80px, 1fr) minmax(0, 2fr) minmax(0, 3fr); gap: 30px;
  padding-block: 20px; border-top: var(--hair); align-items: baseline;
}
.steps li:last-child { border-bottom: var(--hair); }
.steps .n { font-size: var(--t-head); line-height: 1; letter-spacing: -0.03em; }
.steps h3 { font-size: var(--t-sub-lg); letter-spacing: -0.025em; }
.steps p { line-height: 1.25; max-width: 52ch; }

.packages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.package { display: flex; flex-direction: column; gap: 20px; border-top: var(--rule); padding-top: 20px; min-width: 0; }
.package h3 { font-size: var(--t-24); letter-spacing: -0.025em; }
.package .price { font-size: var(--t-head); line-height: 1; letter-spacing: -0.03em; }
.package .price small { display: block; font-size: var(--t-cap); letter-spacing: -0.005em; margin-bottom: 6px; }
.package ul { font-size: var(--t-sm); }
.package li { padding-block: 9px; border-top: var(--hair); }
.package li:last-child { border-bottom: var(--hair); }
.package .more { margin-top: auto; font-size: var(--t-sm); }
.after-packages { display: flex; justify-content: space-between; align-items: end; gap: 30px; flex-wrap: wrap; }
.note { font-size: var(--t-cap); max-width: 70ch; line-height: 1.3; }

.outline-link {
  display: inline-block; font-size: var(--t-sm);
  border: var(--rule); padding: 16px 28px; transition: background .2s ease, color .2s ease;
}
.outline-link:hover { background: var(--signal); color: var(--ground); text-decoration: none; }

.faq details { border-top: var(--hair); }
.faq details:last-child { border-bottom: var(--hair); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: baseline; gap: 24px;
  padding-block: 18px; font-size: var(--t-sub-lg); letter-spacing: -0.025em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: var(--t-24); line-height: 1; transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: 22px; max-width: 60ch; line-height: 1.25; }

.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(36px, 5vw, 90px); }
.contact-info { display: flex; flex-direction: column; gap: 36px; }
.contact-lines { display: flex; flex-direction: column; gap: 14px; font-size: var(--t-sm); }
.contact-lines span { display: block; font-size: var(--t-cap); margin-bottom: 3px; }
.contact-lines .email { text-transform: none; user-select: all; }

.enquiry { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 30px; align-content: start; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field--wide { grid-column: 1 / -1; }
.field label { font-size: var(--t-cap); }
.field input, .field textarea {
  font: inherit; font-size: var(--t-sub); color: var(--signal);
  text-transform: none; letter-spacing: -0.005em;
  background: transparent; border: 0; border-bottom: var(--rule); border-radius: 0;
  padding: 8px 0; width: 100%; min-width: 0;
  -webkit-appearance: none; appearance: none;
}
.field textarea { min-height: 120px; resize: vertical; border: var(--rule); padding: 10px 12px; }
.field input::placeholder, .field textarea::placeholder { color: var(--signal); opacity: .5; text-transform: uppercase; }
.field input:focus-visible { outline: none; box-shadow: 0 1.5px 0 0 var(--signal); }
.field textarea:focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px var(--signal); }
input[type="date"] { min-height: 40px; }
input[type="date"]::-webkit-calendar-picker-indicator { opacity: .7; cursor: pointer; }
.form-end { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.send {
  font-size: var(--t-sm); color: var(--signal);
  background: transparent; border: var(--rule); border-radius: 0;
  padding: 16px 28px; cursor: pointer; transition: background .2s ease, color .2s ease;
}
.send:hover { background: var(--signal); color: var(--ground); }
.form-status { font-size: var(--t-cap); max-width: 46ch; line-height: 1.3; }
.form-status .email { text-transform: none; user-select: all; }

/* ---------- Lightbox ---------- */
.lightbox {
  width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0;
  border: 0; padding: 0; background: var(--midnight); color: var(--signal);
}
.lightbox[open] { display: flex; flex-direction: column; }
.lightbox::backdrop { background: var(--midnight); }
.lb-bar {
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  font-size: var(--t-cap);
  padding: calc(env(safe-area-inset-top, 0px) + 14px) max(var(--gutter), env(safe-area-inset-right, 0px)) 14px max(var(--gutter), env(safe-area-inset-left, 0px));
}
.lb-close { background: none; border: var(--rule); padding: 10px 16px; cursor: pointer; font-size: var(--t-cap); }
.lb-stage { flex: 1; min-height: 0; display: grid; place-items: center; padding: 0 0 calc(env(safe-area-inset-bottom, 0px) + 14px); }
.lb-stage video { width: 100%; height: 100%; object-fit: contain; background: var(--midnight); }
.lb-stage iframe { width: 100%; height: 100%; border: 0; background: var(--midnight); }
.lb-msg { font-size: var(--t-sm); max-width: 40ch; text-align: center; line-height: 1.3; padding: 24px; }

/* ---------- About page ---------- */
.about-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
.about-photos img { width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

/* ---------- Package builder ---------- */
.builder { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 90px); align-items: start; }
.questions { display: flex; flex-direction: column; gap: clamp(48px, 5vw, 72px); }
.q { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.q legend { padding: 0; display: flex; gap: 20px; align-items: baseline; width: 100%; border-top: var(--rule); padding-top: 16px; margin-bottom: 20px; }
.q legend .n { font-size: var(--t-head); line-height: 1; letter-spacing: -0.03em; flex: none; }
.q legend .qt { font-size: var(--t-24); letter-spacing: -0.025em; line-height: 1.05; }
.q .hint { font-size: var(--t-cap); margin-top: -8px; }
.opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; }
.opt {
  position: relative; display: flex; flex-direction: column; gap: 8px;
  border: var(--rule); padding: 16px; cursor: pointer; min-height: 100%;
  transition: background .15s ease, color .15s ease;
}
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt-t { font-size: var(--t-sub); letter-spacing: -0.01em; display: flex; justify-content: space-between; gap: 12px; }
.opt-t::after { content: ""; flex: none; width: 14px; height: 14px; border: 1.5px solid currentColor; margin-top: 2px; }
.opt--radio .opt-t::after { border-radius: 50%; }
.opt-s { font-size: var(--t-cap); line-height: 1.3; }
.opt:hover { background: rgba(207, 26, 16, .07); }
.opt:has(input:checked) { background: var(--signal); color: var(--ground); }
.opt:has(input:checked) .opt-t::after { background: currentColor; box-shadow: inset 0 0 0 2.5px var(--signal); }
.opt:has(input:focus-visible) { outline: 1.5px solid var(--signal); outline-offset: 3px; }

.summary { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 24px); display: flex; flex-direction: column; gap: 22px; border-top: var(--rule); padding-top: 16px; }
.fit-name { font-size: var(--t-disp-sm); line-height: .82; letter-spacing: -0.04em; }
.fit-price { font-size: var(--t-head); line-height: 1; letter-spacing: -0.03em; }
.fit-pay { font-size: var(--t-cap); line-height: 1.35; }
.fit-list { font-size: var(--t-sm); }
.fit-list li { padding-block: 8px; border-top: var(--hair); display: flex; justify-content: space-between; gap: 16px; }
.fit-list li:last-child { border-bottom: var(--hair); }
.fit-list .tag { font-size: var(--t-cap); flex: none; }
.fit-block { display: flex; flex-direction: column; gap: 10px; }
.fit-alt { font-size: var(--t-sm); line-height: 1.3; border: var(--hair); padding: 14px; }
.fit-empty { display: flex; flex-direction: column; gap: 18px; }
.ref-list li { display: flex; justify-content: space-between; gap: 16px; padding-block: 10px; border-top: var(--hair); font-size: var(--t-sub); }
.ref-list li:last-child { border-bottom: var(--hair); }
.sent-preview { font-size: var(--t-cap); line-height: 1.45; white-space: pre-line; border: var(--hair); padding: 14px; }

.fit-bar {
  position: fixed; z-index: 40; left: 0; right: 0; bottom: 0;
  display: none; justify-content: space-between; align-items: center; gap: 16px;
  background: var(--ground); border-top: var(--rule);
  padding: 14px max(16px, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 14px) max(16px, env(safe-area-inset-left, 0px));
  font-size: var(--t-sm);
}

/* ---------- Footer ---------- */
.footer { padding-block: var(--sec) 12px; }
.wordmark-xl { font-size: var(--t-disp-xl); line-height: .8; letter-spacing: -0.05em; }
.wordmark-xl span { display: block; white-space: nowrap; }
.wordmark-xl span + span { text-align: right; }
.foot-bar { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; font-size: var(--t-cap); padding-top: 30px; }
.foot-bar > :last-child { text-align: right; }

/* ---------- Narrow screens ---------- */
@media (max-width: 960px) {
  .builder { grid-template-columns: minmax(0, 1fr); }
  .summary { position: static; }
  .fit-bar { display: flex; }
  .fit-bar.is-hidden { display: none; }
  body.has-fit-bar { padding-bottom: 72px; }
}
@media (max-width: 860px) {
  .packages { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .contact, .split { grid-template-columns: minmax(0, 1fr); }
  .steps li { grid-template-columns: 64px minmax(0, 1fr); gap: 8px 20px; }
  .steps li p { grid-column: 2; }
}
@media (max-width: 720px) {
  .hero {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "tl tr" "logo logo" "st st" "dp dp" "ft ft";
    grid-template-rows: auto auto 1fr auto auto;
  }
  .hero--page { grid-template-areas: "tl tr" "logo logo"; grid-template-rows: auto auto; }
  .hero .logo { justify-self: center; padding-top: 12px; }
  .hero-foot > :first-child { display: none; }
  .hero-foot { grid-template-columns: 1fr 1fr; }
  .frame--reel { aspect-ratio: 16 / 9; min-height: 0; }
  .frame-tag--bl { display: none; }
  .quotes, .rows li, .films-grid { grid-template-columns: minmax(0, 1fr); }
  .rows li { gap: 10px; }
  .moments { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .enquiry { grid-template-columns: minmax(0, 1fr); }
  .foot-bar { grid-template-columns: 1fr 1fr; }
  .foot-bar > :nth-child(2) { display: none; }
}
@media (max-width: 420px) {
  .frame-tag--tl, .frame-tag--tr, .frame-tag--br { top: auto; }
  .frame-tag--tl { top: 18px; left: 34px; } .frame-tag--tr { top: 18px; right: 34px; }
  .frame-tag--br { bottom: 18px; right: 34px; }
  .film-tile .label-pair { flex-direction: column; gap: 3px; }
}

/* ---------- Filmic layer: grain, vignette, slate type, serif story ---------- */
body::after {
  content: ""; position: fixed; inset: -120px; z-index: 100; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .09;
}
@media (prefers-reduced-motion: no-preference) { body::after { animation: grain .8s steps(5) infinite; } }
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-40px, 25px); } 40% { transform: translate(30px, -35px); }
  60% { transform: translate(-25px, -20px); } 80% { transform: translate(35px, 30px); } 100% { transform: translate(0, 0); }
}
.frame::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; box-shadow: inset 0 0 clamp(60px, 10vw, 170px) rgba(0, 0, 0, .55); }

.band-red { background: var(--red); color: var(--paper); --signal: var(--paper); --ground: var(--red); --rule: 1.5px solid var(--paper); --hair: 1px solid var(--paper); }

/* Typewriter slates for labels and small print */
.label-pair, .cap, .corner-nav, .badge, .hero-foot, .frame-tag, figcaption, .foot-bar, .field label, .note,
.fit-pay, .opt-s, .q .hint, .lb-bar, .lb-close, .watch, .package .price small, .contact-lines span, .sent-preview,
.package ul, .fit-list, .form-status, .text-link, .package .more, .outline-link, .send, .fit-bar {
  font-family: var(--f-mono); letter-spacing: 0;
}

/* Serif for the story: running text and the couples' own words, in normal case */
.lede, .split-text p, .rows p, .steps p, .faq details p, .quotes blockquote, .teaser-side p {
  font-family: var(--f-serif); text-transform: none; letter-spacing: 0;
  font-size: clamp(18px, 1.5vw, 21px); line-height: 1.4;
}
.quotes blockquote { font-size: clamp(18px, 1.4vw, 20px); line-height: 1.5; gap: 16px; }

.statement {
  font-family: var(--f-serif); font-size: clamp(40px, 5.6vw, 84px);
  line-height: 1; letter-spacing: -0.015em; max-width: 15ch;
}
.statement em { font-style: italic; }
.statement .your { font-family: var(--f-grot); font-style: normal; text-transform: uppercase; letter-spacing: -0.045em; font-size: .9em; }

.quote-mark { font-family: var(--f-serif); line-height: .8; height: .42em; }
.quote-feature blockquote {
  font-family: var(--f-serif); font-style: italic; text-transform: none;
  font-size: clamp(34px, 4.4vw, 64px); line-height: 1.08; letter-spacing: -0.01em; max-width: 22ch;
}

/* Moments as a contact sheet, with edge numbers */
.still { position: relative; margin: 0; overflow: hidden; }
.still .edge { position: absolute; left: 10px; bottom: 8px; z-index: 2; font-family: var(--f-mono); font-size: 12px; color: var(--paper); opacity: .85; }

.teaser-band { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 30px; align-items: end; }
.teaser-side { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
@media (max-width: 860px) { .teaser-band { grid-template-columns: minmax(0, 1fr); } }

/* Photo that dissolves into the page below it */
.frame--fade {
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
}
.frame--fade + .section { padding-top: clamp(20px, 3vw, 40px); }

/* ---------- Marigold accent: kept to a few deliberate touches ----------
   1. Showreel timecode   2. Film-edge numbers on stills   3. The "Your best fit" tag in the builder
   4. A yellow underline that only ever marks the word "your": the tagline, plus one heading per page
      (index "only be your day", about "your film", packages "Build your package"). Use <span class="your">. */
.frame-tag--tl, .still .edge { color: var(--gold); text-shadow: 0 0 5px rgba(10, 10, 10, .75), 0 1px 1px rgba(10, 10, 10, .6); }
.still .edge { opacity: 1; }
.your {
  text-decoration: underline var(--gold);
  text-decoration-thickness: .09em; text-underline-offset: .14em; text-decoration-skip-ink: none;
}
.fit-tag { align-self: flex-start; background: var(--gold); color: var(--midnight); padding: 3px 8px 2px; }

/* Spam trap on the enquiry forms: never shown */
.hp { display: none !important; }