/* ==========================================================================
   Farbe Enterprise - "Day Shift"
   One working day at the Farbe yard, told in eight scenes. One key light
   (the sun, in Farbe amber), clean daylight surfaces, one display face, one
   grain. The footer stays dark: it is the end credits.

   Rule of thumb: the default CSS state is always the FINAL frame. Things are
   only pre-hidden under classes that JavaScript adds (html.intro, html.fx,
   html.cine), so with no JS, a JS error or a blocked CDN, everything shows.

   Contents
   1.  Tokens
   2.  Base & typography
   3.  Layout helpers
   4.  Global effects (grain, cuts, keyframes)
   5.  Buttons, focus, skip link
   6.  Header & navigation
   7.  Hero - SC.01 loading docks
   8.  Opening sequence (html.intro)
   9.  Services - SC.02 the aisles
   10. Why us - SC.03 the yard
   11. Process - SC.04 receiving
   12. Industries - SC.05 the manifest
   13. About - SC.06 the office
   14. CTA band - SC.07 the roller door
   15. Contact - SC.08 dispatch desk
   16. Footer - end credits
   17. Simple pages (thank-you, 404)
   18. Reveal on scroll
   19. Responsive
   20. Motion preferences
   21. Print
   ========================================================================== */

/* ---------- 0. Fonts (self-hosted Latin subsets, SIL Open Font Licence) ---------- */
/* Plus Jakarta Sans for headings, Inter for text. Each has a tiny extra file with just the rupee sign. */
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 500 800; font-display: swap; src: url("../assets/fonts/plus-jakarta-sans.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 500 800; font-display: swap; src: url("../assets/fonts/plus-jakarta-sans-rupee.woff2") format("woff2"); unicode-range: U+20B9; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../assets/fonts/inter.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../assets/fonts/inter-rupee.woff2") format("woff2"); unicode-range: U+20B9; }
/* Arial sized like each font, so text does not jump when the web font arrives */
@font-face { font-family: "Jakarta Fallback"; src: local("Arial"); size-adjust: 104.27%; ascent-override: 99.55%; descent-override: 21.29%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback"; src: local("Arial"); size-adjust: 104.65%; ascent-override: 92.57%; descent-override: 23.05%; line-gap-override: 0%; }

/* ---------- 1. Tokens ---------- */
/* Contrast ratios are for text on --bg (#FAF8F4) unless noted. */
:root {
  color-scheme: light;
  --bg: #FAF8F4;           /* base: services, process, about */
  --bg-alt: #F2EEE6;       /* alt: why-us, industries, contact */
  --surface: #FFFFFF;      /* cards, form, panels */
  --surface-2: #FBF9F5;    /* card gradient bottom */
  --well: #F7F5F0;         /* inputs, manifest lower half */
  --line: #E4DED2;         /* hairlines, borders (never text) */
  --line-strong: #CFC7B8;  /* rails, unlit step numbers, stencils (decor only) */
  --rail: #8C8577;         /* input borders (3.66:1 on surface) */
  --ink: #16191E;          /* headings, labels (16.9:1) */
  --ink-2: #2F353E;        /* lead, nav links (12.1:1) */
  --text: #4A515B;         /* body copy (7.5:1 on bg, 6.9:1 on bg-alt) */
  --muted: #6B6456;        /* mono slugs, indices, placeholders (5.5:1 bg / 5.0:1 bg-alt) */
  /* Brand colours from the Farbe Enterprise logo: orange "farbe", teal "enterprise", green swoosh */
  --sun: #F08143;          /* brand orange: buttons, bars, highlights; ink text on it 6.7:1 */
  --sun-hot: #F59C68;      /* hover fill (ink 8.3:1); link hover on the dark footer */
  --sun-ink: #1E6E78;      /* accent text = deep brand teal (5.6:1 bg / 5.1:1 bg-alt) */
  --sun-deep: #D95A24;     /* deep orange: large text (3.6:1), CTA base (ink text 4.6:1) */
  --teal: #66C3D0;         /* brand teal: decoration, focus glow */
  --teal-deep: #2F8C99;    /* icons, input focus (3.7:1) */
  --green: #86C44A;        /* brand green: status dots, small accents */
  --lime: #B3D342;
  --ok: #1E7A3C;           /* 5.4:1 on surface */
  --alarm: #B42318;        /* 6.5:1 on surface */
  --lit-border: #F4B08C;
  --footer-bg: #15181D;
  --foot: #B3AC9F;         /* footer text (7.8:1 on footer-bg) */
  --foot-hi: #EEE7DA;
  --foot-dim: #8E887C;     /* footer labels (5.0:1) */
  --foot-line: #262B33;
  --f-display: "Plus Jakarta Sans", "Jakarta Fallback", "Segoe UI", Roboto, Arial, sans-serif;
  --f-body: "Inter", "Inter Fallback", "Segoe UI", Roboto, Arial, sans-serif;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.7, 0, .2, 1);
  --header-h: 72px;        /* 64px at <=760 */
  --r-sm: 2px; --r: 4px; --r-lg: 6px;
  --shadow-sm: 0 1px 2px rgba(22, 25, 30, .05), 0 2px 10px rgba(22, 25, 30, .05);
  --shadow: 0 22px 44px -22px rgba(22, 25, 30, .28);
  --glow: 0 10px 30px -10px rgba(217, 90, 36, .5);
  --container: 1200px;
}

/* ---------- 2. Base & typography ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-padding-top: var(--header-h); -webkit-text-size-adjust: 100%; }
/* Smooth in-page scrolling is switched on by site.js after load (html.smooth), so the
   initial jump to a #hash on page load is instant and can't be interrupted. */
@media (prefers-reduced-motion: no-preference) { html.smooth { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  font-feature-settings: "cv05", "cv08"; /* Inter: l with a tail and a slashed zero, easier to tell apart */
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img, svg, video, canvas { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0 0 1rem; }
ul, ol { margin: 0; padding: 0; }

h1, h2, h3 { margin: 0; color: var(--ink); font-family: var(--f-display); letter-spacing: -.02em; word-spacing: .04em; }
h2 {
  font-weight: 700;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  line-height: 1.15;
  letter-spacing: -.022em;
  margin-bottom: 1.25rem;
  text-wrap: balance;
}
h3 { font-weight: 700; font-size: 1.25rem; line-height: 1.3; letter-spacing: -.01em; margin-bottom: .6rem; }

.muted { color: var(--text); }

/* Eyebrow: decorative scene slug + real section label */
.eyebrow {
  margin: 0 0 1rem;
  font: 600 .75rem/1.4 var(--f-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sun-ink);
}
.eyebrow .slug,
.hero-slug {
  display: block;
  margin-bottom: .4rem;
  font: 500 .72rem/1.4 var(--f-body);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- 3. Layout helpers ---------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + 48px);
  margin-inline: auto;
  padding-inline: 24px;
}

.section {
  position: relative;
  padding: clamp(5rem, 10vw, 8rem) 0;
  overflow: hidden;
  overflow: clip;
  background: var(--bg);
}
.section > .container { position: relative; z-index: 1; }
.section-alt {
  background-color: var(--bg-alt);
  background-image: radial-gradient(60% 50% at 0% 100%, rgba(102, 195, 208, .16), transparent 70%);
}
#contact.section-alt { background-image: radial-gradient(60% 50% at 100% 0%, rgba(102, 195, 208, .16), transparent 70%); }

.section-head { max-width: 46rem; margin: 0 auto 3.5rem; text-align: center; }
.section-head > p:last-child { margin: 0 auto; max-width: 38rem; }

.icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  margin-bottom: 1.25rem;
}
.icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--teal-deep);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- 4. Global effects ---------- */
/* Film grain: one fixed layer over the whole page */
body::after {
  content: "";
  position: fixed;
  inset: -10%;              /* jitter is +-4%, so 10% overscan is enough and keeps the blended layer small */
  z-index: 90;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
  opacity: .035;
}
@media (pointer: fine) and (min-width: 761px) {
  body::after {
    mix-blend-mode: overlay;
    opacity: .06;
  }
  /* Only animate where the Pause motion toggle exists (index.html with JS);
     thank-you, 404 and no-JS visitors get still grain. */
  html.js:not(.motion-paused) body::after {
    will-change: transform;
    animation: grain 1s steps(6) infinite;
  }
}
@keyframes grain {
  0%   { transform: translate3d(0, 0, 0); }
  17%  { transform: translate3d(-3%, 2%, 0); }
  33%  { transform: translate3d(2%, -4%, 0); }
  50%  { transform: translate3d(-4%, -1%, 0); }
  67%  { transform: translate3d(4%, 3%, 0); }
  83%  { transform: translate3d(-1%, 4%, 0); }
  100% { transform: translate3d(3%, -2%, 0); }
}

/* Scene cut: a sunlit hairline at the top of each section */
.cut {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--sun) 50%, transparent);
  box-shadow: 0 0 14px rgba(240, 129, 67, .35);
  transform-origin: center;
  transform: scaleX(1);
}

@keyframes strike { 0% { opacity: 0 } 12% { opacity: .55 } 22% { opacity: .2 } 40% { opacity: .85 } 55% { opacity: .6 } 100% { opacity: 1 } }
@keyframes lineUp { from { transform: translateY(108%) } to { transform: none } }
/* Hero entrance: transform only, so the text counts as painted immediately (LCP) */
@keyframes riseIn { from { transform: translateY(14px) } to { transform: none } }
@keyframes rise { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes lbOut { from { transform: scaleY(1) } to { transform: scaleY(0) } }
@keyframes typeOn { from { clip-path: inset(0 100% 0 0) } to { clip-path: inset(0 0 0 0) } }
@keyframes deskLamp { 0% { opacity: 0 } 10% { opacity: .8 } 15% { opacity: .3 } 100% { opacity: 1 } }
@keyframes scan { from { transform: translateX(-100%) } to { transform: translateX(100%) } }
/* A pulse of light travels down the cue line (transform only, so it stays on the compositor) */
@keyframes cue { from { transform: translateY(-100%); } to { transform: translateY(100%); } }
/* Opening shot: the camera's exposure settles from blown-out daylight */
@keyframes exposure { from { filter: brightness(1.45) saturate(.25) contrast(.85); } to { filter: brightness(1) saturate(1) contrast(1); } }
/* Highlighter stroke under "count on" */
@keyframes hlSweep { from { background-size: 0% 30%; } to { background-size: 100% 30%; } }

/* ---------- 5. Buttons, focus, skip link ---------- */
.btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 48px;
  padding: .9rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font: 600 .9375rem/1.2 var(--f-body);
  letter-spacing: .005em;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color .25s, color .25s, border-color .25s, box-shadow .25s;
}
.btn-primary { background: var(--sun); color: var(--ink); }
.btn-primary:hover,
.btn-primary:focus-visible { background: var(--sun-hot); box-shadow: var(--glow); }
.btn-primary::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 40%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent);
  transform: translateX(-120%) skewX(-20deg);
}
.btn-primary:hover::after { transform: translateX(260%) skewX(-20deg); transition: transform .7s var(--ease-out); }

.btn-ghost { border-color: rgba(22, 25, 30, .3); color: var(--ink); background: rgba(255, 255, 255, .55); }
.btn-ghost:hover { border-color: var(--sun-ink); color: var(--sun-ink); background: rgba(240, 129, 67, .08); }

.btn-dark { background: var(--ink); color: #8FD4DD; }
.btn-dark:hover { background: #2A2F37; }

.btn-sm { min-height: 40px; padding: .6rem 1.1rem; }
.btn-block { width: 100%; }

.btn[disabled] { cursor: progress; opacity: .9; }
.btn[disabled]::after {
  width: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent);
  transform: translateX(-100%);
  animation: scan 1.2s linear infinite;
  transition: none;
}

:focus-visible {
  outline: 2px solid var(--sun-ink);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(102, 195, 208, .35);
}
.cta-band :focus-visible { outline: 2px solid var(--ink); box-shadow: none; }
.site-footer :focus-visible { outline-color: var(--sun-hot); }

.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 200;
  padding: .75rem 1rem;
  background: var(--sun);
  color: var(--ink);
  border-radius: var(--r-sm);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* ---------- 6. Header & navigation ---------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--header-h);
  background: linear-gradient(rgba(250, 248, 244, .85), rgba(250, 248, 244, 0));
  transition: background-color .3s, box-shadow .3s;
}
.site-header.scrolled {
  background: rgba(250, 248, 244, .88);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  box-shadow: 0 1px 0 var(--line), 0 8px 24px -18px rgba(22, 25, 30, .35);
}
.site-header.scrolled::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(240, 129, 67, .55), transparent);
}
.nav-wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; }
.brand-mark { width: 34px; height: 34px; filter: drop-shadow(0 3px 6px rgba(240, 129, 67, .25)); }
.brand-logo { display: block; width: auto; height: 42px; max-width: none; }
.site-footer .brand-logo { height: 46px; }
.brand-text {
  font: 800 1.3rem/1 var(--f-display);
  letter-spacing: -.02em;
  color: var(--ink);
}
.brand-text span { color: var(--sun-deep); }

.site-nav ul { list-style: none; display: flex; align-items: center; gap: 2rem; }
.site-nav a:not(.btn) {
  position: relative;
  display: inline-block;
  padding: .5rem 0;
  font: 500 .9375rem/1.2 var(--f-body);
  text-decoration: none;
  color: var(--ink-2);
  transition: color .2s;
}
.site-nav a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--sun);
  box-shadow: 0 0 8px rgba(240, 129, 67, .5);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s var(--ease-out);
}
.site-nav a:not(.btn):hover::after,
.site-nav a:not(.btn):focus-visible::after,
.site-nav a[aria-current="true"]::after { transform: scaleX(1); }
.site-nav a:not(.btn):hover,
.site-nav a[aria-current="true"] { color: var(--sun-ink); }

.nav-toggle { display: none; }
.site-nav a { white-space: nowrap; }

/* ---------- 7. Hero - SC.01 EXT. LOADING DOCKS - DAY ---------- */
.hero {
  position: relative;
  overflow: hidden;
  display: grid;
  align-items: center;
  min-height: max(640px, 100svh);
  padding-top: var(--header-h);
  background: linear-gradient(#BFD9EE 0%, #E4EEF5 45%, #F6F0E4 72%, var(--bg) 100%);
}
.scene { position: absolute; inset: 0; z-index: 0; pointer-events: none; will-change: transform; }
.scene-svg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.atmos {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  mix-blend-mode: screen;
  pointer-events: none;
}
.svg-cones { mix-blend-mode: screen; }
html.gl-ready .svg-cones { display: none; }

/* Pointer parallax (values written by cinema.js on .hero) */
@media (pointer: fine) {
  #far { transform: translate(calc(var(--px, 0) * 2px), calc(var(--py, 0) * 1px)); }
  #facade, .svg-cones { transform: translate(calc(var(--px, 0) * 6px), calc(var(--py, 0) * 3px)); }
  #fg { transform: translate(calc(var(--px, 0) * 14px), calc(var(--py, 0) * 6px)); }
  .atmos { transform: translate3d(calc(var(--px, 0) * 6px), calc(var(--py, 0) * 3px), 0); }
}

/* Optional owner footage (only created when data-video is set) */
.hero-footage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  filter: saturate(1.05) contrast(1.02);
}
.scene.has-footage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, rgba(255, 214, 150, .28), transparent 55%);
  mix-blend-mode: soft-light;
}

.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(250, 248, 244, .95) 0 38%, rgba(250, 248, 244, .72) 54%, rgba(250, 248, 244, 0) 72%),
    linear-gradient(0deg, var(--bg) 0, rgba(250, 248, 244, 0) 16%);
}

.letterbox { display: none; position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.letterbox span { position: absolute; left: 0; right: 0; height: 12vh; background: #0B0D10; }
.letterbox span:first-child { top: 0; transform-origin: top; }
.letterbox span:last-child { bottom: 0; transform-origin: bottom; }

.hero-slug {
  position: absolute;
  z-index: 3;
  top: calc(var(--header-h) + 18px);
  left: max(24px, calc((100% - var(--container) - 48px) / 2 + 24px));
  margin: 0;
  pointer-events: none;
}

.hero-inner { position: relative; z-index: 3; }
.hero-copy { max-width: 40rem; padding-block: clamp(3rem, 8vh, 6rem); }

.h1 {
  font-weight: 700;
  font-size: clamp(2.5rem, 5.4vw, 4.5rem);
  line-height: 1.04;
  letter-spacing: -.03em;
  word-spacing: .06em;
  color: var(--ink);
  margin-bottom: 1.5rem;
}
.h1 .line { display: block; overflow: hidden; padding-bottom: .06em; }
.h1 .line > span { display: inline-block; }
/* Desktop: each headline line stays one line, so a font swap can never change its height (CLS) */
@media (min-width: 761px) { .h1 .line > span { white-space: nowrap; } }
/* Amber highlighter stroke behind "count on" (ink text stays 9:1 over it) */
.hl {
  color: var(--ink);
  padding-inline: .04em;
  margin-inline: -.04em;
  background: linear-gradient(var(--sun), var(--sun)) 0 88% / 100% 30% no-repeat;
}

.lead {
  font-size: clamp(1.1rem, 1.6vw, 1.25rem);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 36rem;
  margin-bottom: 2rem;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-bottom: 2rem; }

.hero-points { list-style: none; display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; }
.hero-points li {
  display: flex;
  align-items: center;
  gap: .55rem;
  font: 500 .9375rem/1.4 var(--f-body);
  color: var(--ink-2);
}
.hero-points li::before,
.checklist li::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 2px;
  background: var(--sun) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316191E' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / 10px no-repeat;
}

.hero-controls {
  position: absolute;
  z-index: 4;
  right: 24px;
  bottom: 24px;
  display: flex;
  gap: .5rem;
}
.intro-skip,
.motion-toggle {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid rgba(22, 25, 30, .22);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--ink-2);
  font: 500 .72rem/1 var(--f-body);
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .2s, color .2s;
}
.intro-skip { display: none; }
html.intro .intro-skip { display: inline-flex; }
.intro-skip:hover, .motion-toggle:hover { border-color: var(--sun-ink); color: var(--sun-ink); }
.motion-toggle svg { width: 14px; height: 14px; fill: currentColor; }
.motion-toggle .i-play { display: none; }
.motion-toggle[aria-pressed="true"] { border-color: var(--sun-deep); }
.motion-toggle[aria-pressed="true"] .i-pause { display: none; }
.motion-toggle[aria-pressed="true"] .i-play { display: inline; }

.scroll-cue {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  pointer-events: none;
  transition: opacity .4s;
}
.scroll-cue span { font: 500 .72rem/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.scroll-cue i { position: relative; display: block; width: 1px; height: 48px; overflow: hidden; background: rgba(217, 90, 36, .25); }
.scroll-cue i::after { content: ""; position: absolute; inset: 0; background: var(--sun-deep); animation: cue 1.6s var(--ease-io) 3; }
.site-header.scrolled ~ main .scroll-cue { opacity: 0; }

/* ---------- 8. Opening sequence (only while html.intro is set, <= 1.8s) ---------- */
html.intro .hero-slug { animation: typeOn 600ms steps(34) both; }
html.intro .scene-svg { animation: exposure 1300ms var(--ease-out) both; }
html.intro .hero .eyebrow { animation: fadeIn 500ms ease-out 350ms both; }
html.intro .h1 .line > span { animation: lineUp 900ms var(--ease-out) both; animation-delay: calc(350ms + var(--l, 0) * 110ms); }
html.intro .hl { animation: hlSweep 700ms var(--ease-out) 900ms both; }
html.intro .atmos,
html.intro .svg-cones { animation: fadeIn 1000ms ease-out 400ms both; }
html.intro .letterbox { display: block; }
html.intro .letterbox span { animation: lbOut 900ms var(--ease-io) 600ms both; }
html.intro .hero .lead { animation: riseIn 600ms var(--ease-out) 700ms both; }
html.intro .hero-actions { animation: riseIn 600ms var(--ease-out) 780ms both; }
html.intro .hero-points { animation: riseIn 600ms var(--ease-out) 860ms both; }

/* ---------- 9. Services - SC.02 INT. THE AISLES ---------- */
.section-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .9;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(transparent, #000 15%, #000 85%, transparent);
  mask-image: linear-gradient(transparent, #000 15%, #000 85%, transparent);
}
.aisle { width: 100%; height: 100%; max-width: none; }

.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }

.card {
  position: relative;
  overflow: hidden;
  padding: 2.25rem 2rem 2rem;
  background: linear-gradient(var(--surface), var(--surface-2));
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  /* reveal uses transform, hover uses translate, so their timings stay separate */
  transition:
    opacity .8s var(--ease-out) calc(var(--i, 0) * 110ms),
    transform .8s var(--ease-out) calc(var(--i, 0) * 110ms),
    translate .3s var(--ease-out),
    border-color .3s,
    box-shadow .3s;
}
.card:hover,
.card:focus-within { translate: 0 -4px; border-color: var(--lit-border); box-shadow: var(--shadow); }
.card h3 { color: var(--ink); }
.card p { margin: 0; color: var(--text); }

/* A skylight over each bay */
.card-lamp {
  position: absolute;
  top: 0;
  left: 30%;
  width: 40%;
  height: 3px;
  pointer-events: none;
  background: var(--sun);
  box-shadow: 0 0 16px 3px rgba(240, 129, 67, .45);
  transition: width .3s var(--ease-out), left .3s var(--ease-out);
}
.card-lamp::after {
  content: "";
  position: absolute;
  top: 3px;
  left: -25%;
  width: 150%;
  height: 220px;
  clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%);
  background: linear-gradient(rgba(240, 129, 67, .13), transparent 70%);
}
.card:hover .card-lamp,
.card:focus-within .card-lamp { width: 70%; left: 15%; }
.card:hover .card-lamp::after,
.card:focus-within .card-lamp::after { background: linear-gradient(rgba(240, 129, 67, .22), transparent 70%); }
html.fx .card:not(.visible) .card-lamp { opacity: 0; }
html.fx .card.visible .card-lamp { animation: strike 700ms linear both; animation-delay: calc(var(--i, 0) * 110ms + 250ms); }

.bay-label {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  font: 800 1rem/1 var(--f-display);
  letter-spacing: .06em;
  color: #8FCFD8;
  transition: color .6s;
}
html.fx .card:not(.visible) .bay-label { color: var(--line); }

/* ---------- 10. Why us - SC.03 EXT. THE YARD ---------- */
.split { display: grid; grid-template-columns: .9fr 1.1fr; gap: 4rem; align-items: center; }

.checklist { list-style: none; display: grid; gap: .8rem; margin: 1.75rem 0 2.25rem; }
.checklist li { display: flex; align-items: flex-start; gap: .75rem; color: var(--ink-2); }
.checklist li::before { width: 18px; height: 18px; margin-top: .3rem; }

.feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.feature {
  --lit: 1;
  position: relative;
  padding: 1.75rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-color: color-mix(in srgb, var(--sun) calc(var(--lit) * 60%), var(--line));
  box-shadow: 0 1px 2px rgba(22, 25, 30, .05), 0 16px 32px -20px rgba(217, 90, 36, calc(var(--lit) * .5));
  border-radius: var(--r);
}
.feature .icon { background: var(--bg); }
.feature h3 { font-size: 1.45rem; color: var(--ink); }
.feature p { margin: 0; color: var(--text); }

/* A patch of sunlight crossing the yard (moved by cinema.js) */
.beam {
  display: none;
  position: absolute;
  z-index: 0;
  top: 15%;
  left: 0;
  width: 60vw;
  height: 70%;
  pointer-events: none;
  will-change: transform;
  background:
    radial-gradient(38% 20% at 40% 50%, rgba(255, 190, 85, .28), transparent 70%),
    radial-gradient(38% 20% at 62% 52%, rgba(255, 214, 150, .24), transparent 70%);
}
html.cine .beam { display: block; }

/* ---------- 11. Process - SC.04 INT. RECEIVING ---------- */
.steps-wrap { position: relative; }
.rail {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--line);
  pointer-events: none;
}
.rail-fill {
  position: absolute;
  inset: 0;
  background: var(--sun);
  box-shadow: 0 0 12px rgba(240, 129, 67, .55);
  transform-origin: left;
  transform: scaleX(1);
}
.steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.step { position: relative; padding-top: 2.25rem; }
.step p { margin: 0; color: var(--text); }
.node {
  position: absolute;
  top: -5px;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 1px;
  background: var(--sun);
  box-shadow: 0 0 12px rgba(240, 129, 67, .65);
  transition: background-color .4s, box-shadow .4s;
}
.step-num {
  display: block;
  margin-bottom: .75rem;
  font: 800 clamp(3rem, 5vw, 4.5rem)/1 var(--f-display);
  letter-spacing: -.04em;
  color: var(--sun-deep);
  text-shadow: 0 8px 26px rgba(240, 129, 67, .35);
  transition: color .4s, text-shadow .4s;
}
html.cine .step:not(.is-lit) .step-num { color: var(--line-strong); text-shadow: none; }
html.cine .step:not(.is-lit) .node { background: var(--line-strong); box-shadow: none; }

/* ---------- 12. Industries - SC.05 THE MANIFEST ---------- */
.manifest {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .75rem;
  max-width: 900px;
  margin: 0 auto;
  perspective: 900px;
}
.manifest li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 56px;
  padding: 0 1.25rem;
  background: linear-gradient(var(--surface) 0 50%, var(--well) 50%);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-sm);
  transform-style: preserve-3d;
  transition: border-color .3s;
}
/* The split-flap hinge */
.manifest li::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: rgba(22, 25, 30, .08);
  pointer-events: none;
}
.manifest .idx { font: 500 .75rem/1 var(--f-body); font-variant-numeric: tabular-nums; letter-spacing: .12em; color: var(--muted); }
.manifest .name {
  position: relative;
  z-index: 1;
  font: 600 1.2rem/1.25 var(--f-display);
  letter-spacing: -.01em;
  color: var(--ink);
  padding: .6rem 0;
}
.manifest .led {
  margin-left: auto;
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
  transition: box-shadow .3s;
}
.manifest li:hover { border-color: var(--lit-border); }
.manifest li:hover .led { box-shadow: 0 0 14px var(--green); }

/* ---------- 13. About - SC.06 INT. THE OFFICE ---------- */
.wall-stencil {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  margin-top: -.5em;
  z-index: 0;
  text-align: center;
  font: 800 24vw/1 var(--f-display);
  letter-spacing: -.05em;
  color: #F0EBE1;
  pointer-events: none;
  white-space: nowrap;
  user-select: none;
}
.about-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 4rem; align-items: center; }

.values {
  position: relative;
  overflow: hidden;
  padding: 2.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}
/* Window light falling across the desk */
.values::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 70% at 70% 0, rgba(240, 129, 67, .16), transparent 65%);
}
.values::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent calc(50% - .5px), #F3EFE7 calc(50% - .5px), #F3EFE7 calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(0deg, transparent calc(50% - .5px), #F3EFE7 calc(50% - .5px), #F3EFE7 calc(50% + .5px), transparent calc(50% + .5px));
}
.values > * { position: relative; z-index: 1; }
.values h3 { color: var(--ink); margin-bottom: 1.25rem; }
.values ul { list-style: none; display: grid; gap: 1rem; }
.values li {
  padding: .15rem 0 .15rem 1rem;
  border-left: 2px solid var(--sun);
  color: var(--text);
}
.values strong { display: block; color: var(--ink); font-weight: 600; }
html.fx .values:not(.visible)::before { opacity: 0; }
html.fx .values.visible::before { animation: deskLamp 1.2s linear both; }
html.fx .values.visible li { animation: rise 600ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 90ms + 300ms); }

/* ---------- 14. CTA band - SC.07 THE ROLLER DOOR ---------- */
.cta-band { position: relative; overflow: hidden; min-height: 340px; display: grid; align-items: center; }
.dock-interior {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(58, 28, 5, .2) 0 6%, transparent 18% 82%, rgba(58, 28, 5, .2) 94%), /* <= .2 keeps CTA copy at AA */
    linear-gradient(180deg, #F7A877 0%, #F08143 55%, #D95A24 100%);
}
/* Racking: only in the side gutters outside the container (never behind text) */
.dock-interior::before,
.dock-interior::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: min(18%, max(0px, calc((100% - var(--container) - 48px) / 2 + 8px)));
  background:
    repeating-linear-gradient(180deg, transparent 0 70px, rgba(58, 28, 5, .5) 70px 74px),
    linear-gradient(90deg, transparent 30%, rgba(58, 28, 5, .45) 30% calc(30% + 4px), transparent calc(30% + 4px) 80%, rgba(58, 28, 5, .45) 80% calc(80% + 4px), transparent calc(80% + 4px));
}
.dock-interior::before { left: 0; }
.dock-interior::after { right: 0; transform: scaleX(-1); }

.cta-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding-block: 4rem;
}
.cta-band h2 { font-weight: 700; color: var(--ink); margin-bottom: .5rem; }
.cta-band p { margin: 0; color: var(--ink); font-weight: 500; }
.cta-band .cta-slug {
  margin-bottom: .6rem;
  font: 500 .72rem/1.4 var(--f-body);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: .7;
}
.cta-band .btn { flex: none; }

/* A light-steel roller door that lifts to reveal the warm interior */
.roller {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  transform: translateY(-92%);
  will-change: transform;
  background: repeating-linear-gradient(180deg, #E1E6EB 0 16px, #C4CCD5 16px 17px, #D3DAE1 17px 18px);
}
.roller::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: #8F9AA6;
}
.roller::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -18px;
  height: 18px;
  background: linear-gradient(rgba(22, 25, 30, .18), transparent);
}
/* Focus safety: the door is always open while focus is inside the band */
.cta-band:focus-within .roller { transform: translateY(-92%) !important; }

/* ---------- 15. Contact - SC.08 INT. DISPATCH DESK ---------- */
.contact-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 4rem; align-items: start; }

.info-list { list-style: none; display: grid; gap: 1rem; margin-top: 2rem; }
.info-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.25rem 1.1rem 2.25rem;
  background: linear-gradient(225deg, transparent 12px, var(--surface) 12px);
  border-left: 2px solid var(--sun);
  filter: drop-shadow(0 2px 6px rgba(22, 25, 30, .06));
}
/* Punched hole of a shipping tag */
.info-item::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--bg-alt);
  border: 1px solid var(--line-strong);
}
.info-item .icon { margin: 0; background: var(--bg); }
.info-item span {
  display: block;
  font: 500 .75rem/1.4 var(--f-body);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.info-item a {
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  word-break: break-word;
  transition: color .2s;
}
.info-address { font-style: normal; font-weight: 600; color: var(--ink); }
.info-lines a { display: block; }
/* Invest page: information-only notice and the interest-list form */
.notice-box { margin: 0 0 2rem; padding: 1rem 1.25rem; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--sun); }
.notice-box p { margin: 0; }
.invest-form { margin: 1.5rem 0 2.5rem; }
.info-lines .info-wa { margin-top: .25rem; font-weight: 500; font-size: .9375rem; color: var(--sun-ink); }
#about a:not(.btn) { color: var(--sun-ink); }
.info-item a:hover { color: var(--sun-ink); text-decoration: underline; }

.contact-form {
  position: relative;
  overflow: hidden;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  color-scheme: light;
}
.contact-form::before {
  content: "";
  position: absolute;
  top: 0;
  left: 35%;
  width: 30%;
  height: 3px;
  background: var(--sun);
  box-shadow: 0 0 16px 3px rgba(240, 129, 67, .4);
  pointer-events: none;
}
.contact-form::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 15%;
  width: 70%;
  height: 40%;
  clip-path: polygon(35% 0, 65% 0, 100% 100%, 0 100%);
  background: linear-gradient(rgba(240, 129, 67, .12), transparent);
  opacity: .7;
  transition: opacity .3s;
  pointer-events: none;
}
.contact-form:focus-within::after { opacity: 1; }
.contact-form > * { position: relative; z-index: 1; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field { margin-bottom: 1.1rem; }
.field label { display: block; margin-bottom: .45rem; font: 600 .875rem/1.3 var(--f-body); color: var(--ink); }
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: .85rem .95rem;
  background: var(--well);
  border: 1px solid var(--rail);
  border-radius: 3px;
  color: var(--ink);
  font: 400 1rem/1.4 var(--f-body);
  accent-color: var(--sun-deep);
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.field textarea { resize: vertical; min-height: 140px; }
.field ::placeholder { color: var(--muted); opacity: 1; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--teal-deep);
  box-shadow: 0 0 0 3px rgba(102, 195, 208, .35);
}
.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.75rem;
  background: var(--well) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E6E78' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 1rem center / 16px no-repeat;
}
.field select:focus { background-color: var(--surface); }
.field select option { background: var(--surface); color: var(--ink); }
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: #16191E;
  box-shadow: 0 0 0 1000px #FFF6E5 inset;
  caret-color: #16191E;
  transition: background-color 9999s;
}

.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.form-status { min-height: 1.5rem; margin: 1rem 0 .5rem; font-weight: 600; }
.form-status:empty { margin: .5rem 0 0; }
.form-status.success { color: var(--ok); }
.form-status.error { color: var(--alarm); }
.form-note { margin: 0; font-size: .9375rem; color: var(--text); }
.form-note a { color: var(--sun-ink); }
.checklist li::before, .hero-points li::before { background-color: var(--sun); }

/* ---------- 16. Footer - END CREDITS (stays dark, like the credits roll) ---------- */
.site-footer {
  position: relative;
  overflow: hidden;
  padding: 4rem 0 2rem;
  background: var(--footer-bg);
  color: var(--foot);
  font-size: .9375rem;
}
.credits-mark {
  margin: 0 0 3rem;
  font: 800 clamp(2.75rem, 10vw, 8.5rem)/1 var(--f-display);
  letter-spacing: -.045em;
  color: transparent;
  background: linear-gradient(90deg, var(--sun) 50%, #262B33 50%) 0 0 / 200% 100% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  user-select: none;
}
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 3rem; }
.footer-about { margin-top: 1rem; max-width: 26rem; color: var(--foot); }
.footer-title {
  margin-bottom: 1rem;
  font: 500 .75rem/1.4 var(--f-body);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--foot-dim);
}
.site-footer ul { list-style: none; display: grid; gap: .6rem; }
.site-footer a { color: #D9D2C5; text-decoration: none; transition: color .2s; }
.site-footer a:hover { color: var(--sun-hot); text-decoration: underline; }
.site-footer .brand-text { color: var(--foot-hi); }
.site-footer .brand-text span { color: var(--sun); }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--foot-line);
}
.footer-bottom p { margin: 0; }
.site-footer .motion-toggle {
  background: transparent;
  border-color: rgba(238, 231, 218, .3);
  color: var(--foot-hi);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.site-footer .motion-toggle:hover { border-color: var(--sun-hot); color: var(--sun-hot); }
.footer-end { height: 1px; margin-top: 2rem; background: linear-gradient(90deg, var(--sun), transparent 60%); }

/* ---------- Social links (footer + contact) ---------- */
/* A row of icons; .site-footer ul would otherwise stack them one per line */
.social, .site-footer .social { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.25rem; }
.social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(238, 231, 218, .25);
  border-radius: var(--r-sm);
  color: var(--foot-hi);
  transition: color .2s, border-color .2s, background-color .2s;
}
.social a:hover { color: var(--ink); background: var(--sun); border-color: var(--sun); text-decoration: none; }
.social svg { width: 20px; height: 20px; fill: currentColor; }
.social-label {
  margin: 2rem 0 0;
  font: 500 .75rem/1.4 var(--f-body);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.social-contact { margin-top: .75rem; }
.social-contact a { border-color: var(--line); background: var(--surface); color: var(--sun-ink); }

/* ---------- Content pages: blog, locations, services (generated by tools/build.py) ---------- */
.subpage main { min-height: 60vh; }
.page-hero {
  padding: calc(var(--header-h) + clamp(2.5rem, 6vw, 4.5rem)) 0 clamp(2rem, 5vw, 3.5rem);
  background:
    radial-gradient(50% 60% at 85% 0%, rgba(240, 129, 67, .16), transparent 70%),
    linear-gradient(#E4EEF5, var(--bg));
  border-bottom: 1px solid var(--line);
}
.page-hero h1 {
  font-weight: 700;
  font-size: clamp(2.1rem, 4.4vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: -.03em;
  text-wrap: balance;
  margin-bottom: 1rem;
}
.page-intro { max-width: 44rem; margin: 0; font-size: 1.125rem; color: var(--ink-2); }
.container.narrow { max-width: calc(820px + 48px); }

.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem .5rem; margin-bottom: 1.25rem; font: 500 .875rem/1.4 var(--f-body); color: var(--muted); }
.breadcrumbs li:not(:last-child)::after { content: "/"; margin-left: .5rem; color: var(--line-strong); }
.breadcrumbs a { color: var(--sun-ink); text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumbs [aria-current] { color: var(--muted); max-width: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.post-meta { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: 0; font: 500 .875rem/1.4 var(--f-body); color: var(--muted); }
.post-meta span:first-child { color: var(--sun-ink); }

.prose { padding: clamp(2rem, 5vw, 3.5rem) 0 1rem; color: var(--text); font-size: 1.075rem; }
.prose .lead { font-size: 1.25rem; line-height: 1.6; color: var(--ink-2); }
.prose h2 { font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.2; margin: 2.75rem 0 1rem; }
.prose h3 { font-size: 1.3rem; margin: 1.75rem 0 .5rem; }
.prose ul, .prose ol { margin: 0 0 1.25rem 1.25rem; display: grid; gap: .45rem; }
.prose li::marker { color: var(--sun-deep); }
.prose a { color: var(--sun-ink); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--ink); }
.prose strong { color: var(--ink); }
.prose blockquote { margin: 1.5rem 0; padding: 1rem 1.25rem; border-left: 3px solid var(--sun); background: var(--surface); color: var(--ink-2); }
.prose table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: .95rem; background: var(--surface); box-shadow: var(--shadow-sm); display: block; overflow-x: auto; }
.prose th, .prose td { padding: .7rem .9rem; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.prose th { background: var(--bg-alt); color: var(--ink); font-weight: 600; }
.prose .faq { margin-top: 1rem; display: grid; gap: .75rem; }
.prose .faq h3 { margin: 0; padding: 1rem 1.25rem .25rem; background: var(--surface); border: 1px solid var(--line); border-bottom: 0; border-radius: var(--r) var(--r) 0 0; font-size: 1.15rem; }
.prose .faq p { margin: -.75rem 0 0; padding: .5rem 1.25rem 1rem; background: var(--surface); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--r) var(--r); }

.cta-box {
  position: relative;
  margin: 2.5rem 0;
  padding: clamp(1.5rem, 4vw, 2.25rem);
  background: linear-gradient(135deg, #F7A877, #F08143 70%, #D95A24);
  border-radius: var(--r-lg);
  color: var(--ink);
}
.cta-box .eyebrow { color: var(--ink); opacity: .75; }
.cta-box h2 { color: var(--ink); font-size: clamp(1.8rem, 3.5vw, 2.4rem); margin-bottom: .6rem; }
.cta-box p { color: var(--ink); font-weight: 500; }
.cta-box a:not(.btn) { color: var(--ink); font-weight: 700; }
.cta-box .btn-primary { background: var(--ink); color: #8FD4DD; }
.cta-box .btn-primary:hover { background: #2A2F37; box-shadow: none; }

.portal-box {
  margin: 2.5rem 0 0;
  padding: clamp(1.25rem, 3.5vw, 1.75rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--teal-deep);
  border-radius: var(--r-lg);
}
.portal-box h2 { font-size: clamp(1.3rem, 2.5vw, 1.6rem); margin: 0 0 .35rem; }
.portal-box p { margin: 0; color: var(--text); max-width: 48ch; }
.portal-box .btn { flex-shrink: 0; }

.listing { padding-block: clamp(2.5rem, 6vw, 4rem); }
.post-group { margin-bottom: 3rem; }
.post-group h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 1.25rem; }
.post-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.25rem; }
.post-card a {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--sun);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: translate .3s var(--ease-out), box-shadow .3s, border-color .3s;
}
.post-card a:hover, .post-card a:focus-visible { translate: 0 -3px; box-shadow: var(--shadow); border-color: var(--lit-border); }
.post-cat { font: 500 .7rem/1.4 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--sun-ink); margin-bottom: .6rem; }
.post-card h3 { font-size: 1.3rem; color: var(--ink); }
.post-card p { color: var(--text); font-size: .95rem; margin: 0 0 1rem; flex: 1; }
.post-more { font-weight: 600; font-size: .875rem; color: var(--sun-ink); }
.related { padding-bottom: 3rem; }
.related h2 { font-size: 1.9rem; margin-bottom: 1.25rem; }

.footer-grid-4 { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
.footer-address { margin: .75rem 0 0; color: var(--foot); }
@media (max-width: 960px) { .footer-grid-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .footer-grid-4 { grid-template-columns: 1fr; } }

/* ---------- Page images, diagrams and share bar ---------- */
.featured { margin: clamp(1.5rem, 4vw, 2.5rem) 0 0; }
.featured img {
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 630;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  background: var(--bg-alt);
}
.post-thumb {
  display: block;
  width: calc(100% + 3rem);
  max-width: none;
  height: auto;
  aspect-ratio: 480 / 252;
  margin: -1.5rem -1.5rem 1.1rem;
  border-bottom: 1px solid var(--line);
  background: var(--bg-alt);
}
.post-card a { overflow: hidden; }

.diagram { margin: 2rem 0 2.25rem; }
.diagram img { display: block; height: auto; margin: 0 auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.diagram-map img { width: 100%; max-width: 512px; }
.diagram-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r); }
.diagram-process img { width: 100%; min-width: 680px; }
.diagram figcaption { margin-top: .6rem; text-align: center; font-size: .9rem; color: var(--muted); }

.share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1rem;
  margin: 2rem 0 0;
  padding: 1.1rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.share-label { margin: 0; font: 500 .75rem/1.4 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.share-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.share-btn {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--ink-2);
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}
.share-btn svg { width: 20px; height: 20px; fill: currentColor; }
.share-btn:hover { background: var(--sun); border-color: var(--sun); color: var(--ink); }
.share-status { flex-basis: 100%; min-height: 1.2em; margin: 0; font-size: .875rem; font-weight: 600; color: var(--ok); }
.share-status:empty { display: none; }

/* RSS subscribe block on the blog index */
.feed-follow { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 1.5rem; }
.feed-follow .rss-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
.feed-follow .rss-icon circle { fill: currentColor; stroke: none; }
.feed-note { flex-basis: 100%; margin: 0; font-size: .9375rem; color: var(--muted); }

/* ---------- 17. Simple pages (thank-you, 404) ---------- */
.simple-page {
  min-height: 100svh;
  padding: calc(var(--header-h) + 4rem) 0 4rem;
  display: grid;
  place-items: center;
  text-align: center;
  background:
    radial-gradient(40% 35% at 50% 18%, rgba(240, 129, 67, .16), transparent 70%),
    linear-gradient(#E4EEF5, var(--bg) 45%);
}
.simple-page .container { max-width: 40rem; display: flex; flex-direction: column; align-items: center; }
.simple-page h1 { font-weight: 700; font-size: clamp(2.4rem, 6vw, 3.75rem); line-height: 1.05; letter-spacing: -.035em; margin-bottom: 1rem; }
.simple-page p { max-width: 32rem; }
.simple-page .btn { margin-top: 1rem; }
.simple-page .icon { background: var(--surface); margin: 0 auto 1.5rem; box-shadow: var(--shadow-sm); }
.simple-slug {
  margin: 0 0 1.5rem;
  font: 500 .72rem/1.4 var(--f-body);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
/* A skylight */
.lone-lamp {
  position: relative;
  width: 120px;
  height: 4px;
  margin: 0 auto 2.75rem;
  background: var(--sun);
  box-shadow: 0 0 20px 4px rgba(240, 129, 67, .5);
}
.lone-lamp::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 50%;
  width: 260px;
  height: 180px;
  margin-left: -130px;
  clip-path: polygon(45% 0, 55% 0, 100% 100%, 0 100%);
  background: linear-gradient(rgba(240, 129, 67, .2), transparent);
  pointer-events: none;
}
.simple-page .container > :not(.lone-lamp) { position: relative; z-index: 1; }
.stencil-404 {
  margin-bottom: .5rem;
  font: 800 9rem/1 var(--f-display);
  letter-spacing: -.05em;
  color: #DCD4C5;
  user-select: none;
}
@media (prefers-reduced-motion: no-preference) {
  .page-404 .lone-lamp { animation: strike 900ms linear 200ms both; }
}

/* ---------- 18. Reveal on scroll (html.fx is set by site.js after its observer is attached) ---------- */
.reveal {
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 110ms);
}
.fx .reveal:not(.visible) { opacity: 0; transform: translateY(24px); }

/* ---------- 19. Responsive ---------- */
@media (max-width: 960px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .split, .about-grid, .contact-grid { grid-template-columns: 1fr; gap: 3rem; }
  .beam { top: 0; left: 0; width: 100%; height: 45%; }

  .steps { grid-template-columns: 1fr; gap: 2.5rem; padding-left: 2.25rem; }
  .rail { top: 0; bottom: 0; left: 5px; right: auto; width: 2px; height: auto; }
  .rail-fill { transform-origin: top; transform: scaleY(1); }
  .step { padding-top: 0; }
  .node { left: -2.25rem; top: .6rem; }
  .step-num { margin-bottom: .5rem; }
}

/* 1100px: the home page menu has seven items, which need about 1100px on one line */
@media (max-width: 1100px) {
  .nav-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    background: rgba(255, 255, 255, .7);
    border: 1px solid rgba(22, 25, 30, .2);
    border-radius: var(--r-sm);
    cursor: pointer;
  }
  .nav-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--ink);
    transition: transform .25s var(--ease-out), opacity .2s;
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .site-nav { display: none; }
  .site-nav.open {
    display: block;
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 40px -24px rgba(22, 25, 30, .35);
  }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: .5rem 24px 1.5rem; }
  .site-nav li { border-bottom: 1px solid var(--line); }
  .site-nav li:last-child { border-bottom: 0; }
  .site-nav.open li { animation: rise 300ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 40ms); }
  .site-nav a:not(.btn) {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 0;
    font: 600 1.5rem/1.2 var(--f-display);
    letter-spacing: -.02em;
    color: var(--ink);
  }
  .site-nav a:not(.btn)::after { display: none; }
  .site-nav .btn { width: 100%; margin-top: 1.25rem; }

  /* Until site.js has wired up the menu button (no JS, or the script failed to
     load) the button can't work: show just the CTA instead */
  html:not(.nav-ready) .nav-toggle { display: none; }
  html:not(.nav-ready) .site-nav { display: block; }
  html:not(.nav-ready) .site-nav ul { flex-direction: row; padding: 0; }
  html:not(.nav-ready) .site-nav li { border: 0; }
  html:not(.nav-ready) .site-nav li:not(:last-child) { display: none; }
  html:not(.nav-ready) .site-nav .btn { width: auto; margin: 0; }
}

@media (max-width: 760px) {
  :root { --header-h: 64px; }
  .brand-mark { width: 30px; height: 30px; }
  .brand-logo { height: 34px; }
  .brand-text { font-size: 1.2rem; }

  .hero {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-top: calc(var(--header-h) + 40svh);
    background: var(--bg);
  }
  .scene { inset: 0 0 auto 0; height: 64svh; overflow: hidden; }
  /* Centre the docks (62% across the drawing), but never leave a gap at the
     right edge: at least full width, right-aligned when it would fall short */
  .scene-svg {
    --w: max(100%, calc(64svh * 1.7778));
    inset: auto;
    bottom: 0;
    left: clamp(calc(100% - var(--w)), calc(50% - var(--w) * .62), 0px);
    height: 100%;
    width: var(--w);
  }
  /* Anchored to the scene height so the copy always sits on a light ground */
  .hero-scrim {
    background: linear-gradient(180deg, rgba(250, 248, 244, 0) calc(var(--header-h) + 28svh), rgba(250, 248, 244, .75) calc(var(--header-h) + 37svh), var(--bg) calc(var(--header-h) + 46svh));
  }
  .hero-copy { padding-block: 0 3rem; }
  .letterbox span { height: 6vh; }
  .hero-slug { top: calc(var(--header-h) + 64px); left: 20px; }
  .hero-controls { top: calc(var(--header-h) + 12px); right: 16px; bottom: auto; }
  .scroll-cue { display: none; }
  .intro-skip, .motion-toggle { min-height: 44px; }

  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
}

@media (max-width: 620px) {
  .container { padding-inline: 20px; }
  .card-grid, .feature-grid, .manifest { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .cta-band { min-height: auto; }
  .cta-inner { flex-direction: column; align-items: flex-start; }
  .hero-actions .btn { flex: 1 1 100%; }
  .card { padding: 2.25rem 1.5rem 1.75rem; }
  .values { padding: 1.75rem; }
  .stencil-404 { font-size: 7rem; }
}

/* ---------- 20. Motion preferences ---------- */
/* "Pause motion" stops every loop, flicker and entrance effect, not just the
   ambient ones (!important so it beats the more specific trigger selectors) */
html.motion-paused body::after,
html.motion-paused .scroll-cue i::after,
html.motion-paused .btn[disabled]::after,
html.motion-paused .scene-svg,
html.motion-paused .hl,
html.motion-paused .card-lamp,
html.motion-paused .values::before,
html.motion-paused .values li,
html.motion-paused .site-nav.open li { animation: none !important; }
html.motion-paused .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .motion-toggle, .intro-skip, .scroll-cue { display: none !important; }
}

/* ---------- 21. Print ---------- */
@media print {
  body { background: #fff; color: #000; }
  body::after,
  .scene, .atmos, .svg-cones, .hero-scrim, .letterbox, .hero-slug, .hero-controls, .scroll-cue,
  .section-bg, .beam, .cut, .roller, .dock-interior, .wall-stencil, .credits-mark, .footer-end,
  .card-lamp, .bay-label, .slug, .cta-slug, .nav-toggle, .skip-link, .lone-lamp, .simple-slug, .stencil-404 { display: none !important; }
  .site-header { position: static; background: none; height: auto; }
  .hero { min-height: 0; padding: 1rem 0; background: none; display: block; }
  .section, .section-alt, .cta-band, .site-footer, .simple-page { background: none !important; padding: 1.5rem 0; min-height: 0; }
  h1, h2, h3, p, li, a, label, strong, .brand-text, .manifest .name, .eyebrow, .step-num { color: #000 !important; text-shadow: none !important; }
  .hl { background: none !important; }
  .card, .feature, .values, .contact-form, .manifest li, .info-item { background: none !important; border: 1px solid #999 !important; box-shadow: none !important; filter: none !important; break-inside: avoid; }
  .reveal, .manifest li { opacity: 1 !important; visibility: visible !important; transform: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; }
}