/* ============================================================
   ICZ: contact.html page-scoped layer
   Extends the locked shared system (styles.css). Never forks the
   shell. Everything here is gated under body.page-contact so it
   cannot leak onto other inner pages sharing the stylesheet.
   Tokens traced to design/brands/icz.md.
   ============================================================ */

/* ---------- Secondary hero VARIANT (split: copy + distinct contact photo) ----------
   The home hero is a full-width headline over the faceted SVG motif.
   This page's hero reads as SECONDARY: a tighter split composition,
   a real photo plate on the right, smaller display size. Same grammar
   (pale band, sentence-case head, two pills), different composition. */
.page-contact .subhero {
  position: relative; overflow: clip;
  padding-top: clamp(7rem, 6rem + 8vw, 10rem);
  padding-bottom: clamp(2.5rem, 2rem + 4vw, 4.5rem);
  background:
    radial-gradient(110% 80% at 92% -10%, rgba(24,144,200,.16), transparent 55%),   /* --accent glow */
    radial-gradient(80% 70% at -5% 0%, rgba(248,176,16,.08), transparent 50%),       /* --gold whisper */
    var(--canvas);
}
.page-contact .subhero__inner {
  display: grid; grid-template-columns: 1fr; gap: clamp(1.75rem, 4vw, 3rem);
  align-items: center;
}
.page-contact .subhero__copy { max-width: 40rem; }
.page-contact .subhero__eyebrow { margin-bottom: 1rem; }
.page-contact .subhero h1 {
  /* SECONDARY: a step down from the home display size */
  font-size: clamp(2.4rem, 1.4rem + 4.4vw, 4.2rem);
  font-weight: 600; letter-spacing: -0.03em; line-height: 1; margin-bottom: 1.2rem;
}
.page-contact .subhero__lead { font-size: var(--fs-lead); color: var(--ink-soft); margin-bottom: 1.8rem; max-width: 34rem; }
.page-contact .subhero__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.5rem; }
.page-contact .subhero__hours {
  display: flex; align-items: center; gap: .6rem;
  font-size: .9rem; color: var(--ink-soft);
}
.page-contact .subhero__hours .dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex-shrink: 0;
  box-shadow: 0 0 0 4px rgba(24,144,200,.16);
}
.page-contact .subhero__media {
  position: relative; border-radius: var(--r-card); overflow: hidden;
  aspect-ratio: 3 / 2; background: var(--surface-2);
  box-shadow: 0 30px 60px -40px rgba(10,22,34,.5);
}
.page-contact .subhero__media img { width: 100%; height: 100%; object-fit: cover; }
.page-contact .subhero__media figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 2.2rem 1.1rem .85rem;
  background: linear-gradient(transparent, rgba(10,22,34,.82));
  color: #fff; font-size: .85rem; font-weight: 500;
}

/* ---------- Contact channels (light band; filled single-surface cards) ----------
   The reference footer ADDRESS column, expanded. Each card is ONE fill
   (--surface), no outline+fill; the icon sits plain (no chip). The 591
   feature card dominates; the rest are subordinate (anti identical-grid). */
.page-contact .channels { background: var(--canvas); padding-block: var(--band-y); }
.page-contact .channels__head { max-width: 46rem; margin-bottom: clamp(2rem,4vw,3rem); }
.page-contact .channels__head h2 { font-size: var(--fs-h2); margin-bottom: .9rem; }
.page-contact .channels__head p { color: var(--ink-soft); font-size: var(--fs-lead); }

.page-contact .channels__grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.page-contact .channel-card {
  position: relative; background: var(--surface); border-radius: var(--r-card);
  padding: 1.5rem; display: flex; flex-direction: column; gap: .35rem;
  color: var(--ink);
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast);
}
.page-contact .channel-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -24px rgba(10,22,34,.35); }
/* the value/cta is the real link; stretch it over the whole card so the card stays one tap target */
.page-contact .channel-card { isolation: isolate; }
.page-contact .channel-card__link { position: static; }
.page-contact .channel-card__link::after {
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--r-card);
}
.page-contact .channel-card__value.channel-card__link { color: var(--ink); text-decoration: none; }
.page-contact .channel-card__value.channel-card__link:hover { color: var(--accent); }
.page-contact .channel-card__icon { width: 40px; height: 40px; color: var(--accent); margin-bottom: .6rem; }
.page-contact .channel-card__icon svg { width: 100%; height: 100%; }
.page-contact .channel-card__label { font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.page-contact .channel-card__value { font-size: 1.3rem; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.page-contact .channel-card__note { font-size: .9rem; color: var(--ink-soft); margin-top: .15rem; }

/* the ONE dominant card: 591, royal fill, spans full row on wide grids */
.page-contact .channel-card--feature {
  background: var(--canvas-royal); color: #fff; gap: .5rem;
  justify-content: center; min-height: 14rem;
  padding: clamp(1.8rem, 3vw, 2.4rem);
  overflow: hidden;
}
.page-contact .channel-card--feature .channel-card__kicker {
  font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.82);
}
.page-contact .channel-card--feature .channel-card__big {
  font-size: clamp(3.4rem, 2rem + 7vw, 5.5rem); font-weight: 700; letter-spacing: -0.04em; line-height: .95;
}
.page-contact .channel-card--feature .channel-card__sub { font-size: .98rem; color: rgba(255,255,255,.85); max-width: 28rem; }
.page-contact .channel-card--feature .channel-card__cta {
  margin-top: .6rem; display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 600; font-size: .95rem; color: #fff;
}
.page-contact .channel-card--feature .channel-card__cta::after { content: "\2192"; transition: transform var(--t-fast); }
.page-contact .channel-card--feature:hover .channel-card__cta::after { transform: translateX(4px); }

/* ---------- Member directory band: this page leads the working slice here ----------
   Reuses the shared .members band + .member-card grammar verbatim. */
.page-contact .members__head { max-width: 52rem; }

/* ---------- Visit us (light band; address + hours + flat locator panel) ---------- */
.page-contact .visit { background: var(--canvas); padding-block: var(--band-y); }
.page-contact .visit__inner {
  display: grid; grid-template-columns: 1fr; gap: clamp(1.75rem, 4vw, 3rem);
  align-items: stretch;
}
.page-contact .visit__copy .eyebrow { margin-bottom: .9rem; }
.page-contact .visit__copy h2 { font-size: var(--fs-h2); margin-bottom: 1rem; }
.page-contact .visit__lead { color: var(--ink-soft); font-size: var(--fs-lead); max-width: 34rem; margin-bottom: 2rem; }

.page-contact .visit__facts {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem 2rem;
  margin-bottom: 2rem;
}
.page-contact .visit__fact dt { font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: .35rem; }
.page-contact .visit__fact dd { font-size: 1rem; color: var(--ink); line-height: 1.5; }
.page-contact .visit__fact dd a { color: var(--accent); font-weight: 500; }
.page-contact .visit__fact dd a:hover { color: var(--accent-deep); }
.page-contact .visit__cta { display: flex; flex-wrap: wrap; gap: .75rem; }

.page-contact .visit__panel {
  position: relative; border-radius: var(--r-card); overflow: hidden;
  background: var(--canvas-royal); min-height: 18rem; display: flex; flex-direction: column;
  box-shadow: 0 30px 60px -40px rgba(10,22,34,.5);
}
.page-contact .visit__map { position: relative; flex: 1; min-height: 14rem; }
.page-contact .visit__map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.page-contact .visit__panel-foot {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem;
  padding: 1rem 1.2rem; background: var(--canvas-ink); color: #fff;
}
.page-contact .visit__pin-label { font-size: .9rem; font-weight: 500; }
.page-contact .visit__panel-link { font-size: .88rem; font-weight: 600; color: var(--accent-bright); }
.page-contact .visit__panel-link:hover { color: #fff; }

/* ---------- Responsive ---------- */
@media (min-width: 600px) {
  .page-contact .channels__grid { grid-template-columns: repeat(2, 1fr); }
  /* the 591 feature card spans the full first row */
  .page-contact .channel-card--feature { grid-column: 1 / -1; }
}
@media (min-width: 861px) {
  .page-contact .subhero__inner { grid-template-columns: 1.05fr .95fr; }
  .page-contact .channels__grid { grid-template-columns: repeat(3, 1fr); }
  /* feature card occupies the left two columns of the first row, taller */
  .page-contact .channel-card--feature { grid-column: span 2; grid-row: span 2; min-height: 0; }
  .page-contact .visit__inner { grid-template-columns: 1.05fr .95fr; }
}