/* Allyn Financial Partners — site stylesheet (self-contained, no dependencies). */

:root {
  /* Brand palette (sampled from the 09.14.26 mock) */
  --slate: #415267;        /* primary text / headings, footer, dark CTA */
  --slate-deep: #34435A;   /* emphasis text */
  --gold: #F6DF97;         /* accent, primary button */
  --gold-deep: #EDCB6B;    /* button hover */
  --sky: #DAEAF5;          /* light sky-blue band */
  --sky-soft: #EAF2F8;     /* softer blue band */
  --cream: #EEE3CF;        /* warm sand band */
  --cream-soft: #F6F1E7;   /* lighter warm band */
  --sage: #8CA283;         /* handwriting / label green */
  --canvas: #F6F9FA;       /* pale page ground */
  --surface: #FFFFFF;
  --hairline: #E1E8EE;
  --ink: #46566A;
  --ink-muted: #6B7A8A;

  --font-display: "ivypresto-display", Georgia, serif;
  --font-body: "avenir-lt-pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Tracking measured from the mock: Ivy Presto is set open, italics more so;
     Avenir runs at its default spacing. */
  --track-display: 0.055em;
  --track-italic: 0.075em;

  --max-width: 78rem;
  --radius: 10px;
  --radius-lg: 16px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* Lock page scroll while a pop-up is open. */
html:has(dialog[open]) { overflow: hidden; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--canvas);
  font-weight: 300;
  line-height: 1.65;
  overflow-x: hidden;
}

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--slate);
  margin: 0 0 0.5rem;
  line-height: 1.15;
  letter-spacing: var(--track-display);
}
h1 { font-size: clamp(2.6rem, 5.5vw, 4rem); }
h2 { font-size: clamp(2rem, 4vw, 2.9rem); }
h3 { font-size: 1.6rem; }
p { margin: 0 0 1rem; }

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

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 1rem;
}

.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: 1.5rem;
}
.container-narrow { max-width: 51.25rem; }
.text-center { text-align: center; }

/* Short gold rule used as a section divider. */
.gold-rule {
  width: min(26.625rem, 60%);
  height: 3px;
  border: 0;
  background: var(--gold);
  margin: 5rem auto 0;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 1rem 1.75rem;
  background: var(--gold);
  color: var(--slate-deep);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color 0.18s ease;
}
.btn:hover { background: var(--gold-deep); }
.btn-dark {
  background: var(--slate);
  color: #fff;
}
.btn-dark:hover { background: var(--slate-deep); }
.btn-quiet { background: var(--sky); color: var(--slate-deep); padding-inline: 2.75rem; }
.btn-quiet:hover { background: #C4DAEA; }

/* ---------- Header / nav ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 20;
  background: transparent;
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}
.site-header.is-scrolled {
  background: rgba(246, 249, 250, 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(46, 61, 73, 0.08);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding-block: 1.5rem;
}
.brand { display: inline-flex; align-items: center; }
.brand img { height: 4.5rem; width: auto; display: block; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 2.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  text-decoration: none;
  color: var(--slate);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 300;
}
.nav-links a:hover { color: var(--slate-deep); }
.nav-links a[aria-current="page"] { font-weight: 700; color: var(--slate-deep); }
.nav-cta { margin-left: -0.6rem; }
.nav-cta a {
  padding: 1rem 1.9rem;
  background: var(--gold);
  border-radius: var(--radius);
  color: var(--slate-deep);
  font-weight: 500;
}
.nav-cta a:hover { background: var(--gold-deep); }

/* Hamburger */
.nav-toggle {
  display: none;
  width: 2.75rem; height: 2.75rem;
  align-items: center; justify-content: center;
  background: none; border: none; color: var(--slate); cursor: pointer;
  margin: -0.5rem -0.5rem -0.5rem 0;
}
.nav-toggle svg { width: 1.625rem; height: 1.625rem; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

/* ---------- Pop-ups (service tiles, team profiles, meeting request) ---------- */
/* A white card on the site's pale ground: hairline sky border, serif title
   with a short gold rule, and a blurred slate backdrop. */
.modal {
  width: calc(100vw - 2rem);
  max-width: 42rem;
  max-height: calc(100dvh - 2rem);
  padding: 4rem 4rem 3.5rem;
  border: 1px solid var(--sky);
  border-radius: var(--radius-lg);
  background: #fff;
  color: var(--slate);
  box-shadow: 0 50px 90px -40px rgba(52, 67, 90, 0.55);
  overflow-y: auto;
}
.modal::backdrop {
  background: rgba(65, 82, 103, 0.38);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.modal[open] { animation: modal-in 0.22s ease; }
@keyframes modal-in { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) {
  .modal[open] { animation: none; }
}
.modal h2 { font-size: clamp(2rem, 3.6vw, 2.6rem); margin-bottom: 0; }
/* Gold rule beneath the title, echoing the section dividers. */
.modal h2::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 2px;
  background: var(--gold);
  margin: 1.5rem 0 1.75rem;
}
.modal p { font-size: 1rem; line-height: 1.6; margin-bottom: 1rem; }
.modal p:last-child { margin-bottom: 0; }
.modal-eyebrow {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 0.9rem;
}
/* Close: a thin cross in a hairline circle. */
.modal-close {
  position: absolute;
  top: 1.1rem; right: 1.1rem;
  width: 2.4rem; height: 2.4rem;
  display: grid;
  place-items: center;
  background: none;
  border: 1px solid var(--sky);
  border-radius: 50%;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--slate);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.modal-close:hover { background: var(--sky-soft); }
.modal-close:focus-visible { outline: 0; border-color: var(--gold-deep); background: var(--sky-soft); }

/* Meeting request: centred, with the rule centred too. */
.modal-sm { max-width: 30rem; text-align: center; }
.modal-sm h2::after { margin-inline: auto; }
.meeting-options { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 2rem; }
.meeting-options .btn { min-width: 9.5rem; }

/* Team profile: role sits between the name and the rule; section labels
   use the site's small letterspaced style. */
.modal-profile h2::after { display: none; }
.modal-profile .profile-role { font-size: 1.1rem; margin: 0.35rem 0 0; }
.modal-profile .profile-role::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 2px;
  background: var(--gold);
  margin: 1.5rem 0 1.75rem;
}
.modal-profile h3 {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sage);
  margin: 2.25rem 0 0.9rem;
}
.modal-profile ul { list-style: none; margin: 0; padding: 0; }
.modal-profile li { padding: 0.5rem 0; border-top: 1px solid var(--hairline); line-height: 1.4; }
.modal-profile li:last-child { border-bottom: 1px solid var(--hairline); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: min(88vh, 56.25rem);
  display: flex;
  align-items: center;
  /* A light wash keeps the headline legible over the sky photo. */
  background:
    linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0.08)),
    url("../assets/hero-home.png") center bottom / cover no-repeat;
}
.hero-inner { max-width: 47.5rem; padding: 9rem 0 6rem 3rem; }
.hero h1 {
  font-weight: 400;
  font-size: clamp(2.5rem, 4.6vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: var(--track-display);
  margin-bottom: 2.75rem;
}
.hero .lead {
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--slate);
  max-width: 30rem;
  margin-bottom: 3.5rem;
}

/* ---------- Sections ---------- */
/* The home page carries one continuous vertical gradient (see .page-flow)
   so sections blend seamlessly. Individual sections stay transparent unless
   they need their own tone. */
.section { padding-block: 6rem; }
.section-tight { padding-block: 4rem; }

/* Continuous background flow for the home page: pale canvas at the top,
   easing through soft blue behind the testimonial into warm cream below. */
.page-flow {
  background:
    linear-gradient(180deg,
      var(--canvas) 0%,
      var(--canvas) 40%,
      #E3EEF5 52%,
      #DDEAF3 64%,
      #E8E5DB 78%,
      var(--cream) 88%,
      var(--cream) 100%);
}

/* Standalone tones */
.section-sky { background: var(--sky-soft); }
.section-blue { background: var(--sky); }
.section-cream { background: var(--cream); }
.section-cream-soft { background: var(--cream-soft); }
.section-pale { background: var(--canvas); }

/* CFP band: a solid blue strip that stands out from the page gradient. */
.section-cfp { background: var(--sky); padding-block: 7rem; }

/* Centered serif statement with a gold rule beneath (home page). */
.intro-section { padding-block: 9rem 3.5rem; }
.intro-centered { text-align: center; }
.intro-centered p {
  font-family: var(--font-display);
  letter-spacing: var(--track-display);
  font-weight: 400;
  font-size: clamp(1.3rem, 2.2vw, 1.5rem);
  line-height: 1.25;
  color: var(--slate);
  max-width: 59rem;
  margin-inline: auto;
}
.intro-centered .gold-rule { margin-top: 6rem; }

/* ---------- Service tiles ("What we help bring together") ---------- */
.bring { padding-block: 3.5rem 6rem; }
.bring h2 { text-align: center; font-style: italic; letter-spacing: var(--track-italic); font-size: clamp(2rem, 3.6vw, 2.55rem); margin-bottom: 2.5rem; }
.service-tile {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  background: #fff;
  border: 0;
  border-radius: 0.375rem;
  padding: 1rem 0.75rem;
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--sage);
  letter-spacing: 0.055em;
  line-height: 1.3;
  text-align: center;
  cursor: pointer;
  transition: box-shadow 0.18s ease, transform 0.18s ease, color 0.18s ease;
}
.service-tile:hover,
.service-tile:focus-visible {
  color: #6F8766;
  transform: translateY(-2px);
  box-shadow: 0 18px 30px -20px rgba(46, 61, 73, 0.4);
}
.service-tile:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }

/* Home: 3 x 2 grid. The ::before outline runs through the tile centres, so it
   reads as hairline connectors between neighbouring tiles. */
.bring-grid {
  --gap-x: 3.25rem;
  --tile-h: 5.75rem;
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.75rem var(--gap-x);
  max-width: 73.5rem;
  margin-inline: auto;
}
.bring-grid::before {
  content: "";
  position: absolute;
  inset: calc(var(--tile-h) / 2) calc((100% - 2 * var(--gap-x)) / 6);
  border: 1px solid rgba(140, 162, 131, 0.75);
  pointer-events: none;
}
.bring-grid .service-tile { height: var(--tile-h); font-size: 1.25rem; }

/* How We Help: one row of six square tiles. */
.service-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.5rem;
  max-width: 62.75rem;
  margin: 4.5rem auto 0;
}
.service-row .service-tile { aspect-ratio: 1; padding: 0.5rem; font-size: 0.9rem; }

/* ---------- Approach (three pillars) ---------- */
.approach { padding-block: 6.5rem 7.5rem; }
.approach-head {
  text-align: center;
  font-size: clamp(2rem, 3.6vw, 2.5rem);
  margin-bottom: 3.5rem;
}
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
  max-width: 68.75rem;
  margin-inline: auto;
}
.pillar { text-align: center; }
.pillar img { height: 6.5rem; width: auto; margin-bottom: 1.5rem; }
.pillar h3 {
  font-family: var(--font-body);
  font-size: 1.25rem;
  font-weight: 300;
  letter-spacing: 0.055em;
  color: var(--sage);
  margin-bottom: 1.75rem;
}
.pillar .pillar-sub {
  /* Sized to keep each three-word line on a single row. */
  font-size: clamp(1rem, 1.9vw, 1.35rem);
  line-height: 1.25;
  white-space: nowrap;
  color: var(--slate);
  margin: 0 auto 1.75rem;
}
.pillar p { color: var(--slate); font-weight: 200; font-size: 1.25rem; line-height: 1.35; margin: 0 auto; max-width: 17.5rem; }
.approach-cta { text-align: center; margin-top: 5rem; }
.approach-cta .btn { padding-inline: 3rem; font-weight: 300; font-size: 1.125rem; }

/* ---------- CFP band ---------- */
.cfp-band {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4.5rem;
  align-items: center;
  max-width: 55rem;
  margin-inline: auto;
}
.cfp-band img { width: 9.875rem; height: auto; }
.cfp-band p { color: var(--slate); font-size: 1.2rem; line-height: 1.3; margin: 0; }

/* ---------- Client Stories ---------- */
.stories { text-align: center; padding-block: 2rem; }
.stories h2 { font-style: italic; letter-spacing: var(--track-italic); font-size: clamp(2.3rem, 3.6vw, 3.25rem); margin-bottom: 4rem; }
.testimonial-name { font-size: 1.1rem; font-weight: 500; color: var(--slate); margin-bottom: 4rem; }
.testimonial {
  font-family: var(--font-display);
  letter-spacing: var(--track-display);
  font-weight: 300;
  font-size: clamp(1.3rem, 2.2vw, 1.5rem);
  line-height: 1.2;
  color: var(--slate);
  max-width: 54rem;
  margin: 0 auto;
}
.testimonial b { font-weight: 600; }
/* Compliance asked for this to sit close in size to the testimonial itself. */
.disclaimer {
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  color: var(--slate);
  max-width: 44rem;
  margin: 4.5rem auto 0;
  line-height: 1.35;
}

/* ---------- Partner / contact split ---------- */
.partner-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 4rem;
  align-items: center;
  max-width: 73.5rem;
  margin-inline: auto;
}
.partner-grid .body { padding-left: 3rem; }
.partner-grid .body h2 { font-size: clamp(2.1rem, 3.6vw, 2.5rem); margin-bottom: 2.5rem; }
.partner-grid .body p { color: var(--slate); font-size: 1.15rem; line-height: 1.25; max-width: 19rem; }

/* Contact form card */
.form-card {
  background: var(--canvas);
  border-radius: var(--radius-lg);
  padding: 4.5rem 3rem 4rem;
}
.form-card .brand-mark { text-align: center; margin-bottom: 4.5rem; }
.form-card .brand-mark img { height: 5.25rem; }
.form-card h3 {
  text-align: center;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0;
  margin-bottom: 3rem;
}
.field { margin-bottom: 1.6rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.field label {
  display: block;
  font-size: 0.82rem;
  color: var(--slate);
  margin-bottom: 0.4rem;
}
.field input, .field select {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.55rem 0.75rem;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  background-color: transparent;
  border: 2px solid var(--sky);
  border-radius: 8px;
}
.field input:focus, .field select:focus { outline: 2px solid var(--gold-deep); outline-offset: 0; border-color: var(--gold-deep); }
form .btn { margin-top: 0.75rem; }

/* Form feedback: hidden bot trap, sending state, the confirmation or error
   notice under the button, and invalid-field highlights after a submit try. */
.form-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-form button.is-sending { cursor: progress; opacity: 0.85; }
.contact-form button.is-sending::before {
  content: "";
  display: inline-block;
  width: 0.85em; height: 0.85em;
  margin-right: 0.55em;
  vertical-align: -0.1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: form-spin 0.7s linear infinite;
}
@keyframes form-spin { to { transform: rotate(360deg); } }
.form-status:empty { display: none; }
.form-status {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin-top: 1.25rem;
  padding: 0.95rem 1.1rem;
  border-radius: var(--radius);
  font-size: 0.95rem;
  line-height: 1.4;
  outline: none;
  animation: form-notice-in 0.25s ease;
}
.form-status::before { flex-shrink: 0; font-weight: 500; }
.form-status.is-success { background: #EEF3EA; border: 1px solid #C9D6C2; color: #3F5638; }
.form-status.is-success::before { content: "\2713"; }
.form-status.is-error { background: #FBEFEB; border: 1px solid #EBCFC6; color: #8A3B26; }
.form-status.is-error::before { content: "!"; }
@keyframes form-notice-in { from { opacity: 0; transform: translateY(-4px); } }
.contact-form.was-submitted :is(input, select):invalid { border-color: #D39A88; }
@media (prefers-reduced-motion: reduce) {
  .form-status { animation: none; }
  .contact-form button.is-sending::before { animation-duration: 2s; }
}

/* ---------- Ready CTA ---------- */
.ready { text-align: center; padding-block: 4.5rem; }
.ready .sun-end { height: 4.5rem; width: auto; display: block; margin: 0 auto 2.5rem; }
.ready h2 { font-size: clamp(2.3rem, 3.6vw, 3.05rem); margin-bottom: 1.25rem; }
.ready p { color: var(--slate); font-weight: 500; font-size: 1.3rem; margin-bottom: 2.75rem; }

/* ---------- Philosophy page ---------- */
/* Hero: warm cream field with the olive-branch photo blended to the right.
   The photo's own background is the same cream, so it flows seamlessly. */
.phil-hero {
  position: relative;
  background:
    url("../assets/philosophy-hero.png") right center / auto 100% no-repeat,
    var(--cream);
  min-height: min(82vh, 49.375rem);
  display: flex;
  align-items: center;
}
.phil-hero-text {
  padding: 11rem 0 7rem 7rem;
  max-width: 46rem;
}
.phil-hero-text h1 { font-size: clamp(2.2rem, 3.6vw, 2.55rem); margin-bottom: 3rem; }
.phil-hero-text p { color: var(--slate-deep); font-weight: 200; font-size: 0.98rem; line-height: 1.3; }
.phil-hero-text .phil-lead { font-weight: 400; font-size: 1.22rem; line-height: 1.3; max-width: 32rem; margin-bottom: 1.75rem; }
.phil-hero-text .phil-kicker { font-weight: 500; margin: 1.25rem 0 0; }
/* Left-side scrim keeps text crisp where it may overlap the image edge */
.phil-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--cream) 30%, rgba(238,227,207,0) 62%);
  z-index: 0;
}
.phil-hero .container { position: relative; z-index: 1; }

/* We Believe: three principles over a pale-to-soft-blue wash. */
.believe {
  padding-block: 9rem 11rem;
  background: linear-gradient(158deg, #F5F8FA 0%, #EEF3F8 48%, #DFEAF4 100%);
}
.believe-inner { max-width: 65rem; margin-inline: auto; }
.believe-eyebrow { display: block; margin-bottom: 4.5rem; }
.beliefs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3.5rem 2.25rem;
}
.belief h3 { font-weight: 300; font-size: clamp(1.8rem, 2.6vw, 2.05rem); margin-bottom: 1.75rem; }
.belief p { color: var(--slate); font-weight: 200; font-size: 0.98rem; line-height: 1.3; margin: 0; max-width: 18rem; }

/* Built with Intention: warm ground that eases into the site's sand tone. */
.intention {
  text-align: center;
  padding-block: 6rem 8.5rem;
  background: linear-gradient(180deg, #F8F4EC 0%, #F8F4EC 58%, #F1E7D6 80%, #E7D7BC 100%);
}
.intention h2 { font-size: clamp(2.3rem, 3.6vw, 3.25rem); margin-bottom: 5rem; }
.intention p { color: var(--slate); font-size: 0.98rem; line-height: 1.3; max-width: 46rem; margin-inline: auto; }
.intention .intention-lead { font-weight: 500; margin-bottom: 1.5rem; }
.name-equation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
  font-size: 1.2rem;
  color: var(--slate);
  margin-top: 4.5rem;
}
.name-equation img { height: 3.6rem; width: auto; display: block; }
.name-equation img.lynn-img { transform: translateY(20px); }

/* Closing line */
.closing { text-align: center; padding-block: 4.5rem 7rem; }
.closing-pale { background: var(--canvas); }
.closing-blue { background: var(--sky); }
.closing img { height: 4.25rem; margin-bottom: 1.75rem; }
.closing h2 { font-size: clamp(2.3rem, 3.6vw, 3.05rem); margin-bottom: 2.5rem; }
/* How We Help closes with a lighter, smaller line above its italic sub-line. */
.closing h2:has(+ .closing-sub) { font-weight: 300; font-size: clamp(2rem, 3.6vw, 2.5rem); }
.closing .closing-sub {
  font-family: var(--font-display);
  letter-spacing: var(--track-italic);
  font-style: italic;
  font-weight: 100;
  font-size: clamp(1.4rem, 2.4vw, 1.7rem);
  color: var(--slate);
  margin: -1.25rem 0 2.5rem;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--slate);
  color: #fff;
  padding-block: 6rem 5rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 4rem 6rem;
}
.footer-brand-name {
  font-family: var(--font-display);
  letter-spacing: var(--track-italic);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2rem, 3.2vw, 2.25rem);
  line-height: 1.1;
  margin-bottom: 2.5rem;
}
.footer-brand p { margin-bottom: 0; }
.footer-tagline { font-size: 1.2rem; line-height: 1.25; max-width: 23rem; }
.footer-meta { font-weight: 500; font-size: 0.88rem; margin-top: 3.5rem; }
.footer-phone { font-size: 1.4rem; margin-top: 2rem; }
.footer-phone a { color: inherit; text-decoration: none; }
.footer-nav { display: flex; gap: 1rem 3.25rem; flex-wrap: wrap; margin-bottom: 5rem; padding-top: 0.5rem; }
.footer-nav a { color: #fff; text-decoration: none; white-space: nowrap; }
.footer-nav a:hover { text-decoration: underline; }
.footer-legal { font-weight: 200; font-size: 0.85rem; line-height: 1.3; color: #E6ECF1; }
.footer-legal p { margin-bottom: 1.1rem; }
.footer-legal a { color: inherit; }
.footer-legal b { color: #fff; font-weight: 500; }
.footer-copy { font-weight: 300; text-transform: uppercase; }
.footer-note { font-style: italic; }

/* ---------- How We Help page ---------- */
.help-intro { text-align: center; padding: 15rem 0 6rem; }
.help-intro h1 { font-size: clamp(2.2rem, 3.6vw, 2.55rem); margin-bottom: 1rem; }
.help-intro p { color: var(--slate-deep); font-weight: 200; font-size: 1.05rem; margin: 0; }

/* The mock's white ground here was flagged as unwanted; these two sections
   share a soft warm tone instead. */
.help-warm { background: var(--cream-soft); }

.best-work { padding-bottom: 0; }
.best-work h2 { text-align: center; font-weight: 300; font-size: clamp(2.1rem, 3.6vw, 2.5rem); margin-bottom: 3rem; }
.best-list { list-style: none; max-width: 43.75rem; margin: 0 auto; padding: 0; }
/* Each item is marked with a small line-drawn sun. */
.best-list li {
  padding-left: 2.75rem;
  margin-bottom: 2.75rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23415267' stroke-width='1.1' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Cpath d='M12 2.5v2.6M12 18.9v2.6M2.5 12h2.6M18.9 12h2.6M5.3 5.3l1.8 1.8M16.9 16.9l1.8 1.8M5.3 18.7l1.8-1.8M16.9 7.1l1.8-1.8'/%3E%3C/svg%3E") left 0.15rem / 1.5rem no-repeat;
}
.best-list li:last-child { margin-bottom: 0; }
.best-list h3 { font-family: var(--font-body); font-size: 1.2rem; font-weight: 500; letter-spacing: 0; line-height: 1.3; margin-bottom: 1.25rem; }
.best-list p { color: var(--slate); font-size: 0.98rem; line-height: 1.3; margin: 0; }
.best-work .gold-rule { margin-top: 3rem; }

.questions { padding-top: 5rem; }
.questions > .container > h2 { text-align: center; font-weight: 300; font-size: clamp(2.1rem, 3.6vw, 2.5rem); margin-bottom: 4.5rem; }
.question-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem 4.5rem;
  max-width: 65rem;
  margin-inline: auto;
}
.question-group h3 {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0;
  font-size: 1.35rem;
  margin-bottom: 1.75rem;
}
.question-group ul { margin: 0; padding-left: 1.1rem; }
.question-group li { font-size: 0.9rem; color: var(--slate); margin-bottom: 0.3rem; }
.questions-close { text-align: center; margin-top: 6rem; }
.questions-close h2 { font-style: italic; letter-spacing: var(--track-italic); font-size: clamp(2rem, 3.6vw, 2.55rem); margin-bottom: 1.25rem; }
.questions-close p { color: var(--slate); font-weight: 500; font-size: 1.2rem; line-height: 1.25; max-width: 44rem; margin: 0 auto 1.5rem; }
.questions-close p:last-child { margin-bottom: 0; }

.fit-box {
  max-width: 63.125rem;
  margin-inline: auto;
  padding: 5rem 2rem 5.5rem;
  border: 2px solid var(--sky);
  text-align: center;
}
.fit-box h2 { font-weight: 300; font-size: clamp(2.1rem, 3.6vw, 2.5rem); margin-bottom: 2.75rem; }
.fit-box p { color: var(--slate); font-size: 1.08rem; line-height: 1.25; max-width: 42rem; margin: 0 auto 1.4rem; }
.fit-box p:last-child { margin-bottom: 0; }

/* ---------- Our Team page ---------- */
.team-intro-section { background: var(--cream); padding-block: 17rem 8.5rem; }
.team-intro { text-align: center; max-width: 45rem; margin-inline: auto; }
.team-intro h1 {
  font-size: clamp(2.2rem, 3.6vw, 2.55rem);
  margin-bottom: 3.5rem;
  text-wrap: balance;
}
.team-intro p { color: var(--slate); font-size: 1.25rem; line-height: 1.25; max-width: 40rem; margin: 0 auto; }

/* Full-bleed photo bands. The portrait is a background-style layer and the
   pull-quote sits in the photo's empty side, alternating left/right. Bands
   sit flush against each other. */
.team-bands { display: grid; background: var(--cream); }
.team-band {
  position: relative;
  overflow: hidden;
  background: #D9CFC0; /* matches the photo backdrop while images load */
  aspect-ratio: 1984 / 575;   /* the source bands are wide, short strips */
  min-height: 21.25rem;
}
.team-band-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* The copy sits inside the same max-width container the rest of the site
   uses, so quotes line up with page content rather than floating off-edge. */
.team-band-inner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 45rem;   /* the mock keeps both quotes close to the centre */
  margin-inline: auto;
  padding-inline: 1.5rem;
}
.team-band-copy { width: min(64%, 28rem); }
/* Bands whose portrait sits on the left push the copy to the right side. */
.team-band.band-right .team-band-inner { justify-content: flex-end; }
.team-band.band-right .team-band-copy { text-align: right; width: min(64%, 25.5rem); }

/* Jessica + Izabella: two half-width tiles side by side. */
.team-pair { display: grid; grid-template-columns: 1fr 1fr; }
.team-tile { aspect-ratio: 720 / 390; min-height: 0; }
.team-tile .team-band-photo { object-position: left center; }
.team-pair .team-tile:last-child .team-band-photo { object-position: 30% center; }
/* A faint wash on the copy side keeps the quote legible over the photo. */
.team-tile .team-band-inner {
  max-width: none;
  padding-inline: 14% 0;
  background: linear-gradient(90deg, rgba(222, 211, 195, 0.6), rgba(222, 211, 195, 0) 48%);
}
.team-tile .team-band-copy { width: 38%; }
.team-band.team-tile blockquote { font-size: clamp(0.9rem, 1.25vw, 1rem); }
.team-tile .team-name { font-size: 1rem; }
.team-tile .team-role { font-size: 0.8rem; }

/* Quote in the display serif; name in body sans; role small and muted. */
.team-band blockquote {
  font-family: var(--font-display);
  letter-spacing: var(--track-display);
  font-weight: 300;
  font-size: clamp(1.2rem, 1.9vw, 1.5rem);
  line-height: 1.15;
  color: var(--slate);
  margin: 0 0 1.5rem;
}
.team-name {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.3rem;
  color: var(--slate);
  line-height: 1.3;
}
.team-role {
  font-family: var(--font-body);
  font-weight: 200;
  font-size: 0.95rem;
  color: var(--ink-muted);
  line-height: 1.3;
}
/* Opens the person's profile pop-up. */
.team-more {
  margin-top: 0.9rem;
  padding: 0;
  background: none;
  border: 0;
  border-bottom: 1px solid currentColor;
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--slate);
  cursor: pointer;
}
.team-more:hover { color: var(--slate-deep); border-bottom-width: 2px; }

/* The photo bands are full-bleed and keep growing past the mock's 1440px
   width, so above it the quotes, names and their box grow with the window
   (each value is its 1440px size expressed in vw). */
@media (min-width: 1441px) {
  .team-band-inner { max-width: 50vw; }
  .team-band-copy { width: min(64%, 31.1vw); }
  .team-band.band-right .team-band-copy { width: min(64%, 28.33vw); }
  .team-band blockquote { font-size: 1.667vw; }
  .team-name { font-size: 1.444vw; }
  .team-role { font-size: 1.056vw; }
  .team-more { font-size: 0.911vw; }
  .team-band.team-tile blockquote, .team-tile .team-name { font-size: 1.111vw; }
  .team-tile .team-role { font-size: 0.889vw; }
}

.team-network { text-align: center; padding-block: 9.5rem 7.5rem; }
.team-tagline {
  font-size: clamp(1.5rem, 2.8vw, 2.25rem);
  color: var(--slate-deep);
  line-height: 1.2;
  margin-bottom: 4.5rem;
}
.team-network-label { font-size: 1.3rem; letter-spacing: 0.2em; color: var(--slate); margin-bottom: 4.5rem; }
.team-logos { display: flex; align-items: center; justify-content: center; gap: 3rem 5.5rem; flex-wrap: wrap; }
.team-logos img { height: 5.75rem; width: auto; }

/* ---------- Resources page ---------- */
.res-intro { padding: 13rem 0 3rem; text-align: center; }
.res-intro-copy { max-width: 54ch; margin-inline: auto; }
.res-intro h1 { font-size: clamp(2rem, 3.6vw, 2.7rem); margin-bottom: 1rem; }
.res-intro p { color: var(--ink-muted); font-size: 1.05rem; }

/* Sticky sub-tab bar */
.res-tabs-wrap {
  position: sticky;
  top: 5.5rem;
  z-index: 15;
  background: rgba(246, 249, 250, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline);
}
.res-tabs { display: flex; justify-content: center; gap: 2.5rem; flex-wrap: wrap; }
.res-tabs a {
  display: inline-block;
  padding: 1rem 0;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.res-tabs a:hover { color: var(--slate-deep); border-bottom-color: var(--gold-deep); }

/* Section heads */
.res-section { scroll-margin-top: 9.375rem; }
.res-head { max-width: 52ch; margin-bottom: 3rem; }
.res-head h2 { font-size: clamp(1.7rem, 3vw, 2.2rem); margin-bottom: 0.75rem; }
.res-head p { color: var(--ink-muted); margin: 0; }

/* Resource cards */
.res-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18.75rem, 1fr));
  gap: 1.5rem;
}
.res-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 2rem;
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
a.res-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 44px -28px rgba(46, 61, 73, 0.35);
  border-color: var(--gold-deep);
}
.res-card-tag {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 0.9rem;
}
.res-card h3 { font-size: 1.3rem; color: var(--slate-deep); margin-bottom: 0.6rem; }
.res-card p { color: var(--ink-muted); font-size: 0.95rem; flex: 1; }
.res-card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--slate-deep);
}
.res-card-link svg { width: 0.9375rem; height: 0.9375rem; transition: transform 0.18s ease; }
a.res-card:hover .res-card-link svg { transform: translateX(3px); }
/* Placeholder card for content that isn't published yet */
.res-card-soon { background: transparent; border-style: dashed; }
.res-card-note { margin-top: 1rem; font-size: 0.85rem; font-style: italic; color: var(--ink-muted); }

/* ---------- Login page ---------- */
.login-list { list-style: none; margin: 0; padding: 0; }
.login-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid rgba(69, 88, 106, 0.16);
}
.login-row:first-child { border-top: 1px solid rgba(69, 88, 106, 0.16); }
.login-name {
  display: flex;
  flex-direction: column;
  font-weight: 500;
  color: var(--slate-deep);
}
.login-meta { font-weight: 400; font-size: 0.82rem; color: var(--ink-muted); margin-top: 0.15rem; }
.login-link {
  flex-shrink: 0;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--slate-deep);
  text-decoration: none;
  padding: 0.45rem 1.1rem;
  border: 1px solid var(--slate);
  border-radius: 6px;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.login-link:hover { background: var(--slate-deep); color: #fff; border-color: var(--slate-deep); }

.login-help {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  background: var(--cream);
  border-radius: var(--radius-lg);
  padding: 2.25rem 2.5rem;
}
.login-help h3 { margin-bottom: 0.35rem; }
.login-help p { color: var(--ink-muted); margin: 0; max-width: 52ch; }
.login-help .btn { flex-shrink: 0; }
/* Meeting request sits below the help panel, on the site's soft blue. */
.login-help + .login-help { margin-top: 1.25rem; }
.login-meeting { background: var(--sky); }
.login-security { font-size: 0.8rem; color: var(--ink-muted); margin-top: 1.5rem; text-align: center; }

/* ---------- Contact page ---------- */
.contact-hero {
  position: relative;
  background: url("../assets/contact-hero.png") center / cover no-repeat;
  min-height: min(90vh, 60rem);
  display: flex;
  align-items: center;
}
.contact-hero .container { position: relative; z-index: 1; text-align: center; }
.contact-hero-text { max-width: 40rem; margin-inline: auto; padding-block: 12rem 6rem; }
.contact-hero h1 { font-size: clamp(2.2rem, 3.6vw, 2.55rem); line-height: 1.05; margin-bottom: 3rem; }
/* The second line of the headline is set larger, in italic. */
.contact-hero h1 i { display: block; font-style: italic; letter-spacing: var(--track-italic); font-size: 1.42em; }
.contact-hero p { color: var(--slate); font-size: 1.25rem; line-height: 1.2; max-width: 28.5rem; margin: 0 auto 5.5rem; }
.contact-hero .btn { padding-inline: 4.5rem; }

.steps-section { padding-block: 10rem 8rem; }
.steps-wrap { max-width: 63.125rem; margin-inline: auto; }
.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem 5rem;
  margin-top: 3rem;
}
.step-num { font-family: var(--font-display); font-weight: 100; font-size: clamp(5rem, 11vw, 9rem); color: #D2D8C4; margin-bottom: 1.5rem; line-height: 1; }
.step h3 { font-weight: 300; font-size: 2.05rem; margin-bottom: 1.75rem; }
.step p { color: var(--ink-muted); font-weight: 200; font-size: 1.2rem; line-height: 1.25; margin: 0; max-width: 17rem; }

.form-flat { max-width: 53.75rem; margin-inline: auto; }
.form-flat h2 { text-align: center; font-size: clamp(1.9rem, 3.6vw, 2.55rem); margin-bottom: 5rem; }
.form-flat .field { margin-bottom: 2.5rem; }
.form-flat .field-row { gap: 2.75rem; }
.form-flat .field label { font-size: 0.95rem; }
.form-flat .field input, .form-flat .field select { min-height: 3.5rem; border-radius: 2px; background-color: #fff; }
.talk-line { text-align: center; margin-top: 5rem; }
.talk-line h3 { font-size: clamp(1.9rem, 3.6vw, 2.55rem); margin-bottom: 1.5rem; }
.talk-line p { font-size: 1.5rem; margin: 0; }
.talk-line a { color: var(--slate); text-decoration: none; }

/* FAQ: a "+" marker to the left of each serif question. */
.faq-section { padding-block: 9rem; scroll-margin-top: 4rem; }
.faq-title { text-align: center; font-style: italic; letter-spacing: var(--track-italic); font-size: clamp(2.3rem, 3.6vw, 3.25rem); margin-bottom: 6rem; }
.faq-list { max-width: 73.75rem; margin-inline: auto; }
.faq-item { margin-bottom: 4.5rem; }
.faq-item:last-child { margin-bottom: 0; }
.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 2.2rem;
  font-family: var(--font-display);
  letter-spacing: var(--track-display);
  font-weight: 300;
  font-size: clamp(1.5rem, 2.9vw, 2.2rem);
  line-height: 1.15;
  color: var(--slate);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before {
  content: "+";
  flex-shrink: 0;
  width: 1rem;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.5rem;
  color: var(--ink-muted);
}
.faq-item[open] summary::before { content: "\2212"; }
.faq-item p { color: var(--slate); font-weight: 200; font-size: 1.25rem; line-height: 1.25; max-width: 62rem; margin: 2rem 0 0 3.2rem; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .nav-links { gap: 1.5rem; }
  .nav-links a { font-size: 0.92rem; }
  .nav-cta a { padding: 0.8rem 1.25rem; }
  .brand img { height: 3.75rem; }
  .hero-inner, .partner-grid .body { padding-left: 0; }
  .phil-hero-text { padding-left: 0; }
  .service-row { grid-template-columns: repeat(3, 1fr); max-width: 35rem; }
  .bring-grid { --gap-x: 1.5rem; }
  .bring-grid .service-tile { font-size: 1rem; }
  .team-tile .team-band-copy { width: 40%; }
}
@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  /* Compact header on mobile so hero content clears the fixed bar cleanly. */
  .nav { padding-block: 1rem; }
  .brand img { height: 3.25rem; }
  /* On mobile the header is always solid (matching the menu dropdown),
     not transparent — keeps the logo and toggle legible over any hero. */
  .site-header,
  .site-header.is-scrolled {
    background: var(--canvas);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 1px 0 rgba(46, 61, 73, 0.08);
  }
  .nav-links {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--canvas); padding: 0.5rem 1.5rem 1.25rem;
    border-bottom: 1px solid var(--hairline);
    box-shadow: 0 12px 20px -12px rgba(46,61,73,0.2);
    max-height: calc(100dvh - 4.75rem);
    overflow-y: auto;
  }
  .nav-links.open { display: flex; }
  .nav-links li { width: 100%; }
  .nav-links a { display: block; padding: 0.85rem 0; border-bottom: 1px solid var(--hairline); font-size: 1rem; }
  .nav-cta { margin: 0.85rem 0 0; }
  .nav-cta a { display: block; text-align: center; border-bottom: 0; }
  .modal { padding: 3.75rem 1.5rem 2.25rem; }
  .hero { min-height: auto; }
  .hero-inner { padding-block: 8rem 4rem; }
  .intro-section { padding-block: 5rem 2rem; }
  .intro-centered .gold-rule { margin-top: 3.5rem; }
  /* Tiles stack two-up; the connector outline only makes sense on the 3 x 2 grid. */
  .bring-grid { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .bring-grid::before { display: none; }
  .bring-grid .service-tile { height: auto; min-height: 5rem; }
  .partner-grid, .cfp-band { grid-template-columns: 1fr; gap: 2.5rem; }
  .partner-grid .body { text-align: center; }
  .partner-grid .body h2 { margin-bottom: 1.25rem; }
  .partner-grid .body p { margin-inline: auto; }
  .form-card { padding: 2.5rem 1.5rem; }
  .form-card .brand-mark { margin-bottom: 2rem; }
  .form-card .brand-mark img { height: 3.75rem; }
  .pillars { grid-template-columns: 1fr; gap: 3.5rem; }
  .pillar .pillar-sub { font-size: 1.3rem; }
  .cfp-band { text-align: center; justify-items: center; }
  .stories h2, .testimonial-name { margin-bottom: 2.5rem; }
  .disclaimer { margin-top: 3rem; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-meta { margin-top: 2rem; }
  .footer-nav { gap: 1rem 2rem; margin-bottom: 2.5rem; }
  .site-footer { padding-block: 4rem 3rem; }
  /* Philosophy */
  .phil-hero {
    background:
      linear-gradient(180deg, rgba(238,227,207,0.8), rgba(238,227,207,0.5)),
      url("../assets/philosophy-hero.png") center / cover no-repeat;
    min-height: auto;
  }
  .phil-hero::before { display: none; }
  .phil-hero-text { padding: 7.5rem 0 3.5rem; max-width: none; }
  .phil-hero-text h1 { margin-bottom: 1.75rem; }
  .believe { padding-block: 5rem; }
  .believe-eyebrow { margin-bottom: 2.5rem; }
  .beliefs { grid-template-columns: 1fr; gap: 2.5rem; }
  .belief h3 { margin-bottom: 0.75rem; }
  .belief p { max-width: none; }
  .intention { padding-block: 4.5rem 6rem; }
  .intention h2 { margin-bottom: 2.5rem; }
  .name-equation { margin-top: 3rem; gap: 1rem; }
  .name-equation img { height: 2.8rem; }
  /* How We Help */
  section.help-intro { padding: 8rem 0 4rem; }
  .service-row { margin-top: 3rem; gap: 1rem; }
  .question-grid { grid-template-columns: 1fr; gap: 2.75rem; }
  .question-group h3 { margin-bottom: 1rem; }
  .questions-close { margin-top: 4rem; }
  .fit-box { padding: 3rem 1.5rem; }
  /* Our Team */
  section.team-intro-section { padding-block: 8rem 4rem; }
  .team-intro h1 { margin-bottom: 1.75rem; }
  .team-pair { grid-template-columns: 1fr; }
  /* Stack the bands: photo on top, quote below on a matching warm ground.
     The source images are very wide, so drop the band's wide aspect ratio and
     let the photo keep a portrait-friendly crop instead of cutting off faces. */
  .team-band, .team-tile { aspect-ratio: auto; min-height: 0; }
  .team-band-photo {
    height: auto;
    aspect-ratio: 4 / 3;
  }
  /* Each source photo places its subject in a different part of a very wide
     frame, so pin the crop to where the people actually are. */
  .team-bands > .team-band:nth-of-type(1) .team-band-photo { object-position: 80% center; }
  .team-bands > .team-band:nth-of-type(2) .team-band-photo { object-position: 20% center; }
  .team-pair .team-tile .team-band-photo,
  .team-pair .team-tile:last-child .team-band-photo { object-position: 52% center; }
  .team-band-inner, .team-tile .team-band-inner { position: static; max-width: none; padding: 0; }
  .team-band-copy,
  .team-tile .team-band-copy,
  .team-band.band-right .team-band-copy {
    width: auto;
    margin: 0;
    padding: 1.75rem 1.5rem 2rem;
    text-align: left;
    background: #EDE6DB;
  }
  .team-band.team-tile blockquote { font-size: 1.2rem; }
  .team-tile .team-band-inner { background: none; }
  .team-network { padding-block: 5rem; }
  .team-tagline, .team-network-label { margin-bottom: 3rem; }
  .team-network-label { font-size: 1rem; letter-spacing: 0.14em; }
  .team-logos img { height: 4rem; }
  /* Resources */
  section.res-intro { padding-top: 7.5rem; }
  .res-tabs-wrap { top: 5.25rem; }
  .res-tabs { gap: 1.5rem; justify-content: flex-start; }
  .res-tabs a { font-size: 0.85rem; }
  .res-section { scroll-margin-top: 8.75rem; }
  /* Login */
  .login-row { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .login-help { flex-direction: column; align-items: flex-start; padding: 1.75rem; }
  /* Contact */
  .contact-hero { min-height: auto; }
  .contact-hero-text { padding-block: 8rem 4rem; }
  .contact-hero p { margin-bottom: 2.5rem; }
  .steps-section { padding-block: 5rem; }
  .steps-grid { grid-template-columns: 1fr; gap: 3rem; }
  .step-num { font-size: 4.5rem; margin-bottom: 0.75rem; }
  .step h3 { margin-bottom: 0.75rem; }
  .step p { max-width: none; }
  .form-flat h2 { margin-bottom: 3rem; }
  .form-flat .field { margin-bottom: 1.5rem; }
  .faq-section { padding-block: 5rem; }
  .faq-title { margin-bottom: 3rem; }
  .faq-item { margin-bottom: 2.5rem; }
  .faq-item summary { gap: 1rem; }
  .faq-item p { margin: 1rem 0 0 2rem; font-size: 1.05rem; }
}
@media (max-width: 560px) {
  .section { padding-block: 4rem; }
  .field-row, .form-flat .field-row { grid-template-columns: 1fr; gap: 0; }
  .bring-grid { grid-template-columns: 1fr; }
  .service-row { grid-template-columns: 1fr 1fr; }
  .service-row .service-tile { aspect-ratio: 2 / 1; }
}