/* ==========================================================================
   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, entrances */
  --dur-fast: 0.3s;
  --dur-ui: 0.5s;
  --dur-enter: 1.2s;
  /* Homepage film crossfade (main.js reads --dur-slide; keep its hold time in step) */
  --dur-slide: 2.4s;
  --dur-title: 0.6s;
  --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);
}

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%; }
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; }

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

/* Cross-page fade (supporting browsers). The header is its own layer so it doesn't fade
   with the page, and its snapshots are never scaled (object-fit: none, pinned left). */
@view-transition { navigation: auto; }
::view-transition-group(*) { animation-duration: 0.35s; animation-timing-function: var(--ease); }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.35s; animation-timing-function: var(--ease); }
::view-transition-old(site-header),
::view-transition-new(site-header) {
  height: 100%;
  object-fit: none;
  object-position: left center;
  animation-duration: 0.35s;
}
/* The logo never animates during page changes: the new page's logo shows at once */
::view-transition-group(site-logo),
::view-transition-new(site-logo) { animation: none; }
::view-transition-old(site-logo) { display: none; }

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

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--header-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 var(--gutter);
  border-bottom: 1px solid transparent;
  /* 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. */
  -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);
  view-transition-name: site-header;
  container-type: inline-size;
}

/* Scrolled: the header darkens but keeps its height, so the logo never moves */
.site-header.is-scrolled {
  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,
   and it is not part of any entrance animation. It is still the link home. Its own
   page-transition layer (below) keeps it still while pages change. */
.logo {
  justify-self: start;
  display: block;
  view-transition-name: site-logo;
}
.logo img { height: 42px; width: auto; }

.nav-pill {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  /* Centred on the window whether or not the page has a scrollbar, so it never jumps
     sideways between pages. 100vw includes a classic scrollbar and 100cqw (the header's
     content box) doesn't, so on a scrolling page this shifts it by half the scrollbar.
     Pure CSS: correct from the first frame, with nothing for script to adjust later. */
  transform: translateX(calc((100vw - 100cqw) / 2 - var(--gutter)));
}

.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,
.menu-closing .site-header {
  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 {
  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 (at least 44px
   tall); the gaps between rows are margins, so tapping empty space does nothing.
   Entrance: the site's content entrance (.in-view), a 20px slide-up with a fade, same
   duration and easing, staggered 90ms in reading order after an 80ms lead, so the links
   rise in as the panel opens past them. They stay shown while the panel retracts (it
   clips them away) and reset only once it has hidden, so closing never fades them. */
.mobile-menu nav[aria-label="Mobile"] a {
  display: block;
  width: fit-content;
  padding: 6px 0;
  margin: 24px 0;
  font-size: clamp(32px, 10vw, 56px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(20px);
}
.mobile-menu nav[aria-label="Mobile"] a:first-child { margin-top: 12px; }
.menu-open .mobile-menu nav[aria-label="Mobile"] a,
.menu-closing .mobile-menu nav[aria-label="Mobile"] a {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-enter) var(--ease), transform var(--dur-enter) var(--ease);
}
.menu-open .mobile-menu nav[aria-label="Mobile"] a:nth-child(1) { transition-delay: 80ms; }
.menu-open .mobile-menu nav[aria-label="Mobile"] a:nth-child(2) { transition-delay: 170ms; }
.menu-open .mobile-menu nav[aria-label="Mobile"] a:nth-child(3) { transition-delay: 260ms; }

/* Social links: YouTube, Instagram, TikTok */
.social { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.social a { transition: color var(--dur-fast) var(--ease); }
.social a:hover { color: var(--fg); }

/* ==========================================================================
   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. The incoming slide fades in on top while the outgoing one
   stays fully opaque underneath (.is-prev), so the crossfade never dips through to black. */
.hero__slides {
  position: absolute;
  inset: 0;
  isolation: isolate;
  opacity: 0;
  transition: opacity 1.6s var(--ease);
}
.hero__slides.is-ready { opacity: 1; }

.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--dur-slide) var(--ease-fade);
}
.hero__slide.is-active { opacity: 1; z-index: 2; }
.hero__slide.is-prev { opacity: 1; z-index: 1; transition: none; }

/* 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,
.hero__slide.is-prev .hero__image { transform: scale(1); }
.hero__slide:not(.is-active):not(.is-prev) .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(36px, 7vh, 80px); }

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

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

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

.hero__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 24px;
  padding: 22px 0 26px;
  border-top: 1px solid var(--line);
  color: var(--fg-faint);
}
.hero__foot a { transition: color var(--dur-fast) var(--ease); }
.hero__foot a:hover { color: var(--fg); }

/* Current film title: fades out and back in around the midpoint of each crossfade */
.hero__film span {
  display: inline-block;
  transition: opacity var(--dur-title) var(--ease-fade), transform var(--dur-title) var(--ease-fade);
}
.hero__film.is-changing span { opacity: 0; transform: translateY(4px); }

/* Entrance animation: a short slide-up with a fade, staggered by --d (ms) */
.reveal,
.hero__title .line > span { opacity: 0; transform: translateY(20px); }
.is-loaded .reveal,
.is-loaded .hero__title .line > span {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-enter) var(--ease), transform var(--dur-enter) var(--ease);
  transition-delay: calc(var(--d, 0) * 1ms);
}

/* ==========================================================================
   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;
  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 label (.eyebrow, as "Studio" on Info and
   "Credits" on film pages); groups are separated by the standard section gap */
.film-group + .film-group { margin-top: var(--section); }
.film-group__title { margin-bottom: clamp(20px, 2.4vw, 32px); }

.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;
  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;
  margin-left: -0.03em;
  font-size: clamp(44px, min(7vw, 11vh), 128px);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.05em;
  margin-top: 16px;
}

/* 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; }

.spec {
  margin: 0 var(--gutter);
  border-bottom: 1px solid var(--line);
}
.spec div { padding: 22px 0; }
.spec dt { margin-bottom: 8px; }
.spec dd { font-size: 16px; color: var(--fg); }

/* Credits: role / name rows beside a label */
.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 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, .eyebrow label, .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: five 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(5, 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;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

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

.contact-email {
  display: inline-block;
  margin-top: 24px;
  font-size: clamp(32px, min(6.4vw, 9vh), 112px);
  font-weight: 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);
}

.site-footer__row .social { gap: 12px 28px; }

/* ==========================================================================
   Scroll reveal (interior content)
   ========================================================================== */

.in-view { opacity: 0; transform: translateY(20px); transition: opacity var(--dur-enter) var(--ease), transform var(--dur-enter) var(--ease); }
.in-view.is-visible { opacity: 1; transform: none; }

/* ==========================================================================
   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 { grid-template-columns: 1fr auto; }
  .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; }
}

@media (max-width: 560px) {
  .hero__foot { flex-direction: column; align-items: flex-start; }
  .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;
  }
  .reveal, .in-view, .hero__title .line > span { opacity: 1 !important; transform: none !important; }
  @view-transition { navigation: none; }
}