/* ══════════════════════════════════════════════
   Luckiest Homes · style.css  (clean build)
   All layout bugs fixed · Performance optimised
══════════════════════════════════════════════ */

/* ── Design tokens ── */
:root {
  --black:        #0a0a0a;
  --dark:         #111111;
  --dark-alt:     #181818;
  --dark-card:    #141414;
  --gold:         #1a9cb8;
  --gold-light:   #45c2da;
  --gold-dark:    #0e7a94;
  --white:        #ffffff;
  --off-white:    #f5f0e8;
  --gray:         #555555;
  --gray-lt:      #999999;
  --glass:        rgba(255,255,255,0.04);
  --glass-border: rgba(255,255,255,0.10);
  --gold-glass:   rgba(26,156,184,0.12);

  --font-heading: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-display: 'Bebas Neue', Impact, sans-serif;

  --radius:    12px;
  --radius-lg: 20px;
  --ease:      cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --trans:     all 0.4s var(--ease);
  --trans-fast:all 0.2s ease;

  --max-w:  1280px;
  --sec-py: 110px;

  /* How much each section covers the 3D backdrop behind it.
     ONE KNOB: lower = more visible boxes, higher = calmer/darker.
     .70 is punchy, .86 is barely-there. */
  --veil: .78;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Grid items default to `min-width: auto`, meaning a track can never shrink
   below its content's min-content width. One unbreakable string — the email
   address — was therefore forcing the contact column to 328px inside a 272px
   phone, pushing text off the edge. Every stacked grid here wants to shrink. */
.about-grid > *, .contact-grid > *, .reach-grid > *,
.footer-grid > *, .services-grid > * { min-width: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; font-size: 16px; }
body {
  background: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;   /* crisper text on WebKit/Chrome (macOS) */
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;   /* no grey flash when tapping links on iOS/Android */
  text-rendering: optimizeLegibility;
}
body.no-scroll {
  overflow: hidden;
  /* iOS Safari scrolls the page behind an overlay despite overflow:hidden.
     Pinning the body is the only thing that reliably holds it; lockScroll()
     in main.js sets the matching `top` offset so the place is not lost. */
  position: fixed;
  width: 100%;
}
img   { display: block; width: 100%; height: 100%; object-fit: cover; }
a     { text-decoration: none; color: inherit; }
ul    { list-style: none; }
button{ cursor: pointer; background: none; border: none; font-family: inherit; color: inherit; -webkit-appearance: none; appearance: none; }
input, select, textarea { font-family: inherit; }

/* Inline SVG icons (replaced Font Awesome) — scale with font-size, take text colour */
.icon {
  width: 1em; height: 1em;
  fill: currentColor;
  display: inline-block;
  vertical-align: -0.125em;
  flex-shrink: 0;
}

.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 40px;
}
section { padding: var(--sec-py) 0; }

/* ── Preloader ── */
#preloader {
  position: fixed; inset: 0;
  background: var(--black);
  z-index: 99998;
  display: flex;
  align-items: center;
  justify-content: center;
}
.preloader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  transition: opacity .28s ease, transform .28s ease;
}
/* Two-phase exit. Fading #preloader as a single unit made its opaque black
   backdrop translucent at the same rate as its contents, so for ~250ms the
   logo and "We are building your home" sat directly on top of the hero
   headline. Phase 1 fades only the contents, with the backdrop still solid;
   phase 2 (set from JS) fades the now-empty backdrop. */
#preloader.exit .preloader-inner {
  opacity: 0;
  transform: translateY(-14px);
}
.preloader-logo-img {
  width: 260px;
  max-width: 72vw;
  height: auto;
  display: block;
  animation: logoIn 1s var(--ease) both;
}
@keyframes logoIn {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.preloader-bar-wrap {
  width: 200px; height: 2px;
  background: rgba(255,255,255,.1);
  border-radius: 2px;
  overflow: hidden;
}
.preloader-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold-light));
  border-radius: 2px;
  transition: width .05s linear;
}
.preloader-phrase {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-style: italic;
  color: var(--white);
  text-align: center;
  min-height: 1.5em;
  max-width: 84vw;
  transition: opacity .35s ease;
}
.preloader-phrase.swap { opacity: 0; }
.preloader-percent {
  font-size: .72rem;
  letter-spacing: .18em;
  color: var(--gray-lt);
}

/* ── Navbar ── */
#navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 26px 0;
  transition: padding .4s var(--ease);
}
/* The scrolled backdrop lives on a pseudo-element, NOT on #navbar itself.
   `backdrop-filter` on an element makes it the containing block for every
   `position: fixed` descendant — which would trap the mobile .nav-menu
   overlay inside the navbar's own box instead of the viewport. */
#navbar::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background: rgba(10,10,10,.88);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border-bottom: 1px solid var(--glass-border);
  transition: opacity .4s ease;
}
#navbar.scrolled { padding: 14px 0; }
#navbar.scrolled::before { opacity: 1; }
.nav-container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-display);
  font-size: 1.6rem;
  letter-spacing: .15em;
}
.nav-logo-mark { height: 40px; width: auto; display: block; }
.logo-arc  { color: var(--gold); }
.logo-vista{ color: var(--white); }

.nav-menu {
  display: flex;
  align-items: center;
  gap: 38px;
}
.nav-link {
  font-size: .78rem;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
  position: relative;
  transition: color .25s;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0;
  width: 0; height: 1px;
  background: var(--gold);
  transition: width .3s ease;
}
.nav-link:hover { color: var(--white); }
.nav-link:hover::after { width: 100%; }
/* current section (set by scroll-spy in main.js) */
.nav-link.active { color: var(--white); }
.nav-link.active::after { width: 100%; }
.nav-link-cta.active::after { width: 0; } /* CTA button keeps its box, no underline */
.nav-link-cta {
  color: var(--gold);
  border: 1px solid var(--gold);
  padding: 10px 24px;
  border-radius: 4px;
  transition: var(--trans);
}
.nav-link-cta:hover { background: var(--gold); color: var(--black); }
.nav-link-cta::after { display: none; }

.hamburger { display: none; flex-direction: column; gap: 5px; padding: 8px; z-index: 1001; }
.hamburger span { display: block; width: 26px; height: 1.5px; background: var(--white); transition: var(--trans); }
.hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 34px;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-radius: 4px;
  border: 1px solid transparent;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: color .35s ease, transform .3s var(--ease);
}
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  transform: scaleX(0);
  transform-origin: left;
  z-index: -1;
  transition: transform .4s var(--ease);
}
.btn-gold { background: var(--gold); color: var(--black); border-color: var(--gold); }
.btn-gold::before { background: var(--gold-light); }
.btn-gold:hover::before { transform: scaleX(1); }

.btn-outline { background: transparent; color: var(--white); border-color: rgba(255,255,255,.35); }
.btn-outline::before { background: var(--gold-glass); }
.btn-outline:hover { border-color: var(--gold); color: var(--gold); }
.btn-outline:hover::before { transform: scaleX(1); }

/* ── Section shared ── */
.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}
.section-tag::before {
  content: '';
  display: block;
  width: 28px; height: 1px;
  background: var(--gold);
  flex-shrink: 0;
}
.section-heading {
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 5vw, 4.6rem);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin-bottom: 22px;
}
.section-heading em { font-style: italic; color: var(--gold); }
.section-subtext { font-size: .95rem; color: var(--gray-lt); max-width: 500px; }
.section-header { text-align: center; margin-bottom: 68px; }
.section-header .section-tag { justify-content: center; }
.section-header .section-tag::before { display: none; }
.section-header .section-tag::after {
  content: ''; display: block;
  width: 28px; height: 1px;
  background: var(--gold);
}
.section-header .section-subtext { margin: 0 auto; }

/* Fade-up animation — starts invisible, JS adds .visible on scroll.
   Hard fallback: everything becomes visible after 2s regardless. */
.fade-up {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .8s ease, transform .9s var(--ease);
}
.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Staggered group reveal ──
   .fade-up on a container reveals the whole block at once, which reads as a
   single lump. .stagger walks its direct children in instead, so cards,
   steps and lists arrive one after another. Observed by initFadeUp. */
.stagger > * {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .6s ease, transform .7s var(--ease);
}
.stagger.visible > * { opacity: 1; transform: none; }
.stagger.visible > *:nth-child(1) { transition-delay: .04s; }
.stagger.visible > *:nth-child(2) { transition-delay: .13s; }
.stagger.visible > *:nth-child(3) { transition-delay: .22s; }
.stagger.visible > *:nth-child(4) { transition-delay: .31s; }
.stagger.visible > *:nth-child(5) { transition-delay: .40s; }
.stagger.visible > *:nth-child(6) { transition-delay: .49s; }
.stagger.visible > *:nth-child(7) { transition-delay: .58s; }
.stagger.visible > *:nth-child(8) { transition-delay: .67s; }
.stagger.visible > *:nth-child(9) { transition-delay: .76s; }
/* Anything past the ninth shares the last delay rather than cascading for
   ever — the projects grid grows as work is added. */
.stagger.visible > *:nth-child(n+10) { transition-delay: .85s; }

/* ── HERO ── */
#hero {
  position: relative;
  height: 100vh;
  height: 100svh;   /* small-viewport-height: no jump when the mobile address bar shows/hides; old browsers keep 100vh */
  min-height: 660px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* top: navbar clearance  bottom: keeps buttons above stats strip */
  padding: 80px 0 92px;
}
/* Lives on <body>, not inside #hero — fixed so it sits behind every section
   while the page scrolls over it. `fixed` also means it never repaints on
   scroll; the compositor just reuses the layer. */
#three-canvas {
  position: fixed;
  inset: 0;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 0;
  pointer-events: none;
}
/* Everything that isn't the backdrop sits above it. */
main, #footer { position: relative; z-index: 1; }
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(135deg, rgba(10,10,10,.88) 0%, rgba(10,10,10,.45) 55%, rgba(10,10,10,.78) 100%);
}
.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 20px;
  max-width: 900px;
}
.hero-tag {
  display: inline-block;
  font-size: .7rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid rgba(26,156,184,.4);
  padding: 7px 20px;
  border-radius: 30px;
  margin-bottom: 30px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: heroFadeUp .8s .1s ease both;
}

.hero-title {
  font-family: var(--font-heading);
  /* min(8vw, 10vh) prevents overflow on short-viewport laptops (1366×768 etc.) */
  font-size: clamp(2.8rem, min(8vw, 10.5vh), 7.5rem);
  font-weight: 300;
  /* Cormorant's descenders overshoot a 1.0 line box, and `overflow: hidden`
     (needed to mask the line-reveal) was shaving the bottom off "Tomorrow's". */
  line-height: 1.12;
  margin-bottom: 26px;
  overflow: hidden;
}
.hero-line {
  display: block;
  animation: heroFadeUp .8s ease both;
}
.hero-line:nth-child(1) { animation-delay: .20s; }
.hero-line:nth-child(2) { animation-delay: .34s; font-style: italic; color: var(--gold); }
.hero-line:nth-child(3) { animation-delay: .48s; }
@keyframes heroFadeUp { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: none; } }

.hero-subtitle {
  font-size: clamp(.88rem, 1.4vw, 1.05rem);
  color: rgba(255,255,255,.62);
  letter-spacing: .05em;
  line-height: 2;
  margin-bottom: 44px;
  animation: heroFadeUp .8s .62s ease both;
}

.hero-cta {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  animation: heroFadeUp .8s .78s ease both;
}

/* ── MARQUEE ── */
.marquee-wrapper { overflow: hidden; background: var(--gold); padding: 14px 0; }
.marquee-track {
  display: flex;
  align-items: center;
  gap: 36px;
  white-space: nowrap;
  width: max-content;
  animation: marqueeScroll 28s linear infinite;
  will-change: transform;
}
.marquee-track span {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--black);
}
/* Drawn in CSS, not a glyph — the old ✦ (U+2726) has no coverage in the
   loaded webfonts, so phones fell back to tofu / "?" boxes. */
.marquee-dot {
  flex: none;
  width: 5px; height: 5px;
  background: var(--black);
  opacity: .4;
  border-radius: 1px;
  transform: rotate(45deg);
}
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── ABOUT ── */
#about { background: rgba(17,17,17,var(--veil)); }
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}

/* FIX: position:relative needed for absolutely-placed children */
.about-image-side { position: relative; }

.about-img-frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/5;
}
.about-main-img { transition: transform .8s ease; }
.about-img-frame:hover .about-main-img { transform: scale(1.05); }

.about-secondary-img-wrap {
  position: absolute;
  top: -28px; right: -28px;
  width: 44%;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 1;
  box-shadow: 0 20px 55px rgba(0,0,0,.5);
  border: 3px solid var(--dark);
  z-index: 2;
}
.about-content-side { padding-right: 16px; }
.about-text {
  color: rgba(255,255,255,.62);
  margin-bottom: 18px;
  font-size: .93rem;
  line-height: 1.9;
}

/* ── SERVICES ── */
#services { background: rgba(10,10,10,var(--veil)); }
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.service-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 3/4;
  will-change: transform;
}
.service-card-bg {
  position: absolute;
  inset: -5%;
  background-size: cover;
  background-position: center;
  transition: transform .7s ease;
}
.service-card:hover .service-card-bg { transform: scale(1.07); }
.service-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(10,10,10,.97) 0%,
    rgba(10,10,10,.50) 60%,
    rgba(10,10,10,.18) 100%
  );
  transition: background .4s ease;
}
.service-card:hover .service-card-overlay {
  background: linear-gradient(
    to top,
    rgba(10,10,10,.98) 0%,
    rgba(10,10,10,.68) 60%,
    rgba(10,10,10,.32) 100%
  );
}
.service-card-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 34px 30px;
}
.service-icon {
  width: 52px; height: 52px;
  flex: none;              /* never let the flex column squash it into an ellipse */
  border: 1px solid rgba(26,156,184,.4);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem;
  color: var(--gold);
  margin-bottom: 14px;
  background: var(--gold-glass);
  transition: var(--trans);
}
.service-card:hover .service-icon { background: var(--gold); color: var(--black); border-color: var(--gold); }
.service-num {
  font-family: var(--font-display);
  font-size: .9rem;
  color: var(--gold);
  letter-spacing: .1em;
  display: block;
  margin-bottom: 7px;
}
.service-title {
  font-family: var(--font-heading);
  font-size: 1.9rem;
  font-weight: 500;
  color: var(--white);
  margin-bottom: 12px;
  line-height: 1.2;
}
.service-desc, .service-list {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .5s ease, opacity .5s ease;
}
.service-card:hover .service-desc { max-height: 120px; opacity: 1; }
.service-desc {
  font-size: .83rem;
  color: rgba(255,255,255,.58);
  line-height: 1.8;
  margin-bottom: 14px;
}
.service-card:hover .service-list { max-height: 150px; opacity: 1; transition-delay: .05s; }
.service-list { display: flex; flex-direction: column; gap: 5px; margin-bottom: 22px; }
.service-list li {
  font-size: .73rem;
  color: rgba(255,255,255,.48);
  padding-left: 14px;
  position: relative;
  letter-spacing: .05em;
}
.service-list li::before { content: '—'; position: absolute; left: 0; color: var(--gold); }
.service-link {
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--gold);
  display: flex; align-items: center; gap: 8px;
  transition: gap .3s ease;
}
.service-link:hover { gap: 14px; }
.service-card-featured {
  box-shadow: 0 0 0 2px rgba(26,156,184,.25);
}
.service-card-featured::before {
  content: 'Featured';
  position: absolute;
  top: 18px; right: 18px;
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--black);
  background: var(--gold);
  padding: 5px 11px;
  border-radius: 20px;
  z-index: 3;
}


/* ── PROJECTS GALLERY ── */
#projects { background: rgba(10,10,10,var(--veil)); }

/* Masonry-ish grid. `grid-auto-rows` + a row span per card size lets a card
   be tall or wide without a JS layout pass. Three fixed columns rather than
   auto-fit: auto-fit opened a fourth column on wide screens, and with only a
   few projects that left an empty square staring back. `dense` lets a later
   small card backfill any hole a wide one leaves. */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* 220px x 2 rows + the 22px gap gives a near-square card at container width,
     which is the fairest crop for covers that are a mix of portrait and
     landscape. */
  grid-auto-rows: 220px;
  grid-auto-flow: dense;
  gap: 22px;
}
.projects-grid > * { min-width: 0; }

.project-card {
  position: relative;
  grid-row: span 2;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  background: var(--dark-card);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: transform .5s var(--ease), border-color .4s ease, box-shadow .5s var(--ease);
}
.project-card.size-tall { grid-row: span 3; }
.project-card.size-wide { grid-row: span 2; grid-column: span 2; }

.project-card:hover,
.project-card:focus-visible {
  transform: translateY(-6px);
  border-color: rgba(26,156,184,.55);
  box-shadow: 0 26px 60px rgba(0,0,0,.55);
  outline: none;
}

.project-card-media { position: absolute; inset: 0; }
.project-card-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
  transition: transform .7s var(--ease), filter .5s ease;
  filter: saturate(.92);
}
.project-card:hover .project-card-media img,
.project-card:focus-visible .project-card-media img {
  transform: scale(1.09);
  filter: saturate(1.05);
}

/* Two stacked scrims: a soft top wash so the badge stays readable on bright
   sky, and a deep bottom one carrying the title block. */
.project-card-media::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(10,10,10,.55), transparent 32%),
    linear-gradient(to top,    rgba(10,10,10,.94) 4%, rgba(10,10,10,.55) 34%, transparent 62%);
  pointer-events: none;
  transition: opacity .4s ease;
}

.project-card-top {
  position: absolute;
  top: 14px; left: 14px; right: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  z-index: 2;
}
.project-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--white);
  background: rgba(10,10,10,.62);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.project-status::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gold-light);
  box-shadow: 0 0 0 3px rgba(69,194,218,.22);
}
.project-status.is-done::before {
  background: #4ad07f;
  box-shadow: 0 0 0 3px rgba(74,208,127,.22);
}
/* The in-progress dot breathes so "still building" reads at a glance. */
.project-status.is-live::before { animation: projPulse 2.4s ease-in-out infinite; }
@keyframes projPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(69,194,218,.22); }
  50%      { box-shadow: 0 0 0 6px rgba(69,194,218,.05); }
}

.project-count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 999px;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--white);
  background: rgba(10,10,10,.62);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.project-count .icon { width: 13px; height: 13px; fill: var(--gold-light); }

.project-card-body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 22px 22px 20px;
}
.project-card-place {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 7px;
}
.project-card-place .icon { width: 11px; height: 11px; fill: currentColor; }
.project-card-title {
  font-family: var(--font-heading);
  font-size: 1.7rem;
  line-height: 1.15;
  color: var(--white);
  margin-bottom: 0;
}
/* The blurb is the reward for hovering — hidden until then on pointer devices
   so the card stays a clean photo, revealed permanently on touch (see below). */
.project-card-text {
  font-size: .84rem;
  line-height: 1.65;
  color: rgba(255,255,255,.72);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .5s var(--ease), opacity .4s ease, margin-top .5s var(--ease);
}
.project-card:hover .project-card-text,
.project-card:focus-visible .project-card-text {
  max-height: 120px;
  opacity: 1;
  margin-top: 9px;
}

.project-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 13px;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--white);
}
.project-card-cta .icon {
  width: 12px; height: 12px;
  fill: var(--gold-light);
  transition: transform .4s var(--ease);
}
.project-card:hover .project-card-cta .icon { transform: translateX(5px); }

.project-card-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(.9);
  width: 62px; height: 62px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(10,10,10,.5);
  border: 1px solid rgba(255,255,255,.35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity .4s ease, transform .4s var(--ease), background .3s ease;
  z-index: 2;
  pointer-events: none;
}
.project-card-play .icon { width: 19px; height: 19px; fill: var(--white); margin-left: 3px; }
.project-card:hover .project-card-play,
.project-card:focus-visible .project-card-play {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.projects-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--gray-lt);
  font-size: .9rem;
  padding: 40px 0;
}
.projects-empty a { color: var(--gold); text-decoration: underline; }


/* ── REEL / OUR WORK (contained video — sharp at native size) ── */
#scroll-cinema { background: rgba(10,10,10,var(--veil)); }
.reel { max-width: 980px; margin: 0 auto; }
.reel-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 848 / 352;   /* exact source ratio → no crop, near-native scale */
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--glass-border);
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
  background: #000;
}
.reel-video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: contrast(1.06) saturate(1.08);
}
/* Fallback for very old Safari (<15) that lacks aspect-ratio: keep the 848:352 box */
@supports not (aspect-ratio: 1 / 1) {
  .reel-frame { height: 0; padding-top: 41.51%; }
  .reel-video { position: absolute; inset: 0; }
}
.reel-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 34px;
}
.reel-step { padding-left: 16px; border-left: 2px solid var(--gold); }
.reel-step-num {
  font-family: var(--font-display);
  font-size: 1.4rem;
  letter-spacing: .08em;
  color: var(--gold);
}
.reel-step strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--white);
  margin: 2px 0 4px;
}
.reel-step p { font-size: .82rem; color: rgba(255,255,255,.55); line-height: 1.6; }
/* NOTE: the mobile overrides for .reel-steps and .cinema-sound-btn used to
   live here. Both were dead code — this block sits ABOVE the components'
   own rules, and a media query adds no specificity, so the later base rules
   simply won. They now live in the RESPONSIVE section at the end of the file. */

/* ── Top scroll-progress bar ── */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold-light));
  transform: scaleX(0);
  transform-origin: 0 50%;
  z-index: 1001;
  pointer-events: none;
}

/* ── FOOTPRINT / MAP ── */
#reach { background: rgba(10,10,10,var(--veil)); overflow: hidden; }
.reach-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.reach-globe-side {
  display: flex;
  flex-direction: column;
  gap: 22px;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
}
.reach-globe-wrap {
  position: relative;
  width: 100%;
  height: 300px;
}
/* pan-y: the browser keeps vertical swipes for page scrolling, we get the
   horizontal ones for spinning. Without this a touch-drag anywhere on the
   globe would trap the page scroll. */
#globe-canvas { width: 100%; height: 100%; display: block; touch-action: pan-y; cursor: grab; }
#globe-canvas:active { cursor: grabbing; }
.reach-map-wrap { position: relative; width: 100%; }
#reach-map {
  position: relative;
  width: 100%;
  height: 380px;
  border-radius: var(--radius);
  border: 1px solid var(--glass-border);
  overflow: hidden;
  background: #aadaff;   /* map "sea" colour while tiles load */
  z-index: 0;   /* keep Leaflet panes under the navbar/overlays */
}
.reach-map-hint {
  position: absolute;
  left: 14px; bottom: 12px;
  z-index: 500;
  padding: 5px 12px;
  border-radius: 20px;
  background: rgba(10,10,10,.72);
  border: 1px solid var(--glass-border);
  font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.6);
  pointer-events: none;
}
/* Leaflet dark theme */
.leaflet-container { background: #0c0c0c; font-family: var(--font-body); }
.leaflet-control-zoom { border: none !important; box-shadow: 0 4px 16px rgba(0,0,0,.5); }
.leaflet-control-zoom a {
  background: #161616; color: var(--gold);
  border-color: var(--glass-border);
}
.leaflet-control-zoom a:hover { background: #232323; color: var(--gold-light); }
.leaflet-bar a.leaflet-disabled { background: #111; color: #555; }
.leaflet-tooltip {
  background: #0a0a0a; color: var(--white);
  border: 1px solid var(--glass-border); border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0,0,0,.5);
  font-size: .74rem; font-weight: 500; padding: 5px 10px;
}
.leaflet-tooltip-top::before { border-top-color: var(--glass-border); }
.leaflet-control-attribution {
  background: rgba(10,10,10,.65) !important;
  color: #666 !important; font-size: .58rem;
}
.leaflet-control-attribution a { color: #8a8a8a !important; }
/* Custom gold markers */
.map-pin-dot {
  display: block; width: 16px; height: 16px; border-radius: 50%;
  background: var(--gold); border: 2px solid rgba(255,255,255,.85);
  box-shadow: 0 0 0 4px rgba(26,156,184,.22), 0 0 12px rgba(26,156,184,.75);
  cursor: pointer;
  transition: transform .2s var(--ease);
}
.map-pin:hover .map-pin-dot { transform: scale(1.35); }
.map-hq {
  color: var(--gold);
  font-size: 1.5rem;
  text-align: center;
  text-shadow: 0 0 10px rgba(26,156,184,.85);
}
.reach-intro {
  font-size: .95rem;
  color: var(--gray-lt);
  max-width: 440px;
  margin-bottom: 30px;
}
.reach-project-list { display: flex; flex-direction: column; }
.reach-item {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 6px;
  border-top: 1px solid var(--glass-border);
  cursor: pointer;
  transition: padding-left .35s var(--ease), background .35s ease;
}
.reach-item:last-child { border-bottom: 1px solid var(--glass-border); }
.reach-item:hover { padding-left: 16px; background: linear-gradient(90deg, var(--gold-glass), transparent); }
.reach-item-index {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: .1em;
  color: var(--gold);
  min-width: 30px;
}
.reach-item-body { display: flex; flex-direction: column; flex: 1; }
.reach-item-name {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--white);
}
.reach-item-place { font-size: .76rem; color: rgba(255,255,255,.5); }
.reach-item-arrow {
  color: var(--gold);
  font-size: .8rem;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity .35s ease, transform .35s var(--ease);
}
.reach-item:hover .reach-item-arrow { opacity: 1; transform: translateX(0); }

/* ── Lightbox ── */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10vh 5vw 4vh;
  background: rgba(6,6,6,.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility .35s;
}
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox-inner {
  max-width: 1060px;
  width: 100%;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  transform: scale(.96);
  transition: transform .4s var(--ease);
}
.lightbox.open .lightbox-inner { transform: scale(1); }
.lightbox-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.lightbox-caption {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 14px;
  text-align: center;
}
.lightbox-title { font-family: var(--font-heading); font-size: 1.5rem; color: var(--white); }
.lightbox-place { font-size: .82rem; letter-spacing: .04em; color: var(--gold); }
.lightbox-close {
  position: absolute;
  top: 22px; right: 30px;
  width: 48px; height: 48px;
  font-size: 2rem;
  line-height: 1;
  color: var(--white);
  border: 1px solid var(--glass-border);
  border-radius: 50%;
  background: rgba(255,255,255,.05);
  cursor: pointer;
  transition: background .3s ease, transform .3s ease;
}
.lightbox-close:hover { background: var(--gold); color: var(--black); transform: rotate(90deg); }

/* ── Lightbox gallery (arrows, filmstrip, video) ── */
.lightbox-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 880px;
  height: 58vh;
  flex-shrink: 0;
  margin: 0 auto;
  border-radius: var(--radius);
  background: rgba(255,255,255,.035);
  overflow: hidden;
}
.lightbox-picture { display: block; width: 100%; height: 100%; }
.lightbox-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  display: block;
}
/* An author `display` beats the UA rule behind the `hidden` attribute, so the
   two stage layers need it spelled out or the video sits beside the photo. */
.lightbox-picture[hidden],
.lightbox-video[hidden],
.lightbox-stagebadge[hidden] { display: none; }
.lightbox-stagebadge {
  position: absolute;
  top: 14px; left: 14px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--white);
  background: rgba(10,10,10,.66);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.lightbox-desc {
  font-size: .84rem;
  line-height: 1.6;
  color: rgba(255,255,255,.62);
  max-width: 620px;
  margin: 4px auto 0;
}

/* Prev / next sit against the viewport edges, clear of the image itself. */
.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
  z-index: 3;
  transition: background .3s ease, border-color .3s ease, transform .3s ease;
}
.lightbox-nav .icon { width: 17px; height: 17px; fill: var(--white); }
.lightbox-nav:hover {
  background: var(--gold);
  border-color: var(--gold);
}
.lightbox-nav:hover .icon { fill: var(--black); }
.lightbox-prev { left: 18px; }
.lightbox-next { right: 18px; }
.lightbox-prev:hover { transform: translateY(-50%) translateX(-3px); }
.lightbox-next:hover { transform: translateY(-50%) translateX(3px); }
.lightbox-nav[hidden] { display: none; }

.lightbox-counter {
  margin-top: 12px;
  text-align: center;
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gray-lt);
}

.lightbox-filmstrip {
  display: flex;
  gap: 9px;
  margin-top: 16px;
  padding-bottom: 4px;
  overflow-x: auto;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
  justify-content: flex-start;
}
/* Few enough thumbs to fit? Centre them rather than hugging the left edge. */
@media (min-width: 700px) {
  .lightbox-filmstrip { justify-content: center; }
}
.lightbox-filmstrip::-webkit-scrollbar { height: 5px; }
.lightbox-filmstrip::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 3px; }

.lb-thumb {
  position: relative;
  flex: 0 0 auto;
  width: 74px; height: 54px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  background: var(--dark-alt);
  cursor: pointer;
  opacity: .5;
  scroll-snap-align: center;
  transition: opacity .3s ease, border-color .3s ease, transform .3s ease;
}
.lb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lb-thumb:hover { opacity: .85; transform: translateY(-2px); }
.lb-thumb.is-active { opacity: 1; border-color: var(--gold); }
.lb-thumb-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(10,10,10,.42);
}
.lb-thumb-play .icon { width: 13px; height: 13px; fill: var(--white); }

/* ── "Watch with sound" button (on the scroll-cinema) ── */
.cinema-sound-btn {
  position: absolute;
  bottom: 30px; right: 40px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 20px;
  border-radius: 40px;
  background: rgba(10,10,10,.55);
  border: 1px solid var(--gold);
  color: var(--white);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background .3s ease, color .3s ease, transform .3s var(--ease);
}
.cinema-sound-btn:hover { background: var(--gold); color: var(--black); transform: translateY(-2px); }
.cinema-sound-play { width: 15px; height: 15px; fill: var(--gold); flex: none; transition: fill .3s ease; }
.cinema-sound-btn:hover .cinema-sound-play { fill: var(--black); }

/* ── Full-screen video modal (plays with sound) ── */
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vh 4vw;
  background: rgba(0,0,0,.94);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility .35s;
}
.video-modal.open { opacity: 1; visibility: visible; }
.video-modal-player {
  max-width: 100%;
  max-height: 90vh;
  width: auto;
  height: auto;
  border-radius: var(--radius);
  background: #000;
  box-shadow: 0 20px 80px rgba(0,0,0,.6);
}
.video-modal-close {
  position: absolute;
  top: 22px; right: 30px;
  width: 48px; height: 48px;
  font-size: 2rem; line-height: 1;
  color: var(--white);
  border: 1px solid var(--glass-border);
  border-radius: 50%;
  background: rgba(255,255,255,.05);
  cursor: pointer;
  z-index: 2;
  transition: background .3s ease, transform .3s ease;
}
.video-modal-close:hover { background: var(--gold); color: var(--black); transform: rotate(90deg); }

/* ── VIDEO CTA ── */
#video-cta {
  position: relative;
  padding: 150px 0;
  overflow: hidden;
  text-align: center;
}
.video-bg-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.video-bg-img {
  width: 100%; height: 100%;
  object-fit: cover;
  will-change: transform;
}
.video-bg-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10,10,10,.78);
}
.video-cta-content {
  position: relative;
  z-index: 1;
  max-width: 680px;
  margin: 0 auto;
  padding: 0 40px;
}
.video-cta-heading {
  font-family: var(--font-heading);
  font-size: clamp(2.8rem, 5.5vw, 5.2rem);
  font-weight: 300;
  line-height: 1.1;
  margin-bottom: 22px;
}
.video-cta-heading em { font-style: italic; color: var(--gold); }
.video-cta-text {
  font-size: .95rem;
  color: rgba(255,255,255,.58);
  line-height: 1.9;
  margin-bottom: 38px;
  max-width: 540px;
  margin-left: auto; margin-right: auto;
}
/* Fix: inline-style in HTML replaced by class */
.video-cta-content .section-tag { justify-content: center; }
.video-cta-content .section-tag::before { display: none; }
.video-cta-content .section-tag::after {
  content: ''; display: block;
  width: 28px; height: 1px; background: var(--gold);
}

/* ── PROCESS ── */
#process { background: rgba(24,24,24,var(--veil)); }
.process-timeline {
  display: flex;
  align-items: flex-start;
  gap: 0;
}
.process-step {
  flex: 1;
  text-align: center;
  padding: 0 22px;
}
.process-connector {
  flex: 0 0 60px;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), rgba(26,156,184,.2));
  margin-top: 48px;
  position: relative;
}
.process-connector::after {
  content: '';
  position: absolute;
  right: -1px; top: -4px;
  width: 8px; height: 8px;
  border-right: 2px solid var(--gold);
  border-top: 2px solid var(--gold);
  transform: rotate(45deg);
}
.step-number {
  font-family: var(--font-display);
  font-size: 3.6rem;
  color: rgba(26,156,184,.1);
  line-height: 1;
  margin-bottom: -8px;
}
.step-icon {
  width: 62px; height: 62px;
  border: 1px solid rgba(26,156,184,.35);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem;
  color: var(--gold);
  margin: 0 auto 18px;
  background: var(--gold-glass);
  transition: var(--trans);
}
.process-step:hover .step-icon {
  background: var(--gold); color: var(--black); transform: scale(1.1);
}
.step-title {
  font-family: var(--font-heading);
  font-size: 1.45rem;
  font-weight: 500;
  margin-bottom: 12px;
}
.step-desc { font-size: .83rem; color: rgba(255,255,255,.52); line-height: 1.85; }

/* ── CONTACT ── */
#contact { background: rgba(17,17,17,var(--veil)); }
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 72px;
  align-items: start;
}
.contact-desc {
  color: rgba(255,255,255,.58);
  font-size: .93rem;
  line-height: 1.9;
  margin-bottom: 42px;
}
.contact-details { display: flex; flex-direction: column; gap: 22px; margin-bottom: 40px; }
/* min-width:0 lets the flex text column shrink; without it the email address
   (one unbreakable token) pushed past the right edge of a 320px phone. */
.contact-detail-item { display: flex; align-items: center; gap: 16px; min-width: 0; }
.contact-detail-item > div { min-width: 0; }
.contact-icon {
  width: 46px; height: 46px;
  background: var(--gold-glass);
  border: 1px solid rgba(26,156,184,.2);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--gold); font-size: .9rem;
  flex-shrink: 0;
  transition: var(--trans);
}
.contact-detail-item:hover .contact-icon { background: var(--gold); color: var(--black); }
.detail-label {
  display: block;
  font-size: .65rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 2px;
}
.detail-value { font-size: .88rem; overflow-wrap: anywhere; }

/* ── Direct-contact card (replaces the old form) ── */
.contact-cta-card {
  background: var(--dark-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 44px 40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.contact-cta-title {
  font-family: var(--font-heading);
  font-size: 1.9rem;
  font-weight: 500;
  color: var(--white);
}
.contact-cta-text {
  font-size: .92rem;
  color: rgba(255,255,255,.58);
  line-height: 1.8;
  margin-bottom: 10px;
}
.contact-cta-btn {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-radius: var(--radius);
  border: 1px solid var(--glass-border);
  background: var(--glass);
  transition: transform .3s var(--ease), border-color .3s ease, background .3s ease;
}
.contact-cta-btn .icon {
  width: 44px; height: 44px;
  padding: 11px;               /* icon graphic sits inside the badge circle */
  box-sizing: border-box;
  border-radius: 50%;
  flex: none;
}
.contact-cta-btn span {
  display: flex; flex-direction: column; line-height: 1.35;
  min-width: 0;
  /* the email address is one unbreakable token — let it wrap rather than
     stretch the card past the edge of a narrow phone */
  overflow-wrap: anywhere;
}
.contact-cta-btn strong { font-weight: 600; font-size: .98rem; color: var(--white); }
.contact-cta-btn small { font-size: .74rem; color: rgba(255,255,255,.5); }
.contact-cta-btn:hover { transform: translateX(5px); background: rgba(255,255,255,.05); }
.contact-cta-whatsapp .icon { background: #25d366; color: #fff; }
.contact-cta-whatsapp:hover { border-color: #25d366; }
.contact-cta-call .icon { background: var(--gold); color: var(--black); }
.contact-cta-call:hover { border-color: var(--gold); }
.contact-cta-email .icon { background: rgba(26,156,184,.15); color: var(--gold); }
.contact-cta-email:hover { border-color: var(--gold); }

/* ── FOOTER ── */
#footer { background: rgba(7,7,7,var(--veil)); }
.footer-top { padding: 76px 0 56px; }
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.4fr;
  gap: 56px;
}
.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-display);
  font-size: 1.9rem;
  letter-spacing: .15em;
  margin-bottom: 18px;
}
.footer-logo-mark { height: 42px; width: auto; display: block; }
.footer-tagline {
  font-size: .82rem;
  color: rgba(255,255,255,.38);
  line-height: 1.9;
  margin-bottom: 26px;
  max-width: 270px;
}
.footer-col-title {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 22px;
}
.footer-links { display: flex; flex-direction: column; gap: 11px; }
.footer-links a {
  font-size: .82rem;
  color: rgba(255,255,255,.42);
  transition: color .3s;
}
.footer-links a:hover { color: var(--gold); }
.footer-contact-list {
  display: flex; flex-direction: column; gap: 13px;
}
.footer-contact-list li {
  font-size: .8rem;
  color: rgba(255,255,255,.42);
  display: flex; align-items: flex-start; gap: 11px;
  line-height: 1.6;
}
.footer-contact-list li .icon { color: var(--gold); margin-top: 4px; flex-shrink: 0; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.06);
  padding: 20px 0;
}
.footer-bottom .container {
  display: flex; align-items: center; justify-content: space-between;
}
.footer-bottom span { font-size: .76rem; color: rgba(255,255,255,.28); }
.footer-bottom-links { display: flex; gap: 22px; }
.footer-bottom-links a {
  font-size: .76rem;
  color: rgba(255,255,255,.28);
  transition: color .3s;
}
.footer-bottom-links a:hover { color: var(--gold); }


/* ── LEGAL / TEXT PAGES (privacy, terms, 404) ── */
.legal-page { background: var(--black); min-height: 100vh; }
.legal-bar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  background: rgba(10,10,10,.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--glass-border);
}
.legal-bar .nav-logo { font-size: 1.35rem; }
.legal-back {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
}
.legal-back:hover { color: var(--gold-light); }
.legal-back .icon { width: 12px; height: 12px; fill: currentColor; transform: rotate(180deg); }

.legal-wrap { max-width: 780px; margin: 0 auto; padding: 60px 0 90px; }
.legal-wrap h1 {
  font-family: var(--font-heading);
  font-size: clamp(2.1rem, 5vw, 3.1rem);
  line-height: 1.1;
  color: var(--white);
  margin-bottom: 12px;
}
.legal-updated {
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 34px;
}
.legal-wrap h2 {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  color: var(--white);
  margin: 40px 0 12px;
  padding-top: 22px;
  border-top: 1px solid var(--glass-border);
}
.legal-wrap h2:first-of-type { border-top: 0; padding-top: 0; }
.legal-wrap h3 { font-size: .95rem; color: var(--white); margin: 22px 0 8px; }
.legal-wrap p,
.legal-wrap li { color: rgba(255,255,255,.68); font-size: .93rem; line-height: 1.85; }
.legal-wrap p { margin-bottom: 14px; }
.legal-wrap ul { margin: 0 0 16px; padding-left: 0; }
.legal-wrap li { position: relative; padding-left: 20px; margin-bottom: 7px; }
.legal-wrap li::before {
  content: '';
  position: absolute;
  left: 2px; top: .78em;
  width: 6px; height: 1px;
  background: var(--gold);
}
.legal-wrap a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.legal-wrap a:hover { color: var(--gold-light); }
.legal-wrap strong { color: var(--white); font-weight: 600; }

/* Anything the owner still has to fill in is highlighted rather than left to
   blend into the copy, so a placeholder can't quietly go live. */
.legal-fill {
  /* Was a loud highlight while these pages were drafts. Now the site is live
     it needs to read as "this detail is still pending" to a customer, not as
     a broken page — muted and italic, but still obvious and still greppable
     by class name so nothing is forgotten. */
  color: var(--gray-lt);
  border-bottom: 1px dotted rgba(255,255,255,.28);
  font-style: italic;
}
.legal-note {
  margin: 30px 0;
  padding: 18px 20px;
  border: 1px solid var(--glass-border);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  background: var(--glass);
}
.legal-note p:last-child { margin-bottom: 0; }
.legal-contact {
  margin-top: 12px;
  padding: 20px 22px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  background: var(--glass);
}
.legal-foot {
  border-top: 1px solid var(--glass-border);
  padding: 26px 0 34px;
  text-align: center;
  font-size: .78rem;
  color: var(--gray-lt);
}
.legal-foot a { color: var(--gray-lt); }
.legal-foot a:hover { color: var(--gold); }
.legal-foot-links { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }

/* 404 */
.nf-wrap { min-height: 74vh; display: grid; place-items: center; text-align: center; padding: 70px 0; }
.nf-code {
  font-family: var(--font-display);
  font-size: clamp(5rem, 18vw, 10rem);
  line-height: .9;
  color: var(--gold);
  letter-spacing: .04em;
}
.nf-title { font-family: var(--font-heading); font-size: clamp(1.6rem, 4vw, 2.4rem); color: var(--white); margin: 10px 0 12px; }
.nf-text { color: var(--gray-lt); font-size: .93rem; max-width: 460px; margin: 0 auto 26px; line-height: 1.8; }
.nf-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 600px) {
  .legal-wrap { padding: 40px 0 64px; }
  .legal-bar { padding: 14px 0; }
  .legal-bar .nav-logo { font-size: 1.1rem; }
  .legal-bar .nav-logo-mark { height: 28px; }
  .legal-back { font-size: .62rem; letter-spacing: .1em; }
}

/* ── WhatsApp floating button ── */
.whatsapp-float {
  position: fixed;
  bottom: 34px; right: 34px;
  width: 58px; height: 58px;
  background: #25d366;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.9rem;
  z-index: 500;
  box-shadow: 0 6px 24px rgba(37,211,102,.45);
  transition: transform .3s var(--ease), box-shadow .3s ease;
}
.whatsapp-float::before {   /* soft attention pulse */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #25d366;
  z-index: -1;
  animation: waPulse 2.4s ease-out infinite;
}
@keyframes waPulse {
  0%   { transform: scale(1);   opacity: .55; }
  70%  { transform: scale(1.7); opacity: 0;   }
  100% { transform: scale(1.7); opacity: 0;   }
}
.whatsapp-float:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 10px 30px rgba(37,211,102,.55); }
/* Hover tooltip label */
.whatsapp-label {
  position: absolute;
  right: 70px;
  white-space: nowrap;
  background: rgba(10,10,10,.92);
  color: var(--white);
  font-size: .78rem;
  letter-spacing: .04em;
  padding: 8px 14px;
  border-radius: 8px;
  opacity: 0;
  transform: translateX(8px);
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
}
.whatsapp-label::after {   /* little arrow */
  content: '';
  position: absolute;
  top: 50%; right: -5px;
  width: 10px; height: 10px;
  background: rgba(10,10,10,.92);
  transform: translateY(-50%) rotate(45deg);
}
.whatsapp-float:hover .whatsapp-label { opacity: 1; transform: translateX(0); }
@media (hover: none), (pointer: coarse) { .whatsapp-label { display: none; } }
@media (max-width: 480px) {
  .whatsapp-float { width: 52px; height: 52px; font-size: 1.7rem; bottom: 24px; right: 22px; }
}

/* ══════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════ */

/* 1200px */
@media (max-width: 1200px) {
  .about-secondary-img-wrap { display: none; }
}

/* 1050px */
@media (max-width: 1050px) {
  .services-grid { grid-template-columns: 1fr 1fr; }
  .projects-grid { grid-template-columns: repeat(2, 1fr); }
  .project-card.size-wide { grid-column: span 2; grid-row: span 2; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}

/* 900px */
@media (max-width: 900px) {
  :root { --sec-py: 80px; }
  .container { padding: 0 24px; }
  .about-grid  { grid-template-columns: 1fr; gap: 44px; }
  .contact-grid{ grid-template-columns: 1fr; gap: 44px; }
  .reach-grid  { grid-template-columns: 1fr; gap: 40px; }
  .projects-grid { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 18px; }
  .project-card,
  .project-card.size-tall,
  .project-card.size-wide { grid-row: auto; grid-column: auto; aspect-ratio: 4 / 3; }
  .lightbox-prev { left: 8px; }
  .lightbox-next { right: 8px; }
  .lightbox-nav { width: 44px; height: 44px; }
  .lightbox { padding: 9vh 4vw 4vh; }
  .reach-globe-side { max-width: none; }
  .reach-globe-wrap { height: 240px; }
  #reach-map { height: 340px; }
  .lightbox-close { top: 14px; right: 16px; }
  /* From here down the video frame is narrow enough that its sound button
     collides with the floating WhatsApp button — move it to the free corner. */
  .cinema-sound-btn { left: 14px; right: auto; }
  /* the full nav only just fits a landscape phone; buy back some room */
  .nav-menu { gap: 26px; }
  .nav-container { padding: 0 24px; }

  /* Process — vertical on tablet */
  .process-timeline {
    flex-direction: column;
    align-items: center;
    gap: 0;
  }
  .process-step { padding: 0; width: 100%; max-width: 400px; }
  .process-connector {
    width: 2px; height: 44px;
    flex: none;
    background: linear-gradient(to bottom, var(--gold), rgba(26,156,184,.2));
    margin: 0 auto;
    position: relative;
  }
  /* FIX: arrow points down on mobile */
  .process-connector::after {
    right: -4px;
    top: auto;
    bottom: -1px;
    border-right: 2px solid var(--gold);
    border-top: none;
    border-bottom: 2px solid var(--gold);
    transform: rotate(45deg);
  }
}

/* 768px — mobile */
@media (max-width: 768px) {
  .nav-menu {
    position: fixed;
    inset: 0;
    background: rgba(10,10,10,.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    transform: translateY(-100%);
    /* Belt-and-braces: even if a future ancestor filter/transform breaks the
       fixed positioning, a hidden menu can never bleed over the page. */
    visibility: hidden;
    opacity: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    transition: transform .5s cubic-bezier(.77,0,.18,1),
                opacity .3s ease,
                visibility 0s linear .5s;
    z-index: 999;
  }
  .nav-menu.open {
    transform: translateY(0);
    visibility: visible;
    opacity: 1;
    transition: transform .5s cubic-bezier(.77,0,.18,1),
                opacity .3s ease,
                visibility 0s;
  }
  .nav-link  { font-size: 1.3rem; padding: 6px 12px; }
  .hamburger { display: flex; width: 44px; height: 44px; align-items: center; justify-content: center; }

  .services-grid { grid-template-columns: 1fr; }
  /* Let the card grow to its content — desc + list are always shown on mobile,
     so a fixed aspect-ratio box clipped the text and squashed the icon. */
  .service-card  { aspect-ratio: auto; }
  .service-card-content { height: auto; min-height: 340px; padding: 30px 26px; }
  /* show desc/list by default on mobile (no hover) */
  .service-desc,
  .service-list  { max-height: none; opacity: 1; }
  /* …which means the copy sits over the photo permanently — darken the
     scrim so it stays legible without a hover state to trigger it. */
  .service-card-overlay {
    background: linear-gradient(
      to top,
      rgba(10,10,10,.96) 0%,
      rgba(10,10,10,.88) 55%,
      rgba(10,10,10,.55) 100%
    );
  }

  /* Comfortable tap targets (Apple/Google both recommend ~44px) */
  .service-link  { padding: 10px 0; }
  .footer-links  { gap: 4px; }
  .footer-links a,
  .footer-contact-list a,
  a.detail-value { display: inline-block; padding: 8px 0; }

  /* ── Compaction: things that were stacking vertically for no good reason ──
     Each of these fits across the width of a phone; stacking them was just
     spending screens the visitor has to scroll past. */

  /* "Watch with sound" was rendering at full desktop size over a frame only
     ~140px tall — 60%+ of the video's width, hiding the footage behind it.
     Small pill in the corner, with a finger-sized hit area via ::after so
     shrinking the visual doesn't shrink the tap target. */
  .cinema-sound-btn {
    /* bottom-LEFT on phones: the floating WhatsApp button owns the
       bottom-right corner and was landing on top of this one. */
    left: 12px; right: auto; bottom: 12px;
    padding: 7px 13px;
    gap: 6px;
    /* 8px was below the legible floor; tightening the tracking buys the
       extra size back so the pill stays the same width. */
    font-size: .58rem;
    letter-spacing: .02em;
  }
  .cinema-sound-play { width: 10px; height: 10px; }
  .cinema-sound-btn::after {
    content: '';
    position: absolute;
    inset: -9px -8px;
  }

  /* The three build stages read as a row, not three full-width blocks. */
  .reel-steps { grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 24px; }
  .reel-step  { padding-left: 10px; }
  .reel-step-num { font-size: 1rem; }
  .reel-step strong { font-size: .95rem; margin: 2px 0 3px; }
  .reel-step p { font-size: .72rem; line-height: 1.5; }

  /* Footer: two columns instead of one long ribbon of links. */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 24px; }
  .footer-brand { grid-column: 1 / -1; }

  /* Process: icon beside the text instead of above it — roughly halves the
     height of the section without dropping any content. */
  .process-timeline { align-items: stretch; }
  .process-step {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "icon title" "icon desc";
    column-gap: 15px;
    text-align: left;
    max-width: none;
    align-items: start;
  }
  .process-step .step-number { display: none; }  /* 3.6rem watermark — pure noise at phone size */
  .process-step .step-icon {
    grid-area: icon;
    width: 46px; height: 46px;
    margin: 0;
    font-size: 1rem;
  }
  .process-step .step-title { grid-area: title; margin: 0 0 3px; font-size: 1.15rem; }
  .process-step .step-desc  { grid-area: desc;  margin: 0; font-size: .85rem; line-height: 1.65; }
  .process-connector { height: 26px; margin-left: 22px; }

  /* The globe used to be hidden here: at the time its texture was a 1.4 MB
     CDN download. That texture is now 77 KB and self-hosted, so the reason
     is gone and the globe runs on phones too. */

  /* Copyright + legal links were being squeezed onto one flex line and
     running under the floating WhatsApp button. Stack them and reserve
     clearance so the last row of the page is never covered. */
  .footer-bottom .container {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
  .footer-bottom-links { gap: 22px; }
  .footer-bottom-links a { padding: 6px 0; }
  .footer-bottom { padding-bottom: 104px; }
}

/* 480px */
@media (max-width: 480px) {
  /* keep the logo from crowding the hamburger on small phones */
  .nav-logo { font-size: 1.3rem; gap: 8px; }
  .nav-logo-mark { height: 32px; }

  /* The fixed navbar is ~107px tall at this size but the hero only reserved
     80px of top padding. Once the tag wrapped to two lines the centred hero
     content drifted up underneath the logo. */
  #hero { padding-top: 126px; padding-bottom: 64px; }
  .hero-tag { font-size: .6rem; letter-spacing: .14em; padding: 7px 14px; margin-bottom: 22px; }

  /* 80px of side padding is a quarter of a 320px screen */
  .project-card,
  .project-card.size-tall,
  .project-card.size-wide { aspect-ratio: 3 / 4; }
  .project-card-title { font-size: 1.45rem; }
  .project-card-body { padding: 18px 16px 16px; }
  .lightbox { padding: 8vh 3vw 3vh; }
  .lightbox-inner { max-height: 88vh; }
  .lightbox-stage { height: 46vh; }
  .lightbox-title { font-size: 1.25rem; }
  .lightbox-desc  { font-size: .78rem; }
  .lightbox-stagebadge { font-size: .56rem; padding: 5px 9px; top: 10px; left: 10px; }
  .lb-thumb { width: 58px; height: 44px; }
  /* Kept on phones — swipe works too, but with nothing visible on screen
     there is no hint that more photos exist. They sit over the frame's
     letterbox margin rather than over the photo itself. */
  .lightbox-nav { width: 38px; height: 38px; }
  .lightbox-nav .icon { width: 13px; height: 13px; }
  .lightbox-prev { left: 2px; }
  .lightbox-next { right: 2px; }

  .contact-cta-card { padding: 30px 20px; }
  .contact-cta-btn  { padding: 14px 14px; gap: 12px; }

  /* Micro-labels were bottoming out around 9.6px — lift them to a readable
     floor. They're uppercase and letterspaced, so this costs little width. */
  .reach-map-hint       { font-size: .68rem; }
}

/* Landscape phones: the overlay menu is centred and sized for a tall screen,
   so on a ~375px-tall viewport the outer links fell outside it. It was
   scrollable rather than broken, but nobody scrolls a nav — pack it instead. */
@media (max-width: 768px) and (max-height: 480px) {
  .nav-menu {
    justify-content: flex-start;
    padding: 74px 0 24px;
    gap: 6px;
  }
  .nav-link { font-size: 1.05rem; padding: 9px 14px; }
  .nav-link-cta { padding: 8px 20px; }
}

/* Short viewports (landscape phones, small laptops). The viewer stacks photo +
   caption + filmstrip + counter, which needs ~78vh — on a 400px-tall screen
   that overflows. Drop the filmstrip (arrows and swipe still navigate) and
   give the photo the room back.
   Safe to hide in CSS: the JS only ever sets the strip's inline display to
   'none', never to a visible value, so a stylesheet rule still wins. */
@media (max-height: 560px) {
  .lightbox { padding: 5vh 4vw 2vh; }
  .lightbox-inner { max-height: 95vh; }
  .lightbox-stage { height: 64vh; }
  .lightbox-filmstrip { display: none; }
  .lightbox-caption { margin-top: 9px; }
  .lightbox-desc { display: none; }
  .lightbox-title { font-size: 1.2rem; }
  .lightbox-counter { margin-top: 7px; }
  .lightbox-close { top: 12px; right: 14px; width: 40px; height: 40px; font-size: 1.6rem; }
}

/* 360px — Galaxy Fold cover screen and similar slivers */
@media (max-width: 360px) {
  /* "LUCKIEST HOMES" at 1.9rem does not fit 280px of screen */
  .footer-logo { font-size: 1.45rem; gap: 8px; }
  .footer-logo-mark { height: 34px; }
}

/* ── Touch devices: anything gated behind :hover is unreachable ──
   Width alone was the wrong test. Between 769px and 1050px — landscape
   phones and small tablets — the service cards still used the hover reveal,
   so their descriptions and bullet lists were permanently invisible with no
   way to trigger them. `hover: none` asks the real question. */
@media (hover: none) {
  .service-desc,
  .service-list { max-height: none; opacity: 1; }
  .project-card-text { max-height: none; opacity: 1; margin-top: 9px; }
  .project-card-play { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  .service-card { aspect-ratio: auto; }
  .service-card-content { height: auto; min-height: 340px; }
  .service-card-overlay {
    background: linear-gradient(
      to top,
      rgba(10,10,10,.96) 0%,
      rgba(10,10,10,.88) 55%,
      rgba(10,10,10,.55) 100%
    );
  }
  /* desktop-width nav on a touch screen: 21px-tall links are not tappable.
     Vertical only — horizontal padding widened the bar past 844px and made
     the nav overflow a landscape phone. */
  .nav-link:not(.nav-link-cta) { padding: 11px 0; }
  /* same story as the cards: this sits at 20px without a hover state */
  .service-link { padding: 10px 0; }
  /* Tap targets keyed to touch rather than to width — a landscape phone is
     844px wide but still a thumb. */
  .footer-links { gap: 4px; }
  .footer-links a,
  .footer-contact-list a,
  .footer-bottom-links a,
  a.detail-value { display: inline-block; padding: 10px 0; }
}

/* ── Accessibility: respect reduced-motion ──
   Shortens (not removes) durations so `forwards`/`both` reveals still land
   on their end state — content is never left hidden. */
/* ── prefers-reduced-motion ──
   There used to be a blanket rule here pinning animation-duration and
   transition-duration to 0.01ms on every element. On a phone with iOS
   "Reduce Motion" enabled (very common) it flattened the whole site: the
   3D backdrop froze, the marquee stopped mid-travel looking half-empty,
   and every scroll reveal and hover transition snapped instantly.

   Removed on the owner's instruction — the site is meant to feel animated
   on every device. This deliberately overrides an accessibility preference
   the visitor set on their own device; restoring it is a one-block change:

     @media (prefers-reduced-motion: reduce) {
       *, *::before, *::after {
         animation-duration: 0.01ms !important;
         animation-iteration-count: 1 !important;
         transition-duration: 0.01ms !important;
       }
     }

   If it ever comes back, note that it must NOT use `animation: none` on
   .marquee-track — that is what left the strip frozen part-way across. */