/* ==========================================================================
   layout.css — top bar, header, bands, grids, heroes, footer
   ========================================================================== */

.inner { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); position: relative; }

/* --- top bar -------------------------------------------------------------- */

.topbar { background: var(--anchor); color: #CFE6F0; font-size: 0.85rem; }
.topbar-inner {
  max-width: var(--maxw); margin-inline: auto; padding: 8px var(--pad);
  display: flex; justify-content: space-between; gap: 6px 22px; flex-wrap: wrap;
}
.topbar-set { display: flex; gap: 6px 20px; flex-wrap: wrap; }
.topbar a { color: #CFE6F0; text-decoration: none; }
.topbar a:hover { color: var(--sun); }

/* --- header: floating rounded bar ----------------------------------------- */

.masthead {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40;
  padding: 12px var(--pad) 0;
  pointer-events: none;
}
.masthead-inner {
  pointer-events: auto;
  max-width: var(--maxw); margin-inline: auto;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-radius: 999px;
  padding: 8px 8px 8px 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  box-shadow: var(--shadow-soft);
  transition: box-shadow .3s, padding .3s;
}
.masthead.scrolled .masthead-inner { box-shadow: 0 16px 40px -20px rgba(21, 54, 67, .55); }

.wordmark { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-logo { height: 48px; width: auto; }

.site-nav[hidden] { display: none; }
.site-nav { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.site-nav a:not(.btn) {
  font-family: var(--round); font-weight: 700; font-size: 0.95rem;
  color: var(--anchor); text-decoration: none;
  padding: 8px 12px; border-radius: 999px;
  transition: background .2s;
}
.site-nav a:not(.btn):hover { background: var(--lead-pale); }
.site-nav a[aria-current="page"]:not(.btn) { background: var(--lead-pale); box-shadow: inset 0 -2px 0 var(--accent); }
.site-nav .btn { margin-left: 8px; }

.nav-toggle {
  display: none;
  font-family: var(--round); font-weight: 800; font-size: 0.95rem;
  background: var(--anchor); color: var(--white);
  border: 0; border-radius: 999px; padding: 10px 18px; cursor: pointer;
}

@media (max-width: 1020px) {
  .site-nav a:not(.btn) { padding: 8px 8px; font-size: 0.9rem; }
}

@media (max-width: 900px) {
  .masthead-inner { border-radius: 28px; flex-wrap: wrap; padding: 8px 8px 8px 16px; }
  .nav-toggle { display: inline-block; }
  .brand-logo { height: 40px; }
  .site-nav { flex-basis: 100%; flex-direction: column; align-items: stretch; padding: 6px 4px 10px; gap: 2px; }
  .site-nav a:not(.btn) { padding: 12px 14px; font-size: 1.05rem; }
  .site-nav .btn { margin: 8px 0 0; }
}

/* --- bands ---------------------------------------------------------------- */

.band { padding-block: var(--band-y); position: relative; }
.band-tight { padding-top: 0; }
.band-paper { background: var(--paper); }
.band-pale, .band-blue, .band-lead { background: var(--lead-pale); }
.band-relief { background: var(--relief-pale); }

/* dark closing panel on inner pages: a rounded card with a sun glow */
.band-anchor { background: var(--paper); padding-top: 0; }
.band-anchor > .inner {
  background: var(--anchor); color: var(--white);
  border-radius: calc(var(--radius) + 8px);
  padding-block: clamp(40px, 7vw, 80px);
  overflow: hidden; isolation: isolate;
  margin-inline: max(var(--pad), calc((100% - var(--maxw)) / 2 + var(--pad)));
  max-width: none;
}
.band-anchor > .inner::before {
  content: ""; position: absolute; z-index: -1; right: -180px; top: -200px;
  width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle, rgba(249, 193, 56, .38), rgba(249, 193, 56, .08) 45%, transparent 70%);
  animation: breathe 7s ease-in-out infinite;
}
.band-anchor h2 { color: var(--white) !important; }
.band-anchor .body-copy { color: #CFE6F0 !important; }

.sec-head { display: flex; flex-direction: column; gap: 12px; margin-bottom: clamp(32px, 4vw, 64px); max-width: 900px; }
.sec-head.centered { text-align: center; align-items: center; margin-inline: auto; }
.sec-head .btn-row { margin-top: 8px; }

.sec-split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px clamp(24px, 5vw, 72px);
  align-items: end; margin-bottom: clamp(32px, 5vw, 52px);
}

/* --- grids ---------------------------------------------------------------- */

.grid-2, .grid-3, .grid-4 { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 6vw, 140px); align-items: center; }
.split-rev { grid-template-columns: 1fr 1fr; }
.split-copy { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.split-copy .btn-row, .split-copy .spec-list { margin-top: 8px; align-self: stretch; }

/* --- homepage hero -------------------------------------------------------- */

.home-hero { position: relative; overflow: hidden; padding-block: clamp(36px, 6vw, 80px) clamp(48px, 7vw, 96px); margin-top: -80px; padding-top: calc(80px + clamp(36px, 6vw, 72px)); }
.home-hero-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.home-hero-copy { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; position: relative; }

.hero-title { font-size: clamp(2.8rem, 5.2vw, 6.4rem); line-height: 1.0; }
.hero-title .ln { display: block; overflow: hidden; padding-bottom: .06em; }
.hero-title .ln > span { display: inline-block; animation: line-up 1s var(--ease) both; }
.hero-title .ln:nth-child(2) > span { animation-delay: .12s; }
@keyframes line-up { from { transform: translateY(70%); opacity: .2; } }

/* --- inner page hero ------------------------------------------------------ */

.page-hero { position: relative; overflow: hidden; background: var(--lead-pale); margin-top: -80px; padding: calc(80px + clamp(40px, 6vw, 72px)) 0 clamp(40px, 6vw, 72px); }
.page-hero-grid { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.page-hero.has-image .page-hero-grid { grid-template-columns: 1.4fr .6fr; }
.page-hero-copy { display: flex; flex-direction: column; gap: 18px; max-width: 980px; position: relative; }
.page-hero h1 { font-size: clamp(2.2rem, 4.4vw, 4.8rem); }
.page-hero .lede { max-width: 58ch; }
.arch-hero { --arch-v: 43%; aspect-ratio: 4 / 4.6; width: 100%; justify-self: end; max-width: min(520px, 30vw); }

.wave { display: block; width: 100%; height: 56px; margin-top: -1px; background: var(--paper); }
.wave path { fill: var(--lead-pale); }

/* --- footer --------------------------------------------------------------- */

.site-footer {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--anchor); color: #CFE6F0;
  border-radius: 40px 40px 0 0;
  margin-top: clamp(24px, 4vw, 48px);
  padding: clamp(48px, 7vw, 80px) var(--pad) 28px;
}
.footer-sun {
  position: absolute; z-index: -1; left: 50%; bottom: -380px; translate: -50% 0;
  width: 760px; height: 560px; border-radius: 50%;
  background: radial-gradient(circle, rgba(249, 193, 56, .22), transparent 65%);
}
.footer-cols { max-width: var(--maxw); margin-inline: auto; display: grid; grid-template-columns: 1.6fr 1fr 1.1fr 1fr; gap: 32px; }
.fcol { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; font-size: 0.95rem; }
.fcol h4 { color: var(--sun); font-size: 0.8rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 6px; }
.fcol a { color: #CFE6F0; text-decoration: none; }
.fcol a:hover, .fcol a[aria-current="page"] { color: var(--white); }
.footer-brand { gap: 12px; margin-bottom: 6px; }
.brand-icon { width: 58px; height: 58px; object-fit: contain; }
.wordmark-text { display: flex; flex-direction: column; }
.wordmark-name { font-family: var(--round); font-weight: 900; font-size: 1.5rem; color: var(--lead); line-height: 1.1; }
.wordmark-sub { font-size: 0.66rem; letter-spacing: .3em; text-transform: uppercase; color: #CFE6F0; }
.footer-slogan { font-family: var(--display); font-size: 1.3rem; color: var(--white); }
.footer-note { font-size: 0.88rem; max-width: 40ch; opacity: .85; }
.footer-note a { color: var(--lead); }
/* bottom row: location left, equal housing centered, copyright right */
.footer-legal {
  max-width: var(--maxw); margin: 40px auto 0; padding-top: 20px;
  border-top: 1px solid rgba(207, 230, 240, .18);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px 22px;
  font-size: 0.82rem; opacity: .8;
}
.footer-legal > :nth-child(1) { justify-self: start; }
.footer-legal > :nth-child(2) { justify-self: center; text-align: center; }
.footer-legal > :nth-child(3) { justify-self: end; text-align: right; }

/* --- responsive ----------------------------------------------------------- */

@media (max-width: 960px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .footer-cols { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .home-hero-grid, .page-hero.has-image .page-hero-grid, .split, .split-rev, .sec-split { grid-template-columns: 1fr; }
  .split-rev > .split-copy { order: 2; }
  .arch-hero { justify-self: start; max-width: 320px; }
}

@media (max-width: 600px) {
  body { font-size: 16px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .footer-cols { grid-template-columns: 1fr; }
  .topbar-inner > .topbar-set:first-child { display: none; }
  .site-footer { border-radius: 28px 28px 0 0; }
}

.footer-credit a { color: var(--sun); text-decoration: none; font-weight: 600; }
.footer-credit a:hover { text-decoration: underline; }

/* phones: stack the three items, centered */
@media (max-width: 600px) {
  .footer-legal { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .footer-legal > :nth-child(n) { justify-self: center; text-align: center; }
}