/* ==========================================================================
   Engine Wonder — Global styles
   ========================================================================== */

:root {
  --bg: #0a0a0a;
  --bg-raised: #121212;
  --fg: #f5f5f3;
  --fg-muted: rgba(245, 245, 243, 0.62);
  --fg-faint: rgba(245, 245, 243, 0.38);
  --line: rgba(245, 245, 243, 0.12);
  --line-strong: rgba(245, 245, 243, 0.26);
  --glass: rgba(20, 20, 20, 0.32);

  --gutter: clamp(20px, 3.4vw, 64px);
  --section: clamp(80px, 11vw, 168px);
  --header-h: 104px;
  /* Where every interior page's first content starts: below the header, same gap everywhere */
  --page-top: calc(var(--header-h) + clamp(40px, 6vw, 96px));
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Motion timing: hover feedback, UI state changes, card image zoom */
  --dur-fast: 0.3s;
  --dur-ui: 0.5s;
  --dur-enter: 1.2s;
  --ease-fade: cubic-bezier(0.45, 0, 0.55, 1);

  --font: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  color-scheme: dark;
}

/* Arial scaled to Inter's metrics, so text doesn't reflow when the web font swaps in */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("ArialMT"), local("Helvetica");
  size-adjust: 107.12%;
  ascent-override: 90.44%;
  descent-override: 22.52%;
  line-gap-override: 0%;
}

/* The same for the nav's spaced capitals, which run narrower in Inter than body text:
   keeps the centred nav pill the same width when the web font swaps in */
@font-face {
  font-family: "Inter Fallback Caps";
  src: local("Arial"), local("ArialMT"), local("Helvetica");
  size-adjust: 95.7%;
  ascent-override: 101.23%;
  descent-override: 25.21%;
  line-gap-override: 0%;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--bg);
  /* No tap highlight: mobile Safari and Chrome otherwise flash a translucent grey/blue
     rectangle over every tapped link and button. Inherited by everything. Each control
     already gives its own feedback, and keyboard users keep :focus-visible below. */
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
}

main { flex: 1 0 auto; }

img { display: block; max-width: 100%; }
/* Links take their colour from their surroundings, visited or not, so the browser's
   default blue and purple never show. Deliberately a bare "a" selector (no :visited):
   a more specific :visited rule would outrank each link's own colour (.btn--solid,
   .hero__film, ...) once a page had been visited. */
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p, dl, dd { margin: 0; }

::selection { background: var(--fg); color: var(--bg); }

:focus-visible {
  outline: 1px solid var(--fg);
  outline-offset: 4px;
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--fg);
  color: var(--bg);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.skip-link:focus { top: 16px; }

/* ==========================================================================
   Alignment system
   Everything starts on one vertical line, the page gutter: the logo, buttons, images,
   icons and the video by their edges; text by its first letter's visible ink. Every
   letter carries built-in side space, which depends on its shape and gets tighter as
   the weight rises. Text marked data-lead="…" (its first letter's shape) is pulled
   left by exactly that space, in em, so it holds at every size. Values are Inter's,
   measured, as a function of --wght (each text style sets it beside font-weight).
     stem   B D E F H I K L M N P R U     round  C G O Q S
     diag   A V W Y      t  T      i  lowercase i      copy  ©
   The pages tag their own text; worker.js tags film titles, cards and credits.
   ========================================================================== */
body { --wght: 400; }
[data-lead] { margin-left: calc(-1em * var(--lead)); }
[data-lead="stem"]  { --lead: calc(0.1175 - 0.000075 * var(--wght)); }
[data-lead="round"] { --lead: calc(0.0785 - 0.00005 * var(--wght)); }
[data-lead="t"]     { --lead: calc(0.0575 - 0.0000275 * var(--wght)); }
[data-lead="i"]     { --lead: calc(0.0635 - 0.0000115 * var(--wght)); }
[data-lead="diag"]  { --lead: 0.026; }
[data-lead="copy"]  { --lead: 0.0825; }

/* Section headings, in the homepage hero's type (Inter 600, tight tracking, sentence
   colour), Title Case, at one consistent size across pages. */
.section-title {
  font-size: clamp(30px, 3.4vw, 52px);
  font-weight: 600;
  --wght: 600;
  line-height: 1.08;
  letter-spacing: -0.04em;
  color: var(--fg);
}

/* Small uppercase label used throughout */
.eyebrow {
  font-size: 12px;
  font-weight: 500;
  --wght: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* No cross-page transition and no entrance animations anywhere: every page shows
   at once, fully drawn, on arrival. */

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--header-h);
  display: grid;
  grid-template-columns: 1fr auto;   /* logo | actions; the nav pill is placed on its own */
  align-items: center;
  padding: 0 var(--gutter);
  border-bottom: 1px solid transparent;
}

/* The header's scroll overlay (tint, blur, hairline) lives on this layer behind the
   logo and nav, not on the header itself: an element with a backdrop-filter, even
   blur(0), is a "backdrop root", and anything inside it can only blur what is inside
   it. On the header that would stop the nav pill's glass from blurring the page.
   blur(0) at rest, so the blur eases in and out with the tint instead of popping.
   The hairline eases too. When the menu closes, the header takes over the menu's
   line at the same spot in a single frame (.menu-settle, no transition), then the
   line, tint and blur fade together into the header's normal state. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0 0 -1px 0;           /* covers the header's 1px border row too */
  z-index: -1;
  border-bottom: 1px solid transparent;
  pointer-events: none;
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
  transition:
    background-color var(--dur-ui) var(--ease-fade),
    border-color var(--dur-ui) var(--ease-fade),
    -webkit-backdrop-filter var(--dur-ui) var(--ease-fade),
    backdrop-filter var(--dur-ui) var(--ease-fade);
}

/* Scrolled: the header darkens but keeps its height, so the logo never moves */
.site-header.is-scrolled::before {
  background: rgba(10, 10, 10, 0.72);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom-color: var(--line);
}

/* Logo: the plain PNG, completely static. No glow, animation, transition or hover state.
   It is still the link home. */
.logo {
  justify-self: start;
  display: block;
}
.logo img { height: 42px; width: auto; }

/* Liquid glass, from the first frame (no scroll needed): a light translucent tint over
   a little smoke for legibility, a strong backdrop blur with extra saturation so the
   hero shows through softened, a faint reflective rim, a bright top highlight with a
   dimmer bottom one, a soft sheen (::before) and a gentle drop shadow. The links sit
   above all of it, so the text stays sharp. */
.nav-pill {
  /* Centred on the window itself (50vw), not on the header, so its position is the
     same on every page: the header is narrower by the scrollbar on pages that scroll,
     the window never is. No per-page correction, so nothing can jump between pages. */
  position: absolute;
  left: 50vw;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.03) 100%),
    rgba(18, 18, 18, 0.24);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  backdrop-filter: blur(18px) saturate(170%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 14px rgba(255, 255, 255, 0.05),
    0 8px 28px rgba(0, 0, 0, 0.28);
}
.nav-pill::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(120% 150% at 28% -45%, rgba(255, 255, 255, 0.22), transparent 58%);
}

.nav-pill a {
  display: block;
  font-family: "Inter", "Inter Fallback Caps", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  padding: 10px 22px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-muted);
  transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.nav-pill a:hover { color: var(--fg); }
.nav-pill a[aria-current="page"] { color: var(--bg); background: var(--fg); }

.header-actions { justify-self: end; display: flex; align-items: center; gap: 12px; }

/* Pill button with a small round play-arrow chip */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 8px 8px 8px 26px;
  min-height: 52px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color var(--dur-ui) var(--ease), color var(--dur-ui) var(--ease), border-color var(--dur-ui) var(--ease);
}

.btn__chip {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(245, 245, 243, 0.1);
  transition: background-color var(--dur-ui) var(--ease), transform var(--dur-ui) var(--ease);
}
.btn__chip svg { width: 10px; height: 10px; fill: currentColor; }

.btn:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.btn:hover .btn__chip { background: var(--bg); color: var(--fg); transform: translateX(2px); }

.btn--solid { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.btn--solid .btn__chip { background: var(--bg); color: var(--fg); }
.btn--solid:hover { background: transparent; color: var(--fg); border-color: var(--line-strong); }
.btn--solid:hover .btn__chip { background: var(--fg); color: var(--bg); }

/* Mobile menu toggle */
.menu-toggle {
  display: none;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  position: relative;
  flex-shrink: 0;
  padding: 0;
}

/* Both lines are anchored at the exact centre of the button and moved only with
   transform (never top/left), using the same function list in both states, so they
   glide into the X and back without snapping to the pixel grid or drifting. */
.menu-toggle span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 1.5px;
  margin: -0.75px 0 0 -8px;
  border-radius: 1px;
  background: var(--fg);
  transform: translateY(var(--y)) rotate(0deg);
  transition: transform var(--dur-ui) var(--ease);
}
.menu-toggle span:nth-child(1) { --y: -3px; }
.menu-toggle span:nth-child(2) { --y: 3px; }

.menu-open .menu-toggle span:nth-child(1) { transform: translateY(0) rotate(45deg); }
.menu-open .menu-toggle span:nth-child(2) { transform: translateY(0) rotate(-45deg); }

/* Menu: one glass surface for the header and the dropdown together. The panel starts
   at the top of the screen, behind the header (which goes transparent while the menu
   is in use), so a single blur and tint run unbroken from the top edge down: no seam,
   no doubled blur. Closed, the panel is exactly the header's height, its bottom border
   sitting on the header's line. Opening, it grows and the line travels down, revealing
   the links, which stay still; closing reverses it. One height transition drives the
   panel and the line together. Gentle ease-in-out, no fade or overshoot.
   Shown while .menu-open or .menu-closing (main.js) is set. */
.mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 40;
  height: var(--header-h);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  /* The header's glass: same tint and blur, constant throughout */
  background: rgba(10, 10, 10, 0.72);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  visibility: hidden;
  transition: height var(--dur-ui) cubic-bezier(0.4, 0, 0.2, 1);
}

.menu-open .mobile-menu {
  height: 100vh;
  height: 100dvh;
}
.menu-open .mobile-menu,
.menu-closing .mobile-menu { visibility: visible; }

/* While the menu is in use the header has no glass of its own: the panel behind it
   provides it. Switches with no transition, in the same frame as the panel appears. */
.menu-open .site-header::before,
.menu-closing .site-header::before {
  background: transparent;
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
  border-bottom-color: transparent;
  transition: none;
}

/* Hand-back after closing (main.js, one frame): the header takes the glass over from
   the panel in the same frame the panel hides, then eases to its normal state */
.menu-settle .site-header::before {
  background: rgba(10, 10, 10, 0.72);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom-color: var(--line);
  transition: none;
}

/* Set briefly by main.js to apply a state change instantly (e.g. restoring from back/forward cache) */
.no-anim *, .no-anim *::before, .no-anim *::after { transition: none !important; }
/* Set by main.js only where scrollbars overlay the page; classic scrollbars stay visible */
.scroll-lock { overflow: hidden; }

/* The links form one block near the top, a comfortable gap below the header, starting
   at the gutter in line with the logo's left edge */
.mobile-menu nav[aria-label="Mobile"] {
  padding: calc(var(--header-h) + clamp(16px, 4vh, 40px)) var(--gutter) 40px;
}

/* One link per row, single line. Each tap target covers just its word (about 50px
   tall at phone sizes, above the 44px minimum); the 8px gaps between rows are margins,
   so tapping empty space does nothing.
   No entrance of their own: the links stay still and the growing panel uncovers them. */
.mobile-menu nav[aria-label="Mobile"] a {
  display: block;
  width: fit-content;
  padding: 6px 0;
  margin-block: 8px;   /* vertical only: the left edge comes from the alignment system */
  font-size: clamp(32px, 10vw, 56px);
  font-weight: 700;
  --wght: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  white-space: nowrap;
}
.mobile-menu nav[aria-label="Mobile"] a:first-child { margin-top: 12px; }

/* ==========================================================================
   Hero (homepage)
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: calc(var(--header-h) + 40px) var(--gutter) 0;
  overflow: hidden;
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--bg);
}

/* Film stills, one at a time, switched directly with no transition. main.js switches
   only once the next still is loaded and decoded, so it never shows a blank frame. */
.hero__slides {
  position: absolute;
  inset: 0;
  isolation: isolate;
}

.hero__slide {
  position: absolute;
  inset: 0;
  visibility: hidden;
}
.hero__slide.is-active { visibility: visible; }

/* Never stretched: object-fit crops, and each slide sets its own focal point.
   A very slow push-in runs while a slide is on screen. */
.hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
  transform: scale(1.05);
  transition: transform 12s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.hero__slides.is-ready .is-active .hero__image { transform: scale(1); }
.hero__slide:not(.is-active) .hero__image { transition: none; }

@media (max-aspect-ratio: 4/5) {
  .hero__image { object-position: var(--pos-portrait, var(--pos, 50% 50%)); }
}

/* Readability overlay + vignette */
.hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(10,10,10,0.6) 0%, rgba(10,10,10,0.08) 26%, rgba(10,10,10,0.2) 56%, rgba(10,10,10,0.92) 100%),
    radial-gradient(120% 90% at 50% 45%, transparent 40%, rgba(0,0,0,0.5) 100%);
}

/* Film grain over the hero */
.grain {
  position: absolute;
  inset: -50%;
  pointer-events: none;
  opacity: 0.08;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite;
}

@keyframes grain {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-3%, 2%); }
  40%  { transform: translate(2%, -3%); }
  60%  { transform: translate(-2%, -1%); }
  80%  { transform: translate(3%, 3%); }
  100% { transform: translate(0, 0); }
}

.hero__content { padding-bottom: clamp(20px, 4vh, 48px); }

.hero__title {
  font-size: clamp(48px, 7.4vw, 136px);
  font-weight: 600;
  --wght: 600;
  line-height: 1.08;
  letter-spacing: -0.05em;
}

.hero__title .line { display: block; }
.hero__title .line > span { display: block; }

.hero__cta { margin-top: clamp(28px, 4.4vh, 48px); }

/* Headline and button on the left; the current film title at the bottom right, just
   above the site footer, which closes the hero over the image. */

/* Current film title: Title Case, normal tracking, a step larger and brighter than
   the social links. Changes with no fade, in the same frame as the background still. */
.hero__film {
  align-self: flex-end;
  max-width: 100%;
  margin-bottom: clamp(14px, 2vh, 20px);
  font-size: clamp(15px, 1.15vw, 18px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: normal;
  text-align: right;
  color: var(--fg-muted);
  transition: color var(--dur-fast) var(--ease);
}
.hero__film:hover { color: var(--fg); }

/* The shared site footer, inside the hero: cancel the hero's side padding so the
   footer box is full width, exactly as on every other page */
.hero > .site-footer { margin-inline: calc(-1 * var(--gutter)); }

/* ==========================================================================
   Shared section pieces
   ========================================================================== */

.section { padding: var(--section) var(--gutter); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 500;
  --wght: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-muted);
  transition: color var(--dur-fast) var(--ease);
}
.link-arrow:hover { color: var(--fg); }

/* ==========================================================================
   Interior page tops
   ========================================================================== */

/* Section pages show their title once, in the navigation; the h1 is kept for
   screen readers and search engines but not drawn on screen. */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* First block on a page: clears the fixed header with the same breathing room on every page
   (main > raises specificity over the section's own padding shorthand) */
main > .section--first { padding-top: var(--page-top); }

/* ==========================================================================
   Films gallery
   ========================================================================== */

/* Group headings use the site's section heading (.section-title, as "Studio" on Info);
   groups are separated by the standard section gap */
.film-group + .film-group { margin-top: var(--section); }
.film-group__title { margin-bottom: clamp(24px, 3vw, 40px); }

.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: clamp(16px, 2vw, 32px);
  row-gap: clamp(56px, 6vw, 96px);
  align-items: start;
}

.card a { display: block; }

.frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--bg-raised);
}

.frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-enter) var(--ease), filter var(--dur-ui) var(--ease);
}

/* Hairline inside the frame + a soft bottom shade */
.frame::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px var(--line);
  background: linear-gradient(to top, rgba(0,0,0,0.35), transparent 40%);
  pointer-events: none;
}

.card:hover .frame img { transform: scale(1.035); filter: brightness(1.06); }

.card__meta { margin-top: 18px; }

.card__title {
  font-size: clamp(20px, 1.7vw, 28px);
  font-weight: 600;
  --wght: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

/* ==========================================================================
   Film detail
   ========================================================================== */

.film-hero { padding: var(--page-top) var(--gutter) 0; }

/* Block-level (not inline) so it starts exactly at --page-top like other pages' first content */
.back-link { display: flex; width: max-content; margin-bottom: clamp(40px, 6vw, 80px); }

/* Large film titles. Capped by viewport height too, so they never crowd short screens. */
.film-title {
  display: block;
  font-size: clamp(44px, min(7vw, 11vh), 128px);
  font-weight: 600;
  --wght: 600;
  line-height: 0.95;
  letter-spacing: -0.05em;
}

/* YouTube player, 16:9 */
.player {
  margin: clamp(32px, 4vw, 56px) var(--gutter) 0;
  aspect-ratio: 16 / 9;
  background: #000;
}
.player iframe { display: block; width: 100%; height: 100%; border: 0; }

/* Credits: role / name rows, in the right-hand column where they have always sat
   (no heading; the section is labelled for screen readers) */
.credits {
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: clamp(24px, 6vw, 120px);
  margin: 0 var(--gutter);
  padding: clamp(40px, 5vw, 72px) 0;
}
.credits dl { grid-column: 2; }
.credits dl div {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) 2fr;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.credits dl div:first-child { border-top: 0; padding-top: 0; }
.credits dt { padding-top: 0.25em; }
.credits dd { font-size: clamp(17px, 1.4vw, 21px); letter-spacing: -0.01em; }

/* Space between the last block of a film page and the footer */
main[data-film] { padding-bottom: clamp(40px, 6vw, 96px); }

/* ==========================================================================
   Services
   ========================================================================== */

/* Built on Info's section (.info-grid, .section-title, .statement) so type and alignment
   match Info. The Inquiries button follows the statement in its column, in one
   section with height-capped spacing. No rule beneath it, like Info's last section. */
.info-grid.services-section {
  padding-bottom: min(var(--section), 7vh);
  border-bottom: 0;
}

/* The intro runs longer than Info's statement, so on desktop it scales down a step
   to keep the page to one screen. Tablet and phone keep the shared size. */
@media (min-width: 861px) {
  .services-section .statement { font-size: clamp(20px, min(2.1vw, 3vh), 44px); }
}

/* Process timeline: four stages in a row, each a line icon over a short label, joined
   by a hairline from each icon to the next. Stacks vertically on phones. */
.process {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: clamp(28px, 5vh, 64px);
}

.process__step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

/* Connector: from the right of this icon to the left of the next one */
.process__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 22px;
  left: 56px;
  right: -4px;
  height: 1px;
  background: var(--line-strong);
}

.process__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  flex: none;
}

.process__icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--fg);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.process__label {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-muted);
  padding-right: 8px;
}

@media (max-width: 560px) {
  .process { grid-template-columns: 1fr; gap: 32px; }
  .process__step { flex-direction: row; align-items: center; }
  /* From just below this icon to just above the next */
  .process__step:not(:last-child)::after {
    top: 50px;
    left: 22px;
    right: auto;
    bottom: -26px;
    width: 1px;
    height: auto;
  }
}

.services-cta { margin-top: clamp(28px, 5vh, 64px); }

/* Pill button without the arrow chip */
.btn--plain { padding: 8px 26px; }


/* ==========================================================================
   Info
   ========================================================================== */

.info-grid {
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: clamp(32px, 6vw, 120px);
  padding: var(--section) var(--gutter);
  border-bottom: 1px solid var(--line);
}
/* Columns may shrink below their content's width, so text wraps inside the gutter */
.info-grid > * { min-width: 0; }

/* Keeps a name or phrase together on one line; the rest of the sentence wraps around it */
.nowrap { white-space: nowrap; }

/* Statement (Info and Services): also scales with screen height so it never crowds short screens */
.statement {
  font-size: clamp(26px, min(3vw, 4vh), 48px);
  font-weight: 500;
  --wght: 500;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.contact-block { padding: var(--section) var(--gutter); }

/* The address always fits on one line: its size is also capped at the width available
   (screen minus both gutters) divided by the address's width in em (11.16em in Inter
   Bold at this tracking; 11.4 leaves a little room). The cap only takes over on
   narrow phones; wider screens keep the usual size. */
.contact-email {
  display: inline-block;
  margin-top: 24px;
  font-size: min(clamp(32px, min(6.4vw, 9vh), 112px), calc((100vw - 2 * var(--gutter)) / 11.4));
  font-weight: 700;
  --wght: 700;
  line-height: 0.95;
  letter-spacing: -0.055em;
  word-break: break-word;
}

/* ==========================================================================
   Footer
   ========================================================================== */

/* Copyright on the left, social links on the right; stacked on phones */
.site-footer {
  padding: 36px var(--gutter);
  border-top: 1px solid var(--line);
}

.site-footer__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 32px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

/* Social links: YouTube, Instagram, TikTok (only ever in the footer row) */
.social { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.social a { transition: color var(--dur-fast) var(--ease); }
.social a:hover { color: var(--fg); }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1080px) {
  .nav-pill a { padding: 10px 16px; }
}

@media (min-width: 861px) {
  .mobile-menu { display: none; }
}

@media (max-width: 860px) {
  :root { --header-h: 84px; }
  .site-header .nav-pill { display: none; }
  .menu-toggle { display: block; }
  .logo img { height: 34px; }

  .info-grid { grid-template-columns: 1fr; }

  .gallery { grid-template-columns: 1fr; row-gap: 48px; }

  .credits { grid-template-columns: 1fr; gap: 20px; }
  .credits dl { grid-column: 1; }
}

@media (max-width: 560px) {
  .site-footer { padding-top: 28px; padding-bottom: 28px; }
  .site-footer__row { flex-direction: column; align-items: flex-start; gap: 14px; }
  .btn { min-height: 48px; }
  .credits dl div { grid-template-columns: 1fr; gap: 4px; }
}

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