/* Header and opening share a sticky context; the service panel returns to normal flow. */
.hero-top { position: relative; }
header[data-piece="hero"] {
  --logo: 74px;
  --util-h: 39px;
  position: sticky;
  top: calc(-1 * var(--util-h));
  z-index: 30;
  border-bottom: 1px solid var(--band-rule);
}
header[data-piece="hero"] .masthead .wrap { padding-block: 9px; }
header[data-piece="hero"] .brand img { height: var(--logo); }
header[data-piece="hero"] .menu summary { display: inline-flex; align-items: center; min-height: 48px; }
header[data-piece="hero"] .utility .aog-line a { min-height: 38px; display: inline-flex; align-items: center; letter-spacing: 0.02em; }
header[data-piece="hero"] .utility .tag-aog { font-size: 11px; }

.walkin[data-piece="hero"] {
  --logo: 74px;
  --head: calc(39px + 18px + var(--logo) + 1px);
  --dock: 0px;
  --edge: clamp(16px, 4vw, 64px);
  margin-top: calc(-1 * var(--head));
  border-bottom: 1px solid var(--band-rule);
}
.walkin[data-piece="hero"] .walkin-stage {
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: stretch;
  min-height: max(620px, min(100svh, 900px));
}
/* Give the complete closed-door-to-aircraft sequence room to unfold with the scroll. */
.walkin.is-live[data-piece="hero"] { height: 480vh; }
.walkin.is-live[data-piece="hero"] .walkin-stage { min-height: 620px; }
.walkin[data-piece="hero"] .walkin-shade {
  opacity: calc(0.2 + var(--copy) * 0.8);
  background:
    linear-gradient(97deg, rgb(11 10 8 / 0.82) 0%, rgb(11 10 8 / 0.65) 16%, rgb(11 10 8 / 0.38) 30%, rgb(11 10 8 / 0.12) 44%, transparent 60%),
    linear-gradient(0deg, rgb(11 10 8 / 0.86), rgb(11 10 8 / 0.3) 23%, transparent 46%);
}
.walkin[data-piece="hero"] .walkin-copy {
  align-self: center;
  display: grid;
  justify-items: start;
  gap: 30px;
  max-width: none;
  padding: calc(var(--head) + 24px) var(--edge) 24px;
  opacity: 1;
  transform: none;
}
.walkin[data-piece="hero"] .walkin-intro .label { margin: 0; }
.walkin[data-piece="hero"] .walkin-intro,
.walkin[data-piece="hero"] .walkin-copy .actions { opacity: var(--copy); }
.walkin[data-piece="hero"] .walkin-copy .actions[inert] { pointer-events: none; }
.walkin[data-piece="hero"] .walkin-poster {
  object-fit: contain;
  object-position: center;
  padding-top: var(--head);
}
.walkin[data-piece="hero"] .walkin-intro h1 {
  font-size: clamp(2.5rem, 4.8vw, 4.625rem);
  line-height: 1.05;
  letter-spacing: -0.005em;
  max-width: 13ch;
  margin-block: 18px 22px;
}
.walkin[data-piece="hero"] .walkin-intro .lede {
  color: var(--band-ink);
  opacity: 0.82;
  font-size: var(--t-lg);
  line-height: 1.5;
  max-width: min(36ch, calc(50vw - var(--edge) - 72px));
  margin: 0;
}
.walkin[data-piece="hero"] .walkin-copy .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 0; }
.walkin[data-piece="hero"] .walkin-request { display: none; }
.walkin-mobile-caption { display: none; }
.service-shortcuts { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-block: 32px; border-bottom: 1px solid var(--rule); scroll-margin-top: 24px; }
.service-shortcuts .label { margin: 0; }
.walkin[data-piece="hero"] .walkin-foot { position: relative; z-index: 2; padding: 0 var(--edge) calc(22px + var(--dock)); }
.walkin[data-piece="hero"] .walkin-hud {
  position: static;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
  min-height: 40px;
  padding: 0;
  pointer-events: auto;
  font: 400 var(--t-xs)/1.4 var(--f-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--band-muted);
}
.walkin[data-piece="hero"] .walkin-where,
.walkin[data-piece="hero"] .walkin-contact { grid-area: 1 / 1; justify-self: start; }
.walkin[data-piece="hero"] .walkin-contact {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  margin-block: -4px;
  visibility: hidden;
  color: var(--band-ink);
  letter-spacing: 0.04em;
  text-decoration-color: var(--band-muted);
  text-underline-offset: 4px;
}
.walkin[data-piece="hero"] .walkin-contact:hover { color: var(--gold); }
.walkin.is-entered[data-piece="hero"] .walkin-contact { visibility: visible; }
.walkin.is-entered[data-piece="hero"] .walkin-where { visibility: hidden; }
.walkin[data-piece="hero"] .walkin-cue { grid-area: 1 / 2; justify-self: end; opacity: var(--cue); color: var(--band-ink); }
.walkin[data-piece="hero"] .walkin-cue::after { content: " ↓"; color: var(--gold); }
.walkin:not(.is-live)[data-piece="hero"] .walkin-cue { visibility: hidden; }

/* Evidence follows the arrival in a different composition: an untouched photograph,
   ordinary document flow, and a concise service overview on the theme's content ground. */
.hero-work[data-piece="hero"] { background: var(--bg); color: var(--ink); }
.hero-work[data-piece="hero"] .hero-work-layout {
  display: grid;
  grid-template-columns: 1.16fr 1fr;
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
  padding: clamp(56px, 6vw, 88px) var(--gutter);
}
.hero-work[data-piece="hero"] .hero-work-photo { margin: 0; align-self: stretch; min-width: 0; }
.hero-work[data-piece="hero"] .hero-work-photo img {
  width: 100%;
  height: 100%;
  min-height: 620px;
  max-height: 760px;
  object-fit: cover;
  object-position: 64% 50%;
}
.hero-work[data-piece="hero"] .hero-work-copy { max-width: 480px; padding-block: 20px; }
.hero-work[data-piece="hero"] h2 { font-size: var(--t-2xl); margin-block: 16px 36px; }
.hero-work[data-piece="hero"] .hero-work-services { margin: 0 0 32px; }
.hero-work[data-piece="hero"] .hero-work-services > div { padding-block: 18px; border-top: 1px solid var(--rule); }
.hero-work[data-piece="hero"] .hero-work-services > div:first-child { border-top-color: var(--ink); }
.hero-work[data-piece="hero"] dt { font: 400 var(--t-lg)/1.12 var(--f-display); }
.hero-work[data-piece="hero"] dd { margin: 8px 0 0; color: var(--muted); font-size: var(--t-md); }

@media (min-width: 1101px) {
  .walkin[data-piece="hero"] .walkin-intro .label .lb-sep,
  .walkin[data-piece="hero"] .walkin-intro .label .lb-b { display: none; }
}
@media (max-width: 1100px) {
  header[data-piece="hero"], .walkin[data-piece="hero"] { --logo: 58px; }
  header[data-piece="hero"] .nav { display: flex; }
  header[data-piece="hero"] .nav ul { display: none; }
}
@media (max-width: 760px) {
  header[data-piece="hero"] .masthead .wrap { padding-block: 8px; }
  header[data-piece="hero"] .nav { display: none; }
  .walkin[data-piece="hero"] { --head: calc(39px + 16px + var(--logo) + 1px); }
  .walkin.is-live[data-piece="hero"] { height: 250svh; }
  .walkin.is-live[data-piece="hero"] .walkin-canvas {
    inset: 0 auto auto 0;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    will-change: transform;
  }
  .walkin[data-piece="hero"] .walkin-stage,
  .walkin.is-live[data-piece="hero"] .walkin-stage { height: min(720px, 100svh); min-height: 650px; }
  .walkin:not(.is-live)[data-piece="hero"] .walkin-poster { object-position: center bottom; padding-top: 0; padding-bottom: 94px; }
  .walkin[data-piece="hero"] .walkin-shade {
    background:
      linear-gradient(176deg, rgb(11 10 8 / 0.92) 0%, rgb(11 10 8 / 0.8) 16%, rgb(11 10 8 / 0.53) 30%, rgb(11 10 8 / 0.16) 48%, transparent 65%),
      linear-gradient(0deg, rgb(11 10 8 / 0.95), rgb(11 10 8 / 0.4) 20%, transparent 44%);
  }
  .walkin[data-piece="hero"] .walkin-copy { align-self: start; gap: 22px; padding: calc(var(--head) + 26px) var(--gutter) 20px; }
  .walkin[data-piece="hero"] .walkin-intro h1 { margin-block: 12px 16px; }
  .walkin[data-piece="hero"] .walkin-intro .label .lb-a,
  .walkin[data-piece="hero"] .walkin-intro .label .lb-b { display: block; }
  .walkin[data-piece="hero"] .walkin-intro .label .lb-sep { display: none; }
  .walkin[data-piece="hero"] .walkin-intro .lede { font-size: var(--t-md); max-width: 36ch; }
  .walkin[data-piece="hero"] .walkin-request { display: inline-flex; width: auto; }
  .walkin[data-piece="hero"] .walkin-copy .actions { gap: 10px; }
  .walkin[data-piece="hero"] .walkin-copy .actions .btn { padding-inline: 16px; font-size: 13px; }
  .walkin[data-piece="hero"] .walkin-intro h1 { font-size: clamp(2rem, 9vw, 2.5rem); }
  .walkin-mobile-caption { position: absolute; display: block; top: calc(var(--head) + 56.25vw + 52px); left: var(--gutter); right: var(--gutter); opacity: 0; visibility: hidden; }
  .walkin-mobile-caption > p:last-child { margin-top: 12px; font: 400 clamp(1.5rem, 6vw, 2rem)/1.15 var(--f-display); }
  .walkin-mobile-caption em { color: var(--gold); font-style: normal; }
  .walkin.is-entered .walkin-mobile-caption { opacity: calc(1 - var(--copy)); visibility: visible; }
  .service-shortcuts { gap: 12px; padding-block: 28px; }
  .service-shortcuts .label { width: 100%; margin-bottom: 4px; }
  .service-shortcuts .btn { width: 100%; justify-content: space-between; }
  .walkin[data-piece="hero"] .walkin-foot { padding-inline: var(--gutter); padding-bottom: calc(14px + var(--dock)); }
  .walkin[data-piece="hero"] .walkin-where { font-size: 11px; }
  body:has(.callbar) .walkin[data-piece="hero"] { --dock: 76px; }
  body:has(.callbar) .walkin[data-piece="hero"] .walkin-call { display: none; }
  body:has(.callbar) .walkin[data-piece="hero"] .walkin-contact { display: none; }
  body:has(.callbar) .walkin[data-piece="hero"] .walkin-where { visibility: visible; }
  .hero-work[data-piece="hero"] .hero-work-layout { grid-template-columns: 1fr; gap: 32px; padding: 56px var(--gutter); }
  .hero-work[data-piece="hero"] .hero-work-photo img { min-height: 0; height: auto; aspect-ratio: 1 / 1; object-position: 60% 50%; }
  .hero-work[data-piece="hero"] .hero-work-copy { padding: 0; max-width: none; }
  .hero-work[data-piece="hero"] h2 { margin-block: 12px 28px; }
}