/* Interior pages (service + location). Same tokens and components as the home,
   without the WebGL dive: a static hero, editorial lists and light reveals. */

.page main > section { position: relative; z-index: 1; }

/* Page hero */
.page-hero {
  display: grid;
  grid-template-columns: 7fr 5fr;
  align-items: center;
  gap: clamp(2.5rem, 6vw, 6rem);
  max-width: 1240px;
  margin: 0 auto;
  padding: calc(5.5rem + var(--space-section) * 0.45) var(--gutter) calc(var(--space-section) * 0.6);
}
.page-hero::before {
  content: "";
  position: absolute; inset: 0 calc(50% - 50vw); z-index: -1;
  background:
    radial-gradient(50% 45% at 88% 18%, var(--color-glow-warm), transparent 70%),
    radial-gradient(38% 34% at 6% 82%, var(--color-glow-cool), transparent 70%),
    linear-gradient(180deg, var(--color-surface), var(--color-sunlight) 70%, var(--color-surface));
}
.page-hero__title {
  margin: 0 0 1.4rem;
  font-size: var(--text-hero);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.page-hero__lede { max-width: 36ch; margin: 0 0 2rem; font-size: var(--text-lg); line-height: 1.4; }
.page-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }

.page-hero__media { position: relative; margin: 0; }
.page-hero__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-md);
  filter: var(--photo-filter);
  box-shadow: 0 50px 90px -50px rgb(var(--shadow-rgb) / 0.6);
}
/* Floating glass chip that overlaps the photo edge (right side, over open sky) */
.page-hero__chip {
  position: absolute; right: clamp(-2.5rem, -3vw, -1rem); bottom: 2rem;
  display: grid; gap: 0.2rem;
  padding: 1rem 1.3rem;
  border-radius: var(--radius-sm);
  background: var(--color-card);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 24px 50px -24px rgb(var(--shadow-rgb) / 0.55), inset 0 0 0 1px var(--color-rim);
}
.page-hero__chip strong { font-family: var(--font-condensed); font-size: var(--text-xl); font-weight: 700; line-height: 1; }
.page-hero__chip span { font-size: var(--text-sm); color: var(--color-ink-soft); }

.crumbs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.75rem; padding: 0; list-style: none; }
.crumbs li { font-family: var(--font-condensed); font-size: var(--text-sm); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-ink-faint); }
.crumbs li + li::before { content: "/"; margin-right: 0.5rem; }
.crumbs a { color: var(--color-accent-text); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

@media (max-width: 860px) {
  .page-hero { grid-template-columns: 1fr; padding-top: calc(5rem + var(--space-section) * 0.3); }
  .page-hero__media img { aspect-ratio: 4 / 3; object-position: 0 30%; }
  /* No free corner at 4:3 — sit the chip under the photo instead of over the person */
  .page-hero__chip { position: static; width: fit-content; margin: 0.9rem 0 0 auto; }
}

/* Generic section shell + heading */
.block { max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter) var(--space-section); }
.block__head { display: grid; grid-template-columns: 4fr 8fr; gap: 1rem clamp(2rem, 6vw, 6rem); align-items: end; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.block__title { margin: 0; font-size: var(--text-xl); font-weight: 600; line-height: 1.05; letter-spacing: -0.025em; text-wrap: balance; }
.block__intro { max-width: 52ch; margin: 0; color: var(--color-ink-soft); }
@media (max-width: 860px) { .block__head { grid-template-columns: 1fr; } }

.stats--page { margin: 0 auto; padding: 0 var(--gutter) var(--space-section); width: min(1240px, 100%); }

/* Editorial list: numbered rows with a hover wash, used for physical types and services */
.rows { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--color-line); }
.row {
  position: relative;
  display: grid;
  grid-template-columns: 4rem minmax(0, 5fr) minmax(0, 7fr);
  align-items: baseline;
  gap: 0.5rem clamp(1rem, 4vw, 3rem);
  padding: clamp(1.4rem, 3vw, 2rem) clamp(0.5rem, 1.5vw, 1.25rem);
  border-bottom: 1px solid var(--color-line);
  transition: background-color var(--duration-normal) var(--ease-out-expo);
}
.row:hover { background: var(--color-card); }
.row__num { font-family: var(--font-condensed); font-size: 1.1rem; font-weight: 700; letter-spacing: 0.1em; color: var(--color-accent-text); }
.row__title { margin: 0; font-size: var(--text-lg); font-weight: 600; line-height: 1.15; }
.row__text { margin: 0; color: var(--color-ink-soft); }
.row__text .link-arrow { margin-top: 0.6rem; }
.row a.row__cover { text-decoration: none; }
.row a.row__cover::after { content: ""; position: absolute; inset: 0; }
.row:has(.row__cover):hover .row__title { color: var(--color-accent); }
@media (max-width: 640px) {
  .row { grid-template-columns: 2.5rem 1fr; }
  .row__text { grid-column: 2; }
}

/* Steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); margin: 0; padding: 0; list-style: none; counter-reset: step; }
.step { padding-top: 1.25rem; border-top: 2px solid var(--color-aqua); counter-increment: step; }
.step::before {
  content: counter(step, decimal-leading-zero);
  display: block; margin-bottom: 1rem;
  font-family: var(--font-condensed); font-size: var(--text-stat); font-weight: 700; line-height: 0.9;
  color: var(--color-highlight);
}
.step:nth-child(2) { transition-delay: 80ms; }
.step:nth-child(3) { transition-delay: 160ms; }
.step h3 { margin: 0 0 0.6rem; font-size: var(--text-lg); font-weight: 600; }
.step p { margin: 0; color: var(--color-ink-soft); }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }

/* Navy band (employers / languages) — the marquee's colour, standing still */
.band {
  margin-bottom: var(--space-section);
  padding: clamp(3.5rem, 8vw, 6rem) var(--gutter);
  background:
    radial-gradient(40% 80% at 90% 10%, rgb(92 177 230 / 0.28), transparent 70%),
    var(--brand-navy);
  color: var(--brand-white);
}
.band__inner { display: grid; grid-template-columns: 7fr 5fr; align-items: center; gap: clamp(2rem, 6vw, 6rem); max-width: 1240px; margin: 0 auto; }
.band .eyebrow { color: var(--brand-aqua); }
.band__title { margin: 0 0 1.25rem; font-size: var(--text-xl); font-weight: 600; line-height: 1.05; letter-spacing: -0.025em; }
.band__text { max-width: 46ch; margin: 0; color: rgb(255 255 255 / 0.8); }
.band__list { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.band__list li {
  display: flex; align-items: center; gap: 0.9rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgb(255 255 255 / 0.16);
  font-family: var(--font-condensed); font-size: var(--text-lg); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
}
.band__list li::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--brand-sky); }
.band .btn--solid { margin-top: 2rem; background: var(--brand-white); color: var(--brand-navy); }
.band .btn--solid:hover { background: var(--brand-aqua); }
@media (max-width: 860px) { .band__inner { grid-template-columns: 1fr; } }

/* Checklist */
.checklist { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 clamp(2rem, 5vw, 4rem); margin: 0; padding: 0; list-style: none; }
.checklist li { display: flex; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--color-line); }
.checklist li::before {
  content: ""; flex: none; width: 1.4rem; height: 1.4rem; margin-top: 0.1rem;
  border-radius: 50%;
  background: var(--color-aqua-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e84c3' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 62% no-repeat;
}
@media (max-width: 640px) { .checklist { grid-template-columns: 1fr; } }

/* FAQ — native <details>, no JS */
.faq { max-width: 860px; margin: 0 auto; padding: 0 var(--gutter) var(--space-section); }
.faq__title { margin: 0 0 2rem; font-size: var(--text-xl); font-weight: 600; line-height: 1.05; letter-spacing: -0.025em; text-align: center; }
.faq details { border-bottom: 1px solid var(--color-line); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
  padding: 1.35rem 0;
  font-size: var(--text-lg); font-weight: 500; line-height: 1.3;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 2rem; height: 2rem;
  border-radius: 50%;
  background:
    linear-gradient(currentColor, currentColor) center / 12px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 12px no-repeat,
    var(--color-glass);
  box-shadow: inset 0 0 0 1px var(--color-line);
  transition: transform var(--duration-normal) var(--ease-out-expo);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--color-accent); }
.faq details p { max-width: 62ch; margin: 0 0 1.5rem; color: var(--color-ink-soft); }

/* Location: hours card with live open/closed status */
.hours-card {
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border-radius: var(--radius-lg);
  background: var(--color-card);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 30px 70px -40px rgb(var(--shadow-rgb) / 0.45), inset 0 0 0 1px var(--color-rim);
}
.hours-card .visit__address { margin-bottom: 1.25rem; }
.hours-card .hours { max-width: none; }
.status-pill {
  display: inline-flex; align-items: center; gap: 0.55rem;
  margin-bottom: 1.25rem; padding: 0.4em 0.9em;
  border-radius: 999px;
  background: var(--color-aqua-soft);
  font-family: var(--font-condensed); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
}
.status-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--color-ink-faint); }
.status-pill[data-state="open"]::before { background: #2bb673; box-shadow: 0 0 0 4px rgb(43 182 115 / 0.18); }
.status-pill[data-state="closed"]::before { background: var(--color-error); }
.status-pill:empty { display: none; }

/* Location: map */
.map { display: grid; grid-template-columns: 8fr 4fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: stretch; }
.map__frame {
  position: relative; overflow: hidden; min-height: 420px;
  border-radius: var(--radius-md);
  background: var(--color-aqua-soft);
  box-shadow: 0 40px 70px -45px rgb(var(--shadow-rgb) / 0.6), inset 0 0 0 1px var(--color-line);
}
.map__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
[data-theme="dark"] .map__frame iframe { filter: invert(0.9) hue-rotate(180deg) saturate(0.6) brightness(0.95); }
.map__side { display: grid; align-content: space-between; gap: 2rem; padding-top: 1.25rem; border-top: 2px solid var(--color-aqua); }
.map__side .visit__photo { margin: 0; }
@media (max-width: 860px) {
  .map { grid-template-columns: 1fr; }
  .map__frame { min-height: 320px; }
}

/* Location: ZIP / neighbourhood chips reuse .catalog__list */
.areas { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(2rem, 6vw, 6rem); }
.areas__group + .areas__group { margin-top: 2rem; }
.areas .catalog__list li { font-variant-numeric: tabular-nums; }
@media (max-width: 860px) { .areas { grid-template-columns: 1fr; } }

/* Static footer wave on interior pages */
.page .site-footer__wave { animation: none; }