/* ============================================================
   GROUNDSTRIKE TECHNOLOGIES — v2 premium layer
   Loaded after style.css. Interaction lock, brand, coverage
   map, featured-work cards, and the full-screen mobile menu.
   ============================================================ */

/* Lock pinch-zoom / double-tap zoom / bounce so the page never
   shakes or drifts sideways while the user interacts with it.
   pan-y keeps vertical scrolling but blocks pinch-zoom and any
   horizontal pan, so pages always return to their exact origin. */
html {
  overscroll-behavior: none;
  /* overflow-x: clip (not hidden): the root must not become a scroll
     container, or touch devices can still pan the whole page sideways
     and the content visibly shifts left/right on interaction. */
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  /* Same as html — never a horizontally pannable scroll container. */
  overflow-x: hidden;
  overflow-x: clip;
  overscroll-behavior-y: none;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

a,
html,
body {
  touch-action: pan-y;
}

button,
input,
select,
textarea,
label {
  touch-action: pan-y;
}

/* -------- Brand (official GroundStrike Technologies lockup) -------- */
.brand__logo {
  display: block;
  width: auto;
  height: 64px;
  filter: drop-shadow(0 2px 16px rgba(201, 161, 95, 0.16));
  transition: height 0.7s var(--ease), filter 0.4s var(--ease);
}

.brand:hover .brand__logo {
  filter: drop-shadow(0 2px 20px rgba(201, 161, 95, 0.3));
}

.nav.is-scrolled .brand__logo {
  height: 46px;
}

.footer__brand .brand__logo {
  height: 64px;
}

@media (max-width: 900px) {
  .brand__logo {
    height: 56px;
  }
}

@media (max-width: 640px) {
  .brand__logo {
    height: 50px;
  }
  .footer__brand .brand__logo {
    height: 56px;
  }
}

/* Desktop dropdown — richer presence */
.nav__drop {
  padding: 1rem;
  border-color: rgba(201, 161, 95, 0.28);
}

.nav__drop::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 2.4rem;
  width: 9px;
  height: 9px;
  background: #0e0e11;
  border-left: 1px solid rgba(201, 161, 95, 0.3);
  border-top: 1px solid rgba(201, 161, 95, 0.3);
  transform: rotate(45deg);
}

.nav__drop a {
  padding: 0.72rem 1rem;
}

.nav__item:hover .nav__drop {
  transform: translateY(8px);
}

.nav__item:hover .nav__drop,
.nav__item:focus-within .nav__drop {
  transform: translateY(0);
}

/* When the full-screen menu is open the nav stays crisp above it */
body.menu-open .nav {
  background: rgba(10, 10, 12, 0.9);
  border-bottom-color: var(--line);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

/* -------- Interior page hero (photo fills the band edge to edge) -------- */
.page-hero {
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* The photo covers the full band edge to edge; keep the band modest
     so a short hero never leaves room for dark background to read. */
  min-height: clamp(20rem, 46svh, 36rem);
  background-color: transparent;
}

.page-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  /* Forces its own compositor layer. Without this, iOS Safari can
     paint a solid black patch in a corner of this layer when the
     fixed, blurred header sits above an isolated stacking context
     like this one — a known WebKit compositing bug. */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.page-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Bias the uniform crop toward the lower, lit subject area of each
     photo (buildings, roofs, crews) instead of the top sky band, so no
     hero ever shows a dark/black corner where the photo meets the
     header. */
  object-position: center 62%;
  display: block;
}

/* Premium composition — the photo IS the hero:
   - The image fills the band edge to edge (see .page-hero__media img:
     width/height 100%, object-fit cover) with zero background showing.
   - No dark bands: only a whisper scrim behind the fixed header for
     the logo, a LOCALIZED glow directly behind the text (bottom-left),
     and a barely-there melt at the very bottom edge so the hero flows
     into the dark page. The rest of the photo stays fully visible.
   - Text stays legible through the localized glow + text shadows,
     never through a black overlay. */
.page-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    /* 1. Whisper top scrim — just enough for the logo, gone by 18%. */
    linear-gradient(
      180deg,
      rgba(10, 10, 12, 0.45) 0%,
      rgba(10, 10, 12, 0.18) 9%,
      rgba(10, 10, 12, 0) 18%
    ),
    /* 2. Localized glow behind the text column — dark only where the
          breadcrumb/heading actually sit. */
    radial-gradient(
      ellipse 62% 48% at 16% 88%,
      rgba(8, 8, 10, 0.5) 0%,
      rgba(8, 8, 10, 0.26) 40%,
      rgba(8, 8, 10, 0) 72%
    ),
    /* 3. Bottom-edge melt — a whisper, so the hero flows into the
          dark page without ever reading as a black band. */
    linear-gradient(
      180deg,
      rgba(9, 9, 11, 0) 88%,
      rgba(9, 9, 11, 0.28) 96%,
      rgba(9, 9, 11, 0.45) 100%
    ),
    /* 4. Bronze-tinted glow anchoring the text zone. */
    radial-gradient(
      ellipse 55% 42% at 18% 92%,
      rgba(201, 161, 95, 0.14),
      rgba(201, 161, 95, 0) 66%
    );
}

/* The old standalone veil layer is gone. */
.page-hero__veil {
  display: none;
}

.page-hero__crumb,
.page-hero h1,
.page-hero .lede {
  text-shadow:
    0 1px 2px rgba(6, 6, 8, 0.7),
    0 4px 10px rgba(6, 6, 8, 0.5),
    0 0 24px rgba(6, 6, 8, 0.3);
}

/* Hero text is always visible: it must never wait on the scroll-reveal
   state (which starts elements at opacity 0), so a JS hiccup can't hide
   the breadcrumb, heading, tag, or lede on any hero. */
.page-hero [data-reveal] {
  opacity: 1;
  transform: none;
}

.page-hero__crumb {
  margin-bottom: 0;
}

.page-hero h1 {
  margin-top: 1rem;
  margin-bottom: 0;
}

.page-hero .lede {
  margin-top: 1.2rem;
  margin-bottom: 0;
}

.page-hero .wrap {
  position: relative;
  z-index: 1;
  padding-top: clamp(0.75rem, 2.5vh, 2rem);
  padding-bottom: clamp(0.75rem, 2.5vh, 2rem);
}

/* The hero container itself is transparent — never a black panel. If a
   photo is slow or fails to load, the band shows only a soft bronze
   wash instead of black. */
.page-hero {
  background-color: transparent;
  background-image: radial-gradient(
    ellipse 80% 60% at 50% 0%,
    rgba(201, 161, 95, 0.09),
    transparent 62%
  );
  /* Clears a leftover padding/border-bottom from the legacy (pre-photo)
     .page-hero rule in style.css that still cascades in behind this
     one. It has no visible effect in most browsers, but it left the
     containing block for .page-hero__media (position: absolute)
     ambiguous, which is the kind of mismatch that can make a browser
     mis-place an absolutely positioned layer at a corner. */
  padding: 0;
  border-bottom: 0;
}

/* -------- Interior hero — premium editorial finish --------
   Additive polish only: same structure and photos, refined type and
   accents that echo the homepage + brand system (Cormorant italic gold,
   mono breadcrumbs, bronze hairlines, soft glass chips). */

/* 1. Hero headings — the italic keyword renders in Cormorant with the
   warm gold gradient, matching the display headings used everywhere
   else on the site (hero italics were plain white before). */
.page-hero h1 .italic {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 500;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-right: 0.06em;
}

/* 2. Breadcrumb — brighter copy with a small gold rule in front,
   echoing the site's eyebrow treatment. */
.page-hero__crumb {
  color: rgba(239, 233, 220, 0.82);
}

.page-hero__crumb::before {
  content: "";
  flex: none;
  width: 26px;
  height: 1px;
  background: linear-gradient(90deg, var(--bronze-light), var(--bronze));
  align-self: center;
  box-shadow: 0 0 12px rgba(201, 161, 95, 0.3);
}

/* 3. Lede — brighter for confident readability over the photo. */
.page-hero .lede {
  color: rgba(239, 233, 220, 0.88);
}

/* 4. Tag chip — gold hairline over a soft dark glass so it reads
   cleanly on any photo without covering it. */
.page-hero__tag {
  border-color: rgba(236, 211, 160, 0.6);
  background: rgba(10, 10, 12, 0.3);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* 5. Presence — the photo band stands a touch taller on larger
   screens; the image still fills it edge to edge (no dark space). */
.page-hero {
  min-height: clamp(20rem, 52svh, 40rem);
}

/* -------- Coverage map + area list -------- */
.area-layout {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(2.4rem, 5vw, 5rem);
  align-items: center;
}

.area-layout .lede {
  margin-bottom: 1.4rem;
}

.area-list {
  border-top: 1px solid var(--line);
}

.area-list__item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 1.05rem 0.1rem;
  border-bottom: 1px solid var(--line);
  transition: padding-left 0.4s var(--ease), border-color 0.4s var(--ease);
}

.area-list__item:hover {
  padding-left: 0.6rem;
  border-bottom-color: rgba(201, 161, 95, 0.5);
}

.area-list__item a {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--bone);
  transition: color 0.3s;
}

.area-list__item:hover a {
  color: var(--bronze-light);
}

.area-list__item span {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--bone-fainter);
  white-space: nowrap;
}

.coverage-map {
  width: 100%;
  height: auto;
  display: block;
  color: var(--bronze);
}

.area-map {
  position: relative;
  border: 1px solid var(--line);
  padding: 1.6rem;
  background:
    radial-gradient(ellipse 90% 70% at 50% 40%, rgba(201, 161, 95, 0.08), transparent 70%),
    var(--ink-2);
}

.area-map::after {
  content: "";
  position: absolute;
  inset: 0.55rem;
  border: 1px solid rgba(201, 161, 95, 0.22);
  pointer-events: none;
}

.area-map__label {
  display: block;
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--bone-fainter);
  text-align: center;
}

/* -------- Proof-of-work cards (featured engagements) -------- */
.proof-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--panel), var(--ink-2));
  padding: 2.1rem 2rem 2.2rem;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  overflow: hidden;
}

.proof-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: var(--grad-gold);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.6s var(--ease);
}

.proof-card:hover {
  transform: translateY(-6px);
  border-color: rgba(201, 161, 95, 0.5);
  box-shadow: 0 28px 55px -24px rgba(0, 0, 0, 0.8);
}

.proof-card:hover::before {
  transform: scaleY(1);
}

.proof-card__tag {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--bronze);
}

.proof-card h3 {
  font-size: 1.32rem;
  line-height: 1.2;
  margin: 0;
}

.proof-card p {
  font-size: 0.93rem;
  color: var(--bone-muted);
  line-height: 1.7;
}

.proof-card__link {
  margin-top: auto;
  padding-top: 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--bronze-light);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  border-top: 1px solid var(--line);
  width: 100%;
  transition: gap var(--dur) var(--ease), color 0.3s;
}

.proof-card:hover .proof-card__link {
  gap: 1em;
  color: var(--bone);
}

/* -------- Footer team rows -------- */
.footer__person a {
  display: block;
  margin-top: 0.22rem;
}

/* ============================================================
   Full-screen mobile menu (premium)  [<= 900px]
   ============================================================ */
@media (max-width: 900px) {
  .mobile-menu {
    z-index: 990;
    justify-content: flex-start;
    align-items: stretch;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: calc(var(--nav-h) + 0.6rem) var(--gutter) 3.4rem;
    background:
      radial-gradient(ellipse 90% 55% at 100% 0%, rgba(201, 161, 95, 0.1), transparent 60%),
      radial-gradient(ellipse 70% 45% at 0% 100%, rgba(201, 161, 95, 0.05), transparent 60%),
      linear-gradient(165deg, #101015 0%, #0a0a0c 55%, #09090b 100%);
  }

  .mm-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(1rem, 4vw, 1.5rem);
    flex-wrap: nowrap;
    margin-bottom: 1.2rem;
  }

  .mm-kicker {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.44em;
    text-transform: uppercase;
    color: var(--bronze);
  }

  .mm-kicker::before {
    content: "";
    display: inline-block;
    width: 2.2em;
    height: 1px;
    margin-right: 0.8em;
    vertical-align: middle;
    background: linear-gradient(90deg, var(--bronze), transparent);
  }

  .mm-cta {
    padding: 0.85em 1.3em;
    font-size: 0.62rem;
    white-space: nowrap;
    flex: 0 0 auto;
    letter-spacing: 0.16em;
  }

  .mm-nav {
    display: grid;
    gap: 0.15rem;
  }

  .mm-link {
    width: 100%;
    display: grid;
    grid-template-columns: 2.6rem 1fr auto;
    align-items: center;
    gap: 0.6rem;
    padding: 1rem 0.35rem;
    text-align: left;
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 5.4vw, 2rem);
    font-weight: 700;
    color: var(--bone);
    border-bottom: 1px solid var(--line);
    transition: color 0.35s var(--ease), padding-left 0.45s var(--ease);
  }

  .mm-link:hover {
    color: var(--bronze-light);
    padding-left: 0.7rem;
  }

  .mm-num {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 400;
    letter-spacing: 0.2em;
    color: var(--bronze);
    align-self: start;
    padding-top: 0.85em;
  }

  .mm-name {
    line-height: 1.12;
  }

  .mm-arr {
    width: 20px;
    height: 20px;
    color: rgba(201, 161, 95, 0.9);
    transition: transform 0.4s var(--ease);
  }

  .mm-link:hover .mm-arr {
    transform: translateX(5px);
  }

  .mm-group {
    display: grid;
    gap: 0;
  }

  .mm-trigger {
    background: none;
    border: 0;
    border-bottom: 1px solid var(--line);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
  }

  .mm-group .mm-arr {
    transition: transform 0.45s var(--ease);
  }

  .mm-group.is-open .mm-arr {
    transform: rotate(90deg);
  }

  .mm-group.is-open .mm-trigger {
    color: var(--bronze-light);
  }

  .mm-sub {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.6s var(--ease), opacity 0.45s var(--ease);
  }

  .mm-group.is-open .mm-sub {
    max-height: 430px;
    opacity: 1;
  }

  .mm-sub a {
    display: flex;
    align-items: baseline;
    gap: 0.7em;
    margin-left: 3.15rem;
    padding: 0.44rem 0 0.44rem 0.9rem;
    font-family: var(--font-body);
    font-size: 0.98rem;
    color: var(--bone-muted);
    border-left: 1px solid rgba(201, 161, 95, 0.35);
    opacity: 0;
    transform: translateY(6px);
  }

  .mm-group.is-open .mm-sub a {
    opacity: 1;
    transform: translateY(0);
    transition: color 0.3s, border-color 0.3s, padding-left 0.3s var(--ease),
      opacity 0.45s var(--ease) calc(var(--i, 0) * 40ms), transform 0.45s var(--ease) calc(var(--i, 0) * 40ms);
  }

  .mm-group.is-open .mm-sub a:nth-child(1) {
    --i: 1;
  }
  .mm-group.is-open .mm-sub a:nth-child(2) {
    --i: 2;
  }
  .mm-group.is-open .mm-sub a:nth-child(3) {
    --i: 3;
  }
  .mm-group.is-open .mm-sub a:nth-child(4) {
    --i: 4;
  }
  .mm-group.is-open .mm-sub a:nth-child(5) {
    --i: 5;
  }
  .mm-group.is-open .mm-sub a:nth-child(6) {
    --i: 6;
  }
  .mm-group.is-open .mm-sub a:nth-child(7) {
    --i: 7;
  }

  .mm-sub a::before {
    content: "";
    width: 6px;
    height: 6px;
    background: var(--bronze);
    flex-shrink: 0;
    align-self: center;
  }

  .mm-sub a:hover {
    color: var(--bronze-light);
    border-left-color: var(--bronze);
    padding-left: 1.25rem;
  }

  /* Staggered entrance when the menu opens */
  .mm-nav > * {
    opacity: 0;
  }

  body.menu-open .mobile-menu .mm-nav > * {
    animation: mmRise 0.75s var(--ease) both;
  }

  body.menu-open .mobile-menu .mm-nav > *:nth-child(1) {
    animation-delay: 0.12s;
  }
  body.menu-open .mobile-menu .mm-nav > *:nth-child(2) {
    animation-delay: 0.2s;
  }
  body.menu-open .mobile-menu .mm-nav > *:nth-child(3) {
    animation-delay: 0.28s;
  }
  body.menu-open .mobile-menu .mm-nav > *:nth-child(4) {
    animation-delay: 0.36s;
  }
  body.menu-open .mobile-menu .mm-nav > *:nth-child(5) {
    animation-delay: 0.44s;
  }
  body.menu-open .mobile-menu .mm-nav > *:nth-child(6) {
    animation-delay: 0.52s;
  }

  @keyframes mmRise {
    from {
      opacity: 0;
      transform: translateY(24px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .mm-foot {
    margin-top: 2.6rem;
    padding-top: 1.7rem;
    border-top: 1px solid var(--line-strong);
    display: grid;
    /* One shared two-column grid for every contact row. The name column
       is left-aligned; the phone column is one shared track that both
       numbers stretch across, so the diamond bullets and the digits of
       both numbers start at the exact same x on every page. */
    grid-template-columns: minmax(0, 1fr) max-content;
    column-gap: 0.9rem;
    row-gap: 0.7rem;
    align-items: baseline;
  }

  /* Rows pour their cells straight into the shared .mm-foot grid above. */
  .mm-people {
    display: contents;
  }

  .mm-who {
    justify-self: start;
    font-family: var(--font-mono);
    font-size: 0.64rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--bronze-light);
    white-space: nowrap;
  }

  /* .mm-people uses display: contents, so the entrance animation targets
     the real leaf boxes (name, number, region) instead. */
  .mm-foot .mm-who,
  .mm-foot .mm-tel,
  .mm-foot .mm-region {
    opacity: 0;
  }

  body.menu-open .mobile-menu .mm-foot .mm-who,
  body.menu-open .mobile-menu .mm-foot .mm-tel,
  body.menu-open .mobile-menu .mm-foot .mm-region {
    animation: mmRise 0.75s var(--ease) both;
  }

  /* All contact rows rise as one block (single shared delay) so the two
     numbers are never caught at different heights mid-animation. */
  body.menu-open .mobile-menu .mm-foot .mm-who,
  body.menu-open .mobile-menu .mm-foot .mm-tel,
  body.menu-open .mobile-menu .mm-foot .mm-region {
    animation-delay: 0.55s;
  }

  .mm-tel {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--bone);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    justify-self: stretch;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    transition: color 0.3s;
  }

  .mm-tel::before {
    content: "";
    width: 7px;
    height: 7px;
    background: var(--bronze);
    transform: rotate(45deg);
  }

  .mm-tel:hover {
    color: var(--bronze-light);
  }

  .mm-mail {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    color: var(--bone-muted);
    transition: color 0.3s;
  }

  .mm-mail:hover {
    color: var(--bronze-light);
  }

  .mm-region {
    grid-column: 1 / -1;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--bone-fainter);
  }
}

@media (max-width: 900px) {
  .area-layout {
    grid-template-columns: 1fr;
    gap: 2.6rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mm-sub a {
    opacity: 1 !important;
    transform: none !important;
  }
  .mm-group.is-open .mm-sub {
    max-height: 430px;
  }
}

/* ============================================================
   Editorial interlude — the GroundStrike standard
   ============================================================ */
.statement-band {
  position: relative;
  padding-block: clamp(4.5rem, 9vw, 7rem);
  overflow: hidden;
}

.statement-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 90% at 50% 50%, rgba(201, 161, 95, 0.07), transparent 70%);
  pointer-events: none;
}

.statement-band__inner {
  position: relative;
  max-width: 54rem;
  margin-inline: auto;
  text-align: center;
}

.statement-band__orn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.95rem;
  margin-bottom: 2.4rem;
}

.statement-band__orn::before,
.statement-band__orn::after {
  content: "";
  width: min(9rem, 20vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 161, 95, 0.55));
}

.statement-band__orn::after {
  background: linear-gradient(90deg, rgba(201, 161, 95, 0.55), transparent);
}

.statement-band__gem {
  width: 7px;
  height: 7px;
  background: var(--bronze);
  transform: rotate(45deg);
  flex-shrink: 0;
}

.statement-band blockquote {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.6vw, 2.7rem);
  line-height: 1.28;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--bone);
  text-wrap: balance;
}

.statement-band blockquote .italic {
  color: var(--bronze-light);
}

@media (max-width: 640px) {
  .statement-band__orn {
    margin-bottom: 1.7rem;
  }
}

/* ============================================================
   Mobile menu — accordion hardening & final polish
   (guarantees the Services submenu opens/closes regardless of
   any other layer, and smooths the sub-link motion both ways)
   ============================================================ */
@media (max-width: 900px) {
  .mm-head {
    flex-wrap: nowrap;
    gap: clamp(1rem, 4vw, 1.5rem);
  }

  .mm-cta {
    flex: 0 0 auto;
  }

  /* Closed state — nothing can leak the submenu open */
  .mobile-menu .mm-group .mm-sub {
    max-height: 0;
    opacity: 0;
    visibility: hidden;
  }

  .mobile-menu .mm-group .mm-sub a {
    transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s ease,
      border-color 0.3s ease, padding-left 0.3s var(--ease);
  }

  /* Open state — highest local specificity wins */
  body.menu-open .mobile-menu .mm-group.is-open .mm-sub {
    max-height: 480px;
    opacity: 1;
    visibility: visible;
  }

  body.menu-open .mobile-menu .mm-group.is-open .mm-sub a {
    transition: color 0.3s, border-color 0.3s, padding-left 0.3s var(--ease),
      opacity 0.45s var(--ease) calc(var(--i, 0) * 40ms),
      transform 0.45s var(--ease) calc(var(--i, 0) * 40ms);
  }

  /* Luxe detail — the trigger label warms to gold while open */
  .mm-group.is-open .mm-trigger .mm-name {
    color: var(--bronze-light);
  }

  .mm-trigger {
    position: relative;
    z-index: 1;
  }
}

/* ============================================================
   Services row — visually uniform with every other primary row.
   Services now renders exactly like Home / Projects / About /
   Contact: the same display serif at the same weight and size,
   with the same gold chevron. The chevron rotates down when the
   row is tapped so the submenu still opens beneath it.
   ============================================================ */
.mobile-menu .mm-group .mm-link .mm-arr {
  transition: transform 0.45s var(--ease);
}

.mobile-menu .mm-group.is-open .mm-link .mm-arr {
  transform: rotate(90deg);
}

.mobile-menu .mm-group .mm-name {
  font-family: var(--font-display);
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

/* Very narrow phones: keep the two contact rows on one line each so
   the numbers stay perfectly right-aligned without wrapping. */
@media (max-width: 360px) {
  .mm-foot {
    column-gap: 0.6rem;
  }
  .mm-tel {
    font-size: 1.3rem;
    gap: 0.55rem;
  }
}

/* ============================================================
   HOMEPAGE HERO — same premium composition as the interior
   heroes, applied to the full-screen `.hero` band.

   The dark sky corner of the photo behind the fixed header is
   covered by a solid page-color band (fading out ~130px below
   the nav), so the top-left of the hero no longer reads as a
   black block. The middle of the photo stays fully visible, a
   soft left scrim + bottom-up gradient keep the copy legible,
   and a bronze-tinted glow anchors the text zone.
   ============================================================ */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    /* 1. Solid page-color band behind the header — the dark sky
          corner of the photo is fully covered so the top-left
          never reads as a black square patch. */
    linear-gradient(
        180deg,
        rgba(10, 10, 12, 1) 0%,
        rgba(10, 10, 12, 0.92) 42%,
        rgba(10, 10, 12, 0.45) 70%,
        rgba(10, 10, 12, 0) 100%
      )
      top / 100% calc(var(--nav-h) + 130px) no-repeat,
    /* 2. Soft left-edge scrim so the copy column stays legible. */
    linear-gradient(
      90deg,
      rgba(8, 8, 10, 0.38) 0%,
      rgba(8, 8, 10, 0.2) 24%,
      rgba(8, 8, 10, 0) 52%
    ),
    /* 3. Bottom-up gradient under the CTAs and meta, darkest at
          the very bottom edge so the hero melts into the page. */
    linear-gradient(
      180deg,
      rgba(8, 8, 10, 0) 52%,
      rgba(8, 8, 10, 0.14) 68%,
      rgba(8, 8, 10, 0.42) 84%,
      rgba(9, 9, 11, 0.72) 100%
    ),
    /* 4. Bronze-tinted glow anchoring the text zone. */
    radial-gradient(
      ellipse 85% 65% at 18% 92%,
      rgba(201, 161, 95, 0.15),
      rgba(201, 161, 95, 0) 60%
    );
}

/* The old standalone veil layer is gone — the layered composition
   above handles scrims and contrast. */
.hero__veil {
  display: none;
}

/* Hero copy keeps strong contrast over the photo at every layer. */
.hero__eyebrow,
.hero__title,
.hero__lede,
.hero__meta {
  text-shadow:
    0 1px 2px rgba(6, 6, 8, 0.7),
    0 4px 12px rgba(6, 6, 8, 0.5);
}

.hero__title {
  text-shadow:
    0 2px 18px rgba(6, 6, 8, 0.45),
    0 1px 2px rgba(6, 6, 8, 0.7);
}

/* Absolute safety net: the hero band never paints a flat black
   panel. If the photo is ever slow or fails to load, the band
   falls back to a soft bronze-tinted gradient. */
.hero {
  background:
    radial-gradient(ellipse 75% 120% at 50% 0%, rgba(201, 161, 95, 0.1), transparent 55%),
    linear-gradient(170deg, #17171d 0%, #0d0d11 60%, #0a0a0c 100%);
}