/* =========================================================================
   SR VENTURES — Builders & Interiors
   Premium futuristic scroll-driven site. Electric blue on near-black / off-white.
   ========================================================================= */

/* ---- Fonts: contrast pair (editorial serif display + geometric sans body) ---- */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400&family=Sora:wght@300;400;500;600;700&display=swap');

:root {
  /* Locked brand palette */
  --accent:        #1E60FF;
  --accent-dim:    rgba(30, 96, 255, 0.12);
  --accent-glow:   rgba(30, 96, 255, 0.45);
  --bg-dark:       #070707;
  --bg-light:      #FAF8F5;

  /* Derived ink + surfaces */
  --ink-on-dark:   #FAF8F5;
  --ink-on-dark-2: #b9b7b3;      /* muted on dark, still ≥4.5:1 on #070707 */
  --ink-on-light:  #111111;
  --ink-on-light-2:#565553;      /* muted on light, ≥4.5:1 on #FAF8F5 */
  --hairline-dark: rgba(250, 248, 245, 0.14);
  --hairline-light:rgba(17, 17, 17, 0.12);
  --surface-dark:  #0e0e0e;
  --surface-light: #ffffff;

  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Sora', system-ui, sans-serif;

  /* Scale */
  --maxw: 1240px;
  --pad:  clamp(1.25rem, 5vw, 5rem);

  /* z-index scale (semantic, no magic 9999) */
  --z-canvas: 1;
  --z-overlay: 2;
  --z-marquee: 3;
  --z-content: 4;
  --z-hero: 6;
  --z-header: 40;
  --z-loader: 100;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  background: var(--bg-dark);
  color: var(--ink-on-dark);
  line-height: 1.5;
  letter-spacing: 0.01em;
  overflow-x: hidden;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--accent); color: #fff; }

/* Visually hidden but still read by search engines and screen readers. Uses the
   clip technique deliberately — `display:none` or `visibility:hidden` would hide
   the text from assistive tech too, and Google discounts it. This carries the
   real H1 wording behind the animated brand wordmark. */
.vh {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* Fraunces ships with its "WONK" alternates on by default — that's the quirky,
   broken-looking f / g at large display sizes. Pin a clean typographic feature
   set on every heading so glyphs stay conventional and consistent across the site. */
h1, h2, h3, h4,
.section-heading, .closing h2, .contact-info h2, .intro-title,
.brand-name, .loader-brand, .u-stage h3, .pf-page-header h1, .pf-cta-band h2,
.testi blockquote, .form-success h3 {
  font-optical-sizing: auto;
  font-variant-ligatures: common-ligatures;
  font-feature-settings: "dlig" 0, "swsh" 0, "salt" 0, "calt" 0, "liga" 1;
}

/* ---------- Loader ---------- */
#loader {
  position: fixed; inset: 0; z-index: var(--z-loader);
  background: var(--bg-dark); color: var(--ink-on-dark);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.6rem; transition: opacity 0.6s var(--ease-out);
}
#loader.hidden { opacity: 0; pointer-events: none; }
.loader-brand {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 2rem); letter-spacing: 0.02em;
  font-weight: 500;
}
.loader-brand b { color: var(--accent); font-weight: 600; }
#loader-bar-wrap { width: min(260px, 60vw); height: 2px; background: var(--hairline-dark); overflow: hidden; }
#loader-bar { height: 100%; width: 0%; background: var(--accent); box-shadow: 0 0 12px var(--accent-glow); }
#loader-percent { font-size: 0.72rem; letter-spacing: 0.25em; color: var(--ink-on-dark-2); }

/* ---------- Header — floating glass pill ---------- */
.site-header {
  position: fixed; top: clamp(0.7rem, 1.8vh, 1.2rem); left: 50%; transform: translateX(-50%);
  z-index: var(--z-header);
  width: min(calc(100% - 2 * clamp(0.9rem, 3vw, 2rem)), 1320px);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 0.5rem 0.55rem 0.5rem 1rem;
  border-radius: 999px;
  color: var(--ink-on-dark);
  background: rgba(10, 10, 10, 0.32);
  border: 1px solid rgba(250, 248, 245, 0.08);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  transition: background 0.4s var(--ease-out), border-color 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out),
              opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
/* Nav stays out of the intro + video film; it drops in only once the hero copy arrives */
.site-header.nav-hidden {
  opacity: 0; pointer-events: none;
  transform: translateX(-50%) translateY(-140%);
}
.site-header.scrolled {
  background: rgba(7, 7, 7, 0.8);
  border-color: var(--hairline-dark);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.5);
}
.brand-lockup { display: flex; align-items: center; gap: 0.7rem; }
.brand-badge {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px;
  background: #fff; display: grid; place-items: center; overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(250, 248, 245, 0.1);
}
.brand-badge img { width: 38px; height: auto; display: block; }
.brand-name { font-family: var(--font-display); font-size: 1.05rem; font-weight: 500; letter-spacing: 0.01em; }
.brand-name span { display: block; font-family: var(--font-body); font-size: 0.58rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink-on-dark-2); }
.nav-links { display: flex; align-items: center; gap: clamp(1rem, 1.6vw, 1.6rem); }
.nav-links a { font-size: 0.84rem; letter-spacing: 0.02em; color: var(--ink-on-dark-2); transition: color 0.25s; }
.nav-links a:not(.nav-cta) { position: relative; padding: 0.35rem 0.1rem; }
.nav-links a:not(.nav-cta)::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s var(--ease-out);
}
.nav-links a:hover { color: var(--ink-on-dark); }
.nav-links a:not(.nav-cta):hover::after { transform: scaleX(1); }
.nav-cta {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.84rem; font-weight: 500;
  padding: 0.7rem 1.35rem; border-radius: 999px;
  background: var(--accent); color: #fff !important;
  box-shadow: 0 6px 20px var(--accent-glow);
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.nav-cta .arrow { transition: transform 0.25s var(--ease-out); }
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 28px var(--accent-glow); }
.nav-cta:hover .arrow { transform: translateX(3px); }
.nav-toggle { display: none; background: none; border: 0; color: inherit; cursor: pointer; padding: 6px 10px; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: currentColor; margin: 5px 0; transition: 0.3s; }

/* ---------- Hero ---------- */
.hero-standalone {
  position: relative; z-index: var(--z-hero);
  min-height: 100svh; width: 100%;
  display: flex; flex-direction: column; justify-content: center;
  padding: 8rem var(--pad) 4rem;
  background: var(--bg-dark);
  overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  opacity: 0.28;
}
/* Melt the photo into the near-black on BOTH ends so there is no visible seam
   where the cover-cropped image meets the flat background — the mobile portrait
   crop otherwise left a hard light band across the middle. Vertical fade top +
   bottom, plus a radial vignette so the edges never show a hard photo boundary. */
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 50% 42%, transparent 0%, rgba(7,7,7,0.35) 60%, var(--bg-dark) 100%),
    linear-gradient(180deg, var(--bg-dark) 0%, rgba(7,7,7,0.55) 22%, rgba(7,7,7,0.6) 55%, rgba(7,7,7,0.9) 82%, var(--bg-dark) 100%);
}
.hero-grid-glow {
  position: absolute; z-index: 0; inset: auto -20% -40% -20%; height: 70%;
  background: radial-gradient(60% 60% at 50% 100%, var(--accent-dim), transparent 70%);
  pointer-events: none;
}
.hero-inner { position: relative; z-index: 2; max-width: var(--maxw); margin: 0 auto; width: 100%; }
.section-label {
  font-size: 0.7rem; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--accent); font-weight: 500; margin-bottom: 1.6rem;
  display: inline-flex; align-items: center; gap: 0.6rem;
  flex-wrap: wrap; justify-content: center;
}
.section-label::before { content: ""; width: 26px; height: 1px; background: var(--accent); display: inline-block; flex: 0 0 auto; }
.hero-heading {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2.9rem, 8.5vw, 6rem); line-height: 0.98;
  letter-spacing: -0.03em; max-width: 15ch; text-wrap: balance;
}
.hero-heading .word { display: inline-block; overflow: hidden; }
.hero-heading em { font-style: italic; color: var(--accent); }
.hero-tagline {
  margin-top: 1.8rem; max-width: 46ch;
  font-size: clamp(1rem, 1.4vw, 1.18rem); color: var(--ink-on-dark-2); line-height: 1.6;
}
.hero-actions { margin-top: 2.6rem; display: flex; gap: 1rem; flex-wrap: wrap; }

/* ---- Intro monument title card ---- */
.intro-inner { text-align: center; display: flex; flex-direction: column; align-items: center; padding-bottom: 5.5rem; }
/* Intro logo — the white-background monogram sits on a soft light plate so it reads
   as an intentional badge on the dark hero, with an accent glow behind it. */
.intro-logo {
  position: relative;
  width: clamp(120px, 16vw, 180px);
  aspect-ratio: 1 / 1;
  margin-bottom: clamp(1.2rem, 2.6vh, 1.9rem);
  border-radius: 22px;
  background: #ffffff;
  padding: 0;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.12),
    0 26px 60px -18px var(--accent-glow),
    0 18px 44px -22px rgba(0, 0, 0, 0.7);
  will-change: transform, opacity;
}
.intro-logo::after {
  content: ''; position: absolute; inset: -34%;
  background: radial-gradient(circle, var(--accent-glow) 0%, transparent 62%);
  z-index: -1; opacity: 0.9; pointer-events: none;
}
.intro-logo img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
/* The brand accent (#1E60FF) is a dark, saturated blue — over the intro's photo
   backdrop it loses contrast wherever the image goes busy or light, so the line
   kept disappearing. Lift it to a brighter tint, add weight, and lay down a soft
   dark shadow so it stays legible over ANY part of the photo. Scoped to the
   intro only; the global --accent still drives buttons, nav and the loader. */
.intro-label {
  margin-bottom: clamp(1rem, 2.4vh, 1.8rem);
  color: #7FA9FF; font-weight: 600;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.65);
}
.intro-label::before { background: #7FA9FF; opacity: 0.9; }
.intro-title {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2.4rem, 8.5vw, 7rem);
  line-height: 0.95; letter-spacing: 0.005em; white-space: nowrap;
}
.intro-title > span { display: inline-block; overflow: hidden; padding-bottom: 0.06em; }
.intro-title .ch { display: inline-block; }
.intro-tagline {
  margin-top: clamp(1.2rem, 3vh, 2rem);
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(1.15rem, 2.3vw, 1.75rem); color: var(--ink-on-dark); letter-spacing: -0.01em;
}
.intro-meta {
  margin-top: 1rem; font-size: clamp(0.68rem, 1vw, 0.82rem);
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-on-dark-2);
}
.intro-meta span { color: var(--accent); margin: 0 0.4rem; }
.btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-body); font-size: 0.9rem; font-weight: 500;
  padding: 0.95rem 1.7rem; border-radius: 999px; cursor: pointer; border: 0;
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out), background 0.2s;
}
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 8px 26px var(--accent-glow); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 34px var(--accent-glow); }
.btn-ghost { background: transparent; color: var(--ink-on-dark); border: 1px solid var(--hairline-dark); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn .arrow { transition: transform 0.25s var(--ease-out); }
.btn:hover .arrow { transform: translateX(4px); }

.scroll-indicator {
  position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
  z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
  color: var(--ink-on-dark-2); font-size: 0.62rem; letter-spacing: 0.24em; text-transform: uppercase;
}
.scroll-indicator .line { width: 1px; height: 42px; background: linear-gradient(var(--accent), transparent); animation: scrollpulse 2s var(--ease-out) infinite; }
@keyframes scrollpulse { 0%,100%{ opacity:0.3; transform: scaleY(0.6);} 50%{ opacity:1; transform: scaleY(1);} }

/* ---------- Canvas (scroll-scrub video) ---------- */
.canvas-wrap {
  position: fixed; inset: 0; z-index: var(--z-canvas);
  clip-path: circle(0% at 50% 50%);
  will-change: clip-path;
}
#canvas { width: 100%; height: 100%; display: block; }
#dark-overlay {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  background: var(--bg-dark); opacity: 0; pointer-events: none;
}

/* ---------- Scroll container — pure video scrub zone ---------- */
/* taller zone = the film scrubs over more scroll distance → slower, cinematic */
#scroll-container { position: relative; width: 100%; height: 680vh; }

.section-heading {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2.1rem, 4.2vw, 3.6rem); line-height: 1.02;
  letter-spacing: -0.025em; text-wrap: balance; margin-bottom: 1.1rem;
}
.section-heading em { font-style: italic; color: var(--accent); }
.section-body { font-size: clamp(0.98rem, 1.2vw, 1.1rem); color: var(--ink-on-dark-2); max-width: 44ch; line-height: 1.65; }
.section-body + .section-body { margin-top: 1rem; }
.section-content .btn { margin-top: 2rem; }
.section-actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.section-actions .btn { margin-top: 2rem; }

/* ---------- Home hero — light zone after the film ---------- */
#home-hero { position: relative; }
.hero2 {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2.5rem, 6vw, 5.5rem); align-items: center;
}
.hero2-copy .section-heading { font-size: clamp(2.3rem, 4.6vw, 4rem); }
.hero2-copy .section-body { max-width: 50ch; }
.hero2-fig { position: relative; margin: 0; border-radius: 18px; overflow: hidden; }
.hero2-fig::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(17, 17, 17, 0.08);
  border-radius: 18px;
}
.hero2-fig img { width: 100%; height: 100%; min-height: 380px; object-fit: cover; display: block; }
.hero2-tag {
  position: absolute; left: 1rem; bottom: 1rem;
  display: flex; flex-direction: column; gap: 0.15rem;
  padding: 0.8rem 1.1rem; border-radius: 12px;
  background: rgba(7, 7, 7, 0.72); color: var(--ink-on-dark);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.hero2-tag b { font-family: var(--font-display); font-weight: 500; font-size: 1rem; }
.hero2-tag span { font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); }
.zone-light .btn-ghost { color: var(--ink-on-light); border-color: var(--hairline-light); }
.zone-light .btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- Stats / trust — deep black with site imagery in the wings ---------- */
.trust { background: #040404; color: var(--ink-on-dark); overflow: hidden; }
.trust-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
/* Wing images are white-outline line-art on transparent (edge maps of the crane
   + house). On the black trust section only the thin white linework shows —
   kept faint so it reads as a background sketch, not foreground art. */
.trust-bg .tb { position: absolute; top: 50%; transform: translateY(-50%); opacity: 0.16; }
.trust-bg .tb-left {
  left: -2%; height: 118%; width: auto; max-width: 44vw;
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,1), transparent 94%);
  mask-image: linear-gradient(90deg, rgba(0,0,0,1), transparent 94%);
}
.trust-bg .tb-right {
  right: -4%; height: 92%; width: auto; opacity: 0.14;
  -webkit-mask-image: linear-gradient(270deg, rgba(0,0,0,1), transparent 90%);
  mask-image: linear-gradient(270deg, rgba(0,0,0,1), transparent 90%);
}
.trust .block { position: relative; z-index: 1; }
.stats-wrap {
  display: grid; grid-template-columns: 1.15fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem); max-width: var(--maxw); margin: 0 auto;
  align-items: center;
}
.stats-lead .section-heading { text-align: left; }
.stats-lead .section-body { max-width: 48ch; }
.stat-feature { margin-top: clamp(1.4rem, 3.5vh, 2.4rem); display: flex; align-items: baseline; gap: 0.15rem; flex-wrap: wrap; }
.stat-feature .stat-number { font-size: clamp(3.2rem, 6.5vw, 5.6rem); color: var(--accent); }
.stat-feature .stat-suffix { font-size: clamp(1.9rem, 3.4vw, 3rem); }
.stat-feature .stat-label { width: 100%; margin-top: 0.5rem; }
.stats-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.4rem, 3.4vh, 2.4rem) clamp(1.4rem, 2.6vw, 2.4rem);
}
.stat { text-align: left; border-top: 1px solid var(--hairline-dark); padding-top: 1.1rem; }
.stat.stat-feature { border-top: 0; padding-top: 0; }
.stat-number {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2.4rem, 4.4vw, 3.8rem); line-height: 1; letter-spacing: -0.03em;
  color: var(--ink-on-dark); display: inline-block;
}
.stat-suffix { color: var(--accent); font-family: var(--font-display); font-size: clamp(1.4rem, 2.4vw, 2.2rem); }
.stat-word {
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: clamp(1.8rem, 3vw, 2.7rem); line-height: 1.1; letter-spacing: -0.02em;
  color: var(--ink-on-dark); display: inline-block;
}
.stat-label { margin-top: 0.7rem; font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-on-dark-2); }

/* =========================================================================
   FLOWING (non-scrub) SECTIONS — normal document flow, light/dark zones
   ========================================================================= */
.flow { position: relative; z-index: var(--z-content); }
.zone-dark  { background: var(--bg-dark);  color: var(--ink-on-dark); }
.zone-light { background: var(--bg-light); color: var(--ink-on-light); }
.zone-light .section-label { color: var(--accent); }
.zone-light .section-body,
.zone-light .muted { color: var(--ink-on-light-2); }
.block { max-width: var(--maxw); margin: 0 auto; padding: clamp(5rem, 12vh, 9rem) var(--pad); }
.block-head { max-width: 720px; margin-bottom: clamp(2.5rem, 6vh, 4rem); }
.block-head.center { margin-left: auto; margin-right: auto; text-align: center; }

/* ---------- The Umbrella Concept — the umbrella, built live ---------- */
#umbrella { overflow: clip; padding: 0 0 clamp(3rem, 7vh, 5.5rem); }
.umbrella-head { max-width: 720px; margin: 0 auto; padding: clamp(4.6rem, 9vh, 6.2rem) var(--pad) 0; }
.umbrella-head .section-body { font-size: 0.98rem; max-width: 58ch; }

.umb { position: relative; height: 100svh; display: flex; flex-direction: column; }
.umb-inner {
  position: relative; flex: 1; min-height: 0; width: 100%; max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: 1.4fr 0.85fr; align-items: center;
  gap: clamp(1.4rem, 3.4vw, 3.4rem);
  padding: clamp(0.8rem, 2vh, 1.6rem) var(--pad) clamp(1rem, 3vh, 2rem);
}
.umb-fig { position: relative; margin: 0; display: flex; flex-direction: column; align-items: center; }
/* max-height 64svh (not 70) — at 70 the handle hook clipped past the viewport
   bottom while the section was pinned */
.umb-fig svg { width: 100%; max-width: 730px; height: auto; max-height: 64svh; display: block; overflow: visible; }
.u-pole { stroke: var(--accent); stroke-width: 8; stroke-linecap: round; fill: none; filter: drop-shadow(0 0 10px var(--accent-glow)); }
.u-blueprint path { stroke: rgba(250, 248, 245, 0.13); stroke-width: 1.5; stroke-dasharray: 5 7; fill: none; }
.u-panel {
  /* each rib carries its own colour (uRib0..6, set inline); this is a fallback */
  stroke: #F3F7FF; stroke-width: 3; stroke-opacity: 0.95; stroke-linejoin: round;
  fill: url(#uRib0); transition: filter 0.4s;
}
/* the active stage's rib pops brighter, without losing its hue */
.u-panel.live { filter: brightness(1.25) drop-shadow(0 0 18px rgba(255,255,255,0.35)); }
#u-rain line { stroke: var(--accent); stroke-width: 2; stroke-linecap: round; }

.umb-readout { position: relative; }
.umb-count { font-family: var(--font-display); display: flex; align-items: baseline; gap: 0.45rem; margin-bottom: 1.4rem; opacity: 0; transition: opacity 0.5s ease; }
.umb-count.is-live { opacity: 1; }
.umb-count #u-num { color: var(--accent); font-size: clamp(2.4rem, 3.4vw, 3.4rem); font-weight: 500; line-height: 1; }
.umb-count .of { font-size: 0.9rem; color: var(--ink-on-dark-2); letter-spacing: 0.14em; }
.u-stages { position: relative; min-height: clamp(240px, 32vh, 320px); }
/* The OUTGOING stage fades out faster than the incoming one fades in (0.18s vs
   0.45s). While a scrubbed reverse-flick swaps stages, both are briefly painted
   on top of each other in the same absolute box — with two blocks of body copy
   that reads as garbled overlapping text. Clearing the old one quickly means the
   incoming stage is effectively alone on screen for its whole reveal. */
.u-stage {
  position: absolute; inset: 0; opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(26px);
  transition: opacity 0.18s ease, transform 0.5s cubic-bezier(0.22,1,0.36,1), visibility 0s linear 0.18s;
}
.u-stage.is-on {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateY(0);
  transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.22,1,0.36,1), visibility 0s;
}
.u-k { font-family: var(--font-display); font-size: 0.85rem; color: var(--accent); letter-spacing: 0.1em; text-transform: uppercase; }
.u-stage h3 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.7rem, 2.4vw, 2.3rem); letter-spacing: -0.02em; margin: 0.6rem 0 0.8rem; }
.u-stage p { color: var(--ink-on-dark-2); font-size: 1rem; line-height: 1.65; max-width: 44ch; }
.u-ticks { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.55rem; margin-top: 1.4rem; }
.u-ticks i { width: 26px; height: 3px; border-radius: 2px; background: var(--hairline-dark); transition: background 0.3s, box-shadow 0.3s; }
.u-ticks i.on { background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); }

/* ---------- Portfolio ---------- */
.portfolio-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.6rem, 1.4vw, 1.1rem); max-width: var(--maxw); margin: 0 auto;
  /* clip the mobile slide-in reveal so an off-x card can't widen the page */
  overflow-x: clip;
}
.pf-item {
  position: relative; overflow: hidden; border-radius: 12px;
  aspect-ratio: 4 / 3; background: #111; cursor: pointer;
}
/* Home cards link through to the matching portfolio category. The <a> fills the
   whole figure so the entire photo is the click target, not just the caption. */
.pf-item-link { display: block; width: 100%; height: 100%; color: inherit; text-decoration: none; }
.pf-item-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.pf-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease-out); }
.pf-item:hover img { transform: scale(1.06); }
.pf-item figcaption {
  position: absolute; left: 0; bottom: 0; width: 100%;
  padding: 2.2rem 1.2rem 1rem;
  background: linear-gradient(transparent, rgba(7,7,7,0.55) 45%, rgba(7,7,7,0.9));
  display: flex; justify-content: space-between; align-items: flex-end; gap: 0.6rem;
  opacity: 1; transform: translateY(0); transition: 0.4s var(--ease-out);
}
.pf-item:hover figcaption { background: linear-gradient(transparent, rgba(7,7,7,0.65) 40%, rgba(7,7,7,0.94)); }
.pf-item figcaption .t { font-family: var(--font-display); font-size: 1.05rem; color: #fff; }
.pf-item figcaption .c { font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.portfolio-cta { text-align: center; margin-top: clamp(2.5rem, 6vh, 3.5rem); }

/* ---------- Testimonials — auto-scrolling carousel ---------- */
.testi-carousel { position: relative; max-width: var(--maxw); margin: 0 auto; overflow: hidden; }
.testi-track {
  display: flex; gap: 1.2rem;
  padding: 0.4rem 0.2rem 1rem; will-change: transform;
  scrollbar-width: none; -ms-overflow-style: none; outline: none;
}
.testi-track::-webkit-scrollbar { display: none; }
.testi-track:focus-visible { box-shadow: 0 0 0 2px var(--accent-glow); border-radius: 16px; }
.testi-nav { display: flex; align-items: center; justify-content: center; gap: 1.4rem; margin-top: 1.4rem; }
.t-arrow {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--hairline-dark); background: transparent; color: var(--ink-on-dark);
  font-size: 1.05rem; cursor: pointer; display: grid; place-items: center;
  transition: border-color 0.25s var(--ease-out), color 0.25s, transform 0.25s var(--ease-out), box-shadow 0.25s;
}
.t-arrow:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); box-shadow: 0 8px 20px var(--accent-dim); }
.testi-dots { display: flex; gap: 0.5rem; }
.testi-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--hairline-dark); transition: background 0.3s, transform 0.3s, box-shadow 0.3s; }
.testi-dots i.on { background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); transform: scale(1.35); }
.testi-hint { text-align: center; margin-top: 0.9rem; font-size: 0.64rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-on-dark-2); opacity: 0.75; }
.testi {
  /* exact per-view fit so no card sits half-cut at the carousel edge */
  flex: 0 0 calc((100% - 1.2rem) / 2); scroll-snap-align: start;
  padding: 2rem; border-radius: 14px; background: var(--surface-dark);
  border: 1px solid var(--hairline-dark);
  transition: border-color 0.3s, transform 0.3s var(--ease-out);
}
@media (min-width: 1100px) { .testi { flex-basis: calc((100% - 2.4rem) / 3); } }
@media (max-width: 640px) { .testi { flex-basis: 84vw; } }
.testi:hover { border-color: rgba(30, 96, 255, 0.4); transform: translateY(-3px); }
.zone-light .testi { background: var(--surface-light); border-color: var(--hairline-light); box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.testi .stars { color: var(--accent); letter-spacing: 0.2em; font-size: 0.9rem; margin-bottom: 1rem; }
.testi blockquote { font-family: var(--font-display); font-size: 1.12rem; line-height: 1.5; letter-spacing: -0.01em; }
.zone-light .testi blockquote { color: var(--ink-on-light); }
.testi .who { margin-top: 1.4rem; display: flex; align-items: center; gap: 0.8rem; }
.testi .who .av { width: 40px; height: 40px; border-radius: 50%; background: var(--accent-dim); color: var(--accent); display: grid; place-items: center; font-family: var(--font-display); font-weight: 600; }
.testi .who b { font-size: 0.92rem; font-weight: 600; display: block; }
.testi .who span { font-size: 0.74rem; color: var(--ink-on-light-2); }
.zone-dark .testi .who span { color: var(--ink-on-dark-2); }

/* ---------- FAQ ---------- */
.faq-list { max-width: 820px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--hairline-light); }
.faq-q {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.5rem 0; font-family: var(--font-display); font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  color: var(--ink-on-light); letter-spacing: -0.01em;
}
.faq-q .ico { flex: 0 0 auto; width: 22px; height: 22px; position: relative; transition: transform 0.3s var(--ease-out); }
.faq-q .ico::before, .faq-q .ico::after { content: ""; position: absolute; background: var(--accent); }
.faq-q .ico::before { top: 50%; left: 0; width: 100%; height: 2px; transform: translateY(-50%); }
.faq-q .ico::after { left: 50%; top: 0; width: 2px; height: 100%; transform: translateX(-50%); transition: opacity 0.3s; }
.faq-item.open .faq-q .ico::after { opacity: 0; }
.faq-a { overflow: hidden; height: 0; }
.faq-a p { padding: 0 0 1.6rem; color: var(--ink-on-light-2); max-width: 66ch; line-height: 1.65; }

/* ---------- Contact ---------- */
.contact-wrap { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem, 6vw, 5rem); max-width: var(--maxw); margin: 0 auto; align-items: start; }
.contact-info h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(2rem, 4vw, 3.2rem); letter-spacing: -0.025em; line-height: 1.05; margin-bottom: 1.2rem; }
.contact-info .lead { color: var(--ink-on-light-2); max-width: 40ch; margin-bottom: 2rem; }
.contact-meta { display: flex; flex-direction: column; gap: 1.2rem; }
.contact-meta a, .contact-meta div { display: flex; gap: 0.8rem; align-items: flex-start; font-size: 0.95rem; }
.contact-meta .k { color: var(--accent); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; width: 84px; flex: 0 0 auto; padding-top: 3px; }
.form { background: var(--surface-light); border: 1px solid var(--hairline-light); border-radius: 16px; padding: clamp(1.5rem, 3vw, 2.4rem); }
.zone-dark .form { background: var(--surface-dark); border-color: var(--hairline-dark); }
.field { margin-bottom: 1.1rem; }
.field label { display: block; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-on-light-2); margin-bottom: 0.5rem; }
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--font-body); font-size: 0.95rem;
  padding: 0.85rem 1rem; border-radius: 10px;
  border: 1px solid var(--hairline-light); background: var(--bg-light); color: var(--ink-on-light);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
.field input:invalid:not(:placeholder-shown) { border-color: #d33; }
.field .err { display: none; color: #d33; font-size: 0.74rem; margin-top: 0.4rem; letter-spacing: 0.02em; text-transform: none; }
.field.show-err .err { display: block; }
.form .btn-primary { width: 100%; justify-content: center; margin-top: 0.4rem; }
.form-success { display: none; text-align: center; padding: 2rem 1rem; }
.form-success.show { display: block; }
.form-success .tick { width: 60px; height: 60px; border-radius: 50%; background: var(--accent-dim); color: var(--accent); display: grid; place-items: center; margin: 0 auto 1.2rem; font-size: 1.8rem; }
.form-success h3 { font-family: var(--font-display); font-size: 1.6rem; margin-bottom: 0.6rem; }
.form-success p { color: var(--ink-on-light-2); }
.form.submitted .form-body { display: none; }

/* ---------- Closing CTA — monument finale ---------- */
.closing {
  position: relative; min-height: 92svh; display: flex; align-items: center; justify-content: center;
  padding: clamp(5rem, 12vh, 8rem) var(--pad); overflow: hidden;
  background: var(--bg-dark); z-index: var(--z-content);
  border-top: 1px solid var(--hairline-dark);
}
.closing-bg {
  position: absolute; inset: 0; background-size: cover; background-position: center 42%; z-index: 0;
  filter: grayscale(20%) brightness(0.5);
}
.closing-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 45%, rgba(7,7,7,0.55) 0%, rgba(7,7,7,0.9) 68%, var(--bg-dark) 100%); }
.closing-glow {
  position: absolute; z-index: 1; left: 50%; bottom: -30%; transform: translateX(-50%);
  width: 80vw; height: 60vh; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, var(--accent-dim), transparent 70%);
}
.closing-inner {
  position: relative; z-index: 2; max-width: 880px; margin: 0 auto; width: 100%;
  text-align: center; display: flex; flex-direction: column; align-items: center;
}
.closing h2 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2.6rem, 6.5vw, 5.4rem); line-height: 1.0; letter-spacing: -0.03em;
  max-width: 18ch; text-wrap: balance;
}
.closing h2 em { font-style: italic; color: var(--accent); }
.closing p { margin: 1.6rem 0 2.4rem; max-width: 52ch; color: var(--ink-on-dark-2); font-size: 1.08rem; line-height: 1.7; }
.closing-actions { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }
.closing-meta {
  margin-top: clamp(2.8rem, 7vh, 4.5rem);
  display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; justify-content: center;
  font-size: 0.66rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink-on-dark-2);
}
.closing-meta i { width: 30px; height: 1px; background: var(--accent); opacity: 0.6; }

/* ---------- Footer ---------- */
.site-footer {
  position: relative; z-index: var(--z-content); /* must paint above the fixed canvas */
  background: #050505; color: var(--ink-on-dark-2);
  padding: clamp(3.5rem, 8vh, 5rem) var(--pad) 2rem; border-top: 1px solid var(--hairline-dark);
}
.footer-grid { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 2.5rem; }
.footer-grid h4 { color: var(--ink-on-dark); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 1.2rem; font-weight: 600; }
.footer-grid ul { list-style: none; display: flex; flex-direction: column; gap: 0.7rem; }
.footer-grid a:hover { color: var(--accent); }
.footer-brand p { max-width: 32ch; margin-top: 1rem; font-size: 0.9rem; line-height: 1.6; }
/* social row */
.footer-social { display: flex; gap: 0.7rem; margin-top: 1.5rem; }
.footer-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  color: var(--ink-on-dark-2);
  border: 1px solid var(--hairline-dark); background: rgba(255,255,255,0.02);
  transition: color 0.25s var(--ease-out), border-color 0.25s var(--ease-out), background 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
.footer-social a:hover {
  color: #fff; border-color: var(--accent);
  background: var(--accent); transform: translateY(-2px);
  box-shadow: 0 8px 22px var(--accent-glow);
}
/* contact column: operational hours block */
.footer-contact .hours { display: flex; flex-direction: column; gap: 0.25rem; margin-top: 0.35rem; font-size: 0.84rem; color: var(--ink-on-dark-2); }
.footer-contact .hours span:first-child { color: var(--ink-on-dark); }
.footer-bottom { max-width: var(--maxw); margin: 3rem auto 0; padding-top: 1.6rem; border-top: 1px solid var(--hairline-dark); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: 0.78rem; }
.footer-credit a { color: var(--accent); transition: opacity 0.25s; }
.footer-credit a:hover { opacity: 0.75; }

/* ---------- Reveal helper (JS-driven, default visible) ---------- */
.reveal { opacity: 1; }

/* =========================================================================
   PORTFOLIO PAGE
   ========================================================================= */
body.portfolio-page { background: var(--bg-light); color: var(--ink-on-light); }
.pf-page-header {
  position: relative; padding: clamp(8rem, 16vh, 11rem) var(--pad) clamp(3rem, 6vh, 4.5rem);
  background: var(--bg-dark); color: var(--ink-on-dark); overflow: hidden;
}
.pf-page-header .hero-grid-glow { inset: -30% -20% auto -20%; height: 90%; }
.pf-page-header .inner { position: relative; z-index: 2; max-width: var(--maxw); margin: 0 auto; }
.breadcrumb { font-size: 0.76rem; letter-spacing: 0.06em; color: var(--ink-on-dark-2); margin-bottom: 1.4rem; }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb span[aria-current] { color: var(--ink-on-dark); }
.pf-page-header h1 { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.6rem, 6vw, 4.6rem); letter-spacing: -0.03em; line-height: 1.0; text-wrap: balance; }
.pf-page-header h1 em { font-style: italic; color: var(--accent); }
.pf-page-header p { margin-top: 1.2rem; max-width: 52ch; color: var(--ink-on-dark-2); font-size: 1.05rem; }

.filter-bar {
  position: sticky; top: 0; z-index: 20;
  display: flex; gap: 0.6rem; flex-wrap: wrap; justify-content: center;
  padding: 1.1rem var(--pad);
  background: rgba(250, 248, 245, 0.86); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hairline-light);
}
.filter-btn {
  font-family: var(--font-body); font-size: 0.82rem; font-weight: 500;
  padding: 0.55rem 1.15rem; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--ink-on-light-2);
  border: 1px solid var(--hairline-light); transition: 0.25s var(--ease-out);
  text-transform: capitalize;
}
.filter-btn:hover { color: var(--ink-on-light); border-color: var(--ink-on-light); }
.filter-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 6px 18px var(--accent-glow); }

.pf-gallery {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.7rem, 1.4vw, 1.1rem);
  max-width: none; margin: 0; padding: clamp(2.5rem, 6vh, 4rem) max(var(--pad), calc((100vw - var(--maxw)) / 2));
  /* solid page-coloured backdrop so the dark hero/CTA bands above and below can
     never bleed through while the grid crossfades between categories (the old
     "ghost fade"). Full-bleed background, inner content still capped to maxw. */
  background: var(--bg-light);
  position: relative; z-index: 1;
}
.pf-gallery .pf-item { aspect-ratio: 4 / 3; }
.pf-empty { text-align: center; color: var(--ink-on-light-2); padding: 4rem 0; grid-column: 1 / -1; }

/* Prose block under the gallery. The portfolio was a bare image grid with almost
   no text, which left search engines nothing to read. Sits on the light gallery
   background, not the dark CTA band below it. */
.pf-notes { max-width: var(--maxw); margin: 0 auto; padding: clamp(4rem, 11vh, 7rem) var(--pad) clamp(1.5rem, 4vh, 2.5rem); }
.pf-notes-head { max-width: 34ch; margin-bottom: clamp(2.6rem, 6vh, 4rem); }
.pf-notes-eyebrow {
  display: block; margin-bottom: 1rem; font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent);
}
.pf-notes h2 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2rem, 4.2vw, 3.1rem); letter-spacing: -0.025em;
  line-height: 1.08; text-wrap: balance;
}
.pf-notes h2 em { font-style: italic; color: var(--accent); }

.pf-notes-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; }
/* Hairline rules between cells, drawn with insets so the grid reads as one ruled
   sheet rather than four detached boxes. Removed on the outer edges below. */
.pf-note { padding: clamp(1.8rem, 4vh, 2.6rem) clamp(1.6rem, 3.5vw, 3rem); border-top: 1px solid rgba(0, 0, 0, 0.1); }
.pf-note:nth-child(odd) { padding-left: 0; border-right: 1px solid rgba(0, 0, 0, 0.1); }
.pf-note:nth-child(even) { padding-right: 0; }
.pf-note-idx {
  display: block; margin-bottom: 0.9rem;
  font-family: var(--font-display); font-size: 0.82rem; font-weight: 500;
  letter-spacing: 0.08em; color: var(--accent);
}
.pf-note h3 { font-size: 1.12rem; font-weight: 600; letter-spacing: -0.005em; margin-bottom: 0.65rem; }
.pf-note p { color: var(--ink-on-light-2); font-size: 0.97rem; line-height: 1.7; max-width: 46ch; }

/* The rule spans the full grid width while the text stays at a readable measure,
   so it lines up with the cell rules above instead of stopping mid-column. */
.pf-notes-foot {
  margin-top: clamp(2.4rem, 5vh, 3.4rem); padding-top: clamp(1.6rem, 3.5vh, 2.2rem);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  color: var(--ink-on-light-2); font-size: 1.02rem; line-height: 1.7;
}
.pf-notes-foot span { display: block; max-width: 60ch; }
@media (max-width: 700px) {
  .pf-notes-grid { grid-template-columns: 1fr; }
  .pf-note, .pf-note:nth-child(odd), .pf-note:nth-child(even) { padding-left: 0; padding-right: 0; border-right: none; }
}

.pf-cta-band { background: var(--bg-dark); color: var(--ink-on-dark); text-align: center; padding: clamp(4rem, 10vh, 6rem) var(--pad); }
.pf-cta-band h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(2rem, 4.5vw, 3.4rem); letter-spacing: -0.025em; text-wrap: balance; max-width: 20ch; margin: 0 auto 1.6rem; }
.pf-cta-band h2 em { font-style: italic; color: var(--accent); }

@media (max-width: 768px) { .pf-gallery { grid-template-columns: repeat(2, 1fr); } .pf-item figcaption { opacity: 1; transform: none; } }
@media (max-width: 460px) { .pf-gallery { grid-template-columns: 1fr; } }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 980px) {
  .nav-links { display: none; }
  .nav-toggle { display: block; }
  .nav-links.open {
    display: flex; flex-direction: column; align-items: flex-start; gap: 1.3rem;
    position: absolute; top: calc(100% + 0.6rem); left: 0.35rem; right: 0.35rem;
    background: rgba(7,7,7,0.96); backdrop-filter: blur(20px);
    padding: 1.6rem; border-radius: 20px; border: 1px solid var(--hairline-dark);
  }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .contact-wrap { grid-template-columns: 1fr; }
  /* umbrella: pinned on mobile too — each rib fans open WITH its stage text.
     Compact vertical rhythm so head + umbrella + readout fit one viewport. */
  #umbrella { padding-bottom: 0; }
  .umbrella-head { padding-top: clamp(2.8rem, 6vh, 4rem); }
  .umbrella-head .section-heading { font-size: clamp(1.6rem, 5.8vw, 2.2rem); }
  .umbrella-head .section-body { font-size: 0.85rem; max-width: 46ch; }
  .umb-inner {
    grid-template-columns: 1fr; gap: 0.4rem;
    padding: 0.4rem var(--pad) 1rem;
    align-items: start; align-content: start; justify-items: center;
  }
  .umb-fig svg { max-width: 340px; max-height: 32svh; }
  .umb-readout { width: 100%; max-width: 420px; }
  .umb-count { margin-bottom: 0.6rem; }
  .umb-count #u-num { font-size: 1.6rem; }
  .u-stages { min-height: 172px; }
  .u-stage h3 { font-size: 1.3rem; margin: 0.4rem 0 0.5rem; }
  .u-stage p { font-size: 0.88rem; line-height: 1.55; }
  .u-ticks { margin-top: 0.9rem; }
  .u-ticks i { width: 16px; }
}

/* Mobile: shorter video zone, stacked layouts, compact type so each section
   fits comfortably in one viewport below the navbar */
@media (max-width: 768px) {
  #scroll-container { height: 480vh; }
  .block { padding: clamp(3.4rem, 9vh, 5.5rem) var(--pad); }
  /* The floating pill nav is position:fixed with no reserved layout height, so a
     sticky bar pinned at top:0 slides in flush behind it — the category chips'
     top row was getting covered by the nav pill on scroll. Push the sticky
     offset down past the pill's own height + top gap. */
  .filter-bar { top: 76px; }
  /* Intro hero photo (1672x941, landscape) cover-cropped into a tall portrait
     viewport keeps only a narrow centre sliver — the desktop-tuned fade then
     erased almost all of what was left, so the photo read as "not visible".
     Lighten the fade and lift the base opacity on mobile only; desktop keeps
     its original values. */
  .hero-bg { opacity: 0.4; }
  .hero-bg::after {
    background:
      radial-gradient(140% 70% at 50% 38%, transparent 0%, rgba(7,7,7,0.2) 65%, var(--bg-dark) 100%),
      linear-gradient(180deg, var(--bg-dark) 0%, rgba(7,7,7,0.3) 18%, rgba(7,7,7,0.38) 55%, rgba(7,7,7,0.82) 85%, var(--bg-dark) 100%);
  }
  /* INTRO on mobile: the whole card must sit inside ONE phone screen with no
     dead space and no risk of the scroll cue colliding with the copy. The
     desktop padding (8rem top / 5.5rem bottom) pushed the block into the middle
     third and left a large empty band above and below. Tighten every gap and
     let the flex column centre the group properly. */
  /* Balance the block optically: the section centres its content, so the top
     padding and the intro-inner bottom padding must roughly match or the group
     drifts low and leaves a dead band above the logo. */
  .hero-standalone { padding: 4rem var(--pad) 2.5rem; min-height: 100svh; }
  .intro-inner { padding-bottom: 1.5rem; }
  .intro-logo { width: clamp(104px, 30vw, 138px); margin-bottom: clamp(0.9rem, 2vh, 1.3rem); border-radius: 18px; }
  .intro-label { margin-bottom: clamp(0.7rem, 1.6vh, 1.1rem); font-size: 0.6rem; letter-spacing: 0.2em; }
  .intro-title { font-size: clamp(2.1rem, 10vw, 3.2rem); }
  .intro-tagline { margin-top: clamp(0.8rem, 2vh, 1.2rem); font-size: clamp(1.05rem, 4.6vw, 1.3rem); }
  .intro-meta { margin-top: 0.7rem; font-size: 0.62rem; letter-spacing: 0.14em; line-height: 1.7; }
  .scroll-indicator { bottom: 1.2rem; font-size: 0.56rem; }
  .scroll-indicator .line { height: 30px; }
  .section-label { margin-bottom: 1rem; }
  .section-heading { font-size: clamp(1.75rem, 6.6vw, 2.5rem); }
  .section-body { font-size: 0.92rem; }
  .btn { padding: 0.85rem 1.4rem; font-size: 0.86rem; }
  .section-actions .btn { margin-top: 1.2rem; }
  .hero2 { grid-template-columns: 1fr; gap: 1.6rem; }
  .hero2-copy .section-heading { font-size: clamp(1.8rem, 7vw, 2.6rem); }
  .hero2-fig img { min-height: 0; aspect-ratio: 3 / 2; }
  /* Mobile: the light hero must fill the full viewport so the dark trust section
     below can never peek in at the bottom edge. Center the block vertically and
     guarantee the light background covers the whole screen. */
  #home-hero { min-height: 100svh; display: flex; align-items: center; }
  #home-hero .block { width: 100%; }
  /* Same fix for testimonials (dark): it was shorter than the viewport, so the
     light FAQ section below peeked in at the bottom. Guarantee it fills the screen
     so the dark background extends past the content — but keep the content
     top-aligned (natural flow) so the heading still leads as you scroll in, rather
     than being pushed above the fold by vertical centering. */
  #testimonials { min-height: 100svh; }
  /* Same fix again for trust: its content (11+ / 132+ / 98% / Skilled / Quality)
     falls well short of the viewport height on most phones, leaving a dead black
     gap before the umbrella section starts — the section never "fully filled"
     the screen. Fill + centre it exactly like the home hero above. */
  #trust { min-height: 100svh; display: flex; align-items: center; }
  #trust .block { width: 100%; padding-top: clamp(2rem, 6vh, 3.5rem); padding-bottom: clamp(2rem, 6vh, 3.5rem); }
  .stat-feature .stat-number { font-size: 2.7rem; }
  .stat-feature .stat-suffix { font-size: 1.6rem; }
  .stat-number { font-size: 2rem; }
  .stat-word { font-size: 1.5rem; }
  .stat-label { font-size: 0.68rem; margin-top: 0.5rem; }
  /* Wing line-art crosses straight through the single-column stats on mobile —
     the white crane linework read as "white overlapping" the numbers. Hide both
     wings on narrow screens; they are purely decorative. */
  .trust-bg { display: none; }
  .stats-wrap { grid-template-columns: 1fr; gap: 1.8rem; }
  .stat-feature { margin-top: 0.8rem; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 1.1rem; }
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr; }
  .pf-item figcaption { opacity: 1; transform: none; }
  /* Contact: the section carries an inline padding-top:0 (to butt against the FAQ
     on desktop). On mobile that made the heading collide with the sticky navbar
     and the tall form spill past one screen. Give the heading clearance below the
     navbar and tighten the form's vertical rhythm so it fits comfortably. */
  #contact { padding-top: 0; }
  #contact .block { padding-top: 1.5rem !important; }
  #contact .contact-info h2 { font-size: clamp(1.7rem, 6.4vw, 2.2rem); margin-bottom: 0.8rem; }
  #contact .contact-info .lead { margin-bottom: 1.4rem; }
  #contact .form { padding: 1.25rem; }
  #contact .field { margin-bottom: 0.8rem; }
  #contact .field textarea { min-height: 84px; }
}
@media (max-width: 460px) {
  .portfolio-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .hero-actions, .section-actions, .closing-actions { flex-direction: column; align-items: stretch; width: 100%; }
  .hero-actions .btn, .section-actions .btn, .closing-actions .btn { justify-content: center; }
  .section-actions .btn + .btn { margin-top: 0.8rem; }
  .testi { flex-basis: 86vw; padding: 1.5rem; }
}

/* =========================================================================
   ROUND 7 — richer animation layer
   ========================================================================= */
/* word-split heading spans (JS wraps each word in .wi > .wi-in).
   .wi is a per-word CLIP so .wi-in can rise from fully below its own line box
   without poking into neighbouring lines during the staggered reveal. A touch of
   vertical padding (offset by a negative margin) keeps ascenders/italics/descenders
   from being clipped once the word has settled at rest. */
.section-heading .wi, .closing h2 .wi, .contact-info h2 .wi {
  display: inline-block; overflow: hidden;
  padding: 0.12em 0.04em; margin: -0.12em -0.04em;
  vertical-align: top;
}
.section-heading .wi-in, .closing h2 .wi-in, .contact-info h2 .wi-in {
  display: inline-block; will-change: transform;
}

/* intro backdrop breathes — slow zoom drift (scale composes with transform) */
#hero { overflow: hidden; }
.hero-bg { animation: introZoom 22s ease-in-out infinite alternate; }
@keyframes introZoom { from { scale: 1; } to { scale: 1.07; } }

/* trust wings drift gently (translate composes with the centering transform) */
.trust-bg .tb { animation: tbDrift 11s ease-in-out infinite alternate; }
.trust-bg .tb-right { animation-duration: 14s; animation-delay: -5s; }
@keyframes tbDrift { from { translate: 0 -10px; } to { translate: 0 12px; } }

/* closing glow slowly breathes */
.closing-glow { animation: glowBreathe 7s ease-in-out infinite alternate; }
@keyframes glowBreathe { from { opacity: 0.55; scale: 1; } to { opacity: 1; scale: 1.12; } }

/* primary button — light sweep on hover */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: ""; position: absolute; top: 0; left: -80%;
  width: 55%; height: 100%; pointer-events: none;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,0.32), transparent);
  transform: skewX(-20deg); transition: left 0.55s ease;
}
.btn-primary:hover::after { left: 135%; }

/* portfolio card caption chip glows on hover */
.pf-item:hover figcaption .c { text-shadow: 0 0 12px var(--accent-glow); }

/* =========================================================================
   REDUCED MOTION — full fallback
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: 0.01ms !important; }
  #scroll-container { height: auto !important; }
  .canvas-wrap { clip-path: none !important; position: relative; height: 70vh; }
  #dark-overlay { display: none; }
  .scroll-indicator .line { animation: none; }
  /* umbrella: fully drawn and static — no pin, no scrub, all stages listed */
  .umb { height: auto; display: block; }
  .umb-inner { height: auto; grid-template-columns: 1fr; padding: 1rem var(--pad) 3rem; }
  .umb-count, .u-ticks, #u-rain { display: none; }
  .u-stages { min-height: 0; }
  .u-stage { position: relative; inset: auto; opacity: 1; visibility: visible; pointer-events: auto; padding: 1.2rem 0; }
  #u-glow { opacity: 0.35; }
}