/* ==========================================================================
   MGR Realty — main.css
   Shared stylesheet for the static rebuild of mgr-realty.com
   Design tokens ported 1:1 from Squarespace Site Styles (see migration doc §6)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Core palette — from Squarespace Site Styles */
  --color-black:        #0D1B2A;  /* dark navy — body text, dark sections */
  --color-white:        #FFFEFD;  /* warm off-white, NOT #fff — page background */
  --color-accent:       #38A3A5;  /* brand teal */
  --color-accent-light: #C8FAE1;  /* pale mint — BACKGROUND ONLY, never text */
  --color-accent-dark:  #426378;  /* slate blue */
  --color-inverse:      #FFFFFF;

  /* Pale tint of the slate blue above: same hue (203.3deg), lightness raised to
     90%. Replaces the mint as the alternating section background — see
     README "Card section background". BACKGROUND ONLY, never text. */
  --color-slate-tint:   #DCE8EF;
  /* Teal darkened to L28 so the eyebrow label clears 4.5:1 on that tint.
     Full-strength #38A3A5 only manages 2.4:1 there. */
  --color-accent-deep:  #24696B;

  /* Semantic aliases */
  --bg-page:      var(--color-white);
  --bg-alt:       var(--color-slate-tint);
  --bg-dark:      var(--color-black);
  --text-body:    var(--color-black);
  --text-muted:   #4A5A68;
  --text-inverse: var(--color-inverse);
  --link:         var(--color-accent);
  --rule:         rgba(13, 27, 42, 0.12);

  /* Type */
  --font-heading: "Noto Serif", Georgia, "Times New Roman", serif;
  --font-body:    "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Fluid type scale */
  --step-h1:   clamp(2.25rem, 1.4rem + 3.6vw, 4.25rem);
  --step-h2:   clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  --step-h3:   clamp(1.15rem, 1.05rem + 0.45vw, 1.375rem);
  --step-lead: clamp(1.0625rem, 1rem + 0.5vw, 1.375rem);
  --step-body: 1rem;
  --step-small: 0.875rem;

  /* Rhythm */
  --section-y:  clamp(3.5rem, 2rem + 6vw, 7rem);
  --gutter:     clamp(1.25rem, 0.75rem + 2vw, 3rem);
  --measure:    68ch;
  --maxw:       1200px;

  /* Chrome */
  --radius:     4px;
  --shadow:     0 1px 2px rgba(13, 27, 42, .06), 0 8px 24px rgba(13, 27, 42, .07);
  --shadow-lg:  0 2px 4px rgba(13, 27, 42, .08), 0 18px 44px rgba(13, 27, 42, .13);
  --ease:       cubic-bezier(.2, .7, .3, 1);
  --header-h:   76px;
}

/* --------------------------------------------------------------------------
   2. Reset / base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--step-body);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture, svg { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}
h1 { font-size: var(--step-h1); }
h2 { font-size: var(--step-h2); }
h3 { font-size: var(--step-h3); }

p { margin: 0 0 1.2em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--color-accent-dark); }

:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

ul { margin: 0; padding: 0; list-style: none; }

/* --------------------------------------------------------------------------
   3. Layout helpers
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--section-y); }
.section--alt { background: var(--bg-alt); }
.section--dark { background: var(--bg-dark); color: var(--text-inverse); }
.section--dark h2, .section--dark h3 { color: var(--text-inverse); }

.section-head { max-width: 46rem; margin-bottom: clamp(2rem, 1rem + 3vw, 3.25rem); }
.section-head--center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0.9rem;
}
.section--dark .eyebrow { color: var(--color-accent-light); }
/* Teal at full strength is too light on the tinted band — use the deep variant. */
.section--alt .eyebrow { color: var(--color-accent-deep); }

.lead { font-size: var(--step-lead); line-height: 1.55; color: var(--text-muted); max-width: var(--measure); }
.section--dark .lead { color: rgba(255, 255, 255, .82); }

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 200;
  background: var(--color-black); color: var(--text-inverse);
  padding: .7rem 1.1rem; border-radius: var(--radius);
  font-size: var(--step-small); font-weight: 500; text-decoration: none;
  transition: top .18s var(--ease);
}
.skip-link:focus { top: 1rem; color: var(--text-inverse); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--color-accent);
  --btn-fg: var(--color-inverse);
  --btn-bd: var(--color-accent);
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 50px;
  padding: .85rem 1.9rem;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1.5px solid var(--btn-bd); border-radius: var(--radius);
  font-family: var(--font-body); font-size: .8125rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
  cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease), transform .2s var(--ease);
}
.btn:hover {
  background: var(--color-accent-dark); border-color: var(--color-accent-dark);
  color: var(--btn-fg); transform: translateY(-2px);
}
.btn--outline { --btn-bg: transparent; --btn-fg: var(--color-inverse); --btn-bd: rgba(255,255,255,.75); }
.btn--outline:hover { background: var(--color-inverse); border-color: var(--color-inverse); color: var(--color-black); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--color-accent-dark); --btn-bd: var(--rule); }
.btn--ghost:hover { background: var(--color-black); border-color: var(--color-black); color: var(--color-inverse); }

.btn-row { display: flex; flex-wrap: wrap; gap: .9rem; }
.btn-row--center { justify-content: center; }

/* text link with arrow */
.arrow-link {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: var(--step-small); font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; text-decoration: none; color: var(--color-accent-dark);
}
.arrow-link::after { content: "→"; transition: transform .2s var(--ease); }
.arrow-link:hover::after { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   5. Header / nav
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 254, 253, 0.94);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--rule);
}
.site-header__inner {
  display: flex; align-items: center; gap: 1.25rem;
  min-height: var(--header-h);
  padding-block: .5rem;
}
.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--text-body); margin-right: auto; }
.brand img { width: 46px; height: 46px; }
.brand__name {
  font-family: var(--font-heading); font-size: 1.0625rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; line-height: 1.1;
}

.nav-toggle {
  display: none;
  align-items: center; justify-content: center;
  width: 46px; height: 46px; margin-left: auto;
  background: none; border: 1px solid var(--rule); border-radius: var(--radius);
  cursor: pointer;
}
.nav-toggle span { position: relative; display: block; width: 20px; height: 1.5px; background: var(--color-black); }
.nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 1.5px; background: var(--color-black);
  transition: transform .2s var(--ease), top .2s var(--ease);
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after  { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

.site-nav > ul { display: flex; align-items: center; gap: clamp(.7rem, .1rem + .9vw, 1.35rem); }
.site-nav > ul > li { display: flex; align-items: center; }
.site-nav a {
  display: inline-block; padding: .35rem 0;
  font-size: .78125rem; font-weight: 500; letter-spacing: .02em;
  white-space: nowrap;
  color: var(--text-body); text-decoration: none;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--color-accent); border-bottom-color: var(--color-accent); }

/* -- Services dropdown ----------------------------------------------------
   "Services" is a grouping label, not a page, so it's a <button>, not a link.
   Opens on hover and on focus for pointers, on click for touch/keyboard. */
.has-sub { position: relative; }
.sub-toggle {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem 0; margin: 0;
  background: none; border: 0; border-bottom: 2px solid transparent;
  font-family: var(--font-body); font-size: .78125rem; font-weight: 500;
  letter-spacing: .02em; white-space: nowrap; color: var(--text-body);
  cursor: pointer;
}
.sub-toggle:hover, .sub-toggle[aria-expanded="true"] { color: var(--color-accent); border-bottom-color: var(--color-accent); }
.chev {
  width: .42em; height: .42em; margin-top: -.2em;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform .2s var(--ease);
}
.sub-toggle[aria-expanded="true"] .chev { transform: rotate(-135deg); margin-top: .1em; }

.subnav {
  position: absolute; top: calc(100% + .55rem); left: -1rem;
  min-width: 14rem; padding: .4rem 0;
  background: var(--bg-page);
  border: 1px solid var(--rule); border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.has-sub:hover > .subnav,
.has-sub:focus-within > .subnav,
.sub-toggle[aria-expanded="true"] + .subnav {
  opacity: 1; visibility: visible; transform: translateY(0);
}
/* hover bridge so the pointer can cross the gap without the panel closing */
.has-sub::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: .6rem; }
.site-nav .subnav a {
  display: block; padding: .6rem 1.25rem;
  border-bottom: 0; font-size: .8125rem; letter-spacing: .01em;
}
.site-nav .subnav a:hover, .site-nav .subnav a[aria-current="page"] {
  background: var(--bg-alt); color: var(--color-accent-deep); border-bottom: 0;
}

.social { display: flex; align-items: center; gap: .35rem; }
.social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; color: var(--color-accent-dark);
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.social a:hover { background: var(--color-accent); color: var(--color-inverse); }
.social svg { width: 17px; height: 17px; fill: currentColor; }

/* Eight nav items + wordmark + social is a lot of horizontal room. Tighten
   between 1180px and 1320px, then collapse to the hamburger below 1180px. */
/* With Services collapsed into a dropdown the bar is down to four items, so the
   wordmark fits at every desktop width and the hamburger can wait until 860px. */
@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    position: absolute; left: 0; right: 0; top: 100%;
    display: none;
    background: var(--bg-page);
    border-bottom: 1px solid var(--rule);
    box-shadow: var(--shadow);
    padding: .5rem var(--gutter) 1.5rem;
  }
  .site-nav[data-open="true"] { display: block; }
  .site-nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav > ul > li { display: block; }
  .site-nav a { padding: .95rem 0; border-bottom: 1px solid var(--rule); font-size: .9375rem; }
  .site-nav a:hover, .site-nav a[aria-current="page"] { border-bottom-color: var(--rule); }
  .site-header__inner .social { display: none; }

  /* Inside the hamburger panel the dropdown becomes an inline accordion —
     no hover, no absolute positioning, no hover bridge. */
  .has-sub { position: static; }
  .has-sub::after { display: none; }
  .sub-toggle {
    width: 100%; justify-content: space-between;
    padding: .95rem 0; border-bottom: 1px solid var(--rule);
    font-size: .9375rem;
  }
  .sub-toggle:hover, .sub-toggle[aria-expanded="true"] { border-bottom-color: var(--rule); }
  .subnav {
    position: static; min-width: 0; padding: 0;
    background: none; border: 0; border-radius: 0; box-shadow: none;
    opacity: 1; visibility: visible; transform: none;
    display: none;
  }
  .has-sub:hover > .subnav, .has-sub:focus-within > .subnav { display: none; }
  .sub-toggle[aria-expanded="true"] + .subnav { display: block; }
  .site-nav .subnav a { padding: .8rem 0 .8rem 1rem; font-size: .875rem; color: var(--text-muted); }
  .site-nav .subnav a:hover { background: none; color: var(--color-accent); }
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero { position: relative; isolation: isolate; display: grid; align-items: center; min-height: clamp(30rem, 78vh, 46rem); }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 58%; }
/* Two overlays: a vertical wash for the header/footer edges, and a left-side
   scrim so the headline stays legible over the bright window in the photo. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg, rgba(13,27,42,.88) 0%, rgba(13,27,42,.7) 38%, rgba(13,27,42,.2) 78%),
    linear-gradient(180deg, rgba(13,27,42,.5) 0%, rgba(13,27,42,.15) 42%, rgba(13,27,42,.6) 100%);
}
@media (max-width: 700px) {
  .hero::after {
    background: linear-gradient(180deg, rgba(13,27,42,.72) 0%, rgba(13,27,42,.55) 45%, rgba(13,27,42,.8) 100%);
  }
}
.hero__inner { padding-block: clamp(4rem, 2rem + 8vw, 8rem); color: var(--text-inverse); }
.hero__title { color: var(--text-inverse); margin-bottom: 1rem; max-width: 22ch; }
.hero__title em {
  display: block; font-style: normal; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  font-size: clamp(1.5rem, 1rem + 2.2vw, 2.75rem);
  margin-top: .35rem; color: var(--color-accent-light);
}
.hero__sub {
  max-width: 44ch; margin-bottom: 2.1rem;
  font-size: var(--step-lead); line-height: 1.55; color: rgba(255,255,255,.9);
}

/* --------------------------------------------------------------------------
   7. Intro
   -------------------------------------------------------------------------- */
.intro { text-align: center; }
.intro p {
  max-width: 40ch; margin-inline: auto;
  font-family: var(--font-heading); font-weight: 400;
  font-size: clamp(1.375rem, 1.05rem + 1.5vw, 2.125rem);
  line-height: 1.4; letter-spacing: -0.01em; color: var(--text-body);
}
.intro .rule { width: 56px; height: 2px; background: var(--color-accent); margin: 0 auto 2rem; border: 0; }

/* --------------------------------------------------------------------------
   8. Service cards
   -------------------------------------------------------------------------- */
.card-grid {
  display: grid; gap: clamp(1.25rem, .75rem + 1.5vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr));
}
.card {
  position: relative; display: flex; flex-direction: column;
  background: var(--bg-page); border: 1px solid var(--rule); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; }
.card__media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--color-slate-tint); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.card:hover .card__media img { transform: scale(1.04); }
.card__body { display: flex; flex-direction: column; flex: 1; padding: 1.6rem 1.5rem 1.5rem; }
.card__body h3 { margin-bottom: .5rem; }
.card__body p { font-size: .9375rem; color: var(--text-muted); }
.card__body .arrow-link { margin-top: auto; padding-top: 1.1rem; }
/* whole card clickable, link text still the accessible name */
.card__link { position: absolute; inset: 0; z-index: 1; }
.card__badge {
  align-self: flex-start; margin-bottom: .7rem;
  padding: .25rem .6rem; border-radius: 999px;
  /* Badge stays mint so it reads as an accent against the white card rather
     than blending into the blue band behind it. 6.5:1 on mint. */
  background: var(--color-accent-light); color: #1E5F52;
  font-size: .6875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   9. Team strip
   -------------------------------------------------------------------------- */
.team-grid {
  display: grid; gap: clamp(1.25rem, .75rem + 1.5vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
}
@media (min-width: 900px) { .team-grid { grid-template-columns: repeat(4, 1fr); } }
.agent { text-align: center; }
.agent a { text-decoration: none; color: inherit; display: block; }
.agent__photo {
  aspect-ratio: 1; margin-bottom: 1rem; overflow: hidden;
  border-radius: 50%; background: var(--bg-alt);
  box-shadow: 0 0 0 1px var(--rule);
  transition: box-shadow .25s var(--ease), transform .25s var(--ease);
}
.agent__photo img { width: 100%; height: 100%; object-fit: cover; }
.agent a:hover .agent__photo { box-shadow: 0 0 0 3px var(--color-accent); transform: translateY(-3px); }
.agent__name { font-family: var(--font-heading); font-size: 1.0625rem; font-weight: 600; margin-bottom: .15rem; }
.agent__role { font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; color: var(--color-accent); }
.team-cta { margin-top: clamp(2rem, 1rem + 3vw, 3rem); }

/* --------------------------------------------------------------------------
   10. Contact CTA band
   -------------------------------------------------------------------------- */
.cta-band { position: relative; isolation: isolate; text-align: center; overflow: hidden; }
.cta-band__media { position: absolute; inset: 0; z-index: -2; }
.cta-band__media img { width: 100%; height: 100%; object-fit: cover; }
.cta-band::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(13,27,42,.86), rgba(66,99,120,.86));
}
.cta-band h2 { color: var(--text-inverse); }
.cta-band .eyebrow { color: var(--color-accent-light); }
.cta-band .lead { margin-inline: auto; color: rgba(255, 255, 255, .85); }
.contact-lines {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 2rem;
  margin: 1.75rem 0 2rem;
  font-size: var(--step-lead);
  color: rgba(255, 255, 255, .85);
}
.contact-lines a { color: var(--color-accent-light); text-decoration: none; border-bottom: 1px solid rgba(200,250,225,.4); }
.contact-lines a:hover { color: var(--color-inverse); border-bottom-color: var(--color-inverse); }

/* --------------------------------------------------------------------------
   11. Footer
   -------------------------------------------------------------------------- */
.site-footer { background: var(--bg-dark); color: rgba(255,255,255,.78); padding-block: clamp(3rem, 2rem + 3vw, 4.5rem) 2rem; font-size: var(--step-small); }
.site-footer a { color: rgba(255,255,255,.78); text-decoration: none; }
.site-footer a:hover { color: var(--color-accent-light); text-decoration: underline; }
.footer-grid {
  display: grid; gap: clamp(2rem, 1rem + 3vw, 3.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}
.footer-brand img { width: 76px; height: 76px; margin-bottom: 1rem; }
.footer-brand p { max-width: 32ch; }
.site-footer h3 {
  font-family: var(--font-body); font-size: .75rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--color-inverse); margin-bottom: 1rem;
}
.footer-h3--spaced { margin-top: 1.75rem; }
.footer-links li + li { margin-top: .55rem; }
.footer-contact li + li { margin-top: .55rem; }
.footer-badges { display: flex; align-items: center; gap: 1.25rem; margin-top: 1.5rem; }
/* Wider lockup than the old badge (3.4:1), so it gets a little more room. */
.footer-badges img { width: 190px; height: auto; }
.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 3.5rem);
  padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.16);
  font-size: .8125rem; color: rgba(255,255,255,.6);
}
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.site-footer .social a { color: rgba(255,255,255,.78); }
.site-footer .social { margin-top: 1.25rem; }
.site-footer .social a:hover { background: var(--color-accent); color: var(--color-inverse); }
.disclosures li + li { margin-top: .55rem; }

/* ==========================================================================
   12. Interior pages
   Added 2026-07-31 with the remaining 14 pages. Everything above this line is
   the homepage design system, unchanged. Nothing below overrides it — these
   are new components only.
   ========================================================================== */

/* --------------------------------------------------------------------------
   12.1 Compact page hero
   Same treatment as the homepage hero, roughly half the height, and the H1 is
   the page's real H1 rather than a brand statement.
   -------------------------------------------------------------------------- */
.hero--page { min-height: clamp(19rem, 44vh, 27rem); }
.hero--page .hero__inner { padding-block: clamp(3rem, 2rem + 5vw, 5.5rem); }
.hero--page .hero__title { max-width: 18ch; margin-bottom: .75rem; }
.hero--page .hero__sub { margin-bottom: 0; }
.hero--page .btn-row { margin-top: 2rem; }
/* The hero always sits on the navy scrim, so the eyebrow needs the light
   variant regardless of which section modifier the page is using. */
.hero .eyebrow { color: var(--color-accent-light); }

/* --------------------------------------------------------------------------
   12.2 Numbered process steps
   -------------------------------------------------------------------------- */
.steps {
  display: grid; gap: clamp(1.75rem, 1rem + 2.5vw, 3rem);
  max-width: 52rem; margin-inline: auto;
  counter-reset: step;
}
.step { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 1.25rem 1.5rem; }
.step__num {
  display: flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; flex: none;
  border-radius: 50%;
  background: var(--color-accent); color: var(--color-inverse);
  font-family: var(--font-heading); font-size: 1.25rem; font-weight: 700;
  line-height: 1;
}
.section--alt .step__num { background: var(--color-accent-deep); }
/* Connector line between the markers. The last step has nothing to connect to. */
.step:not(:last-child)::before {
  content: ""; position: absolute;
  left: 1.5rem; top: 3.4rem; bottom: calc(-1 * clamp(1.75rem, 1rem + 2.5vw, 3rem) - 0.4rem);
  width: 1px; background: var(--rule);
}
.section--alt .step:not(:last-child)::before { background: rgba(13, 27, 42, .18); }
.step__body { padding-top: .35rem; }
.step__body h3 { margin-bottom: .4rem; }
.step__body p { color: var(--text-muted); max-width: var(--measure); }
@media (max-width: 560px) {
  .step { grid-template-columns: 1fr; gap: .9rem; }
  .step:not(:last-child)::before { display: none; }
  .step__num { width: 2.5rem; height: 2.5rem; font-size: 1.0625rem; }
}

/* --------------------------------------------------------------------------
   12.3 Split — image beside copy, alternating down the page
   -------------------------------------------------------------------------- */
.split { display: grid; gap: clamp(2rem, 1rem + 4vw, 4rem); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--flip .split__media { order: 2; }
}
.split__media { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.split__media img { width: 100%; height: 100%; max-height: 30rem; object-fit: cover; }
.split__body h2 { margin-bottom: .7rem; }
.split__body p { color: var(--text-muted); }
.split__body .btn-row { margin-top: 1.75rem; }

/* --------------------------------------------------------------------------
   12.4 Feature list — checked bullets
   -------------------------------------------------------------------------- */
.feature-list { margin-top: 1.4rem; display: grid; gap: .65rem; }
.feature-list li { position: relative; padding-left: 1.85rem; font-size: .9375rem; }
.feature-list li::before {
  content: ""; position: absolute; left: 0; top: .45em;
  width: .55rem; height: .95rem;
  border-right: 2px solid var(--color-accent); border-bottom: 2px solid var(--color-accent);
  transform: rotate(40deg);
}
.section--alt .feature-list li::before { border-color: var(--color-accent-deep); }
.feature-list--links { font-size: var(--step-body); }

/* --------------------------------------------------------------------------
   12.5 Text tiles — a term, a one-line summary, the explanation
   -------------------------------------------------------------------------- */
.tile-grid {
  display: grid; gap: clamp(1.25rem, .75rem + 1.5vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}
.tile {
  display: flex; flex-direction: column;
  padding: clamp(1.4rem, 1rem + 1vw, 2rem);
  background: var(--bg-page); border: 1px solid var(--rule); border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.tile h3 { margin-bottom: .45rem; }
.tile__sum {
  font-size: .8125rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--color-accent-dark);
  margin-bottom: .9rem;
}
.tile p:last-child { font-size: .9375rem; color: var(--text-muted); }

/* --------------------------------------------------------------------------
   12.6 Prose — long-form rich text
   -------------------------------------------------------------------------- */
.prose { max-width: var(--measure); }
.prose p { color: var(--text-muted); }
.prose h3 { margin-top: 2rem; margin-bottom: .4rem; font-size: var(--step-h3); }
.prose h3:first-child { margin-top: 0; }
.prose .numbered {
  list-style: decimal; padding-left: 1.4rem; margin: 0 0 1.2em;
  display: grid; gap: .5rem; color: var(--text-muted);
}
.prose .numbered li::marker { color: var(--color-accent); font-weight: 600; }
.prose .fineprint {
  margin-top: 1.75rem; padding-top: 1.1rem; border-top: 1px solid var(--rule);
  font-size: .8125rem; color: var(--text-muted);
}
.section--alt .prose .fineprint { border-top-color: rgba(13, 27, 42, .18); }

/* --------------------------------------------------------------------------
   12.7 Roster — /our-team
   -------------------------------------------------------------------------- */
.roster { display: grid; gap: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }
.roster__item { display: grid; gap: clamp(1.25rem, .75rem + 2vw, 2.5rem); align-items: start; }
@media (min-width: 700px) {
  .roster__item { grid-template-columns: 15rem 1fr; }
}
.roster__photo { border-radius: 50%; overflow: hidden; max-width: 15rem; box-shadow: 0 0 0 1px var(--rule); }
.roster__photo img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.roster__name { font-size: var(--step-h2); margin-bottom: .1rem; }
.roster__name a { color: inherit; text-decoration: none; }
.roster__name a:hover { color: var(--color-accent); }
.roster__role {
  font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--color-accent); margin-bottom: 1rem;
}
.roster__body p { color: var(--text-muted); max-width: var(--measure); }
.roster__body .arrow-link { margin-top: 1.1rem; }

/* --------------------------------------------------------------------------
   12.8 Bio pages
   -------------------------------------------------------------------------- */
.backlink { font-size: var(--step-small); margin-bottom: 2rem; }
.backlink a { text-decoration: none; }
.backlink a:hover { text-decoration: underline; }
.bio { display: grid; gap: clamp(2rem, 1rem + 4vw, 4rem); align-items: start; }
@media (min-width: 900px) {
  .bio { grid-template-columns: 20rem 1fr; }
  .bio__aside { position: sticky; top: calc(var(--header-h) + 2rem); }
}
/* The 20rem cap is NOT decorative. Without it, the single-column layout below
   900px lets the portrait grow to the full content width — 839px square at a
   899px viewport, which fills the screen before you reach the name. Capping it
   here means all four bios render an identical 320px square at every viewport,
   which is the whole point of a consistent team section. */
.bio__photo {
  max-width: 20rem;
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
}
/* The four source photos have four different aspect ratios (Melanie's is
   landscape, Amanda's is tall portrait). A fixed square frame with the focal
   point above centre keeps faces in shot in all four. */
.bio__photo img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: center 28%; }
.bio__subhead {
  font-family: var(--font-body); font-size: .75rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted);
  margin: 1.75rem 0 .8rem;
}
.bio__contact { display: grid; gap: .5rem; font-size: .9375rem; }
.bio__contact a { text-decoration: none; }
.bio__contact a:hover { text-decoration: underline; }
.bio__label { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.bio__social { display: flex; flex-wrap: wrap; gap: .5rem .9rem; font-size: .9375rem; }
.bio__social a { text-decoration: none; border-bottom: 1px solid var(--rule); }
.bio__social a:hover { border-bottom-color: currentColor; }
.bio__cta { margin-top: 1.75rem; }
/* Between 620px and the 900px two-column breakpoint the page is single-column,
   which left a 320px photo with half the width empty beside it. Lay the aside
   out as photo-beside-details through that range instead. Above 900px and on
   phones it stacks, which is correct in both cases. */
@media (min-width: 620px) and (max-width: 899px) {
  .bio__aside { display: flex; gap: clamp(1.5rem, 1rem + 2vw, 2.5rem); align-items: flex-start; }
  .bio__photo { flex: none; width: 20rem; }
  .bio__meta  { flex: 1; min-width: 0; }
  .bio__meta .bio__subhead:first-child { margin-top: 0; }
}

.bio__body h1 { font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem); margin-bottom: .6rem; }
.bio__body p { max-width: var(--measure); font-size: 1.0625rem; }
.bio__idx { margin-top: clamp(3rem, 2rem + 3vw, 4.5rem); }
.bio__idx h2 { margin-bottom: .5rem; }
.bio__idx > p { color: var(--text-muted); max-width: var(--measure); }
@media (min-width: 900px) { .team-grid--3 { grid-template-columns: repeat(3, 1fr); max-width: 46rem; margin-inline: auto; } }

/* --------------------------------------------------------------------------
   12.9 Contact page + form
   -------------------------------------------------------------------------- */
.contact-layout { display: grid; gap: clamp(2rem, 1rem + 4vw, 4rem); align-items: start; }
@media (min-width: 900px) { .contact-layout { grid-template-columns: 1fr 1.15fr; } }
.contact-info h2 { margin-bottom: .6rem; }
.contact-list { margin-top: 2rem; display: grid; gap: 1.25rem; }
.contact-list li { display: grid; gap: .15rem; font-size: 1.0625rem; }
.contact-list a { text-decoration: none; }
.contact-list a:hover { text-decoration: underline; }
.contact-list__label {
  font-size: .75rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-muted);
}
.contact-social-h {
  font-family: var(--font-body); font-size: .75rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted);
  margin: 2rem 0 .8rem;
}

.form-card {
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  background: var(--bg-page); border: 1px solid var(--rule);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.form-card__h { font-size: var(--step-h3); margin-bottom: 1.5rem; }
.field { margin: 0 0 1.15rem; }
.field label {
  display: block; margin-bottom: .4rem;
  font-size: .75rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-muted);
}
.field input, .field select, .field textarea {
  width: 100%; padding: .8rem .9rem;
  font-family: var(--font-body); font-size: .9375rem; color: var(--text-body);
  background: var(--color-inverse);
  border: 1px solid rgba(13, 27, 42, .22); border-radius: var(--radius);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field textarea { resize: vertical; min-height: 8rem; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(56, 163, 165, .22);
}
.field-row { display: grid; gap: 0 1rem; }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } }
.form .btn-row { margin-top: 1.5rem; }
.form-note { margin-top: 1rem; font-size: .8125rem; color: var(--text-muted); }
/* Honeypot. Off-screen rather than display:none — some bots skip hidden
   fields, and this way assistive tech still gets a labelled control. */
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --------------------------------------------------------------------------
   12.10 Third-party embed slot (ShowingNew IDX)
   -------------------------------------------------------------------------- */
.embed {
  display: grid; place-items: center;
  min-height: 22rem; padding: clamp(2rem, 1rem + 3vw, 3.5rem);
  background: var(--bg-alt); border-radius: var(--radius);
}
.embed--inline { min-height: 0; margin-top: 1.5rem; }
.embed iframe { width: 100%; border: 0; }
.embed__fallback { text-align: center; max-width: 34rem; }
.embed__lead { font-size: var(--step-lead); color: var(--text-muted); margin-bottom: 1.75rem; }
.embed .btn--ghost { --btn-bd: rgba(13, 27, 42, .2); }

/* --------------------------------------------------------------------------
   12.11 Narrow single-column pages (thank-you, 404)
   -------------------------------------------------------------------------- */
.narrow-page { min-height: 52vh; display: grid; align-content: center; }
.narrow-page .wrap { max-width: 44rem; }
.narrow-page .btn-row { margin-top: 2rem; }
.narrow-page .feature-list { margin-block: 1.75rem; }
.form-error {
  margin-bottom: 1.5rem; padding: .9rem 1.1rem;
  background: #FDECEC; border-left: 3px solid #B3261E; border-radius: var(--radius);
  font-size: .9375rem; color: #6B1710;
}
.form-error a { color: inherit; }