/* =========================================================
   Dr. Swapna Simon — Catholic School Board Trustee campaign
   Palette and iconography follow the pamphlet and lawn sign:
   navy / gold / white, with green for confirmed voter status.
   ========================================================= */

:root {
  --navy:        #0E2A55;
  --navy-deep:   #081C3A;
  --navy-soft:   #1A3E72;
  --gold:        #F5A623;
  --gold-deep:   #D98B0B;
  --gold-soft:   #FFF3DC;
  --green:       #0F7A44;
  --green-light: #7BD88F;
  --white:       #FFFFFF;
  --tint:        #F4F6FA;
  --ink:         #1B2233;
  --ink-soft:    #4A5568;
  --line:        #DCE3EE;

  --wrap:        1160px;
  --radius:      14px;
  --radius-sm:   9px;
  --shadow:      0 10px 30px rgba(14, 42, 85, .10);
  --shadow-lg:   0 22px 50px rgba(8, 28, 58, .18);

  --font-display: "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body:    "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 84px; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--navy); }

h1, h2, h3 {
  font-family: var(--font-display);
  line-height: 1.1;
  margin: 0;
  letter-spacing: -0.015em;
}

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap.narrow { width: min(100% - 2.5rem, 820px); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--gold); color: var(--navy-deep);
  padding: .7rem 1.2rem; font-weight: 700; z-index: 200;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* ---------------- Shared icon rendering ---------------- */

/* Line icons: drawn with the current text colour. */
.pillar-icon, .card-icon svg, .dates-icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Emblem: gold rays behind a solid cross standing on an open book.
   Rendered through <use>, so the shadow tree can only be recoloured with
   inherited values — currentColor for the body, a custom property for the
   rays. Descendant selectors would not cross that boundary. */
.em-rays { fill: none; stroke: var(--em-ray, #F5A623); stroke-width: 3.4; }
.em-solid { fill: currentColor; }

/* ---------------- Header ---------------- */

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--navy);
  border-bottom: 3px solid var(--gold);
  transition: box-shadow .25s ease;
}
.site-header.is-stuck { box-shadow: 0 6px 22px rgba(8, 28, 58, .35); }

.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 72px;
}

.brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; flex: none; }
.brand-mark { width: 42px; height: 42px; display: block; flex: none; color: var(--white); }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text strong {
  font-family: var(--font-display); font-weight: 800;
  color: var(--white); font-size: 1.02rem; letter-spacing: .01em;
  white-space: nowrap;
}
.brand-phd { color: var(--gold); font-size: .82em; white-space: nowrap; }
.brand-text em {
  font-style: normal; color: var(--gold);
  font-size: .68rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
}

.primary-nav ul {
  display: flex; align-items: center; gap: .25rem;
  list-style: none; margin: 0; padding: 0;
}
.primary-nav a {
  display: block; padding: .55rem .8rem;
  color: rgba(255,255,255,.88); text-decoration: none;
  font-weight: 600; font-size: .93rem; border-radius: 6px;
  transition: color .18s ease, background .18s ease;
}
.primary-nav a:hover { color: var(--white); background: rgba(255,255,255,.09); }
.primary-nav a.is-active { color: var(--gold); }

.nav-cta a {
  margin-left: .5rem;
  background: var(--gold); color: var(--navy-deep) !important;
  font-weight: 800; letter-spacing: .01em;
  padding: .58rem 1.05rem; border-radius: 999px;
}
.nav-cta a:hover { background: #FFB93F; }

.nav-toggle {
  display: none; width: 44px; height: 44px;
  background: transparent; border: 1px solid rgba(255,255,255,.35);
  border-radius: 8px; cursor: pointer; padding: 0;
}
.nav-toggle span {
  display: block; width: 20px; height: 2px; margin: 4px auto;
  background: var(--white); border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------------- Hero ---------------- */

.hero {
  position: relative;
  background:
    radial-gradient(900px 520px at 82% 12%, rgba(245,166,35,.14), transparent 62%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: var(--white);
  padding: clamp(2.75rem, 6vw, 5rem) 0 clamp(3rem, 6vw, 5.5rem);
  overflow: hidden;
}

.hero-grid {
  display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}

.photo-frame {
  position: relative;
  border-radius: 210px 210px 22px 22px;
  padding: 10px;
  background: linear-gradient(150deg, var(--gold), #FFD98A 55%, var(--gold-deep));
  box-shadow: var(--shadow-lg);
}
.photo-frame img {
  border-radius: 200px 200px 14px 14px;
  background: #EAF0F8;
  width: 100%; height: auto;
  object-fit: cover;
}

.eyebrow {
  margin: 0 0 .9rem;
  font-family: var(--font-display); font-weight: 700;
  font-size: .82rem; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,.82);
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
}
.eyebrow-tag {
  background: var(--gold); color: var(--navy-deep);
  padding: .3rem .9rem; border-radius: 6px;
  font-weight: 900; letter-spacing: .16em;
}

/* The name is set the way the pamphlet and lawn sign set it: a small "Dr."
   leading a large SWAPNA, then SIMON larger still on the line beneath, with
   "Ph.D." tucked in small at its baseline. --name-size drives all four, so
   the proportions hold at every width.

   Each row keeps its font-size at 0 so the literal spaces in the markup —
   which screen readers need to read "Dr. Swapna Simon Ph.D." as words — do
   not open a gap scaled to the largest type on the line. The visible gaps
   come from the margins below. */
/* --name-size is the surname, the largest word in the lockup; everything
   else is a fraction of it. SWAPNA sits well below SIMON so the two read
   as clearly different sizes rather than merely uneven, and "Dr." stays
   proportional to the given name it leads. */
.hero-name {
  --name-size: clamp(2.65rem, 6.8vw, 4.55rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: .94;
  margin-bottom: .5rem;
}
.name-row { display: block; font-size: 0; }
.n-dr {
  font-size: calc(var(--name-size) * .52);
  margin-right: .14em;
  letter-spacing: -0.01em;
}
.n-first, .n-last { text-transform: uppercase; }
.n-first { font-size: calc(var(--name-size) * .71); }
.n-last  { font-size: var(--name-size); }
.n-phd {
  font-size: calc(var(--name-size) * .37);
  margin-left: .2em;
  font-weight: 800;
  letter-spacing: 0;
  color: var(--gold);
}

.hero-role {
  margin: 0 0 1.25rem;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1rem, 2vw, 1.15rem); color: rgba(255,255,255,.9);
}

.wards { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.ward-label {
  font-family: var(--font-display); font-weight: 800;
  font-size: .8rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold);
}
.ward-label-wards { color: var(--white); }
.ward-chip {
  display: inline-grid; place-items: center;
  min-width: 52px; padding: .3rem .6rem;
  background: rgba(255,255,255,.08);
  border: 2px solid var(--gold);
  border-radius: 10px;
  font-family: var(--font-display); font-weight: 900; font-size: 1.35rem;
  color: var(--gold);
}

.slogan {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.35rem, 3.2vw, 2rem);
  text-transform: uppercase; letter-spacing: .02em;
  color: var(--white); margin: 0 0 .7rem;
}
.hero-lede {
  margin: 0 0 1.9rem; max-width: 46ch;
  font-size: 1.1rem; color: rgba(255,255,255,.86);
}

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 2rem; }

.election-strip {
  display: flex; align-items: center; gap: .55rem 1rem; flex-wrap: wrap;
  padding: .85rem 1.15rem;
  background: rgba(255,255,255,.07);
  border-left: 4px solid var(--gold);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.election-label {
  font-family: var(--font-display); font-weight: 800; font-size: .74rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--gold);
}
.election-date { font-weight: 700; color: var(--white); }
.election-count { font-size: .92rem; color: rgba(255,255,255,.72); }

/* ---------------- Buttons ---------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .82rem 1.5rem;
  font-family: var(--font-display); font-weight: 800;
  font-size: .93rem; letter-spacing: .04em; text-transform: uppercase;
  text-decoration: none; border-radius: 999px; border: 2px solid transparent;
  cursor: pointer; text-align: center;
  transition: transform .16s ease, background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.btn:hover { transform: translateY(-2px); }

.btn-gold {
  background: var(--gold); color: var(--navy-deep);
  box-shadow: 0 8px 20px rgba(245,166,35,.28);
}
.btn-gold:hover { background: #FFB93F; }

.btn-outline-light { border-color: rgba(255,255,255,.55); color: var(--white); }
.btn-outline-light:hover { background: var(--white); color: var(--navy); border-color: var(--white); }

.btn-lg { padding: 1.05rem 2rem; font-size: 1rem; }
.btn .ext { font-size: 1.05em; }

.btn-social {
  width: 100%; justify-content: flex-start;
  background: var(--navy); color: var(--white);
  text-transform: none; letter-spacing: .01em; font-size: 1rem;
  border-radius: var(--radius-sm); padding: .9rem 1.25rem;
}
.btn-social svg { width: 22px; height: 22px; flex: none; }
.btn-social:hover { background: var(--navy-soft); }
.btn-fb:hover { background: #1877F2; }
.btn-li:hover { background: #0A66C2; }
.btn-mail:hover { background: var(--gold); color: var(--navy-deep); }

/* ---------------- Brand band ---------------- */

.brand-band { background: var(--gold); }
.brand-band .wrap {
  display: flex; align-items: center; justify-content: center;
  gap: 1rem; padding: 1.05rem 0;
}
.band-emblem {
  width: 46px; height: 46px; flex: none;
  color: var(--navy-deep); --em-ray: #081C3A;
}
.brand-band p {
  margin: 0;
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(.85rem, 2.2vw, 1.25rem);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--navy-deep); text-align: center; line-height: 1.35;
}

/* ---------------- Sections ---------------- */

.section { padding: clamp(3.25rem, 7vw, 5.5rem) 0; }
.section-tint { background: var(--tint); }
.section-navy {
  background:
    radial-gradient(800px 480px at 12% 0%, rgba(245,166,35,.11), transparent 60%),
    var(--navy);
  color: var(--white);
}

.kicker {
  margin: 0 0 .6rem;
  font-family: var(--font-display); font-weight: 800;
  font-size: .78rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold-deep);
}
.kicker-light { color: var(--gold); }

h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); font-weight: 800; color: var(--navy); }
.h2-light { color: var(--white); }

.rule { width: 68px; height: 5px; background: var(--gold); border-radius: 3px; margin: 1.1rem 0 1.75rem; }
.rule-light { background: var(--gold); }

.section-head { max-width: 780px; margin-bottom: 2.75rem; }
.section-sub { color: var(--ink-soft); font-size: 1.08rem; margin: 0; max-width: 62ch; }
.section-navy .section-sub { color: rgba(255,255,255,.82); }

.prose p { margin: 0 0 1.15rem; color: var(--ink-soft); }
.prose p:last-child { margin-bottom: 0; }
.prose .lead {
  font-size: 1.22rem; font-weight: 600; color: var(--navy);
  line-height: 1.5;
}
.prose-light p { color: rgba(255,255,255,.86); }
.prose-light .lead { color: var(--white); }

/* ---------------- Four pillars ---------------- */

.pillars {
  list-style: none; margin: 3rem 0 0; padding: 2.5rem 0 0;
  border-top: 1px solid rgba(255,255,255,.2);
  display: grid; gap: 2rem 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  text-align: center;
}
.pillar-icon { width: 46px; height: 46px; color: var(--gold); margin: 0 auto .9rem; display: block; }
.pillars h3 {
  font-size: clamp(1rem, 2.2vw, 1.2rem); font-weight: 900;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold); margin-bottom: .5rem;
}
.pillars p { margin: 0; color: rgba(255,255,255,.82); font-size: .98rem; line-height: 1.5; }

/* ---------------- Priorities ---------------- */

.priorities-head {
  display: flex; align-items: center; gap: 1.25rem 1.75rem;
  flex-wrap: wrap; max-width: none;
}
.priorities-tag {
  display: inline-block;
  background: var(--navy); color: var(--white);
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(1.15rem, 2.6vw, 1.6rem);
  letter-spacing: .04em; text-transform: uppercase;
  padding: .6rem 1.4rem; border-radius: var(--radius-sm);
}
.priorities-tagline {
  margin: 0; flex: 1 1 320px;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1rem, 2.2vw, 1.35rem);
  text-transform: uppercase; letter-spacing: .01em;
  color: var(--navy); line-height: 1.3;
}

.cards {
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 5px solid var(--gold);
  border-radius: var(--radius);
  padding: 1.9rem 1.6rem;
  box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.card-icon {
  display: grid; place-items: center;
  width: 56px; height: 56px; margin-bottom: 1.1rem;
  border-radius: 6px;
  background: var(--gold); color: var(--navy);
}
.card-icon svg { width: 30px; height: 30px; stroke-width: 1.9; }
.card h3 {
  font-size: 1.16rem; font-weight: 800; color: var(--navy);
  margin-bottom: .6rem; line-height: 1.25;
}
.card p { margin: 0; color: var(--ink-soft); font-size: 1rem; }

/* ---------------- Voter information ---------------- */

.vote-grid {
  display: grid; gap: clamp(1.75rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: start;
}
.vote-main > p { color: rgba(255,255,255,.86); margin: 0 0 1.35rem; }

.support-card {
  background: var(--white);
  border-radius: var(--radius);
  border-left: 6px solid var(--gold);
  padding: 1.5rem 1.5rem 1.35rem;
  margin: 0 0 1.5rem;
  box-shadow: var(--shadow-lg);
}
.support-title {
  margin: 0 0 1rem;
  font-family: var(--font-display); font-weight: 800;
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-deep);
}
.support-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.support-rows li {
  display: flex; align-items: stretch; flex-wrap: wrap;
  border-radius: var(--radius-sm); overflow: hidden;
}
.sr-key {
  flex: 0 1 auto;
  display: flex; align-items: center;
  background: var(--navy); color: var(--white);
  font-family: var(--font-display); font-weight: 700; font-size: .95rem;
  padding: .65rem 1.05rem;
}
.sr-val {
  flex: 1 1 auto;
  display: flex; align-items: center; gap: .5rem;
  background: var(--green); color: var(--white);
  font-family: var(--font-display); font-weight: 900;
  font-size: .95rem; letter-spacing: .06em; text-transform: uppercase;
  padding: .65rem 1.05rem;
}
.sr-tick {
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 3;
  stroke-linecap: round; stroke-linejoin: round;
}
.support-note {
  margin: 1.1rem 0 0; font-size: .95rem; color: var(--ink-soft);
}
.support-note strong { color: var(--navy); }

.cta-wrap { margin: 0 0 .9rem; }
.portal-line {
  margin: 0 !important; font-size: .9rem;
  color: rgba(255,255,255,.65) !important;
}
.portal-line span { color: var(--gold); overflow-wrap: anywhere; }

.vote-dates { display: grid; gap: 1rem; }
.dates-head {
  display: flex; align-items: center; gap: .6rem; margin: 0 0 .3rem;
  font-family: var(--font-display); font-weight: 900;
  font-size: .82rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold);
}
.dates-icon { width: 22px; height: 22px; flex: none; }

.date-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18);
  border-left: 5px solid var(--gold);
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem;
}
.date-card-gold {
  background: var(--gold); border-color: var(--gold); border-left-color: var(--navy-deep);
}
.date-kicker {
  margin: 0 0 .75rem;
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  font-family: var(--font-display); font-weight: 800; font-size: .78rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--gold);
}
.date-card-gold .date-kicker { color: var(--navy-deep); }
.date-time-chip {
  background: var(--navy-deep); color: var(--gold);
  font-size: .72rem; letter-spacing: .08em;
  padding: .22rem .6rem; border-radius: 5px;
}
.date-card-gold .date-time-chip { color: var(--gold); }
.date-main {
  margin: 0; font-family: var(--font-display); font-weight: 800;
  font-size: 1.3rem; color: var(--white); line-height: 1.3;
}
.date-card-gold .date-main { color: var(--navy-deep); }

/* ---------------- Connect ---------------- */

.connect-grid {
  display: grid; gap: 1.75rem;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: start;
}
.connect-card {
  background: var(--tint);
  border: 1px solid var(--line);
  border-left: 6px solid var(--gold);
  border-radius: var(--radius);
  padding: 2rem 1.9rem;
}
.connect-name {
  margin: 0 0 .3rem; font-family: var(--font-display);
  font-weight: 900; font-size: 1.35rem; color: var(--navy);
}
.connect-role { margin: 0 0 1.5rem; color: var(--ink-soft); font-weight: 600; }

.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .95rem; }
.contact-list li { display: flex; align-items: center; gap: .85rem; }
.contact-list a {
  color: var(--navy); font-weight: 600; text-decoration: none;
  border-bottom: 2px solid rgba(245,166,35,.5);
  overflow-wrap: anywhere;
}
.contact-list a:hover { border-bottom-color: var(--gold); color: var(--gold-deep); }
.ci {
  display: grid; place-items: center; flex: none;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--navy); color: var(--gold);
}
.ci svg { width: 19px; height: 19px; }

.connect-social { display: grid; gap: .8rem; align-content: start; }
.social-title {
  margin: 0 0 .2rem; font-family: var(--font-display);
  font-weight: 800; font-size: .78rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold-deep);
}

/* ---------------- Footer ---------------- */

.site-footer {
  background: var(--navy-deep); color: var(--white);
  border-top: 5px solid var(--gold);
  padding: 2.5rem 0 2.25rem; text-align: center;
}
.footer-emblem { width: 52px; height: 52px; margin: 0 auto 1.1rem; display: block; color: var(--white); }
.footer-tagline {
  margin: 0 0 1.1rem;
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(.78rem, 2vw, 1.05rem);
  letter-spacing: .12em; text-transform: uppercase; color: var(--gold);
  line-height: 1.7;
}
.footer-tagline span { color: rgba(255,255,255,.35); margin: 0 .35rem; }
.footer-meta { margin: 0 0 .6rem; color: rgba(255,255,255,.8); font-size: .98rem; }
.footer-fine { margin: 0; color: rgba(255,255,255,.5); font-size: .85rem; }

/* ---------------- Responsive ---------------- */

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .hero-photo { max-width: 330px; }
  .hero-copy { display: flex; flex-direction: column; align-items: center; }
  .eyebrow, .wards, .btn-row, .election-strip { justify-content: center; }
  .hero-lede { text-align: center; }
  .election-strip { border-left: none; border-top: 4px solid var(--gold); border-radius: 0 0 var(--radius-sm) var(--radius-sm); text-align: center; }
  .vote-grid, .connect-grid { grid-template-columns: 1fr; }
  .priorities-head { flex-direction: column; align-items: flex-start; }
}

/* The brand and the full nav need about 1070px of container side by side,
   which the .wrap only reaches around a 1110px viewport, so the menu
   collapses well above phone widths rather than at the usual tablet
   breakpoint. Lengthening the brand text means raising this to match, or
   the nav wraps onto a second line. */
@media (max-width: 1120px) {
  .nav-toggle { display: block; }

  /* Once the nav is behind the menu button the brand is the only thing
     competing for the row, so let it shrink and let the subtitle wrap onto
     a second line rather than push the header wider than the screen. The
     name itself still holds one line. */
  .brand { flex: 1 1 auto; min-width: 0; }
  .brand-text { min-width: 0; }
  .primary-nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--navy-deep);
    border-bottom: 3px solid var(--gold);
    max-height: 0; overflow: hidden;
    transition: max-height .3s ease;
  }
  .primary-nav.is-open { max-height: 26rem; }
  .primary-nav ul { flex-direction: column; align-items: stretch; padding: .6rem 1.25rem 1.25rem; gap: .1rem; }
  .primary-nav a { padding: .85rem .5rem; font-size: 1rem; border-bottom: 1px solid rgba(255,255,255,.09); border-radius: 0; }
  .nav-cta a { margin: .8rem 0 0; text-align: center; border-bottom: none; }
  .header-inner { position: relative; }
}

@media (max-width: 560px) {
  body { font-size: 1rem; }
  .photo-frame { border-radius: 160px 160px 18px 18px; }
  .photo-frame img { border-radius: 152px 152px 12px 12px; }
  .btn { width: 100%; }
  .btn-row { width: 100%; }
  .card, .connect-card { padding: 1.6rem 1.35rem; }
  .brand-band .wrap { flex-direction: column; gap: .6rem; }
  .pillars { gap: 2.25rem 1rem; }
  .sr-key, .sr-val { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .btn:hover, .card:hover { transform: none; }
}

/* ---------------- Print ---------------- */

@media print {
  .site-header, .nav-toggle, .btn-row { display: none !important; }
  body { color: #000; }
  .hero, .section-navy, .site-footer { background: #fff !important; color: #000 !important; }
  .hero h1, .h2-light, .prose-light p, .date-main, .pillars p { color: #000 !important; }
}