/* Layout: page frame and section grids. Mobile first; tablet ≥701px, desktop ≥1024px. */
.wrap { width: min(var(--wrap-max), 100% - 2 * var(--gutter)); margin-inline: auto; }

/* Header */
.site-header { position: absolute; inset: 0 0 auto; z-index: 20; }
.js-enabled .site-header { position: fixed; }
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: var(--header-h);
}

/* Hero: full-bleed image layer, HUD-framed content on top. */
.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: max(38rem, 100svh);
  overflow: hidden;
}
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-floor { position: absolute; inset: auto 0 0; z-index: -1; height: 48%; }
.hero-inner {
  --hud-inset: calc(var(--header-h) + var(--space-2)) 0 var(--space-4);
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--space-6);
  padding-block: calc(var(--header-h) + var(--space-5)) var(--space-7);
}
.hero-copy { align-self: end; }

/* Content sections */
.section { padding-block: var(--section-y); scroll-margin-top: var(--header-h); }
.about-grid { display: grid; gap: var(--space-7); align-items: center; }
.section-head { display: grid; gap: var(--space-4); margin-bottom: var(--space-7); }
.directions-grid { display: grid; gap: var(--space-4); }
.card-list { display: grid; gap: var(--space-4); }

/* Contact + footer */
.contact {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  scroll-margin-top: var(--header-h);
}
.contact-media { position: absolute; inset: 0; z-index: -1; }
.contact-inner {
  display: grid;
  gap: var(--space-8);
  padding-top: var(--section-y);
}
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-5);
  padding-block: var(--space-4) max(var(--space-4), env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
}

/* Tablet */
@media (min-width: 701px) {
  :root { --header-h: 5rem; }
  .hero-inner { padding-bottom: var(--space-8); --hud-inset: calc(var(--header-h) + var(--space-3)) 0 var(--space-5); }
  .about-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-7); }
  .section-head { grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: var(--space-7); }
  .section-head .section-label { padding-bottom: .6em; }
  .card-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Desktop */
@media (min-width: 1024px) {
  .about-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-8); }
  .directions-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-5); }
  .card-list { grid-template-columns: minmax(0, 1fr); }
}

/* Without JS the full nav stays visible; let it wrap under the brand on narrow screens. */
@media (max-width: 700px) {
  html:not(.js-enabled) .header-inner { flex-wrap: wrap; gap: 0; padding-block: var(--space-2); }
  html:not(.js-enabled) .hero-inner { padding-top: 11rem; --hud-inset: 10rem 0 var(--space-4); }
}