/* Formatfifty9 - site styles
   Type: Eurostile Extended Black (headings, supplied by Alfie 6 Oct 2026; webfont licence to confirm before go-live)
   + Inter (body) + IBM Plex Mono (small labels). */

@font-face {
  font-family: "Eurostile Extended FF";
  src: url("../fonts/eurostile-extended-black.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --ground: #0A0C0E;
  --ground-2: #101317;
  --ground-3: #161A1E;
  --ink: #FFFFFF;
  --ink-muted: rgba(255, 255, 255, 0.68);
  --ink-faint: rgba(255, 255, 255, 0.42);
  --line: rgba(255, 255, 255, 0.1);
  --accent: #C4A574;
  --accent-soft: rgba(196, 165, 116, 0.18);
  --nav: 64px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --font-display: "Eurostile Extended FF", "Arial Black", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --cream: #e7e2d8;
  --cream-2: #f3efe7;
  --ink-dark: #171717;
  --red: #ef4930;
  --red-text: #c4371f;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --max: 1180px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
}

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

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

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

a:hover {
  color: var(--accent);
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-synthesis: none;
  line-height: 1.12;
  letter-spacing: 0;
  margin: 0;
}

p {
  margin: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Nav --- */
.site-nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 70;
  height: var(--nav);
  display: flex;
  align-items: center;
  background: rgba(10, 12, 14, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.site-nav__inner {
  width: min(100%, calc(var(--max) + var(--gutter) * 2));
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.site-nav__logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.site-nav__logo img {
  height: 28px;
  width: auto;
}

.site-nav__links {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  margin-left: auto;
}

.site-nav__links > li {
  position: relative;
}

.site-nav__links > li > a,
.site-nav__drop-btn {
  font-family: var(--font-body);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.55rem 0.7rem;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  transition: color 0.2s var(--ease);
}

.site-nav__links > li > a:hover,
.site-nav__drop-btn:hover,
.site-nav__links > li > a[aria-current="page"] {
  color: var(--ink);
}

.site-nav__drop-btn svg {
  width: 10px;
  height: 10px;
  opacity: 0.7;
}

.site-nav__dropdown {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  min-width: 260px;
  padding: 0.5rem;
  background: var(--ground-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
  z-index: 80;
}

.site-nav__links > li:hover > .site-nav__dropdown,
.site-nav__links > li:focus-within > .site-nav__dropdown,
.site-nav__links > li.is-open > .site-nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.site-nav__dropdown a {
  display: block;
  padding: 0.55rem 0.75rem;
  font-size: 0.875rem;
  color: var(--ink-muted);
  border-radius: 5px;
  text-transform: none;
  letter-spacing: 0;
}

.site-nav__dropdown a:hover {
  background: var(--accent-soft);
  color: var(--ink);
}

.site-nav__cta {
  font-family: var(--font-display);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1rem;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ground);
  background: var(--ink);
  border-radius: 999px;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease);
}

.site-nav__cta:hover {
  background: var(--accent);
  color: var(--ground);
}

.site-nav__burger {
  display: none;
  width: 40px;
  height: 40px;
  margin-left: auto;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.site-nav__burger span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--ink);
  position: relative;
}

.site-nav__burger span::before,
.site-nav__burger span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 1.5px;
  background: var(--ink);
}

.site-nav__burger span::before { top: -6px; }
.site-nav__burger span::after { top: 6px; }

@media (max-width: 900px) {
  .site-nav__burger { display: inline-flex; }
  .site-nav__cta { display: none; }

  .site-nav__links {
    position: fixed;
    inset: var(--nav) 0 auto;
    margin: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.75rem var(--gutter) 1.25rem;
    background: rgba(10, 12, 14, 0.96);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
    max-height: calc(100svh - var(--nav));
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
  }

  body.nav-open .site-nav__links {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .site-nav__links > li > a,
  .site-nav__drop-btn {
    width: 100%;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--line);
    justify-content: space-between;
  }

  .site-nav__dropdown {
    position: static;
    min-width: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    background: transparent;
    padding: 0 0 0.5rem 0.75rem;
    display: none;
  }

  .site-nav__links > li.is-open > .site-nav__dropdown {
    display: block;
  }

  .site-nav__mobile-cta {
    display: block;
    margin-top: 1rem;
    text-align: center;
    padding: 0.85rem 1rem;
    font-size: 0.8125rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ground);
    background: var(--ink);
    border-radius: 999px;
  }
}

@media (min-width: 901px) {
  .site-nav__mobile-cta,
  .site-nav__links > li > a.site-nav__mobile-cta { display: none; }
}

/* --- Buttons --- */
.btn {
  font-family: var(--font-display);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.35rem;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}

.btn--primary {
  background: var(--ink);
  color: var(--ground);
}

.btn--primary:hover {
  background: var(--accent);
  color: var(--ground);
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
}

.btn--ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

/* --- Portal hero --- */
.portal {
  position: relative;
  height: 250vh;
  margin-top: var(--nav);
}

.portal__stage {
  position: sticky;
  top: var(--nav);
  height: calc(100svh - var(--nav));
  overflow: hidden;
  display: grid;
  place-items: center;
  isolation: isolate;
  background: var(--ground-2);
}

.portal__frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.portal__frame-img {
  position: absolute;
  inset: 0;
  background: center / cover no-repeat;
  transform: scale(1.22);
  will-change: transform;
}

.portal__veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 40%, transparent 20%, rgba(10, 12, 14, 0.72) 78%);
}

.portal__corner {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 52vw;
  background: var(--ground);
  z-index: 3;
  will-change: transform;
}

.portal__corner--left { left: 0; }
.portal__corner--right { right: 0; }

.portal__title {
  --logo-w: min(58vw, 860px);
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: center;
  margin: 0;
  line-height: 0;
  will-change: transform;
  filter: drop-shadow(0 2px 24px rgba(0, 0, 0, 0.35));
}

/* The real logo (vector from the brand .ai), cropped into two halves: FORMAT | FIFTY9+ */
.portal__half {
  display: block;
  overflow: hidden;
  height: calc(var(--logo-w) * 90 / 726);
  will-change: transform;
}

.portal__half--l { width: calc(var(--logo-w) * 378.75 / 726); }
.portal__half--r { width: calc(var(--logo-w) * 347.25 / 726); }

.portal__half img {
  display: block;
  width: var(--logo-w);
  max-width: none;
  height: calc(var(--logo-w) * 90 / 726);
}

.portal__half--r img {
  margin-left: calc(var(--logo-w) * -378.75 / 726);
}

.portal__sub {
  position: absolute;
  z-index: 5;
  top: calc(50% + clamp(2.5rem, 8vw, 5.5rem));
  left: 50%;
  transform: translateX(-50%);
  width: min(90vw, 36rem);
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(0.75rem, 1.6vw, 1rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0;
  will-change: opacity;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.85), 0 0 40px rgba(0, 0, 0, 0.5);
  background: rgba(10, 12, 14, 0.35);
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  backdrop-filter: blur(6px);
}

.portal__kicker,
.portal__labels {
  position: absolute;
  z-index: 6;
  left: var(--gutter);
  right: var(--gutter);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  pointer-events: none;
}

.portal__kicker { top: 1.25rem; }
.portal__labels {
  bottom: 1.25rem;
  justify-content: center;
  text-align: center;
}

.lab {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

@media (max-width: 700px) {
  .portal__corner { width: 56vw; }
  .portal__title {
    --logo-w: 64vw;
  }
  .portal__kicker {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
  }
}

/* Reduced motion: open state via CSS class set by JS (and fallback) */
.portal.is-open .portal__corner--left { transform: translateX(-115%); }
.portal.is-open .portal__corner--right { transform: translateX(115%); }
.portal.is-open .portal__frame-img { transform: scale(1); }
.portal.is-open .portal__title { transform: scale(1.12); }
.portal.is-open .portal__half--l { transform: translateX(-34%); }
.portal.is-open .portal__half--r { transform: translateX(34%); }
.portal.is-open .portal__sub { opacity: 1; }

@media (max-width: 720px) {
  .portal__sub-break { display: block; }
}


@media (prefers-reduced-motion: reduce) {
  .portal { height: auto; }
  .portal__stage { position: relative; top: 0; }
  .portal__corner--left { transform: translateX(-115%); }
  .portal__corner--right { transform: translateX(115%); }
  .portal__frame-img { transform: scale(1); }
  .portal__title { transform: scale(1.06); }
  .portal__half--l { transform: translateX(-20%); }
  .portal__half--r { transform: translateX(20%); }
  .portal__sub { opacity: 1; }
}

/* --- Sections --- */
.section {
  position: relative;
  padding: clamp(4rem, 10vw, 7.5rem) var(--gutter);
}

.section--tight {
  padding-top: clamp(2.5rem, 6vw, 4rem);
  padding-bottom: clamp(2.5rem, 6vw, 4rem);
}

.section__inner {
  width: min(100%, var(--max));
  margin: 0 auto;
}

.section__eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 0.85rem;
}

.section__title {
  font-size: clamp(1.45rem, 3.4vw, 2.5rem);
  text-transform: uppercase;
  max-width: 22ch;
  margin-bottom: 1rem;
}

/* Big uppercase display headings (new distinct bands) */
.display-title {
  font-size: clamp(1.75rem, 4.6vw, 4rem);
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  max-width: 20ch;
  margin-bottom: 1rem;
}

.display-title--xl {
  font-size: clamp(2.1rem, 7.2vw, 5.85rem);
  font-weight: 900;
  line-height: 0.96;
  max-width: 16ch;
  letter-spacing: -0.015em;
}

.section__lead {
  max-width: 42rem;
  color: var(--ink-muted);
  font-size: 1.0625rem;
}

.intro-strip {
  border-bottom: 1px solid var(--line);
  background: #000;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(2.5rem, 6vw, 4rem) var(--gutter);
}

.intro-strip__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1.75rem;
  width: min(100%, 42rem);
  margin: 0 auto;
}

.intro-strip__lead {
  max-width: none;
  margin: 0;
  color: var(--ink-muted);
  font-size: clamp(1.05rem, 2.4vw, 1.35rem);
  line-height: 1.55;
}

.intro-strip__emph {
  color: #fff;
  font-weight: 700;
}

.intro-strip .btn-row {
  justify-content: center;
  margin-top: 0;
}

/* ===== What we make: pinned horizontal card rail =====
   Default (no JS / reduced motion): a plain wrapping grid.
   motion.js adds .is-pinned: the stage sticks, vertical scroll slides the track sideways
   and fills the red progress bar; the section releases after the last card. */
.rail {
  position: relative;
  background: var(--ground);
  border-bottom: 1px solid var(--line);
}

.rail__stage {
  padding: clamp(4rem, 10vw, 7rem) var(--gutter);
}

.rail__head {
  width: min(100%, var(--max));
  margin: 0 auto 2.25rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
}

.rail__hint {
  display: none;
  flex-shrink: 0;
  padding-bottom: 0.35rem;
}

.rail__viewport {
  width: min(100%, var(--max));
  margin: 0 auto;
}

.rail__track {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.rail__progress { display: none; }

.rail.is-pinned .rail__stage {
  position: sticky;
  top: var(--nav);
  height: calc(100svh - var(--nav));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: clamp(1.25rem, 4.5vh, 3rem) 0 clamp(1rem, 3vh, 2rem);
}

.rail.is-pinned .rail__head {
  flex: none;
  width: min(100%, calc(var(--max) + var(--gutter) * 2));
  padding: 0 var(--gutter);
  margin: 0 auto clamp(1rem, 3.5vh, 2.25rem);
}

.rail.is-pinned .rail__hint { display: block; }

/* 7 Oct fix: cards size to their content (no fixed aspect box), so text and buttons never spill out.
   motion.js sets --media-h so the tallest card fits the space under the heading on any screen,
   and subgrid lines up pictures, titles, paragraphs and buttons across every card. */
.rail {
  --card-w: clamp(250px, 23vw, 300px);
  --media-h: 200px;
}

.rail.is-pinned .rail__viewport {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
}

.rail.is-pinned .rail__track {
  display: flex;
  align-items: stretch;
  gap: clamp(0.85rem, 1.6vw, 1.5rem);
  width: max-content;
  padding: 0 max(var(--gutter), calc((100vw - var(--max)) / 2));
  will-change: transform;
}

.rail.is-pinned .rail__item {
  flex: none;
  width: var(--card-w);
}

@supports (grid-template-rows: subgrid) {
  .rail.is-pinned .rail__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: var(--card-w);
    grid-template-rows: auto auto 1fr auto;
    row-gap: 0.65rem;
  }
  .rail.is-pinned .rail__item,
  .rail.is-pinned .product-card {
    display: grid;
    grid-row: 1 / -1;
    grid-template-rows: subgrid;
    width: auto;
  }
  .rail.is-pinned .product-card { gap: inherit; row-gap: 0.65rem; }
  .rail.is-pinned .product-card__body { display: contents; }
  .rail.is-pinned .product-card h3,
  .rail.is-pinned .product-card p,
  .rail.is-pinned .product-card__link { margin-left: 0.4rem; margin-right: 0.4rem; }
  .rail.is-pinned .product-card h3 { min-height: 0; align-self: start; }
  .rail.is-pinned .product-card__link { align-self: end; justify-self: start; margin-bottom: 0.4rem; }
}

.rail.is-pinned .rail__progress {
  display: block;
  flex: none;
  width: min(calc(100% - var(--gutter) * 2), var(--max));
  height: 2px;
  margin: clamp(1rem, 3.5vh, 2rem) auto 0;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.rail__progress span {
  display: block;
  height: 100%;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left center;
}

/* Product cards: tall cream "printed" cards */
.product-card {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  height: 100%;
  padding: 0.65rem;
  background: var(--cream-2);
  color: var(--ink-dark);
  border-radius: 4px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 18px 40px rgba(0, 0, 0, 0.35);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.product-card:hover {
  color: var(--ink-dark);
  transform: translateY(-4px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 26px 50px rgba(0, 0, 0, 0.45);
}

.product-card__media {
  position: relative;
  flex: none;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 2px;
  background: #d9d3c7;
}

.rail.is-pinned .product-card__media {
  aspect-ratio: auto;
  flex: none;
  width: 100%;
  height: var(--media-h);
  min-height: 0;
}

.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.product-card:hover .product-card__media img { transform: scale(1.04); }

.product-card__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 0;
  padding: 0 0.4rem 0.4rem;
}

.product-card h3 {
  flex: none;
  font-size: clamp(0.95rem, 1.2vw, 1.12rem);
  font-weight: 700;
  line-height: 1.15;
  min-height: calc(1.15em * 3);
  color: var(--ink-dark);
}

.product-card p {
  flex: 1 1 auto;
  font-size: 0.875rem;
  line-height: 1.45;
  color: rgba(23, 23, 23, 0.74);
}

.product-card__link {
  align-self: flex-start;
  flex: none;
  margin-top: auto;
  padding: 0.5rem 0.85rem;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dark);
  border: 1px solid var(--ink-dark);
  border-radius: 999px;
  white-space: nowrap;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.product-card:hover .product-card__link {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

/* Short screens (small phones, landscape laptops): tighten the pinned stage so cards still fit */
@media (max-height: 760px) {
  .rail.is-pinned .rail__stage { padding-top: 0.9rem; padding-bottom: 0.75rem; }
  .rail.is-pinned .rail__head { margin-bottom: 0.85rem; }
  .rail.is-pinned .section__eyebrow { margin-bottom: 0.4rem; }
  .rail.is-pinned .display-title { font-size: clamp(1.35rem, 3.3vw, 2.6rem); margin-bottom: 0.45rem; }
  .rail.is-pinned .rail__head .section__lead { font-size: 0.95rem; }
  .rail.is-pinned .rail__progress { margin-top: 0.75rem; }
  .rail.is-pinned .product-card { gap: 0.6rem; }
  .rail.is-pinned .product-card__body { gap: 0.35rem; }
  .rail.is-pinned .product-card p { font-size: 0.8rem; line-height: 1.38; }
  .rail.is-pinned .product-card__link { padding: 0.4rem 0.75rem; }
}

@media (max-width: 700px) {
  .rail { --card-w: min(290px, 76vw); }
  .rail__head { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .rail.is-pinned .rail__hint { display: none; }
  .product-card p { font-size: 0.84rem; }
}

/* ===== Our services: warm cream band with faint red contour lines ===== */
.services-band {
  position: relative;
  padding: clamp(5rem, 12vw, 9rem) var(--gutter);
  color: var(--ink-dark);
  background-color: var(--cream);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 900' preserveAspectRatio='none'%3E%3Cg fill='none' stroke-width='1.3' vector-effect='non-scaling-stroke'%3E%3Cpath vector-effect='non-scaling-stroke' d='M0 13C20 14 80 16 120 19C160 21 200 26 240 29C280 32 320 36 360 36C400 36 440 35 480 32C520 29 560 23 600 19C640 15 680 9 720 7C760 5 800 5 840 6C880 7 920 11 960 13C1000 16 1040 19 1080 21C1120 23 1160 24 1200 25C1240 26 1280 26 1320 26C1360 27 1420 28 1440 28' stroke='%23171717' stroke-opacity='0.09'/%3E%3Cpath vector-effect='non-scaling-stroke' d='M0 62C20 62 80 62 120 63C160 64 200 65 240 67C280 69 320 73 360 75C400 77 440 79 480 80C520 80 560 79 600 77C640 75 680 71 720 69C760 67 800 64 840 62C880 61 920 61 960 61C1000 61 1040 62 1080 62C1120 63 1160 63 1200 64C1240 64 1280 64 1320 64C1360 65 1420 67 1440 67' stroke='%23ef4930' stroke-opacity='0.14'/%3E%3Cpath vector-effect='non-scaling-stroke' d='M0 118C20 121 80 134 120 137C160 141 200 142 240 141C280 139 320 133 360 129C400 125 440 119 480 116C520 113 560 111 600 109C640 108 680 108 720 107C760 105 800 103 840 102C880 101 920 98 960 98C1000 99 1040 100 1080 104C1120 108 1160 116 1200 122C1240 128 1280 137 1320 140C1360 144 1420 143 1440 143' stroke='%23171717' stroke-opacity='0.09'/%3E%3Cpath vector-effect='non-scaling-stroke' d='M0 154C20 154 80 152 120 153C160 153 200 154 240 157C280 159 320 165 360 169C400 173 440 179 480 181C520 184 560 185 600 184C640 183 680 179 720 176C760 172 800 167 840 164C880 161 920 160 960 159C1000 157 1040 158 1080 158C1120 157 1160 157 1200 156C1240 154 1280 152 1320 150C1360 149 1420 149 1440 149' stroke='%23171717' stroke-opacity='0.09'/%3E%3Cpath vector-effect='non-scaling-stroke' d='M0 199C20 199 80 197 120 195C160 194 200 191 240 192C280 192 320 195 360 199C400 203 440 212 480 218C520 224 560 232 600 235C640 238 680 239 720 238C760 237 800 232 840 229C880 226 920 222 960 221C1000 219 1040 220 1080 219C1120 219 1160 220 1200 218C1240 216 1280 212 1320 208C1360 203 1420 194 1440 191' stroke='%23ef4930' stroke-opacity='0.14'/%3E%3Cpath vector-effect='non-scaling-stroke' d='M0 250C20 252 80 258 120 263C160 268 200 276 240 280C280 284 320 288 360 287C400 286 440 281 480 275C520 269 560 259 600 253C640 246 680 240 720 238C760 235 800 237 840 239C880 242 920 248 960 251C1000 255 1040 259 1080 261C1120 264 1160 264 1200 266C1240 267 1280 268 1320 270C1360 272 1420 276 1440 277' stroke='%23171717' stroke-opacity='0.09'/%3E%3Cpath vector-effect='non-scaling-stroke' d='M0 331C20 332 80 339 120 338C160 338 200 332 240 328C280 324 320 318 360 314C400 310 440 309 480 307C520 305 560 305 600 303C640 301 680 298 720 295C760 292 800 285 840 283C880 281 920 278 960 281C1000 283 1040 290 1080 296C1120 303 1160 315 1200 322C1240 329 1280 336 1320 338C1360 340 1420 335 1440 334' stroke='%23171717' stroke-opacity='0.09'/%3E%3Cpath vector-effect='non-scaling-stroke' d='M0 377C20 375 80 367 120 364C160 362 200 361 240 361C280 361 320 363 360 363C400 362 440 361 480 358C520 355 560 348 600 343C640 337 680 330 720 327C760 325 800 324 840 326C880 327 920 333 960 337C1000 340 1040 345 1080 347C1120 349 1160 348 1200 348C1240 348 1280 345 1320 346C1360 347 1420 352 1440 353' stroke='%23ef4930' stroke-opacity='0.14'/%3E%3Cpath vector-effect='non-scaling-stroke' d='M0 393C20 393 80 392 120 392C160 391 200 391 240 391C280 390 320 389 360 390C400 392 440 394 480 398C520 403 560 410 600 416C640 421 680 429 720 431C760 433 800 432 840 428C880 424 920 414 960 407C1000 400 1040 389 1080 384C1120 379 1160 376 1200 377C1240 378 1280 384 1320 388C1360 393 1420 402 1440 405' stroke='%23171717' stroke-opacity='0.09'/%3E%3Cpath vector-effect='non-scaling-stroke' d='M0 463C20 464 80 467 120 468C160 468 200 465 240 463C280 461 320 458 360 456C400 455 440 454 480 453C520 452 560 452 600 451C640 450 680 449 720 447C760 445 800 442 840 440C880 438 920 436 960 436C1000 437 1040 439 1080 442C1120 445 1160 451 1200 455C1240 459 1280 463 1320 465C1360 466 1420 465 1440 465' stroke='%23171717' stroke-opacity='0.09'/%3E%3Cpath vector-effect='non-scaling-stroke' d='M0 487C20 487 80 488 120 486C160 485 200 480 240 478C280 476 320 472 360 472C400 473 440 476 480 480C520 485 560 493 600 499C640 505 680 511 720 514C760 517 800 517 840 517C880 517 920 513 960 513C1000 513 1040 513 1080 515C1120 517 1160 521 1200 523C1240 525 1280 528 1320 527C1360 526 1420 518 1440 516' stroke='%23ef4930' stroke-opacity='0.14'/%3E%3Cpath vector-effect='non-scaling-stroke' d='M0 564C20 564 80 566 120 565C160 564 200 560 240 558C280 556 320 554 360 553C400 551 440 552 480 551C520 551 560 551 600 550C640 548 680 545 720 543C760 540 800 535 840 533C880 530 920 528 960 529C1000 529 1040 532 1080 535C1120 539 1160 544 1200 548C1240 551 1280 554 1320 556C1360 557 1420 556 1440 556' stroke='%23171717' stroke-opacity='0.09'/%3E%3Cpath vector-effect='non-scaling-stroke' d='M0 594C20 593 80 589 120 588C160 587 200 588 240 587C280 586 320 584 360 582C400 579 440 575 480 574C520 572 560 572 600 574C640 577 680 584 720 590C760 597 800 607 840 612C880 618 920 623 960 624C1000 625 1040 621 1080 618C1120 615 1160 609 1200 606C1240 602 1280 600 1320 598C1360 597 1420 596 1440 596' stroke='%23171717' stroke-opacity='0.09'/%3E%3Cpath vector-effect='non-scaling-stroke' d='M0 639C20 639 80 638 120 637C160 637 200 637 240 637C280 637 320 636 360 636C400 637 440 637 480 639C520 641 560 644 600 647C640 650 680 655 720 657C760 659 800 660 840 659C880 658 920 654 960 651C1000 647 1040 640 1080 636C1120 633 1160 629 1200 629C1240 628 1280 630 1320 632C1360 634 1420 640 1440 642' stroke='%23ef4930' stroke-opacity='0.14'/%3E%3Cpath vector-effect='non-scaling-stroke' d='M0 705C20 704 80 698 120 695C160 692 200 690 240 688C280 687 320 687 360 686C400 686 440 685 480 683C520 682 560 679 600 678C640 677 680 676 720 678C760 679 800 683 840 687C880 691 920 698 960 703C1000 707 1040 711 1080 712C1120 713 1160 712 1200 709C1240 706 1280 701 1320 697C1360 694 1420 689 1440 687' stroke='%23171717' stroke-opacity='0.09'/%3E%3Cpath vector-effect='non-scaling-stroke' d='M0 754C20 756 80 767 120 769C160 771 200 768 240 765C280 762 320 755 360 751C400 748 440 744 480 742C520 739 560 740 600 738C640 736 680 735 720 732C760 729 800 723 840 720C880 717 920 712 960 711C1000 711 1040 714 1080 719C1120 725 1160 735 1200 743C1240 750 1280 760 1320 764C1360 769 1420 768 1440 769' stroke='%23171717' stroke-opacity='0.09'/%3E%3Cpath vector-effect='non-scaling-stroke' d='M0 778C20 778 80 778 120 778C160 777 200 775 240 774C280 772 320 769 360 770C400 770 440 772 480 776C520 780 560 787 600 793C640 798 680 806 720 809C760 812 800 813 840 812C880 811 920 806 960 803C1000 799 1040 794 1080 792C1120 789 1160 788 1200 787C1240 786 1280 786 1320 785C1360 784 1420 780 1440 779' stroke='%23ef4930' stroke-opacity='0.14'/%3E%3Cpath vector-effect='non-scaling-stroke' d='M0 822C20 822 80 819 120 820C160 821 200 824 240 828C280 832 320 840 360 845C400 851 440 857 480 860C520 862 560 862 600 860C640 859 680 854 720 851C760 848 800 845 840 844C880 842 920 843 960 843C1000 843 1040 844 1080 842C1120 840 1160 837 1200 832C1240 828 1280 821 1320 817C1360 813 1420 809 1440 808' stroke='%23171717' stroke-opacity='0.09'/%3E%3Cpath vector-effect='non-scaling-stroke' d='M0 897C20 897 80 897 120 896C160 895 200 892 240 890C280 889 320 887 360 885C400 884 440 884 480 884C520 883 560 883 600 882C640 881 680 878 720 877C760 875 800 872 840 871C880 871 920 871 960 872C1000 874 1040 877 1080 881C1120 884 1160 889 1200 891C1240 893 1280 895 1320 896C1360 896 1420 894 1440 893' stroke='%23171717' stroke-opacity='0.09'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.services-band .section__eyebrow { color: var(--red-text); }

.services-band .display-title--xl {
  font-weight: 900;
  color: var(--ink-dark);
}

.services-band a:hover { color: var(--red-text); }

.services-band__lead {
  max-width: 44rem;
  margin-top: 1.5rem;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.55;
  color: rgba(23, 23, 23, 0.8);
}

.services-cols {
  display: grid;
  gap: 2.5rem;
  margin-top: clamp(3rem, 7vw, 5.5rem);
}

@media (min-width: 760px) {
  .services-cols {
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.5rem, 3.5vw, 3.5rem);
  }
}

.services-col {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(23, 23, 23, 0.6);
}

.services-col h3 {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.7vw, 1.4rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--ink-dark);
}

.services-col p {
  flex: 1;
  color: rgba(23, 23, 23, 0.8);
  max-width: 34ch;
}

.services-col a {
  align-self: flex-start;
  margin-top: 0.4rem;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dark);
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.35em;
}

/* ===== How it works: dieline timeline =====
   A dashed red cut line draws itself down the timeline as you scroll (clip-path driven by --cut),
   and each step pops out beside it. Desktop: line centred, steps alternate. Mobile: line on the left. */
.timeline {
  --line-x: 50%;
  --cut: 0%;
  position: relative;
  margin-top: clamp(2.5rem, 6vw, 4rem);
}

.timeline__track,
.timeline__cut {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--line-x);
  width: 2px;
  transform: translateX(-50%);
  pointer-events: none;
}

.timeline__track {
  background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.13) 0 12px, transparent 12px 22px);
}

.timeline__cut {
  background: repeating-linear-gradient(to bottom, var(--red) 0 12px, transparent 12px 22px);
  clip-path: inset(0 0 calc(100% - var(--cut)) 0);
}

.timeline__tip {
  position: absolute;
  left: var(--line-x);
  top: var(--cut);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 6px rgba(239, 73, 48, 0.18);
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}

.timeline.is-drawing .timeline__tip { opacity: 1; }

.timeline__steps {
  position: relative;
  display: grid;
  gap: clamp(2.5rem, 7vw, 5rem);
  padding: 0.5rem 0 1rem;
}

.tl-step {
  position: relative;
  padding-left: 2.75rem;
}

.tl-step__node {
  position: absolute;
  left: var(--line-x, 14px);
  top: 1.25rem;
  width: 16px;
  height: 16px;
  border: 2px solid var(--red);
  border-radius: 50%;
  background: var(--ground);
  transform: translate(-50%, -50%);
  transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease);
  z-index: 1;
}

.tl-step.is-reached .tl-step__node {
  background: var(--red);
  box-shadow: 0 0 0 6px rgba(239, 73, 48, 0.16);
}

.tl-step__card {
  display: grid;
  gap: 1rem;
  padding: 0.7rem 0.7rem 1.25rem;
  background: var(--ground-2);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.tl-step__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 3px;
  background: var(--ground-3);
}

.tl-step__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tl-step__body {
  display: grid;
  gap: 0.5rem;
  padding: 0 0.5rem;
}

.tl-step__title {
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  text-transform: uppercase;
}

.tl-step__body p { color: var(--ink-muted); }

@media (max-width: 859px) {
  .timeline { --line-x: 14px; }
  .tl-step__node { left: 14px; }
}

@media (min-width: 860px) {
  .tl-step {
    padding-left: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(4rem, 9vw, 7.5rem);
  }
  .tl-step__node { left: 50%; top: 2rem; }
  .tl-step__card { grid-column: 1; }
  .tl-step:nth-child(even) .tl-step__card { grid-column: 2; }
  .tl-step__card::before {
    content: "";
    position: absolute;
    top: 2rem;
    width: clamp(2rem, 4.5vw, 3.75rem);
    border-top: 2px dashed rgba(239, 73, 48, 0.55);
    transform: translateY(-50%);
  }
  .tl-step:nth-child(odd) .tl-step__card::before { right: 50%; margin-right: 8px; }
  .tl-step:nth-child(even) .tl-step__card::before { left: 50%; margin-left: 8px; }
  .timeline__steps { gap: clamp(1rem, 3vw, 2rem); }
  .tl-step:nth-child(n+2) { margin-top: calc(-1 * clamp(6rem, 14vw, 12rem)); }
}

.js-motion .tl-step__card {
  opacity: 0;
  transform: translateY(28px) scale(0.96);
  transition: opacity 0.8s cubic-bezier(.22, 1, .36, 1), transform 0.8s cubic-bezier(.22, 1, .36, 1);
}

@media (min-width: 860px) {
  .js-motion .tl-step:nth-child(odd) .tl-step__card { transform: translateX(-36px) scale(0.96); }
  .js-motion .tl-step:nth-child(even) .tl-step__card { transform: translateX(36px) scale(0.96); }
}

.js-motion .tl-step.is-in .tl-step__card,
.js-motion .tl-step.is-in:nth-child(n) .tl-step__card {
  opacity: 1;
  transform: none;
}

/* Industries */
.industries {
  display: grid;
  gap: 0.65rem;
  margin-top: 2.25rem;
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 640px) {
  .industries { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 980px) {
  .industries { grid-template-columns: repeat(4, 1fr); }
}

.industry-tile {
  padding: 1.15rem 1rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--ground-2);
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--ink-muted);
}

/* Made in-house */
.made-copy {
  max-width: 48rem;
  display: grid;
  gap: 1rem;
  margin-top: 1.25rem;
  color: var(--ink-muted);
}

.made-copy strong {
  color: var(--ink);
  font-weight: 500;
}

.made-copy__lead {
  color: var(--ink);
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  line-height: 1.55;
  max-width: 44rem;
}

/* ===== A dream team: stacking capability cards =====
   Each card is position: sticky with a growing top offset, so it slides up and stops just below
   the previous one; earlier titles stay visible as stacked tabs. */
.stack {
  --tab: 3.6rem;
  --stack-top: calc(var(--nav) + 1.25rem);
  display: grid;
  gap: clamp(1.25rem, 4vh, 2.5rem);
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-bottom: 2rem;
}

.stack-card {
  position: sticky;
  top: calc(var(--stack-top) + var(--n, 0) * var(--tab));
  min-height: clamp(12rem, 32svh, 18rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.15rem clamp(1.25rem, 3vw, 2.25rem) 1.75rem;
  background: #13171b;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-top: 2px solid var(--red);
  border-radius: 6px;
  box-shadow: 0 -14px 34px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.stack-card:nth-child(2) { background: #171c21; }
.stack-card:nth-child(3) { background: #1b2126; }
.stack-card:nth-child(4) { background: #1f262c; }
.stack-card:nth-child(5) { background: #242b32; }

/* Empty tail so the fully stacked deck holds for a moment before it scrolls away */
.stack__tail {
  height: 28svh;
  pointer-events: none;
}

.stack-card::after {
  content: "+";
  position: absolute;
  top: 0.55rem;
  right: clamp(1rem, 2.5vw, 2rem);
  font-family: var(--font-display);
  font-size: 1.6rem;
  line-height: 1;
  color: var(--red);
}

.stack-card h3 {
  font-size: clamp(1.1rem, 2.3vw, 1.7rem);
  line-height: 1.15;
  text-transform: uppercase;
  padding-right: 2.5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stack-card p {
  max-width: 32ch;
  font-size: clamp(1.1rem, 2.2vw, 1.6rem);
  line-height: 1.4;
  color: var(--ink-muted);
}

@media (max-width: 700px) {
  .stack { --tab: 3.05rem; --stack-top: calc(var(--nav) + 0.85rem); }
  .stack-card { min-height: clamp(12rem, 34svh, 16rem); }
}

/* Final CTA */
.final-cta {
  text-align: center;
  border-top: 1px solid var(--line);
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(196, 165, 116, 0.08), transparent 70%),
    var(--ground);
}

.final-cta .section__title {
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}

.final-cta .section__lead {
  margin-left: auto;
  margin-right: auto;
}

.final-cta .btn-row {
  justify-content: center;
}

.placeholder-note {
  margin-top: 1rem;
  font-size: 0.8125rem;
  color: var(--ink-faint);
}

/* Footer */
.site-footer {
  padding: 2.5rem var(--gutter) 3rem;
  border-top: 1px solid var(--line);
  background: var(--ground);
}

.site-footer__inner {
  width: min(100%, var(--max));
  margin: 0 auto;
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 720px) {
  .site-footer__inner {
    grid-template-columns: 1fr auto;
    align-items: end;
  }
}

.site-footer__brand {
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}

.site-footer p {
  font-size: 0.875rem;
  color: var(--ink-muted);
}

.site-footer__draft {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* Stub pages */
.stub {
  min-height: calc(100svh - var(--nav));
  padding: calc(var(--nav) + 4rem) var(--gutter) 4rem;
  display: grid;
  place-items: center;
  text-align: center;
}

.stub__inner {
  max-width: 32rem;
}

.stub h1 {
  font-size: clamp(2rem, 6vw, 3.5rem);
  margin-bottom: 0.85rem;
}

.stub p {
  color: var(--ink-muted);
  margin-bottom: 1.5rem;
}

.temp-badge {
  position: absolute;
  top: 0.65rem;
  left: 0.65rem;
  z-index: 2;
  padding: 0.28rem 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  background: rgba(10, 12, 14, 0.72);
  backdrop-filter: blur(6px);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.made-grid {
  display: grid;
  gap: 1rem;
  margin-top: 2rem;
}

@media (min-width: 800px) {
  .made-grid {
    grid-template-columns: 1.4fr 1fr;
    grid-template-rows: auto auto;
  }
  .made-grid__wide {
    grid-row: 1 / 3;
  }
}

.made-shot {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--ground-2);
  aspect-ratio: 4 / 3;
}

.made-shot--wide {
  aspect-ratio: 3 / 4;
}

@media (max-width: 799px) {
  .made-shot--wide { aspect-ratio: 16 / 10; }
}

/* Made in-house: single primary wide shot */
.made-grid--feature {
  grid-template-columns: 1fr;
  grid-template-rows: auto;
}

.made-shot--feature {
  margin: 0;
  aspect-ratio: 3 / 2;
}

@media (min-width: 800px) {
  .made-grid.made-grid--feature { grid-template-columns: 1fr; }
  .made-shot--feature { aspect-ratio: 21 / 9; }
}

.made-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Scroll reveal (Superdesign Neural Noir recipe): opacity 0 + 30px lift -> in place, 1s, play once.
   Only active once site.js adds .js-reveal to <html>, so no-JS visitors see everything.
   The portal, rail cards, timeline steps and stacking cards have their own motion and are not tagged. */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 1s cubic-bezier(.22, 1, .36, 1),
    transform 1s cubic-bezier(.22, 1, .36, 1);
  transition-delay: calc(var(--i, 0) * 100ms);
}

.js-reveal .reveal.in {
  opacity: 1;
  transform: none;
}

/* Reduced motion: everything static and visible */
@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal,
  .js-motion .tl-step__card {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .timeline { --cut: 100%; }
  .timeline__tip { display: none; }
  .tl-step__node { background: var(--red); }
  .stack-card { position: relative; top: 0; }
  .stack__tail { display: none; }
}

/* Contact / quote form */
.contact-page {
  min-height: calc(100svh - var(--nav));
  padding: calc(var(--nav) + 3.5rem) var(--gutter) 4.5rem;
}

.contact-page__inner {
  max-width: 44rem;
  margin: 0 auto;
}

.contact-page__intro {
  margin-bottom: 2rem;
}

.contact-page__intro .section__eyebrow {
  margin-bottom: 0.65rem;
}

.contact-page__intro .display-title {
  font-size: clamp(2rem, 6vw, 3.5rem);
  margin-bottom: 0.85rem;
}

.contact-page__lead {
  color: var(--ink-muted);
  max-width: 36rem;
  margin: 0;
}

.contact-form {
  background: var(--cream-2);
  color: var(--ink-dark);
  border-radius: 6px;
  padding: clamp(1.35rem, 3vw, 2rem);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 22px 48px rgba(0, 0, 0, 0.4);
}

.contact-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.contact-form__grid {
  display: grid;
  gap: 1rem 1.1rem;
}

@media (min-width: 640px) {
  .contact-form__grid {
    grid-template-columns: 1fr 1fr;
  }
  .contact-form__field--full {
    grid-column: 1 / -1;
  }
}

.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.contact-form__field span {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(23, 23, 23, 0.62);
}

.contact-form__field input,
.contact-form__field select,
.contact-form__field textarea {
  width: 100%;
  font: inherit;
  font-size: 0.98rem;
  color: var(--ink-dark);
  background: #fff;
  border: 1px solid rgba(23, 23, 23, 0.18);
  border-radius: 4px;
  padding: 0.7rem 0.8rem;
  outline: none;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.contact-form__field textarea {
  resize: vertical;
  min-height: 7rem;
}

.contact-form__field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23171717' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  padding-right: 2.2rem;
}

.contact-form__field input:focus,
.contact-form__field select:focus,
.contact-form__field textarea:focus {
  border-color: var(--ink-dark);
  box-shadow: 0 0 0 3px rgba(23, 23, 23, 0.08);
}

.contact-form__note {
  margin: 1.15rem 0 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: rgba(23, 23, 23, 0.72);
}

.contact-form__note--soft {
  margin-top: 0.45rem;
  color: rgba(23, 23, 23, 0.55);
}

.contact-form__status {
  margin: 1rem 0 0;
  padding: 0.75rem 0.9rem;
  border-radius: 4px;
  font-size: 0.92rem;
  line-height: 1.4;
}

.contact-form__status.is-ok {
  background: rgba(46, 125, 50, 0.12);
  color: #1b5e20;
}

.contact-form__status.is-err {
  background: rgba(196, 55, 31, 0.12);
  color: var(--red-text);
}

.contact-form__actions {
  margin-top: 1.35rem;
}

.contact-form .btn--primary {
  background: var(--ink-dark);
  color: var(--cream-2);
}

.contact-form .btn--primary:hover {
  background: var(--red);
  color: #fff;
}

.contact-form .btn--primary:disabled {
  opacity: 0.55;
  cursor: wait;
}


/* =====================================================================
   7 Oct 2026 batch: product page template, For agencies, reassurance,
   24-hour reply promise.
   ===================================================================== */

/* --- 24-hour reply note under every button that goes to Contact --- */
.cta-block { margin-top: 1.5rem; }
.cta-block .btn-row { margin-top: 0; }
.cta-block--center { display: flex; flex-direction: column; align-items: center; text-align: center; }
.cta-block--center .btn-row { justify-content: center; }

.cta-note {
  margin-top: 0.7rem;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.intro-strip .cta-block { margin-top: 0; }

.services-col__note {
  font-size: 0.8rem;
  color: rgba(23, 23, 23, 0.6);
}

.site-nav__mobile-note { display: none; }
@media (max-width: 900px) {
  .site-nav__mobile-note {
    display: block;
    margin-top: 0.6rem;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-faint);
  }
}

/* --- Sitewide reassurance line (footer strip) --- */
.site-footer__assure {
  width: min(100%, var(--max));
  margin: 0 auto 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--line);
}

.assure-line {
  font-size: clamp(0.95rem, 1.6vw, 1.1rem);
  color: var(--ink-muted);
}

.assure-line strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9em;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink);
  margin-right: 0.35rem;
}

.assure-line__plus {
  font-family: var(--font-display);
  color: var(--red);
  margin-right: 0.35rem;
}

.site-footer p.site-footer__reply {
  margin-top: 0.5rem;
  font-size: 0.8rem;
  color: var(--ink-faint);
}

/* --- Stubs: big "Coming soon" --- */
.stub p.stub__soon {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 4.5vw, 2.6rem);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--red);
  margin: 0;
}

/* --- Product hero: Home portal format with the page name in big type --- */
.portal--text { --title-size: clamp(3.6rem, 17vw, 13.5rem); }
.portal--text.portal--long { --title-size: clamp(2.1rem, 8.6vw, 7.6rem); }

.portal__title--text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--title-size);
  line-height: 0.92;
  letter-spacing: -0.01em;
  text-transform: none;
  text-align: center;
  color: #fff;
  text-shadow: 0 4px 40px rgba(0, 0, 0, 0.45);
  padding: 0 var(--gutter);
  max-width: 100%;
}

.portal--text .portal__veil {
  background:
    radial-gradient(120% 90% at 50% 40%, transparent 20%, rgba(10, 12, 14, 0.72) 78%),
    rgba(10, 12, 14, 0.32);
}

.nowrap { white-space: nowrap; }
.keep-case { text-transform: none; }

.portal--text .portal__sub {
  top: calc(50% + var(--title-size) * 0.62 + 0.5rem);
}

/* --- S2 proof --- */
.proof { border-bottom: 1px solid var(--line); }

.proof__points {
  display: grid;
  gap: 1rem;
  margin-top: clamp(2.5rem, 6vw, 4rem);
}

@media (min-width: 760px) {
  .proof__points { grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.5vw, 2rem); }
}

.proof-point {
  position: relative;
  padding: 1.25rem 1.25rem 1.5rem;
  border-top: 2px solid var(--red);
  background: var(--ground-2);
  border-radius: 0 0 6px 6px;
}

.proof-point::after {
  content: "+";
  position: absolute;
  top: 0.6rem;
  right: 1rem;
  font-family: var(--font-display);
  font-size: 1.4rem;
  line-height: 1;
  color: var(--red);
}

.proof-point h3 {
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  text-transform: uppercase;
  padding-right: 2rem;
  margin-bottom: 0.6rem;
}

.proof-point p { color: var(--ink-muted); font-size: 0.98rem; }

.proof__client {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin-top: clamp(2rem, 5vw, 3rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

.proof__client-name {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3.2vw, 2.2rem);
  text-transform: uppercase;
  color: var(--ink);
}

.proof__client-logo {
  display: block;
  width: clamp(140px, 18vw, 200px);
  height: auto;
  border-radius: 50%;
}

/* --- S3 arrive cards --- */
.arrive {
  position: relative;
  background: var(--ground-2);
  border-bottom: 1px solid var(--line);
}

.arrive__stage { padding: clamp(4rem, 10vw, 7rem) var(--gutter); }

.arrive__cards {
  display: grid;
  gap: 1.25rem;
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
}

@media (min-width: 860px) {
  .arrive__cards { grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.75rem); }
}

.arrive-card {
  display: flex;
  flex-direction: column;
  background: var(--cream-2);
  color: var(--ink-dark);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

.arrive-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #d9d3c7;
}

.arrive-card__media img { width: 100%; height: 100%; object-fit: cover; }

.arrive-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.15rem 1.25rem 1.5rem;
}

.arrive-card h3 {
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--ink-dark);
}

.arrive-card p { font-size: 0.95rem; line-height: 1.5; color: rgba(23, 23, 23, 0.76); }

/* Pinned (desktop, set by motion.js): the stage holds, cards slide in from the right one by one. */
.arrive.is-pinned .arrive__stage {
  position: sticky;
  top: var(--nav);
  height: calc(100svh - var(--nav));
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: clamp(1.5rem, 4vh, 3rem);
  padding-bottom: clamp(1.5rem, 4vh, 3rem);
  overflow: hidden;
}

.arrive.is-pinned .arrive-card {
  --k: 0;
  opacity: var(--k);
  transform: translate3d(calc((1 - var(--k)) * 70vw), 0, 0) rotate(calc((1 - var(--k)) * 4deg));
  will-change: transform, opacity;
}

@media (max-height: 760px) {
  .arrive.is-pinned .arrive-card__media { aspect-ratio: 16 / 8; }
  .arrive.is-pinned .display-title { font-size: clamp(1.5rem, 3.4vw, 2.6rem); }
}

/* Phones / short screens: cards stack and slide up as they enter */
.js-motion .arrive.is-stacked .arrive-card {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(.22, 1, .36, 1), transform 0.8s cubic-bezier(.22, 1, .36, 1);
}

.js-motion .arrive.is-stacked .arrive-card.is-in { opacity: 1; transform: none; }

/* --- S4 What we make tiles --- */
.make-grid {
  display: grid;
  gap: 0.85rem;
  margin-top: clamp(2rem, 5vw, 3rem);
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 900px) {
  .make-grid { grid-template-columns: repeat(4, 1fr); gap: 1rem; }
}

.make-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 0.55rem 0.55rem 0.9rem;
  background: var(--cream-2);
  color: var(--ink-dark);
  border-radius: 4px;
}

.make-tile__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 2px;
  background: #e9e9e9;
}

.make-tile__media img { width: 100%; height: 100%; object-fit: cover; }

.make-tile h3 {
  font-size: clamp(0.78rem, 1.15vw, 0.95rem);
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--ink-dark);
  padding: 0 0.3rem;
}

.make-tile--more {
  justify-content: flex-end;
  padding: 1.25rem;
  background: var(--ground-2);
  color: var(--ink);
  border: 1px solid var(--line);
  border-top: 2px solid var(--red);
}

.make-tile--more h3 { color: var(--ink); font-size: clamp(0.95rem, 1.5vw, 1.15rem); padding: 0; }
.make-tile--more p { color: var(--ink-muted); font-size: 0.92rem; }
.make-tile--more p a { text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 0.2em; }

.make-tile__link {
  align-self: flex-start;
  margin-top: 0.4rem;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.5rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
}

.make-tile__link:hover { background: var(--red); border-color: var(--red); color: #fff; }

/* --- S6 Equipment as proof --- */
.equip { border-top: 1px solid var(--line); }

.equip-grid {
  display: grid;
  gap: 1rem;
  margin-top: clamp(2rem, 5vw, 3rem);
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 980px) {
  .equip-grid { grid-template-columns: repeat(5, 1fr); }
}

@media (max-width: 979px) {
  .equip-tile:last-child { grid-column: 1 / -1; }
  .equip-tile:last-child .equip-tile__media { aspect-ratio: 16 / 7; }
}

.equip-tile { display: flex; flex-direction: column; gap: 0.6rem; }

.equip-tile__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--ground-2);
}

.equip-tile__media img { width: 100%; height: 100%; object-fit: cover; }

.equip-tile h3 {
  font-size: clamp(0.85rem, 1.2vw, 1rem);
  line-height: 1.2;
  text-transform: uppercase;
  padding-top: 0.6rem;
  border-top: 2px solid var(--red);
}

.equip-tile p { color: var(--ink-muted); font-size: 0.9rem; line-height: 1.45; }

/* --- S8 Quick quote band (red) --- */
.quick-quote {
  padding: clamp(3.5rem, 9vw, 6rem) var(--gutter);
  background: var(--red);
  color: var(--ink-dark);
}

.quick-quote__inner {
  display: grid;
  gap: 1.75rem;
  align-items: end;
}

@media (min-width: 860px) {
  .quick-quote__inner { grid-template-columns: 1fr auto; gap: 3rem; }
}

.quick-quote .section__eyebrow { color: var(--ink-dark); }
.quick-quote .display-title { color: var(--ink-dark); max-width: 18ch; }

.quick-quote__line {
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  color: rgba(23, 23, 23, 0.86);
  max-width: 38rem;
}

.quick-quote__action { display: flex; flex-direction: column; align-items: flex-start; }
.quick-quote .cta-note { color: rgba(23, 23, 23, 0.72); }

.btn--dark { background: var(--ink-dark); color: #fff; }
.btn--dark:hover { background: #fff; color: var(--ink-dark); }

/* --- For agencies: split sections --- */
.split__inner {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

@media (min-width: 860px) {
  .split__inner { grid-template-columns: 1fr 1fr; }
  .split__inner--flip { grid-template-columns: 0.8fr 1.2fr; }
}

.split__media {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--line);
  aspect-ratio: 16 / 10;
  background: var(--ground-2);
}

.split__media--tall { aspect-ratio: 4 / 5; max-height: 640px; border-color: rgba(23, 23, 23, 0.12); }
.split__media img { width: 100%; height: 100%; object-fit: cover; }

.sample .display-title { max-width: 16ch; }
.sample .cta-note { color: rgba(23, 23, 23, 0.6); }

/* Compact timeline (text-only steps, e.g. For agencies) */
@media (min-width: 860px) {
  .timeline--compact .tl-step:nth-child(n+2) { margin-top: -4.5rem; }
}
.timeline--compact .tl-step__card { padding: 1.25rem 1.1rem 1.4rem; }
.timeline--compact .tl-step__title { font-size: clamp(1rem, 1.6vw, 1.25rem); }

/* --- Contact form: reply promise + reassurance --- */
.contact-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; }

.contact-form__reply {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(23, 23, 23, 0.62);
}

.contact-form__assure {
  margin-top: 1.1rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(23, 23, 23, 0.12);
  font-size: 0.9rem;
  color: rgba(23, 23, 23, 0.78);
}

.contact-form__assure strong { color: var(--ink-dark); }

/* Reduced motion for the new pieces */
@media (prefers-reduced-motion: reduce) {
  .arrive-card,
  .js-motion .arrive.is-stacked .arrive-card {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ---------- Photo placeholders (batch 5, 12 Oct 2026) ----------
   Fills the slot's own size/crop while we wait on stock or real photos. */
.ph {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 1rem;
  text-align: center;
  background: #15181b;
  border: 1px dashed rgba(231, 226, 216, 0.28);
  border-radius: inherit;
  color: rgba(231, 226, 216, 0.62);
}
.ph__lab {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(231, 226, 216, 0.85);
}
.ph__hint {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1.4;
  max-width: 26ch;
}
.product-card__media .ph,
.services-band .ph,
.make-tile__media .ph { background: #dcd6ca; border-color: rgba(23, 23, 23, 0.28); color: rgba(23, 23, 23, 0.6); }
.product-card__media .ph .ph__lab,
.services-band .ph .ph__lab,
.make-tile__media .ph .ph__lab { color: rgba(23, 23, 23, 0.82); }
.split__media .ph, .made-shot .ph { border-radius: inherit; }
.portal__frame-img--ph {
  background: #15181b;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 20vh;
  gap: 0.4rem;
  color: rgba(231, 226, 216, 0.55);
  text-align: center;
  outline: 1px dashed rgba(231, 226, 216, 0.22);
  outline-offset: -28px;
}
.portal__frame-img--ph .ph__lab { color: rgba(231, 226, 216, 0.8); }


.split__caption { margin-top: 0.6rem; font-size: 0.8125rem; color: var(--ink-faint); }

/* --- Hero copy: title + subtitle stacked so the subtitle always sits below the title (1 or 2 lines) --- */
.portal__copy {
  position: relative;
  z-index: 5;
  width: 100%;
  min-width: 0;
  max-width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.6rem, 4vw, 3rem);
}
.portal__copy .portal__sub,
.portal--text .portal__copy .portal__sub {
  position: static;
  top: auto;
  left: auto;
  transform: none;
}

/* --- Text-only tiles (no good image for the slot) --- */
.make-tile--text { justify-content: flex-end; min-height: 7rem; padding: 1.1rem; border-top: 2px solid var(--red); }
.make-tile--text h3 { padding: 0; }
.equip-tile--text { padding: 1.1rem; border: 1px solid var(--line); border-top: 2px solid var(--red); border-radius: 4px; }

/* --- Cookie settings link --- */
.ff-cookie-link {
  position: fixed; left: 0.5rem; bottom: 0.4rem; z-index: 50;
  padding: 0.1rem 0.3rem; border: 0; background: transparent; cursor: pointer;
  font: 500 10px/1.2 var(--font-mono, monospace); letter-spacing: 0.06em;
  color: rgba(231, 226, 216, 0.45); text-decoration: underline;
}
.ff-cookie-link:hover, .ff-cookie-link:focus-visible { color: rgba(231, 226, 216, 0.9); }
.site-footer__contact a, .contact-page__direct a { text-decoration: underline; text-underline-offset: 0.2em; }
.contact-page__direct { margin-top: 0.9rem; color: var(--ink-muted); }