/* The same monochrome journey language, opened into film and photography. */
html, body {overscroll-behavior-y: none;}
.header-pages {display:flex; gap:32px; font-size:14px;}
.header-pages a {padding:10px 0; border-bottom:1px solid transparent;}
.header-pages a[aria-current], .header-pages a:hover {border-color:currentColor;}
.header-on-film {color:#fff;}
.header-on-film .menu-toggle span {background:#fff;}
.footer-pages {display:flex; gap:30px; font-size:14px;}
.menu-dialog {max-height:calc(100svh - 28px); overflow-y:auto;}
.menu-dialog .dialog-top {justify-content:flex-end;}
.menu-dialog nav a {padding:18px 0;}
.menu-dialog .menu-location {margin-top:26px;}
.cinema-hero {position:relative; min-height:760px; height:100svh; max-height:1120px; background:#0d0d0d; color:#fff; overflow:hidden; isolation:isolate;}
.cinema-film {position:absolute; top:0; right:0; width:51%; height:100%; z-index:-1; background:#18191d;}
.cinema-film video {width:100%; height:100%; object-fit:cover; object-position:50% 50%;}
.film-shade {position:absolute; inset:0; background:linear-gradient(90deg,#0d0d0d 0%,#0d0d0d00 36%),linear-gradient(0deg,#0009,transparent 24%,transparent 75%,#0008);}
.cinema-copy {padding:clamp(170px,22svh,245px) 0 160px var(--margin); width:65%;}
.cinema-copy > .eyebrow {font-size:12px; letter-spacing:.2em; color:#babbb8; margin-bottom:28px;}
.cinema-copy h1 {font-size:clamp(76px,8.6vw,142px); line-height:.86; letter-spacing:-.055em; position:relative;}
.cinema-copy h1 span {color:#b1b1aa;}
.cinema-description {font-size:20px; color:#c2c2bc; margin:28px 0 25px;}
.cinema-copy .pill {font-size:12px; min-height:54px;}
.film-label {position:absolute; inset:130px 30px auto auto; display:flex; gap:28px; font-size:10px; letter-spacing:.15em; color:#fff;}
.cinema-bottom {position:absolute; inset:auto var(--margin) 28px; display:flex; justify-content:space-between; align-items:center; border-top:1px solid #ffffff42; padding-top:20px; gap:24px;}
.cinema-scroll {font-size:12px; letter-spacing:.13em; display:flex; align-items:center; gap:22px; min-height:44px;}
.cinema-scroll span {font-size:26px;}
.film-controls {display:flex; align-items:center; gap:26px;}
.film-controls button {font-size:12px; letter-spacing:.08em; min-height:44px; display:flex; align-items:center; gap:14px; padding:0;}
.film-controls button span {font-size:22px;}
.page-intro {padding:170px var(--margin) 0;}
.page-intro h1 {font-size:clamp(74px,9vw,148px); line-height:.89; letter-spacing:-.06em; margin-top:30px;}
.page-intro .eyebrow {font-size:12px; letter-spacing:.18em;}
.gallery-intro {display:grid; grid-template-columns:1.4fr 1fr; gap:7vw; align-items:end;}
.intro-aside {padding-bottom:8px;}
.intro-aside p {font-size:24px; line-height:1.3; margin:24px 0; letter-spacing:-.025em;}
.intro-aside .text-link {font-size:12px;}
.page-route {position:relative; height:240px; margin-top:38px; overflow:clip; --route-width:96px;}
.page-route-svg {position:absolute; inset:0; width:100%; height:100%; overflow:visible;}
.page-route-svg path {fill:none;}
.page-route-edge {stroke:#454541; stroke-width:calc(var(--route-width) + 4px);}
.page-route-surface {stroke:#111; stroke-width:var(--route-width);}
.page-route-lanes {stroke:#55554e; stroke-width:3px; stroke-dasharray:20 27;}
.route-car {position:absolute; top:0; left:0; will-change:transform; pointer-events:none;}
.route-car .overhead-vehicle {width:calc(var(--route-width) * 3.3);}
.route-label {position:absolute; left:var(--margin); bottom:5px; font-size:11px; letter-spacing:.18em; color:#777771;}
.gallery-collection {background:#111; color:#fff; padding:64px var(--margin) 70px; margin-top:35px;}
.collection-heading {display:flex; justify-content:space-between; align-items:center; gap:24px; border-bottom:1px solid #393935; padding-bottom:28px; margin-bottom:54px;}
.collection-heading h2 {font-size:24px; letter-spacing:-.035em;}
.collection-heading > span {font-size:12px; letter-spacing:.12em; color:#9b9b94;}
.gallery-grid {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:50px 26px; align-items:start;}
.gallery-item {display:block; min-width:0;}
.gallery-item:nth-child(3n+2) {padding-top:65px;}
.gallery-item:nth-child(3n) {padding-top:125px;}
.gallery-image-wrap {position:relative; aspect-ratio:3/4; overflow:hidden; background:#20201e;}
.gallery-image-wrap img {width:100%; height:100%; object-fit:cover; object-position:50% 30%; transition:transform .5s;}
.gallery-item:hover img {transform:scale(1.025);}
.gallery-play,.gallery-expand {position:absolute; right:16px; bottom:16px; width:44px; height:44px; border:1px solid #fffa; border-radius:50%; display:grid; place-items:center; background:#1119; color:#fff; font-size:23px;}
.gallery-play {inset:50% auto auto 50%; transform:translate(-50%,-50%); width:62px; height:62px; font-size:30px; backdrop-filter:blur(5px);}
.gallery-caption {display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding-top:16px; font-size:14px; color:#e2e2dc;}
.gallery-caption > span:last-child {font-size:11px; letter-spacing:.08em; color:#8a8a83;}
.gallery-end {display:flex; justify-content:space-between; align-items:center; border-top:1px solid #393935; gap:32px; margin-top:90px; padding-top:50px;}
.gallery-end p {font-size:clamp(28px,4vw,54px); letter-spacing:-.04em;}
.contact-intro {display:grid; grid-template-columns:1fr 1.05fr; gap:8vw; align-items:start;}
.contact-heading h1 {font-size:clamp(74px,8.5vw,134px);}
.contact-lead {font-size:22px; line-height:1.4; letter-spacing:-.025em; margin-top:32px;}
.contact-options {padding-top:35px;}
.contact-option {display:flex; gap:22px; align-items:flex-start; padding:34px 0; border-top:1px solid var(--line);}
.contact-option:last-child {border-bottom:1px solid var(--line);}
.contact-number {font-size:12px; color:#92928b; padding-top:5px;}
.contact-option h2 {font-size:clamp(24px,2.3vw,36px); letter-spacing:-.04em; line-height:1;}
.contact-option p {font-size:16px; line-height:1.5; color:#74746e; margin-top:14px;}
.contact-action {display:block; font-size:11px; letter-spacing:.11em; margin-top:24px;}
.contact-arrow {font-size:30px; line-height:1; margin-left:auto; transition:transform .2s;}
.contact-option:hover .contact-arrow {transform:translate(3px,-3px);}
.contact-image-strip {position:relative; height:clamp(450px,58vw,740px); background:#141a16; color:white; margin-top:35px; overflow:hidden;}
.contact-image-strip > img {width:100%; height:100%; object-fit:cover; object-position:50% 52%;}
.contact-image-strip::after {content:""; position:absolute; inset:0; background:linear-gradient(90deg,#07140bdd,transparent 80%);}
.contact-image-strip > div {position:absolute; z-index:1; inset:auto var(--margin) 64px;}
.contact-image-strip h2 {font-size:clamp(48px,6vw,96px); margin:24px 0;}
.contact-image-strip .text-link {font-size:12px;}
.media-dialog {position:fixed; inset:0; width:100%; max-width:none; height:100%; max-height:none; margin:0; padding:0; background:#0c0c0c; color:#fff; border:0; overflow:hidden;}
.media-dialog[open] {display:flex; flex-direction:column;}
.media-toolbar {height:76px; display:flex; align-items:center; justify-content:space-between; padding:0 28px; flex:none;}
.media-toolbar p {font-size:15px;}
.media-toolbar .close-button {position:static; color:white; background:none; width:48px; height:48px;}
.media-stage {display:grid; place-items:center; flex:1; min-height:0; padding:0 24px;}
.media-stage img,.media-stage video {width:100%; height:100%; max-height:calc(100svh - 156px); object-fit:contain;}
.media-bottom {height:80px; flex:none; display:flex; align-items:center; justify-content:center; gap:36px;}
.media-bottom button {border:1px solid #666; border-radius:50%; width:44px; height:44px; font-size:24px;}
.media-bottom button:disabled {opacity:.25; cursor:default;}
.media-bottom p {font-size:12px; color:#aaa; min-width:80px; text-align:center;}
.media-dialog.single-film .media-bottom {display:none;}
.media-dialog.single-film .media-stage video {max-height:calc(100svh - 96px);}
@media (min-width:1500px) {
  .cinema-copy {padding-top:clamp(180px,20svh,260px);}
}
@media (max-width:1000px) and (min-width:761px) {
  .cinema-copy h1 {font-size:9.2vw;}
  .film-label {display:none;}
  .contact-intro {gap:5vw;}
  .contact-option {gap:12px;}
  .film-controls {gap:16px;}
  .film-controls button {font-size:10px;}
}
@media (max-width:760px) {
  .header-pages {display:none;}
  .header-right {gap:20px;}
  .header-on-film .byjh-brand span {color:#fff;}
  .cinema-hero {height:100svh; min-height:740px; max-height:1000px;}
  .cinema-film {width:100%;}
  .cinema-film video {object-position:50% 40%;}
  .film-shade {background:linear-gradient(0deg,#050606 0%,#07090ae0 23%,#03040545 63%,#05060699 100%);}
  .film-label {top:122px; right:24px; left:24px; justify-content:space-between; font-size:10px;}
  .cinema-copy {position:absolute; inset:auto 24px 168px; width:auto; padding:0;}
  .cinema-copy > .eyebrow {font-size:10px; letter-spacing:.15em; margin-bottom:18px; color:#d2d3ce;}
  .cinema-copy h1 {font-size:clamp(52px,14vw,104px); line-height:.9; letter-spacing:-.05em;}
  .cinema-copy h1 span {color:#e1e1d8;}
  .cinema-description {font-size:18px; margin:20px 0 24px;}
  .cinema-copy .pill {font-size:11px; min-height:52px; padding:15px 24px;}
  .cinema-bottom {inset:auto 24px 22px; flex-direction:column; align-items:stretch; gap:4px; padding-top:12px;}
  .cinema-scroll {font-size:10px; letter-spacing:.1em; justify-content:space-between; min-height:44px;}
  .film-controls {justify-content:space-between; gap:16px;}
  .film-controls button {font-size:10px; letter-spacing:.07em;}
  .film-controls button span {font-size:20px;}
  .page-intro {padding:132px 24px 0;}
  .page-intro h1 {font-size:17vw; margin-top:24px;}
  .page-intro .eyebrow {font-size:11px; letter-spacing:.15em;}
  .gallery-intro {display:block;}
  .intro-aside {padding-top:28px;}
  .intro-aside p {font-size:21px; margin:18px 0 14px;}
  .intro-aside .text-link {font-size:11px;}
  .page-route {height:180px; margin-top:20px; --route-width:74px;}
  .route-label {font-size:9px; letter-spacing:.12em; bottom:0;}
  .gallery-collection {margin-top:28px; padding:32px 20px 42px;}
  .collection-heading {margin-bottom:30px; padding-bottom:22px; gap:12px;}
  .collection-heading h2 {font-size:18px;}
  .collection-heading > span {font-size:9px; letter-spacing:.06em;}
  .gallery-grid {grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 14px;}
  .gallery-item:nth-child(n) {padding-top:0;}
  .gallery-item:nth-child(2n) {padding-top:40px;}
  .gallery-caption {font-size:12px; line-height:1.4; padding-top:12px; gap:7px;}
  .gallery-caption > span:last-child {font-size:9px;}
  .gallery-play {width:45px; height:45px; font-size:23px;}
  .gallery-expand {width:32px; height:32px; font-size:18px; right:8px; bottom:8px;}
  .gallery-end {display:block; margin-top:50px; padding-top:32px;}
  .gallery-end p {font-size:32px; margin-bottom:26px;}
  .contact-intro {display:block;}
  .contact-heading h1 {font-size:21vw;}
  .contact-lead {font-size:20px; margin-top:25px;}
  .contact-options {padding-top:38px;}
  .contact-option {padding:27px 0; gap:15px;}
  .contact-option h2 {font-size:25px;}
  .contact-option p {font-size:16px; margin-top:12px;}
  .contact-action {font-size:10px; letter-spacing:.07em; margin-top:20px;}
  .contact-arrow {font-size:27px;}
  .contact-image-strip {height:520px; margin-top:28px;}
  .contact-image-strip > img {object-position:62% 50%;}
  .contact-image-strip::after {background:linear-gradient(0deg,#07140bea,transparent);}
  .contact-image-strip > div {inset:auto 24px 34px;}
  .contact-image-strip h2 {font-size:12vw;}
  .contact-image-strip .eyebrow {font-size:10px;}
  .contact-image-strip .text-link {font-size:11px;}
  .footer-top {flex-wrap:wrap; gap:26px;}
  .footer-pages {order:3; width:100%; justify-content:space-between; font-size:14px;}
  .footer-top .back-top {margin-left:auto;}
  .media-toolbar {height:66px; padding:0 16px;}
  .media-stage {padding:0 8px;}
  .media-stage img,.media-stage video {max-height:calc(100svh - 146px);}
  .media-toolbar p {font-size:14px;}
}
@media (max-height:650px) and (min-width:761px) {
  .cinema-hero {min-height:650px;}
  .cinema-copy {padding-top:155px;}
  .cinema-copy h1 {font-size:72px;}
  .cinema-description {margin:22px 0;}
}
@media (max-width:360px) {
  .cinema-copy,.cinema-bottom {left:20px; right:20px;}
  .page-intro {padding-left:20px; padding-right:20px;}
  .gallery-collection {padding-left:16px; padding-right:16px;}
  .gallery-grid {gap:22px 12px;}
  .collection-heading h2 {font-size:16px;}
  .collection-heading > span {font-size:8px;}
  .contact-option h2 {font-size:22px;}
  .contact-number {font-size:10px;}
}
@media (prefers-reduced-motion:reduce) {
  .gallery-item:hover img {transform:none;}
}

/* Vehicle specifications stay in the current journey. */
.vehicle-dialog {width:min(1120px,calc(100% - 32px)); padding:0; background:#111; color:#fafaf9; max-height:calc(100svh - 32px); border:1px solid #343430;}
.vehicle-modal-top {position:sticky; top:0; z-index:2; display:flex; justify-content:space-between; align-items:center; padding:14px 28px; background:#111; border-bottom:1px solid #343430;}
.vehicle-modal-top .eyebrow {font-size:12px;}
.vehicle-modal-top button {color:#fafaf9;}
.vehicle-modal-layout {display:grid; grid-template-columns:1fr 1fr; gap:36px; padding:32px; align-items:start;}
.vehicle-modal-visual {position:sticky; top:108px;}
.vehicle-modal-visual img {width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; background:#222;}
.vehicle-modal-visual p {font-size:12px; letter-spacing:.12em; color:#aaa; margin-top:18px; line-height:1.6;}
.vehicle-modal-content > .eyebrow {font-size:12px; color:#9d9d97;}
.vehicle-modal-content h2 {font-size:clamp(32px,4vw,56px); letter-spacing:-.055em; margin:16px 0 28px; overflow-wrap:anywhere;}
#vehicle-specs details {border-top:1px solid #41413b;}
#vehicle-specs details:last-child {border-bottom:1px solid #41413b;}
#vehicle-specs summary {font-size:16px; padding:18px 28px 18px 0; cursor:pointer; list-style:none; position:relative;}
#vehicle-specs summary::-webkit-details-marker {display:none;}
#vehicle-specs summary::after {content:'+'; position:absolute; right:0; font-size:22px; top:13px; color:#aaa;}
#vehicle-specs details[open] summary::after {content:'−';}
#vehicle-specs ul {margin:0; padding:0 18px 20px; color:#b9b9b2; font-size:15px; line-height:1.65;}
#vehicle-specs li + li {margin-top:6px;}
.vehicle-modal-content .pill {margin-top:28px; width:100%; font-size:11px;}
@media (max-width:760px) {
  .vehicle-dialog {width:calc(100% - 20px); max-height:calc(100svh - 20px);}
  .vehicle-modal-top {padding:10px 20px;}
  .vehicle-modal-layout {grid-template-columns:1fr; padding:20px; gap:26px;}
  .vehicle-modal-visual {position:static;}
  .vehicle-modal-visual img {aspect-ratio:16/10;}
  .vehicle-modal-content h2 {font-size:38px; margin-bottom:22px;}
}

/* A tailored enquiry form, using the same quiet rules and bold typography. */
.contact-intro {grid-template-columns:.85fr 1.25fr; gap:7vw;}
.contact-heading h1 {font-size:clamp(68px,7.8vw,122px);}
.contact-form-wrap {min-width:0; padding-top:28px; scroll-margin-top:28px;}
.contact-form {gap:25px;}
.contact-form-heading {padding-bottom:25px; border-bottom:1px solid #c8c8c1; margin-bottom:2px;}
.contact-form-heading .eyebrow {color:#74746e; margin-bottom:12px;}
.contact-form-heading > p:last-child {font-size:24px; letter-spacing:-.03em;}
.contact-form label {position:relative; display:block; font-size:14px; line-height:1.4; min-width:0;}
.contact-form .form-row {gap:24px;}
.contact-form .optional {font-size:12px; color:#86867f; margin-left:5px;}
.contact-form .required-mark {color:#86867f;}
.contact-form input,.contact-form select,.contact-form textarea {margin-top:10px; border:0; border-bottom:1px solid #bdbdb5; border-radius:0; padding:12px 0; background:transparent; font-size:16px; min-height:48px;}
.contact-form select {padding-right:22px; max-width:100%; text-overflow:ellipsis;}
.contact-form input::placeholder,.contact-form textarea::placeholder {color:#91918a;}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus {outline:none; border-bottom-color:#111; box-shadow:0 1px 0 #111;}
.contact-form textarea {min-height:112px; line-height:1.5;}
.contact-form fieldset {padding:0; margin:0; border:0; min-width:0; display:grid; gap:25px;}
.contact-form legend {font-size:12px; color:#74746e; letter-spacing:.13em; text-transform:uppercase; padding:0 0 20px;}
.contact-form .contact-required {font-size:12px; color:#86867f; margin-top:-12px;}
.contact-form .contact-delivery-note {font-size:14px; color:#6e6e68; line-height:1.5; margin-top:-8px;}
.contact-form .pill {justify-content:space-between; margin-top:0; min-height:58px; padding:17px 25px;}
.contact-review {scroll-margin-top:28px;}
.contact-review h2 {font-size:clamp(32px,4vw,54px); margin:22px 0;}
.contact-review .review-note {font-size:16px; line-height:1.5; color:#74746e; margin-bottom:24px;}
.contact-review textarea {border:1px solid #c8c8c1; padding:18px; line-height:1.6; border-radius:0; resize:vertical;}
.contact-review-actions {display:flex; flex-wrap:wrap; gap:20px; align-items:center; margin-top:22px;}
.contact-review-actions .pill {font-size:11px;}
.contact-review-actions .text-link {font-size:12px;}
#contact-status {font-size:14px; line-height:1.5; margin-top:18px; color:#6e6e68;}
@media (max-width:760px) {
  .contact-intro {grid-template-columns:1fr; gap:36px;}
  .contact-heading h1 {font-size:18vw;}
  .contact-form-wrap {padding-top:0;}
  .contact-form .form-row {grid-template-columns:1fr; gap:25px;}
  .contact-form-heading > p:last-child {font-size:22px;}
}