/* Architectural editorial direction: white, graphite, generous space, fine rules.
   This stylesheet is shared by all pages; 3D rendering is an offline build step. */
/* The wash that makes copy legible over the render. It is a long, soft falloff, never
   a panel: solid across the reading column, gone before the building starts. */
:root {
  --film-veil:
    linear-gradient(to left, #f4f2edfa 0%, #f4f2edf5 27%, #f4f2edc4 41%, #f4f2ed54 58%, #f4f2ed00 77%),
    radial-gradient(58% 42% at 5% 100%, #f4f2edf7 0%, #f4f2edd6 32%, #f4f2ed80 54%, #f4f2ed26 72%, #f4f2ed00 86%),
    linear-gradient(to bottom, #f4f2eda8 0%, #f4f2ed00 17%, #f4f2ed00 72%, #f4f2edc4 100%);
  /* The card the remaining HTML sits on. Paper, not fog: it has an edge, so you can see
     where it stops and where the film starts again. */
  --film-card: #f6f4f0;
  --film-card-line: #00000016;
  /* Glass, not paper. An opaque card bought legibility by deleting the photograph behind
     it: a section carrying 1172px of articles covered the frame for its whole length.
     Frosting keeps the picture. Measured against the darkest point under a panel on every
     frame the film shows, .64 is the floor for 7:1 against the ink; .68 leaves headroom
     and still lets about a third of the image through. */
  --film-glass: rgb(246 244 240 / .68);
  /* The narration is a small box, so it can afford to be more opaque than the reading
     panels without costing the picture anything worth having. */
  --film-glass-strong: rgb(246 244 240 / .87);
  --film-glass-line: #00000022;
  --film-blur: blur(20px) saturate(1.06);
}
.site-header { height: 84px; }
.header-inner { gap: 30px; }
.brand, .brand img { width: 166px; }
.brand img { filter: grayscale(1); }
/* The footer is where the mark signs the page, so it signs in its own colours. Grey keeps
   the top of the page quiet; a signature that fades into the paper is not a signature. */
.footer-brand img { filter: none; }
.site-nav { gap: 30px; }
.header-cta { border-radius: 0; }
.opening { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 80px; padding-block: 45px 50px; }
.opening h1 { font-size: clamp(48px, 4.6vw, 72px); line-height: 1.25; font-weight: 500; letter-spacing: -1.7px; }
.opening h1 span { color: var(--muted); }
.opening-details { padding-bottom: 5px; }
.opening-details > p { max-width: 480px; font-size: 16px; line-height: 1.95; }
.opening-actions { display: flex; gap: 12px; margin-top: 25px; }
.opening-actions .button { font-size: 14px; padding: 12px 18px; gap: 20px; min-height: 52px; }
.button-outline { background: transparent; color: var(--ink); border-color: var(--line); }
.button-outline:hover { background: var(--surface); border-color: var(--ink); }
/* The rendered sequence IS the page. Nothing boxes it in: the film runs edge to edge
   and the copy floats in a column beside the building, held legible by a one-sided wash. */
.film { position: fixed; inset: 0; z-index: 0; overflow: hidden; }
.film .sequence-poster, .film .sequence-poster img, .film .sequence-canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.film .sequence-canvas { opacity: 0; transition: opacity .45s; }
.film .sequence-canvas.is-ready { opacity: 1; }
.film::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--film-veil); }
/* While the film runs, nothing at all is laid across it — no veil, no gradient, no haze.
   The narration is cast into the frames and carries its own light edge, so the picture
   never has to be dimmed to make writing legible on top of it. */
.cinema:not(.motion-off) .film::after { background: none; }
/* Once the tour has landed in the majlis the film has said what it came to say.
   Its controls retire so the form and the footer own the last screen. */
.film-hud, .film-progress { transition: opacity .5s ease, transform .5s cubic-bezier(.22,1,.36,1); }
.cinema.film-landed .film-hud, .cinema.film-landed .film-progress {
  opacity: 0; pointer-events: none; transform: translateY(14px); visibility: hidden;
}

/* Measured on the glass as it actually renders, the page's ordinary muted grey came out
   at 3.9:1 and its small print at 2.8:1 — under AA, and exactly the faintness the panel
   was meant to cure. Type is darkened rather than the glass thickened, because that buys
   the reading back without buying back any of the photograph. Hierarchy is carried by
   size and weight here, which is the sounder way to carry it over a picture anyway. */
.cinema:not(.motion-off) { --muted: #26262d; }
.cinema:not(.motion-off) .form-note, .cinema:not(.motion-off) small,
.cinema:not(.motion-off) .visual-caption { color: #2a2a33; }
.cinema { position: relative; color-scheme: light; color: var(--ink); }
.cinema > .scene {
  position: relative; z-index: 1; background: transparent; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  gap: clamp(20px, 3vh, 38px); padding-block: clamp(90px, 13vh, 150px);
}
.cinema > .scene:not(.wrap) { padding-inline: var(--gutter); }
.cinema:not(.motion-off) .scene-open { justify-content: flex-end; }
.cinema > .scene > * { width: min(560px, 100%); max-width: 100%; }
.cinema .paths-grid, .cinema .journal-grid, .cinema .approach-grid,
.cinema .faq-grid, .cinema .process-steps, .cinema .contact-grid {
  display: grid; grid-template-columns: 1fr; gap: clamp(26px, 4vh, 46px); max-width: 100%;
}
.cinema .section-intro { display: block; max-width: 100%; }
/* The film is photography now, not a rendered scene with the words cut into it, so the
   headings are back where they belong: on the card, in the document, read once. */
/* What is left is what you do something with — the paths, the steps, the articles, the
   questions, the form. It sits on paper with a real edge, held to the side of the frame
   the words are never cast on, so the two never cross. */
/* The panel stands where the picture is empty, and the empty part moves: the edge energy
   of each section's frame was measured in ten vertical bands, and the panel takes the
   calmest three. That puts it over sky and sand instead of over the building — which is
   what it had been doing on four of the seven sections, all pinned to the same side. */
.cinema:not(.motion-off) > .scene { gap: 0; }
.cinema:not(.motion-off) > .scene[data-side="left"] { align-items: flex-end; }
.cinema:not(.motion-off) > .scene[data-side="right"] { align-items: flex-start; }
.cinema:not(.motion-off) > .scene > * {
  width: min(430px, 34vw); margin: 0;
  background: var(--film-glass);
  -webkit-backdrop-filter: var(--film-blur);
  backdrop-filter: var(--film-blur);
  border-inline: 1px solid var(--film-glass-line);
  padding-inline: clamp(19px, 2vw, 28px);
}
/* Without frosting the tint alone is a haze, and haze is what made the copy hard to read
   the first time. A browser that cannot blur gets the paper card instead. */
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .cinema:not(.motion-off) > .scene > * { background: var(--film-card); }
}
.cinema:not(.motion-off) > .scene > * + * { padding-block-start: clamp(18px, 2.6vh, 30px); }
.cinema:not(.motion-off) > .scene > :first-child {
  padding-block-start: clamp(20px, 3vh, 32px); border-block-start: 1px solid var(--film-glass-line);
}
.cinema:not(.motion-off) > .scene > :last-child {
  padding-block-end: clamp(20px, 3vh, 32px); border-block-end: 1px solid var(--film-glass-line);
}
/* A panel has to leave the frame room above and below it, so the long blocks stop
   stacking into a column taller than the screen: four steps become two rows of two, and
   the articles trade their portrait images for a tight line each. */
.cinema:not(.motion-off) .process-steps { grid-template-columns: 1fr 1fr; gap: clamp(15px, 2.2vh, 24px) 20px; }
.cinema:not(.motion-off) .process-step > span { font-size: 26px; margin-bottom: 7px; }
.cinema:not(.motion-off) .process-step h3 { font-size: 16px; }
.cinema:not(.motion-off) .process-step p { font-size: 13px; line-height: 1.6; }
.cinema:not(.motion-off) .journal-grid { gap: clamp(15px, 2.2vh, 22px); }
.cinema:not(.motion-off) .journal-lead img { aspect-ratio: 2.6; }
.cinema:not(.motion-off) .journal-lead h3 { font-size: 19px; }
.cinema:not(.motion-off) .journal-small { grid-template-columns: 1fr 78px; gap: 14px; }
.cinema:not(.motion-off) .journal-small img { width: 78px; height: 78px; }
.cinema:not(.motion-off) .paths-grid { gap: clamp(22px, 3vh, 34px); }
.cinema:not(.motion-off) .path-heading h3 { font-size: 25px; }
.cinema:not(.motion-off) .path-heading { margin-bottom: 15px; }
.cinema:not(.motion-off) .path { padding-top: 18px; }
.cinema:not(.motion-off) .approach-point { padding-bottom: 18px; }
.cinema:not(.motion-off) .journal-header .text-link { margin-top: 15px; }
/* The film is the photography. A thumbnail of a building laid on top of a film of a
   building says the same thing twice and costs the panel 150px of height. */
.cinema:not(.motion-off) .journal-lead img { display: none; }

/* Type scaled to the column it is set in, not to the page it came from. A 64px headline
   measured across a 374px line wraps four times and spends 342px saying one sentence;
   the same words at 32px say it in half the height and read better doing it. */
.cinema:not(.motion-off) > .scene h1 { font-size: clamp(34px, 3.4vw, 50px); line-height: 1.22; letter-spacing: -1.1px; }
.cinema:not(.motion-off) > .scene h2 { font-size: clamp(24px, 2.2vw, 32px); line-height: 1.26; letter-spacing: -.5px; font-weight: 500; }
.cinema:not(.motion-off) > .scene h3 { font-size: 17px; }
.cinema:not(.motion-off) > .scene p, .cinema:not(.motion-off) > .scene li { font-size: 14.5px; line-height: 1.74; }
.cinema:not(.motion-off) > .scene .section-intro p, .cinema:not(.motion-off) .approach-copy > p { margin-top: 14px; }
.cinema:not(.motion-off) .opening-actions { margin-top: 19px; }
.cinema:not(.motion-off) .process-note { font-size: 12px; }
/* The film has landed by the time the form arrives and the narration has stepped aside,
   so this panel may run tall — but not past the screen it has to be filled in on. */
.cinema:not(.motion-off) .contact-grid { gap: clamp(16px, 2.2vh, 24px); }
.cinema:not(.motion-off) .lead-form fieldset { margin-bottom: clamp(13px, 1.8vh, 18px); }
.cinema:not(.motion-off) .lead-form legend { font-size: 15px; margin-bottom: 9px; }
/* On paper, type needs no glow behind it. */
.cinema:not(.motion-off) > .scene h1, .cinema:not(.motion-off) > .scene h2,
.cinema:not(.motion-off) > .scene h3, .cinema:not(.motion-off) > .scene p,
.cinema:not(.motion-off) > .scene li, .cinema:not(.motion-off) .contact-details a { text-shadow: none; }
.cinema:not(.motion-off) .lead-form { background: none; border: 0; padding: 0; }
/* Inside the film every block reads as one column. Two-column intros and split
   headers would push copy off the wash and onto the building. */
.cinema .service-paths .section-intro { display: block; max-width: 100%; margin: 0; text-align: start; }
.cinema .service-paths .section-intro p { margin: 20px 0 0; max-width: 100%; }
.cinema .journal-header { display: block; margin-bottom: 0; }
.cinema .journal-header > p { margin-top: 14px; }
.cinema .journal-header .text-link { margin-top: 22px; }
.cinema .journal-small { grid-template-columns: 1fr 104px; gap: 18px; }
.cinema .journal-small img { width: 104px; height: 104px; }
.cinema .path { border-top-color: #00000026; }
.cinema .approach-point { border-bottom-color: #00000021; }
.cinema .faq-list details { border-color: #00000021; }

/* One palette regardless of the visitor's theme: the render is a daylight scene. */
.cinema .approach, .cinema .approach p { color: var(--muted); }
.cinema .approach h2, .cinema .approach h3 { color: var(--ink); }
.cinema .opening-title h1 span { color: #55555f; }
.cinema > .scene h1, .cinema > .scene h2 { text-shadow: 0 1px 24px #f4f2ede0, 0 1px 3px #f4f2ed94; }
.cinema > .scene h3, .cinema > .scene p, .cinema > .scene li { text-shadow: 0 1px 16px #f4f2edd6; }
.cinema .text-link, .cinema .path .text-link { border-color: #00000024; }
/* A form needs a real surface; nothing else does. */
.cinema .lead-form { background: #fbfaf7f0; padding: clamp(20px, 3vw, 32px); border: 1px solid #0000001a; }
.cinema .lead-form * { text-shadow: none; }
.site-footer { position: relative; z-index: 3; }
/* The film is a daylight render, so this page keeps the light palette in either theme.
   Pinning the tokens fixes buttons, links and borders in one place. */
body:has(main.cinema) {
  --paper: #fafafa; --surface: #f0f0ef; --ink: #1b1b1f; --muted: #4b4b53;
  --accent: #242427; --accent-hover: #424247; --line: #cfcfcf; --white: #ffffff;
}
body:has(main.cinema) .site-header { background: #f7f5f1d6; border-bottom-color: #00000012; backdrop-filter: blur(14px) saturate(1.06); }
body:has(main.cinema) .brand img { filter: none; }
body:has(main.cinema) .contact-details a { color: var(--ink); }

/* Stage narration floats too: no panel, just the line and its progress. It sits on the
   side the card does not take. A card taller than the screen cannot be padded clear of a
   fixed strip — the two simply have to be on opposite sides of the frame. */
/* Measured over the finished film the narration fell to 2.3:1 on the darker stages once
   the wash was taken away, so it gets the same answer the rest of the page got: a small
   panel with an edge, not a cloud spread over the picture. */
/* The reading panel changes sides with the picture, so the fixed overlays have to change
   with it. Pinned to one side they landed on top of the copy the moment the panel moved
   under them — narration printed over a paragraph. The side is announced by the section
   that currently owns the screen; these take whichever one it leaves. */
.cinema:not(.motion-off)[data-film-side="right"] .film-hud { inset-inline: auto var(--gutter); }
.cinema:not(.motion-off) .film-hud {
  inset-inline: var(--gutter) auto;
  background: var(--film-glass-strong); border: 1px solid var(--film-glass-line);
  -webkit-backdrop-filter: var(--film-blur); backdrop-filter: var(--film-blur);
  padding: 13px 15px 11px;
}
.cinema:not(.motion-off) .film-hud p { text-shadow: none; }
.cinema:not(.motion-off) .motion-control { background: none; border-color: #00000026; }
.cinema:not(.motion-off) .motion-control:hover { background: #ffffffb0; }
body:has(main.cinema):not(:has(.motion-off)) .floating-contact { left: auto; right: 25px; }
body:has(main.cinema:not(.motion-off)[data-film-side="right"]) .floating-contact { right: auto; left: 25px; }
.film-hud {
  position: fixed; z-index: 4; bottom: 88px; inset-inline-end: var(--gutter);
  width: min(292px, calc(100vw - var(--gutter) * 2));
  display: grid; gap: 6px; justify-items: start; color: var(--ink);
}
.film-hud p { margin: 0; text-shadow: 0 1px 16px #f4f2edeb, 0 1px 3px #f4f2eda3; }
.journey-eyebrow { direction: ltr; display: flex; align-items: baseline; gap: 4px; font-size: 11px; letter-spacing: .04em; color: var(--muted); font-variant-numeric: tabular-nums; }
.chapter-number { font-size: 11px; font-weight: 600; color: var(--brand-teal-deep); }
.chapter-total { opacity: .62; }
.chapter-title { font-size: 19px; font-weight: 500; line-height: 1.2; }
.chapter-detail { font-size: 12.5px; line-height: 1.55; color: #2b2b33; }
.film-note { font-size: 10px; color: #34343c; }
.stage-track { display: flex; gap: 5px; width: 100%; margin-block: 4px 2px; }
.stage-track button { position: relative; flex: 1; height: 4px; padding: 0; border: 0; background: #14141833; transition: background .25s; }
.stage-track button::after { content: ""; position: absolute; inset: -13px 0; }
.stage-track button:hover { background: #14141873; }
.stage-track button[aria-current="true"] { background: var(--brand-teal); }
.stage-track button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.motion-control { font-size: 11px; border: 1px solid #0000002e; padding: 7px 11px; min-height: 36px; color: var(--ink); background: #fbfaf7cc; }
.motion-control:hover { background: #fff; }
.film-progress { position: fixed; z-index: 4; top: 84px; inset-inline: 0; height: 3px; background: #0000000f; }
.film-progress span { display: block; width: 100%; height: 100%; background: var(--brand-teal); transform: scaleX(0); transform-origin: right; }
/* With the film paused there is no stage to narrate: only the control that brings it back. */
.cinema.motion-off .stage-track, .cinema.motion-off .film-progress,
.cinema.motion-off .journey-eyebrow, .cinema.motion-off .chapter-title,
.cinema.motion-off .chapter-detail, .cinema.motion-off .film-note { display: none; }
.cinema.motion-off .film-hud { background: none; padding: 0; inset-inline-end: var(--gutter); inset-inline-start: auto; width: auto; }
.visual-caption { display: flex; justify-content: space-between; gap: 20px; font-size: 11px; padding-block: 14px; color: var(--muted); }
.section { padding-block: 115px; }
.service-paths .section-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; max-width: none; text-align: start; align-items: end; margin-bottom: 55px; }
.service-paths .section-intro p { margin: 0 0 5px; max-width: 450px; }
.paths-grid { gap: 50px; }
.path { padding-top: 24px; }
.path-heading { margin-bottom: 23px; }
.path-heading h3 { font-size: 30px; }
.path-heading span { font-size: 12px; }
.path-media { aspect-ratio: 1.65; background: #dedfdf; margin-bottom: 26px; }
.path-media img { object-fit: cover; }
.path p { font-size: 16px; max-width: 480px; }
.path .text-link { width: 100%; justify-content: space-between; border-color: var(--line); padding-bottom: 16px; }
.path .text-link:hover { border-color: var(--ink); }
.approach { background: #252528; padding-block: 112px; color: #f6f6f5; }
.approach p { color: #c7c7cc; }
.approach-grid { grid-template-columns: 1.15fr 1fr; gap: 110px; }
.approach-copy h2 { font-size: clamp(32px,3.5vw,50px); font-weight: 400; }
.approach-copy > p { font-size: 16px; max-width: 440px; }
.approach-point { border-bottom: 1px solid #ffffff26; padding-bottom: 26px; }
.approach-point > svg { color: #e6e6e6; }
.process { padding-block: 115px; }
.process-step > span { color: var(--muted); font-size: 56px; margin-bottom: 34px; }
.journal { padding-block: 90px; background: var(--surface); border: 0; }
.journal-lead img, .journal-small img { filter: saturate(.4); }
.contact-section { background: #e9e9e7; padding-block: 100px; color: #222225; }
.contact-section p, .contact-section small { color: #626269; }
.contact-section .lead-form { --paper: #f7f7f6; --line: #c7c7c7; --ink: #222225; --muted: #626269; --accent: #242427; --accent-hover: #424247; --white: #fff; }
.contact-copy h2 { font-weight: 400; font-size: clamp(40px,4.4vw,64px); }
.contact-grid { gap: 100px; }
.site-footer { padding-top: 52px; }
.floating-contact { box-shadow: none; border: 1px solid var(--line); }
@media (prefers-color-scheme: dark) {
  /* Only pages whose footer really is dark. The cinema page pins the light palette in
     both schemes, so inverting its mark there turned it white on white paper and the
     logo disappeared from the bottom of the page entirely. */
  body:not(:has(main.cinema)) .brand img,
  body:not(:has(main.cinema)) .footer-brand img { filter: brightness(0) invert(.92); }

  body:not(:has(main.cinema)) .contact-section { background: #2b2b2f; color: #f1f1f0; }
  body:not(:has(main.cinema)) .contact-section p, body:not(:has(main.cinema)) .contact-section small { color: #c6c6cb; }
  body:not(:has(main.cinema)) .contact-section .lead-form { --paper: #202024; --line: #535359; --ink: #f1f1f0; --muted: #c6c6cb; --accent: #e8e8e7; --accent-hover: #fff; --white: #202024; }
}
/* The greeting is spoken inside the room, so the section keeps no surface of its own.
   Only the two things that must be read against a woven floor get help: the direct
   contact lines, and the form. */
.cinema .contact-section { background: transparent; color: var(--ink); }
.cinema .contact-section p, .cinema .contact-section small { color: var(--muted); }
.cinema .contact-details { gap: 0; margin-top: 30px; border-top: 1px solid #0000002b; }
.cinema:not(.motion-off) .contact-details a { text-shadow: 0 1px 14px #f4f2edf0, 0 1px 3px #f4f2edc4; }
.cinema .contact-details a {
  width: 100%; padding-block: 13px; border-bottom: 1px solid #0000001f;
  display: flex; align-items: center; justify-content: flex-start; transition: color .2s;
}
.cinema .contact-details a[dir="ltr"] { justify-content: flex-end; }
.cinema .contact-details a:hover { color: var(--brand-teal); text-decoration: none; }
.cinema .lead-form { background: #fcfbf8f2; backdrop-filter: blur(3px); }

/* The film has landed by the time the page ends: the footer stands on paper, with a
   soft handoff out of the render rather than a cut. */
body:has(main.cinema) .site-footer { background: var(--paper); border-top: 1px solid var(--line); }
body:has(main.cinema) .site-footer::before {
  content: ""; position: absolute; inset-inline: 0; bottom: 100%; height: 140px;
  background: linear-gradient(to bottom, #f4f2ed00, var(--paper)); pointer-events: none;
}

/* Brand presence: teal marks state and progress. It is the only colour on the page. */
.cinema .journal-category { color: var(--brand-teal); }
.cinema .text-link:hover { color: var(--brand-teal-deep); border-color: currentColor; }
.cinema .path .text-link:hover { border-color: var(--brand-teal-deep); }
body:has(main.cinema) .site-nav a::after { background: var(--brand-teal); }
body:has(main.cinema) .service-choice input:checked + span { border-color: var(--brand-teal-deep); background: var(--brand-teal-deep); }
body:has(main.cinema) .button:not(.button-outline),
body:has(main.cinema) .floating-contact { background: var(--brand-teal-deep); border-color: var(--brand-teal-deep); color: #fff; }
body:has(main.cinema) .button:not(.button-outline):hover,
body:has(main.cinema) .floating-contact:hover { background: var(--brand-teal); border-color: var(--brand-teal); }
@media (max-width: 1100px) {
  .opening, .service-paths .section-intro { gap: 40px; }
  .opening-actions { flex-wrap: wrap; }
  .opening h1 { font-size: 58px; }
  .site-nav { gap: 20px; }
  .header-inner { gap: 25px; }
  .paths-grid { gap: 32px; }
  .approach-grid, .contact-grid { gap: 55px; }
}
@media (max-width: 900px) {
  .mobile-nav { top: 84px; }
  .opening { grid-template-columns: 1fr 1fr; gap: 30px; padding-block: 40px; }
  .opening h1 { font-size: 50px; }
  .opening-details > p { font-size: 14px; }
  .opening-actions { gap: 9px; }
  .opening-actions .button { min-height: 44px; font-size: 12px; padding: 8px 12px; }
  .approach-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .site-header { height: 70px; }
  .header-inner { gap: 12px; }
  .brand, .brand img { width: 133px; }
  .mobile-nav { top: 70px; }
  .opening { display: block; padding-block: 29px 32px; }
  .opening h1 { font-size: clamp(41px,11vw,58px); line-height: 1.27; letter-spacing: -.6px; }
  .opening .eyebrow { font-size: 12px; margin-bottom: 13px; }
  .opening-details { padding: 0; margin-top: 20px; }
  .opening-details > p { font-size: 14px; line-height: 1.85; max-width: 370px; }
  .opening-details > p br { display: none; }
  .opening-actions { display: grid; grid-template-columns: 1fr 1.22fr; margin-top: 20px; gap: 8px; }
  .opening-actions .button { padding: 11px 10px; gap: 8px; font-size: 12px; min-height: 46px; }
  .opening-actions .icon { width: 16px; height: 16px; }
  /* One beat per screen, with the bottom of every scene reserved for the film strip
     and the contact bar so copy never lands underneath them. */
  .cinema > .scene { min-height: 88svh; padding-block: clamp(60px, 10vh, 88px) clamp(126px, 21vh, 168px); gap: 20px; }
  .cinema > .scene > * { width: 100%; }
  .cinema.motion-off .film::after { background: linear-gradient(to bottom, #f4f2ede8 0%, #f4f2edad 24%, #f4f2edad 68%, #f4f2edf2 100%); }
  /* A phone has no second column to give away, so the card takes the full width and sits
     at the foot of the screen with the film clear above it. */
  /* On one column there is no free side to move to: the panel spans the width and the
     narration sits under it. This has to out-rank the side rules above, which are more
     specific than the plain one it used to be enough to write here. */
  .cinema:not(.motion-off)[data-film-side] .film-hud,
  .cinema:not(.motion-off) .film-hud { inset-inline: 0; }
  body:has(main.cinema:not(.motion-off)[data-film-side]) .floating-contact { right: auto; left: 25px; }
  .cinema:not(.motion-off) > .scene { justify-content: flex-end; align-items: stretch; padding-block-end: clamp(214px, 29vh, 256px); }
  .cinema:not(.motion-off) > .scene > * { width: 100%; }
  /* The narration becomes a lower third sitting on the contact bar: a strip with its
     own ground, out of the reading column entirely. */
  .film-hud {
    bottom: calc(65px + env(safe-area-inset-bottom)); inset-inline: 0; width: auto;
    padding: 14px var(--gutter) 9px;
    background: var(--film-card); border-block-start: 1px solid var(--film-card-line); border-inline: 0;
    grid-template-columns: 1fr auto; align-items: end; gap: 2px 14px; justify-items: stretch;
  }
  .film-hud .journey-eyebrow { grid-column: 1; grid-row: 1; }
  .film-hud .chapter-title { grid-column: 1; grid-row: 2; }
  .film-hud .motion-control { grid-column: 2; grid-row: 1 / 3; align-self: center; }
  .film-hud .stage-track { grid-column: 1 / -1; grid-row: 3; margin-block: 8px 0; }
  .film-hud p { text-shadow: none; }
  .film-hud .chapter-detail, .film-hud .film-note { display: none; }
  .cinema.motion-off .film-hud { bottom: calc(78px + env(safe-area-inset-bottom)); }
  .chapter-title { font-size: 17px; }
  .film-progress { top: 70px; }
  .motion-control { font-size: 10px; min-height: 32px; padding: 5px 9px; }
  .visual-caption { font-size: 10px; padding-block: 12px; }
  .visual-caption span:last-child { display: none; }
  .section { padding-block: 70px; }
  .service-paths .section-intro { display: block; margin-bottom: 32px; }
  .service-paths .section-intro p { margin-top: 19px; font-size: 15px; }
  .paths-grid { gap: 45px; }
  .path-heading h3 { font-size: 27px; }
  .path-heading span { font-size: 11px; }
  .path-heading { margin-bottom: 18px; }
  .path-media { aspect-ratio: 1.4; margin-bottom: 20px; }
  .path p { font-size: 15px; }
  .approach { padding-block: 70px; }
  .approach-grid { gap: 40px; }
  .approach-copy h2 { font-size: 35px; }
  .approach-copy > p { font-size: 15px; }
  .process { padding-block: 70px; }
  .process-step > span { font-size: 42px; margin-bottom: 22px; }
  .journal { padding-block: 65px; }
  .contact-section { padding-block: 70px; }
  .contact-grid { gap: 35px; }
  .contact-copy h2 { font-size: 43px; }
}
@media (max-width: 370px) {
  .brand, .brand img { width: 122px; }
  .header-inner { gap: 8px; }
  .opening-actions .button { font-size: 11px; gap: 5px; }
  .opening h1 { font-size: 39px; }
}