/* Pool House Media
   Desktop sizes come straight from the 1920px XD artboards: N * var(--u) = N design pixels.
   Mobile sizes come from the 430px iPhone artboards: N * var(--m). */

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --u: calc(100vw / 1920);
    --m: calc(100vw / 430);
    --grey: #A59F9F;
    --field: #343434;
    /* Soft "expo out": quick start, long gentle settle */
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --page-dur: 0.8s;
    color-scheme: dark;
}

html {
    background: #000;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
    font-weight: 400;
    color: #fff;
    background: #000;
    letter-spacing: 0.025em;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a {
    color: inherit;
    text-decoration: none;
}

button, input, textarea {
    font: inherit;
    letter-spacing: inherit;
    color: inherit;
}

button {
    background: none;
    border: 0;
    cursor: pointer;
}

img, video {
    display: block;
    max-width: 100%;
    height: auto;
}

:focus-visible {
    outline: 1px solid var(--grey);
    outline-offset: 3px;
}

/* ================= Header ================= */
.site-header {
    position: relative;
    z-index: 50;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    height: calc(101 * var(--u));
    padding: calc(22 * var(--u)) calc(37 * var(--u)) 0 calc(33 * var(--u));
}

.site-logo {
    width: calc(229 * var(--u));
    min-width: 150px;
    margin-top: calc(5 * var(--u));
    transition: opacity 0.4s ease;
}

.site-logo:hover {
    opacity: 0.75;
}

.nav {
    display: flex;
    align-items: center;
    gap: calc(32 * var(--u));
    height: max(calc(37 * var(--u)), 26px);
    font-size: max(calc(20 * var(--u)), 13px);
}

.nav a {
    position: relative;
    transition: color 0.4s ease;
}

.nav a:not(.pill):hover,
[data-page="video"] [data-nav="video"],
[data-page="photo"] [data-nav="photo"],
[data-page="contact"] [data-nav="contact"] {
    color: var(--grey);
}

.nav .pill {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 calc(16 * var(--u));
    border-radius: 999px;
    background: #fffdfd;
    color: #000;
    font-size: max(calc(19 * var(--u)), 12px);
    transition: background-color 0.4s ease, color 0.4s ease;
}

.nav .pill:hover {
    background: var(--grey);
}

.menu-toggle {
    display: none;
}

.mobile-menu {
    display: none;
}

/* Homepage: header floats over the video, logo lives in the hero */
[data-page="home"] .site-header {
    position: absolute;
    inset: 0 0 auto;
    justify-content: flex-end;
}

[data-page="home"] .site-logo {
    display: none;
}

/* ================= Home hero ================= */
[data-page="home"] {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

.hero {
    position: relative;
    flex: 1;
}

/* The picture bleeds past the hero by --bleed-top/--bleed-bottom (0 on desktop). On phones that lets
   it run behind the status bar and browser toolbar instead of leaving black bars (see mobile section) */
.hero::before,
.hero-video,
.hero-shade {
    position: absolute;
    left: 0;
    top: calc(-1 * var(--bleed-top, 0px));
    width: 100%;
    height: calc(100% + var(--bleed-top, 0px) + var(--bleed-bottom, 0px));
    object-fit: cover;
}

.hero::before {
    content: "";
    background: transparent url("/media/home-wide-9a9c03ee-1280.webp") center / cover no-repeat;
}

.hero-shade {
    background: rgba(0, 0, 0, 0.093);
}

.hero-logo {
    position: absolute;
    left: 50%;
    top: 47.1%;
    width: calc(758 * var(--u));
    transform: translate(-50%, -50%);
}

.hero-tagline {
    position: absolute;
    left: 50%;
    bottom: 7.8%;
    width: max-content;
    transform: translateX(-50%);
    text-align: center;
    font-size: max(calc(20 * var(--u)), 13px);
    line-height: 1.2;
}

.sound {
    width: calc(65 * var(--u));
    min-width: 36px;
    aspect-ratio: 1;
    padding: 0;
    transition: opacity 0.4s ease, transform 0.6s var(--ease);
}

.sound:hover {
    transform: scale(1.08);
}

.sound svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.sound .spk { fill: #fff; }

.sound .off,
.sound .on {
    fill: none;
    stroke: #fff;
    stroke-width: 5;
    stroke-linecap: round;
    transition: opacity 0.35s ease, transform 0.5s var(--ease);
    transform-origin: 46px 32px;
}

.sound .on,
.sound[aria-pressed="true"] .off {
    opacity: 0;
    transform: scale(0.6);
}

.sound[aria-pressed="true"] .on {
    opacity: 1;
    transform: none;
}

.hero-sound {
    position: absolute;
    right: calc(37 * var(--u));
    bottom: calc(20 * var(--u));
    z-index: 5;
}

/* Hero entrance on a fresh visit only (not when arriving from another page) */
html.js:not(.no-intro) [data-page="home"] .hero-logo,
html.js:not(.no-intro) [data-page="home"] .hero-tagline,
html.js:not(.no-intro) [data-page="home"] .site-header {
    animation: rise 1.6s var(--ease) both;
}

html.js:not(.no-intro) [data-page="home"] .hero-logo { animation-name: rise-centered; animation-delay: 0.15s; }
html.js:not(.no-intro) [data-page="home"] .hero-tagline { animation-name: rise-x; animation-delay: 0.45s; }
html.js:not(.no-intro) [data-page="home"] .site-header { animation-name: fade; animation-delay: 0.7s; animation-duration: 1.2s; }

@keyframes rise-centered {
    from { opacity: 0; transform: translate(-50%, calc(-50% + 24px)); }
}

@keyframes rise-x {
    from { opacity: 0; transform: translate(-50%, 18px); }
}

@keyframes rise {
    from { opacity: 0; transform: translateY(24px); }
}

@keyframes fade {
    from { opacity: 0; }
}

/* ================= Footer ================= */
.site-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    margin-top: calc(64 * var(--u));
    padding: 0 calc(37 * var(--u)) calc(28 * var(--u)) calc(35 * var(--u));
}

.footer-tagline {
    max-width: calc(918 * var(--u));
    font-size: max(calc(25 * var(--u)), 14px);
    line-height: 1.2;
}

.footer-contact {
    width: calc(465 * var(--u));
    min-width: max-content;
    font-size: max(calc(30 * var(--u)), 16px);
    line-height: 1.18;
}

.footer-contact a {
    display: block;
    transition: color 0.4s ease;
}

.footer-contact a:hover {
    color: var(--grey);
}

.back-to-top {
    display: none;
}

/* ================= Video page ================= */
.video-page {
    display: flex;
    flex-direction: column;
    gap: calc(46 * var(--u));
    padding: calc(33 * var(--u)) calc(51 * var(--u)) 0;
}

.reel-row {
    display: flex;
    justify-content: center;
    gap: calc(45 * var(--u));
}

.reel-row .tile {
    flex: 0 0 calc((100% - 90 * var(--u)) / 3);
}

[data-page="video"] .site-footer {
    margin-top: calc(98 * var(--u));
}

.tile {
    position: relative;
    overflow: hidden;
    background: #0b0b0b;
    cursor: pointer;
    aspect-ratio: 576 / 1024;
}

.tile-wide {
    aspect-ratio: 1818 / 1023;
}

.tile video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.4s var(--ease), filter 0.8s ease;
}

.tile:hover video {
    transform: scale(1.025);
}

.tile .sound {
    position: absolute;
    right: calc(18 * var(--u));
    bottom: calc(18 * var(--u));
    width: calc(56 * var(--u));
    min-width: 32px;
}

/* Soft play glyph on hover while a reel is paused */
.tile .play {
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(84 * var(--u));
    min-width: 52px;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.85);
    background: rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transform: translate(-50%, -50%) scale(0.85);
    opacity: 0;
    transition: opacity 0.5s ease, transform 0.7s var(--ease);
    pointer-events: none;
}

.tile .play::after {
    content: "";
    position: absolute;
    left: 54%;
    top: 50%;
    border-style: solid;
    border-width: 9px 0 9px 15px;
    border-color: transparent transparent transparent #fff;
    transform: translate(-50%, -50%);
}

.tile:not(.is-playing):hover .play {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* Touch screens have no hover, so show it whenever a video is paused */
@media (hover: none) {
    .tile:not(.is-playing) .play {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* ================= Photo page ================= */
.photo-page {
    display: flex;
    flex-direction: column;
    gap: calc(32 * var(--u));
    padding: calc(33 * var(--u)) calc(35 * var(--u)) 0;
}

[data-page="photo"] .site-footer {
    margin-top: calc(45 * var(--u));
}

.photo-row {
    display: grid;
    gap: calc(32 * var(--u));
    height: calc(668 * var(--u));
}

.row-big-small { grid-template-columns: 1151fr 665fr; }
.row-small-big { grid-template-columns: 665fr 1151fr; }
.row-three { grid-template-columns: 576fr 638fr 576fr; height: calc(761 * var(--u)); gap: calc(30 * var(--u)); }
.row-full { grid-template-columns: 1fr; height: calc(892 * var(--u)); }

.photo {
    position: relative;
    overflow: hidden;
    background: #0d0d0d;
    cursor: zoom-in;
}

.photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.6s var(--ease), opacity 1s ease;
}

.photo:hover img {
    transform: scale(1.035);
}

/* Images fade in once decoded, instead of popping in */
.js .photo img:not(.is-loaded) {
    opacity: 0;
}

/* Scroll reveal, driven by the compositor (no JS) */
@supports (animation-timeline: view()) {
    .photo-row,
    .tile {
        animation: reveal linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 55%;
    }

    @keyframes reveal {
        from { opacity: 0; transform: translateY(60px); }
    }
}

/* ================= Lightbox ================= */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    padding: 4vh 4vw;
    background: rgba(0, 0, 0, 0.94);
    cursor: zoom-out;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.lightbox.is-open {
    opacity: 1;
}

.lightbox img {
    max-width: 100%;
    max-height: 92vh;
    object-fit: contain;
    transform: scale(0.97);
    transition: transform 0.8s var(--ease);
}

.lightbox.is-open img {
    transform: none;
}

.lightbox button {
    position: absolute;
    padding: 18px;
    font-size: 22px;
    color: #fff;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.lightbox button:hover { opacity: 1; }
.lightbox .lb-prev { left: 1vw; top: 50%; transform: translateY(-50%); }
.lightbox .lb-next { right: 1vw; top: 50%; transform: translateY(-50%); }
.lightbox .lb-close { right: 1vw; top: 1vh; font-size: 28px; }

/* ================= Contact page ================= */
[data-page="contact"] .site-footer {
    margin-top: auto;
    padding-top: calc(60 * var(--u));
    padding-bottom: calc(42 * var(--u));
}

.contact-page {
    padding: calc(77 * var(--u)) 0 0 calc(42 * var(--u));
}

.contact-direct {
    display: none;
}

.contact-form {
    display: grid;
    grid-template-columns: 483fr 347fr;
    column-gap: calc(79 * var(--u));
    width: calc(909 * var(--u));
    min-width: 520px;
    font-size: max(calc(20 * var(--u)), 13px);
}

.field-name,
.interests,
.field-message,
.contact-form > button,
.contact-form > .form-error {
    grid-column: 1 / -1;
}

.field {
    display: flex;
    flex-direction: column;
    gap: calc(10 * var(--u));
    margin-bottom: calc(57 * var(--u));
}

.field input {
    height: max(calc(39 * var(--u)), 30px);
    padding: 0 calc(15 * var(--u));
    background: transparent;
    border: 0;
    border-bottom: 1.5px solid #fff;
    border-radius: 0;
    font-size: max(calc(16 * var(--u)), 13px);
    text-transform: uppercase;
    transition: background-color 0.45s ease;
}

.field input:focus,
.field textarea:focus {
    outline: none;
    background: var(--field);
}

.interests {
    border: 0;
    display: grid;
    grid-template-columns: calc(209 * var(--u)) auto;
    justify-content: start;
    row-gap: calc(30 * var(--u));
    margin-bottom: calc(50 * var(--u));
    font-size: max(calc(16 * var(--u)), 12px);
}

.interests legend {
    float: left;
    grid-column: 1 / -1;
    margin-bottom: calc(29 * var(--u));
    font-size: max(calc(20 * var(--u)), 13px);
}

.interests label {
    display: flex;
    align-items: center;
    gap: calc(17 * var(--u));
    cursor: pointer;
    white-space: nowrap;
}

.interests label:nth-of-type(odd) {
    padding-left: calc(3 * var(--u));
}

.interests input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.interests i {
    position: relative;
    flex: none;
    width: max(calc(20 * var(--u)), 15px);
    aspect-ratio: 1;
    border: 1.5px solid #fff;
}

.interests i::before,
.interests i::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 130%;
    height: 1.5px;
    background: #fff;
    transform: translate(-50%, -50%) rotate(45deg) scaleX(0);
    transition: transform 0.45s var(--ease);
}

.interests i::after {
    transform: translate(-50%, -50%) rotate(-45deg) scaleX(0);
    transition-delay: 0.06s;
}

.interests input:checked + i::before { transform: translate(-50%, -50%) rotate(45deg) scaleX(1); }
.interests input:checked + i::after { transform: translate(-50%, -50%) rotate(-45deg) scaleX(1); }
.interests input:focus-visible + i { outline: 1px solid var(--grey); outline-offset: 3px; }

.field-message {
    gap: calc(29 * var(--u));
    margin-bottom: calc(39 * var(--u));
}

.field textarea {
    height: max(calc(156 * var(--u)), 110px);
    padding: calc(23 * var(--u));
    background: transparent;
    border: 1.5px solid #fff;
    border-radius: 0;
    resize: none;
    font-size: max(calc(16 * var(--u)), 13px);
    transition: background-color 0.45s ease;
}

.field textarea::placeholder {
    color: var(--grey);
    opacity: 1;
}

.btn-light {
    justify-self: start;
    height: max(calc(49 * var(--u)), 38px);
    padding: 0 calc(28 * var(--u));
    background: #fff;
    border: 1px solid #707070;
    color: #000;
    font-size: max(calc(20 * var(--u)), 13px);
    transition: background-color 0.4s ease, color 0.4s ease;
}

.btn-light:hover {
    background: var(--grey);
}

.form-error {
    margin-top: 14px;
    font-size: 13px;
    color: #e6a0a0;
}

.hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

button[disabled] {
    opacity: 0.55;
    cursor: progress;
}

/* ================= Modals ================= */
.modal {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    place-items: center;
    color: #000;
    /* The tinted backdrop is drawn by the dialog itself so it fades with it */
    background: rgba(64, 55, 55, 0.42);
    display: none;
    opacity: 0;
    transition:
        opacity 0.5s ease,
        display 0.5s allow-discrete,
        overlay 0.5s allow-discrete;
}

.modal[open] {
    display: grid;
    opacity: 1;
}

@starting-style {
    .modal[open] {
        opacity: 0;
    }

    .modal[open] .modal-card {
        transform: translateY(18px) scale(0.97);
    }
}

.modal::backdrop {
    background: transparent;
}

.modal-light {
    background: rgba(255, 255, 255, 0.44);
}

.modal-card {
    position: relative;
    display: grid;
    width: max(calc(521 * var(--u)), 380px);
    min-height: max(calc(333 * var(--u)), 245px);
    border-radius: max(calc(28 * var(--u)), 20px);
    background: #fff;
    text-align: center;
    transform: translateY(12px) scale(0.98);
    transition: transform 0.7s var(--ease);
}

.modal-card-short {
    min-height: max(calc(301 * var(--u)), 225px);
}

.modal[open] .modal-card {
    transform: none;
}

.modal-close {
    position: absolute;
    left: max(calc(30 * var(--u)), 20px);
    top: max(calc(19 * var(--u)), 14px);
    z-index: 2;
    width: max(calc(34 * var(--u)), 28px);
    aspect-ratio: 1;
    padding: 8px;
    transition: transform 0.6s var(--ease);
}

.modal-close:hover {
    transform: rotate(90deg);
}

.modal-close svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: #000;
    stroke-width: 1.5;
}

/* Form and thank-you views share one cell and crossfade */
.modal-view {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: max(calc(40 * var(--u)), 30px) max(calc(32 * var(--u)), 22px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.45s ease, transform 0.7s var(--ease), visibility 0s linear 0.45s;
}

.modal-view.is-active {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0.12s, 0.12s, 0s;
}

.modal-view h2 {
    font-weight: 400;
    font-size: max(calc(25 * var(--u)), 17px);
    line-height: 1.2;
}

.modal-view p {
    margin-top: max(calc(22 * var(--u)), 14px);
    font-size: max(calc(20 * var(--u)), 13px);
    line-height: 1.2;
}

.modal-view a {
    border-bottom: 1px solid #000;
    transition: opacity 0.3s ease;
}

.modal-view a:hover {
    opacity: 0.6;
}

/* Page behind a modal stays put */
html.modal-open {
    overflow: hidden;
}

/* ================= 404 ================= */
.notfound {
    padding: calc(77 * var(--u)) calc(42 * var(--u));
    font-size: max(calc(25 * var(--u)), 16px);
}

.notfound a {
    border-bottom: 1px solid #fff;
}

/* ================= Page transitions ================= */
@view-transition {
    navigation: auto;
}

::view-transition-group(*) {
    animation-duration: var(--page-dur);
    animation-timing-function: var(--ease);
}

/* To/from the homepage: new page slides down over the old one, which eases away and dims */
html:active-view-transition-type(slide)::view-transition-old(root) {
    animation: var(--page-dur) var(--ease) both vt-sink;
}

html:active-view-transition-type(slide)::view-transition-new(root) {
    animation: var(--page-dur) var(--ease) both vt-slide-down;
}

@keyframes vt-slide-down {
    from { transform: translateY(-100%); }
}

@keyframes vt-sink {
    to { transform: translateY(18%); filter: brightness(0.45); }
}

/* Between inner pages: header holds still, content crossfades with a slight lift */
html:active-view-transition-type(fade) .site-header {
    view-transition-name: site-header;
}

html:active-view-transition-type(fade)::view-transition-old(root) {
    animation: 0.35s ease both vt-fade-out;
}

html:active-view-transition-type(fade)::view-transition-new(root) {
    animation: 0.7s var(--ease) 0.12s both vt-fade-in;
}

::view-transition-old(site-header),
::view-transition-new(site-header) {
    animation-duration: 0.4s;
    animation-timing-function: ease;
}

@keyframes vt-fade-out {
    to { opacity: 0; }
}

@keyframes vt-fade-in {
    from { opacity: 0; transform: translateY(14px); }
}

/* Fallback for browsers without cross-page view transitions */
html.enter-slide body {
    animation: var(--page-dur) var(--ease) both vt-slide-down;
}

html.enter-fade main,
html.enter-fade .site-footer {
    animation: 0.7s var(--ease) both vt-fade-in;
}

/* ================= Smooth scroll (Lenis) ================= */
html.lenis,
html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

/* ================= Mobile ================= */
/* ================= Price list page ================= */
.prices-page {
    padding: calc(40 * var(--u)) calc(42 * var(--u)) 0;
}

/* Stays in view while scrolling through the pages */
.prices-bar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 14px 0;
    background: rgba(0, 0, 0, 0.75);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.prices-bar a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 170px;
}

.btn-outline {
    height: max(calc(49 * var(--u)), 38px);
    padding: 0 calc(28 * var(--u));
    border: 1px solid #fff;
    color: #fff;
    font-size: max(calc(20 * var(--u)), 13px);
    transition: background-color 0.4s ease, color 0.4s ease;
}

.btn-outline:hover {
    background: #fff;
    color: #000;
}

.price-pages {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    margin-top: 20px;
}

/* Pages are mostly black, so a hairline keeps their edges visible */
.price-page {
    width: min(860px, 60vw);
    outline: 1px solid #222;
}

[data-page="prices"] .site-footer {
    margin-top: auto;
    padding-top: calc(120 * var(--u));
}

@media (max-width: 768px) {
    .site-header {
        height: auto;
        align-items: center;
        padding: calc(22 * var(--m)) calc(19 * var(--m)) calc(20 * var(--m)) calc(17 * var(--m));
        z-index: 120;
    }

    .site-logo {
        width: calc(183 * var(--m));
        min-width: 0;
        margin: 0;
    }

    .nav {
        display: none;
    }

    .menu-toggle {
        display: block;
        width: calc(21 * var(--m));
        aspect-ratio: 1;
        padding: 0;
        margin-left: auto;
        position: relative;
    }

    .menu-toggle span {
        position: absolute;
        inset: 0;
        border-radius: 50%;
        background: #fff;
        transition: transform 0.6s var(--ease);
    }

    .menu-toggle::before {
        content: "";
        position: absolute;
        inset: -14px;
    }

    .menu-toggle[aria-expanded="true"] span {
        transform: scale(0.7);
    }

    .mobile-menu {
        position: fixed;
        inset: 0;
        z-index: 110;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0 calc(15 * var(--m));
        background: #000;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.5s ease, visibility 0s linear 0.5s;
    }

    .mobile-menu.is-open {
        opacity: 1;
        visibility: visible;
        transition: opacity 0.5s ease, visibility 0s;
    }

    .mobile-links {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        font-size: calc(30 * var(--m));
        line-height: calc(36 * var(--m));
    }

    .mobile-links a {
        opacity: 0;
        transform: translateY(18px);
        transition: opacity 0.45s ease, transform 0.8s var(--ease);
    }

    .mobile-menu.is-open .mobile-links a {
        opacity: 1;
        transform: none;
    }

    .mobile-menu.is-open .mobile-links a:nth-child(2) { transition-delay: 0.05s; }
    .mobile-menu.is-open .mobile-links a:nth-child(3) { transition-delay: 0.1s; }
    .mobile-menu.is-open .mobile-links a:nth-child(4) { transition-delay: 0.15s; }
    .mobile-menu.is-open .mobile-links a:nth-child(5) { transition-delay: 0.2s; }

    .mobile-tagline {
        position: absolute;
        left: calc(17 * var(--m));
        right: calc(17 * var(--m));
        bottom: calc(22 * var(--m) + env(safe-area-inset-bottom));
        font-size: calc(13.5 * var(--m));
        line-height: 1.25;
    }

    html.menu-open {
        overflow: hidden;
    }

    /* Home. iOS 26 Safari only draws page content behind its status bar once the page has scrolled,
       and only non-fixed content reaches behind the bottom toolbar. So the page gets a small scroll
       runway (--bleed-top) that main.js scrolls past on load, and the hero picture bleeds past both
       edges. Touch scrolling is blocked in main.js, so the page still feels fixed. */
    html:has(> body[data-page="home"]) {
        overscroll-behavior: none;
    }

    [data-page="home"] {
        --bleed-top: 80px;
        --bleed-bottom: 140px;
        height: auto;
        min-height: calc(100dvh + var(--bleed-top));
        padding-top: var(--bleed-top);
        overflow: visible;
    }

    [data-page="home"] .site-header {
        position: absolute;
        top: var(--bleed-top);
        left: 0;
        right: 0;
        justify-content: flex-end;
    }

    [data-page="home"] .site-header .site-logo {
        display: none;
    }

    html.menu-open [data-page="home"] .site-header .site-logo {
        display: block;
    }

    .hero::before {
        background-image: url("/media/home-reel-5d78b546-720.webp");
    }

    .hero-logo {
        top: 38%;
        width: calc(310 * var(--m));
    }

    .hero-tagline {
        /* clears the floating Safari/Chrome toolbar */
        bottom: calc(64 * var(--m) + env(safe-area-inset-bottom));
        font-size: calc(13.5 * var(--m));
        line-height: 1.18;
        width: calc(330 * var(--m));
    }

    .hero-tagline br {
        display: none;
    }

    .hero-sound {
        right: auto;
        left: calc(14 * var(--m));
        top: calc(16 * var(--m));
        bottom: auto;
        width: calc(44 * var(--m));
        min-width: 0;
        z-index: 130;
    }

    html.menu-open .hero-sound {
        opacity: 0;
        pointer-events: none;
    }

    /* Footer */
    .site-footer,
    [data-page] .site-footer {
        flex-direction: column;
        gap: 0;
        margin-top: calc(20 * var(--m));
        padding: 0 calc(17 * var(--m)) calc(16 * var(--m) + env(safe-area-inset-bottom));
    }

    .footer-tagline {
        max-width: none;
        font-size: calc(13.5 * var(--m));
        line-height: 1.25;
    }

    .footer-contact {
        display: none;
    }

    .back-to-top {
        display: block;
        align-self: center;
        margin-top: calc(34 * var(--m));
        padding: 8px 16px;
        font-size: calc(18 * var(--m));
    }

    [data-page="contact"] .back-to-top {
        display: none;
    }

    /* Video */
    .video-page,
    .reel-row {
        flex-direction: column;
        gap: calc(13 * var(--m));
    }

    .video-page {
        padding: 0 calc(13 * var(--m));
    }

    .reel-row .tile {
        flex: none;
    }

    .tile .sound {
        right: calc(10 * var(--m));
        bottom: calc(10 * var(--m));
        width: calc(40 * var(--m));
    }

    /* Photo */
    .photo-page,
    .photo-row {
        display: flex;
        flex-direction: column;
        gap: calc(13 * var(--m));
        height: auto;
    }

    .photo-page {
        padding: 0 calc(13 * var(--m));
    }

    .photo img {
        height: auto;
    }

    /* Contact */
    .contact-page {
        padding: calc(24 * var(--m)) calc(20 * var(--m)) 0;
    }

    .contact-direct {
        display: block;
        margin-bottom: calc(110 * var(--m));
        font-size: calc(24 * var(--m));
        line-height: 1.22;
    }

    .contact-direct a {
        display: block;
    }

    .contact-form {
        display: flex;
        flex-direction: column;
        width: 100%;
        min-width: 0;
        font-size: calc(20 * var(--m));
    }

    .field {
        gap: calc(12 * var(--m));
        margin-bottom: calc(52 * var(--m));
    }

    .field input {
        height: calc(40 * var(--m));
        font-size: 16px;
    }

    .interests {
        grid-template-columns: calc(214 * var(--m)) auto;
        row-gap: calc(28 * var(--m));
        margin-bottom: calc(50 * var(--m));
        font-size: calc(16.5 * var(--m));
    }

    .interests legend {
        font-size: calc(20 * var(--m));
        margin-bottom: calc(30 * var(--m));
    }

    .interests label {
        gap: calc(17 * var(--m));
    }

    .interests i {
        width: calc(20 * var(--m));
    }

    .field-message {
        gap: calc(28 * var(--m));
    }

    .field textarea {
        height: calc(156 * var(--m));
        font-size: 16px;
    }

    .btn-light {
        height: calc(49 * var(--m));
        padding: 0 calc(28 * var(--m));
        font-size: calc(20 * var(--m));
    }

    [data-page="contact"] .site-footer {
        margin-top: calc(130 * var(--m));
    }

    /* Price list */
    .prices-page {
        padding: calc(16 * var(--m)) calc(13 * var(--m)) 0;
    }

    .prices-bar {
        gap: calc(10 * var(--m));
        padding: calc(12 * var(--m)) 0;
    }

    .prices-bar a {
        flex: 1;
        min-width: 0;
        height: calc(49 * var(--m));
        padding: 0;
        font-size: calc(16 * var(--m));
    }

    .price-pages {
        gap: calc(14 * var(--m));
        margin-top: calc(8 * var(--m));
    }

    .price-page {
        width: 100%;
    }

    [data-page="prices"] .site-footer {
        margin-top: calc(80 * var(--m));
    }

    /* Modals */
    .modal-card,
    .modal-card-short {
        width: calc(355 * var(--m));
        min-height: calc(278 * var(--m));
        border-radius: calc(40 * var(--m));
    }

    .modal-close {
        left: calc(26 * var(--m));
        top: calc(20 * var(--m));
        width: calc(34 * var(--m));
    }

    .modal-view {
        padding: calc(42 * var(--m)) calc(30 * var(--m)) calc(28 * var(--m));
    }

    .modal-view h2 {
        font-size: calc(20 * var(--m));
    }

    .modal-view p {
        font-size: calc(16 * var(--m));
        margin-top: calc(14 * var(--m));
    }

    #priceGuideForm input {
        height: calc(32 * var(--m));
        font-size: 16px;
    }

    .btn-dark {
        height: calc(43 * var(--m));
        font-size: calc(17 * var(--m));
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after,
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation: none !important;
        transition-duration: 0.01s !important;
        transition-delay: 0s !important;
    }
}