/* ============================================================
   Sanctuary Insurance, contact.html page-scoped layer
   Inherits styles.css (tokens, shell, sections, quote tool).
   Everything here is scoped under .page-contact so it never
   leaks to other pages. No em/en dashes. Mobile-first (375 base).
   ============================================================ */

/* ---------- Hero VARIANT (secondary, split band; NOT the home full-scene parallax) ---------- */
.page-contact .contact-hero {
  position: relative;
  background: var(--canvas);
  color: var(--ink-inverse);
  overflow: clip;
  isolation: isolate;
  padding-block: clamp(2.2rem, 1.6rem + 4vw, 4rem);
}
/* quiet warm glow + canopy hint kept from the home grammar, but calm and small */
.page-contact .contact-hero .ch-glow {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(70% 60% at 82% 6%, rgba(237,206,104,.30) 0%, rgba(237,206,104,0) 55%),
    radial-gradient(80% 70% at 12% 0%, rgba(244,169,192,.16) 0%, rgba(244,169,192,0) 50%);
}
.page-contact .contact-hero .wrap { position: relative; z-index: 2; }
.page-contact .ch-grid {
  display: grid; grid-template-columns: 1fr; gap: clamp(1.4rem, 1rem + 3vw, 2.6rem);
  align-items: center;
}
.page-contact .ch-copy .eyebrow { color: var(--warm); font-weight: 600; font-size: var(--fs-small); margin-bottom: .55rem; }
.page-contact .ch-copy h1 { max-width: 16ch; }
.page-contact .ch-copy .lede { color: var(--ink-inverse-soft); font-size: clamp(1rem,.95rem + .3vw,1.12rem); max-width: 42ch; margin-top: .9rem; }
/* fast-contact chips (real numbers/email/hours) */
.page-contact .ch-chips { display: grid; gap: .55rem; margin-top: 1.3rem; }
.page-contact .ch-chip {
  display: flex; align-items: center; gap: .7rem;
  background: rgba(255,255,255,.07); border: 1px solid var(--line-dark);
  border-radius: var(--radius); padding: .7rem .9rem; color: var(--ink-inverse);
  transition: background-color .16s var(--ease-out), border-color .16s var(--ease-out);
}
.page-contact a.ch-chip:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.22); }
.page-contact .ch-chip .ic { flex: 0 0 auto; width: 20px; height: 20px; color: var(--warm); }
.page-contact .ch-chip .ct { display: flex; flex-direction: column; line-height: 1.25; }
.page-contact .ch-chip .ct .lbl { font-size: var(--fs-xs); color: var(--ink-inverse-soft); }
.page-contact .ch-chip .ct .val { font-size: var(--fs-small); font-weight: 600; }

/* feathered media (same mask grammar as the home hero subject, calmer) */
.page-contact .ch-media {
  position: relative; width: 100%; max-width: 540px; margin-inline: auto;
  aspect-ratio: 3 / 2;
  -webkit-mask-image: radial-gradient(120% 110% at 60% 42%, #000 60%, transparent 88%);
          mask-image: radial-gradient(120% 110% at 60% 42%, #000 60%, transparent 88%);
}
.page-contact .ch-media img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-lg); }
/* a small canopy arc echoing the brand motif, sits behind the media */
.page-contact .ch-media .ch-arc {
  position: absolute; left: 50%; top: -8%; transform: translateX(-50%);
  width: 116%; height: auto; z-index: -1; opacity: .7; pointer-events: none;
}

/* ---------- OFFICES grid (the real 6 offices) ---------- */
.page-contact .offices-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.page-contact .office-card {
  background: var(--surface); color: var(--ink);
  border-radius: var(--radius); box-shadow: var(--shadow-card);
  padding: 1.3rem 1.2rem; display: flex; flex-direction: column; gap: .7rem;
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
.page-contact .office-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-float); }
/* head office reads filled-surface like the rest; its head-office status is carried by the
   warm pin + the "Head office" tag, not a side-stripe (slop-ban: colored card border) */
.page-contact .office-card.is-head { box-shadow: var(--shadow-float); }
.page-contact .office-head { display: flex; align-items: center; gap: .6rem; }
.page-contact .office-head .pin {
  flex: 0 0 auto; width: 2.2rem; height: 2.2rem; border-radius: 10px;
  background: #FDECEC; color: var(--accent);
  display: grid; place-items: center;
}
.page-contact .office-card.is-head .office-head .pin { background: var(--warm-soft); color: var(--warm-deep); }
.page-contact .office-head .pin svg { width: 18px; height: 18px; }
.page-contact .office-head h3 { font-size: var(--fs-h3); }
.page-contact .office-head .tag {
  display: inline-block; font-size: var(--fs-xs); font-weight: 700; color: var(--ink-soft);
  margin-top: 1px;
}
.page-contact .office-addr { font-size: var(--fs-small); color: var(--ink-soft); line-height: 1.55; }
.page-contact .office-lines { display: grid; gap: .35rem; margin-top: auto; }
.page-contact .office-lines a, .page-contact .office-lines span {
  display: flex; align-items: center; gap: .5rem; font-size: var(--fs-small); color: var(--ink);
}
.page-contact .office-lines a { font-weight: 600; transition: color .16s var(--ease-out); }
.page-contact .office-lines a:hover { color: var(--accent); }
.page-contact .office-lines .li-ic { flex: 0 0 auto; width: 16px; height: 16px; color: var(--accent); }
.page-contact .office-lines .muted { color: var(--ink-soft); font-weight: 500; }
.page-contact .office-cta {
  margin-top: .4rem; display: inline-flex; align-items: center; gap: .4rem;
  font-size: var(--fs-small); font-weight: 700; color: var(--accent);
}
.page-contact .office-cta svg { width: 16px; height: 16px; }

/* ---------- VISIT / message band (split: form + visit photo) ---------- */
.page-contact .visit-band { background: var(--surface-2); color: var(--ink); }
.page-contact .visit-grid {
  display: grid; grid-template-columns: 1fr; gap: clamp(1.4rem, 1rem + 3vw, 2.4rem);
  align-items: stretch;
}
.page-contact .visit-media { position: relative; border-radius: var(--radius-lg); overflow: clip; min-height: 240px; }
.page-contact .visit-media img { width: 100%; height: 100%; object-fit: cover; }
.page-contact .visit-media .vm-badge {
  position: absolute; left: 1rem; bottom: 1rem; right: 1rem;
  background: rgba(32,38,43,.86); color: var(--ink-inverse);
  border-radius: var(--radius); padding: .85rem 1rem; backdrop-filter: blur(2px);
}
.page-contact .visit-media .vm-badge b { color: var(--warm); }
.page-contact .visit-media .vm-badge p { font-size: var(--fs-small); color: var(--ink-inverse-soft); margin-top: .15rem; }

/* message form (mailto, no fabricated backend) */
.page-contact .msg-card {
  background: var(--surface); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); padding: clamp(1.2rem, 1rem + 1.5vw, 1.8rem);
}
.page-contact .msg-card h2 { font-size: var(--fs-h3); }
.page-contact .msg-card .msg-sub { font-size: var(--fs-small); color: var(--ink-soft); margin-top: .4rem; margin-bottom: 1.2rem; }
.page-contact .msg-form { display: grid; gap: .9rem; }
.page-contact .msg-row { display: grid; grid-template-columns: 1fr; gap: .9rem; }
.page-contact .field { display: flex; flex-direction: column; gap: .35rem; }
.page-contact .field label { font-size: var(--fs-xs); font-weight: 700; color: var(--ink); }
.page-contact .field input, .page-contact .field select, .page-contact .field textarea {
  border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
  padding: .7rem .8rem; font-size: var(--fs-small); font-family: inherit; color: var(--ink);
  background: var(--surface); width: 100%;
}
.page-contact .field textarea { resize: vertical; min-height: 110px; }
.page-contact .field input:focus-visible,
.page-contact .field select:focus-visible,
.page-contact .field textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.page-contact .msg-form .btn { width: 100%; margin-top: .2rem; }
.page-contact .msg-note { font-size: var(--fs-xs); color: var(--ink-soft); margin-top: .6rem; line-height: 1.5; }

/* ---------- HOURS strip ---------- */
.page-contact .hours-strip {
  background: var(--canvas-2); color: var(--ink-inverse);
  border-radius: var(--radius); padding: 1rem 1.2rem; margin-top: 1.4rem;
  display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; align-items: center;
}
.page-contact .hours-strip .hs-item { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--fs-small); color: var(--ink-inverse-soft); }
.page-contact .hours-strip .hs-item b { color: var(--ink-inverse); font-weight: 700; }
.page-contact .hours-strip .hs-item svg { width: 18px; height: 18px; color: var(--warm); }

/* ---------- A11y: the quote-tool disclaimer sits on the dark result card.
   Shared styles paints it --ink-soft (2.1:1 on --canvas). Page-scoped lift to the
   on-dark muted ink so it clears WCAG AA without touching the shared stylesheet. ---------- */
.page-contact .quote-result .quote-note { color: var(--ink-inverse-soft); }

/* ---------- RESPONSIVE ---------- */
@media (min-width: 640px) {
  .page-contact .offices-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 760px) {
  .page-contact .ch-grid { grid-template-columns: 1.05fr .95fr; }
  .page-contact .visit-grid { grid-template-columns: 1fr 1fr; }
  .page-contact .msg-row.two { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .page-contact .offices-grid { grid-template-columns: repeat(3, 1fr); }
}

/* reduced motion: cards rest (inherited reveal already handled by styles.css) */
@media (prefers-reduced-motion: reduce) {
  .page-contact .office-card:hover { transform: none; }
}