:root {
  --white: #FFFFFF;
  --offwhite: #F6F3EE;
  --offwhite-2: #EFEAE1;
  --sky: #8C8880;
  --sky-deep: #16151A;
  --sky-pale: #EFEAE1;
  --border: #E3DED4;
  --text: #16151A;
  --text-muted: #6E6A61;
  --text-faint: #A39D91;
  --font-display: 'Playfair Display', Georgia, serif;
  /* Dusk scene: dome -> slideshow -> quote photo share this palette */
  --dusk: #17120D;
  --dusk-2: #231A12;
  --dusk-text: #F2E6D0;
  --dusk-muted: rgba(242,230,208,0.62);
  --dusk-line: rgba(242,230,208,0.24);
  --gold: #E0A858;
  --dome-sky: #6F7D91; /* matches the villa photo's sky; dome + slideshow sit on it */
  --font-body: 'Inter', system-ui, sans-serif;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
/* Lenis drives smooth scrolling; native smooth-scroll fights it and breaks
   anchor jumps, so it is only enabled when Lenis is NOT active. */
html:not(.lenis) { scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
.container { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
img { max-width: 100%; display: block; }
a { color: inherit; }

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 3000; background: var(--sky-deep); color: var(--white); padding: 12px 20px; }
.skip-link:focus { left: 16px; top: 16px; }

/* ─── PRELOADER ─── */
body.is-loading { overflow: hidden; }
.preloader {
  position: fixed; inset: 0; z-index: 5000; background: var(--sky-deep);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
.preloader-count { font-family: var(--font-display); font-style: italic; font-size: 15px; color: rgba(255,255,255,0.5); }
.preloader-name {
  font-family: var(--font-display); font-size: clamp(22px, 4vw, 34px); color: var(--white);
  letter-spacing: 0.5px; opacity: 0; transform: translateY(10px);
  animation: preloaderIn 0.7s ease 0.15s forwards;
}
@keyframes preloaderIn { to { opacity: 1; transform: translateY(0); } }
.preloader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .preloader { transition: opacity 0.2s ease; }
  .preloader-name { animation: none; opacity: 1; transform: none; }
}

/* ─── NAVBAR ─── */
/* Always transparent — it blends into whatever is behind it. JS samples the
   background under each corner (data-left-bg / data-right-bg = light|dark)
   and the text tone flips to stay legible; no bar, no blur, no shadow. */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: transparent; pointer-events: none;
}
.navbar a, .navbar button { pointer-events: auto; }
.nav-inner { display: flex; align-items: flex-start; justify-content: space-between; height: auto; max-width: none; margin: 0; padding: 26px 40px; }
/* Rotating emblem: text ring orbits a fixed centre mark */
.nav-emblem {
  position: relative; width: 92px; height: 92px; flex-shrink: 0; text-decoration: none;
  display: flex; align-items: center; justify-content: center; color: var(--white);
  transition: color 0.35s ease;
}
.emblem-ring {
  position: absolute; inset: 0; width: 100%; height: 100%;
  animation: emblemSpin 22s linear infinite; transform-origin: 50% 50%;
}
@keyframes emblemSpin { to { transform: rotate(360deg); } }
.emblem-text {
  font-family: var(--font-body); font-size: 10px; font-weight: 500;
  letter-spacing: 2.1px; text-transform: uppercase; fill: currentColor;
}
.emblem-core { position: relative; z-index: 1; width: 46px; height: 46px; }
/* The diamond is filled with currentColor, so the wordmark inverts against it. */
.emblem-core-text { fill: #16151A; transition: fill 0.35s ease; }
.navbar[data-left-bg="light"] .nav-emblem { color: var(--text); }
.navbar[data-left-bg="light"] .emblem-core-text { fill: var(--offwhite); }
.nav-emblem:hover .emblem-ring { animation-duration: 8s; }
@media (prefers-reduced-motion: reduce) { .emblem-ring { animation: none; } }

/* ERA-style corner nav: tight stacked small-caps, right-aligned */
.nav-links { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.nav-links a {
  text-decoration: none; font-size: 10.5px; font-weight: 500; color: rgba(255,255,255,0.88);
  padding: 2px 0; letter-spacing: 2.2px; text-transform: uppercase;
  transition: color 0.35s ease, letter-spacing 0.3s ease; position: relative;
}
.nav-links a:hover { letter-spacing: 3px; color: var(--white); }
.nav-links a.active { color: var(--white); }
.nav-quote { margin-top: 8px; padding-top: 8px !important; border-top: 1px solid rgba(255,255,255,0.35); transition: border-color 0.35s ease; }
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 8px; }
.hamburger span { display: block; width: 24px; height: 1.5px; background: var(--white); transition: background 0.35s ease; }
.navbar[data-right-bg="light"] .nav-links a { color: rgba(22,21,26,0.72); }
.navbar[data-right-bg="light"] .nav-links a:hover,
.navbar[data-right-bg="light"] .nav-links a.active { color: var(--text); }
.navbar[data-right-bg="light"] .nav-quote { border-top-color: rgba(22,21,26,0.22); }
.navbar[data-right-bg="light"] .hamburger span { background: var(--text); }
/* Mobile menu open: overlay is white, so force dark controls on top of it */
.navbar.menu-open .nav-emblem { color: var(--text); }
.navbar.menu-open .emblem-core-text { fill: var(--offwhite); }
.navbar.menu-open .hamburger span { background: var(--text); }
.mobile-overlay {
  display: none; position: fixed; inset: 0; z-index: 999; background: var(--white);
  padding-top: 100px; flex-direction: column; align-items: center; gap: 4px;
}
.mobile-overlay.open { display: flex; }
.mobile-overlay a { text-decoration: none; font-size: 17px; font-weight: 500; color: var(--text); padding: 16px 32px; letter-spacing: 0.3px; }
.mobile-quote { background: var(--sky-deep); color: var(--white) !important; margin-top: 14px; font-weight: 600; border-radius: 999px; }

/* ─── HERO ─── */
.hero {
  position: relative; height: 100vh; min-height: 640px; max-height: 1080px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  overflow: hidden; background: #161511;
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-bg-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(6,14,24,0.6) 0%, rgba(6,14,24,0.18) 26%, rgba(6,14,24,0.22) 62%, rgba(6,14,24,0.78) 100%);
}
/* ─── SCROLL RAIL (persistent, sitewide) ─── */
.scroll-rail {
  position: fixed; left: 22px; top: 50%; transform: translateY(-50%); z-index: 900;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 16px 9px; border-radius: 999px;
  background: rgba(10,20,32,0.42); border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-family: var(--font-display); font-size: 11px; letter-spacing: 0.5px; color: rgba(255,255,255,0.85);
}
.scroll-rail-count { color: var(--white); font-weight: 600; }
.scroll-rail-total { color: rgba(255,255,255,0.45); font-size: 10px; }
.scroll-rail-track { position: relative; width: 2px; height: 90px; background: rgba(255,255,255,0.2); border-radius: 2px; overflow: hidden; }
.scroll-rail-fill { position: absolute; top: 0; left: 0; width: 100%; height: 0%; background: var(--sky); border-radius: 2px; }

.hero-content { position: relative; z-index: 2; text-align: center; padding: 0 24px; max-width: 880px; }
.hero-stack {
  font-family: var(--font-display); font-weight: 500; font-style: normal;
  line-height: 0.98; letter-spacing: -0.5px; color: var(--white); text-shadow: 0 4px 32px rgba(0,0,0,0.4);
  display: flex; flex-direction: column; align-items: center;
}
.hero-stack .line { overflow: hidden; padding: 0 4px; }
.hero-stack .word { display: inline-block; will-change: transform, opacity; }
.hero-stack .line-1 .word,
.hero-stack .line-2 .word {
  font-size: clamp(38px, 8.2vw, 108px); font-weight: 500;
  letter-spacing: -1px; text-transform: uppercase;
}
.hero-stack .line-2 { margin-top: -0.14em; }
.hero-stack em { font-style: italic; font-weight: 500; color: var(--white); }
/* Script accent line, set slightly overlapping the stack above it */
.hero-stack .line-script { margin-top: -0.3em; overflow: visible; }
.hero-stack .line-script .word {
  font-size: clamp(34px, 6vw, 76px); font-style: italic; font-weight: 400;
  letter-spacing: 0; text-transform: none;
}
.hero-stack .line-2 .word { font-size: clamp(48px, 8.4vw, 112px); }
@media (max-width: 900px) { .scroll-rail { display: none; } }
.hero-sub { font-size: 15.5px; color: rgba(255,255,255,0.8); max-width: 460px; margin: 26px auto 30px; line-height: 1.7; font-weight: 300; }
/* Split caption: two labels divided by a hairline rule, ERA-style */
.hero-split {
  display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap;
  margin: 30px auto 34px; font-size: 10.5px; font-weight: 500;
  letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,0.78);
}
.hero-split-rule { width: 54px; height: 1px; background: rgba(255,255,255,0.45); }
@media (max-width: 560px) { .hero-split { gap: 10px; letter-spacing: 2px; font-size: 9.5px; } .hero-split-rule { width: 28px; } }

/* Mobile: shrink the emblem and keep the long wordmark inside the viewport */
@media (max-width: 768px) {
  .nav-inner { padding: 18px 22px; }
  .nav-emblem { width: 66px; height: 66px; }
  .emblem-core { width: 33px; height: 33px; }
  .hero-stack .line-1 .word,
  .hero-stack .line-2 .word { font-size: clamp(26px, 9.4vw, 46px); letter-spacing: -0.5px; }
  .hero-stack .line-script .word { font-size: clamp(24px, 8vw, 40px); }
  .hero-content { padding: 0 18px; }
}
.hero-btns { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.btn-ghost {
  display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px;
  background: transparent; color: var(--white); font-size: 11.5px; font-weight: 500;
  letter-spacing: 2px; text-transform: uppercase; text-decoration: none; border: 1px solid rgba(255,255,255,0.45);
  border-radius: 999px; transition: all 0.3s ease;
}
.btn-ghost:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.8); }
.hero-foot {
  position: absolute; left: 0; right: 0; bottom: 30px; z-index: 2;
  display: flex; justify-content: space-between; align-items: baseline; padding: 0 40px;
  font-size: 10.5px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.65);
}
.hero-foot-mark { font-family: var(--font-display); font-style: italic; font-size: 14px; letter-spacing: 0.3px; color: rgba(255,255,255,0.88); text-transform: none; }

/* ─── BUTTONS (used in Contact) ─── */
.btn-primary {
  display: inline-flex; align-items: center; gap: 10px; padding: 16px 30px;
  background: var(--sky-deep); color: var(--white); font-size: 13.5px; font-weight: 600;
  letter-spacing: 0.8px; text-transform: uppercase; text-decoration: none; border: 1px solid var(--sky-deep);
  border-radius: 999px; transition: all 0.3s ease;
}
.btn-primary:hover { background: #2B2A25; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(30,92,130,0.22); }
.btn-secondary {
  display: inline-flex; align-items: center; gap: 10px; padding: 16px 30px;
  background: transparent; color: var(--text); font-size: 13.5px; font-weight: 600;
  letter-spacing: 0.8px; text-transform: uppercase; text-decoration: none; border: 1px solid var(--border);
  border-radius: 999px; transition: all 0.3s ease;
}
.btn-secondary:hover { border-color: var(--sky-deep); color: var(--sky-deep); }

/* ─── HERO CONSTRUCTION ANIMATION ─── */
.hero-anim-wrap {
  position: relative; max-width: 980px; margin: 0 auto; aspect-ratio: 16/9;
  background: linear-gradient(180deg, #EAF4FA 0%, #F7FBFD 55%, #F1F6F9 100%);
  border: 1px solid var(--border); overflow: hidden;
  transition: background 2.5s ease;
}
.hero-anim-wrap.stage-lit { background: linear-gradient(180deg, #1B2E42 0%, #23415C 55%, #2C4A63 100%); }
.hero-anim-caption {
  position: absolute; left: 24px; bottom: 20px; z-index: 3;
  font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
  color: var(--sky-deep); background: rgba(255,255,255,0.85); padding: 8px 14px;
  transition: color 0.6s ease, background 0.6s ease;
}
.hero-anim-wrap.stage-lit .hero-anim-caption { color: #EAF4FA; background: rgba(20,35,50,0.55); }
.hero-anim-badge {
  position: absolute; top: 20px; right: 20px; z-index: 3;
  font-size: 10px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--text-faint); border: 1px solid var(--border); padding: 6px 12px; background: rgba(255,255,255,0.7);
}
.hero-anim-wrap.stage-lit .hero-anim-badge { color: rgba(234,244,250,0.5); border-color: rgba(234,244,250,0.2); background: rgba(20,35,50,0.4); }

.building-svg { width: 100%; height: 100%; display: block; }
.b-ground { stroke: var(--sky-deep); stroke-width: 1.5; opacity: 0.4; }
.b-plot-marker { stroke: var(--sky); stroke-width: 1; stroke-dasharray: 4 4; opacity: 0.5; }
.b-foundation { fill: none; stroke: var(--sky-deep); stroke-width: 2; }
.b-column { stroke: var(--sky-deep); stroke-width: 2.5; stroke-linecap: round; }
.b-slab { stroke: var(--sky-deep); stroke-width: 2.5; }
.b-block { fill: #C9DEEA; opacity: 0; transition: opacity 1s ease; }
.b-block.on { opacity: 0.85; }
.b-window { fill: #7FB8DE; opacity: 0; transition: opacity 0.8s ease, fill 1.2s ease; }
.b-window.on { opacity: 0.95; }
.stage-lit .b-window.on { fill: #FFD98A; }
.b-roofline { stroke: var(--sky-deep); stroke-width: 2.5; }

/* stage-driven visibility via JS toggling data-stage on wrapper; each element has data-appear-stage */
[data-appear-stage] { opacity: 0; transition: opacity 0.7s ease, stroke-dashoffset 0.9s ease; }
[data-appear-stage].visible { opacity: 1; }
[data-draw] { stroke-dasharray: var(--len, 400); stroke-dashoffset: var(--len, 400); }
[data-draw].visible { stroke-dashoffset: 0; }

/* ─── HERO HOTSPOTS: small pulsing dots over the hero photo ─── */
.hero-hotspot {
  position: absolute; width: 9px; height: 9px; border-radius: 50%;
  background: var(--white); z-index: 2; pointer-events: none;
}
.hero-hotspot::before {
  content: ''; position: absolute; inset: -8px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.6); animation: hotspotPulse 2.6s ease-out infinite;
}
.hero-hotspot:nth-child(2)::before { animation-delay: 0.6s; }
.hero-hotspot:nth-child(3)::before { animation-delay: 1.2s; }
@keyframes hotspotPulse {
  0% { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(2.2); opacity: 0; }
}
@media (max-width: 768px) { .hero-hotspot { display: none; } }
@media (prefers-reduced-motion: reduce) { .hero-hotspot::before { animation: none; opacity: 0; } }

/* ─── DOME TRANSITION ─── */
.hero-dome-wrap { position: relative; }
/* A large semicircle rises from the foot of the hero while the hero is
   pinned, then settles to fill the viewport; the Three Reasons section right
   after it shares the same background, so the seam disappears. */
/* Base/resting state = fully risen (covers the viewport). This is also the
   correct no-JS and prefers-reduced-motion fallback: static, final state,
   nothing to wait for. JS (when motion is allowed) starts it pushed further
   down via an additional GSAP `y`, then animates that back to 0 on scroll —
   GSAP decomposes the existing translateX(-50%) and layers its own y/scale
   on top of it rather than fighting it. */
/* --dome-pad: space above the headline inside the dome.
   --dome-tail: height of the row + drop line under the headline.
   The slideshow pulls itself up by exactly the dome's leftover empty space
   (see .slideshow margin-top) so no dead gap sits under "Est. 2016". */
:root { --quote-h: max(560px, 86vh); --dome-pad: 140px; --dome-tail: 100px; --dome-svg-h: 14vw; }
.dome-center-wrap {
  position: absolute; left: 50%; bottom: -10%; z-index: 3;
  width: 104vw; max-width: 2200px;
  transform: translateX(-50%);
  pointer-events: none; /* the wrapper's invisible box must never block the hero's buttons */
}
.dome-shape {
  width: 100%; height: 100vh; pointer-events: auto;
  position: relative; isolation: isolate; --dome-sx: 1;
  display: flex; flex-direction: column; align-items: center;
  padding-top: var(--dome-pad);
}
/* The dome's coloured body lives on a pseudo-element so it can start NARROW
   (scaleX) and widen as it rises, without squashing the headline inside. */
.dome-shape::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--dome-sky); border-radius: 50% 50% 0 0 / 90% 90% 0 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 -26px 80px rgba(120,140,170,0.25);
  
}
/* Two concentric-ish arcs of giant type, drawn inside a 1000-unit-wide viewBox
   that is exactly one viewport wide, so the text always sits well inside the
   dome's curve and scales with the screen. JS grows it from small to full size
   as the dome rises. */
.dome-curve { width: 100vw; height: auto; overflow: visible; flex-shrink: 0; }
.dome-curve-label {
  font-family: 'Instrument Serif', var(--font-display); font-weight: 400;
  letter-spacing: 0.05em; text-transform: uppercase; fill: var(--dusk-text);
}
.dome-center {
  margin-top: 14px; display: flex; align-items: center; gap: 16px;
  font-size: 11px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; color: var(--dusk-muted);
}
.dome-mini-mark { width: 22px; height: 22px; color: var(--gold); }
.dome-drop-line { width: 1px; height: 48px; background: var(--dusk-line); margin-top: 16px; }
@media (max-width: 768px) {
  :root { --dome-pad: 130px; --dome-tail: 88px; }
  .dome-center-wrap { width: 118vw; }
  .dome-center { font-size: 9.5px; letter-spacing: 2px; gap: 10px; }
  .dome-drop-line { height: 36px; }
}
/* Reduced motion: the hero stays visible and the dome sits below it as a
   static arch, with the section following it directly. */
@media (prefers-reduced-motion: reduce) {
  .dome-center-wrap { position: relative; left: auto; bottom: auto; transform: none; width: 100%; max-width: none; }
  .dome-shape { height: auto; padding-bottom: 24px; border-radius: 50% 50% 0 0 / 90px 90px 0 0; }
  .slideshow { margin-top: 0 !important; background: var(--dome-sky); }
}

/* ─── THREE REASONS ─── */
.reasons { background: var(--offwhite); padding: 60px 0 120px; position: relative; z-index: 2; }
.reasons-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.reason-block { display: flex; flex-direction: column; }
.reason-num { font-family: var(--font-display); font-style: italic; font-size: 15px; color: var(--text-faint); margin-bottom: 14px; }
.reason-img { aspect-ratio: 4/3; overflow: hidden; margin-bottom: 20px; background: var(--offwhite-2); }
.reason-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s cubic-bezier(0.22,1,0.36,1); }
.reason-block:hover .reason-img img { transform: scale(1.05); }
.reason-block h3 { font-family: var(--font-display); font-weight: 500; font-size: 21px; color: var(--text); margin-bottom: 10px; }
.reason-block p { font-size: 13.5px; color: var(--text-muted); line-height: 1.65; }
@media (max-width: 860px) { .reasons-grid { grid-template-columns: 1fr; gap: 48px; } }

/* ─── SLIDESHOW (inside the dome) ─── */
/* Pull up by the dome's leftover empty height: at the end of the pin the dome
   fills the viewport, its content ends at (-10vh + pad + svg-height + tail). Pulling
   the section's top edge up to exactly that point leaves its own 50px top
   padding as the gap under the drop line. Same background as the dome, so
   there is no seam. */
.slideshow {
  /* The top is shaped as the dome's own ellipse (JS sets --dome-a/--dome-b) so the
     dome keeps widening past the hero's edge until it leaves the screen, instead of
     meeting a flat slate surface. Below the ellipse's widest point it's solid. */
  --dome-d: calc(var(--dome-pad) + var(--dome-svg-h) + var(--dome-tail));
  --cap-h: max(1px, calc(var(--dome-b, 800px) - var(--dome-d)));
  background:
    radial-gradient(ellipse var(--dome-a, 50vw) var(--dome-b, 800px) at 50% var(--cap-h), var(--dome-sky) 99.4%, transparent 100%) top / 100% var(--cap-h) no-repeat,
    linear-gradient(var(--dome-sky), var(--dome-sky)) 0 var(--cap-h) / 100% 100% no-repeat;
  padding: 50px 0 280px; position: relative; z-index: 4; overflow: hidden;
  margin-top: calc(-1 * max(0px, 90vh - var(--dome-pad) - var(--dome-svg-h) - var(--dome-tail)));
}
/* Mirror of the quote photo's top edge. Same height variable + object-fit as
   the photo => identical crop and scale; flipped, its bottom row equals the
   photo's top row. The .25 black wash matches the photo's own scrim at its top. */
.slideshow-sky {
  position: absolute; left: 0; right: 0; bottom: 0; height: 300px; overflow: hidden; pointer-events: none; z-index: 0;
  background: linear-gradient(to bottom, rgba(111,125,145,0) 0%, #6A829F 100%);
}
.slideshow-sky img { display: none;
  position: absolute; left: -4%; bottom: -70px; width: 108%; height: var(--quote-h);
  object-fit: cover; transform: scaleY(-1); filter: blur(44px);
}

.slideshow-inner { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; padding: 0 24px; text-align: center; }
.slideshow-headline {
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
  font-size: clamp(34px, 9vw, 150px); line-height: 0.96; letter-spacing: -2px;
  color: var(--dusk-text); margin-bottom: 40px; overflow: hidden;
}
.slideshow-frame {
  position: relative; width: min(26vw, 420px); min-width: 220px; aspect-ratio: 16/10;
  margin: 0 auto 34px; overflow: hidden; background: var(--dusk-2);
  box-shadow: 0 30px 60px rgba(0,0,0,0.35);
}
.slideshow-headline .sh-inner { display: block; will-change: transform; }
.slideshow-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.9s ease; }
.slideshow-img.is-active { opacity: 1; }
.slideshow-controls { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 28px; }
.slide-arrow {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--dusk-line); background: none;
  color: var(--dusk-text); font-size: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.slide-arrow:hover { border-color: var(--gold); background: rgba(224,168,88,0.12); }
.slide-index { font-family: var(--font-display); font-style: italic; font-size: 13px; color: var(--dusk-muted); min-width: 14px; }
.slide-progress-track { width: 110px; height: 1px; background: var(--dusk-line); position: relative; }
.slide-progress-fill { position: absolute; top: 0; left: 0; height: 100%; width: 0%; background: var(--gold); }
.slideshow-desc { font-size: 14.5px; color: var(--dusk-muted); line-height: 1.7; max-width: 440px; margin: 0 auto 16px; font-weight: 300; }
.dome-shape, .slideshow { --dusk-text: #FFFFFF; --dusk-muted: rgba(255,255,255,0.88); --dusk-line: rgba(255,255,255,0.4); --gold: #F4E3BF; --dusk-2: #5C6A7F; }
.slideshow-tagline { display: block; font-size: 11px; font-weight: 600; letter-spacing: 2.4px; text-transform: uppercase; color: var(--gold); }
@media (max-width: 768px) {
  .slideshow-headline { font-size: clamp(30px, 14vw, 56px); }
  .slideshow-frame { width: 80vw; }
  .slide-progress-track { width: 70px; }
}

/* ─── QUOTE ─── */
.quote-section { position: relative; min-height: var(--quote-h); display: flex; align-items: flex-end; overflow: hidden; }
.quote-media { position: absolute; inset: 0; }
.quote-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.quote-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,19,16,0.25) 0%, rgba(20,19,16,0.82) 100%); }
.quote-content { position: relative; z-index: 2; max-width: 760px; margin-left: auto; padding: 0 max(24px, 6vw) 90px; text-align: right; }
.quote-mark { display: block; font-family: var(--font-display); font-size: clamp(60px, 9vw, 120px); color: rgba(255,255,255,0.85); line-height: 0.6; margin-bottom: 10px; }
.quote-text {
  font-family: var(--font-display); font-weight: 500; text-transform: uppercase;
  font-size: clamp(22px, 3.2vw, 38px); line-height: 1.25; letter-spacing: -0.3px; color: var(--white);
  margin-bottom: 22px;
}
.quote-attribution { font-size: 11px; font-weight: 500; letter-spacing: 2.4px; text-transform: uppercase; color: rgba(255,255,255,0.7); font-style: normal; }
/* The photo ends at an overhanging element, like the reference's flowers —
   here, crane-hung rebar bundles. The band is the cream strip below the photo;
   the loads start inside the photo (cables fade in over it) and hang past its
   lower edge, swaying gently out of phase. */
.quote-cream-band {
  position: relative; z-index: 5; background: #F5F3EE; min-height: 380px;
  display: flex; align-items: flex-end; justify-content: flex-end;
  padding: 0 max(24px, 6vw) 56px;
}
.band-copy { max-width: 400px; text-align: right; }
.band-eyebrow { display: block; font-size: 11px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; color: var(--text-faint); margin-bottom: 14px; }
.band-copy p { font-family: var(--font-display); font-size: clamp(20px, 2.2vw, 28px); line-height: 1.3; color: var(--text); }
.hang-cluster { position: absolute; left: 0; top: 0; width: 100%; height: 0; pointer-events: none; }
.hang-wrap { position: absolute; will-change: transform; }
.hang {
  display: block; width: 100%; height: auto; transform-origin: 50% 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 34%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 34%);
  animation: hangSway var(--sway-dur, 6s) ease-in-out var(--sway-delay, 0s) infinite alternate;
}
/* top = how far the cable reaches up into the photo; height sets the drop */
.hang-wrap-1 { left: 7%;  top: -260px; width: 66px; }
.hang-wrap-2 { left: 13%; top: -210px; width: 54px; }
.hang-wrap-3 { left: 19%; top: -170px; width: 46px; }
.hang-1 { --sway-dur: 6.4s; --sway-delay: -1.2s; }
.hang-2 { --sway-dur: 5.2s; --sway-delay: -3.1s; }
.hang-3 { --sway-dur: 7.1s; --sway-delay: -2.2s; }
@keyframes hangSway { from { transform: rotate(-2.6deg); } to { transform: rotate(2.6deg); } }
@media (max-width: 768px) {
  .quote-content { margin-left: 0; margin-right: auto; text-align: left; padding: 0 20px 60px; }
  .quote-cream-band { min-height: 300px; padding-bottom: 36px; }
  .band-copy { max-width: 210px; }
  .hang-wrap-1 { left: 5%;  top: -170px; width: 40px; }
  .hang-wrap-2 { left: 14%; top: -140px; width: 33px; }
  .hang-wrap-3 { left: 22%; top: -110px; width: 28px; }
}
@media (prefers-reduced-motion: reduce) { .hang { animation: none; } }


/* ─── TICKER ─── */
.strip { background: var(--sky-deep); padding: 16px 0; overflow: hidden; }
.strip-track { display: flex; width: max-content; animation: stripScroll 30s linear infinite; }
.strip-item { font-size: 12.5px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--white); padding: 0 32px; white-space: nowrap; opacity: 0.9; border-right: 1px solid rgba(255,255,255,0.2); }
@keyframes stripScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ─── STAT BAND ─── */
.stat-band { background: var(--white); padding: 74px 0; border-bottom: 1px solid var(--border); }
.stat-band-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat-cell { text-align: center; padding: 0 20px; position: relative; display: flex; flex-direction: column; gap: 10px; }
.stat-cell + .stat-cell::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 1px; background: var(--border); }
.stat-num { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(30px, 3.6vw, 46px); color: var(--sky-deep); line-height: 1; }
.stat-lbl { font-size: 11px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: var(--text-faint); }

/* ─── SECTION HEADERS ─── */
.section-label { display: flex; align-items: center; gap: 12px; font-size: 11px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; color: var(--sky-deep); margin-bottom: 20px; }
.section-label::before { content: ''; width: 32px; height: 1px; background: var(--sky); }
.section-title { font-family: var(--font-display); font-size: clamp(28px, 3.6vw, 46px); font-weight: 600; letter-spacing: -0.3px; color: var(--text); line-height: 1.2; }
.section-desc { font-size: 15.5px; color: var(--text-muted); line-height: 1.8; max-width: 600px; margin-top: 18px; font-weight: 300; }
.section-head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 64px; flex-wrap: wrap; }

/* ─── ABOUT ─── */
.about { padding: 130px 0 110px; background: var(--white); }
.about-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 80px; align-items: start; }
.about-figure { position: relative; }
.about-diagram { border: 1px solid var(--border); aspect-ratio: 3/4; position: relative; background: var(--offwhite); overflow: hidden; }
.about-diagram img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-badge { position: absolute; bottom: -1px; right: -1px; background: var(--sky-deep); color: var(--white); padding: 22px 26px; }
.about-badge .num { font-family: var(--font-display); font-size: 34px; font-weight: 600; line-height: 1; }
.about-badge .lbl { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; opacity: 0.75; margin-top: 6px; }

.about-copy p { font-size: 15.5px; color: var(--text-muted); line-height: 1.8; margin-bottom: 20px; max-width: 620px; }
.about-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); margin-top: 40px; border: 1px solid var(--border); }
.about-fact { background: var(--white); padding: 24px 22px; }
.about-fact .fact-num { font-family: var(--font-display); font-size: 26px; font-weight: 600; color: var(--sky-deep); }
.about-fact .fact-lbl { font-size: 11.5px; color: var(--text-muted); letter-spacing: 0.5px; margin-top: 6px; }

/* ─── SERVICES: interactive hover-reveal list ─── */
.services { padding: 110px 0; background: var(--offwhite); }
.services-interactive { display: grid; grid-template-columns: 1.3fr 1fr; gap: 60px; align-items: start; }
.services-list-col { border-top: 1px solid var(--border); }
.service-row {
  display: grid; grid-template-columns: 44px 1fr; column-gap: 20px; align-items: baseline;
  padding: 22px 4px; border-bottom: 1px solid var(--border); cursor: pointer;
  transition: padding-left 0.35s ease;
}
.service-row:hover, .service-row:focus-visible, .service-row.is-active { padding-left: 14px; }
.sv-index { font-family: var(--font-display); font-style: italic; font-size: 14px; color: var(--text-faint); transition: color 0.3s ease; }
.service-row h3 {
  font-family: var(--font-display); font-weight: 500; font-size: clamp(19px, 2.2vw, 26px); color: var(--text-faint);
  transition: color 0.3s ease; grid-column: 2;
}
.service-row.is-active h3, .service-row:hover h3, .service-row:focus-visible h3 { color: var(--text); font-weight: 600; }
.service-row.is-active .sv-index, .service-row:hover .sv-index { color: var(--sky-deep); }
.sv-desc {
  grid-column: 2; font-size: 13.5px; color: var(--text-muted); line-height: 1.6; max-width: 480px;
  max-height: 0; overflow: hidden; opacity: 0; margin-top: 0;
  transition: max-height 0.4s ease, opacity 0.3s ease, margin-top 0.3s ease;
}
.services-preview-col { position: sticky; top: 120px; }
.services-preview-frame {
  aspect-ratio: 4/5; overflow: hidden; background: var(--offwhite-2); border: 1px solid var(--border);
}
.services-preview-frame img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity 0.5s ease; }
.services-preview-frame img.is-shown { opacity: 1; }

@media (max-width: 900px) {
  .services-interactive { grid-template-columns: 1fr; gap: 0; }
  .services-preview-col { display: none; }
  .service-row.is-active .sv-desc { max-height: 100px; opacity: 1; margin-top: 8px; }
}

/* ─── IMAGE BREAK ─── */
.image-break { position: relative; height: 62vh; min-height: 380px; max-height: 640px; overflow: hidden; }
.image-break img { width: 100%; height: 100%; object-fit: cover; display: block; }
.image-break-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,14,24,0.15) 0%, rgba(6,14,24,0.55) 100%); }
.image-break-caption { position: absolute; left: 40px; bottom: 36px; right: 40px; display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 12px; }
.image-break-eyebrow { font-size: 11px; font-weight: 500; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(255,255,255,0.75); }
.image-break-line { font-family: var(--font-display); font-style: italic; font-size: clamp(20px, 2.6vw, 30px); color: var(--white); }

/* ─── PROJECTS (numbered list, Kononenko-style) ─── */
.projects { padding: 110px 0; background: var(--white); }
.projects-list { border-top: 1px solid var(--border); }
.project-row {
  display: grid; grid-template-columns: 56px 1fr auto 40px; align-items: center; gap: 24px;
  padding: 30px 4px; border-bottom: 1px solid var(--border);
  cursor: pointer; transition: padding-left 0.4s ease, background 0.4s ease;
}
.project-row:hover { padding-left: 20px; background: var(--offwhite); }
.pr-index { font-family: var(--font-display); font-style: italic; font-size: 15px; color: var(--text-faint); }
.pr-name { display: flex; flex-direction: column; gap: 4px; }
.pr-name h3 { font-family: var(--font-display); font-size: clamp(20px, 2.6vw, 30px); font-weight: 500; color: var(--text); transition: color 0.3s ease; }
.project-row:hover .pr-name h3 { color: var(--sky-deep); }
.pr-type { font-size: 11px; font-weight: 500; letter-spacing: 1.8px; text-transform: uppercase; color: var(--text-faint); }
.pr-loc { font-size: 13px; color: var(--text-muted); text-align: right; white-space: nowrap; }
.pr-arrow {
  font-size: 20px; color: var(--text-faint); text-align: center; transition: transform 0.35s ease, color 0.35s ease;
}
.project-row:hover .pr-arrow { transform: translateX(6px); color: var(--sky-deep); }
.projects-note { margin-top: 44px; text-align: center; font-size: 13px; color: var(--text-faint); font-style: italic; }

/* Cursor-following circular preview */
.project-cursor-preview {
  position: fixed; top: 0; left: 0; z-index: 500; width: 150px; height: 150px; border-radius: 50%;
  background: var(--sky-deep); color: var(--white); display: flex; align-items: center; justify-content: center;
  text-align: center; font-size: 11px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; line-height: 1.4;
  pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(0.4);
  transition: opacity 0.3s ease; will-change: transform, opacity;
}
.project-cursor-preview.active { opacity: 1; }
.project-cursor-preview .pcp-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; opacity: 0; transition: opacity 0.3s ease; }
.project-cursor-preview.has-img .pcp-img { opacity: 1; }
.project-cursor-preview.has-img span { opacity: 0; }
@media (max-width: 900px) { .project-cursor-preview { display: none; } }
@media (max-width: 700px) {
  .project-row { grid-template-columns: 36px 1fr 24px; }
  .pr-loc { display: none; }
}

/* ─── PROCESS: pinned scroll sequence ─── */
.process { padding: 110px 0 0; background: var(--offwhite); position: relative; }
.process-pin-wrap { height: 500vh; position: relative; }
.process-sticky { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; }
.process-sticky-inner { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 60px; align-items: center; width: 100%; }
.process-text-col { display: flex; flex-direction: column; }
.process-big-num {
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: clamp(64px, 11vw, 150px); line-height: 1; color: var(--sky-deep);
}
.process-big-title {
  font-family: var(--font-display); font-weight: 500; font-size: clamp(26px, 3.6vw, 46px);
  color: var(--text); margin-top: 8px;
}
.process-big-desc { font-size: 15px; color: var(--text-muted); line-height: 1.75; max-width: 380px; margin-top: 16px; font-weight: 300; }
.process-dots { display: flex; gap: 8px; margin-top: 34px; }
.pdot { width: 26px; height: 2px; background: var(--border); transition: background 0.35s ease; }
.pdot.is-active { background: var(--sky-deep); }
.process-visual-col { min-width: 0; }

@media (max-width: 900px) {
  .process-pin-wrap { height: auto; }
  .process-sticky { position: relative; height: auto; padding: 20px 0 80px; }
  .process-sticky-inner { grid-template-columns: 1fr; gap: 32px; }
  .process-big-desc { max-width: none; }
}

/* ─── WHY US: scroll-highlighted manifesto list ─── */
.why { padding: 110px 0; background: var(--white); }
.manifesto-list { margin-top: 20px; border-top: 1px solid var(--border); }
.manifesto-row {
  display: grid; grid-template-columns: 56px 1fr; column-gap: 24px; align-items: baseline;
  padding: 26px 4px; border-bottom: 1px solid var(--border);
  opacity: 0.35; transition: opacity 0.5s ease;
}
.manifesto-row.is-active { opacity: 1; }
.mf-index { font-family: var(--font-display); font-style: italic; font-size: 15px; color: var(--text-faint); align-self: start; padding-top: 6px; }
.mf-title {
  font-family: var(--font-display); font-weight: 500; font-size: clamp(22px, 3.4vw, 40px); color: var(--text);
  transition: font-weight 0.4s ease;
}
.manifesto-row.is-active .mf-title { font-weight: 600; color: var(--sky-deep); }
.mf-desc {
  grid-column: 2; font-size: 14px; color: var(--text-muted); line-height: 1.7; max-width: 520px;
  max-height: 0; overflow: hidden; opacity: 0; margin-top: 0;
  transition: max-height 0.5s ease, opacity 0.4s ease, margin-top 0.4s ease;
}
.manifesto-row.is-active .mf-desc { max-height: 100px; opacity: 1; margin-top: 10px; }
@media (max-width: 700px) {
  .manifesto-row { grid-template-columns: 32px 1fr; }
}

/* ─── PROCESS: horizontal panels (reuses the .hscroll mechanism below) ─── */
.process-hscroll .hs-panel { width: min(68vw, 760px); flex-shrink: 0; }
.process-panel { display: flex; flex-direction: column; gap: 18px; }
.process-panel-num { font-family: var(--font-display); font-style: italic; font-size: 15px; color: var(--text-faint); }
.process-panel h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(22px, 2.6vw, 30px); color: var(--text); }
.process-panel p { font-size: 13.5px; color: var(--text-muted); line-height: 1.65; max-width: 420px; }
.process-panel-media { aspect-ratio: 16/9; background: #11100D; overflow: hidden; position: relative; }
.process-panel-media video, .process-panel-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) { .process-hscroll .hs-panel { width: 82vw; } }

/* ─── ON SITE: pinned horizontal scroll gallery ─── */
/* The pin wrapper is tall; its inner sticky screen holds while the track
   translates on X, so vertical scroll reads as horizontal movement. */
.hscroll { background: var(--offwhite); position: relative; }
.hscroll-pin { position: relative; height: 340vh; }
.hscroll-viewport {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: flex; align-items: center;
}
.hscroll-track {
  display: flex; align-items: center; gap: 48px;
  padding: 0 max(40px, calc((100vw - 1240px) / 2));
  will-change: transform;
}
.hs-panel { flex: 0 0 auto; }

/* Intro panel */
.hs-panel-intro { max-width: 400px; display: flex; flex-direction: column; }
.hs-panel-intro .section-title { margin-top: 4px; }
.hs-intro-desc { font-size: 15px; line-height: 1.75; color: var(--text-muted); font-weight: 300; margin-top: 20px; max-width: 330px; }
.hs-hint {
  margin-top: 34px; font-size: 10.5px; font-weight: 500; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--text-faint);
}

/* Figures — deliberately mixed sizes for an asymmetric composition */
.hs-fig { position: relative; overflow: hidden; background: var(--offwhite-2); }
.hs-tall { width: min(38vw, 440px); height: min(74vh, 640px); }
.hs-wide { width: min(52vw, 660px); height: min(56vh, 480px); }
.hs-mid  { width: min(32vw, 380px); height: min(64vh, 560px); }
.hs-fig img, .hs-fig video { width: 100%; height: 100%; object-fit: cover; object-position: 28% 50%; display: block; transition: transform 0.7s cubic-bezier(0.22,1,0.36,1); }
.hs-fig:hover img, .hs-fig:hover video { transform: scale(1.05); }
.hs-fig figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 20px 22px;
  display: flex; align-items: baseline; gap: 12px;
  font-size: 11px; font-weight: 500; letter-spacing: 2.2px; text-transform: uppercase; color: #fff;
  background: linear-gradient(180deg, rgba(12,11,9,0) 0%, rgba(12,11,9,0.72) 100%);
}
.hs-num { font-family: var(--font-display); font-style: italic; font-size: 13px; letter-spacing: 0; opacity: 0.8; }

/* Closing panel */
.hs-panel-end { display: flex; flex-direction: column; align-items: flex-start; gap: 26px; padding-right: 40px; }
.hs-panel-end h3 { font-family: var(--font-display); font-weight: 500; font-size: clamp(30px, 4vw, 52px); line-height: 1.08; color: var(--text); }
.hs-panel-end h3 em { font-style: italic; }

/* Progress bar under the pinned screen */
.hscroll-progress {
  position: absolute; bottom: 46px; left: max(40px, calc((100vw - 1240px) / 2));
  width: 180px; height: 2px; background: var(--border);
}
.hscroll-progress span { display: block; width: 0%; height: 100%; background: var(--sky-deep); }

/* Touch / small screens: fall back to a native swipeable rail — no pinning,
   which is both simpler to use and cheaper to run on mobile. */
@media (max-width: 900px) {
  .hscroll-pin { height: auto; }
  .hscroll-viewport {
    position: static; height: auto; overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    padding: 70px 0; scrollbar-width: none;
  }
  .hscroll-viewport::-webkit-scrollbar { display: none; }
  .hscroll-track { transform: none !important; gap: 20px; padding: 0 22px; align-items: stretch; }
  .hs-panel { scroll-snap-align: center; }
  .hs-panel-intro { max-width: 78vw; justify-content: center; }
  .hs-tall, .hs-wide, .hs-mid { width: 78vw; height: 60vh; }
  .hs-panel-end { max-width: 78vw; justify-content: center; }
  .hscroll-progress { display: none; }
}

/* ─── CONTACT ─── */
.contact { padding: 120px 0 100px; background: #171613; position: relative; overflow: hidden; }
.contact-bg-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.22; }
.contact-bg-grid {
  position: absolute; inset: 0; opacity: 0.08; pointer-events: none;
  background-image: linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px);
  background-size: 56px 56px;
}
.contact::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,32,51,0.55) 0%, rgba(14,32,51,0.9) 100%);
}
.contact-inner { position: relative; z-index: 2; text-align: center; }
.contact .section-label { justify-content: center; color: var(--sky-pale); }
.contact .section-label::before { background: var(--sky-pale); }
.contact h2 { font-family: var(--font-display); font-size: clamp(32px, 4.4vw, 54px); font-weight: 600; color: var(--white); letter-spacing: -0.5px; margin-bottom: 44px; }
.contact-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.15); margin-bottom: 44px; text-align: left; }
.contact-cell { background: #1E5C82; padding: 26px 24px; }
.contact-cell .c-label { font-size: 10.5px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--sky-pale); opacity: 0.7; margin-bottom: 10px; }
.contact-cell a, .contact-cell p { font-size: 14.5px; color: var(--white); text-decoration: none; line-height: 1.55; font-weight: 500; }
.contact-cell a:hover { color: var(--sky-pale); }
/* Contact form */
.contact-form { text-align: left; max-width: 860px; margin: 0 auto 52px; }
.cf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-bottom: 28px; }
.cf-field { display: flex; flex-direction: column; gap: 8px; }
.cf-span { grid-column: 1 / -1; }
.cf-field span { font-size: 10.5px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.cf-field input, .cf-field select, .cf-field textarea {
  background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,0.25);
  color: var(--white); font-family: var(--font-body); font-size: 15px; padding: 10px 2px;
  transition: border-color 0.3s ease; border-radius: 0; -webkit-appearance: none; appearance: none;
}
.cf-field textarea { resize: vertical; min-height: 96px; }
.cf-field select option { background: #171613; color: var(--white); }
.cf-field input:focus, .cf-field select:focus, .cf-field textarea:focus { outline: none; border-bottom-color: var(--white); }
.cf-field input:user-invalid, .cf-field textarea:user-invalid { border-bottom-color: #C97A6D; }
.cf-submit { background: var(--white); color: var(--sky-deep); border-color: var(--white); }
.cf-submit:hover { background: var(--offwhite); }
.cf-note { margin-top: 16px; font-size: 13px; color: rgba(255,255,255,0.7); min-height: 20px; }
@media (max-width: 700px) { .cf-grid { grid-template-columns: 1fr; } }

.contact-map-wrap { border: 1px solid rgba(255,255,255,0.15); margin-bottom: 44px; }
.contact-map-wrap iframe { width: 100%; height: 320px; border: 0; display: block; filter: grayscale(0.3) invert(0.92) contrast(0.9); }
.contact .btn-primary { background: var(--white); color: var(--sky-deep); border-color: var(--white); }
.contact .btn-primary:hover { background: var(--sky-pale); }

/* ─── FOOTER ─── */
.footer { background: #141310; padding: 90px 0 0; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 64px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.footer-col { display: flex; flex-direction: column; gap: 12px; }
.footer-col a { font-size: 13.5px; color: rgba(255,255,255,0.6); text-decoration: none; transition: color 0.25s ease; }
.footer-col a:hover { color: var(--white); }
.footer-col p { font-size: 13.5px; color: rgba(255,255,255,0.5); line-height: 1.7; }
.footer-col-title { font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.35); margin-bottom: 6px; }
.footer-brand { gap: 18px; }
.footer-logo-mark { width: 42px; height: 42px; }
.footer-hours { margin-top: 4px; color: rgba(255,255,255,0.4) !important; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; padding: 26px 0; }
.footer-copy { font-size: 11.5px; color: rgba(255,255,255,0.35); letter-spacing: 0.5px; }
.footer-credit { font-size: 11.5px; color: rgba(255,255,255,0.35); letter-spacing: 0.5px; }

/* ─── SCROLL REVEAL ─── */
.reveal {
  opacity: 0; transform: translateY(22px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  transition-delay: var(--reveal-delay, 0s);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ─── REDUCED MOTION ─── */
/* Motion-sensitive visitors get the full content as a calm, static page:
   no pinning, no parallax, no scaling — everything simply visible. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .strip-track { animation: none; }
  .reveal { transition: none; opacity: 1; transform: none; }
  [data-appear-stage], [data-draw] { transition: none; }
  [data-mask] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  /* Horizontal gallery becomes a plain swipeable rail, never pinned */
  .hscroll-pin { height: auto; }
  .hscroll-viewport { position: static; height: auto; overflow-x: auto; padding: 60px 0; }
  .hscroll-track { transform: none !important; }
  .hscroll-progress { display: none; }
  .hero-stack .word { opacity: 1 !important; transform: none !important; }
  .scroll-rail { display: none; }
  .project-cursor-preview { display: none; }
  /* Un-pin the process section so all stages read as one static block */
  .process-pin-wrap { height: auto; }
  .process-sticky { position: relative; height: auto; padding: 20px 0 80px; }
  /* Services: show every description rather than hiding behind hover */
  .sv-desc { max-height: none; opacity: 1; margin-top: 8px; }
  .service-row h3 { color: var(--text); }
  /* Manifesto: all rows legible, none dimmed */
  .manifesto-row { opacity: 1; }
  .mf-desc { max-height: none; opacity: 1; margin-top: 10px; }
}

/* ─── RESPONSIVE ─── */
@media (max-width: 1100px) {
  .contact-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; gap: 44px; }
  .about-diagram { max-width: 420px; margin: 0 auto; }
}
@media (max-width: 640px) {
  .hero-rail { display: none; }
  .hero-foot { flex-direction: column; align-items: center; gap: 6px; text-align: center; bottom: 22px; }
}
@media (max-width: 860px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .stat-band-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 12px; }
  .stat-cell + .stat-cell::before { display: none; }
  .stat-cell:nth-child(3), .stat-cell:nth-child(4) { border-top: 1px solid var(--border); padding-top: 24px; }
  .image-break-caption { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 768px) {
  .nav-links { display: none; }
  .hamburger { display: flex; }
  .contact-grid { grid-template-columns: 1fr; }
  .hero h1 { letter-spacing: -0.5px; }
  .section-head-row { flex-direction: column; align-items: flex-start; }
}

/* sky-coloured fade at the photo's top edge so the slate dome flows into the photo's sky */
.quote-media::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 38%; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, #6A829F 0%, rgba(106,130,159,0.55) 35%, rgba(106,130,159,0) 100%);
}


/* ─── PROJECTS: immersive scattered gallery ─── */
.pg { position: relative; background: #0d0e10; color: var(--dusk-text); }
.pg-bg { position: sticky; top: 0; height: 100vh; margin-bottom: -100vh; z-index: 0; overflow: hidden; pointer-events: none; }
.pg-bg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pg-bg-scrim { position: absolute; inset: 0; background:
  linear-gradient(180deg, rgba(13,14,16,0.6) 0%, rgba(13,14,16,0.36) 45%, rgba(13,14,16,0.62) 100%); }
.pg-inner { position: relative; z-index: 1; padding: 140px 6vw 160px; }
.pg-head { max-width: 560px; }
.pg-eyebrow { display: block; font-size: 11px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; }
.pg-head h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(22px, 2.4vw, 34px); letter-spacing: 6px; }
.pg-head p { margin-top: 10px; font-size: 14px; color: var(--dusk-muted); font-weight: 300; }
.pg-field { position: relative; width: 100%; margin-top: 40px; }
.pg-item {
  position: absolute; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; color: inherit;
  opacity: 0; transform: translateY(26px);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(.2,.7,.2,1);
}
.pg-item.in { opacity: 1; transform: none; }
.pg-frame {
  position: relative; display: block; width: 100%; height: 100%; overflow: hidden; background: #1a1815;
  border: 1px solid rgba(242,230,208,0.16); box-shadow: 0 14px 34px rgba(0,0,0,0.35);
  transition: transform 0.55s cubic-bezier(.2,.7,.2,1), box-shadow 0.55s ease, border-color 0.4s ease;
  animation: pgFloat 9s ease-in-out infinite; animation-delay: var(--d, 0s);
}
@keyframes pgFloat { 0%,100% { translate: 0 0; } 50% { translate: 0 -7px; } }
.pg-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pg-info {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 12px 10px;
  background: linear-gradient(to top, rgba(8,9,11,0.88), rgba(8,9,11,0));
  display: flex; flex-direction: column; gap: 2px; opacity: 0; transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.pg-info b { font-family: var(--font-display); font-weight: 500; font-size: 15px; }
.pg-info span { font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--dusk-muted); }
.pg-cta { position: absolute; top: 8px; right: 8px; font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase; padding: 4px 8px; border: 1px solid rgba(242,230,208,0.5); background: rgba(8,9,11,0.5); opacity: 0; transition: opacity 0.4s ease; }
@media (hover: hover) {
  .pg-item:hover { z-index: 5; }
  .pg-item:hover .pg-frame { transform: scale(1.07); border-color: rgba(242,230,208,0.55); box-shadow: 0 26px 60px rgba(0,0,0,0.55); }
  .pg-item:hover .pg-info, .pg-item:hover .pg-cta { opacity: 1; transform: none; }
}
.pg-item:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; z-index: 5; }
.pg-item:focus-visible .pg-info, .pg-item:focus-visible .pg-cta { opacity: 1; transform: none; }
.pg-item.is-open { visibility: hidden; }
/* modal */
.pg-modal { position: fixed; inset: 0; z-index: 4000; }
.pg-modal[hidden] { display: none; }
.pg-backdrop { position: absolute; inset: 0; background: rgba(8,9,11,0.66); opacity: 0; cursor: zoom-out; }
.pg-hero { position: fixed; margin: 0; overflow: hidden; background: #1a1815; box-shadow: 0 40px 120px rgba(0,0,0,0.6); border: 1px solid rgba(242,230,208,0.3); }
.pg-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pg-detail { position: fixed; opacity: 0; color: var(--dusk-text); display: flex; flex-direction: column; gap: 6px; }
.pg-detail-cat { font-size: 11px; font-weight: 600; letter-spacing: 2.6px; text-transform: uppercase; color: var(--gold); }
.pg-detail h3 { font-family: var(--font-display); font-weight: 500; font-size: clamp(22px, 2.8vw, 38px); }
.pg-detail p { font-size: 13px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--dusk-muted); }
.pg-detail small { font-size: 11px; font-style: italic; color: rgba(242,230,208,0.45); }
.pg-min {
  position: fixed; opacity: 0; display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 10px 16px; font: 600 11px var(--font-body, inherit); letter-spacing: 2px; text-transform: uppercase; color: #fff;
  background: rgba(8,9,11,0.72); border: 1px solid rgba(242,230,208,0.6); transition: background 0.3s ease;
}
.pg-min:hover { background: rgba(224,168,88,0.25); }
@media (max-width: 1024px) { .pg-inner { padding: 120px 5vw 130px; } }
@media (max-width: 700px) { .pg-info b { font-size: 12px; } .pg-info { padding: 20px 8px 8px; } }
@media (prefers-reduced-motion: reduce) { .pg-frame { animation: none; } .pg-item { transition: opacity 0.2s ease; transform: none; } }

/* construction props living in the fixed background layer */
.pg-crane { position: absolute; bottom: 0; width: auto; transform-origin: 50% 100%; filter: brightness(0.62) contrast(1.05) saturate(0.9); animation: pgSway 11s ease-in-out infinite; }
.pg-crane-a { right: -3vw; height: 96vh; opacity: 0.92; }
.pg-crane-b { left: -6vw; height: 66vh; opacity: 0.5; transform: scaleX(-1); animation-name: pgSwayB; animation-delay: -4s; filter: brightness(0.45) contrast(1.05) saturate(0.8) blur(0.6px); }
@keyframes pgSway { 0%,100% { rotate: -0.5deg; } 50% { rotate: 0.6deg; } }
@keyframes pgSwayB { 0%,100% { rotate: 0.4deg; } 50% { rotate: -0.5deg; } }
.pg-dozer { position: absolute; left: 0; bottom: 2.5vh; width: min(34vw, 460px); height: auto; filter: brightness(0.8) drop-shadow(0 16px 18px rgba(0,0,0,0.55)); transform: translateX(110vw); will-change: transform; }
@media (max-width: 700px) { .pg-crane-a { height: 62vh; right: -14vw; opacity: 0.6; } .pg-crane-b { display: none; } .pg-dozer { width: 52vw; } }
@media (prefers-reduced-motion: reduce) { .pg-crane { animation: none; } .pg-dozer { transform: translateX(8vw); } }

.pg-crane-b { display: none; }

/* depth layers behind the horizontal tracks */
.hscroll-track { position: relative; z-index: 1; }
.hs-deco { position: absolute; top: 0; left: 0; height: 100%; pointer-events: none; z-index: 0; will-change: transform; }
.hs-deco-far { background: repeating-linear-gradient(90deg, rgba(22,21,26,0.045) 0 1px, transparent 1px 120px), repeating-linear-gradient(0deg, rgba(22,21,26,0.045) 0 1px, transparent 1px 120px); }
.hs-far-crane { position: absolute; bottom: 0; height: 82vh; width: auto; opacity: 0.11; filter: grayscale(1); }
.hs-hang { position: absolute; top: 0; display: block; transform-origin: 50% 0; animation: hsSway 6.5s ease-in-out infinite; animation-delay: var(--dl, 0s); }
.hs-hang img { display: block; height: 18vh; width: auto; }
.hs-crane-rig { position: absolute; top: -2vh; height: 66vh; display: block; }
.hs-rig-crane { height: 100%; width: auto; display: block; opacity: 0.38; }
.hs-rig-load { left: 94%; top: 37%; margin-left: -9px; }
.hs-rig-load img { height: 11vh; opacity: 0.85; }
@keyframes hsSway { 0%,100% { rotate: -3deg; } 50% { rotate: 3deg; } }
@media (prefers-reduced-motion: reduce) { .hs-hang { animation: none; } }

/* hero film: two stacked videos crossfade; the still photo stays underneath as poster/fallback */
.hero-bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; }
.hero-bg-video.is-on { opacity: 1; }

/* ─── SERVICES: full-screen ─── */
.svx { background: #0f0e0c; color: #fff; --svx-gold: #F4E3BF; }
.svx-pin { position: relative; }
.svx-stage { position: relative; height: 100vh; min-height: 560px; overflow: hidden; }
.svx-bg { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease; }
.svx-bg img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.08); transition: transform 2.2s cubic-bezier(.2,.7,.2,1); }
.svx-bg.is-active { opacity: 1; }
.svx-bg.is-active img { transform: scale(1); }
.svx-scrim { position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(8,8,8,0.1) 35%, rgba(8,8,8,0.62) 100%),
  linear-gradient(0deg, rgba(8,8,8,0.62) 0%, rgba(8,8,8,0) 45%),
  linear-gradient(180deg, rgba(8,8,8,0.4) 0%, rgba(8,8,8,0) 22%); }
.svx-head { position: absolute; top: 120px; left: 6vw; right: 6vw; display: flex; justify-content: flex-start; gap: 22px; font-size: 11px; letter-spacing: 2.6px; text-transform: uppercase; }
.svx-head span:first-child { color: var(--svx-gold); font-weight: 600; }
.svx-count { color: rgba(255,255,255,0.8); }
.svx-list { position: absolute; right: 8vw; top: 50%; transform: translateY(-50%); list-style: none; display: flex; flex-direction: column; gap: 6px; padding-left: 28px; border-left: 1px solid rgba(255,255,255,0.28); }
.svx-item { display: flex; align-items: baseline; gap: 14px; background: none; border: 0; padding: 4px 0; cursor: pointer; text-align: left; color: rgba(255,255,255,0.5); transition: color 0.4s ease, transform 0.4s ease; position: relative; }
.svx-item::before { content: ''; position: absolute; left: -29px; top: 50%; width: 1px; height: 0; background: #fff; transition: height 0.4s ease, top 0.4s ease; }
.svx-n { font-size: 11px; letter-spacing: 2px; opacity: 0; transition: opacity 0.4s ease; }
.svx-t { font-family: 'Instrument Serif', var(--font-display); font-size: clamp(26px, 3.3vw, 52px); line-height: 1.12; text-transform: uppercase; letter-spacing: 0.01em; }
.svx-item:hover { color: rgba(255,255,255,0.85); }
.svx-item.is-active { color: #fff; transform: translateX(-6px); }
.svx-item.is-active::before { height: 100%; top: 0; }
.svx-item.is-active .svx-n { opacity: 1; }
.svx-item:focus-visible { outline: 2px solid var(--svx-gold); outline-offset: 4px; }
.svx-caption { position: absolute; left: 9vw; bottom: 9vh; max-width: min(46vw, 720px); }
.svx-cap-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; margin-bottom: 14px; }
.svx-cap-text { font-family: 'Instrument Serif', var(--font-display); font-size: clamp(22px, 2.5vw, 38px); line-height: 1.18; text-transform: uppercase; }
.svx-cta { position: absolute; right: 8vw; bottom: 8vh; width: 150px; height: 150px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.55); display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; text-decoration: none; font-size: 11px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; line-height: 1.5; transition: background 0.4s ease, color 0.4s ease, transform 0.4s ease; }
.svx-cta:hover { background: #fff; color: #111; transform: scale(1.05); }
@media (min-width: 901px) {
  .svx-pin.is-pinned { height: calc(100vh + (var(--n, 8) - 1) * 62vh); }
  .svx-pin.is-pinned .svx-stage { position: sticky; top: 0; }
}
@media (max-width: 900px) {
  .svx-list { right: 6vw; left: 6vw; top: 120px; transform: none; padding-left: 0; border-left: 0; flex-direction: row; flex-wrap: wrap; gap: 4px 16px; }
  .svx-item::before { display: none; }
  .svx-t { font-size: 17px; }
  .svx-item.is-active { transform: none; text-decoration: underline; text-underline-offset: 6px; }
  .svx-head { top: 92px; }
  .svx-caption { left: 6vw; right: 6vw; max-width: none; bottom: 16vh; }
  .svx-cap-text { font-size: 20px; }
  .svx-cta { width: 104px; height: 104px; right: 6vw; bottom: 4vh; font-size: 9.5px; }
}
@media (prefers-reduced-motion: reduce) { .svx-bg, .svx-bg img { transition: none; } }

/* ─── ABOUT: moving construction props ─── */
.about { position: relative; overflow: hidden; }
.about .container { position: relative; z-index: 1; }
.about-deco { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.ab-grid { position: absolute; inset: -60px 0; background:
  repeating-linear-gradient(90deg, rgba(22,21,26,0.045) 0 1px, transparent 1px 110px),
  repeating-linear-gradient(0deg, rgba(22,21,26,0.045) 0 1px, transparent 1px 110px); will-change: transform; }
.ab-crane { position: absolute; right: -2vw; top: 4%; height: 62%; width: auto; opacity: 0.2; filter: grayscale(0.6); transform-origin: 50% 100%; animation: abSway 12s ease-in-out infinite; }
.ab-load { position: absolute; right: 5vw; top: 10%; display: block; transform-origin: 50% 0; animation: abSwing 5.5s ease-in-out infinite; opacity: 0.7; }
.ab-load img { display: block; height: 15vh; width: auto; }
.ab-hang { position: absolute; top: 0; display: block; transform-origin: 50% 0; animation: abSwing 6.5s ease-in-out infinite; opacity: 0.8; }
.ab-hang img { display: block; height: 17vh; width: auto; }
.ab-hang-1 { left: 3vw; }
.ab-hang-2 { left: 47%; animation-delay: -2.4s; opacity: 0.55; }
.ab-hang-2 img { height: 12vh; }
.ab-ground { position: absolute; left: 0; right: 0; bottom: 0; height: 22px; background: repeating-linear-gradient(90deg, rgba(22,21,26,0.35) 0 14px, transparent 14px 28px); opacity: 0.18; }
.ab-dozer { position: absolute; bottom: 14px; left: 0; width: min(20vw, 260px); height: auto; opacity: 0.9; animation: abDrive 38s linear infinite; }
@keyframes abSway { 0%,100% { rotate: -0.6deg; } 50% { rotate: 0.7deg; } }
@keyframes abSwing { 0%,100% { rotate: -3.5deg; } 50% { rotate: 3.5deg; } }
@keyframes abDrive { from { transform: translateX(110vw); } to { transform: translateX(-30vw); } }
@media (max-width: 700px) { .ab-crane, .ab-load { display: none; } .ab-dozer { width: 36vw; } }
@media (prefers-reduced-motion: reduce) { .ab-crane, .ab-load, .ab-hang, .ab-dozer { animation: none; } .ab-dozer { transform: translateX(60vw); } }

.svx-tx { display: flex; flex-direction: column; gap: 2px; }
.svx-brief { font-size: 11.5px; letter-spacing: 1.3px; text-transform: uppercase; opacity: 0.5; transition: opacity 0.4s ease; }
.svx-item.is-active .svx-brief { opacity: 0.95; }
.svx-t { font-size: clamp(24px, 2.9vw, 46px); }
.svx-list { gap: 10px; }
@media (max-width: 900px) { .svx-brief { display: none; } }

/* ─── TRUSTED BY: auto-scrolling logo marquee ─── */
.trust { background: var(--offwhite); padding: 84px 0 96px; overflow: hidden; }
.trust-head { text-align: center; margin-bottom: 44px; }
.trust-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--text-muted); }
.trust-marquee { position: relative; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); }
.trust-track { list-style: none; display: flex; width: max-content; animation: trustScroll 52s linear infinite; }
.trust-marquee:hover .trust-track { animation-play-state: paused; }
.trust-card {
  flex: 0 0 auto; width: 250px; height: 150px; margin-right: 24px; display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid rgba(22,21,26,0.07); border-radius: 18px; box-shadow: 0 10px 30px rgba(22,21,26,0.05); padding: 22px 26px;
}
.trust-card img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.trust-card.is-gold { background: #82704c; padding: 14px; }
.trust-card.is-gold img { max-height: 100%; }
@keyframes trustScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 700px) { .trust { padding: 60px 0 70px; } .trust-card { width: 190px; height: 118px; margin-right: 16px; padding: 16px 18px; } }
@media (prefers-reduced-motion: reduce) { .trust-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; gap: 16px; padding: 0 24px; } .trust-card { margin-right: 0; } .trust-card:nth-child(n+9) { display: none; } .trust-marquee { -webkit-mask-image: none; mask-image: none; } }

/* ─── MOBILE POLISH ─── */
@media (max-width: 768px) {
  /* rounder dome on a tall phone screen (JS uses the same 58%) */
  .dome-shape::before { border-radius: 50% 50% 0 0 / 58% 58% 0 0; }
  /* less dead slate under the slideshow */
  .slideshow { padding-bottom: 150px; }
}
@media (max-width: 900px) {
  /* services: darker scrim so the list reads on bright photos */
  .svx-scrim { background:
    linear-gradient(180deg, rgba(8,8,8,0.72) 0%, rgba(8,8,8,0.55) 42%, rgba(8,8,8,0.1) 68%),
    linear-gradient(0deg, rgba(8,8,8,0.78) 0%, rgba(8,8,8,0) 46%); }
  .svx-stage { height: 100vh; height: 100svh; min-height: 620px; }
  .svx-list { top: 108px; }
  .svx-caption { bottom: 7vh; }
}
@media (max-width: 700px) {
  .pg-inner { padding-bottom: 160px; }
  .pg-head h2 { letter-spacing: 4px; }
}
@media (max-width: 768px) { .slideshow-sky { height: 170px; } }
@media (max-width: 900px) {
  .svx-head { top: 132px; }
  .svx-list { top: 168px; }
  .svx-caption { right: 124px; }
}