/* ===========================================================================
   Alpha Concern — Premium Dark Teal & Gold Theme (matches client logo)
   Typography: Cormorant Garamond (display), Syne (heading), DM Sans (body)
   =========================================================================== */

/* -- Tokens ---------------------------------------------------------------- */
:root {
  /* Brand (sampled from client logo background) */
  --color-primary:        #003030;   /* logo green — body bg */
  --color-surface:        #053C3A;   /* card / lighter section */
  --color-surface-2:      #001E1E;   /* deepest contrast */
  --color-surface-3:      #0A4644;   /* hover / highlight */

  --color-ink:            #F4EFE3;   /* warm cream — primary text on dark */
  --color-text-primary:   #F4EFE3;
  --color-text-secondary: rgba(244, 239, 227, 0.72);
  --color-text-muted:     rgba(244, 239, 227, 0.45);

  --color-accent:         #C8922A;   /* logo gold */
  --color-accent-light:   #E8B860;
  --color-accent-dark:    #9C7415;
  --color-accent-soft:    rgba(200, 146, 42, 0.12);

  --color-border:         rgba(244, 239, 227, 0.10);
  --color-border-strong:  rgba(244, 239, 227, 0.20);
  --color-overlay:        rgba(0, 24, 24, 0.78);

  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.18);
  --shadow-md: 0 12px 36px rgba(0, 0, 0, 0.28);
  --shadow-lg: 0 22px 60px rgba(0, 0, 0, 0.38);

  --font-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-heading: 'Syne', 'Inter', sans-serif;
  --font-body:    'DM Sans', system-ui, sans-serif;

  --container:    1320px;
  --container-md: 1100px;
  --gutter:       clamp(1.25rem, 4vw, 3rem);
  --section-y:    clamp(4.5rem, 10vw, 9rem);

  --header-stack: 96px;

  --ease-out:     cubic-bezier(.22, 1, .36, 1);
  --ease-in-out:  cubic-bezier(.65, 0, .35, 1);
}

/* -- Reset ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--color-primary); }
/* `auto`, not `smooth`: this rule was inverted — it switched smooth scrolling
   *on* for exactly the people who asked for less motion, and native smooth
   scrolling also fights Lenis wherever both are live. */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* Lenis smooth-scroll classes — applied automatically when Lenis runs */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-scrolling iframe { pointer-events: none; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-text-secondary);
  background: var(--color-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, video, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
ul, ol { padding: 0; margin: 0; list-style: none; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 400; color: var(--color-ink); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 1000;
  background: var(--color-accent); color: var(--color-primary); padding: .75rem 1rem;
}
.skip-link:focus { left: 0; }
::selection { background: var(--color-accent); color: var(--color-primary); }

/* -- Typography ----------------------------------------------------------- */
.display {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.012em;
  color: var(--color-ink);
}
.display-xl { font-size: clamp(2.75rem, 7vw, 6rem); }
.display-lg { font-size: clamp(2.25rem, 5.5vw, 4.5rem); }
.display-md { font-size: clamp(1.75rem, 4vw, 3rem); }

.eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: .72rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--color-accent-light);
  display: inline-flex; align-items: center; gap: .85rem;
}
.eyebrow::before {
  content: ''; width: 36px; height: 1px; background: var(--color-accent);
}

.heading {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  line-height: 1.18;
}
.heading-lg { font-size: clamp(1.5rem, 3vw, 2.25rem); }
.heading-md { font-size: clamp(1.25rem, 2.2vw, 1.75rem); }

.lede {
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  color: var(--color-text-secondary);
  max-width: 60ch;
  font-weight: 300;
}

.italic-accent {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  color: var(--color-accent-light);
}

/* -- Layout --------------------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.container-md { width: 100%; max-width: var(--container-md); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding-block: var(--section-y); }
.section--surface { background: var(--color-surface); }
.section--cream   { background: var(--color-primary); }   /* alias retained for backward compat */
.section--dark    { background: var(--color-surface-2); } /* deepest contrast */

.divider-gold { width: 56px; height: 2px; background: var(--color-accent); display: inline-block; }

/* Premium placeholder for missing imagery */
.bg-placeholder {
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(200, 146, 42, 0.16), transparent 55%),
    radial-gradient(80% 80% at 100% 100%, rgba(0, 0, 0, 0.35), transparent 60%),
    linear-gradient(180deg, var(--color-surface), var(--color-surface-2));
  position: relative;
}
.bg-placeholder::after {
  content: ''; position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(45deg, rgba(244,239,227,0.025) 0 1px, transparent 1px 18px);
  pointer-events: none;
}
.bg-placeholder--dark {
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(200, 146, 42, 0.20), transparent 55%),
    linear-gradient(180deg, var(--color-surface-2), #000);
}

/* -- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .65rem;
  padding: 1rem 1.85rem;
  font-family: var(--font-body);
  font-weight: 500; font-size: .78rem;
  letter-spacing: .22em; text-transform: uppercase;
  white-space: nowrap;
  transition: background .35s var(--ease-out), color .35s var(--ease-out),
              transform .35s var(--ease-out), border-color .35s var(--ease-out),
              box-shadow .35s;
  border: 1px solid transparent; border-radius: 0;
  position: relative;
}
.btn-primary {
  background: var(--color-accent); color: var(--color-primary);
}
.btn-primary:hover {
  background: var(--color-accent-light); color: var(--color-primary);
  transform: translateY(-2px); box-shadow: var(--shadow-md);
}

.btn-ghost {
  background: transparent; color: var(--color-ink);
  border-color: var(--color-border-strong);
}
.btn-ghost:hover {
  background: var(--color-ink); color: var(--color-primary);
  border-color: var(--color-ink);
}

.nav-cta { padding: .8rem 1.4rem; font-size: .7rem; letter-spacing: .2em; }

.btn-text {
  font-family: var(--font-body); font-weight: 500;
  font-size: .78rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--color-accent-light); display: inline-flex; align-items: center; gap: .85rem;
  position: relative; padding-bottom: .35rem;
}
.btn-text::before {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--color-accent);
  transform-origin: right; transform: scaleX(1);
  transition: transform .45s var(--ease-out);
}
.btn-text::after { content: '→'; transition: transform .35s var(--ease-out); }
.btn-text:hover::before { transform-origin: left; transform: scaleX(0); }
.btn-text:hover::after { transform: translateX(8px); }

/* -- Forms ---------------------------------------------------------------- */
.form-group { margin-bottom: 1.35rem; }
.form-label {
  display: block; font-size: .7rem; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--color-text-muted); margin-bottom: .55rem;
}
.form-control {
  width: 100%; padding: .95rem 1.1rem;
  background: rgba(244, 239, 227, 0.04);
  border: 1px solid var(--color-border);
  color: var(--color-ink);
  font-family: var(--font-body); font-size: .95rem;
  border-radius: 0;
  transition: border-color .25s, background .25s;
}
.form-control:focus {
  outline: none; border-color: var(--color-accent);
  background: rgba(244, 239, 227, 0.08);
}
.form-control::placeholder { color: var(--color-text-muted); }
textarea.form-control { min-height: 150px; resize: vertical; }
.form-error { color: #E8835F; font-size: .8rem; margin-top: .35rem; }
.form-success {
  background: var(--color-accent-soft);
  border-left: 2px solid var(--color-accent);
  color: var(--color-ink);
  padding: 1rem 1.25rem; margin-bottom: 1.5rem;
}

/* -- Top info bar -------------------------------------------------------- */
.topbar {
  background: var(--color-surface-2); color: var(--color-text-muted);
  font-size: .68rem; letter-spacing: .14em;
  padding: .4rem 0;
  position: relative; z-index: 100;
  border-bottom: 1px solid var(--color-border);
}
.topbar__row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 22px; }
.topbar a { color: var(--color-text-secondary); transition: color .25s; }
.topbar a:hover { color: var(--color-accent-light); }
.topbar__left, .topbar__right { display: flex; gap: 1.25rem; align-items: center; }
.topbar__sep { color: var(--color-text-muted); opacity: .5; }
@media (max-width: 900px) {
  .topbar__row { justify-content: center; }
  .topbar__right { display: none; }
}

/* -- Navigation ----------------------------------------------------------- */
.site-header {
  /* Above .mobile-menu (110): .hamburger.is-open is the X that closes the
     dialog, so the header has to stay hit-testable over the open overlay. */
  position: sticky; top: 0; z-index: 120;
  background: rgba(0, 48, 48, 0.92);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--color-border);
  transition: padding .3s var(--ease-out), background .3s, box-shadow .3s;
  padding: .65rem 0;
}
.site-header.is-scrolled {
  padding: .4rem 0;
  background: rgba(0, 48, 48, 0.97);
  box-shadow: var(--shadow-sm);
}
.nav-row { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; }

.brand-mark { display: inline-flex; align-items: center; line-height: 1; }
.brand-mark img {
  height: 56px; width: auto;
  display: block;
  transition: height .3s var(--ease-out);
}
.site-header.is-scrolled .brand-mark img { height: 44px; }
@media (max-width: 720px) { .brand-mark img { height: 44px; } .site-header.is-scrolled .brand-mark img { height: 38px; } }

.nav-list { display: none; gap: 1.4rem; align-items: center; }
@media (min-width: 1024px) { .nav-list { display: flex; } }
@media (min-width: 1280px) { .nav-list { gap: 1.85rem; } }

.nav-link {
  position: relative;
  font-family: var(--font-body); font-weight: 500; font-size: .7rem;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--color-text-secondary);
  padding-block: .3rem;
  transition: color .25s;
  white-space: nowrap;
}
.nav-link::after {
  content: ''; position: absolute; left: 50%; bottom: 0;
  height: 1px; width: 100%; background: var(--color-accent);
  transform: translateX(-50%) scaleX(0); transform-origin: center;
  transition: transform .4s var(--ease-out);
}
.nav-link:hover, .nav-link.is-active { color: var(--color-ink); }
.nav-link:hover::after, .nav-link.is-active::after { transform: translateX(-50%) scaleX(1); }

.hamburger {
  display: inline-flex; flex-direction: column; gap: 6px;
  width: 32px; padding: 6px; background: transparent;
}
/* A definite width, not 100%. The touch-target rule at max-width:1024px makes
   this button `display: grid; place-content: center`, which sizes the column
   track to its content — and a percentage width against a content-sized track
   is circular, so it resolved to 0. The three bars were 0x1px: the button was
   still there and still tappable, but nothing was drawn, so the menu control
   was invisible on every phone. 20px matches what the base 32px box minus its
   6px padding used to produce. */
.hamburger span { display: block; height: 1px; width: 20px; background: var(--color-ink); transition: transform .3s, opacity .3s; }
.hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; }
.hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (min-width: 1024px) { .hamburger { display: none; } }

/* The open menu is a full-screen dialog, so it has to clear the site chrome.
   At z-index 80 it sat *under* both the header (90) and the topbar (100): the
   overlay is the same --color-primary as the header, so opening it turned the
   screen into one flat teal field with the top two nav items hidden behind the
   bars — it read as "the menu did not open".
   The header stays above it on purpose; .hamburger.is-open is the X that closes
   the dialog, so it must remain tappable. */
.mobile-menu {
  position: fixed; inset: 0; z-index: 110;
  background: var(--color-primary);
  display: flex; flex-direction: column; align-items: center;
  justify-content: center;
  /* `safe` keeps the links centred when they fit and top-aligns them when they
     do not. Plain centring overflows equally at both ends, and the overflow
     above the top edge is unreachable by scrolling — on a 375x667 phone that
     put "Home" at -45px and "Contact" past the bottom, with no way to get to
     either. Browsers without `safe` keep the plain `center` above. */
  justify-content: safe center;
  gap: 1.5rem;
  padding: calc(var(--header-stack) + 1rem) 1.5rem 2rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s;
}
.mobile-menu.is-open { opacity: 1; visibility: visible; }
.mobile-menu a {
  font-family: var(--font-display); font-size: 2rem; color: var(--color-ink);
}
/* Eight links at the full display size need ~904px of height once the header
   clearance and padding are counted, so everything up to a 15 Pro Max has to
   scroll for the last item. Compacting below 900px lets the whole menu fit on
   screen; taller viewports keep the larger type and still fit. */
@media (max-height: 900px) {
  .mobile-menu { gap: .5rem; }
  .mobile-menu a { font-size: 1.5rem; }
}

/* -- Footer --------------------------------------------------------------- */
.site-footer {
  background: var(--color-surface-2);
  color: var(--color-text-secondary);
  padding: 6rem 0 1.5rem;
  border-top: 1px solid var(--color-border);
}
.footer-brand img { height: 64px; width: auto; margin-bottom: 1.25rem; }
.footer-grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: 3rem;
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-heading {
  font-family: var(--font-body); font-weight: 500; font-size: .7rem;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--color-accent-light); margin-bottom: 1.5rem;
}
.footer-list li { margin-bottom: .75rem; font-size: .9rem; }
.footer-list a { color: var(--color-text-secondary); transition: color .25s; }
.footer-list a:hover { color: var(--color-accent-light); }

.footer-bottom {
  margin-top: 4rem; padding-top: 1.75rem;
  border-top: 1px solid var(--color-border);
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  font-size: .78rem; color: var(--color-text-muted);
  flex-wrap: wrap;
}
.social-row { display: flex; gap: .75rem; }
.social-row a {
  width: 38px; height: 38px; border: 1px solid var(--color-border);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; transition: all .25s;
  color: var(--color-text-secondary);
}
.social-row a:hover { border-color: var(--color-accent); color: var(--color-accent-light); }

/* -- Hero ---------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: calc(100vh - var(--header-stack));
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden;
  padding: 5rem 0 4.5rem;
  background: var(--color-primary);
  color: var(--color-text-secondary);
}
@media (max-width: 720px) { .hero { padding: 3rem 0 3.5rem; } }
.hero__bg {
  position: absolute; inset: 0; z-index: 0;
  background-position: center; background-size: cover;
  background-color: var(--color-surface);
}
.hero__bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0,30,30,0.40) 0%, rgba(0,30,30,0.85) 70%, rgba(0,48,48,1) 100%),
    radial-gradient(80% 80% at 0% 100%, rgba(200, 146, 42, 0.12), transparent 60%);
}
.hero__inner { position: relative; z-index: 2; }
.hero__title {
  font-family: var(--font-display); font-weight: 300;
  color: var(--color-ink);
  font-size: clamp(3rem, 8vw, 7.5rem);
  line-height: 1.02; letter-spacing: -0.025em;
  max-width: 16ch;
  margin: 1.5rem 0 1.75rem;
}
.hero__sub {
  max-width: 52ch; font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  color: var(--color-text-secondary); margin-bottom: 2.75rem;
  font-weight: 300; line-height: 1.7;
}
.hero__ctas { display: flex; flex-wrap: wrap; gap: 1rem; }
.hero__vertical {
  position: absolute; right: 2rem; top: 50%;
  transform: translateY(-50%) rotate(90deg); transform-origin: right center;
  font-family: var(--font-body); font-size: .68rem; letter-spacing: .42em;
  text-transform: uppercase; color: var(--color-text-muted);
  display: none;
}
@media (min-width: 1024px) { .hero__vertical { display: block; } }
.hero__scroll {
  position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
  font-family: var(--font-body); font-size: .65rem; letter-spacing: .35em; text-transform: uppercase;
  color: var(--color-text-muted); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: .65rem;
}
.hero__scroll::after {
  content: ''; width: 1px; height: 38px; background: var(--color-text-muted);
  animation: scrollPulse 2.4s ease-in-out infinite; transform-origin: top;
}
@keyframes scrollPulse {
  0%, 100% { transform: scaleY(.4); opacity: .3; }
  50%      { transform: scaleY(1);  opacity: 1; }
}

/* -- Stats --------------------------------------------------------------- */
.stats-bar {
  background: var(--color-surface);
  padding: 4.5rem 0;
  border-block: 1px solid var(--color-border);
}
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
@media (max-width: 720px) { .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem 0; } }
.stat { text-align: center; padding: 1rem 1.25rem; border-right: 1px solid var(--color-border); }
.stat:last-child { border-right: 0; }
@media (max-width: 720px) { .stat:nth-child(2n) { border-right: 0; } }
.stat__num {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(2.75rem, 5.5vw, 4.5rem);
  color: var(--color-accent-light); line-height: 1;
}
.stat__plus { font-size: .55em; vertical-align: super; color: var(--color-accent); }
.stat__label {
  margin-top: .85rem; font-size: .7rem; letter-spacing: .3em;
  text-transform: uppercase; color: var(--color-text-muted);
}

/* -- Split (about) ------------------------------------------------------ */
.split {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.split__media {
  position: relative; aspect-ratio: 4/5; overflow: hidden;
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}
.split__media img { width: 100%; height: 100%; object-fit: cover; }

/* -- Service / generic cards ------------------------------------------- */
.cards-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem; margin-top: 3rem;
}
@media (max-width: 900px) { .cards-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .cards-grid { grid-template-columns: 1fr; } }

.service-card {
  position: relative;
  padding: 2.5rem 2rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  transition: transform .4s var(--ease-out), border-color .35s, box-shadow .35s, background .35s;
  display: block;
  color: var(--color-text-secondary);
}
.service-card::before {
  content: ''; position: absolute; left: 0; top: 0; right: 0; height: 2px;
  background: var(--color-accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .55s var(--ease-out);
}
.service-card:hover {
  transform: translateY(-6px);
  border-color: var(--color-accent);
  background: var(--color-surface-3);
  box-shadow: var(--shadow-lg);
}
.service-card:hover::before { transform: scaleX(1); }
.service-card__icon {
  width: 44px; height: 44px; color: var(--color-accent-light);
  margin-bottom: 1.5rem;
}
.service-card__title {
  font-family: var(--font-heading); font-weight: 600;
  font-size: 1.1rem; color: var(--color-ink);
  margin-bottom: .85rem; letter-spacing: -0.005em;
}
.service-card__desc {
  font-size: .92rem; line-height: 1.7;
  color: var(--color-text-secondary);
}

/* -- Project filter + grid -------------------------------------------- */
.filter-tabs {
  display: flex; flex-wrap: wrap; gap: .5rem; margin-block: 2.5rem 2.25rem;
  justify-content: center;
}
.filter-tab {
  padding: .75rem 1.4rem;
  font-family: var(--font-body); font-size: .72rem; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  background: transparent;
  transition: all .3s;
  cursor: pointer;
}
.filter-tab.is-active, .filter-tab:hover {
  background: var(--color-accent); color: var(--color-primary); border-color: var(--color-accent);
}

.projects-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem;
}
@media (max-width: 900px) { .projects-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .projects-grid { grid-template-columns: 1fr; } }

.project-card {
  position: relative; aspect-ratio: 4/5; overflow: hidden;
  background: var(--color-surface);
  display: block;
}
.project-card__img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform .9s var(--ease-out);
}
.project-card:hover .project-card__img { transform: scale(1.07); }
.project-card__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(0,18,18,0.95) 100%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 2rem 1.85rem;
  color: var(--color-ink);
}
.project-card__badge {
  position: absolute; top: 1.25rem; right: 1.25rem;
  padding: .4rem .85rem;
  font-family: var(--font-body); font-size: .62rem; font-weight: 500;
  letter-spacing: .28em; text-transform: uppercase;
  background: var(--color-accent); color: var(--color-primary);
}
.project-card__badge--completed { background: var(--color-ink); color: var(--color-primary); }
.project-card__type {
  font-size: .68rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--color-accent-light); margin-bottom: .35rem; font-weight: 500;
}
.project-card__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: 1.55rem; color: var(--color-ink);
  line-height: 1.15; margin-bottom: .35rem;
}
.project-card__location { font-size: .85rem; color: var(--color-text-secondary); }

/* -- Why us / numbered grid --------------------------------------------- */
.why-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem 2.5rem;
  margin-top: 4rem;
}
@media (max-width: 900px) { .why-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .why-grid { grid-template-columns: 1fr; } }
.why-item__num {
  font-family: var(--font-display); font-weight: 300;
  font-size: 3.5rem; color: var(--color-accent);
  opacity: .65;
  line-height: 1; margin-bottom: 1.25rem;
}
.why-item__title {
  font-family: var(--font-heading); font-weight: 600;
  font-size: 1.1rem; color: var(--color-ink);
  margin-bottom: .75rem;
}
.why-item__desc { font-size: .92rem; line-height: 1.7; }

/* -- Testimonials ------------------------------------------------------- */
.testimonial { text-align: center; max-width: 760px; margin: 0 auto; padding: 0 1rem; }
.testimonial__mark {
  font-family: var(--font-display); font-weight: 300;
  font-size: 6rem; line-height: .5; color: var(--color-accent);
  display: block; margin-bottom: 1.5rem;
}
.testimonial__text {
  font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: clamp(1.2rem, 2.2vw, 1.85rem); line-height: 1.5;
  color: var(--color-ink); margin-bottom: 2rem;
}
.testimonial__name {
  font-family: var(--font-body); font-weight: 500;
  letter-spacing: .25em; text-transform: uppercase;
  font-size: .76rem; color: var(--color-accent-light);
}
.testimonial__project { font-size: .8rem; color: var(--color-text-muted); margin-top: .35rem; }
.testimonial-controls {
  display: flex; justify-content: center; gap: 1.5rem; margin-top: 2.75rem;
}
.testimonial-controls button {
  width: 46px; height: 46px; border: 1px solid var(--color-border-strong);
  border-radius: 50%; color: var(--color-text-secondary);
  transition: all .25s;
}
.testimonial-controls button:hover { border-color: var(--color-accent); color: var(--color-accent-light); }

/* -- CTA banner --------------------------------------------------------- */
.cta-banner {
  position: relative; padding: clamp(5rem, 12vw, 9rem) 0;
  text-align: center; overflow: hidden;
  background: var(--color-surface-2);
  color: var(--color-text-secondary);
}
.cta-banner h1, .cta-banner h2, .cta-banner h3 { color: var(--color-ink); }
.cta-banner__bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  opacity: .4;
}
.cta-banner__bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,30,30,0.65), rgba(0,18,18,0.92));
}
.cta-banner__inner { position: relative; z-index: 2; }

/* -- Floating buttons --------------------------------------------------- */
.floater-whatsapp {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 70;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25D366; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 36px rgba(0,0,0,.4);
  animation: pulse 2.5s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 12px 36px rgba(0,0,0,.4), 0 0 0 0 rgba(37,211,102,.55); }
  70%{ box-shadow: 0 12px 36px rgba(0,0,0,.4), 0 0 0 16px rgba(37,211,102,0); }
  100%{ box-shadow: 0 12px 36px rgba(0,0,0,.4), 0 0 0 0 rgba(37,211,102,0); }
}
.floater-top {
  position: fixed; right: 1.25rem; bottom: 5.75rem; z-index: 70;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--color-accent); color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .3s, visibility .3s, transform .3s;
  box-shadow: var(--shadow-md);
}
.floater-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }

/* -- Cookie bar --------------------------------------------------------- */
.cookie-bar {
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 95;
  background: var(--color-surface);
  color: var(--color-ink);
  border: 1px solid var(--color-border);
  padding: 1rem 1.25rem;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem; max-width: 720px; margin: 0 auto;
  font-size: .85rem; box-shadow: var(--shadow-lg);
  transform: translateY(120%); transition: transform .4s var(--ease-out);
}
.cookie-bar.is-visible { transform: translateY(0); }
.cookie-bar__btns { display: flex; gap: .5rem; }
.cookie-bar__btns button {
  padding: .55rem 1.1rem; font-size: .7rem; letter-spacing: .22em; text-transform: uppercase;
}
.cookie-bar__btns .btn-primary { background: var(--color-accent); color: var(--color-primary); }
.cookie-bar__btns .btn-decline { color: var(--color-text-muted); }

/* -- Preloader ---------------------------------------------------------- */
.preloader {
  position: fixed; inset: 0; z-index: 200;
  background: var(--color-primary);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2rem;
  transition: opacity .8s var(--ease-out), visibility .8s;
}
.preloader.is-done { opacity: 0; visibility: hidden; }
.preloader__logo {
  max-width: min(320px, 60vw);
  width: auto;
  opacity: 0; transform: translateY(14px) scale(.96);
  animation: preIn 1.1s var(--ease-out) .15s forwards;
}
.preloader__bar {
  width: 220px; height: 1px; background: var(--color-border-strong);
  position: relative; overflow: hidden;
}
.preloader__bar::after {
  content: ''; position: absolute; inset: 0; background: var(--color-accent);
  transform-origin: left; transform: scaleX(0);
  animation: preBar 1.6s var(--ease-out) .3s forwards;
}
.preloader__sub {
  font-family: var(--font-body); font-size: .65rem; letter-spacing: .42em;
  text-transform: uppercase; color: var(--color-text-muted);
  opacity: 0; animation: preIn 1s var(--ease-out) .55s forwards;
}
@keyframes preIn { to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes preBar { to { transform: scaleX(1); } }

/* -- Custom cursor (desktop only) -------------------------------------- */
.cursor-dot, .cursor-ring {
  position: fixed; top: 0; left: 0; z-index: 999;
  pointer-events: none; transform: translate(-50%, -50%);
  display: none;
}
.cursor-dot {
  width: 6px; height: 6px; background: var(--color-accent-light);
  border-radius: 50%;
}
.cursor-ring {
  width: 36px; height: 36px;
  border: 1px solid var(--color-accent);
  border-radius: 50%;
  transition: width .3s var(--ease-out), height .3s var(--ease-out),
              background .25s, border-color .25s;
}
@media (pointer: fine) and (hover: hover) {
  body:not(.no-cursor) .cursor-dot,
  body:not(.no-cursor) .cursor-ring { display: block; }
}
.cursor-ring.is-hover {
  width: 64px; height: 64px;
  background: var(--color-accent-soft);
  border-color: var(--color-accent-light);
}

/* -- Scroll reveal ----------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(48px); }
.is-revealed { opacity: 1; transform: translateY(0); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); }

/* -- Word reveal ------------------------------------------------------- */
.split-line { display: block; overflow: hidden; }
.split-line > span { display: inline-block; transform: translateY(110%); }

/* -- Reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .reveal { opacity: 1; transform: none; }
  .preloader { display: none; }
}

/* ===========================================================================
   Hero frame sequence (home page)
   Scroll-driven image sequence painted to a canvas. Replaces the static hero.
   =========================================================================== */

/* .seq   — tall spacer; height written by sequence.js as (travel + one stage).
   .seq__stage — pins to the viewport for the whole of that travel.
   The site header is sticky at top:0 / z-index:90 and deliberately floats over
   the canvas, the way it previously floated over .hero__bg. */
.seq {
  position: relative;
  background: #2b2b2d;                 /* matches the studio backdrop in frames */
  margin-top: calc(-1 * var(--header-stack));
}

.seq__stage {
  position: sticky; top: 0;
  height: 100vh;
  height: 100svh;                      /* stays put while mobile chrome collapses */
  overflow: hidden;
  background: #2b2b2d;
}

/* object-fit does the cover-crop the 2D context used to do by hand. */
.seq__video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Vignette + scrims: keep the header and captions legible over any frame
   without flattening the render. */
.seq__scrim {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    linear-gradient(180deg, rgba(0,30,30,.72) 0%, rgba(0,30,30,.18) 24%,
                            rgba(0,30,30,.10) 46%, rgba(0,30,30,.88) 100%),
    radial-gradient(85% 70% at 8% 92%, rgba(200,146,42,.16), transparent 62%);
}

/* -- Captions -------------------------------------------------------------- */
.seq__content {
  position: absolute; inset: auto 0 0 0; z-index: 3;
  padding-bottom: clamp(5rem, 15vh, 9rem);
  pointer-events: none;
}
.seq__cap {
  grid-area: 1 / 1;                    /* stack every caption in one cell */
  opacity: 0;
  will-change: opacity, transform;
}
.seq__caps { display: grid; }
.seq__cap > * { pointer-events: auto; }

.seq__title {
  font-family: var(--font-display); font-weight: 300; color: var(--color-ink);
  font-size: clamp(2.6rem, 7vw, 6.2rem);
  line-height: 1.02; letter-spacing: -.025em;
  max-width: 15ch;
  margin: 1.25rem 0 1.5rem;
}
.seq__title .italic-accent { font-style: italic; color: var(--color-accent-light); }

.seq__sub {
  max-width: 46ch; margin: 0 0 2.25rem;
  font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.7;
  color: var(--color-text-secondary);
}

/* -- Loader ---------------------------------------------------------------- */
.seq__loader {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.4rem; background: var(--color-primary);
  transition: opacity .9s var(--ease-out), visibility .9s;
}
.seq__loader.is-done { opacity: 0; visibility: hidden; }
.seq__loader-track { width: min(240px, 46vw); height: 1px; background: var(--color-border); overflow: hidden; }
.seq__loader-bar   { display: block; height: 100%; width: 0%; background: var(--color-accent); transition: width .25s linear; }
.seq__loader-pct   { font-size: .65rem; letter-spacing: .28em; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }

/* -- Progress rail --------------------------------------------------------- */
.seq__rail {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px; z-index: 4;
  background: rgba(244,239,227,.08);
}
.seq__rail span {
  display: block; height: 100%; width: 100%;
  transform: scaleX(0); transform-origin: left center;
  background: var(--color-accent);
}

/* -- Scroll hint ----------------------------------------------------------- */
.seq__hint {
  position: absolute; bottom: 1.75rem; left: 50%; transform: translateX(-50%);
  z-index: 4; display: flex; flex-direction: column; align-items: center; gap: .65rem;
  font-size: .65rem; letter-spacing: .35em; text-transform: uppercase;
  color: var(--color-text-muted);
  transition: opacity .6s var(--ease-out);
}
.seq__hint.is-hidden { opacity: 0; }
.seq__hint::after {
  content: ''; width: 1px; height: 38px; background: var(--color-text-muted);
  animation: scrollPulse 2.4s ease-in-out infinite; transform-origin: top;
}

/* Frames missing (not yet deployed) — fall back to the flat brand background
   rather than a black stage. */
.seq--unavailable .seq__stage { background: var(--color-primary); }
.seq--unavailable .seq__rail,
.seq--unavailable .seq__hint { display: none; }

/* ---------------------------------------------------------------------------
   Narrow / portrait viewports.
   The frames are 16:9. Cover-fitting them into a portrait viewport crops more
   than half the width and cuts the building in two. Instead the canvas becomes
   a fixed-ratio band below the header, and captions take the space beneath it.
   The video is object-fit: cover inside that band, so the crop follows the
   band rather than the viewport.
   --------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .seq__video {
    position: absolute; top: clamp(5rem, 13vh, 7.5rem); left: 0; right: 0;
    width: 100%; height: auto; aspect-ratio: 3 / 2;
  }
  .seq__scrim {
    background: linear-gradient(180deg, rgba(0,30,30,.7) 0%, rgba(0,30,30,.1) 16%,
                                        rgba(0,30,30,.1) 42%, rgba(0,30,30,.94) 68%);
  }
  .seq__content { padding-bottom: clamp(3.5rem, 11vh, 6rem); }
  .seq__title   { font-size: clamp(2.1rem, 9vw, 3.2rem); max-width: none; }
  .seq__sub     { max-width: none; font-size: .95rem; margin-bottom: 1.75rem; }
  .seq__hint    { display: none; }
}

/* Landscape phones: viewport is wider than the band ratio anyway — full bleed. */
@media (max-height: 520px) and (orientation: landscape) {
  .seq__video { position: static; width: 100%; height: 100%; aspect-ratio: auto; }
  .seq__content { padding-bottom: 2rem; }
  .seq__sub { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .seq__loader { transition: none; }
}

/* ===========================================================================
   Story — pinned editorial scroll section (home)
   Light interlude between the dark hero and the rest of the page.
   Driven by assets/js/story.js (GSAP ScrollTrigger, scrubbed).
   =========================================================================== */

.story {
  --story-bg:      #F7F3E8;
  --story-ink:     #16150F;
  --story-muted:   rgba(22, 21, 15, .62);
  --story-hair:    rgba(22, 21, 15, .14);
  --story-radius:  24px;
  --story-shadow:  0 30px 80px rgba(0, 0, 0, .12);

  position: relative;
  background: var(--story-bg);
  color: var(--story-ink);
}

/* The stage is what ScrollTrigger pins; it must be exactly one viewport.
   100svh so mobile chrome collapsing does not resize the pinned element. */
.story__stage {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--story-bg);
}

.story__inner { position: relative; height: 100%; }

/* -- Headline -------------------------------------------------------------- */
/* left: var(--gutter), not 0. .story__inner is a .container, and a .container
   holds the site's gutter as horizontal *padding* — but an absolutely
   positioned child resolves its offsets against the padding box, so `left: 0`
   skipped that padding entirely and pinned the headline to the container's
   border edge. Below 1320px the container is full-bleed, so that edge is the
   viewport edge: the headline sat hard against the left of the screen with no
   gutter at all, out of line with every other section. Above 1320px it was
   still one gutter to the left of everything else. */
.story__headline {
  position: absolute;
  top: clamp(4.5rem, 9vh, 7rem);
  left: var(--gutter);
  z-index: 4;
  max-width: 15ch;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.2rem, 5.4vw, 4.6rem);
  line-height: 1.04;
  letter-spacing: -.025em;
  color: var(--story-ink);
  will-change: transform;
}
.story__headline em { font-style: italic; color: #9C7415; }

/* -- Card field ------------------------------------------------------------ */
.story__field { position: absolute; inset: 0; z-index: 2; }

/* Outer element carries parallax drift only — see the note in story.js. */
.story__card {
  position: absolute;
  margin: 0;
  will-change: transform;
}
/* Inner element carries the entrance (y / scale / rotation / opacity). */
.story__cardInner {
  border-radius: var(--story-radius);
  overflow: hidden;
  box-shadow: var(--story-shadow);
  background: #E8E2D3;
  will-change: transform, opacity;
  /* Promote to its own layer so the scrub never repaints the card contents. */
  transform: translateZ(0);
}
/* Fixed-ratio boxes: the image can never reflow the layout as it loads. */
.story__cardInner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* GSAP owns opacity once it is confirmed present. Until then — and forever if
   the CDN is blocked — cards stay visible (see .is-static). */
.story.is-live .story__cardInner { opacity: 0; }

/* Positions are tuned so the two portrait cards (2 and 4) stack diagonally on
   the right without colliding, and nothing crosses into the headline (top
   left) or the copy column (bottom left, ~36% wide). */
.story__card--1 { left: 42%; top:  5%; width: 28%; z-index: 3; }
.story__card--2 { left: 74%; top: 30%; width: 20%; z-index: 1; }
.story__card--3 { left: 38%; top: 53%; width: 26%; z-index: 5; }
.story__card--4 { left: 68%; top:  4%; width: 15%; z-index: 2; }
.story__card--5 { left: 62%; top: 67%; width: 24%; z-index: 4; }

/* Each ratio is the photo's native ratio, so object-fit: cover never actually
   crops. Change the image and you must change the ratio with it. */
.story__card--1 .story__cardInner { aspect-ratio: 1332 / 1181; }  /* commercial-aerial  */
.story__card--2 .story__cardInner { aspect-ratio:  900 / 1600; }  /* aion-corner        */
.story__card--3 .story__cardInner { aspect-ratio: 1325 /  881; }  /* apartment-dusk     */
.story__card--4 .story__cardInner { aspect-ratio:  900 / 1600; }  /* aion-showroom      */
.story__card--5 .story__cardInner { aspect-ratio: 1600 /  900; }  /* residence-brick    */

/* -- Copy ------------------------------------------------------------------ */
.story__copy {
  position: absolute;
  left: var(--gutter);                 /* same padding-box issue as the headline */
  bottom: clamp(3.5rem, 9vh, 6.5rem);
  z-index: 4;
  width: min(30rem, 36vw);
  /* Blocks stack in one grid cell and cross-fade. */
  display: grid;
}
.story__block {
  grid-area: 1 / 1;
  will-change: transform, opacity;
}
.story.is-live .story__block { opacity: 0; }

.story__eyebrow {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: .68rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #9C7415;
  margin-bottom: 1rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--story-hair);
}
.story__text {
  margin: 0;
  font-size: clamp(.95rem, 1.25vw, 1.08rem);
  line-height: 1.7;
  color: var(--story-muted);
}
.story__link {
  display: inline-block;
  margin-top: 1.4rem;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--story-ink);
  padding-bottom: .4rem;
  border-bottom: 1px solid #9C7415;
  transition: letter-spacing .4s var(--ease-out);
}
.story__link:hover { letter-spacing: .28em; }

/* ---------------------------------------------------------------------------
   No-JS / reduced-motion fallback.
   The pinned choreography is decorative; the content is not. Without GSAP the
   section becomes an ordinary flowing layout with everything visible.
   --------------------------------------------------------------------------- */
.story.is-static .story__stage { height: auto; padding: var(--section-y) 0; }
.story.is-static .story__inner { height: auto; }
.story.is-static .story__headline,
.story.is-static .story__copy,
.story.is-static .story__field { position: static; }
.story.is-static .story__headline { max-width: 20ch; margin-bottom: 3rem; }
.story.is-static .story__field {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  margin-bottom: 3rem;
}
.story.is-static .story__card { position: static; width: auto; }
.story.is-static .story__copy { width: min(46rem, 100%); display: grid; gap: 2.5rem; }
.story.is-static .story__block { grid-area: auto; opacity: 1; }

/* -- Responsive ------------------------------------------------------------ */
@media (max-width: 1024px) {
  .story__copy { width: min(24rem, 42vw); }
  .story__card--1 { left: 38%; width: 31%; }
  .story__card--3 { left: 36%; width: 29%; }
  .story__card--2 { width: 22%; }
}

@media (max-width: 720px) {
  /* Cards take the upper two-thirds, copy owns the bottom third. Five cards in
     a phone viewport would be soup, so the two smallest step out. */
  .story__headline {
    top: clamp(3.5rem, 7vh, 5rem);
    font-size: clamp(1.9rem, 8.5vw, 2.6rem);
    max-width: 12ch;
  }
  /* Card 2 is portrait, so it needs less width than a landscape slot would to
     occupy the same height. */
  .story__card--1 { left:  0%; top: 28%; width: 56%; }
  .story__card--2 { left: 62%; top: 18%; width: 34%; }
  .story__card--3 { left: 16%; top: 54%; width: 54%; }
  .story__card--4,
  .story__card--5 { display: none; }

  .story__copy {
    /* right + auto, not width:100%: a percentage width here resolves against
       the padding box, so 100% reached past the gutter on the right too. */
    right: var(--gutter);
    width: auto;
    bottom: clamp(2rem, 6vh, 3.5rem);
  }
  .story__text { font-size: .92rem; }
}

@media (max-height: 560px) and (orientation: landscape) {
  .story__headline { font-size: clamp(1.5rem, 4vw, 2rem); top: 3.5rem; }
  .story__copy { bottom: 1.5rem; width: min(20rem, 40vw); }
  .story__text { display: none; }
}

/* ===========================================================================
   Services — pinned cinematic sequence (home)
   One service per viewport, driven by assets/js/services.js.
   Layout: content column on the left against a vertical index rail; the
   photograph bleeds full-height off the right edge and fades into the green.
   =========================================================================== */

.svc {
  --svc-bg:     #063B37;   /* dark emerald */
  --svc-gold:   #D4A43A;
  --svc-ink:    #F4EFE3;
  --svc-muted:  rgba(244, 239, 227, .58);
  --svc-hair:   rgba(244, 239, 227, .12);

  position: relative;
  background: var(--svc-bg);
  color: var(--svc-ink);
}

.svc__stage {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

/* -- Background ------------------------------------------------------------ */
.svc__bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }

.svc__grid {
  position: absolute; inset: -10%;
  background-image:
    linear-gradient(to right,  rgba(244,239,227,.9) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(244,239,227,.9) 1px, transparent 1px);
  background-size: 110px 110px;
  opacity: .035;
  animation: svcDrift 46s linear infinite;
  will-change: transform;
}
@keyframes svcDrift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-110px, -110px, 0); }
}

.svc__glow {
  position: absolute; inset: 0;
  background: radial-gradient(52% 60% at 22% 46%, rgba(212,164,58,.09), transparent 64%);
}

/* -- Index rail ------------------------------------------------------------ */
/* Full-height hairline the numbers sit against. */
.svc__hairline {
  position: absolute; z-index: 3;
  left: clamp(4.5rem, 7.5vw, 8.5rem);
  top: 0; bottom: 0; width: 1px;
  background: var(--svc-hair);
}

.svc__rail {
  position: absolute; z-index: 5;
  left: clamp(1.6rem, 3.4vw, 3.9rem);
  top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column;
  gap: clamp(1rem, 3.4vh, 2.1rem);
}

.svc__railItem {
  position: relative;
  font-family: var(--font-body); font-weight: 400;
  font-size: .82rem; letter-spacing: .16em;
  color: var(--svc-muted);
  padding: .1rem 0;
  text-align: left;
  transition: color .5s var(--ease-out);
}
/* Lead line grows out towards the hairline when active. */
.svc__railItem::after {
  content: ""; position: absolute; top: 50%; left: calc(100% + .75rem);
  width: clamp(1.6rem, 3vw, 3rem); height: 1px;
  background: var(--svc-gold);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .6s var(--ease-out);
}
.svc__railItem.is-active { color: var(--svc-gold); }
.svc__railItem.is-active::after { transform: scaleX(1); }

/* -- Items ----------------------------------------------------------------- */
/* Must fill the stage: all children are absolutely positioned, so a relatively
   positioned wrapper would collapse to zero height and drop the composition
   below the fold. */
.svc__items { position: absolute; inset: 0; }

.svc__item {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: 47% 53%;
  align-items: center;
  opacity: 0;
  pointer-events: none;
}
.svc__item.is-active { opacity: 1; pointer-events: auto; }

/* Until JS confirms GSAP, show only the first — never six stacked at once. */
.svc:not(.is-live):not(.is-static) .svc__item { opacity: 0; }
.svc:not(.is-live):not(.is-static) .svc__item:first-child { opacity: 1; }

/* -- Text column ----------------------------------------------------------- */
.svc__text {
  position: relative; z-index: 3;
  /* Left padding clears the rail and its hairline. */
  padding: 0 clamp(1.5rem, 3vw, 3rem) 0 clamp(7rem, 11.5vw, 13rem);
}

.svc__eyebrow {
  display: flex; align-items: center; gap: 1rem;
  font-family: var(--font-body); font-weight: 500;
  font-size: .7rem; letter-spacing: .34em; text-transform: uppercase;
  color: var(--svc-gold);
  margin-bottom: clamp(1.25rem, 3vh, 2rem);
}
.svc__eyebrow span { width: clamp(1.5rem, 3vw, 2.6rem); height: 1px; background: var(--svc-gold); }

.svc__title {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(2.4rem, 4.6vw, 4.6rem);
  line-height: 1.02; letter-spacing: -.015em;
  margin: 0 0 clamp(1.25rem, 3vh, 2rem);
  will-change: transform, opacity;
}
.svc__titleTop,
.svc__titleBot { display: block; }
.svc__titleTop { color: var(--svc-ink); }
.svc__titleBot { color: var(--svc-gold); }
/* Reserve both lines so the block never shifts between services. */
.svc__title { min-height: calc(1.02em * 2); }

.svc__desc {
  margin: 0;
  max-width: 40ch;
  font-size: clamp(.94rem, 1.15vw, 1.06rem);
  line-height: 1.85;
  color: var(--svc-muted);
  /* Descriptions run two or three lines — reserve three. */
  min-height: calc(1.85em * 3);
}
.svc__word { display: inline-block; will-change: transform, opacity; }

.svc__rule {
  display: block; width: clamp(2.5rem, 5vw, 4rem); height: 1px;
  background: var(--svc-gold); opacity: .55;
  margin: clamp(1.5rem, 3.4vh, 2.4rem) 0;
}

/* -- Stat row -------------------------------------------------------------- */
.svc__stats {
  display: flex; flex-wrap: wrap;
  gap: clamp(1.5rem, 3.6vw, 3.4rem);
  margin: 0 0 clamp(1.75rem, 4vh, 2.8rem);
}
.svc__stat { display: grid; gap: .5rem; will-change: transform, opacity; }
.svc__statIcon { width: 26px; height: 26px; color: var(--svc-gold); }
.svc__statValue {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(1.6rem, 2.3vw, 2.2rem); line-height: 1;
  color: var(--svc-ink);
}
.svc__statLabel {
  font-family: var(--font-body); font-size: .74rem;
  letter-spacing: .08em; color: var(--svc-muted);
}

/* -- CTA — bordered gold box ----------------------------------------------- */
.svc__cta {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 2.5rem;
  padding: 1.05rem 1.9rem;
  border: 1px solid var(--svc-gold);
  font-family: var(--font-body); font-weight: 500;
  font-size: .74rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--svc-gold);
  transition: color .45s var(--ease-out);
  will-change: transform, opacity;
}
/* Gold fill wipes in from the left on hover. */
.svc__cta::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: var(--svc-gold);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .55s var(--ease-out);
}
.svc__cta:hover { color: var(--svc-bg); }
.svc__cta:hover::before { transform: scaleX(1); }
.svc__cta span, .svc__cta i { position: relative; z-index: 1; }
.svc__cta i { font-style: normal; transition: transform .5s var(--ease-out); }
.svc__cta:hover i { transform: translateX(7px); }

/* -- Media — full-bleed off the right edge ---------------------------------- */
.svc__media {
  position: relative;
  /* <figure> carries a UA default of `margin: 1em 40px`, which stops the photo
     reaching the right edge of the viewport. */
  margin: 0;
  width: 100%;
  height: 100%;
  align-self: stretch;
  overflow: hidden;
  will-change: transform;            /* mouse parallax */
  transition: filter .6s var(--ease-out);
}
.svc__media.is-hover { filter: brightness(1.06); }

/* Entrance transform lives here; the Ken Burns scale lives on the <img>.
   Separate elements so the two tweens never overwrite each other. */
.svc__figure { position: absolute; inset: 0; will-change: transform, opacity; }
.svc__figure img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }

/* Fades the photograph into the emerald on its left edge and softens the top
   so the fixed site header stays legible over it. */
.svc__vignette {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to right, var(--svc-bg) 0%, rgba(6,59,55,.86) 14%, rgba(6,59,55,0) 46%),
    linear-gradient(to bottom, rgba(3,30,28,.6) 0%, rgba(3,30,28,0) 22%),
    linear-gradient(to top, rgba(3,30,28,.45) 0%, rgba(3,30,28,0) 26%);
}

/* -- Step controls --------------------------------------------------------- */
.svc__nav { position: absolute; z-index: 6; display: flex; }
.svc__nav button {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border: 1px solid var(--svc-hair);
  color: var(--svc-ink);
  font-size: 1rem; line-height: 1;
  transition: color .4s var(--ease-out), border-color .4s var(--ease-out),
              background .4s var(--ease-out);
}
.svc__nav button:hover { color: var(--svc-gold); border-color: var(--svc-gold); background: rgba(212,164,58,.08); }
.svc__nav button:disabled { opacity: .3; pointer-events: none; }

.svc__nav--v {
  flex-direction: column;
  left: clamp(1.6rem, 3.4vw, 3.9rem);
  bottom: clamp(2rem, 6vh, 3.5rem);
}
.svc__nav--v button + button { border-top: 0; }

.svc__nav--h {
  right: clamp(1.75rem, 3.5vw, 3.5rem);
  bottom: clamp(2rem, 6vh, 3.5rem);
}
.svc__nav--h button + button { border-left: 0; }

/* -- Explore cursor -------------------------------------------------------- */
.svc__cursor {
  position: fixed; top: 0; left: 0; z-index: 90;
  width: 92px; height: 92px; margin: -46px 0 0 -46px;
  border-radius: 50%;
  border: 1px solid rgba(212, 164, 58, .4);
  background: rgba(6, 59, 55, .5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: grid; place-items: center;
  font-family: var(--font-body); font-weight: 500;
  font-size: .58rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--svc-gold);
  opacity: 0; transform: scale(.7);
  transition: opacity .35s var(--ease-out), transform .35s var(--ease-out);
  pointer-events: none;
}
.svc__cursor.is-visible { opacity: 1; transform: scale(1); }

/* ---------------------------------------------------------------------------
   Tablet — image above, content below.
   --------------------------------------------------------------------------- */
@media (max-width: 1100px) and (min-width: 861px) {
  .svc__item { grid-template-columns: 1fr; grid-template-rows: 46% auto; align-content: center; }
  .svc__media { height: 100%; }
  .svc__vignette {
    background:
      linear-gradient(to bottom, rgba(3,30,28,.5) 0%, rgba(3,30,28,0) 30%),
      linear-gradient(to top, var(--svc-bg) 0%, rgba(6,59,55,0) 34%);
  }
  .svc__text { padding: 2rem clamp(2rem, 5vw, 3.5rem) 0 clamp(6rem, 10vw, 8rem); }
  .svc__title { font-size: clamp(2rem, 5vw, 3rem); }
  .svc__desc { max-width: none; min-height: 0; }
  .svc__hairline { display: none; }
}

/* ---------------------------------------------------------------------------
   Mobile — no pinning. The same markup becomes a horizontal snap scroller.
   --------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .svc__stage {
    height: auto;
    padding: clamp(3.5rem, 10vh, 5rem) 0 clamp(3rem, 8vh, 4rem);
  }

  .svc__items {
    position: static;
    display: flex; gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 6vw;
  }
  .svc__items::-webkit-scrollbar { display: none; }

  .svc__item {
    position: static;
    flex: 0 0 86%;
    scroll-snap-align: center;
    display: block;
    opacity: 1;
    pointer-events: auto;
  }
  .svc:not(.is-live) .svc__item,
  .svc.is-live .svc__item { opacity: 1; }

  /* margin-top, not just bottom. The 1100-861px block above puts the image
     *above* the copy, so a bottom margin is the right separator there. Here the
     DOM order stands — .svc__text then .svc__media — so the bottom margin only
     padded the end of the card, and "Explore Projects" sat flush against the
     top edge of the photograph with a measured 0px between them. */
  .svc__media { height: auto; aspect-ratio: 4 / 3; border-radius: 18px; margin: 1.75rem 0 1.5rem; }
  .svc__figure img { transform: none !important; }        /* no Ken Burns */
  .svc__vignette { background: linear-gradient(to top, rgba(3,30,28,.5), transparent 45%); border-radius: inherit; }

  .svc__text { padding: 0; }
  .svc__title { font-size: clamp(1.7rem, 7vw, 2.3rem); min-height: 0; }
  .svc__desc  { max-width: none; min-height: 0; }
  .svc__stats { gap: 1.25rem 2rem; }
  .svc__statValue { font-size: 1.4rem; }

  .svc__hairline, .svc__nav--v, .svc__cursor { display: none; }
  .svc__rail {
    position: static; transform: none;
    flex-direction: row; justify-content: center;
    gap: 1.1rem; margin-bottom: 2rem;
  }
  .svc__railItem::after { display: none; }
  .svc__nav--h { position: static; justify-content: center; margin-top: 2rem; }
}

/* -- No JS / reduced motion ------------------------------------------------- */
.svc.is-static .svc__stage { height: auto; padding: var(--section-y) 0; }
.svc.is-static .svc__items { position: static; display: grid; gap: 5rem; }
.svc.is-static .svc__item  { position: static; opacity: 1; pointer-events: auto; }
.svc.is-static .svc__rail,
.svc.is-static .svc__nav,
.svc.is-static .svc__hairline { display: none; }

@media (prefers-reduced-motion: reduce) {
  .svc__grid { animation: none; }
  .svc__figure img { transform: none !important; }
}

/* ===========================================================================
   Current Projects — two cinematic panels (home)
   Driven by assets/js/projects.js.
   =========================================================================== */

.cp {
  --cp-bg:    #04302C;
  --cp-gold:  #D4A43A;
  --cp-ink:   #F4EFE3;
  --cp-muted: rgba(244, 239, 227, .66);

  position: relative;
  background: var(--cp-bg);
  color: var(--cp-ink);
  padding: clamp(5rem, 12vh, 8rem) 0 clamp(4rem, 10vh, 7rem);
  overflow: hidden;
}

/* -- Background: slow blueprint contours ----------------------------------- */
.cp__bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.cp__contours {
  position: absolute; inset: -25%;
  opacity: .04;
  background-image:
    repeating-radial-gradient(circle at 18% 30%, transparent 0 58px, var(--cp-ink) 58px 59px),
    repeating-radial-gradient(circle at 82% 74%, transparent 0 74px, var(--cp-ink) 74px 75px);
  animation: cpContours 68s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes cpContours {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-3%, -2%, 0) scale(1.06); }
}

/* -- Heading --------------------------------------------------------------- */
.cp__head {
  position: relative; z-index: 2;
  width: 80%; max-width: var(--container);
  margin: 0 auto clamp(3rem, 8vh, 5rem);
}
.cp__eyebrow {
  display: flex; align-items: center; gap: 1rem;
  font-family: var(--font-body); font-weight: 500;
  font-size: .7rem; letter-spacing: .34em; text-transform: uppercase;
  color: var(--cp-gold);
  margin-bottom: 1.25rem;
}
.cp__eyebrow::before { content: ""; width: 2.4rem; height: 1px; background: var(--cp-gold); }

.cp__title {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(2.4rem, 6vw, 5rem);
  line-height: 1.02; letter-spacing: -.02em;
  margin: 0 0 1.25rem;
  /* Characters translate out of a clipped line during the reveal. */
  overflow: hidden;
}
.cp__char { display: inline-block; will-change: transform, opacity; }

.cp__lede { margin: 0; max-width: 46ch; color: var(--cp-muted); }

/* -- Panels ---------------------------------------------------------------- */
.cp__panels { position: relative; z-index: 2; }

/* Sticky is what makes the pair read as one move: the first stays put while
   the second climbs over it. */
.cp__panel {
  position: sticky;
  top: 10vh;
  width: 80%;
  max-width: 1500px;
  height: 80vh;
  margin: 0 auto clamp(4rem, 12vh, 9rem);
  border-radius: 28px;
  isolation: isolate;
}
.cp__panel:last-child { margin-bottom: 0; }

.cp__media {
  position: absolute; inset: 0;
  overflow: hidden;
  border-radius: 28px;
  background: #06201E;
  will-change: transform, clip-path, filter;
  transition: box-shadow .6s var(--ease-out);
}

/* Hover zoom lives here; the slow 1.12 settle lives on the media child, so the
   two never fight over one transform. */
.cp__zoom {
  position: absolute; inset: 0;
  transition: transform .9s var(--ease-out);
}
.cp__zoom > * {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  will-change: transform;
}

/* The supplied film carries its own burned-in captions ("BUDHANILKANTHA
   HEIGHTS", "MODERN FACILITIES") across the bottom of the frame. Those are
   meant to be read, so the film is shown whole — no crop — and it is the
   site's overlay that moves out of the way instead (see .is-film below).
   The caption band occupies roughly the bottom 18% of the picture. */

.cp__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(0,0,0,0) 10%,
    rgba(0,0,0,.18) 40%,
    rgba(0,0,0,.82) 100%);
  transition: opacity .6s var(--ease-out);
}

/* -- Overlay content ------------------------------------------------------- */
.cp__badge {
  position: absolute; z-index: 3;
  top: clamp(1.25rem, 3vw, 2.25rem); left: clamp(1.25rem, 3vw, 2.25rem);
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .5rem 1rem;
  border: 1px solid rgba(244, 239, 227, .28);
  border-radius: 999px;
  background: rgba(0, 0, 0, .28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: var(--font-body); font-weight: 500;
  font-size: .62rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--cp-ink);
}
.cp__badge::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--cp-gold);
  animation: cpPulse 5s ease-in-out infinite;
}
@keyframes cpPulse {
  0%, 86%, 100% { transform: scale(1);   opacity: 1; }
  92%           { transform: scale(2.1); opacity: .35; }
}

.cp__meta {
  position: absolute; z-index: 3;
  left: clamp(1.25rem, 3vw, 2.75rem);
  bottom: clamp(1.5rem, 4vw, 2.75rem);
  max-width: 60%;
}
.cp__cat {
  font-family: var(--font-body); font-weight: 500;
  font-size: .66rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--cp-gold); margin-bottom: .75rem;
}
.cp__name {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(1.9rem, 4vw, 3.4rem);
  line-height: 1.04; color: var(--cp-ink);
  margin: 0 0 .6rem;
}
.cp__loc {
  font-size: .88rem; letter-spacing: .04em;
  color: var(--cp-muted);
}

.cp__cta {
  position: absolute; z-index: 3;
  right: clamp(1.25rem, 3vw, 2.75rem);
  bottom: clamp(1.5rem, 4vw, 2.75rem);
  display: inline-flex; align-items: center; gap: .9rem;
  font-family: var(--font-body); font-weight: 500;
  font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--cp-ink);
  padding-bottom: .5rem;
}
.cp__cta::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: var(--cp-gold);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .55s var(--ease-out);
}
.cp__cta i { font-style: normal; transition: transform .5s var(--ease-out); }
.cp__cta:hover::after { transform: scaleX(1); }
.cp__cta:hover i { transform: translateX(12px); }

/* Film panels: lift the site's overlay clear of the burned-in caption band and
   deepen the mid-gradient, since the text now sits higher up the picture where
   the default scrim is nearly transparent. */
/* 23%, not 21%: while the Ken Burns tween sits at scale(1.12) the picture is
   taller than the panel, which lifts the caption band to ~79.9% of panel
   height. The overlay has to clear the worst case, not the resting state. */
.cp__panel.is-film .cp__meta,
.cp__panel.is-film .cp__cta { bottom: 23%; }

/* The Ken Burns settle starts at scale(1.12), which from a centre origin would
   clip ~6% off every edge — including the captions — for the whole 16s tween.
   Anchoring the origin to the bottom means it only ever grows upward, so the
   caption band is never cropped. */
.cp__panel.is-film .cp__zoom > * { transform-origin: 50% 100%; }

.cp__panel.is-film .cp__scrim {
  background: linear-gradient(180deg,
    rgba(0,0,0,0) 8%,
    rgba(0,0,0,.28) 34%,
    rgba(0,0,0,.60) 62%,
    rgba(0,0,0,.72) 100%);
}

/* Gold rule that draws across as the next panel takes over. */
.cp__divider {
  position: absolute; z-index: 4;
  left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--cp-gold);
  transform: scaleX(0); transform-origin: left center;
}

/* -- Hover (desktop, fine pointer only) ------------------------------------ */
@media (hover: hover) and (pointer: fine) {
  .cp__panel { cursor: pointer; }
  .cp__panel:hover .cp__zoom { transform: scale(1.04); }
  .cp__panel:hover .cp__scrim { opacity: .82; }
  .cp__panel:hover .cp__media { box-shadow: inset 0 0 0 1px rgba(212, 164, 58, .55); }
  .cp__panel:hover .cp__cta i { transform: translateX(12px); }
  .cp__panel:hover .cp__cta::after { transform: scaleX(1); }
}

/* -- All-projects link ------------------------------------------------------ */
.cp__all {
  position: relative; z-index: 2;
  display: block; width: max-content;
  margin: clamp(3.5rem, 9vh, 6rem) auto 0;
  font-family: var(--font-body); font-weight: 500;
  font-size: .72rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--cp-muted);
  padding-bottom: .45rem;
  border-bottom: 1px solid rgba(212, 164, 58, .4);
  transition: color .45s var(--ease-out), letter-spacing .45s var(--ease-out);
}
.cp__all:hover { color: var(--cp-gold); letter-spacing: .3em; }

/* -- Responsive ------------------------------------------------------------- */
@media (max-width: 900px) {
  .cp__head, .cp__panel { width: 88%; }
  .cp__panel { height: 70vh; top: 8vh; }
  .cp__meta { max-width: 78%; }
}

@media (max-width: 620px) {
  .cp__panel { height: 62vh; border-radius: 20px; }
  .cp__media { border-radius: 20px; }
  .cp__meta { max-width: 88%; }
  .cp__cta span { display: none; }   /* arrow only */
}

/* -- No JS / reduced motion ------------------------------------------------- */
/* Sticky stacking with no scroll-driven hand-off would leave panels covering
   each other, so fall back to a plain flow. */
/* `relative`, not `static`: .cp__media is inset:0 against the panel, so a static
   panel hands that containing block to the section instead and the media box
   inflates to the whole section — which makes object-fit magnify a 720p film
   ~2x and read as a low-quality video. Relative kills the sticky, keeps the box. */
.cp.is-static .cp__panel { position: relative; }
.cp.is-static .cp__media { clip-path: none !important; border-radius: 28px !important; }
.cp.is-static .cp__divider { display: none; }

@media (prefers-reduced-motion: reduce) {
  .cp__contours { animation: none; }
  .cp__badge::before { animation: none; }
  .cp__zoom { transition: none; }
}

/* ===========================================================================
   Why Alpha Concern — staggered glass timeline (home)
   Six cards alternating left/right, linked by a stepped gold connector that
   draws itself with scroll. Driven by assets/js/why.js.
   =========================================================================== */

.why {
  --why-bg:    #063B38;
  --why-ink:   #F7F4ED;
  --why-gold:  #D4A84A;
  --why-muted: rgba(247, 244, 237, .60);
  --why-glass: rgba(255, 255, 255, .03);
  --why-edge:  rgba(212, 168, 74, .18);

  position: relative;
  isolation: isolate;
  background: var(--why-bg);
  color: var(--why-ink);
  padding: clamp(5.5rem, 14vh, 9rem) var(--gutter);
  overflow: hidden;
}

/* -- Background ------------------------------------------------------------ */
.why__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

/* Two grid densities plus diagonals reads as drafting linework rather than
   graph paper. */
.why__blueprint {
  position: absolute; inset: -20%;
  opacity: .03;
  background-image:
    linear-gradient(to right,  var(--why-ink) 1px, transparent 1px),
    linear-gradient(to bottom, var(--why-ink) 1px, transparent 1px),
    linear-gradient(to right,  var(--why-ink) 1px, transparent 1px),
    linear-gradient(to bottom, var(--why-ink) 1px, transparent 1px),
    repeating-linear-gradient(45deg, var(--why-ink) 0 1px, transparent 1px 220px);
  background-size: 160px 160px, 160px 160px, 32px 32px, 32px 32px, auto;
  animation: whyDrift 90s linear infinite;
  will-change: transform;
}
@keyframes whyDrift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-160px, -160px, 0); }
}

.why__glow {
  position: absolute; inset: 0;
  background:
    radial-gradient(42% 34% at 50% 14%, rgba(212, 168, 74, .13), transparent 68%),
    radial-gradient(70% 60% at 50% 50%, rgba(9, 74, 68, .55), transparent 72%);
}

/* -- Header ---------------------------------------------------------------- */
.why__head {
  position: relative; z-index: 2;
  max-width: 1400px; margin: 0 auto clamp(3.5rem, 9vh, 6rem);
  text-align: center;
}

.why__eyebrow {
  font-family: var(--font-body); font-weight: 600;
  font-size: .68rem; letter-spacing: .34em; text-transform: uppercase;
  color: var(--why-gold);
  margin-bottom: 1.25rem;
}
/* Short rule centred beneath the label. */
.why__eyebrow::after {
  content: ""; display: block;
  width: 26px; height: 1px; margin: 1.1rem auto 0;
  background: var(--why-gold); opacity: .7;
}

.why__title {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(2.2rem, 5.4vw, 4.6rem);
  line-height: 1.06; letter-spacing: -.02em;
  color: var(--why-ink);
  margin: 0 auto 1.4rem;
  max-width: 18ch;
}
.why__word { display: inline-block; overflow: hidden; vertical-align: bottom; }
.why__char { display: inline-block; will-change: transform, opacity; }

.why__statement {
  margin: 0 auto; max-width: 44ch;
  font-size: clamp(.95rem, 1.2vw, 1.05rem);
  line-height: 1.8; color: var(--why-muted);
}

/* -- Timeline -------------------------------------------------------------- */
.why__timeline {
  position: relative; z-index: 2;
  max-width: 1400px; margin: 0 auto;
}

/* -- Connector ------------------------------------------------------------- */
.why__wire {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}
.why__wireTrack {
  stroke: rgba(212, 168, 74, .14);
  stroke-width: 1;
}
.why__wireFill {
  stroke: var(--why-gold);
  stroke-width: 1.25;
  filter: drop-shadow(0 0 5px rgba(212, 168, 74, .65));
}
/* Short dash chased along the same path — the travelling spark. */
.why__wireSpark {
  stroke: #FFF0C4;
  stroke-width: 2.4;
  stroke-linecap: round;
  filter: drop-shadow(0 0 8px rgba(212, 168, 74, .95));
}

.why__joint {
  fill: var(--why-bg);
  stroke: rgba(212, 168, 74, .35);
  stroke-width: 1;
  transition: stroke .5s var(--ease-out), fill .5s var(--ease-out), r .5s var(--ease-out);
}
.why__joint.is-active {
  fill: var(--why-gold);
  stroke: var(--why-gold);
  filter: drop-shadow(0 0 7px rgba(212, 168, 74, .9));
}

/* -- Rows ------------------------------------------------------------------ */
.why__list { display: grid; gap: clamp(1.5rem, 4vh, 3rem); }

.why__row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}
.why__row--left  > .why__card, .why__row--left  > .why__num { grid-column: 1; }
.why__row--right > .why__card, .why__row--right > .why__num { grid-column: 2; }

/* Right-hand cards mirror their alignment, as in the reference. */
.why__row--right .why__copy { text-align: right; }

/* -- Number ---------------------------------------------------------------- */
/* Sits behind the glass, breaking past the card's outer top corner. Screen
   blending makes it part of the surface rather than a label on top of it. */
.why__num {
  position: absolute; z-index: 0;
  top: -42px;
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(64px, 7vw, 104px); line-height: .8;
  color: var(--why-gold);
  opacity: .18;
  mix-blend-mode: screen;
  pointer-events: none;
  transition: opacity .5s var(--ease-out), text-shadow .5s var(--ease-out);
}
.why__row--left  > .why__num { left: 26px; }
.why__row--right > .why__num { right: 26px; }

/* -- Card ------------------------------------------------------------------ */
.why__card {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: clamp(1.25rem, 2.4vw, 2.25rem);
  padding: 40px;
  border-radius: 24px;
  border: 1px solid var(--why-edge);
  background: var(--why-glass);
  backdrop-filter: blur(16px) saturate(115%);
  -webkit-backdrop-filter: blur(16px) saturate(115%);
  /* Transform and opacity only — nothing here can trigger layout. */
  transition:
    transform .5s var(--ease-out),
    border-color .5s var(--ease-out),
    box-shadow .5s var(--ease-out);
  will-change: transform;
}

.why__icon {
  width: 56px; height: 56px;
  color: var(--why-gold);
  flex: none;
  transition: transform .5s var(--ease-out), filter .5s var(--ease-out);
}

.why__cardTitle {
  font-family: var(--font-heading); font-weight: 600;
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
  letter-spacing: -.01em;
  color: var(--why-ink);
  margin: 0 0 .7rem;
  transition: transform .5s var(--ease-out);
}

.why__cardDesc {
  margin: 0;
  font-size: 16px;
  line-height: 1.8;
  color: var(--why-muted);
  transition: color .5s var(--ease-out);
}

/* -- Hover (desktop, fine pointer only) ------------------------------------ */
@media (hover: hover) and (pointer: fine) {
  .why__card:hover {
    transform: translateY(-10px) scale(1.02);
    border-color: rgba(212, 168, 74, .55);
    box-shadow:
      0 26px 60px rgba(0, 0, 0, .34),
      0 0 0 1px rgba(212, 168, 74, .16),
      inset 0 1px 0 rgba(255, 255, 255, .06);
  }
  .why__card:hover .why__icon {
    transform: rotate(6deg) scale(1.08);
    filter: drop-shadow(0 0 9px rgba(212, 168, 74, .6));
  }
  .why__card:hover .why__cardTitle { transform: translateY(-4px); }
  .why__card:hover .why__cardDesc  { color: rgba(247, 244, 237, .86); }
  .why__row:hover .why__num {
    opacity: .3;
    text-shadow: 0 0 30px rgba(212, 168, 74, .6);
  }
}

/* -- Tablet ---------------------------------------------------------------- */
@media (max-width: 1024px) {
  .why__card { padding: 30px; gap: 1.25rem; }
  .why__icon { width: 46px; height: 46px; }
  .why__num  { font-size: 62px; top: -32px; }
}

/* ---------------------------------------------------------------------------
   Mobile — the zig-zag collapses to a single column with the wire down the
   left gutter. A two-column stagger below ~760px leaves cards too narrow.
   why.js anchors the connector to x=14 at this breakpoint to match.
   --------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .why__row { grid-template-columns: 1fr; padding-left: 46px; }
  .why__row--left  > .why__card, .why__row--right > .why__card,
  .why__row--left  > .why__num,  .why__row--right > .why__num { grid-column: 1; }
  .why__row--right .why__copy { text-align: left; }

  .why__num { font-size: 46px; top: -20px; left: 60px; right: auto; }

  .why__card { padding: 22px; border-radius: 18px; gap: 1rem; grid-template-columns: auto 1fr; }
  .why__icon { width: 38px; height: 38px; }
  .why__cardDesc { font-size: 15px; }
}

@media (max-width: 460px) {
  /* Below this the icon and text side by side leaves ~150px for the copy. */
  .why__card { grid-template-columns: 1fr; gap: 1rem; }
}

/* -- No JS / reduced motion ------------------------------------------------- */
/* The connector is scroll-driven; an undrawn track and a stranded spark just
   look broken, so hide the whole thing. */
.why.is-static .why__wire { display: none; }

@media (prefers-reduced-motion: reduce) {
  .why__blueprint { animation: none; }
  .why__card, .why__icon, .why__cardTitle, .why__cardDesc { transition: none; }
}

/* ===========================================================================
   Mobile refinements
   ---------------------------------------------------------------------------
   Loaded last so it settles conflicts between the per-section blocks above.
   Three things this fixes, all measured at 390x844:
     • tap targets down to 17px wide (44px is the accepted minimum)
     • body/label text down to 10.4px
     • the Current Projects CTA resolving to 12px wide
   =========================================================================== */

@media (max-width: 760px) {

  /* -- Tap targets ---------------------------------------------------------
     Padding rather than fixed sizes, so the visual weight of the type is
     unchanged and only the hit area grows. */

  .hamburger {
    width: 44px; height: 44px;
    display: grid; place-content: center; gap: 5px;
    margin-right: -8px;                /* keep the icon optically aligned */
  }

  .svc__railItem {
    min-width: 44px; min-height: 44px;
    display: inline-grid; place-items: center;
    padding: 0;
  }

  .svc__nav button { width: 48px; height: 48px; }

  .btn-text,
  .story__link,
  .svc__all,
  .svc__cta,
  .cp__all,
  .why__cta {
    min-height: 44px;
    display: inline-flex; align-items: center;
  }

  .footer-list a,
  .mobile-menu a { display: block; padding-block: .55rem; }

  .filter-tab { min-height: 44px; padding-inline: 1rem; }

  /* -- Current Projects overlay -------------------------------------------
     The 900px block set left/right/top/bottom in two competing rules, which
     collapsed the CTA to a 12px sliver. One rule, one position. */

  /* Spacing measured at 375px: at bottom:1.15rem the CTA sat 19px off the
     bottom edge of the photograph, and .cp__meta at 4.4rem left only 8px
     between the location line and "Explore Project" — the two read as one
     jammed block against the picture edge. 1.75rem / 5.75rem gives 28px of
     breathing room below and 20px between them. */
  .cp__cta {
    top: auto; left: var(--gutter); right: auto;
    bottom: 1.75rem;
    min-height: 44px;
    padding-bottom: .4rem;
  }
  .cp__cta span { display: inline; }     /* the label was hidden, leaving only the arrow */
  .cp__meta { bottom: 5.75rem; max-width: 100%; }

  /* Film panels keep their lift: the burned-in captions are still along the
     bottom of the picture, and a 4:3 crop of a 16:9 source trims the sides,
     not the band. */
  .cp__panel.is-film .cp__cta  { bottom: 20%; }
  /* 4rem = the 44px CTA + the same 20px gap the non-film panel gets. */
  .cp__panel.is-film .cp__meta { bottom: calc(20% + 4rem); }

  /* -- Legibility ----------------------------------------------------------
     Nothing below 12px. Letter-spacing eases off as size drops, otherwise
     tracked-out caps get hard to read at small sizes. */

  .eyebrow,
  .svc__eyebrow,
  .story__eyebrow,
  .cp__eyebrow,
  .why__eyebrow,
  .cp__cat,
  .stat__label,
  .svc__statLabel,
  .project-card__type {
    font-size: 12px;
    letter-spacing: .22em;
  }

  .btn,
  .btn-text,
  .story__link,
  .svc__all,
  .svc__cta,
  .cp__all,
  .cp__cta,
  .footer-heading {
    font-size: 12.5px;
    letter-spacing: .16em;
  }

  .seq__hint,
  .seq__loader-pct { font-size: 11px; letter-spacing: .24em; }

  .cp__loc { font-size: 13px; }
  .footer-list a, .footer-list li { font-size: 14.5px; }

  /* -- Rhythm --------------------------------------------------------------
     Section padding scaled back; at phone width the desktop rhythm reads as
     dead space rather than generosity. */
  .section { padding-block: clamp(3.5rem, 9vh, 5rem); }
  .why      { padding-block: clamp(3.5rem, 9vh, 5rem); }
  .cp       { padding: clamp(3.5rem, 9vh, 5rem) 0 clamp(2.5rem, 7vh, 4rem); }

  /* The stats bar wraps to 2x2 rather than a cramped single row. */
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; }
}

/* Very narrow phones -------------------------------------------------------- */
@media (max-width: 400px) {
  .cp__name  { font-size: 1.55rem; }
  .cp__meta  { max-width: 100%; }
  .svc__item { flex-basis: 90%; }
}

/* -- Mobile: remaining tap targets and micro-type ---------------------------
   Each of these was measured rather than guessed: the footer legal link at
   78x16, social icons at 38x38, cookie buttons at 39px tall, and the ONGOING
   badge at 9.9px. */
@media (max-width: 760px) {
  .footer-bottom a { display: inline-block; padding-block: .7rem; }

  .social-row { gap: .4rem; }
  .social-row a {
    width: 44px; height: 44px;
    display: inline-grid; place-items: center;
  }

  /* .cookie-bar sets its own type scale, so this needs the extra specificity. */
  .cookie-bar .btn {
    min-height: 44px;
    font-size: 12.5px;
    padding-inline: 1.4rem;
  }

  /* 12px, not 11.5px: these three were the last labels under the floor the
     block above sets, and .topbar span outranks any later floor rule. */
  .cp__badge { font-size: 12px; letter-spacing: .18em; padding: .55rem 1rem; }

  .topbar, .topbar__left, .topbar__right, .topbar a, .topbar span { font-size: 12px; }
  .preloader__sub { font-size: 12px; }
}

/* -- Touch-sized hit areas up to 1024px -------------------------------------
   The layout switches to its touch form at 860px (services scroller) but the
   type fixes above stop at 760px, which left tablets between the two with
   17px rail buttons. Hit areas are widened for anything plausibly touched,
   without changing the type scale — that stays width-driven. */
@media (max-width: 1024px) {
  /* gap 6px, not 5px: the .is-open X collapses bars 1 and 3 with
     translateY(±7px), which only lands on the centre bar when the bars sit 7px
     apart (1px bar + 6px gap). At 5px they were 6px apart and the X closed 1px
     off-centre. */
  .hamburger { width: 44px; height: 44px; display: grid; place-content: center; gap: 6px; }

  .svc__railItem { min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; padding: 0; }
  .svc__nav button { width: 48px; height: 48px; }

  .btn-text,
  .story__link,
  .svc__all,
  .svc__cta,
  .cp__all,
  .cp__cta,
  /* Standalone links that were still short of the 44px target: the contact
     detail lines measured 21px tall and the services hero cue 18px. Both are
     their own line — not links inside a sentence — so growing the hit area
     costs nothing in the copy. */
  .ct-line p a,
  .hero--split__scroll,
  .filter-tab { min-height: 44px; display: inline-flex; align-items: center; }

  .footer-list a,
  .footer-bottom a,
  .mobile-menu a { display: inline-block; padding-block: .6rem; }

  /* .6rem left the footer legal links at 40px — 4px short. */
  .footer-bottom a { padding-block: .8rem; }

  .social-row a { width: 44px; height: 44px; display: inline-grid; place-items: center; }

  .cookie-bar .btn { min-height: 44px; }
}

/* ===========================================================================
   Motion layer
   ---------------------------------------------------------------------------
   Driven by assets/js/motion.js and assets/js/about.js.

   Every rule here is resting-state neutral: with motion disabled, or before
   any animation runs, the page renders exactly as it did before. No colour,
   type, layout or spacing is changed — only transform and opacity.
   =========================================================================== */

:root {
  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* -- MaskedText ------------------------------------------------------------ */
/* Line boxes clip their contents so text can rise from behind an edge.
   overflow-y is visible-safe via padding, so descenders are never cut. */
.mt-line {
  display: block;
  overflow: hidden;
  /* Room for descenders and italic overhang inside the mask. */
  padding-bottom: .08em;
  margin-bottom: -.08em;
}
.mt-line__in { display: block; will-change: transform; }
.mt-w { display: inline-block; }

/* -- Section label dividers ------------------------------------------------
   .eyebrow::before is the little gold rule. GSAP cannot target a pseudo
   element, so it drives --dash and the pseudo reads it. Default 1 keeps every
   label that is not animated looking untouched. */
.eyebrow::before {
  transform: scaleX(var(--dash, 1));
  transform-origin: left center;
}

/* -- Header: hide on scroll down, return on scroll up ---------------------- */
.site-header {
  transition:
    transform .55s var(--motion-ease),
    padding .3s var(--ease-out),
    background .3s,
    box-shadow .3s;
  will-change: transform;
}
.site-header.is-hidden { transform: translate3d(0, -100%, 0); }
/* Hairline gold edge, only once the header is over content. */
.site-header.is-scrolled { border-bottom-color: rgba(200, 146, 42, .28); }

/* -- Nav links: gold underline slides in from the left --------------------- */
.nav-link { position: relative; }
.nav-link::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -6px; height: 1px;
  background: var(--color-accent);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .3s var(--motion-ease);
}
.nav-link:hover::after { transform: scaleX(1); }
/* The active link keeps its existing underline — no double rule. */
.nav-link.is-active::after { display: none; }

/* -- Magnetic buttons + diagonal shine sweep ------------------------------- */
.is-magnetic { position: relative; overflow: hidden; will-change: transform; }
.is-magnetic > * { position: relative; z-index: 1; }
.is-magnetic::after {
  content: "";
  position: absolute; top: -60%; bottom: -60%; left: -80%;
  width: 40%;
  background: linear-gradient(100deg,
    rgba(255,255,255,0) 0%, rgba(255,255,255,.42) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-18deg) translateX(0);
  opacity: 0;
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .is-magnetic:hover::after { animation: shineSweep .8s var(--motion-ease) 1; }
}
@keyframes shineSweep {
  from { opacity: 1; transform: skewX(-18deg) translateX(0); }
  to   { opacity: 1; transform: skewX(-18deg) translateX(520%); }
}

/* -- Scroll-to-top --------------------------------------------------------- */
.floater-top {
  transition: opacity .5s var(--motion-ease), transform .5s var(--motion-ease);
}
.floater-top:not(.is-visible) { opacity: 0; transform: scale(.8); pointer-events: none; }
.floater-top.is-visible { opacity: 1; transform: scale(1); }
.floater-top svg, .floater-top { will-change: transform; }
@media (hover: hover) and (pointer: fine) {
  .floater-top:hover { transform: scale(1) translateY(-3px); }
}

/* The Our Story plate is a 3:2 landscape — the engineers sit hard left and the
   finished tower hard right, so the default 4/5 portrait crop would cut both.
   Match the photograph's own aspect and show all of it. */
.split__media--wide { aspect-ratio: 3 / 2; }
@media (max-width: 900px) { .split__media--wide { aspect-ratio: 4 / 3; } }

/* -- Our Story: gold frame that draws itself around the panel -------------- */
.split__media { position: relative; }
.split__media-inner { position: absolute; inset: 0; display: block; }

/* Two pseudo elements, four edges: ::before draws top then right,
   ::after draws bottom then left. */
.split__media.is-framed::before,
.split__media.is-framed::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-color: var(--color-accent);
  border-style: solid;
  border-width: 0;
}
.split__media.is-framed::before {
  top: 0; left: 0; right: 0; bottom: 0;
  border-top-width: 1px; border-right-width: 1px;
  clip-path: inset(0 0 0 0);
  animation: frameTopRight 1.2s var(--motion-ease) forwards;
}
.split__media.is-framed::after {
  top: 0; left: 0; right: 0; bottom: 0;
  border-bottom-width: 1px; border-left-width: 1px;
  animation: frameBottomLeft 1.2s var(--motion-ease) .6s forwards;
  opacity: 0;
}
@keyframes frameTopRight {
  from { clip-path: inset(0 100% 100% 0); }
  50%  { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes frameBottomLeft {
  from { opacity: 1; clip-path: inset(100% 0 0 100%); }
  50%  { opacity: 1; clip-path: inset(100% 0 0 0); }
  to   { opacity: 1; clip-path: inset(0 0 0 0); }
}

/* -- Cards: border trace + cursor-follow tint ------------------------------ */
.service-card.is-traced { position: relative; }
.service-card.is-traced::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  border: 1px solid transparent;
  transition: border-color .6s var(--motion-ease), box-shadow .6s var(--motion-ease);
}
@media (hover: hover) and (pointer: fine) {
  .service-card.is-traced { transition: transform .6s var(--motion-ease); will-change: transform; }
  .service-card.is-traced:hover { transform: translateY(-6px); }
  .service-card.is-traced:hover::after {
    border-color: rgba(200, 146, 42, .55);
    box-shadow: 0 0 22px rgba(200, 146, 42, .16) inset;
  }

  /* Leadership portraits scale inside their clipped frame. */
  .service-card.is-person .person__media { overflow: hidden; }
  .service-card.is-person .person__img {
    position: absolute; inset: 0; display: block;
    transition: transform .6s var(--motion-ease);
  }
  .service-card.is-person:hover .person__img { transform: scale(1.05); }

  /* Gold rule draws under the name. */
  .person__name { position: relative; display: inline-block; }
  .person__name::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: -4px; height: 1px;
    background: var(--color-accent);
    transform: scaleX(0); transform-origin: left center;
    transition: transform .5s var(--motion-ease);
  }
  .service-card.is-person:hover .person__name::after { transform: scaleX(1); }
  .person__role { transition: color .5s var(--motion-ease); }
  .service-card.is-person:hover .person__role { color: var(--color-accent); }
}

/* -- Process cards --------------------------------------------------------- */
.service-card.is-step { position: relative; }
.service-card.is-step .why-item__num { will-change: transform, opacity, filter; }
.service-card.is-step::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--color-accent);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .55s var(--motion-ease);
}
@media (hover: hover) and (pointer: fine) {
  .service-card.is-step:hover::before { transform: scaleX(1); }
  .service-card.is-step .why-item__num { transition: color .5s var(--motion-ease); }
  .service-card.is-step:hover .why-item__num { color: var(--color-accent); }
}

/* Vertical progress rule down the left of the process section. */
.about-process { position: relative; }
.about-process__rail {
  position: absolute; left: clamp(.75rem, 2vw, 1.75rem);
  top: 0; bottom: 0; width: 1px;
  background: var(--color-border);
  overflow: hidden;
}
.about-process__rail > span {
  display: block; width: 100%; height: 100%;
  background: var(--color-accent);
  transform: scaleY(0); transform-origin: top center;
}
@media (max-width: 900px) { .about-process__rail { display: none; } }

/* -- Stats: dividers grow from zero height --------------------------------- */
.stats-grid .stat { position: relative; }
.stats-grid .stat + .stat::before {
  content: "";
  position: absolute; left: 0; top: 10%; bottom: 10%; width: 1px;
  background: var(--color-border);
  transform: scaleY(var(--rule, 1)); transform-origin: top center;
}
@media (max-width: 760px) { .stats-grid .stat + .stat::before { display: none; } }

/* ---------------------------------------------------------------------------
   Reduced motion — show everything instantly, move nothing.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .mt-line__in { transform: none !important; }
  .site-header, .site-header.is-hidden { transform: none !important; transition: none; }
  .is-magnetic::after { animation: none !important; opacity: 0 !important; }
  .split__media.is-framed::before,
  .split__media.is-framed::after { animation: none !important; clip-path: none !important; opacity: 1; }
  .service-card.is-traced, .person__img, .floater-top { transition: none !important; }
  .about-process__rail > span { transform: scaleY(1); }
  .stats-grid .stat + .stat::before { transform: scaleY(1); }
}

/* -- Team portraits ---------------------------------------------------------
   The card's hover scale needs a clipping frame at every width, not only
   where hover applies. */
.person__media { position: relative; overflow: hidden; }
.person__media .person__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* The role label sits above the name. Both were inline-level — .eyebrow is
   inline-flex so it can run inline elsewhere, and .person__name is inline-block
   so its hover underline can size to the text — so the two shared a line box
   whenever both happened to fit. Short roles next to short names ("Engineer" /
   "Er. Kiran Paudel", "Site Incharge" / "Bishal Waiba") put the name out to the
   right of the role instead of under it, on 4 of the 11 team cards. Block-level
   flex keeps the rule-and-gap styling and always breaks the line. */
.person__role { display: flex; }

/* ===========================================================================
   Split hero — copy left, graded photograph bleeding off the right edge
   Used on /services. Scoped to .hero--split so every other hero is untouched.

   The grade: the raw photograph is hazy daylight and reads flat against the
   emerald theme. Three layers sit over a filtered <img> —
     1. filter on the img itself: contrast up, haze down, slightly desaturated
        so the site's palette leads;
     2. .hero--split__grade: an emerald-shadow / gold-highlight duotone wash,
        blended so shadows cool toward the brand green and highlights warm
        toward the accent gold;
     3. .hero--split__scrim: the legibility gradient into the left column;
   plus a hairline gold frame inset over the picture.
   =========================================================================== */

.hero--split {
  min-height: min(78vh, 760px);
  padding: 0;
  display: block;
  overflow: hidden;
}

.hero--split__inner {
  position: relative; z-index: 2;
  min-height: inherit;
  display: grid;
  grid-template-columns: 46% 54%;
  align-items: center;
}

.hero--split__copy {
  position: relative;
  padding: clamp(4rem, 9vh, 6rem) clamp(2rem, 4vw, 4rem)
           clamp(5rem, 11vh, 7rem) max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
}

/* Sized for a 46% column; the shared .hero__title measure is built for a
   full-width hero and would stack thin and tall here. */
.hero--split .hero__title {
  font-size: clamp(2.6rem, 5vw, 4.75rem);
  line-height: 1.0;
  letter-spacing: -0.022em;
  max-width: 9ch;
  margin: 1.25rem 0 1.5rem;
}
.hero--split .hero__sub { max-width: 40ch; margin-bottom: 0; }

/* Scroll cue, sitting under the copy on the page grid. */
.hero--split__scroll {
  position: absolute;
  left: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
  bottom: clamp(1.75rem, 4.5vh, 3rem);
  display: inline-flex; align-items: center; gap: .9rem;
  font-family: var(--font-body); font-weight: 500;
  font-size: .66rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--color-text-muted);
  transition: color .45s var(--ease-out);
}
.hero--split__scroll::before {
  content: ""; width: 46px; height: 1px; background: var(--color-accent);
  transform-origin: left center;
  animation: heroCue 2.6s ease-in-out infinite;
}
.hero--split__scroll:hover { color: var(--color-ink); }
@keyframes heroCue {
  0%, 100% { transform: scaleX(.35); opacity: .45; }
  50%      { transform: scaleX(1);   opacity: 1; }
}

/* -- Media ------------------------------------------------------------------ */
.hero--split__media {
  position: relative;
  margin: 0;
  align-self: stretch;
  overflow: hidden;
  /* Grounds the panel while the (large) image streams in. */
  background: var(--color-surface-2);
}

/* Absolute, so the portrait source cannot drive the row height. */
.hero--split__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 38%;
  display: block;
  /* Layer 1 of the grade — cut the atmospheric haze, let the palette lead. */
  filter: contrast(1.13) saturate(.82) brightness(.94);
}

/* Layer 2 — duotone wash: emerald shadows, gold highlights. */
.hero--split__grade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(160deg, rgba(200, 146, 42, .18) 0%, rgba(200, 146, 42, 0) 42%),
    linear-gradient(20deg,  rgba(0, 48, 48, .55) 0%,  rgba(0, 48, 48, 0) 55%);
  mix-blend-mode: soft-light;
}

/* Layer 3 — legibility scrim, folding the panel into the page. */
.hero--split__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to right, var(--color-primary) 0%, rgba(0, 48, 48, .55) 14%, rgba(0, 48, 48, 0) 46%),
    linear-gradient(to bottom, rgba(0, 30, 30, .5) 0%, rgba(0, 30, 30, 0) 24%),
    linear-gradient(to top, rgba(0, 30, 30, .55) 0%, rgba(0, 30, 30, 0) 30%),
    radial-gradient(120% 90% at 70% 45%, transparent 55%, rgba(0, 24, 24, .32) 100%);
}

/* Hairline gold frame, inset over the picture. */
.hero--split__frame {
  position: absolute;
  inset: clamp(1rem, 2.2vw, 1.75rem);
  pointer-events: none;
  border: 1px solid rgba(200, 146, 42, .34);
}

/* -- Tablet ----------------------------------------------------------------- */
@media (max-width: 1024px) {
  .hero--split__inner { grid-template-columns: 52% 48%; }
  .hero--split .hero__title { max-width: 8ch; }
}

/* -- Mobile: photo above, copy below ---------------------------------------- */
@media (max-width: 760px) {
  .hero--split { min-height: 0; }
  .hero--split__inner {
    grid-template-columns: 1fr;
    grid-template-areas: "media" "copy";
  }
  .hero--split__media { grid-area: media; height: 46vh; }
  .hero--split__scrim {
    background:
      linear-gradient(to bottom, rgba(0, 30, 30, .5) 0%, rgba(0, 30, 30, 0) 30%),
      linear-gradient(to top, var(--color-primary) 0%, rgba(0, 48, 48, 0) 38%);
  }
  .hero--split__frame { inset: .9rem; }
  .hero--split__copy {
    grid-area: copy;
    padding: 2rem var(--gutter) clamp(4rem, 9vh, 5rem);
  }
  .hero--split .hero__title { max-width: 12ch; font-size: clamp(2.2rem, 10vw, 3rem); }
  .hero--split .hero__sub { max-width: none; }
  .hero--split__scroll { left: var(--gutter); bottom: 1.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hero--split__scroll::before { animation: none; transform: scaleX(1); opacity: 1; }
}

/* -- Project status badges --------------------------------------------------
   Only "completed" had a variant; the portfolio now also carries ongoing and
   upcoming, which fell back to solid gold and read identically. */
.project-card__badge--ongoing  { background: var(--color-accent); color: var(--color-primary); }
.project-card__badge--upcoming { background: transparent; color: var(--color-ink); border: 1px solid var(--color-border-strong); }

/* ===========================================================================
   Projects listing — grouped by status, cards pop in
   =========================================================================== */

.pg__group + .pg__group { margin-top: clamp(3.5rem, 8vh, 6rem); }

.pg__groupHead {
  display: flex; align-items: baseline; gap: 1.25rem;
  margin-bottom: clamp(1.5rem, 4vh, 2.5rem);
}
.pg__groupTitle {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1; color: var(--color-ink);
  margin: 0;
}
.pg__count {
  font-family: var(--font-body); font-weight: 500;
  font-size: .7rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--color-accent-light);
}
/* Hairline running to the right of the group heading. */
.pg__groupHead::after {
  content: ""; flex: 1; height: 1px;
  background: var(--color-border);
}

/* Pop-in: scale and lift together, so cards arrive rather than slide.
   JS adds .is-in; without JS they are simply visible. */
.pg__card {
  opacity: 0;
  transform: translate3d(0, 26px, 0) scale(.94);
  transition:
    opacity .7s var(--motion-ease),
    transform .7s var(--motion-ease);
  will-change: transform, opacity;
}
.pg__card.is-in { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }

/* No JS, or reduced motion: never leave the portfolio invisible. */
.no-js .pg__card,
.pg--static .pg__card { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .pg__card { opacity: 1; transform: none; transition: none; }
}

/* ===========================================================================
   Photographic hero — full-bleed image behind the copy
   Used on /projects. Scoped to .hero--shot so other heroes are untouched.
   =========================================================================== */

.hero--shot {
  position: relative;
  /* Fill what is left of the viewport under the topbar + sticky header
     (measured at 114px on desktop; 7.5rem covers it across breakpoints).
     A fixed 72vh cap left 138px of empty green under the photograph. */
  min-height: calc(100svh - 7.5rem);
  padding: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--color-surface-2);
}

/* An <img> rather than a background-image, so it keeps alt text,
   fetchpriority and intrinsic dimensions for the preload scanner. */
.hero--shot__img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* The horizon and the crane line sit above centre; hold them. */
  object-position: 50% 42%;
}

/* The photograph is already dark on the left, so the scrim only needs to
   deepen it enough to carry the copy, then clear to the right. */
.hero--shot__scrim {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to right,
      rgba(0, 30, 30, .90) 0%, rgba(0, 30, 30, .66) 30%,
      rgba(0, 30, 30, .26) 58%, rgba(0, 30, 30, .10) 100%),
    linear-gradient(to bottom,
      rgba(0, 24, 24, .62) 0%, rgba(0, 24, 24, 0) 28%,
      rgba(0, 24, 24, 0) 64%, rgba(0, 24, 24, .58) 100%);
}

.hero--shot__inner {
  position: relative; z-index: 2;
  padding-top: clamp(3rem, 8vh, 5rem);
  padding-bottom: clamp(3rem, 8vh, 5rem);
}

.hero--shot .hero__title {
  font-size: clamp(2.6rem, 6vw, 5.25rem);
  line-height: 1.0;
  letter-spacing: -.024em;
  max-width: 11ch;
  margin: 1.25rem 0 1.5rem;
  text-shadow: 0 2px 40px rgba(0, 20, 20, .55);
}
.hero--shot .hero__sub {
  max-width: 44ch;
  margin-bottom: 0;
  text-shadow: 0 1px 24px rgba(0, 20, 20, .6);
}

/* A section following a full-bleed hero does not need the standard opening
   rhythm — the photograph has already done that work, and a full --section-y
   reads as 144px of empty green. */
.hero--shot + .section { padding-top: clamp(2.5rem, 5vw, 4rem); }

@media (max-width: 760px) {
  .hero--shot { min-height: calc(100svh - 6rem); align-items: flex-end; }
  .hero--shot__img { object-position: 58% 42%; }
  /* Portrait crops in tight on the subject, so the copy needs a deeper base. */
  .hero--shot__scrim {
    background:
      linear-gradient(to bottom,
        rgba(0, 24, 24, .62) 0%, rgba(0, 24, 24, .10) 24%,
        rgba(0, 24, 24, .60) 62%, rgba(0, 24, 24, .92) 100%);
  }
  .hero--shot__inner { padding-bottom: clamp(3rem, 9vh, 4.5rem); }
  .hero--shot .hero__title { max-width: 10ch; font-size: clamp(2.3rem, 11vw, 3.2rem); }
  .hero--shot .hero__sub { max-width: none; }
}

/* ===========================================================================
   Reveal variants
   ---------------------------------------------------------------------------
   The motion is expressed here; motion.js only decides when to add
   .is-revealed. Every variant uses the site's signature easing and animates
   transform / opacity / clip-path / filter only.
   =========================================================================== */

.reveal { transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); }

/* up — the default, and the pre-existing behaviour */
.reveal--up            { opacity: 0; transform: translateY(32px); }
.reveal--up.is-revealed{ opacity: 1; transform: none; }

/* mask — child rises from behind a clipped edge */
.reveal--mask { overflow: hidden; opacity: 1; transform: none; }
.reveal--mask > * {
  display: block;
  transform: translateY(100%);
  transition: transform 1s var(--ease-out);
}
.reveal--mask.is-revealed > * { transform: translateY(0); }

/* wipe — clip-path inset opening from the left */
.reveal--wipe {
  opacity: 1; transform: none;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.1s var(--ease-out);
}
.reveal--wipe.is-revealed { clip-path: inset(0 0 0 0); }

/* blur — resolves from soft to sharp */
.reveal--blur {
  opacity: 0; filter: blur(8px); transform: none;
  transition: opacity .9s var(--ease-out), filter .9s var(--ease-out);
}
.reveal--blur.is-revealed { opacity: 1; filter: blur(0); }

/* scale-x — for the gold divider rules */
.reveal--scale-x {
  opacity: 1;
  transform: scaleX(0); transform-origin: left center;
  transition: transform .9s var(--ease-out);
}
.reveal--scale-x.is-revealed { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal--mask > * {
    opacity: 1 !important; transform: none !important;
    clip-path: none !important; filter: none !important; transition: none !important;
  }
}

/* ===========================================================================
   Tonal rhythm
   ---------------------------------------------------------------------------
   .section--cream computed identically to the page background, so the whole
   page read as one flat green. It is now a lighter step of the same emerald,
   and each section boundary carries a gold hairline.
   =========================================================================== */

.section--cream { background: #00403C; }

main > section + section { border-top: 1px solid rgba(200, 146, 42, .12); }

/* Large, barely-there gold pools to break the flatness. Pure gradient. */
.wy-reasons, .wy-voices { position: relative; isolation: isolate; }
.wy-reasons::before, .wy-voices::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
}
.wy-reasons::before {
  background: radial-gradient(58% 46% at 88% 8%, rgba(200, 146, 42, .03), transparent 70%);
}
.wy-voices::before {
  background: radial-gradient(58% 46% at 10% 92%, rgba(200, 146, 42, .03), transparent 70%);
}

/* ===========================================================================
   Why Us — hero
   =========================================================================== */

.wy-hero { min-height: 80vh; padding-block: clamp(4rem, 9vh, 6rem); }

.wy-hero__grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}

/* Two deliberate lines instead of five one-word lines. The shared
   .hero__title runs to 7.5rem, which forced a break after every word in this
   column. */
.wy-hero .hero__title {
  font-size: clamp(3.5rem, 6.5vw, 5.5rem);
  line-height: 1.02;
  letter-spacing: -.025em;
  max-width: none;
  margin: 1.5rem 0 1.75rem;
}
.wy-hero .hero__sub { max-width: 46ch; margin-bottom: 0; }

/* Credibility stats — same gold serif treatment as the About page. */
.wy-stats { display: grid; gap: clamp(1.5rem, 3vh, 2.25rem); }
.wy-stat { padding-left: 1.5rem; border-left: 1px solid var(--color-border); }
.wy-stat__num {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(2.4rem, 3.6vw, 3.4rem);
  line-height: 1; color: var(--color-accent-light);
}
.wy-stat__label {
  margin-top: .5rem;
  font-size: .74rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--color-text-muted);
}

@media (max-width: 900px) {
  .wy-hero__grid { grid-template-columns: 1fr; }
  .wy-stats { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
  .wy-stat { padding-left: 1rem; }
  .wy-stat__num { font-size: clamp(1.6rem, 6vw, 2.2rem); }
  .wy-stat__label { font-size: .66rem; letter-spacing: .16em; }
}

/* ===========================================================================
   Why Us — reasons, sticky index + scrolling blocks
   =========================================================================== */

.wy-reasons { padding-block: clamp(80px, 9vw, 120px); }

.wy-reasons__grid {
  display: grid;
  grid-template-columns: 38% 1fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}

/* -- Sticky index ---------------------------------------------------------- */
.wy-index { position: sticky; top: 20vh; align-self: start; }

.wy-index__head { margin-bottom: clamp(1.5rem, 4vh, 2.5rem); }
.wy-index__title {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(1.9rem, 3vw, 2.75rem);
  line-height: 1.06; color: var(--color-ink);
  margin: 1rem 0 0;
}

.wy-index__list { position: relative; padding-left: 1.5rem; }

/* Progress rail down the left edge, scrubbed to section progress. */
.wy-rail {
  position: absolute; left: 0; top: 0; bottom: 0; width: 1px;
  background: var(--color-border);
  overflow: hidden;
}
.wy-rail__fill {
  display: block; width: 100%; height: 100%;
  background: var(--color-accent);
  transform: scaleY(0); transform-origin: top center;
}

.wy-index__item {
  position: relative;
  display: flex; align-items: baseline; gap: .9rem;
  padding: .55rem 0;
  color: var(--color-text-muted);
  transition: color .5s var(--ease-out);
}
.wy-index__item::before {
  content: ""; position: absolute; left: -1.5rem; top: 50%;
  width: 1rem; height: 1px; background: var(--color-accent);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .5s var(--ease-out);
}
.wy-index__num {
  font-family: var(--font-body); font-weight: 500;
  font-size: .68rem; letter-spacing: .18em;
  color: rgba(200, 146, 42, .5);
  transition: color .5s var(--ease-out);
}
.wy-index__name {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(1rem, 1.25vw, 1.18rem);
  transition: color .5s var(--ease-out);
}
.wy-index__item.is-active            { color: var(--color-ink); }
.wy-index__item.is-active::before    { transform: scaleX(1); }
.wy-index__item.is-active .wy-index__num  { color: var(--color-accent); }
.wy-index__item.is-active .wy-index__name { color: var(--color-accent-light); }

/* -- Reason blocks --------------------------------------------------------- */
.wy-block {
  /* The brief asked for 60vh blocks AND a 2,400-2,800px section, but six
     blocks at 60vh is 3,240px before padding — the two cannot both hold.
     46vh honours the measurable target, which was the actual goal. */
  min-height: 46vh;
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-content: center;
  padding-block: clamp(2rem, 5vh, 3.5rem);
}
.wy-block + .wy-block { border-top: 1px solid var(--color-border); }

.wy-block__num {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(2.6rem, 4vw, 3.6rem);
  line-height: 1; color: rgba(200, 146, 42, .55);
}

.wy-block__title {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(1.6rem, 2.6vw, 2.35rem);
  line-height: 1.1; color: var(--color-ink);
  margin: 0 0 1rem;
}
.wy-block__body { max-width: 52ch; margin: 0; }

/* Line-drawn icon, stroked in gold at hairline weight. Replaces the empty
   .bg-placeholder box each reason used to sit beside. */
.wy-icon { width: 68px; height: 68px; margin-bottom: 1.25rem; color: var(--color-accent); }
.wy-icon path, .wy-icon circle, .wy-icon rect, .wy-icon line, .wy-icon polyline {
  stroke: currentColor; fill: none;
  stroke-width: 1; stroke-linecap: round; stroke-linejoin: round;
  /* Dash values are set per-path in JS from the real measured length. */
}

@media (max-width: 1024px) {
  /* Sticky index has no room to breathe below this; stack instead. */
  .wy-reasons__grid { grid-template-columns: 1fr; }
  .wy-index { position: static; margin-bottom: 3rem; }
  .wy-index__list { display: none; }
  .wy-block { min-height: 0; grid-template-columns: 64px 1fr; }
}
@media (max-width: 620px) {
  .wy-block { grid-template-columns: 1fr; gap: .75rem; }
  .wy-icon { width: 52px; height: 52px; }
}

/* ===========================================================================
   Why Us — testimonials
   =========================================================================== */

.wy-voices { padding-block: clamp(80px, 9vw, 120px); }

.wy-quote {
  position: relative;
  overflow: hidden;
  transition: transform .55s var(--ease-out), border-color .55s var(--ease-out);
}
.wy-quote__mark {
  display: block;
  font-family: var(--font-display); font-size: 3rem; line-height: .5;
  color: var(--color-accent);
  opacity: 0; transform: scale(.9);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.wy-quote.is-revealed .wy-quote__mark { opacity: 1; transform: scale(1); }

/* Cursor-following gold tint, positioned from JS custom properties. */
.wy-quote::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(160px 160px at var(--mx, 50%) var(--my, 50%),
              rgba(200, 146, 42, .10), transparent 70%);
  opacity: 0; transition: opacity .45s var(--ease-out);
}

/* Border trace: a gold sweep that runs the perimeter once on hover. */
.wy-quote::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  padding: 1px; border-radius: inherit;
  background: conic-gradient(from var(--angle, 0deg),
              transparent 0deg, rgba(200,146,42,.85) 24deg, transparent 60deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  opacity: 0; transition: opacity .3s var(--ease-out);
}

@property --angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

@media (hover: hover) and (pointer: fine) {
  .wy-quote:hover { transform: translateY(-6px); }
  .wy-quote:hover::before { opacity: 1; }
  .wy-quote:hover::after { opacity: 1; animation: wyTrace 1.2s var(--ease-out) 1; }
}
@keyframes wyTrace { to { --angle: 360deg; } }

.wy-quote__attr { margin-top: 1.25rem; }
.wy-quote__meta {
  display: block; margin-top: .35rem;
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--color-text-muted);
}

/* ===========================================================================
   CTA — one-shot glow when the button first arrives
   =========================================================================== */
.cta-banner .btn.is-pulse { animation: ctaPulse 1.6s var(--ease-out) 1; }
@keyframes ctaPulse {
  0%   { box-shadow: 0 0 0 0 rgba(200, 146, 42, .55); }
  60%  { box-shadow: 0 0 34px 8px rgba(200, 146, 42, .28); }
  100% { box-shadow: 0 0 0 0 rgba(200, 146, 42, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .wy-quote, .wy-quote__mark { transition: none; }
  .wy-quote:hover::after { animation: none; }
  .cta-banner .btn.is-pulse { animation: none; }
}

/* -- Why Us hero over photography ------------------------------------------
   The generic .hero--shot scrim clears to the right so the picture reads as
   the subject. This hero puts the credibility stats in that right-hand
   column, and they would sit over the brightest part of the building. A
   heavier, more even scrim keeps both columns legible while still showing
   the sunset and the valley. */
.wy-hero.hero--shot { min-height: 80vh; }

.wy-hero .hero--shot__scrim {
  background:
    linear-gradient(to right,
      rgba(0, 30, 30, .93) 0%, rgba(0, 30, 30, .72) 34%,
      rgba(0, 30, 30, .58) 64%, rgba(0, 30, 30, .62) 100%),
    linear-gradient(to bottom,
      rgba(0, 24, 24, .55) 0%, rgba(0, 24, 24, 0) 26%,
      rgba(0, 24, 24, 0) 62%, rgba(0, 24, 24, .60) 100%);
}

/* The stat rules need to read against a photograph, not a flat panel. */
.wy-hero .wy-stat { border-left-color: rgba(200, 146, 42, .45); }
.wy-hero .wy-stat__num   { text-shadow: 0 2px 24px rgba(0, 20, 20, .75); }
.wy-hero .wy-stat__label { color: rgba(244, 239, 227, .72); text-shadow: 0 1px 16px rgba(0, 20, 20, .8); }

@media (max-width: 900px) {
  /* Stacked, the stats sit lower over the building; deepen the base. */
  .wy-hero .hero--shot__scrim {
    background:
      linear-gradient(to bottom,
        rgba(0, 24, 24, .60) 0%, rgba(0, 24, 24, .30) 24%,
        rgba(0, 24, 24, .62) 60%, rgba(0, 24, 24, .88) 100%);
  }
}

/* About: the terrace photograph is already close to the hero's own aspect, so
   it sits almost uncropped on desktop. Its left third is a dark wash, which
   is where the copy goes — the standard scrim is enough. */
.ab-hero .hero--shot__img { object-position: 50% 50%; }
@media (max-width: 760px) {
  /* Portrait crops out the valley; follow the group and the tower instead. */
  .ab-hero .hero--shot__img { object-position: 85% 58%; }
}

/* The Insights photograph carries the crane arm across the top third and the
   two engineers on the slab near the bottom. Centring the crop loses one or
   the other, so hold it slightly below centre to keep both in frame. */
.in-hero .hero--shot__img { object-position: 50% 50%; }
@media (max-width: 900px) {
  /* Portrait crops in hard; follow the subject to the right of frame. */
  .in-hero .hero--shot__img { object-position: 72% 56%; }
}

/* ===========================================================================
   Insights / Careers / Contact
   Reuses the existing tokens, .reveal engine and .hero--shot pattern.
   =========================================================================== */

/* -- Shared: compact photographic hero for interior pages ------------------ */
.pg-hero { min-height: 62vh; }
.pg-hero .hero__title {
  font-size: clamp(3rem, 6vw, 5rem);
  line-height: 1.0; letter-spacing: -.025em;
  max-width: 14ch; margin: 1.25rem 0 1.5rem;
}
.pg-hero .hero__sub { max-width: 46ch; margin-bottom: 0; }

/* ===========================================================================
   Insights — editorial list
   =========================================================================== */

/* Lead article: full-width, larger type, its own rule above the grid. */
.in-lead {
  display: grid; grid-template-columns: 1.15fr 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  padding-bottom: clamp(2.5rem, 6vh, 4rem);
  margin-bottom: clamp(2.5rem, 6vh, 4rem);
  border-bottom: 1px solid var(--color-border);
}
.in-lead__media {
  position: relative; overflow: hidden;
  aspect-ratio: 16 / 10; border-radius: 20px;
  background: var(--color-surface);
}
.in-lead__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.in-lead__title {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: 1.08;
  color: var(--color-ink); margin: 1rem 0;
}
.in-meta {
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Remaining posts as an editorial index rather than blank cards. */
.in-list { display: grid; gap: 0; }
.in-item {
  display: grid; grid-template-columns: 5.5rem 1fr auto;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: baseline;
  padding: clamp(1.5rem, 3.5vh, 2.25rem) 0;
  border-bottom: 1px solid var(--color-border);
  position: relative;
}
.in-item__idx {
  font-family: var(--font-body); font-weight: 500;
  font-size: .7rem; letter-spacing: .2em; color: rgba(200,146,42,.6);
}
.in-item__title {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(1.25rem, 2.1vw, 1.75rem); line-height: 1.15;
  color: var(--color-ink); margin: 0 0 .4rem;
  transition: color .45s var(--ease-out);
}
.in-item__desc { margin: 0; max-width: 60ch; font-size: .95rem; }
.in-item__go {
  color: var(--color-accent); font-size: 1.1rem;
  transform: translateX(-6px); opacity: 0;
  transition: transform .45s var(--ease-out), opacity .45s var(--ease-out);
}
/* Gold wash sweeps in from the left on hover.
   Declared inside the hover query, not outside it: the wash bleeds into the
   gutter, and on a touch phone — where it can never be revealed — that bleed
   still counted towards scroll width and pushed /blog 4px wider than the
   viewport. The bleed is 1.25rem to match .container's 20px gutter exactly, so
   it stays flush instead of spilling when a hover-capable window is narrow. */
@media (hover: hover) and (pointer: fine) {
  .in-item::before {
    content: ""; position: absolute; inset: 0 -1.25rem;
    background: linear-gradient(to right, rgba(200,146,42,.07), transparent 65%);
    opacity: 0; transition: opacity .45s var(--ease-out);
    pointer-events: none;
  }
  .in-item:hover::before { opacity: 1; }
  .in-item:hover .in-item__title { color: var(--color-accent-light); }
  .in-item:hover .in-item__go { transform: translateX(0); opacity: 1; }
}
@media (max-width: 900px) {
  .in-lead { grid-template-columns: 1fr; }
  .in-item { grid-template-columns: 1fr; gap: .4rem; }
  .in-item__go { display: none; }
}

/* ===========================================================================
   Careers — accordion
   =========================================================================== */

.cr-intro { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.cr-values { display: grid; gap: 1.25rem; }
.cr-value { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: baseline; }
.cr-value__k {
  font-family: var(--font-body); font-weight: 500;
  font-size: .68rem; letter-spacing: .2em; color: var(--color-accent);
}

/* "01", "02" and "03" render 15.4px, 18.1px and 18.3px wide — DM Sans has no
   tabular figures, so `font-variant-numeric` cannot square them up. Each
   .cr-value being its own grid meant each auto track took its own label width
   and the copy beside them started at three different x positions. Subgrid
   hands every row the same two tracks off the parent, so the widest label sets
   one edge for all of them. Without subgrid the rows keep today's behaviour. */
@supports (grid-template-columns: subgrid) {
  .cr-values { grid-template-columns: auto 1fr; column-gap: 1rem; }
  .cr-value  { grid-column: 1 / -1; grid-template-columns: subgrid; }
}
.cr-value__v { margin: 0; font-size: .95rem; }

.cr-job {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  margin-bottom: 1rem;
  transition: border-color .45s var(--ease-out), transform .45s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .cr-job:hover { border-color: rgba(200,146,42,.45); transform: translateY(-2px); }
}
.cr-job__btn {
  width: 100%; padding: 1.5rem 1.75rem;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  text-align: left;
}
.cr-job__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.2rem, 2vw, 1.5rem); color: var(--color-text-primary);
}
/* Plus that rotates into a minus — no glyph swap, so no reflow. */
.cr-job__sign { position: relative; width: 18px; height: 18px; flex: none; }
.cr-job__sign::before, .cr-job__sign::after {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 100%; height: 1px; background: var(--color-accent);
  transition: transform .45s var(--ease-out);
}
.cr-job__sign::after { transform: rotate(90deg); }
.cr-job.is-open .cr-job__sign::after { transform: rotate(0deg); }

.cr-empty {
  border: 1px solid var(--color-border);
  padding: clamp(2rem, 5vw, 3rem);
  text-align: center;
}

/* ===========================================================================
   Contact
   =========================================================================== */

.ct-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; }
@media (max-width: 900px) { .ct-grid { grid-template-columns: 1fr; } .cr-intro { grid-template-columns: 1fr; } }

.ct-panel {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  padding: clamp(1.75rem, 4vw, 2.75rem);
}

/* Focus state: gold rule grows under the field from the left. */
.form-group { position: relative; }
.form-control:focus { outline: none; border-color: rgba(200,146,42,.5); }
.form-group::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--color-accent);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .45s var(--ease-out);
  pointer-events: none;
}
.form-group:focus-within::after { transform: scaleX(1); }

.ct-lines { display: grid; gap: 1.5rem; }
.ct-line { display: grid; gap: .4rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--color-border); }
.ct-line a, .ct-line p { color: var(--color-text-primary); margin: 0; }
.ct-line a { transition: color .35s var(--ease-out); }
.ct-line a:hover { color: var(--color-accent-light); }

.ct-hours { display: flex; align-items: center; gap: .6rem; }
.ct-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 4px rgba(200,146,42,.15);
}

/* -- Select dropdown legibility ---------------------------------------------
   The closed control is styled by the page, but the open popup is painted by
   the OS on a white background while the <option>s inherited the page's cream
   text — cream on white, unreadable. color-scheme makes the browser paint the
   popup dark, and the explicit option colours cover engines that ignore it. */
select.form-control {
  color-scheme: dark;
  color: var(--color-text-primary);
}
select.form-control option,
select.form-control optgroup {
  background-color: #012624;
  color: #F4EFE3;
}

/* ===========================================================================
   Small-screen legibility floor
   ---------------------------------------------------------------------------
   The "Mobile refinements" block higher up already sets a 12px floor, but only
   for the labels that existed when it was written, and it sits mid-file — the
   per-component blocks after it (why-us, insights, careers, the split hero)
   re-declare their own sizes at equal specificity and win on order. So the
   remaining offenders are collected here, at the end, where nothing outranks
   them. Measured at 375px before this block: status badges 9.9px, why-us stat
   labels and the services scroll cue 10.6px, careers value keys 10.9px, form
   labels / insight indices / portfolio counts 11.2px, and the topbar strip,
   insight meta and quote attributions 11.5px.

   Tracking eases off as size rises: these are all uppercase and widely
   letter-spaced, and holding the wide tracking at 12px reads as gaps between
   letters rather than words.
   =========================================================================== */
@media (max-width: 760px) {
  .project-card__badge,
  .pg__count,
  .in-meta,
  .in-item__idx,
  .filter-tab,
  .form-label,
  .wy-quote__meta,
  .cr-value__k,
  .hero--split__scroll { font-size: 12px; letter-spacing: .18em; }

  .wy-stat__label { font-size: 12px; letter-spacing: .12em; }
  .seq__loader-pct { font-size: 12px; }
}

/* ===========================================================================
   Navigation dropdowns
   Only applies when a menu item has children in the CMS (Admin → Navigation).
   A flat menu renders exactly as before — none of these selectors match it.
   =========================================================================== */
.nav-item--has-sub { position: relative; display: inline-flex; align-items: center; }

.nav-sub {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 13rem;
  display: flex;
  flex-direction: column;
  padding: .5rem 0;
  background: var(--color-bg, #0D1B2A);
  border: 1px solid rgba(248, 240, 220, .1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 60;
}

.nav-item--has-sub:hover .nav-sub,
.nav-item--has-sub:focus-within .nav-sub {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-sub__link {
  padding: .55rem 1.1rem;
  font-size: .82rem;
  letter-spacing: .04em;
  color: var(--color-text-muted, #9BA8B4);
  white-space: nowrap;
  transition: color .18s ease, background .18s ease;
}

.nav-sub__link:hover,
.nav-sub__link:focus-visible {
  color: var(--color-text, #F4F1EC);
  background: rgba(248, 240, 220, .05);
}

.mobile-menu__sub {
  padding-left: 1.75rem !important;
  font-size: .92em;
  opacity: .78;
}

@media (prefers-reduced-motion: reduce) {
  .nav-sub { transition: none; }
}