:root {
  --yellow: #f7ca4d;
  --yellow-deep: #e9b42a;
  --ink: #242524;
  --graphite: #5d5e5c;
  --mist: #f0f0ee;
  --rule: #d9d9d6;
  --paper: #ffffff;
  --black: #000000;
  --gutter: clamp(20px, 4vw, 56px);
  --max: 1440px;
  --font: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --util: 40px;
  --top-main: 76px;
  --top: calc(var(--util) + var(--top-main));
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--top) + 12px); }
html.locked { overflow: hidden; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font); font-size: 17px; line-height: 1.6; font-stretch: 100%;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; font-weight: 800; font-stretch: 125%; letter-spacing: -0.02em; line-height: 1; }
h1 { font-size: clamp(44px, 7.4vw, 124px); line-height: .94; letter-spacing: -0.03em; }
h2 { font-size: clamp(32px, 4.4vw, 64px); }
h3 { font-size: clamp(22px, 2vw, 28px); font-stretch: 112%; letter-spacing: -0.01em; line-height: 1.1; }
.lead { font-size: clamp(19px, 1.6vw, 22px); line-height: 1.5; max-width: 38ch; }
.muted { color: var(--graphite); }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.dark :focus-visible, .viewer :focus-visible, .player :focus-visible, .foot :focus-visible { outline-color: var(--yellow); }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 999px; }
.skip:focus { top: 12px; }

/* Buttons and links */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px; border-radius: 999px; border: 2px solid transparent;
  font-weight: 700; font-size: 16px; font-stretch: 110%; text-decoration: none; cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s;
}
.btn:active { transform: translateY(1px); }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: #000; }
.btn-yellow { background: var(--yellow); color: var(--ink); }
.btn-yellow:hover { background: var(--yellow-deep); }
.btn-line { border-color: currentColor; background: transparent; }
.btn-line:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.dark .btn-line:hover { background: #fff; color: var(--ink); border-color: #fff; }
.btn-sm { min-height: 42px; padding: 0 18px; font-size: 15px; }
.link { font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.link:hover { text-decoration-color: var(--yellow-deep); }
.dark .link:hover { text-decoration-color: var(--yellow); }

/* Header */
.top {
  position: sticky; top: 0; z-index: 40;
  background: var(--paper); transition: background-color .3s, box-shadow .3s;
}
.util { background: var(--ink); color: #fff; height: var(--util); font-size: 14px; }
.util .wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.util-re { text-decoration: none; color: #e9e9e6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.util-re strong { color: var(--yellow); }
.util-re:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.util-icons { display: flex; gap: 4px; align-items: center; flex: none; }
.si { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; transition: background-color .2s; }
.si:hover { background: rgba(255, 255, 255, .14); }
.si img { width: 18px; height: 18px; filter: invert(1); }
.si svg, .si .fb svg { width: 18px; height: 18px; }
.si .fb { display: grid; place-items: center; }
.util-icons.big .si { width: 48px; height: 48px; background: var(--ink); }
.util-icons.big .si img, .util-icons.big .si svg { width: 22px; height: 22px; }
.ico { display: inline-grid; place-items: center; }
.ico svg { width: 20px; height: 20px; }
.search-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 16px 0 14px; border-radius: 999px; border: 2px solid currentColor; background: none; font-weight: 700; font-size: 15px; cursor: pointer; flex: none; }
.search-btn:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.top.on-yellow { background: var(--yellow); }
.top { transition: background-color .3s, box-shadow .3s, transform .35s cubic-bezier(.2, .7, .2, 1); }
.top.tuck { transform: translateY(-100%); }
.top.scrolled:not(.on-yellow) { box-shadow: 0 1px 0 var(--rule); }
.top-main { height: var(--top-main); display: flex; align-items: center; gap: 22px; }
.brand { display: block; flex: none; }
.brand img { height: 50px; width: auto; }
.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a {
  padding: 10px 12px; border-radius: 999px; text-decoration: none;
  font-weight: 600; font-size: 15.5px; font-stretch: 108%;
}
.nav a:hover { background: rgba(36, 37, 36, .08); }
.nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--ink); border-radius: 0; }
.top-main .btn { min-height: 46px; padding: 0 22px; font-size: 15px; }
.top.on-yellow .btn-yellow { background: var(--ink); color: #fff; }
.menu-btn {
  display: none; margin-left: auto; min-height: 46px; padding: 0 20px; border-radius: 999px;
  border: 2px solid var(--ink); background: transparent; font-weight: 700; cursor: pointer;
}

/* Phone menu */
.menu {
  position: fixed; inset: 0; z-index: 60; background: var(--yellow); display: none;
  flex-direction: column; padding: 18px var(--gutter) calc(28px + env(safe-area-inset-bottom));
  overflow-y: auto;
}
.menu.open { display: flex; }
.menu-head { display: flex; align-items: center; justify-content: space-between; height: 48px; }
.menu-head img { height: 40px; width: auto; }
.menu nav { display: flex; flex-direction: column; margin: 36px 0 28px; }
.menu nav a {
  font-size: clamp(34px, 10vw, 52px); font-weight: 800; font-stretch: 125%; letter-spacing: -0.02em;
  line-height: 1.12; text-decoration: none; padding: 4px 0;
}
.menu nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: 6px; }
.menu-acts { display: flex; gap: 10px; flex-wrap: wrap; }
.menu-re { margin-top: 22px; text-decoration: none; font-size: 17px; }
.menu-re strong { text-decoration: underline; text-underline-offset: 4px; }
.menu-contact { display: flex !important; align-items: center; gap: 14px; flex-wrap: wrap; }
.menu-contact { margin-top: auto; padding-top: 28px; font-size: 16px; display: grid; gap: 6px; }
.menu-contact a { text-decoration: none; font-weight: 600; }

/* Home hero */
.hero { background: var(--yellow); padding: clamp(18px, 3vw, 40px) 0 clamp(36px, 5vw, 72px); overflow: hidden; }
.hero h1 { font-size: clamp(46px, 7.7vw, 132px); white-space: nowrap; margin-bottom: clamp(24px, 3.4vw, 48px); }
.hero-grid { display: grid; grid-template-columns: minmax(260px, 4fr) 8fr; gap: clamp(24px, 4vw, 64px); align-items: stretch; }
.hero-side { display: flex; flex-direction: column; }
.hero-grid > * { min-width: 0; }
.hero-side .lead { margin-bottom: 28px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: auto; padding-top: 28px; }
.lanes-index { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.lanes-index li { border-bottom: 1px solid rgba(36, 37, 36, .25); }
.lanes-index button {
  width: 100%; display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 12px 0; background: none; border: 0; cursor: pointer; text-align: left;
  font-size: clamp(22px, 2.1vw, 30px); font-weight: 700; font-stretch: 118%; letter-spacing: -0.01em; line-height: 1.15;
  color: rgba(36, 37, 36, .55); position: relative; transition: color .2s;
}
.lanes-index button:hover, .lanes-index button[aria-selected="true"] { color: var(--ink); }
.lanes-index button small { font-size: 14px; font-weight: 600; font-stretch: 100%; letter-spacing: 0; opacity: 0; transition: opacity .2s; }
.lanes-index button[aria-selected="true"] small { opacity: 1; }
.lanes-index button .bar { position: absolute; left: 0; bottom: -1px; height: 3px; width: 0; background: var(--ink); }
.lanes-index button[aria-selected="true"] .bar { width: 100%; }
.lanes-index.timed button[aria-selected="true"] .bar { width: 0; animation: grow var(--dwell, 6s) linear forwards; }
@keyframes grow { to { width: 100%; } }

.hero-stage { position: relative; height: clamp(320px, min(64vh, 52vw), 680px); }
.print {
  position: absolute; left: 0; bottom: 0; overflow: hidden; background: var(--ink);
  box-shadow: 0 40px 70px -40px rgba(36, 37, 36, .55), 0 2px 6px rgba(36, 37, 36, .12);
  transition: width .7s cubic-bezier(.65, 0, .25, 1), height .7s cubic-bezier(.65, 0, .25, 1), transform .5s cubic-bezier(.2, .7, .2, 1);
  transform-origin: 50% 60%; will-change: transform;
}
.print::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(600px circle at var(--gx, 30%) var(--gy, 20%), rgba(255,255,255,.12), transparent 45%); }
.print img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .7s ease; }
.print img.on { opacity: 1; }
.print a { position: absolute; inset: 0; z-index: 2; }
.hero-cap { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-top: 14px; font-size: 15px; }
.hero-cap span { color: rgba(36, 37, 36, .75); }
.hero.intro .print { animation: rise .9s cubic-bezier(.2, .7, .2, 1) both; }
.hero.intro h1 { animation: slide .8s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes rise { from { transform: translateY(28px); opacity: 0; } }
@keyframes slide { from { transform: translateX(-24px); opacity: 0; } }

/* Sections */
.sec { padding: clamp(64px, 9vw, 128px) 0; }
.sec-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(28px, 4vw, 56px); }
.sec-head p { margin: 0; max-width: 44ch; color: var(--graphite); }
.mist { background: var(--mist); }
.dark { background: var(--black); color: #fff; }
.dark .muted, .dark .sec-head p { color: #b9bab8; }

/* What I shoot rows */
.lane-rows { display: grid; gap: clamp(56px, 8vw, 112px); }
.lane-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr; column-gap: clamp(16px, 2vw, 28px); row-gap: 28px; }
.lane-big { grid-column: 1 / 8; grid-row: 1 / 3; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--mist); }
.lane-big img, .lane-smalls img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.lane-big:hover img { transform: scale(1.02); }
.lane-text { grid-column: 9 / 13; grid-row: 1; }
.lane-text h3 { font-size: clamp(30px, 3.2vw, 48px); font-stretch: 125%; font-weight: 800; margin-bottom: 14px; }
.lane-text p { color: var(--graphite); max-width: 36ch; }
.lane-smalls { grid-column: 9 / 13; grid-row: 2; align-self: end; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.lane-smalls a { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--mist); }
.lane-row.flip .lane-big { grid-column: 6 / 13; }
.lane-row.flip .lane-text, .lane-row.flip .lane-smalls { grid-column: 1 / 5; }
.incl { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 6px; }
.incl li { padding-left: 22px; position: relative; }
.incl li::before { content: ''; position: absolute; left: 0; top: .52em; width: 10px; height: 10px; border-radius: 50%; background: var(--yellow); box-shadow: inset 0 0 0 2px var(--ink); }

/* Films */
.films-feature { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(20px, 3vw, 44px); align-items: start; }
.film { display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; color: inherit; }
.film-img { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #1a1a1a; }
.film-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1), opacity .3s; }
.film:hover .film-img img { transform: scale(1.03); }
.play {
  position: absolute; left: 18px; bottom: 18px; width: 64px; height: 64px; border-radius: 50%;
  background: var(--yellow); display: grid; place-items: center; transition: transform .25s;
}
.play::before { content: ''; margin-left: 5px; border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent var(--ink); }
.film:hover .play { transform: scale(1.08); }
.film-img video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s; }
.film.previewing .film-img video { opacity: 1; }
.film.previewing .play { transform: scale(.85); opacity: .9; }
.film-len { position: absolute; right: 12px; bottom: 12px; padding: 4px 9px; border-radius: 999px; background: rgba(0,0,0,.6); color: #fff; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.film-text { padding-top: 14px; }
.film-text strong { display: block; font-size: 20px; font-stretch: 112%; line-height: 1.2; }
.film-text span { display: block; font-size: 15px; color: var(--graphite); }
.dark .film-text span { color: #b9bab8; }
.film-big .film-text strong { font-size: clamp(22px, 2.2vw, 30px); font-stretch: 120%; font-weight: 800; }
.film-big .play { width: 84px; height: 84px; left: 24px; bottom: 24px; }
.film-big .play::before { border-width: 14px 0 14px 23px; }
.film-list { display: grid; gap: 18px; }
.film-list .film { display: grid; grid-template-columns: 44% 1fr; gap: 16px; align-items: center; }
.film-list .film-text { padding: 0; }
.film-list .play { width: 40px; height: 40px; left: 10px; bottom: 10px; }
.film-list .play::before { border-width: 7px 0 7px 11px; margin-left: 3px; }
.film-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: clamp(28px, 3vw, 44px) clamp(20px, 2.4vw, 32px); }

/* Photo wall (balanced masonry) */
.wall { display: flex; gap: clamp(10px, 1.4vw, 18px); align-items: flex-start; }
.wcol { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: clamp(10px, 1.4vw, 18px); }
.wall:not([data-n]) { display: grid; grid-template-columns: repeat(3, 1fr); }
.tile { display: block; width: 100%; padding: 0; border: 0; background: var(--mist); cursor: zoom-in; overflow: hidden; position: relative; }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .7, .2, 1), opacity .5s ease; }
.tile:hover img { transform: scale(1.035); }
.tile::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 0 0 var(--yellow); transition: box-shadow .25s; pointer-events: none; }
.tile:hover::after, .tile:focus-visible::after { box-shadow: inset 0 0 0 4px var(--yellow); }
.tile img, .reel-item img, .lane-smalls img, .lane-big img, .col-card img, .lh-img img, .about-photo img { opacity: 0; }
.tile img.in, .reel-item img.in, .lane-smalls img.in, .lane-big img.in, .col-card img.in, .lh-img img.in, .about-photo img.in { opacity: 1; }

/* Reel of favourites */
.reel-sec { overflow: hidden; }
.reel { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; cursor: grab; padding: 0 var(--gutter); scroll-padding: 0 var(--gutter); outline-offset: -3px; overscroll-behavior-x: contain; }
.reel::-webkit-scrollbar { display: none; }
.reel.grab { cursor: grabbing; }
.reel.grab .reel-item { pointer-events: none; }
.reel-track { display: flex; gap: clamp(10px, 1.2vw, 18px); width: max-content; }
.reel-item { height: clamp(300px, 58vh, 620px); padding: 0; border: 0; background: var(--mist); overflow: hidden; flex: none; cursor: inherit; position: relative; }
.reel-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .7, .2, 1), opacity .5s ease; user-select: none; -webkit-user-drag: none; }
.reel-item:hover img { transform: scale(1.03); }
.reel-ui { display: flex; align-items: center; gap: 16px; margin: 22px auto 0; max-width: var(--max); padding: 0 var(--gutter); }
.reel-bar { flex: 1; height: 3px; background: var(--rule); position: relative; overflow: hidden; }
.reel-bar span { position: absolute; inset: 0; background: var(--ink); transform-origin: left; transform: scaleX(.06); }
.round { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--ink); background: none; font-size: 20px; font-weight: 700; cursor: pointer; display: grid; place-items: center; }
.round:hover { background: var(--yellow); }

/* Day to dusk */
.dusk { position: relative; overflow: hidden; background: var(--ink); touch-action: pan-y; cursor: ew-resize; user-select: none; }
.dusk img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 1 !important; }
.dusk-night { position: absolute; inset: 0; clip-path: inset(0 0 0 50%); }
.dusk-handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 0; }
.dusk-handle::before { content: ''; position: absolute; top: 0; bottom: 0; left: -1.5px; width: 3px; background: var(--yellow); }
.dusk-handle span { position: absolute; top: 50%; left: 0; width: 54px; height: 54px; translate: -50% -50%; border-radius: 50%; background: var(--yellow); box-shadow: 0 6px 20px rgba(0,0,0,.35); }
.dusk-handle span::before, .dusk-handle span::after { content: ''; position: absolute; top: 50%; translate: 0 -50%; border-style: solid; border-color: transparent; }
.dusk-handle span::before { left: 11px; border-width: 7px 10px 7px 0; border-right-color: var(--ink); }
.dusk-handle span::after { right: 11px; border-width: 7px 0 7px 10px; border-left-color: var(--ink); }
.dusk-handle:focus-visible { outline: none; }
.dusk-handle:focus-visible span { outline: 3px solid #fff; outline-offset: 3px; }
.dusk-tag { position: absolute; bottom: 14px; padding: 6px 12px; border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; font-size: 14px; font-weight: 700; backdrop-filter: blur(6px); }
.dusk-tag.day { left: 14px; } .dusk-tag.night { right: 14px; }
.lane-big.is-dusk { aspect-ratio: auto; overflow: visible; background: none; }
.lane-big.is-dusk .dusk { aspect-ratio: 4 / 3 !important; }
.dusk-cap { margin: 10px 0 0; font-size: 15px; color: var(--graphite); }
.dusk-sec .dusk { max-height: 82vh; margin: 0 auto; }
.sub { margin: clamp(36px, 4vw, 56px) 0 18px; font-size: 20px; font-stretch: 112%; font-weight: 700; letter-spacing: -0.01em; }
.sub small { font-size: 15px; font-weight: 500; color: var(--graphite); font-stretch: 100%; margin-left: 10px; letter-spacing: 0; }

/* Steps */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 2.6vw, 40px); counter-reset: s; }
.steps li { counter-increment: s; border-top: 2px solid var(--ink); padding-top: 18px; }
.steps li::before {
  content: counter(s); display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 22px;
  border-radius: 50%; background: var(--yellow); font-weight: 800; font-size: 19px;
}
.steps h3 { font-size: 22px; margin-bottom: 10px; }
.steps p { color: var(--graphite); margin: 0; }

/* Reviews */
.reviews { display: grid; grid-template-columns: 7fr 4fr; gap: clamp(28px, 5vw, 80px); align-items: end; }
.quote { margin: 0; }
.quote blockquote { margin: 0 0 22px; font-size: clamp(26px, 3vw, 42px); font-weight: 600; font-stretch: 112%; line-height: 1.22; letter-spacing: -0.015em; }
.stars { color: var(--ink); letter-spacing: 4px; font-size: 22px; margin-bottom: 18px; display: block; }
.stars span { color: var(--yellow-deep); }
.quote figcaption { font-weight: 700; }
.more-quotes { display: grid; gap: 28px; margin-top: 40px; }
.more-quotes blockquote { font-size: 20px; font-weight: 500; }
.review-side p { color: var(--graphite); }

/* Contact band */
.contact { background: var(--yellow); }
.contact-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(28px, 5vw, 88px); }
.contact h2 { margin-bottom: 20px; }
.contact .lead { margin-bottom: 32px; }
.ways { display: grid; gap: 2px; border-top: 2px solid var(--ink); }
.ways a { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid rgba(36, 37, 36, .25); text-decoration: none; font-weight: 600; }
.ways a span:last-child { color: rgba(36, 37, 36, .75); font-weight: 500; text-align: right; overflow-wrap: anywhere; }
.ways a:hover span:first-child { text-decoration: underline; text-underline-offset: 4px; }

/* Forms */
.form { display: grid; gap: 18px; background: var(--paper); padding: clamp(22px, 3vw, 40px); border-radius: 28px; }
.form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: grid; gap: 7px; }
.field label { font-weight: 700; font-size: 15px; }
.field label small { font-weight: 500; color: var(--graphite); }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 16px; color: var(--ink); background: var(--mist);
  border: 2px solid transparent; border-radius: 14px; padding: 13px 14px; transition: border-color .2s, background-color .2s;
}
.field textarea { resize: vertical; min-height: 140px; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 22px) 52%, calc(100% - 16px) 52%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 42px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); background-color: #fff; }
.form .btn { justify-self: start; }
.status { min-height: 1.4em; margin: 0; font-weight: 600; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: 14px; color: var(--graphite); margin: 0; }

/* Lane page */
.lane-hero { padding: clamp(28px, 4vw, 56px) 0 clamp(48px, 6vw, 88px); }
.lh-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(28px, 5vw, 80px); align-items: center; }
.lh-text h1 { font-size: clamp(40px, 5.4vw, 88px); margin-bottom: 22px; }
.lh-text .lead { margin-bottom: 26px; color: var(--graphite); }
.lh-mark { height: 92px; width: auto; margin-bottom: 22px; }
.lh-img { background: var(--mist); overflow: hidden; }
.lh-img img { width: 100%; }
.proof { margin: 26px 0 0; padding: 16px 18px; background: var(--mist); border-radius: 16px; font-size: 15.5px; max-width: 46ch; }
.jump {
  position: sticky; top: 0; z-index: 20; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  margin: 0 calc(-1 * var(--gutter)); padding: 12px var(--gutter); background: rgba(255,255,255,.92); backdrop-filter: blur(10px);
  border-top: 2px solid var(--ink); transition: top .35s cubic-bezier(.2, .7, .2, 1);
}
.top:not(.tuck) ~ main .jump { top: var(--top); }
.jump::-webkit-scrollbar { display: none; }
.jump a { flex: none; text-decoration: none; font-weight: 600; padding: 9px 16px; border-radius: 999px; background: var(--mist); transition: background-color .2s, color .2s; }
.jump a:hover { background: var(--yellow); }
.jump a.on { background: var(--ink); color: #fff; }
.col { padding-top: clamp(56px, 7vw, 96px); }
.col-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 26px; }
.col-head p { margin: 0; color: var(--graphite); }

/* Work index */
.work-lane { padding-top: clamp(48px, 6vw, 80px); }
.work-lane h2 a { text-decoration: none; }
.work-lane h2 a:hover { text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: 8px; }
.col-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 28px 20px; margin-top: 26px; }
.col-card { text-decoration: none; display: block; }
.col-card .ci { aspect-ratio: 4 / 3; overflow: hidden; background: var(--mist); margin-bottom: 12px; }
.col-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.col-card:hover img { transform: scale(1.03); }
.col-card strong { display: block; font-size: 20px; font-stretch: 112%; line-height: 1.2; }
.col-card span { color: var(--graphite); font-size: 15px; }

/* About */
.about-grid { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(28px, 6vw, 96px); align-items: center; padding-top: clamp(28px, 4vw, 56px); padding-bottom: clamp(56px, 7vw, 96px); }
.about-photo { max-height: calc(100vh - var(--top) - 40px); overflow: hidden; }
.about-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; max-height: calc(100vh - var(--top) - 40px); }
.film-grid + .sub { margin-top: clamp(56px, 6vw, 88px) !important; }
.about-grid h1 { margin-bottom: 26px; }
.about-grid p { max-width: 52ch; }
.about-photo { background: var(--ink); }

/* Page titles */
.page-head { padding: clamp(28px, 4vw, 56px) 0 clamp(28px, 3vw, 44px); }
.page-head h1 { font-size: clamp(44px, 6.4vw, 104px); margin-bottom: 18px; }
.page-head p { color: var(--graphite); max-width: 52ch; margin: 0; }

/* Footer */
.foot { background: var(--ink); color: #fff; padding: clamp(56px, 7vw, 88px) 0 calc(28px + env(safe-area-inset-bottom)); }
.foot-grid { display: grid; grid-template-columns: 4fr repeat(3, 2fr); gap: 32px; }
.foot img { height: 52px; width: auto; margin-bottom: 18px; }
.foot p { color: #b9bab8; max-width: 34ch; }
.foot h2 { font-size: 15px; font-stretch: 110%; letter-spacing: 0; margin-bottom: 14px; color: var(--yellow); }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot a { text-decoration: none; overflow-wrap: anywhere; }
.foot a:hover { text-decoration: underline; text-underline-offset: 4px; }
.foot-base { margin-top: 56px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .16); font-size: 14px; color: #b9bab8; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }

/* Phone booking dock */
.dock {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 30;
  display: none; transform: translateY(140%); transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}
.dock .btn { width: 100%; box-shadow: 0 10px 30px rgba(36, 37, 36, .35); }
.dock.show { transform: none; }

/* Viewer */
dialog { padding: 0; border: 0; }
.viewer, .player { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; background: #000; color: #fff; }
.viewer::backdrop, .player::backdrop, .review-dialog::backdrop { background: rgba(0, 0, 0, .86); }
.viewer[open] { display: grid; grid-template-rows: auto 1fr auto auto; }
.v-strip { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 0 var(--gutter) calc(14px + env(safe-area-inset-bottom)); justify-content: safe center; }
.v-strip::-webkit-scrollbar { display: none; }
.v-strip button { flex: none; width: 64px; height: 48px; padding: 0; border: 0; background: #222; opacity: .45; cursor: pointer; overflow: hidden; transition: opacity .2s, outline-color .2s; outline: 2px solid transparent; outline-offset: 2px; }
.v-strip button img { width: 100%; height: 100%; object-fit: cover; }
.v-strip button:hover { opacity: .8; }
.v-strip button.on { opacity: 1; outline-color: var(--yellow); }
.v-stage.zoomed { cursor: zoom-out; overflow: hidden; }
.v-stage:not(.zoomed) .v-img { cursor: zoom-in; }
.v-img { transition: transform .35s cubic-bezier(.2, .7, .2, 1), opacity .2s; }
.v-top, .p-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px var(--gutter); }
.v-count { font-weight: 600; color: #b9bab8; font-variant-numeric: tabular-nums; }
.close-btn { min-height: 44px; padding: 0 20px; border-radius: 999px; border: 2px solid rgba(255, 255, 255, .6); background: none; color: #fff; font-weight: 700; cursor: pointer; }
.close-btn:hover { background: #fff; color: #000; }
.v-stage { position: relative; min-height: 0; overflow: hidden; touch-action: none; }
.v-img { position: absolute; top: 0; bottom: 0; left: clamp(0px, 6vw, 96px); right: clamp(0px, 6vw, 96px); width: calc(100% - 2 * clamp(0px, 6vw, 96px)); height: 100%; max-width: none; object-fit: contain; transition: opacity .2s; }
.v-img.loading { opacity: .35; }
.v-prev, .v-next {
  position: absolute; top: 50%; translate: 0 -50%; width: 56px; height: 56px; border-radius: 50%;
  border: 0; background: rgba(255, 255, 255, .12); cursor: pointer; display: grid; place-items: center;
}
.v-prev { left: clamp(8px, 1.6vw, 24px); }
.v-next { right: clamp(8px, 1.6vw, 24px); }
.v-prev:hover, .v-next:hover { background: var(--yellow); }
.v-prev::before, .v-next::before { content: ''; width: 12px; height: 12px; border: solid #fff; border-width: 0 0 3px 3px; transform: rotate(45deg); margin-left: 5px; }
.v-next::before { transform: rotate(-135deg); margin: 0 5px 0 0; }
.v-prev:hover::before, .v-next:hover::before { border-color: var(--ink); }
.v-cap { margin: 0; padding: 12px var(--gutter); color: #d6d6d4; text-align: center; font-size: 15px; }

/* Film player */
.player[open] { display: flex; flex-direction: column; }
.p-head h2 { font-size: clamp(20px, 2.2vw, 30px); font-stretch: 118%; }
.p-head p { margin: 4px 0 0; color: #b9bab8; font-size: 15px; }
.p-body { flex: 1; min-height: 0; display: grid; place-items: center; padding: 0 var(--gutter); }
.p-video { width: 100%; max-height: 100%; aspect-ratio: 16 / 9; background: #000; }
.p-foot { padding: 14px var(--gutter) calc(18px + env(safe-area-inset-bottom)); margin: 0; font-size: 15px; }
.p-foot a { color: #fff; }

/* Review dialog */
.review-dialog { width: min(560px, calc(100% - 24px)); border-radius: 28px; background: var(--paper); color: var(--ink); }
.review-dialog .form { border-radius: 28px; }
.review-dialog .rd-head { display: flex; justify-content: space-between; align-items: start; gap: 16px; }
.review-dialog h2 { font-size: 30px; }
.rd-close { min-height: 40px; padding: 0 16px; border-radius: 999px; border: 2px solid var(--ink); background: none; font-weight: 700; cursor: pointer; }

/* Thank you */
.thanks { min-height: 70vh; display: grid; align-items: center; background: var(--yellow); }

/* Responsive */
@media (max-width: 1180px) {
  .nav a { padding: 10px 7px; font-size: 15px; }
  .top-main { gap: 12px; }
  .search-lbl { display: none; }
  .search-btn { padding: 0; width: 46px; justify-content: center; }
}
@media (max-width: 1020px) {
  :root { --top-main: 66px; }
  .nav, .top-main .btn { display: none; }
  .search-btn { margin-left: auto; }
  .menu-btn { margin-left: 0; }
  .menu-btn { display: inline-flex; align-items: center; }
  .brand img { height: 38px; }
  .hero h1 { white-space: normal; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-side { order: 2; }
  .hero-stage { order: 1; height: clamp(300px, 72vw, 640px); }
  .hero-ctas { margin-top: 0; }
  .print { top: 0; bottom: auto; }
  .hero-cap-row { display: none; }
  .lane-row, .lane-row.flip { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .lane-row .lane-big, .lane-row.flip .lane-big { grid-column: 1 / 3; grid-row: 1; }
  .lane-row .lane-text, .lane-row.flip .lane-text { grid-column: 1 / 3; grid-row: 2; }
  .lane-row .lane-smalls, .lane-row.flip .lane-smalls { grid-column: 1 / 3; grid-row: 3; }
  .films-feature { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr 1fr; row-gap: 36px; }
  .reviews, .contact-grid, .lh-grid, .about-grid { grid-template-columns: 1fr; }
  .lh-img { order: -1; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-grid > :first-child { grid-column: 1 / -1; }
  .dock { display: block; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .hero { padding-top: 10px; }
  .hero h1 { font-size: clamp(42px, 13.4vw, 72px); margin-bottom: 20px; }
  .hero-stage { height: min(112vw, 54vh); }
  .hero-cap-row > span:first-child { display: none; }
  .lanes-index { display: flex; gap: 6px; border: 0; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); }
  .lanes-index::-webkit-scrollbar { display: none; }
  .lanes-index li { border: 0; flex: none; }
  .lanes-index button { width: auto; padding: 9px 16px; border-radius: 999px; font-size: 16px; font-stretch: 110%; border: 2px solid rgba(36, 37, 36, .3); color: var(--ink); }
  .lanes-index button[aria-selected="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
  .lanes-index button small, .lanes-index button .bar { display: none; }
  .hero-cap { font-size: 14px; flex-direction: column; gap: 4px; }
  .hero-side .lead { margin: 22px 0 18px; }
  .reel-item { height: min(72vh, 118vw); }
  .reel-ui .round { width: 42px; height: 42px; }
  .dusk-handle span { width: 46px; height: 46px; }
  .steps { grid-template-columns: 1fr; }
  .form .row2 { grid-template-columns: 1fr; }
  .form { border-radius: 22px; }
  .film-list .film { grid-template-columns: 40% 1fr; }
  .film-text strong { font-size: 17px; }
  .foot-grid { grid-template-columns: 1fr; }
  .lh-mark { height: 72px; }
  .v-prev, .v-next { display: none; }
  .v-img { left: 0; right: 0; width: 100%; }
}
/* Breadcrumbs */
.crumbs { display: flex; align-items: center; gap: 14px; padding-top: 18px; padding-bottom: 4px; font-size: 15px; }
.back { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px 0 10px; border-radius: 999px; border: 2px solid var(--ink); background: none; font-weight: 700; cursor: pointer; }
.back:hover { background: var(--ink); color: #fff; }
.back svg { width: 18px; height: 18px; }
.crumbs ol { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; color: var(--graphite); min-width: 0; }
.crumbs li + li::before { content: '/'; margin: 0 8px; color: var(--rule); }
.crumbs a { text-decoration: none; font-weight: 600; color: var(--ink); }
.crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* What do you need photographed? */
.find-sec { padding: clamp(48px, 6vw, 88px) 0 0; }
.find-top > * { min-width: 0; }
.find-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 520px); gap: 20px 40px; align-items: end; margin-bottom: 26px; }
.find-top h2 { font-size: clamp(30px, 3.6vw, 52px); }
.find-box { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 0 18px; border-radius: 999px; border: 2px solid var(--ink); background: #fff; cursor: text; font-size: 16px; color: var(--graphite); text-align: left; }
.find-box:hover { box-shadow: 0 0 0 4px var(--yellow); }
.find-box svg { flex: none; color: var(--ink); }
.find-box span { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.find-box kbd { font: inherit; font-size: 13px; font-weight: 700; border: 1px solid var(--rule); border-radius: 6px; padding: 1px 8px; color: var(--ink); }
.needs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.need { display: inline-flex; align-items: center; gap: 10px; padding: 5px 16px 5px 5px; border-radius: 999px; background: var(--mist); text-decoration: none; font-weight: 600; font-size: 15.5px; transition: background-color .2s, transform .2s; }
.need:hover { background: var(--yellow); transform: translateY(-1px); }
.need-img { width: 38px; height: 38px; border-radius: 50%; overflow: hidden; flex: none; background: var(--ink); display: grid; place-items: center; }
.need-img img { width: 100%; height: 100%; object-fit: cover; opacity: 1 !important; }
.need-ico { color: var(--yellow); font-size: 13px; }

/* Real estate hand-off */
.re-out { margin: 18px 0 0; }
.re-banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 16px; padding: 16px 18px 16px 22px; border-radius: 20px; background: var(--yellow); text-decoration: none; }
.re-banner:hover .btn { background: #000; }
.ext-card .ci { display: grid; place-items: center; background: var(--yellow); }
.ext-card .ci span { font-size: clamp(22px, 2vw, 28px); font-weight: 800; font-stretch: 120%; color: var(--ink); }
.re-note { margin: 0; padding: 12px 14px; border-radius: 14px; background: #fff5d6; font-size: 15px; }

/* Previous / next service */
.lane-next { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; margin-top: clamp(48px, 6vw, 80px); padding-top: 24px; border-top: 2px solid var(--ink); }
.lane-next a { text-decoration: none; padding: 14px 18px; border-radius: 18px; background: var(--mist); display: grid; gap: 2px; transition: background-color .2s; }
.lane-next a:hover { background: var(--yellow); }
.lane-next small { color: var(--graphite); font-size: 13px; font-weight: 600; }
.lane-next strong { font-size: clamp(18px, 1.8vw, 24px); font-stretch: 115%; }
.lane-next .mid { text-align: center; }
.lane-next .nx { text-align: right; }

/* Search panel */
.finder { width: min(760px, calc(100% - 24px)); max-height: min(86vh, 900px); margin: 7vh auto auto; border-radius: 26px; background: #fff; color: var(--ink); overflow: hidden; }
.finder::backdrop { background: rgba(36, 37, 36, .55); backdrop-filter: blur(4px); }
.finder[open] { display: flex; flex-direction: column; }
.f-head { display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 20px; border-bottom: 1px solid var(--rule); }
.f-head input { flex: 1; min-width: 0; border: 0; font: inherit; font-size: 19px; padding: 10px 0; outline: none; background: none; }
.f-head input::-webkit-search-cancel-button { cursor: pointer; }
.f-close { min-height: 40px; padding: 0 16px; border-radius: 999px; border: 2px solid var(--ink); background: none; font-weight: 700; cursor: pointer; }
.f-body { overflow-y: auto; padding: 18px 20px 24px; }
.f-hint { margin: 0 0 14px; color: var(--graphite); }
.needs.in-finder .need { font-size: 15px; }
.f-h { font-size: 15px; font-stretch: 105%; letter-spacing: 0; margin: 8px 0 10px; color: var(--graphite); }
.f-h small { font-weight: 600; margin-left: 6px; }
.f-list { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 4px; }
.f-item { display: flex; align-items: center; gap: 14px; padding: 8px; border-radius: 14px; text-decoration: none; }
.f-item:hover, .f-item.on { background: var(--mist); }
.f-item.on { box-shadow: inset 0 0 0 2px var(--ink); }
.f-th { width: 56px; height: 56px; border-radius: 10px; overflow: hidden; flex: none; background: var(--mist); display: grid; place-items: center; }
.f-th img { width: 100%; height: 100%; object-fit: cover; opacity: 1 !important; }
.f-item strong { display: block; font-size: 17px; line-height: 1.25; }
.f-item small { display: block; color: var(--graphite); font-size: 14px; }
.f-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; margin-bottom: 14px; }
.f-tile { aspect-ratio: 1; }
.f-tile img { opacity: 1 !important; }
.f-none { padding: 8px 0; }
.f-more { margin: 4px 0 0; color: var(--graphite); font-size: 15px; }

/* Back to top */
.totop { position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 29; width: 50px; height: 50px; border-radius: 50%; border: 0; background: var(--ink); color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 8px 24px rgba(0,0,0,.25); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .25s, transform .25s; }
.totop.show { opacity: 1; transform: none; pointer-events: auto; }
.totop:hover { background: #000; }

/* Page and photo transitions */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .32s; }
::view-transition-group(photo) { animation-duration: .45s; animation-timing-function: cubic-bezier(.2, .7, .2, 1); z-index: 100; }
::view-transition-old(photo), ::view-transition-new(photo) { height: 100%; object-fit: contain; animation-duration: .45s; }

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

/* Later overrides for the search, breadcrumbs and top bar */
@media (max-width: 1020px) {
  .find-top { grid-template-columns: minmax(0, 1fr); }
  .totop { bottom: calc(84px + env(safe-area-inset-bottom)); }
}
@media (max-width: 640px) {
  .hide-sm { display: none; }
  .util .si { width: 34px; height: 34px; }
  .need { font-size: 14.5px; padding-right: 13px; }
  .need-img { width: 32px; height: 32px; }
  .finder { width: 100%; max-width: none; max-height: none; height: 100%; margin: 0; border-radius: 0; }
  .f-head { padding-top: calc(12px + env(safe-area-inset-top)); }
  .f-head input { font-size: 17px; }
  .lane-next { grid-template-columns: 1fr 1fr; }
  .lane-next .mid { display: none; }
  .crumbs { padding-top: 12px; }
  .totop { right: 12px; width: 44px; height: 44px; }
  .find-box kbd { display: none; }
}

/* Brand icons (official glyphs from Simple Icons), drawn in the text colour */
.bi { display: block; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.bi-ig { --m: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077'/%3E%3C/svg%3E"); }
.bi-wa { --m: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z'/%3E%3C/svg%3E"); }

/* ---------- Round 4: clearer sections and structure ---------- */
.shoot-sec { padding-top: clamp(64px, 9vw, 128px); }
.shoot-sec .sec-head { margin-bottom: clamp(24px, 3vw, 40px); }
.lane-band { padding: clamp(48px, 6vw, 88px) 0; border-top: 1px solid var(--rule); }
.lane-band.alt { background: var(--mist); }
.lane-band:last-child { border-bottom: 1px solid var(--rule); }
.lane-row .lane-text { grid-column: 9 / 13; grid-row: 1; }
.lane-row .lane-big { grid-column: 1 / 8; grid-row: 1 / 3; }
.lane-row .lane-smalls { grid-column: 9 / 13; grid-row: 2; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.lane-row.flip .lane-big { grid-column: 6 / 13; }
.lane-row.flip .lane-text, .lane-row.flip .lane-smalls { grid-column: 1 / 5; }
.lane-big.tile { aspect-ratio: 4 / 3; cursor: zoom-in; }
.lane-small { aspect-ratio: 4 / 5; }
.lane-small img, .lane-big.tile img { width: 100%; height: 100%; object-fit: cover; }
.lane-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 0; }
.lane-text h3 { margin-bottom: 12px; }
.print-go { position: absolute; left: 14px; bottom: 14px; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--ink); font-weight: 700; font-size: 14px; box-shadow: 0 4px 14px rgba(0,0,0,.2); transition: background-color .2s; }
.print a:hover .print-go { background: var(--yellow); }
.util-icons.xl { gap: 12px; margin-top: 4px; }
.util-icons.xl .si { width: 58px; height: 58px; background: var(--ink); color: #fff; }
.util-icons.xl .si:hover { background: #000; transform: translateY(-2px); }
.util-icons.xl .bi, .util-icons.xl svg { width: 24px; height: 24px; }
.util-icons.big-foot { gap: 10px; flex-wrap: wrap; }
.util-icons.big-foot .si { width: 50px; height: 50px; background: rgba(255,255,255,.1); }
.util-icons.big-foot .si:hover { background: var(--yellow); color: var(--ink); }
.util-icons.big-foot .bi, .util-icons.big-foot svg { width: 22px; height: 22px; }
.util-icons.big .bi { width: 22px; height: 22px; }
.v-acts { display: flex; align-items: center; gap: 10px; }
.v-album { min-height: 44px; display: inline-flex; align-items: center; padding: 0 18px; border-radius: 999px; background: var(--yellow); color: var(--ink); font-weight: 700; text-decoration: none; }
.v-album:hover { background: #fff; }
.v-album[hidden] { display: none; }
.col { padding-top: 30px; margin-top: clamp(48px, 6vw, 88px); border-top: 2px solid var(--ink); }
.jump + .col { margin-top: clamp(28px, 3vw, 40px); border-top: 0; padding-top: 0; }
.col-head { align-items: end; }
.col-head p { margin-top: 8px; }
.sub { padding-top: 18px; border-top: 1px solid var(--rule); }
.col-head + .sub { border-top: 0; padding-top: 0; margin-top: 8px; }
@media (max-width: 1020px) {
  .lane-row, .lane-row.flip { grid-template-columns: 1fr; row-gap: 20px; }
  .lane-row .lane-text, .lane-row.flip .lane-text { grid-column: 1; grid-row: 1; }
  .lane-row .lane-big, .lane-row.flip .lane-big { grid-column: 1; grid-row: 2; }
  .lane-row .lane-smalls, .lane-row.flip .lane-smalls { grid-column: 1; grid-row: 3; }
}
@media (max-width: 640px) {
  .lane-band { padding: 40px 0; }
  .lane-row .lane-smalls { gap: 6px; }
  .util-icons.xl .si { width: 54px; height: 54px; }
  .v-album { padding: 0 14px; font-size: 14px; }
  .col-head .btn { width: 100%; }
  .print-go { left: 10px; bottom: 10px; font-size: 13px; padding: 7px 12px; }
}

/* ---------- Round 5: whole photos on phones and tablets, film cards, nav ---------- */
.film-img, .film-text { display: block; }
.film-text { padding-top: 12px; }
.film-grid .film { align-self: start; }
.lane-row .lane-smalls { display: flex; align-items: flex-start; }
.lane-row .lane-big, .lane-big.tile, .lane-small { aspect-ratio: auto; }
.lane-big.is-dusk .dusk { aspect-ratio: 3 / 2 !important; }
.lane-big.tile, .lane-small { display: block; }
.hero-stage { transition: height .6s cubic-bezier(.65, 0, .25, 1); }
@media (max-width: 1020px) {
  .print { top: 0; bottom: auto; }
  .about-photo, .about-photo img { max-height: none; }
  .about-grid { padding-top: 12px; }
}
@media (max-width: 1180px) and (min-width: 1021px) {
  .brand img { height: 42px; }
  .nav a { padding: 10px 6px; font-size: 14.5px; }
}

/* ---------- Round 6: tighter hero, full-length section bar with Back ---------- */
.hero { padding-top: clamp(14px, 2.2vw, 32px); padding-bottom: clamp(32px, 4vw, 56px); }
.hero h1 { margin-bottom: clamp(18px, 2.4vw, 36px); }
.print { top: 0; bottom: auto; }
.jump { position: sticky; top: 0; z-index: 20; margin: 0; padding: 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); background: rgba(255, 255, 255, .94); backdrop-filter: blur(10px); overflow: visible; display: block; }
.top:not(.tuck) ~ main .jump { top: var(--top); }
.jump-in { display: flex; align-items: center; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-top: 10px; padding-bottom: 10px; }
.jump-in::-webkit-scrollbar { display: none; }
.jump-in a { flex: none; text-decoration: none; font-weight: 600; padding: 9px 16px; border-radius: 999px; background: var(--mist); transition: background-color .2s, color .2s; }
.jump-in a:hover { background: var(--yellow); }
.jump-in a.on { background: var(--ink); color: #fff; }
.jump-back, .jump-search { flex: none; width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--ink); background: #fff; display: grid; place-items: center; cursor: pointer; }
.jump-back:hover, .jump-search:hover { background: var(--ink); color: #fff; }
.jump-back svg, .jump-search svg { width: 18px; height: 18px; }
.jump-search { margin-left: auto; }
.lane-body > .wrap > .col:first-child, .lane-body > .wrap > .dusk-sec + .col { border-top: 0; }
.lane-body > .wrap > .col:first-child { margin-top: clamp(28px, 3vw, 44px); padding-top: 0; }
.lane-body .lane-next { margin-top: clamp(48px, 6vw, 80px); margin-bottom: clamp(48px, 6vw, 80px); }
.lane-body #films { margin-top: clamp(56px, 7vw, 96px) !important; }
@media (max-width: 640px) {
  .jump-search { margin-left: 0; }
  .jump-in a { padding: 8px 14px; font-size: 15px; }
}

/* ---------- Round 7: the header never wraps; it switches to the menu when space runs out ---------- */
.nav a, .top-main .btn, .search-btn, .menu-btn { white-space: nowrap; }
.top-main { min-width: 0; }
.nav { flex: none; }
.top.tight .search-lbl { display: none; }
.top.tight .search-btn { padding: 0; width: 46px; justify-content: center; }
.top.tight .top-main { gap: 12px; }
.top.tight .nav a { padding: 10px 7px; }
.top.collapse .nav, .top.collapse .top-main .btn { display: none; }
.top.collapse .menu-btn { display: inline-flex; align-items: center; margin-left: 0; }
.top.collapse .search-btn { margin-left: auto; }

/* ---------- Round 8: audit fixes ---------- */
.foot-btn { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.foot-btn:hover { text-decoration: underline; text-underline-offset: 4px; }
main:focus { outline: none; }
.util-re { display: inline-flex; align-items: center; gap: .3em; min-height: 40px; }

/* ---------- Round 9: buttons sit right under the service list (no empty gap) ---------- */
.hero-ctas { margin-top: 0; padding-top: 32px; }