/* Haldenreed Photography — S301 rectangles.fm rebrand.
   First-party, local-only static presentation. The photography in this demo is stock imagery
   standing in for a real studio's own work; no claims below should be read as live proof. */

:root {
  --canvas: #121212;
  --canvas-soft: #191a1a;
  --canvas-lift: #232424;
  --ink: #f1eee4;
  --muted: #a9aaa4;
  --quiet: #737773;
  --paper: #ece8da;
  --paper-deep: #d9d2bd;
  --paper-ink: #111414;
  --cyan: #7fe4d8;
  --cyan-strong: #23c9d7;
  --blue: #4c91f7;
  --orange: #f0a35a;
  --line: rgba(241, 238, 228, 0.2);
  --line-strong: rgba(241, 238, 228, 0.42);
  --paper-line: rgba(17, 20, 20, 0.2);
  --display: "Arial Narrow", "Aptos Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
  --sans: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --measure: 76rem;
  --radius: 0.15rem;
  --assistant-accent: var(--cyan-strong);
  --assistant-accent-ink: #061012;
  --assistant-panel: var(--paper);
  --assistant-ink: var(--paper-ink);
  --assistant-line: var(--paper-line);
  --assistant-soft: #ded8c8;
  --assistant-muted: #525854;
  --a11y-sans: var(--sans);
  --a11y-surface: var(--paper);
  --a11y-ink: var(--paper-ink);
  --a11y-line: var(--paper-line);
  --a11y-radius: 0.15rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; background: var(--canvas); }
body {
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 72% 4%, rgba(45, 68, 67, 0.12), transparent 32rem),
    radial-gradient(circle at 15% 70%, rgba(67, 90, 103, 0.08), transparent 38rem),
    var(--canvas);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.55;
}
body::before {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  content: "";
  opacity: 0.16;
  background-image: radial-gradient(rgba(255, 255, 255, 0.28) 0.45px, transparent 0.6px);
  background-size: 5px 5px;
  mix-blend-mode: soft-light;
}
body > * { position: relative; z-index: 2; }
main { position: relative; }
img { max-width: 100%; }
figure, p, h1, h2, h3, ul, ol, dl { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  top: -4rem;
  left: 1rem;
  z-index: 120;
  padding: 0.6rem 0.9rem;
  background: var(--cyan);
  color: #071112;
  font-weight: 800;
  text-decoration: none;
}
.skip-link:focus { top: 0; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }

/* ---------- One-shot loader ---------- */
.site-loader {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 110;
  align-items: center;
  justify-content: center;
  background: var(--canvas);
  color: var(--ink);
  pointer-events: none;
}
html.js .site-loader { display: flex; animation: loader-in 0.18s ease-out both; }
.site-loader.is-dismissed { visibility: hidden; opacity: 0; transition: opacity 0.46s ease, visibility 0s linear 0.46s; }
.loader-lockup { display: grid; justify-items: center; gap: 1rem; text-align: center; }
.loader-mark { width: 4.6rem; height: 4.6rem; color: var(--cyan); }
.loader-type { font-family: var(--display); font-size: 0.72rem; font-weight: 900; letter-spacing: 0.26em; }
.loader-place { color: var(--muted); font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.18em; text-transform: uppercase; }
.loader-rule { width: 4rem; height: 1px; background: var(--cyan-strong); }
@keyframes loader-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Header ---------- */
.site-header { position: absolute; top: 0; left: 0; z-index: 20; display: flex; width: 100%; align-items: center; gap: clamp(1rem, 3vw, 4rem); padding: 1.1rem clamp(1.1rem, 3vw, 3.3rem); color: var(--ink); }
.site-brand { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 0.7rem; min-width: 10.4rem; color: inherit; text-decoration: none; }
.brand-mark { width: 2.2rem; height: 2.2rem; color: var(--cyan); }
.brand-type { display: grid; gap: 0.05rem; }
.brand-type > span { font-family: var(--display); font-size: 0.92rem; font-weight: 900; letter-spacing: 0.13em; line-height: 1; }
.brand-type small { color: var(--muted); font-family: var(--mono); font-size: 0.48rem; letter-spacing: 0.16em; line-height: 1.2; text-transform: uppercase; }
.nav-disclosure { flex: 1 1 auto; }
.nav-disclosure summary { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0.55rem 0.8rem; border: 1px solid var(--line-strong); color: var(--ink); cursor: pointer; font-family: var(--mono); font-size: 0.63rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.nav-disclosure summary::-webkit-details-marker { display: none; }
.nav-disclosure summary::after { margin-left: 0.7rem; content: "+"; color: var(--cyan); font-size: 1rem; }
.nav-disclosure[open] summary::after { content: "−"; }
.nav-disclosure nav { position: absolute; top: calc(100% - 0.1rem); right: 1rem; left: 1rem; display: grid; gap: 0.15rem; padding: 0.8rem; border: 1px solid var(--line); background: rgba(18, 18, 18, 0.96); box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.35); }
.nav-disclosure nav a { display: block; padding: 0.65rem 0.7rem; color: var(--ink); font-family: var(--mono); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.11em; text-decoration: none; text-transform: uppercase; }
.nav-disclosure nav a:not(.nav-cta):hover { background: var(--canvas-lift); color: var(--cyan); }
.nav-cta { background: var(--cyan); color: #071112 !important; text-align: center; }
.nav-cta:hover { background: var(--ink); }
.nav-disclosure.nav-inline summary { display: none; }
.nav-disclosure.nav-inline nav { position: static; display: flex; align-items: center; justify-content: space-between; gap: clamp(0.5rem, 2vw, 2.4rem); padding: 0; border: 0; background: none; box-shadow: none; }
.nav-disclosure.nav-inline nav a { padding: 0.45rem 0; white-space: nowrap; }
.nav-disclosure.nav-inline nav a:not(.nav-cta):hover { background: none; }
.nav-disclosure.nav-inline .nav-cta { padding: 0.56rem 0.9rem; }

/* ---------- Shared editorial primitives ---------- */
.section-kicker, .chapter-index, .hero-index, .footer-label { color: var(--cyan); font-family: var(--mono); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.16em; line-height: 1.35; text-transform: uppercase; }
.section-kicker::before { display: inline-block; width: 1.8rem; height: 1px; margin: 0 0.6rem 0.22rem 0; background: currentColor; content: ""; }
h1, h2, h3 { font-family: var(--display); font-weight: 900; line-height: 0.94; text-wrap: balance; }
h1 em, h2 em { color: var(--cyan); font-style: normal; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 2.8rem; padding: 0.7rem 1.1rem; border: 1px solid var(--cyan); background: var(--cyan); color: #071112; cursor: pointer; font-family: var(--mono); font-size: 0.65rem; font-weight: 800; letter-spacing: 0.12em; line-height: 1.2; text-align: center; text-decoration: none; text-transform: uppercase; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease; }
.button:hover { border-color: var(--ink); background: var(--ink); color: var(--canvas); transform: translateY(-2px); }
.button-outline { border-color: var(--line-strong); background: transparent; color: var(--ink); }
.button-outline:hover { border-color: var(--cyan); background: var(--cyan); color: #071112; }
.button-paper { border-color: var(--paper-ink); background: var(--paper); color: var(--paper-ink); }
.button-paper:hover { border-color: var(--cyan-strong); background: var(--cyan-strong); }
.text-link { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--ink); font-family: var(--mono); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.1em; text-decoration: none; text-transform: uppercase; }
.text-link::after { color: var(--cyan); content: "↗"; font-size: 1rem; }
.text-link:hover { color: var(--cyan); }
@keyframes hr-frame-reveal { from { opacity: 0; clip-path: inset(0 0 0 100%); transform: translateX(1.1rem) rotate(.8deg); } to { opacity: 1; clip-path: inset(0); transform: none; } }
.is-reveal { opacity: 1; transform: none; }
html.js .is-reveal { opacity: 0; clip-path: inset(0 0 0 100%); transform: translateX(1.1rem) rotate(.8deg); transition: opacity 0.7s ease, transform 0.7s ease, clip-path .7s ease; }
html.js .is-reveal.is-visible { opacity: 1; clip-path: inset(0); transform: none; animation: hr-frame-reveal .72s cubic-bezier(.2,.8,.2,1) both; }

/* ---------- Home hero: the main rectangles-like collage ---------- */
.home-hero { position: relative; min-height: min(58rem, 100svh); overflow: hidden; padding: 7.1rem clamp(1.1rem, 3vw, 3.3rem) 2rem; }
.home-hero::after { position: absolute; right: 4%; bottom: 1rem; width: 19rem; height: 1px; background: linear-gradient(90deg, transparent, var(--cyan)); content: ""; opacity: 0.65; }
.hero-grid { display: grid; width: min(100%, 92rem); min-height: calc(min(58rem, 100svh) - 9rem); margin: 0 auto; grid-template-columns: minmax(15rem, 0.78fr) minmax(31rem, 1.22fr); align-items: center; gap: clamp(2rem, 5vw, 7rem); }
.hero-copy { position: relative; z-index: 4; max-width: 28rem; }
.hero-copy h1 { max-width: 7.3ch; margin-top: 1.45rem; color: var(--ink); font-size: clamp(4rem, 8.3vw, 8.1rem); letter-spacing: -0.055em; text-transform: uppercase; }
.hero-copy h1 span { color: var(--cyan); }
.hero-deck { max-width: 34rem; margin-top: 1.7rem; color: #c3c4bc; font-size: clamp(0.95rem, 1.25vw, 1.12rem); line-height: 1.55; }
.hero-deck strong { color: var(--ink); font-weight: 700; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.35rem; margin-top: 2rem; }
.hero-footnotes { display: flex; flex-wrap: wrap; gap: 0.55rem 1.25rem; margin-top: 2.4rem; color: var(--muted); font-family: var(--mono); font-size: 0.59rem; letter-spacing: 0.07em; text-transform: uppercase; }
.hero-footnotes span::before { margin-right: 0.45rem; color: var(--cyan); content: "·"; }
.hero-collage { position: relative; min-height: clamp(30rem, 67vw, 46rem); }
.hero-collage::before { position: absolute; top: 3%; right: 3%; width: 74%; height: 82%; border: 1px solid rgba(127, 228, 216, 0.34); content: ""; transform: rotate(-2.5deg); }
.hero-collage::after { position: absolute; top: 8%; left: 4%; width: 1px; height: 52%; background: linear-gradient(var(--cyan), transparent); content: ""; }
.hero-shot { position: absolute; overflow: hidden; border: 0.42rem solid var(--paper); background: var(--paper); box-shadow: 1rem 1.3rem 2.6rem rgba(0, 0, 0, 0.35); }
.hero-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-shot figcaption { padding: 0.42rem 0.15rem 0.05rem; color: var(--paper-ink); font-family: var(--mono); font-size: 0.5rem; letter-spacing: 0.12em; line-height: 1.25; text-transform: uppercase; }
.hero-shot--main { top: 3%; right: 2%; z-index: 1; width: min(75%, 39rem); height: 78%; transform: rotate(2.2deg); animation: hero-drift 14s ease-in-out infinite alternate; }
.hero-shot--main img { height: calc(100% - 1.4rem); }
.hero-shot--portrait { right: 47%; bottom: 7%; z-index: 3; width: min(26%, 12rem); height: 30%; transform: rotate(-6deg); }
.hero-shot--film { bottom: 13%; left: 3%; z-index: 2; width: min(28%, 12rem); height: 18%; border-width: 0.3rem; transform: rotate(8deg); }
.hero-shot--film figcaption { display: none; }
.hero-card { position: absolute; bottom: 18%; left: 19%; z-index: 5; width: min(47%, 18rem); padding: 1.1rem; background: var(--paper); color: var(--paper-ink); box-shadow: 0.8rem 1rem 2.6rem rgba(0, 0, 0, 0.38); transform: rotate(-2.5deg); }
.hero-card::before { position: absolute; top: -0.45rem; right: 1rem; width: 5rem; height: 0.9rem; background: rgba(127, 228, 216, 0.72); content: ""; transform: rotate(3deg); }
.hero-card-kicker { color: #3c5f68; font-family: var(--mono); font-size: 0.52rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.hero-card h2 { max-width: 11ch; margin-top: 0.5rem; font-size: 1.8rem; letter-spacing: -0.04em; }
.hero-card p:not(.hero-card-kicker) { margin-top: 0.55rem; color: #4d5652; font-size: 0.78rem; line-height: 1.35; }
.hero-card .card-arrow { display: inline-flex; margin-top: 0.9rem; color: #075d67; font-family: var(--mono); font-size: 0.6rem; font-weight: 800; letter-spacing: 0.1em; text-decoration: none; text-transform: uppercase; }
.hero-card .card-arrow:hover { color: var(--paper-ink); }
.hero-notes-form { margin-top:.85rem; padding-top:.75rem; border-top:1px solid rgba(17,20,20,.18); }
.hero-notes-form label { display:block; color:#3c5f68; font-family:var(--mono); font-size:.52rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.hero-notes-form > div { display:flex; gap:.3rem; margin-top:.35rem; }
.hero-notes-form input { min-width:0; flex:1; padding:.48rem .45rem; border:1px solid rgba(17,20,20,.35); background:transparent; color:var(--paper-ink); font-size:.63rem; }
.hero-notes-form button { flex:0 0 auto; padding:.48rem .5rem; border:1px solid #0a7f89; color:var(--paper); background:#0a7f89; font:800 .54rem/1 var(--mono); text-transform:uppercase; cursor:pointer; }
.hero-notes-form p { min-height:1.35em; margin:.3rem 0 0; color:#0a7f89; font:500 .5rem/1.25 var(--mono); }
.hero-stamp { position: absolute; top: 10%; left: 4%; z-index: 6; display: grid; width: 3.1rem; height: 3.1rem; place-items: center; border: 1px solid var(--cyan); border-radius: 50%; color: var(--cyan); font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.08em; transform: rotate(-12deg); }
.hero-index { position: absolute; right: 1rem; bottom: 0; writing-mode: vertical-rl; }
.hero-index::after { display: block; width: 1px; height: 3rem; margin: 0.7rem auto 0; background: var(--cyan); content: ""; }
@keyframes hero-drift { from { transform: rotate(2.2deg) scale(1); } to { transform: rotate(1.1deg) scale(1.025); } }

/* ---------- Date check band ---------- */
.check-band { position: relative; z-index: 3; border-top: 1px solid var(--paper-line); border-bottom: 1px solid var(--paper-line); background: var(--paper); color: var(--paper-ink); }
.check-band-inner { display: grid; width: min(100% - 2.2rem, var(--measure)); margin: 0 auto; padding: clamp(2.2rem, 5vw, 4.7rem) 0; grid-template-columns: 1.1fr 0.9fr; align-items: end; gap: clamp(2rem, 8vw, 9rem); }
.check-band .section-kicker { color: #0a7f89; }
.check-band h2 { max-width: 10ch; margin-top: 0.9rem; font-size: clamp(2.5rem, 5vw, 5.5rem); letter-spacing: -0.06em; }
.check-band h2 em { color: #0a7f89; }
.check-note { max-width: 31rem; color: #4d5652; font-size: 0.95rem; }
.check-form { display: grid; gap: 0.6rem; }
.check-form label { color: #3c5f68; font-family: var(--mono); font-size: 0.59rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.check-row { display: flex; gap: 0.55rem; }
.check-row input { min-width: 0; flex: 1; padding: 0.75rem 0.7rem; border: 1px solid rgba(17, 20, 20, 0.42); border-radius: 0; background: transparent; color: var(--paper-ink); }
.check-row input:focus { outline: 2px solid #0a7f89; outline-offset: 2px; }
.check-form .button { flex: 0 0 auto; border-color: #0a7f89; background: #0a7f89; color: var(--paper); }
.check-form .button:hover { border-color: var(--paper-ink); background: var(--paper-ink); }
.check-result { min-height: 1.7em; color: #0a7f89; font-size: 0.8rem; line-height: 1.35; }
.check-result[data-state="taken"], .check-result[data-state="warn"] { color: #9a4f34; }
.check-result a { color: inherit; font-weight: 800; text-underline-offset: 0.18em; }

/* ---------- Work chapter ---------- */
.chapter { position: relative; width: min(100% - 2.2rem, var(--measure)); margin: 0 auto; }
.chapter-work { min-height: 68rem; padding-top: clamp(6rem, 13vw, 12rem); }
.chapter-heading { position: relative; z-index: 4; max-width: 27rem; }
.chapter-heading h2 { margin-top: 1rem; font-size: clamp(3rem, 6vw, 6.6rem); letter-spacing: -0.065em; }
.chapter-heading h2 em { display: block; }
.chapter-heading > p:not(.section-kicker) { max-width: 27rem; margin-top: 1.5rem; color: var(--muted); font-size: 0.96rem; }
.chapter-heading .text-link { margin-top: 1.7rem; }
.work-plate { position: absolute; top: 25rem; right: 1%; z-index: 1; width: min(57vw, 52rem); padding: 0.4rem 0.4rem 0.85rem; background: var(--paper); color: var(--paper-ink); box-shadow: 1.1rem 1.5rem 0 rgba(127, 228, 216, 0.15), 1.8rem 2.4rem 3rem rgba(0, 0, 0, 0.28); transform: rotate(-2.5deg); }
.work-plate img { display: block; width: 100%; height: auto; aspect-ratio: 1.65; object-fit: cover; }
.work-plate figcaption { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0.4rem 0; font-family: var(--mono); font-size: 0.55rem; letter-spacing: 0.1em; text-transform: uppercase; }
.work-plate figcaption span:last-child { color: #0a7f89; }
.work-note { position: absolute; top: 43rem; left: 4%; z-index: 3; width: min(25vw, 17rem); padding: 0.45rem 0.45rem 0.75rem; background: var(--canvas-lift); box-shadow: 0.7rem 0.9rem 2rem rgba(0, 0, 0, 0.3); transform: rotate(5deg); }
.work-note img { display: block; width: 100%; height: auto; aspect-ratio: 0.9; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.work-note figcaption { padding: 0.6rem 0.25rem 0; color: var(--cyan); font-family: var(--mono); font-size: 0.54rem; letter-spacing: 0.1em; text-transform: uppercase; }
.work-copy { position: absolute; right: 7%; bottom: 6rem; z-index: 4; width: min(24rem, 34%); padding: 1.25rem; border-left: 2px solid var(--cyan); background: rgba(18, 18, 18, 0.86); }
.work-copy p { color: #c2c5be; font-size: 0.83rem; line-height: 1.5; }
.work-copy strong { color: var(--ink); }
.chapter-rail { position: absolute; top: 8rem; right: 0; color: var(--quiet); font-family: var(--mono); font-size: 0.57rem; letter-spacing: 0.14em; writing-mode: vertical-rl; text-transform: uppercase; }

/* ---------- Film strip chapter ---------- */
.chapter-film { min-height: 58rem; padding: 9rem 0 10rem; }
.chapter-heading--center { max-width: 31rem; margin: 0 auto; text-align: center; }
.chapter-heading--center .section-kicker::before { display: none; }
.chapter-heading--center h2 { font-size: clamp(3.1rem, 6vw, 6rem); }
.chapter-heading--center > p:not(.section-kicker) { margin-right: auto; margin-left: auto; }
.film-stage { position: relative; margin-top: 7rem; padding: 1.15rem 0; }
.film-stage::before, .film-stage::after { position: absolute; right: -1vw; left: -1vw; height: 0.75rem; background: repeating-linear-gradient(90deg, var(--canvas-lift) 0 1.7rem, transparent 1.7rem 2.7rem); content: ""; }
.film-stage::before { top: 0; }
.film-stage::after { bottom: 0; }
.filmstrip-rail { display: flex; align-items: flex-start; gap: 1rem; overflow-x: auto; padding: 1rem 0; scroll-padding-inline: 1rem; scroll-snap-type: x proximity; scrollbar-color: var(--cyan) var(--canvas-lift); scrollbar-width: thin; }
.film-frame { flex: 0 0 clamp(12rem, 21vw, 19rem); scroll-snap-align: start; padding: 0.55rem 0.55rem 0.8rem; background: var(--paper); color: var(--paper-ink); box-shadow: 0 1.1rem 2.4rem rgba(0, 0, 0, 0.25); }
.film-frame:nth-child(2n) { transform: translateY(1rem) rotate(1.6deg); }
.film-frame:nth-child(3n) { transform: translateY(-0.5rem) rotate(-1.8deg); }
.film-frame img { display: block; width: 100%; height: auto; aspect-ratio: 1.32; object-fit: cover; }
.film-frame--tall img { aspect-ratio: 0.92; }
.film-frame figcaption { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 0.2rem 0.4rem; min-height: 2.6em; padding-top: 0.62rem; font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.08em; line-height: 1.35; text-transform: uppercase; }
.film-frame figcaption span { white-space: nowrap; }
.film-frame figcaption span:last-child { margin-left: auto; color: #0a7f89; text-align: right; }
.film-note { display: grid; max-width: 52rem; margin: 4.7rem auto 0; grid-template-columns: 1fr 1fr; gap: 3rem; color: var(--muted); }
.film-note p { font-size: 0.9rem; }
.film-note p:last-child { color: var(--ink); font-family: var(--display); font-size: clamp(1.5rem, 3vw, 2.6rem); font-weight: 900; line-height: 0.98; letter-spacing: -0.04em; }

/* Local visual follow-up — a paper-framed photo closes the film chapter before coverage. */
.film-bridge { position: relative; width: min(100%, 58rem); margin: clamp(4rem, 8vw, 8rem) auto 0; padding: .72rem .72rem 1.15rem; background: var(--paper); color: var(--paper-ink); box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, .28); transform: rotate(-1.4deg); }
.film-bridge::before { position: absolute; top: -.45rem; left: 10%; width: 5.5rem; height: .35rem; background: var(--cyan); content: ""; transform: rotate(1.4deg); }
.film-bridge__frame { position: relative; overflow: hidden; aspect-ratio: 1.9; background: #243433; }
.film-bridge__image { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.04) translate3d(-.8%, -.4%, 0); transform-origin: center; animation: haldenreed-collage-drift 14s ease-in-out infinite alternate; animation-delay: var(--hr-collage-delay, 0ms); filter: saturate(.92) contrast(1.04); }
.film-bridge__wash { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, rgba(18, 18, 18, .08), transparent 42%, rgba(127, 228, 216, .16)); mix-blend-mode: screen; }
.film-bridge__stamp { position: absolute; top: .7rem; right: .7rem; padding: .35rem .45rem; border: 1px solid rgba(236, 232, 218, .7); background: rgba(18, 18, 18, .6); color: var(--ink); font-family: var(--mono); font-size: .52rem; letter-spacing: .1em; line-height: 1.2; }
.film-bridge figcaption { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: .7rem .15rem 0; font-family: var(--mono); font-size: .58rem; letter-spacing: .08em; line-height: 1.35; text-transform: uppercase; }
.film-bridge figcaption span:last-child { color: #0a7f89; text-align: right; }
@keyframes haldenreed-collage-drift {
  0% { transform: scale(1.04) translate3d(-.8%, -.4%, 0) rotate(.1deg); filter: saturate(.9) contrast(1.03); }
  50% { transform: scale(1.075) translate3d(.2%, .15%, 0) rotate(-.05deg); filter: saturate(1) contrast(1.05); }
  100% { transform: scale(1.11) translate3d(1.1%, .6%, 0) rotate(-.16deg); filter: saturate(1.06) contrast(1.08); }
}
html[data-motion-preview="static"] .film-bridge__image { animation: none; transform: none; filter: saturate(.92) contrast(1.04); }
@media (prefers-reduced-motion: reduce) {
  .film-bridge__image { animation: none; transform: none; filter: saturate(.92) contrast(1.04); }
}

/* ---------- Package comparison ---------- */
.chapter-compare { min-height: 72rem; padding: 7rem 0 10rem; }
.compare-header { display: grid; grid-template-columns: minmax(12rem, 0.55fr) minmax(16rem, 1fr); align-items: end; gap: 2rem; }
.compare-header h2 { max-width: 9ch; margin-top: 1rem; font-size: clamp(3.2rem, 6vw, 6.3rem); letter-spacing: -0.07em; }
.compare-header p:last-child { max-width: 32rem; margin-bottom: 0.3rem; color: var(--muted); font-size: 0.94rem; }
.compare-layout { display: grid; margin-top: 5rem; grid-template-columns: minmax(12rem, 0.5fr) minmax(22rem, 1.5fr); gap: clamp(2rem, 6vw, 7rem); align-items: start; }
.compare-side { position: sticky; top: 5rem; }
.compare-side-mark { display: grid; width: 5.3rem; height: 5.3rem; place-items: center; border: 1px solid var(--cyan); color: var(--cyan); font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.1em; transform: rotate(-6deg); }
.compare-side p { max-width: 18rem; margin-top: 1.7rem; color: var(--muted); font-size: 0.85rem; }
.compare-side .text-link { margin-top: 1.5rem; }
.compare-tool { padding: clamp(1.2rem, 3vw, 2.5rem); background: var(--paper); color: var(--paper-ink); box-shadow: 1rem 1.2rem 0 rgba(76, 145, 247, 0.22), 1.5rem 1.8rem 3rem rgba(0, 0, 0, 0.28); transform: rotate(1deg); }
.compare-tool h2, .compare-tool h3 { color: var(--paper-ink); font-size: clamp(2rem, 3vw, 3rem); letter-spacing: -0.05em; }
.compare-tool > p { max-width: 38rem; margin-top: 0.55rem; color: #4d5652; font-size: 0.86rem; }
.pk-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin-top: 1.7rem; }
.field { display: grid; gap: 0.35rem; }
.field label, .pk-extras legend { color: #3c5f68; font-family: var(--mono); font-size: 0.57rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.field input, .field select, .field textarea, .pk-controls select { width: 100%; min-height: 2.7rem; padding: 0.6rem 0.65rem; border: 1px solid rgba(17, 20, 20, 0.3); border-radius: 0; background: rgba(255, 255, 255, 0.18); color: var(--paper-ink); }
.field textarea { min-height: 8rem; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #68716d; }
.field select:focus, .field input:focus, .field textarea:focus, .pk-controls select:focus { outline: 2px solid #0a7f89; outline-offset: 2px; }
.pk-extras { margin-top: 1.1rem; padding: 0; border: 0; }
.pk-check { display: flex; flex-wrap: wrap; gap: 0.65rem 1rem; margin-top: 0.5rem; }
.pk-check label { display: inline-flex; align-items: center; gap: 0.35rem; color: #4d5652; font-size: 0.77rem; }
.pk-check input { accent-color: #0a7f89; }
.pk-note { min-height: 2.3em; margin-top: 1.4rem; color: #0a7f89; font-size: 0.8rem; font-weight: 700; line-height: 1.4; }
.pk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.7rem; margin-top: 0.75rem; }
.pk-card { position: relative; min-height: 15rem; padding: 1rem; border: 1px solid rgba(17, 20, 20, 0.26); background: rgba(255, 255, 255, 0.22); }
.pk-card.is-pick { border: 2px solid #0a7f89; background: #e4dfd0; transform: translateY(-0.35rem); }
.pk-card h3 { color: var(--paper-ink); font-size: 1.25rem; letter-spacing: -0.04em; }
.pk-badge { display: inline-block; margin-bottom: 0.55rem; padding: 0.2rem 0.42rem; background: #0a7f89; color: var(--paper); font-family: var(--mono); font-size: 0.5rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.pk-price { margin-top: 0.9rem; color: #0a7f89; font-family: var(--display); font-size: 2rem; font-weight: 900; letter-spacing: -0.05em; }
.pk-hours { margin-top: 0.1rem; color: #68716d; font-family: var(--mono); font-size: 0.54rem; letter-spacing: 0.08em; text-transform: uppercase; }
.pk-card ul { display: grid; gap: 0.35rem; margin-top: 1rem; }
.pk-card li { position: relative; padding-left: 0.8rem; color: #4d5652; font-size: 0.72rem; line-height: 1.32; }
.pk-card li::before { position: absolute; margin: 0.5em 0 0 -0.75rem; width: 0.4rem; height: 1px; background: #0a7f89; content: ""; }
.pk-caveat { margin-top: 1.3rem; color: #68716d; font-family: var(--mono); font-size: 0.58rem; line-height: 1.45; }
.mini-table-wrap { margin-top: 3rem; overflow-x: auto; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.mini-table { width: 100%; min-width: 40rem; border-collapse: collapse; font-family: var(--mono); font-size: 0.63rem; }
.mini-table th, .mini-table td { padding: 0.75rem 0.65rem; border-bottom: 1px solid var(--line); text-align: left; }
.mini-table thead th { color: var(--cyan); font-size: 0.55rem; letter-spacing: 0.11em; text-transform: uppercase; }
.mini-table tbody th { color: var(--muted); font-weight: 500; }
.mini-table tbody td { color: var(--ink); }
.mini-table tbody tr:last-child th, .mini-table tbody tr:last-child td { border-bottom: 0; }

/* ---------- Studio note + FAQ ---------- */
.chapter-note { display: grid; min-height: 58rem; padding: 10rem 0; grid-template-columns: minmax(14rem, 0.8fr) minmax(18rem, 1.2fr); gap: clamp(2rem, 9vw, 10rem); align-items: center; }
.note-copy h2 { max-width: 9ch; margin-top: 1rem; font-size: clamp(3rem, 6vw, 6rem); letter-spacing: -0.07em; }
.note-copy > p:not(.section-kicker) { max-width: 27rem; margin-top: 1.7rem; color: var(--muted); font-size: 0.96rem; }
.note-facts { display: grid; gap: 0.7rem; max-width: 28rem; margin-top: 2rem; }
.note-fact { display: grid; grid-template-columns: 2.3rem 1fr; gap: 0.7rem; padding-top: 0.7rem; border-top: 1px solid var(--line); }
.note-fact dt { color: var(--cyan); font-family: var(--mono); font-size: 0.62rem; }
.note-fact dd { color: var(--ink); font-size: 0.82rem; }
.note-plate { position: relative; width: min(100%, 35rem); justify-self: end; padding: 0.55rem 0.55rem 1rem; background: var(--paper); color: var(--paper-ink); box-shadow: 1rem 1.3rem 0 rgba(127, 228, 216, 0.15), 1.4rem 1.8rem 3rem rgba(0, 0, 0, 0.25); transform: rotate(3deg); }
.note-plate img { display: block; width: 100%; aspect-ratio: 1.25; object-fit: cover; filter: grayscale(0.92) contrast(1.06); }
.note-plate figcaption { display: flex; justify-content: space-between; gap: 1rem; padding: 0.7rem 0.25rem 0; font-family: var(--mono); font-size: 0.54rem; letter-spacing: 0.1em; text-transform: uppercase; }
.note-plate figcaption span:last-child { color: #0a7f89; }
.chapter-faq { min-height: 58rem; padding: 9rem 0 10rem; }
.faq-header { display: grid; grid-template-columns: minmax(14rem, 0.8fr) minmax(18rem, 1.2fr); gap: 2rem; align-items: end; }
.faq-header h2 { max-width: 9ch; margin-top: 1rem; font-size: clamp(3rem, 6vw, 6rem); letter-spacing: -0.07em; }
.faq-header p:last-child { max-width: 30rem; color: var(--muted); font-size: 0.94rem; }
.faq-list { display: grid; max-width: 57rem; margin: 5rem 0 0 auto; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 0; color: var(--ink); cursor: pointer; font-family: var(--display); font-size: clamp(1.35rem, 2.5vw, 2.3rem); font-weight: 900; line-height: 1; list-style: none; letter-spacing: -0.04em; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { flex: 0 0 auto; color: var(--cyan); content: "+"; font-family: var(--mono); font-size: 1.4rem; font-weight: 400; }
.faq-item[open] summary::after { content: "−"; }
.faq-item p { max-width: 44rem; padding: 0 3rem 1.4rem 0; color: var(--muted); font-size: 0.9rem; }
.faq-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; margin-top: 3.5rem; }
.faq-cta p { color: var(--muted); font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; }

/* ---------- Closing band ---------- */
.closing-band { position: relative; overflow: hidden; padding: clamp(4rem, 9vw, 8rem) clamp(1.1rem, 3vw, 3.3rem); background: var(--cyan); color: #071112; }
.closing-band::before { position: absolute; top: -7rem; right: 10%; width: 18rem; height: 18rem; border: 1px solid rgba(7, 17, 18, 0.35); border-radius: 50%; content: ""; }
.closing-inner { display: flex; width: min(100%, var(--measure)); margin: 0 auto; align-items: end; justify-content: space-between; gap: 2rem; }
.closing-band .section-kicker { color: #075d67; }
.closing-band h2 { max-width: 8ch; margin-top: 1rem; font-size: clamp(3.2rem, 7vw, 7rem); letter-spacing: -0.08em; }
.closing-band .button { margin-top: 1.8rem; border-color: #071112; background: #071112; color: var(--cyan); }
.closing-band .button:hover { border-color: var(--paper-ink); background: var(--paper-ink); color: var(--paper); }
.closing-code { position: relative; z-index: 1; display: grid; width: 10rem; height: 10rem; place-items: center; border: 1px solid rgba(7, 17, 18, 0.5); color: #075d67; font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.12em; text-align: center; transform: rotate(7deg); }
.closing-code svg { width: 3.6rem; height: 3.6rem; color: #075d67; }

/* ---------- Interior route framing ---------- */
.interior-main { padding-top: 6rem; }
.interior-hero { display: grid; width: min(100% - 2.2rem, var(--measure)); min-height: 39rem; margin: 0 auto; padding: 7rem 0 8rem; grid-template-columns: minmax(15rem, 1fr) minmax(17rem, 0.8fr); align-items: end; gap: 4rem; }
.interior-hero h1 { max-width: 8ch; margin-top: 1rem; font-size: clamp(4rem, 8vw, 8rem); letter-spacing: -0.08em; }
.interior-hero h1 em { display: block; }
.interior-hero-copy > p:not(.section-kicker) { max-width: 30rem; margin-top: 1.5rem; color: var(--muted); font-size: 0.96rem; }
.interior-hero-meta { align-self: center; max-width: 23rem; padding-left: 1.2rem; border-left: 1px solid var(--cyan); color: var(--muted); font-size: 0.88rem; }
.interior-hero-meta strong { display: block; margin-bottom: 0.7rem; color: var(--ink); font-family: var(--display); font-size: 2rem; line-height: 0.95; }
.interior-hero-meta .text-link { margin-top: 1.5rem; }

/* ---------- Archive / gallery ---------- */
.archive-controls { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--canvas-soft); }
.archive-controls-inner { display: flex; width: min(100% - 2.2rem, var(--measure)); margin: 0 auto; align-items: end; justify-content: space-between; gap: 2rem; padding: 1.2rem 0; }
.filter-form { display: flex; flex-wrap: wrap; align-items: end; gap: 0.8rem; }
.filter-form .field { min-width: 11rem; }
.filter-form select { min-height: 2.5rem; padding: 0.55rem 0.65rem; border: 1px solid var(--line-strong); border-radius: 0; background: var(--canvas); color: var(--ink); font-family: var(--mono); font-size: 0.63rem; }
.filter-form .button { min-height: 2.5rem; border-color: var(--line-strong); background: transparent; color: var(--ink); }
.filter-form .button:hover { border-color: var(--cyan); background: var(--cyan); color: #071112; }
.filter-count { color: var(--cyan); font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; }
.archive-grid-section { width: min(100% - 2.2rem, var(--measure)); margin: 0 auto; padding: 7rem 0 10rem; }
.archive-grid-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.archive-grid-head h2 { font-size: clamp(2.5rem, 5vw, 5rem); letter-spacing: -0.07em; }
.archive-grid-head p { max-width: 22rem; color: var(--muted); font-size: 0.83rem; }
.archive-grid { display: grid; margin-top: 4rem; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2.2rem); align-items: start; }
.archive-item { grid-column: span 4; padding: 0.42rem 0.42rem 0.8rem; background: var(--paper); color: var(--paper-ink); box-shadow: 0.5rem 0.8rem 1.5rem rgba(0, 0, 0, 0.18); }
.archive-item:nth-child(3n + 1) { grid-column: span 5; transform: rotate(-1.2deg); }
.archive-item:nth-child(3n + 2) { transform: translateY(2.2rem) rotate(1.1deg); }
.archive-item:nth-child(5n) { grid-column: span 3; transform: translateY(-1.4rem) rotate(-2deg); }
.archive-item img { display: block; width: 100%; aspect-ratio: 1.2; object-fit: cover; }
.archive-item:nth-child(3n + 1) img { aspect-ratio: 1.48; }
.archive-item:nth-child(5n) img { aspect-ratio: 0.82; }
.archive-item figcaption { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.65rem 0.2rem 0; font-family: var(--mono); font-size: 0.54rem; letter-spacing: 0.08em; line-height: 1.3; text-transform: uppercase; }
.archive-item figcaption span:last-child { color: #0a7f89; text-align: right; }
.archive-empty { margin-top: 2rem; padding: 1.5rem; border: 1px dashed var(--line-strong); color: var(--muted); }
.archive-empty a { color: var(--cyan); }
.archive-note { max-width: 45rem; margin-top: 4rem; color: var(--muted); font-family: var(--mono); font-size: 0.59rem; line-height: 1.55; }

/* ---------- Packages route + enquiry ---------- */
.packages-panel { width: min(100% - 2.2rem, var(--measure)); margin: 0 auto; padding: 0 0 9rem; }
.packages-panel > .compare-tool { max-width: 74rem; margin-left: auto; }
.enquire-section { width: min(100% - 2.2rem, var(--measure)); margin: 0 auto; padding: 0 0 10rem; }
.enquire-header { display: grid; grid-template-columns: minmax(14rem, 0.75fr) minmax(18rem, 1.25fr); gap: 2rem; align-items: end; }
.enquire-header h2 { max-width: 9ch; margin-top: 1rem; font-size: clamp(3rem, 6vw, 6rem); letter-spacing: -0.07em; }
.enquire-header p:last-child { max-width: 31rem; color: var(--muted); font-size: 0.92rem; }
.enquire-layout { display: grid; margin-top: 4.5rem; grid-template-columns: minmax(17rem, 1.2fr) minmax(13rem, 0.8fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.book-form { display: grid; padding: clamp(1.2rem, 3vw, 2rem); grid-template-columns: 1fr 1fr; gap: 1rem; border: 1px solid var(--line); background: var(--canvas-soft); }
.book-form .field-wide { grid-column: 1 / -1; }
.book-form .button { justify-self: start; }
.form-status { grid-column: 1 / -1; min-height: 1.4em; color: var(--cyan); font-family: var(--mono); font-size: 0.62rem; line-height: 1.4; }
.form-status[data-state="warn"] { color: var(--orange); }
.enquire-note { position: relative; padding: 0.5rem 0.5rem 1.2rem; background: var(--paper); color: var(--paper-ink); box-shadow: 0.8rem 1rem 2rem rgba(0, 0, 0, 0.22); transform: rotate(3deg); }
.enquire-note img { display: block; width: 100%; aspect-ratio: 1.1; object-fit: cover; }
.enquire-note h3 { margin: 0.9rem 0.2rem 0; font-size: 2rem; letter-spacing: -0.05em; }
.enquire-note p { margin: 0.6rem 0.2rem 0; color: #4d5652; font-size: 0.8rem; }
.enquire-note small { display: block; margin: 1.2rem 0.2rem 0; color: #0a7f89; font-family: var(--mono); font-size: 0.53rem; letter-spacing: 0.1em; text-transform: uppercase; }

/* ---------- Footer ---------- */
.site-footer { overflow: hidden; padding: 4.2rem clamp(1.1rem, 3vw, 3.3rem) 1.4rem; border-top: 1px solid var(--line); background: var(--canvas); color: var(--muted); }
.footer-grid { display: grid; width: min(100%, var(--measure)); margin: 0 auto; grid-template-columns: 1.3fr 0.8fr 0.8fr 1fr; gap: 2rem; }
.footer-title { margin-top: 0.8rem; color: var(--ink); font-family: var(--display); font-size: 2.2rem; font-weight: 900; line-height: 0.88; letter-spacing: -0.05em; }
.footer-meta { margin-top: 0.9rem; color: var(--muted); font-size: 0.78rem; line-height: 1.5; }
.footer-meta a { color: var(--ink); text-underline-offset: 0.16em; }
.footer-col h2 { color: var(--ink); font-family: var(--mono); font-size: 0.58rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.footer-links { display: grid; gap: 0.45rem; margin-top: 0.8rem; }
.footer-links a { color: var(--muted); font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.08em; text-decoration: none; text-transform: uppercase; }
.footer-links a:hover { color: var(--cyan); }
.footer-build { color: var(--ink); font-size: 0.82rem; }
.footer-build a { color: var(--cyan); font-weight: 800; text-decoration: none; }
.footer-truth { max-width: 25rem; margin-top: 0.9rem; color: var(--quiet); font-family: var(--mono); font-size: 0.55rem; line-height: 1.5; }
.footer-rule { width: min(100%, var(--measure)); height: 1px; margin: 3.6rem auto 0; background: var(--line); }
.footer-lockup { display: flex; width: min(100%, 92rem); margin: 0 auto; align-items: baseline; gap: 0.7rem; color: var(--paper); font-family: var(--display); font-size: clamp(4.5rem, 14vw, 14rem); font-weight: 900; letter-spacing: -0.1em; line-height: 0.68; white-space: nowrap; transform: translateX(-0.045em); }
.footer-lockup small { color: var(--cyan); font-family: var(--mono); font-size: clamp(0.55rem, 1vw, 0.9rem); font-weight: 700; letter-spacing: 0.08em; }
.footer-bottom { display: flex; width: min(100%, var(--measure)); margin: 2.4rem auto 0; justify-content: space-between; gap: 1rem; color: var(--quiet); font-family: var(--mono); font-size: 0.53rem; letter-spacing: 0.08em; text-transform: uppercase; }

/* ---------- Accessibility palette hooks ---------- */
html[data-a11y-contrast="high"] { --canvas: #000; --canvas-soft: #090909; --ink: #fff; --muted: #f0f0f0; --paper: #fff; --paper-deep: #eee; --paper-ink: #000; --line: rgba(255, 255, 255, 0.8); --line-strong: #fff; --paper-line: rgba(0, 0, 0, 0.8); --cyan: #00ffff; --cyan-strong: #00ffff; --blue: #80bfff; }
html[data-a11y-contrast="high"] footer, html[data-a11y-contrast="high"] .footer-truth, html[data-a11y-contrast="high"] .footer-bottom { color: #fff; }
html[data-a11y-colour="safe"] { --cyan: #56b4e9; --cyan-strong: #0072b2; --blue: #e69f00; --orange: #d55e00; }

/* ---------- Responsive / motion ---------- */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 0.82fr 1.18fr; gap: 1.5rem; }
  .hero-copy h1 { font-size: clamp(3.6rem, 9vw, 6.2rem); }
  .hero-card { left: 9%; width: min(55%, 17rem); }
  .work-plate { width: 60vw; }
  .work-copy { right: 2%; width: min(27rem, 39%); }
  .compare-layout { gap: 2.5rem; }
  .footer-grid { grid-template-columns: 1.4fr 0.8fr 0.8fr; }
  .footer-col:last-child { grid-column: 2 / -1; }
}
@media (max-width: 760px) {
  .site-header { gap: 0.75rem; padding: 0.9rem 1.1rem; }
  .site-brand { min-width: 0; }
  .brand-type small { display: none; }
  .nav-disclosure.nav-inline nav { display: grid; }
  .home-hero { min-height: auto; padding-top: 6.2rem; }
  .hero-grid { display: flex; min-height: 0; flex-direction: column; align-items: stretch; gap: 2rem; }
  .hero-copy { max-width: 30rem; }
  .hero-copy h1 { max-width: 7ch; font-size: clamp(4.1rem, 17vw, 7rem); }
  .hero-collage { min-height: 31rem; }
  .hero-shot--main { right: 0; width: 76%; height: 78%; }
  .hero-shot--portrait { right: 44%; width: 25%; }
  .hero-shot--film { left: 2%; width: 27%; }
  .hero-card { bottom: 13%; left: 14%; width: min(53%, 17rem); }
  .check-band-inner, .interior-hero, .faq-header, .enquire-header { grid-template-columns: 1fr; align-items: start; gap: 2rem; }
  .check-band-inner { padding: 3.4rem 0; }
  .check-band h2 { max-width: 11ch; }
  .check-form { max-width: 32rem; }
  .chapter-work { min-height: 65rem; padding-top: 6rem; overflow: hidden; }
  .work-plate { top: 23rem; right: -2%; width: 76vw; }
  .work-note { top: 40rem; left: 1%; width: 26vw; min-width: 8.5rem; }
  .work-copy { right: 0; bottom: 3rem; width: min(27rem, 65%); }
  .chapter-film { min-height: auto; padding: 7rem 0 8rem; }
  .film-note { grid-template-columns: 1fr; gap: 1rem; }
  .chapter-compare { min-height: auto; padding: 7rem 0 8rem; }
  .compare-header { grid-template-columns: 1fr; gap: 0.5rem; }
  .compare-header h2 { max-width: 10ch; }
  .compare-layout { grid-template-columns: 1fr; margin-top: 3rem; }
  .compare-side { position: static; }
  .compare-side p { max-width: 30rem; }
  .pk-grid { grid-template-columns: 1fr; }
  .pk-card { min-height: auto; }
  .pk-card.is-pick { transform: none; }
  .chapter-note { min-height: auto; padding: 7rem 0 8rem; grid-template-columns: 1fr; }
  .note-plate { justify-self: center; }
  .chapter-faq { min-height: auto; padding: 7rem 0 8rem; }
  .faq-list { margin-top: 3.5rem; }
  .interior-main { padding-top: 4.5rem; }
  .interior-hero { min-height: auto; padding: 5rem 0 6rem; }
  .archive-controls-inner { align-items: start; flex-direction: column; gap: 1rem; }
  .archive-grid-section { padding: 5rem 0 8rem; }
  .archive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .archive-item, .archive-item:nth-child(3n + 1), .archive-item:nth-child(5n) { grid-column: span 1; }
  .archive-item:nth-child(3n + 2) { transform: translateY(1rem) rotate(1.1deg); }
  .archive-item:nth-child(5n) img, .archive-item:nth-child(3n + 1) img { aspect-ratio: 1.2; }
  .packages-panel, .enquire-section { padding-bottom: 7rem; }
  .enquire-layout { grid-template-columns: 1fr; margin-top: 3rem; }
  .enquire-note { max-width: 20rem; justify-self: center; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem 1.4rem; }
  .footer-col:last-child { grid-column: 1 / -1; }
  .footer-lockup { font-size: clamp(3.9rem, 16vw, 8rem); }
  .footer-bottom { flex-direction: column; gap: 0.35rem; }
}
@media (max-width: 500px) {
  .site-header { padding-right: 0.8rem; padding-left: 0.8rem; }
  .brand-type > span { font-size: 0.78rem; letter-spacing: 0.1em; }
  .nav-disclosure.nav-inline nav { position: absolute; }
  .hero-copy h1 { font-size: clamp(3.7rem, 17vw, 5.8rem); }
  .hero-deck { font-size: 0.92rem; }
  .hero-collage { min-height: 25rem; }
  .hero-shot--main { width: 82%; height: 78%; }
  .hero-shot--portrait { right: 47%; width: 27%; height: 29%; }
  .hero-shot--film { width: 29%; }
  .hero-card { bottom: 11%; left: 13%; width: 58%; padding: 0.85rem; }
  .hero-card h2 { font-size: 1.45rem; }
  .check-row { align-items: stretch; flex-direction: column; }
  .check-row .button { width: 100%; }
  .chapter-work { min-height: 54rem; }
  .work-plate { top: 21rem; width: 88vw; }
  .work-note { top: 36rem; min-width: 7.5rem; }
  .work-copy { bottom: 1rem; width: 74%; padding: 0.85rem; }
  .film-stage { margin-top: 4rem; }
  .filmstrip-rail { gap: 1.25rem; }
  .film-frame { flex-basis: min(13rem, calc(100vw - 2.75rem)); }
  .film-frame figcaption { font-size: 0.62rem; }
  .film-bridge { width: calc(100% - .5rem); margin-top: 3.8rem; padding: .55rem .55rem .9rem; transform: rotate(-.8deg); }
  .film-bridge__frame { aspect-ratio: 1.38; }
  .film-bridge__stamp { top: .5rem; right: .5rem; max-width: 8rem; font-size: .46rem; }
  .film-bridge figcaption { flex-direction: column; gap: .3rem; font-size: .54rem; }
  .film-bridge figcaption span:last-child { text-align: left; }
  .compare-tool { transform: none; }
  .pk-controls, .book-form { grid-template-columns: 1fr; }
  .book-form .field-wide { grid-column: auto; }
  .form-status { grid-column: auto; }
  .archive-grid { gap: 0.8rem; }
  .archive-item { padding: 0.28rem 0.28rem 0.55rem; }
  .archive-item figcaption { display: block; font-size: 0.47rem; }
  .archive-item figcaption span:last-child { display: block; margin-top: 0.2rem; text-align: left; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-col:last-child { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.001ms !important; }
  html.js .is-reveal { opacity: 1; clip-path: none; transform: none; animation: none; }
  .hero-shot--main { transform: rotate(2.2deg); }
}
/* S301 parity pass — preserve the photography reference's editorial service strip and keep it
   comfortable on small screens before the collage begins. */
.photo-utility { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:.4rem 1.35rem; min-height:2.35rem; padding:.48rem 1.1rem; background:var(--canvas-lift); color:var(--ink); border-top:1px solid var(--line); border-bottom:1px solid var(--line); font:700 .64rem var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.photo-utility__label { color:var(--cyan); }
.photo-utility a { color:var(--orange); text-decoration:underline; text-underline-offset:.2em; }
@media (max-width:680px) { .photo-utility { justify-content:flex-start; gap:.25rem .75rem; padding:.58rem .8rem; letter-spacing:.05em; } .photo-utility > span:nth-child(2) { flex-basis:100%; } }
/* S301 mobile parity repair — reserve real header height so the utility strip never collides with navigation. */
@media (max-width:680px) {
  .site-header { position:relative; min-height:5.55rem; flex-wrap:nowrap; align-items:flex-start; padding:.8rem .8rem; background:var(--canvas); }
  .site-brand { min-width:0; flex:1 1 auto; }
  .site-brand .brand-type { min-width:0; }
  .site-brand .brand-type span { display:block; max-width:12ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .nav-disclosure { flex:0 0 auto; }
  .nav-disclosure summary { white-space:nowrap; }
  .photo-utility { position:relative; z-index:2; }
  .home-hero { padding-top:1.4rem; }
}

/* S301 collage repair — give the camera/detail role its own paper edge and keep it secondary
   on phones so the Haldenreed wordmark and hero portrait remain legible. */
.hero-shot--aperture { right:7%; top:49%; z-index:2; width:min(23%,10rem); height:18%; transform:rotate(4deg); }
.hero-shot--aperture figcaption { display:none; }
@media (max-width:680px) { .hero-shot--aperture { right:2%; top:57%; width:26%; height:15%; } }

/* S301 mobile parity closeout — keep the full rebrand legible; truncating the wordmark made the
   header look broken at 390px and removed the photography reference's paper-contact-sheet cue. */
@media (max-width:680px) {
  .site-brand { flex:0 1 auto; min-width:0; }
  .site-brand .brand-type { min-width:0; }
  .site-brand .brand-type span { display:block; max-width:none; overflow:visible; text-overflow:clip; white-space:nowrap; font-size:clamp(.68rem,3.4vw,.82rem); letter-spacing:.08em; }
  .site-brand .brand-type small { display:block; font-size:.42rem; }
  .nav-disclosure { margin-left:auto; }
}
.hero-shot--paper { left:19%; bottom:2%; z-index:4; width:min(22%,10rem); height:24%; transform:rotate(-3.5deg); }
.hero-shot--paper figcaption { display:none; }
@media (max-width:680px) { .hero-shot--paper { left:18%; bottom:1%; width:25%; height:23%; } }

/* S301 editorial-parity closeout — increase the paper/envelope and newsletter role
   so the opening collage carries the reference's distinctive sign-up surface. */
.hero-card { width:min(52%,21rem); padding:1.35rem 1.45rem 1.25rem; transform:rotate(-2.5deg); }
.hero-card::after { position:absolute; right:.9rem; bottom:.7rem; width:2.7rem; height:1px; background:#0a7f89; content:""; transform:rotate(-8deg); }
.hero-card h2 { max-width:10ch; font-size:2rem; }
.hero-card .hero-notes-form { margin-top:1rem; }
.hero-card .hero-notes-form button { min-width:4.1rem; }
@media (max-width:680px) { .hero-card { width:58%; padding:.95rem 1rem; } .hero-card h2 { font-size:1.5rem; } }

/* S301 nav occlusion repair — reserve the desktop header before the photography utility strip.
   The mobile route already uses the same flow-safe treatment above. */
@media (min-width:681px) {
  body.route-home .site-header { position:relative; background:var(--canvas); }
  body.route-home .home-hero { padding-top:5.1rem; }
}