:root {
  --bg: #000;
  --fg: #f2f0ec;
  --dim: rgba(242, 240, 236, .48);
  --line: rgba(242, 240, 236, .16);
  --pad: clamp(16px, 2.2vw, 32px);
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --sans: 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
  --ease: cubic-bezier(.77, 0, .175, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); color: var(--fg); -webkit-font-smoothing: antialiased; }
body { margin: 0; font-family: var(--sans); background: var(--bg); overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-transform: inherit; letter-spacing: inherit; }
img, video { display: block; max-width: 100%; }
::selection { background: var(--fg); color: var(--bg); }
[hidden] { display: none !important; }
:focus { outline: none; }
:focus-visible { outline: 1px solid var(--fg); outline-offset: 3px; }

.mono { font-family: var(--mono); font-size: 11px; line-height: 1.35; text-transform: uppercase; letter-spacing: .02em; }
.dim { color: var(--dim); }

/* hover underline-ish: flicker to dim */
.hdr a, .mono button, .mono a { transition: opacity .25s; }
.hdr a:hover, .mono button:hover, .mono a:hover { opacity: .55; }

/* ---------- loader ---------- */
.loader { position: fixed; inset: 0; z-index: 100; background: var(--bg); display: grid; place-items: center; }
.loader__mark { width: min(220px, 50vw); opacity: 0; }
.loader__count { position: absolute; right: var(--pad); bottom: var(--pad); font-size: clamp(64px, 12vw, 180px); font-family: var(--sans); font-weight: 300; letter-spacing: -.04em; line-height: .8; }
.loader__label { position: absolute; left: var(--pad); bottom: var(--pad); }

/* ---------- header ---------- */
.hdr {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; column-gap: 24px; align-items: start;
  padding: var(--pad); mix-blend-mode: difference; pointer-events: none;
}
.hdr > * { pointer-events: auto; }
/* Dominic Hirani logo: one line on wide screens, stacked on phones (swapped by <picture>) */
.hdr__logo { display: block; min-width: 0; }
.hdr__logo picture, .hdr__logo img { display: block; }
.hdr__logo img { width: min(260px, 100%); height: auto; }
.hdr__nav { display: flex; flex-direction: column; white-space: nowrap; }
.hdr__nav a[aria-current] { text-decoration: underline; text-underline-offset: 3px; }
.hdr__clock { text-align: right; }
.hdr__right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }

/* Instagram / WhatsApp */
.social-links { display: flex; gap: 14px; flex-wrap: wrap; }
.social-link { display: inline-flex; align-items: center; gap: 8px; }
.social-link svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; }
.social-link svg .fill { fill: currentColor; stroke: none; }
.social-links--icons { gap: 12px; }
.social-links--icons svg { width: 17px; height: 17px; }
.social-links--labels { flex-direction: column; gap: 6px; }
.foot .social-links--labels { flex-direction: row; gap: 18px; }
/* on the scrolling work page, a soft black fade keeps the header legible over cards */
body[data-view="work"] .hdr, body[data-view="kaizen"] .hdr { mix-blend-mode: normal; background: linear-gradient(#000 35%, rgba(0,0,0,.7) 65%, transparent); padding-bottom: calc(var(--pad) * 2); }

/* ---------- home slider ---------- */
.view--home { position: fixed; inset: 0; overflow: hidden; }
.slides { position: absolute; inset: 0; }
.slide { position: absolute; inset: 0; overflow: hidden; visibility: hidden; }
.slide.is-active { visibility: visible; z-index: 2; }
.slide.is-leaving { visibility: visible; z-index: 1; }
.slide__inner { position: absolute; inset: 0; }
.slide__inner video, .slide__inner .slide__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* soft shading so the list and credits read over bright footage */
.slide__inner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.5) 0%, transparent 38%, transparent 70%, rgba(0,0,0,.35) 100%), linear-gradient(180deg, rgba(0,0,0,.3) 0%, transparent 20%, transparent 80%, rgba(0,0,0,.4) 100%); pointer-events: none; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* scrolling project list (left) */
.reel-list { position: absolute; left: var(--pad); top: 50%; z-index: 5; width: min(42vw, 460px); height: 0; margin: 0; padding: 0; list-style: none; }
.reel-list li { position: absolute; left: 0; top: 0; width: 100%; }
.reel-list button { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; position: relative; padding: 2px 0 6px; max-width: 100%; }
.reel-list__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.reel-list__sep { opacity: .6; }
.reel-list__sub { color: var(--dim); }
.reel-list li.is-active .reel-list__sub { color: var(--fg); }
.reel-list__bar { position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--fg); transform-origin: left; transform: scaleX(0); opacity: 0; }
.reel-list li.is-active .reel-list__bar { opacity: .8; }
@media (hover: hover) {
  .reel-list li:not(.is-active) button:hover { opacity: 1; }
  .reel-list li:not(.is-active):hover { opacity: .85 !important; }
}

/* part titles inside the wheel, and the fixed label above it */
.reel-list li.reel-list__head { display: flex; align-items: flex-end; height: 40px; padding-bottom: 6px; border-bottom: 1px solid var(--fg); width: max-content; max-width: 100%; letter-spacing: .12em; pointer-events: none; }
.reel-section { position: absolute; left: var(--pad); top: calc(50% - 220px); z-index: 5; display: flex; gap: 10px; align-items: center; letter-spacing: .12em; }
.reel-section::before { content: ''; width: 7px; height: 7px; background: var(--fg); border-radius: 50%; }
.reel-section.is-contract::before { background: transparent; border: 1px solid var(--fg); }

/* credits (right) */
.reel-credits { position: absolute; right: var(--pad); top: 50%; transform: translateY(-50%); z-index: 5; margin: 0; text-align: right; max-width: min(40vw, 460px); }
.reel-credits__list { margin: 0; }
.reel-credits__toggle { display: none; }
.reel-credits div { display: flex; justify-content: flex-end; gap: 8px; }
.reel-credits dt { flex: none; }
.reel-credits dt { color: var(--dim); }
.reel-credits dd { margin: 0; }

/* social cuts strip (bottom right) */
.social-reel { position: absolute; right: var(--pad); bottom: var(--pad); z-index: 6; }
.social-reel__head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.social-reel__head a { color: var(--dim); }
.social-reel__tiles { display: flex; gap: 6px; align-items: flex-end; }
.social-tile { position: relative; display: block; width: clamp(54px, 5.4vw, 92px); aspect-ratio: 9 / 16; overflow: hidden; background: #111; transform-origin: bottom center; transition: width .6s var(--ease); }
.social-tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.social-tile::after { content: ''; position: absolute; inset: 0; border: 1px solid rgba(242,240,236,.18); pointer-events: none; transition: border-color .3s; }
.social-tile__title { position: absolute; left: 6px; right: 6px; bottom: 6px; font-size: 9px; line-height: 1.2; opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
@media (hover: hover) {
  .social-tile:hover { width: clamp(84px, 8.4vw, 140px); }
  .social-tile:hover::after { border-color: rgba(242,240,236,.7); }
  .social-tile:hover .social-tile__title { opacity: 1; transform: none; }
}

/* slider / grid toggle (bottom centre) */
.view-toggle { position: absolute; left: 50%; bottom: var(--pad); transform: translateX(-50%); z-index: 5; display: flex; gap: 14px; }
.view-toggle a { color: var(--dim); }
.view-toggle a[aria-current] { color: var(--fg); }

/* ---------- work grid ---------- */
.view--work { position: relative; min-height: 100vh; padding: calc(var(--pad) * 5 + 40px) var(--pad) 0; }
.work-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; padding-bottom: calc(var(--pad) * 1.2); border-bottom: 1px solid var(--line); margin-bottom: calc(var(--pad) * 1.2); }
.work-head__title { margin: 0; font-weight: 400; font-size: clamp(64px, 13vw, 220px); line-height: .8; letter-spacing: -.055em; text-transform: uppercase; }
.work-head__title sup { font-size: 11px; letter-spacing: .02em; vertical-align: top; margin-left: 8px; position: relative; top: .6em; }
.work-head__filters { display: flex; gap: 6px 18px; flex-wrap: wrap; }
.work-head__filters button { color: var(--dim); }
.work-head__filters button.is-on { color: var(--fg); }
.work-head__filters button.is-on::before { content: '['; }
.work-head__filters button.is-on::after { content: ']'; }

.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--pad) * 2.2) var(--pad); }
.card { display: block; opacity: 0; transform: translateY(40px); }
.card.is-in { opacity: 1; transform: none; transition: opacity 1s var(--ease), transform 1.2s var(--ease); }
.card.is-hidden { display: none; }
.card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #0d0d0d; }
.card__media img, .card__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease), opacity .5s; }
.card__media video { opacity: 0; }
.card.is-playing .card__media video { opacity: 1; }
.card:hover .card__media img, .card:hover .card__media video { transform: scale(1.04); }
.card--portrait .card__media { aspect-ratio: 9 / 16; }
.card--portrait .card__meta { grid-template-columns: 1fr auto; }
.card--portrait .card__meta > :nth-child(2) { display: none; }

/* vertical row */
/* Kaizen Creative page: the production company, kept apart from Dominic's own work.
   A small centred logo, a wide Belle Property clip, then the story on the left with clients and the enquiry button beside it. */
.kz-head { display: flex; flex-direction: column; align-items: center; gap: calc(var(--pad) * 1.6);
  padding-bottom: calc(var(--pad) * 2.4); margin-bottom: calc(var(--pad) * 2.4); border-bottom: 1px solid var(--line); }
.kz-head__logo { width: clamp(84px, 8vw, 120px); height: auto; opacity: .92; }
/* clip and text share one width: as wide as fits, but never taller than 60% of the screen */
.kz-head { --kz-w: min(100%, calc(60vh * 16 / 9)); }
.kz-head__reel { position: relative; display: block; width: var(--kz-w); aspect-ratio: 16 / 9; overflow: hidden; background: #0d0d0d; }
.kz-head__reel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kz-head__reel::after { content: ''; position: absolute; inset: 0; border: 1px solid var(--line); pointer-events: none; }
.kz-head__reel-label { position: absolute; left: 14px; bottom: 12px; text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.kz-head__text { width: var(--kz-w); display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); grid-template-rows: auto 1fr;
  column-gap: calc(var(--pad) * 3); row-gap: calc(var(--pad) * 1.4); text-align: left; }
.kz-head__lead { grid-row: 1 / span 2; font-size: clamp(18px, 1.8vw, 26px); line-height: 1.3; letter-spacing: -.01em; max-width: 34em; }
.kz-head__lead p { margin: 0 0 .7em; }
.kz-head__lead p:last-child { margin-bottom: 0; color: var(--dim); }
.kz-head__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.kz-head__cols h4 { margin: 0 0 8px; font-weight: 400; color: var(--dim); }
.kz-head__cols ul { list-style: none; margin: 0; padding: 0; }
.kz-head__cta { align-self: end; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 16px 18px;
  background: var(--fg); color: #000; font-family: var(--mono); font-size: 12px; text-transform: uppercase; transition: opacity .25s; }
.kz-head__cta:hover { opacity: .85; }
.info__link { text-decoration: underline; text-underline-offset: 3px; }

/* Work page: Contract Work / Social Cuts sections */
.work-jump { display: flex; gap: 18px; margin: calc(var(--pad) * -.4) 0 calc(var(--pad) * 2.4); }
.work-jump a { color: var(--dim); }
.work-section + .work-section { margin-top: calc(var(--pad) * 6); padding-top: calc(var(--pad) * 2); border-top: 1px solid var(--fg); }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 24px; flex-wrap: wrap; margin-bottom: calc(var(--pad) * 1.6); }
.section-head__title { margin: 0; font-weight: 400; font-size: clamp(40px, 7vw, 120px); line-height: .82; letter-spacing: -.05em; text-transform: uppercase; }
.section-head__title sup { font-size: 11px; letter-spacing: .02em; vertical-align: top; margin-left: 8px; position: relative; top: .6em; }
.section-head .mono { max-width: 420px; text-align: right; }
.vert { margin-top: calc(var(--pad) * 4); }
.vert__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding-bottom: calc(var(--pad) * 1.2); border-bottom: 1px solid var(--line); margin-bottom: calc(var(--pad) * 1.2); }
.vert__title { margin: 0; font-weight: 400; font-size: clamp(26px, 3.4vw, 52px); line-height: .95; letter-spacing: -.04em; text-transform: uppercase; }
.vert__title sup { font-size: 11px; letter-spacing: .02em; vertical-align: top; margin-left: 8px; position: relative; top: .4em; }
.grid--vertical { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--pad) * 1.6) var(--pad); }

/* named sets inside Social Cuts (e.g. Spiltmilk anamorphic post cards) */
.group { margin-top: calc(var(--pad) * 3.2); }
.group__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding-bottom: calc(var(--pad) * .9); border-bottom: 1px solid var(--line); margin-bottom: calc(var(--pad) * 1.2); }
.group__title { margin: 0; font-weight: 400; font-size: clamp(26px, 3.4vw, 52px); line-height: .95; letter-spacing: -.04em; text-transform: uppercase; }
.group__title sup { font-size: 11px; letter-spacing: .02em; vertical-align: top; margin-left: 8px; position: relative; top: .4em; }
.grid--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--pad) * 1.8) var(--pad); }
.card--wide .card__media { aspect-ratio: 3840 / 1400; }
/* corner brackets */
.card__media .corner { position: absolute; width: 14px; height: 14px; border-color: var(--fg); border-style: solid; opacity: 0; transition: opacity .35s, transform .5s var(--ease); z-index: 2; }
.corner--tl { top: 12px; left: 12px; border-width: 1px 0 0 1px; transform: translate(8px, 8px); }
.corner--tr { top: 12px; right: 12px; border-width: 1px 1px 0 0; transform: translate(-8px, 8px); }
.corner--bl { bottom: 12px; left: 12px; border-width: 0 0 1px 1px; transform: translate(8px, -8px); }
.corner--br { bottom: 12px; right: 12px; border-width: 0 1px 1px 0; transform: translate(-8px, -8px); }
.card:hover .corner { opacity: 1; transform: none; }
.card__fmt { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 2; opacity: .8; }
.card__meta { display: grid; grid-template-columns: 2fr 1.2fr auto; gap: 12px; padding-top: 12px; }
.card__meta .dim { display: block; }

.foot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: calc(var(--pad) * 4) 0 var(--pad); margin-top: calc(var(--pad) * 3); border-top: 1px solid var(--line); }

/* ---------- player overlay ---------- */
.player { position: fixed; inset: 0; z-index: 50; }
.player__backdrop { position: absolute; inset: 0; background-size: cover; background-position: center; filter: blur(30px) brightness(.5); transform: scale(1.15); }
.player__panel { position: absolute; inset: clamp(0px, 4vw, 64px); background: #000; overflow: hidden; }
.player__info, .player__close { position: absolute; top: 14px; z-index: 4; background: #1a1a1a; padding: 3px 6px; }
.player__info { left: 14px; }
.player__info.is-on { background: var(--fg); color: #000; }
.player__close { right: 14px; }
.player__side { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; background: #1a1a1a; padding: 3px 6px; }
.player__prev { left: 14px; }
.player__next { right: 14px; }
.player__stage { position: absolute; inset: 64px 90px 64px; display: grid; place-items: center; }
.player__frame { position: relative; max-width: 100%; max-height: 100%; background: #070707; }
.player__frame video { width: 100%; height: 100%; object-fit: contain; }
.player__bigplay { position: absolute; inset: 0; display: grid; place-items: center; transition: opacity .3s; pointer-events: none; }
.player__frame.is-playing .player__bigplay { opacity: 0; }
.player__ctrls { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 14px; padding: 10px 12px; background: linear-gradient(transparent, rgba(0,0,0,.65)); opacity: 0; transition: opacity .3s; }
.player__frame:hover .player__ctrls, .player__frame:not(.is-playing) .player__ctrls { opacity: 1; }
.player__scrub { flex: 1; height: 14px; position: relative; cursor: pointer; }
.player__scrub::before { content: ''; position: absolute; left: 0; right: 0; top: 6px; height: 1px; background: var(--line); }
.player__scrub-fill { position: absolute; left: 0; top: 6px; height: 1px; width: 0; background: var(--fg); }
.player__caption { position: absolute; left: 0; right: 0; bottom: 22px; text-align: center; }
.player__drawer { position: absolute; top: 0; bottom: 0; left: 0; width: min(380px, 86%); z-index: 3; background: rgba(0,0,0,.86); backdrop-filter: blur(12px); padding: 64px 24px 24px; transform: translateX(-101%); transition: transform .7s var(--ease); display: flex; flex-direction: column; }
.player__drawer.is-open { transform: none; }
.player__caption { transition: opacity .4s; }
.player__credits { position: absolute; right: 14px; bottom: 16px; z-index: 4; margin: 0; text-align: right; max-width: 34%; }
.player__credits div { display: flex; justify-content: flex-end; gap: 8px; }
.player__credits dt { flex: none; }
.player__credits dt { color: var(--dim); }
.player__credits dd { margin: 0; }
.player__drawer.is-open ~ .player__caption, .player__panel:has(.player__drawer.is-open) .player__caption { opacity: 0; }
.drawer__idx { color: var(--dim); }
.drawer__title { font-family: var(--sans); text-transform: uppercase; font-weight: 400; font-size: 44px; line-height: .9; letter-spacing: -.04em; margin: 14px 0 32px; }
.drawer__list { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px 12px; margin: 0; }
.drawer__list dt { color: var(--dim); }
.drawer__list dd { margin: 0; }
.drawer__copy { margin-top: auto; color: var(--dim); text-transform: none; font-size: 12px; }

/* ---------- info overlay ---------- */
.info { position: fixed; inset: 0; z-index: 60; }
.info__shade { position: absolute; inset: 0; background: rgba(0,0,0,.6); }
.info__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(620px, 100%); background: var(--fg); color: #0a0a0a; padding: 56px var(--pad) var(--pad); overflow-y: auto; display: flex; flex-direction: column; gap: 22px; }
.info__panel ::selection { background: #000; color: var(--fg); }
.info__panel .dim { color: rgba(0,0,0,.45); }
.info__close { position: absolute; top: 18px; right: var(--pad); }
.info__title { margin: 0; font-weight: 400; font-size: clamp(56px, 7vw, 96px); letter-spacing: -.05em; line-height: .85; }
.info__reel { aspect-ratio: 16 / 9; flex: none; overflow: hidden; background: #111; } /* flex: none stops long text squashing the video */
.info__reel video { width: 100%; height: 100%; object-fit: cover; }
.info__tagline { display: flex; justify-content: space-between; }
.info__about { margin: 0; font-size: 12px; line-height: 1.5; }
.info__about p { margin: 0 0 1em; }
.info__about p:last-child { margin-bottom: 0; }
.info__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: auto; padding-top: 24px; }
.info h4 { margin: 0 0 8px; font-weight: 400; color: rgba(0,0,0,.45); }
.info ul { list-style: none; margin: 0; padding: 0; }
.info__contact { display: flex; flex-direction: column; gap: 4px; }
.info__mail { font-family: var(--sans); text-transform: none; font-size: clamp(22px, 3vw, 34px); letter-spacing: -.03em; }

/* ---------- contact / enquiry form ---------- */
.contact .info__panel { gap: 18px; }
.enquiry { display: flex; flex-direction: column; gap: 22px; margin-top: 6px; }
.enquiry__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 8px; border: 0; margin: 0; padding: 0; min-width: 0; }
.field__label { color: rgba(0,0,0,.45); padding: 0; }
.field input, .field textarea {
  font: 400 15px/1.4 var(--sans); color: #0a0a0a; background: transparent;
  border: 0; border-bottom: 1px solid rgba(0,0,0,.25); border-radius: 0; padding: 6px 0 8px; resize: vertical;
  transition: border-color .25s;
}
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: #0a0a0a; }
.field textarea::placeholder { color: rgba(0,0,0,.3); }
.field.is-invalid input, .field.is-invalid textarea { border-bottom-color: #c0392b; }
.field.is-invalid .field__label { color: #c0392b; }

/* project type: pill chips (multi-select) */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips label { position: relative; }
.chips input { position: absolute; opacity: 0; pointer-events: none; }
.chips span { display: inline-block; padding: 6px 10px; border: 1px solid rgba(0,0,0,.2); border-radius: 999px; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.chips label:hover span { border-color: #0a0a0a; }
.chips input:checked + span { background: #0a0a0a; color: var(--fg); border-color: #0a0a0a; }
.chips input:focus-visible + span { outline: 1px solid #0a0a0a; outline-offset: 2px; }

/* budget: tick list (single choice) */
.ticks { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(0,0,0,.15); }
.ticks label { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid rgba(0,0,0,.15); cursor: pointer; }
.ticks label:nth-child(odd) { padding-right: 14px; }
.ticks label:nth-child(even) { padding-left: 14px; border-left: 1px solid rgba(0,0,0,.15); }
.ticks input { position: absolute; opacity: 0; pointer-events: none; }
.ticks .box { flex: none; width: 14px; height: 14px; border: 1px solid rgba(0,0,0,.4); display: grid; place-items: center; transition: background .2s, border-color .2s; }
.ticks .box::after { content: ''; width: 7px; height: 4px; border: solid var(--fg); border-width: 0 0 1.5px 1.5px; transform: rotate(-45deg) translate(1px, -1px); opacity: 0; }
.ticks input:checked + .box { background: #0a0a0a; border-color: #0a0a0a; }
.ticks input:checked + .box::after { opacity: 1; }
.ticks input:focus-visible + .box { outline: 1px solid #0a0a0a; outline-offset: 2px; }
.ticks label:hover .box { border-color: #0a0a0a; }
.ticks .price { font-family: var(--sans); text-transform: none; font-size: 15px; letter-spacing: -.01em; }

.enquiry__error { margin: 0; color: #c0392b; min-height: 1em; }
.enquiry__error:empty { display: none; }
.enquiry__submit {
  display: flex; justify-content: space-between; align-items: center; width: 100%;
  background: #0a0a0a; color: var(--fg); padding: 16px 18px; font-size: 12px;
  transition: opacity .25s;
}
.enquiry__submit:hover { opacity: .85 !important; }
.enquiry__submit[disabled] { opacity: .5; cursor: progress; }
.enquiry__done h3 { margin: 0 0 8px; font-weight: 400; font-size: clamp(36px, 5vw, 56px); letter-spacing: -.04em; }
.enquiry__done p { margin: 0; }
.contact .info__contact { margin-top: auto; padding-top: 24px; }

/* ---------- cursor ---------- */
.cursor { position: fixed; top: 0; left: 0; z-index: 200; pointer-events: none; mix-blend-mode: difference; }
.cursor__dot { position: absolute; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #fff; transition: transform .3s; }
.cursor__label { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; opacity: 0; transition: opacity .2s; }
.cursor.has-label .cursor__dot { transform: scale(0); }
.cursor.has-label .cursor__label { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  body.custom-cursor, body.custom-cursor a, body.custom-cursor button { cursor: none; }
}
@media not ((hover: hover) and (pointer: fine)) { .cursor { display: none; } }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .hdr { grid-template-columns: 1fr auto auto auto; gap: 16px; }
  .hdr__clock { display: none; }
  .hdr__logo img { width: min(128px, 100%); }
  .hide-sm { display: none; }
  .kz-head__text { grid-template-columns: 1fr; }
  .kz-head__lead { grid-row: auto; }
  .grid { grid-template-columns: 1fr; }
  .card__meta { grid-template-columns: 1fr auto; }
  .card__meta > :nth-child(2) { display: none; }
  .grid--vertical { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--wide { grid-template-columns: 1fr; }
  .group__head { flex-direction: column; align-items: flex-start; }
  .section-head { flex-direction: column; align-items: flex-start; }
  .section-head .mono { text-align: left; }
  /* phones: list sits low on the left, credits move to the top */
  .reel-list { top: auto; bottom: 170px; width: calc(100% - var(--pad) * 2); }
  .reel-section { top: auto; bottom: 330px; }
  .social-reel { left: var(--pad); right: auto; bottom: calc(var(--pad) + 30px); }
  .social-tile { width: min(15vw, 64px); }
  .reel-credits { top: 96px; transform: none; max-width: 78vw; display: flex; flex-direction: column; align-items: flex-end; }
  /* phones: credits collapse under a small heading */
  .reel-credits__toggle { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 6px 0;
    text-shadow: 0 1px 8px rgba(0,0,0,.6); }
  .reel-credits__arrow { display: inline-block; transition: transform .3s; }
  .reel-credits.is-open .reel-credits__arrow { transform: rotate(180deg); }
  .reel-credits__list { display: none; margin-top: 6px; padding: 10px 12px; background: rgba(0,0,0,.55); backdrop-filter: blur(10px); }
  .reel-credits.is-open .reel-credits__list { display: block; }
  /* the reel itself is the social cuts on phones, so the separate strip isn't needed */
  .social-reel { display: none; }
  .player__panel { inset: 0; }
  .player__stage { inset: 56px 12px 72px; }
  .player__side { top: auto; bottom: 18px; transform: none; }
  .player__caption { bottom: 22px; padding: 0 70px; }
  .player__credits { bottom: 54px; max-width: 70%; }
  .info__cols { grid-template-columns: 1fr 1fr; }
  .enquiry__row { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .card { opacity: 1; transform: none; }
}