/* ==========================================================================
   Sanctuary v2, page-scoped styles: contact.html. Loads AFTER styles.css and
   only extends it. Every value traces to design/brands/sanctuary.md (the kit)
   or to a locked value already in styles.css. Inner pages are CALM: static
   world-light, no world flips, no pinned stacks (kit: signature is home only).
   House rule: no em or en dashes anywhere in this file.
   ========================================================================== */

/* ---- Page hero (system vocabulary from the home hero) ---- */
.page-hero {
  padding: 96px 48px 64px;   /* kit: section pads {76, 96, 128}; page gutter 48 */
  text-align: center;
}
.page-eyebrow {
  font-size: 24px;           /* locked system: hero eyebrow 24px (styles.css .hero-eyebrow) */
  font-weight: 400;
  opacity: .82;              /* locked system: eyebrow sits quieter than the h1 */
}
.page-h1 {
  font-size: 80px;           /* kit: hero h1 80px (ref typeScale) */
  line-height: 1.1;          /* kit: ref h1 88px at 80 = 1.1 */
  letter-spacing: -2px;      /* kit: ref h1 letter-spacing -2px */
  font-weight: 400;          /* kit: hierarchy by SIZE at weight 400 */
  margin: 20px auto 0;
}
.you {
  color: var(--accent);      /* kit: accent = the "you." lockup, a sanctioned small saturated moment */
}
.page-lead {
  max-width: 760px;          /* derived: calm lead measure inside the ref 1344 content box */
  margin: 32px auto 0;
  font-size: 20px;           /* derived: one step over body 16 (locked sheet-row 20 is the same step) */
  line-height: 1.6;
}

/* ---- Primary contact card ---- */
.contact-primary {
  padding: 0 48px 76px;      /* kit: page gutter 48; section pad 76 */
}
.primary-card {
  border-radius: 32px;       /* kit: cards flat filled, radius 32, border NONE, shadow NONE */
  padding: 48px;             /* locked system: footer card pad 48 */
  max-width: 1344px;         /* kit: ref widest content box 1344 */
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;                 /* locked system: card gap 32 */
}
.cell-label {
  font-size: 16px;           /* kit: body 16 */
  color: var(--muted-ink);   /* locked system: muted labels (styles.css .col-head) */
  margin-bottom: 8px;        /* derived: half the base step 16 */
}
.cell-value {
  font-size: 26px;           /* locked system: card caption scale 26 (styles.css .card-cap) */
  line-height: 1.3;          /* locked system: caption leading */
  overflow-wrap: anywhere;   /* engineering: no horizontal overflow at 375 */
}
a.cell-value { transition: opacity .15s ease; } /* locked system: link hover treatment (styles.css .col a) */
a.cell-value:hover { opacity: .7; }

/* ---- Offices grid ---- */
.offices {
  padding: 76px 48px 0;      /* kit: section pad 76 */
}
.offices .display { margin-bottom: 48px; } /* kit: head-to-grid step 48 */
.office-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;                 /* locked system: card gap 32 */
  max-width: 1344px;         /* kit: ref widest content box 1344 */
  margin: 0 auto;
}
.office-card {
  border-radius: 32px;       /* kit: card radius 32, no border, no shadow */
  padding: 32px;             /* locked system: card pad 32 (styles.css .card-cap) */
  display: flex;
  flex-direction: column;
}
.office-card h3 {
  font-size: 24px;           /* locked system: eyebrow scale 24 as card head; weight stays 400 */
  font-weight: 400;
  letter-spacing: -0.5px;    /* derived: light display tracking at the 24 step */
}
.office-addr {
  font-size: 16px;           /* kit: body 16 */
  line-height: 1.6;          /* derived: address leading, one step over body 1.5 */
  margin-top: 12px;          /* locked system: nav-right gap 12 as the tight step */
}
.office-links {
  display: flex;
  flex-direction: column;
  gap: 6px;                  /* locked system: nav-item gap 6 as the tightest link step */
  margin-top: 24px;          /* kit: radius scale member 24 as the block step */
  padding-top: 20px;
}
.office-links a {
  font-size: 16px;           /* kit: body 16 */
  text-decoration: underline;         /* derived: contact links must read as live; ink stays the link color (kit: exact accent never carries body text) */
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  overflow-wrap: anywhere;   /* engineering: no horizontal overflow at 375 */
  transition: opacity .15s ease;      /* locked system: link hover treatment */
}
.office-links a:hover { opacity: .7; }

/* ---- Portal + write-to-us cards: honest entries only ---- */
.contact-actions {
  padding: 96px 48px 32px;   /* kit: section pad 96 */
}
.action-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;                 /* locked system: card gap 32 */
  max-width: 1344px;         /* kit: ref widest content box 1344 */
  margin: 0 auto;
}
.action-card {
  border-radius: 32px;       /* kit: card radius 32, no border, no shadow */
  padding: 48px;             /* locked system: footer card pad 48 */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 300px;         /* derived: holds the two cards level, about half a ref card height 571 */
}
.action-card h2 {
  font-size: 32px;           /* locked system: mobile display step 32 reused as card display type */
  font-weight: 400;          /* kit: hierarchy by SIZE at weight 400 */
  letter-spacing: -0.8px;    /* locked system: mobile display tracking */
}
.action-card p {
  font-size: 16px;           /* kit: body 16 */
  line-height: 1.5;          /* locked system: body leading */
  max-width: 420px;          /* derived: calm measure inside the card */
  margin-top: 16px;          /* kit: spacing base 16 */
}
.action-card .pill { margin-top: auto; }
.pill-red {
  background: var(--accent-cta); /* kit: primary pill = accent-cta with white text, 5.86:1 AA */
  color: #FFFFFF;
}
.pill-red:hover {
  background: #AE1217;       /* kit: accent-cta hover state */
  opacity: 1;
}
.pill-soft {
  background: var(--line);   /* kit: secondary pill = line fill #FADEDE with ink text */
  color: var(--ink);
}

/* ---- Mobile (locked breakpoint 820; kit: mobile gutter 20, h1 28) ---- */
@media (max-width: 1100px) {
  .office-grid { grid-template-columns: repeat(2, 1fr); } /* derived: two-up before the single column */
  .primary-card { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .page-hero { padding: 56px 20px 40px; } /* kit: mobile gutter 20 */
  .page-eyebrow { font-size: 16px; }      /* locked system: mobile eyebrow 16 */
  .page-h1 {
    font-size: 28px;         /* kit: mobile h1 28px */
    letter-spacing: -0.7px;  /* locked system: mobile h1 tracking fingerprint, rounded */
  }
  .page-lead { font-size: 16px; margin-top: 20px; }
  .contact-primary { padding: 0 20px 48px; }
  .primary-card { padding: 32px 24px; gap: 24px; }
  .cell-value { font-size: 20px; }        /* locked system: sheet-row scale 20 */
  .offices { padding: 48px 20px 0; }
  .offices .display { margin-bottom: 32px; }
  .office-grid { grid-template-columns: 1fr; gap: 16px; } /* kit: spacing base 16 on mobile */
  .contact-actions { padding: 64px 20px 16px; }
  .action-grid { grid-template-columns: 1fr; gap: 16px; }
  .action-card { padding: 32px 24px; min-height: 0; }
  .action-card .pill { margin-top: 32px; }
  .action-card h2 { font-size: 24px; letter-spacing: -0.5px; } /* locked system: eyebrow scale 24 */
}

/* ==========================================================================
   Inner-page revamp (2026-07-11, Thomas verdict: inner pages alive, facts real).
   Catalog components re-tokened to the kit; every effect is JS-gated
   progressive enhancement, so no JS and reduced motion keep the calm page.
   ========================================================================== */

/* ---- catalog 016 AnimatedNumber: numeral slot in the offices heading ---- */
.count {
  display: inline-block;
  text-align: center;
  font-variant-numeric: tabular-nums; /* engineering: the digit holds width while the spring rolls */
}

/* ---- Staggered scroll reveals (JS adds .pre-reveal only below the fold; no-JS never hides) ---- */
@media (prefers-reduced-motion: no-preference) {
  .pre-reveal {
    opacity: 0;
    transform: translateY(26px);
  }
  .pre-reveal.is-in {
    opacity: 1;
    transform: none;
    transition: opacity .65s var(--ease-house), transform .65s var(--ease-house); /* kit: primary house curve */
  }
}

/* ---- catalog 011 Tilt Card: subtle tilt + cream sheen on the office cards (JS drives the vars) ---- */
.office-card {
  position: relative;
  overflow: hidden;          /* the sheen respects the 32px card radius */
}
.office-card::after {
  /* catalog glare re-toned: cream sheen, never a shadow (kit: cards carry no shadow) */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 32px;
  background: radial-gradient(circle at var(--glx, 50%) var(--gly, 50%), rgba(255, 253, 248, .34) 0%, rgba(255, 253, 248, 0) 70%);
  opacity: 0;
  transition: opacity .2s ease-out; /* catalog: easeOut .2s */
  pointer-events: none;
}
.office-card.tilting::after { opacity: 1; }
.office-card .office-links { position: relative; z-index: 1; } /* links stay clickable over the sheen layer edge cases */

/* ---- catalog 020 Interactive Gradient, CSS variant, on the portal card ----
   Three kit-pastel blobs on the coral fill: two drift on keyframes, one follows
   the pointer via --gx/--gy (contact.js). Every blob is a LIGHTER tint of the
   coral card (blush, sand, cream), so ink text contrast only ever improves. */
@property --gx { syntax: "<percentage>"; inherits: false; initial-value: 30%; }
@property --gy { syntax: "<percentage>"; inherits: false; initial-value: 25%; }
.grad-card { position: relative; overflow: hidden; }
.grad-card > * { position: relative; z-index: 1; }
.grad-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.grad-bg i {
  position: absolute;
  inset: -20%;               /* blobs overscan the card so drift never shows an edge */
  display: block;
}
.grad-follow {
  background: radial-gradient(circle at var(--gx) var(--gy), var(--card-blush) 0%, rgba(249, 215, 213, 0) 55%);
  transition: --gx .6s ease-out, --gy .6s ease-out; /* catalog spring settle, CSS-typed variant */
}
.grad-a {
  background: radial-gradient(circle at 82% 18%, var(--card-sand) 0%, rgba(239, 217, 196, 0) 48%);
  animation: grad-drift-a 18s ease-in-out infinite alternate;
}
.grad-b {
  background: radial-gradient(circle at 12% 88%, rgba(255, 253, 248, .85) 0%, rgba(255, 253, 248, 0) 42%);
  animation: grad-drift-b 26s ease-in-out infinite alternate;
}
@keyframes grad-drift-a {
  from { transform: translate(0, 0); }
  to   { transform: translate(-7%, 9%); }
}
@keyframes grad-drift-b {
  from { transform: translate(0, 0); }
  to   { transform: translate(8%, -7%); }
}

/* ---- catalog 013 Icon Slide In: pill CTAs, arrow slides in + fill bubble blooms (pure CSS) ---- */
.pill-slide {
  position: relative;
  overflow: hidden;
}
.pill-slide .pill-label {
  position: relative;
  z-index: 2;
  transition: transform .5s cubic-bezier(.34, 1.08, .64, 1); /* catalog spring {bounce .1, .5s} */
}
.pill-slide .pill-arrow {
  position: absolute;
  z-index: 2;
  top: 50%;
  margin-top: -7px;
  right: -20px;              /* catalog: icon parks offscreen right */
  opacity: 0;
  transition: right .5s cubic-bezier(.34, 1.08, .64, 1), opacity .35s ease;
}
.pill-slide::before {
  /* catalog fill bubble: a circle blooms from bottom center to flood the pill */
  content: "";
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: -8px;
  width: 8px;
  height: 8px;
  border-radius: 96px;
  transform: translateX(-50%);
  background: var(--pill-bubble, rgba(89, 48, 50, .12));
  transition: width .5s cubic-bezier(.34, 1.08, .64, 1), height .5s cubic-bezier(.34, 1.08, .64, 1), bottom .5s cubic-bezier(.34, 1.08, .64, 1);
}
.pill-slide:hover::before,
.pill-slide:focus-visible::before {
  width: 130%;
  height: 240px;
  bottom: -70px;
}
.pill-slide:hover .pill-arrow,
.pill-slide:focus-visible .pill-arrow { right: 16px; opacity: 1; }
.pill-slide:hover .pill-label,
.pill-slide:focus-visible .pill-label { transform: translateX(-11px); }
.pill-red.pill-slide { --pill-bubble: #AE1217; }        /* kit: accent-cta hover state as the bloom */
.pill-red.pill-slide:hover { background: var(--accent-cta); } /* the bubble carries the hover, not the flat swap */
.pill-soft.pill-slide { --pill-bubble: var(--card-coral); }   /* kit pastel; ink on coral holds 4.6:1 */

/* ---- Reduced motion: kill every revamp effect (tilt and reveals are JS-gated off;
        the gradient freezes to its resting frame; pill states snap instantly) ---- */
@media (prefers-reduced-motion: reduce) {
  .grad-a, .grad-b { animation: none; }
  .grad-follow,
  .pill-slide .pill-label,
  .pill-slide .pill-arrow,
  .pill-slide::before,
  .office-card::after,
  .count { transition: none; }
}