/* ===== FONTS =====
   Self-hosted from R2 rather than fetched from Google. Three reasons, in order
   of how much they cost: a third-party font host is a second DNS lookup, a
   second TLS handshake and a dependency whose downtime is invisible to us; the
   files are served with max-age=31536000, immutable, which Google caps far
   lower; and nothing about a visitor is announced to a third party.

   These are the same subsetted WOFF2 files Google serves - same unicode-range
   splits, so a page still downloads only the latin range it needs - copied to
   c21-branding/fonts/ and served from our own domain. Regenerate them with the
   manifest rather than editing by hand: the file names encode style, weight
   and subset, and a mismatch here fails silently as a fallback face.
   ================= */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://library.c21masters.com/c21-branding/fonts/poppins/poppins-normal-300-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://library.c21masters.com/c21-branding/fonts/poppins/poppins-normal-300-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://library.c21masters.com/c21-branding/fonts/poppins/poppins-normal-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://library.c21masters.com/c21-branding/fonts/poppins/poppins-normal-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://library.c21masters.com/c21-branding/fonts/poppins/poppins-normal-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://library.c21masters.com/c21-branding/fonts/poppins/poppins-normal-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://library.c21masters.com/c21-branding/fonts/poppins/poppins-normal-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://library.c21masters.com/c21-branding/fonts/poppins/poppins-normal-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://library.c21masters.com/c21-branding/fonts/poppins/poppins-normal-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://library.c21masters.com/c21-branding/fonts/poppins/poppins-normal-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(https://library.c21masters.com/c21-branding/fonts/poppins/poppins-normal-800-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(https://library.c21masters.com/c21-branding/fonts/poppins/poppins-normal-800-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* =====================================================================
   MERIDIAN — Century 21 Masters team template
   Mirror of https://library.c21masters.com/global-css/meridian.css
   --------------------------------------------------------------------
   Converted from the "Northline Realty" source. Pure Poppins, a single
   emerald accent, generous whitespace, medium-rounded cards. Against its
   siblings: Vanguard is Montserrat black-and-gold with sharp 0px corners,
   Harbor is Fraunces gold-and-graphite with pill buttons.

   A TEAM template: agentInfo is the team leader and the roster comes from
   agent.team.members. See section 3c of ADDING-A-TEMPLATE.md.

   The source was branded "Northline Realty", a fictional collective in
   Austin, Texas. The brand is Century 21 Masters now, the wordmark is the
   team's own name, and no copy names a state the record does not supply.

   Dropped with the markup they styled:

     .stats, .stat        the count-up band. agent.json holds no such
                          figures, and this ships to every team - inventing
                          them would publish one false claim on all of them
     .logostrip           a row of invented recognition logos
     .listings, .listing  three invented listings, now the Ylopo widget
     .quotes, .quote      hardcoded testimonials, now the reviews slot
     .faq*                no converted template carries an FAQ
     .form-*              the form is injected and brings its own CSS
     .contact-map         a hardcoded map of an invented address
     .hero-card,
     .hero-trust          the floating avatar cluster and the rating row,
                          both asserting numbers we do not have
     .site-footer,
     .footer-*            footer.js injects the footer and defines its own
                          .footer-bottom; these would restyle it, and it
                          carries the legal disclaimers

   Icons came from unpkg on every page. The ones this template uses are
   inlined in global-js/meridian.js instead.
   ===================================================================== */

/* ==========================================================================
   NORTHLINE REALTY — a modern agent collective
   Design language: MODERN · CLEAN · PROFESSIONAL
   Pure Poppins typography · emerald accent · neutral grounds · rounded-soft
   Deliberately NOT gold-luxury, NOT serif-editorial, NOT fintech-blue.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  --brand: #0F7A56;
  --brand-strong: #0B5E42;
  --brand-tint: #E8F3EE;
  --brand-tint-2: #D6EBE1;

  --ink: #14211C;          /* dark sections / deep brand near-black-green */
  --ink-2: #1E2E27;
  --heading: #14211B;
  --text: #34413A;
  --muted: #6E7B74;

  --bg: #FFFFFF;
  --surface: #F5F7F5;
  --surface-2: #EEF2EF;
  --border: #E4EAE6;

  --on-dark: #EAF1ED;
  --on-dark-muted: rgba(234, 241, 237, 0.66);
  --on-dark-border: rgba(234, 241, 237, 0.14);

  --star: #E8B04B;
  --success: #0F7A56;
  --error: #C2453F;

  --font: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --t-display: clamp(2.6rem, 1.55rem + 4.6vw, 4.75rem);
  --t-h1: clamp(2.1rem, 1.5rem + 2.9vw, 3.5rem);
  --t-h2: clamp(1.75rem, 1.3rem + 2.1vw, 2.75rem);
  --t-h3: clamp(1.3rem, 1.1rem + 0.9vw, 1.75rem);
  --t-h4: 1.25rem;
  --t-lead: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  --t-body: 1rem;
  --t-small: 0.875rem;
  --t-label: 0.75rem;

  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem;
  --sp-16: 4rem; --sp-20: 5rem; --sp-24: 6rem;

  --section: clamp(4rem, 3rem + 5vw, 7.5rem);
  --wrap: 75rem;
  --pad-x: clamp(1.25rem, 4vw, 2.5rem);

  --r-lg: 22px;
  --r: 16px;
  --r-sm: 12px;
  --r-btn: 12px;
  --pill: 999px;

  --shadow-sm: 0 2px 8px rgba(20, 33, 28, 0.05);
  --shadow: 0 16px 40px -18px rgba(20, 33, 28, 0.20);
  --shadow-lg: 0 34px 70px -28px rgba(20, 33, 28, 0.30);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --fast: 180ms;
  --med: 400ms;
  --slow: 800ms;
}
/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.7;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; border: none; background: none; cursor: pointer; }
::selection { background: var(--brand); color: #fff; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; }
.skip-link {
  position: absolute; top: -100%; left: var(--sp-4); z-index: 200;
  background: var(--ink); color: var(--on-dark); padding: var(--sp-3) var(--sp-6);
  border-radius: var(--r-sm); font-size: var(--t-small); font-weight: 500;
}
.skip-link:focus { top: var(--sp-4); }
/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 { font-family: var(--font); color: var(--heading); line-height: 1.14; font-weight: 600; letter-spacing: -0.02em; }
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); font-weight: 600; }
h4 { font-size: var(--t-h4); font-weight: 600; }
.display { font-size: var(--t-display); font-weight: 700; line-height: 1.05; letter-spacing: -0.03em; }
.lead { font-size: var(--t-lead); color: var(--muted); line-height: 1.75; }
.text-brand { color: var(--brand); }
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--t-label); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--brand);
  background: var(--brand-tint); padding: 0.4rem 0.85rem; border-radius: var(--pill);
  margin-bottom: var(--sp-6);
}
.eyebrow svg { width: 0.9rem; height: 0.9rem; }
.eyebrow--plain { background: none; padding: 0; color: var(--brand); }
.section--dark .eyebrow { background: var(--on-dark-border); color: #fff; }
/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
.container { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad-x); }
.section { padding-block: var(--section); }
.section--surface { background: var(--surface); }
.section--tint { background: var(--brand-tint); }
.section--dark { background: var(--ink); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--on-dark); }
.section--dark p { color: var(--on-dark-muted); }
.section-head { max-width: 44rem; margin-bottom: clamp(2.5rem, 2rem + 3vw, 4rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { margin-top: var(--sp-4); color: var(--muted); font-size: var(--t-lead); }
.section--dark .section-head p { color: var(--on-dark-muted); }
/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  font-weight: 600; font-size: 0.9375rem; letter-spacing: -0.01em;
  padding: 0.9rem 1.6rem; border-radius: var(--r-btn); border: 1.5px solid transparent;
  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease),
              border-color var(--fast) var(--ease), transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.btn svg { width: 1.05rem; height: 1.05rem; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--brand { background: var(--brand); color: #fff; }
.btn--brand:hover { background: var(--brand-strong); box-shadow: 0 12px 24px -10px rgba(15, 122, 86, 0.6); }
.btn--dark { background: var(--ink); color: var(--on-dark); }
.btn--dark:hover { background: var(--ink-2); }
.btn--outline { border-color: var(--border); color: var(--heading); background: var(--bg); }
.btn--outline:hover { border-color: var(--brand); color: var(--brand); }
.btn--ghost-light { border-color: var(--on-dark-border); color: var(--on-dark); }
.btn--ghost-light:hover { border-color: var(--on-dark); background: rgba(234,241,237,0.06); }
.textlink {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-weight: 600; color: var(--brand); font-size: 0.9375rem;
}
.textlink svg { width: 1rem; height: 1rem; transition: transform var(--med) var(--ease); }
.textlink:hover svg { transform: translateX(4px); }
/* --------------------------------------------------------------------------
   6. Header / nav
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,0.9);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--med) var(--ease), box-shadow var(--med) var(--ease);
}
.site-header.is-scrolled { border-color: var(--border); box-shadow: var(--shadow-sm); }
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-8); height: 4.75rem; }
.brand { display: flex; align-items: center; gap: 0.6rem; }
.brand__mark {
  display: grid; place-items: center; width: 2.1rem; height: 2.1rem;
  background: var(--brand); color: #fff; border-radius: 8px;
}
.brand__mark svg { width: 1.15rem; height: 1.15rem; }
.brand__name { font-weight: 700; font-size: 1.2rem; letter-spacing: -0.02em; color: var(--heading); }
.nav { display: flex; align-items: center; gap: clamp(1.25rem, 2.5vw, 2.25rem); }
.nav-list { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.9rem); }
.nav-list a { font-size: 0.9375rem; font-weight: 500; color: var(--text); transition: color var(--fast) var(--ease); }
.nav-list a:hover { color: var(--brand); }
.nav-list a[aria-current="page"] { color: var(--brand); font-weight: 600; }
.nav-cta { padding: 0.65rem 1.3rem; }
.nav-toggle { display: none; width: 2.75rem; height: 2.75rem; align-items: center; justify-content: center; color: var(--heading); border-radius: var(--r-sm); }
.nav-toggle svg { width: 1.5rem; height: 1.5rem; }
.nav-toggle .icon-close { display: none; }
.nav-open .nav-toggle .icon-menu { display: none; }
.nav-open .nav-toggle .icon-close { display: block; }
@media (max-width: 61.99em) {/* backdrop-filter turns the header into a containing block for fixed children,
     which would trap the off-canvas menu inside the header bar — disable on mobile */
  .site-header { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--bg); }
.nav-toggle { display: inline-flex; background: var(--surface); }
.nav {
    position: fixed; inset: 0; top: 4.75rem; flex-direction: column; justify-content: flex-start;
    align-items: stretch; gap: var(--sp-6); padding: var(--sp-8) var(--pad-x);
    background: var(--bg); transform: translateY(-110%); visibility: hidden;
    transition: transform var(--med) var(--ease); border-top: 1px solid var(--border);
  }
.nav-open .nav { transform: translateY(0); visibility: visible; }
.nav-list { flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
.nav-list a { font-size: 1.15rem; }
.nav-cta { align-self: flex-start; }
body.nav-open { overflow: hidden; }
}
/* --------------------------------------------------------------------------
   7. Hero — asymmetric, image + floating stat card
   -------------------------------------------------------------------------- */
.hero { padding-block: clamp(2.5rem, 2rem + 3vw, 5rem) clamp(3rem, 2rem + 4vw, 6rem); overflow: hidden; }
.hero .container { display: grid; gap: clamp(2.5rem, 2rem + 4vw, 4.5rem); align-items: center; }
@media (min-width: 62em) {.hero .container { grid-template-columns: 1.05fr 1fr; }
}
.hero-copy .display { margin-bottom: var(--sp-6); }
.hero-copy .display em { font-style: normal; color: var(--brand); }
.hero-copy > p { font-size: var(--t-lead); color: var(--muted); max-width: 34rem; margin-bottom: var(--sp-8); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.hero-visual { position: relative; }
.hero-visual__img { position: relative; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); }
.hero-visual__img img { width: 100%; aspect-ratio: 4 / 4.4; object-fit: cover; }
@media (min-width: 62em) {.hero-visual__img img { aspect-ratio: 4 / 4.8; }
}
.hero-badge {
  position: absolute; top: var(--sp-4); right: var(--sp-4);
  background: rgba(255,255,255,0.92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-radius: var(--pill); padding: 0.5rem 0.9rem; display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--t-small); font-weight: 600; color: var(--heading); box-shadow: var(--shadow-sm);
}
.hero-badge svg { width: 1rem; height: 1rem; color: var(--brand); }
/* --------------------------------------------------------------------------
   10. Feature split (about teaser / marketing)
   -------------------------------------------------------------------------- */
.split { display: grid; gap: clamp(2.5rem, 2rem + 4vw, 5rem); align-items: center; }
@media (min-width: 62em) {.split { grid-template-columns: 1fr 1fr; }
.split--reverse .split__media { order: 2; }
}
.split__media { position: relative; }
.split__media img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--shadow); }
.split__media--tall img { aspect-ratio: 4 / 4.6; }
.split__badge {
  position: absolute; bottom: var(--sp-6); left: calc(-1 * var(--sp-4));
  background: var(--brand); color: #fff; border-radius: var(--r); padding: var(--sp-4) var(--sp-6);
  box-shadow: var(--shadow); max-width: 15rem;
}
.split__badge strong { display: block; font-size: 1.75rem; font-weight: 700; line-height: 1; }
.split__badge span { font-size: var(--t-small); opacity: 0.9; }
@media (max-width: 33.99em) {.split__badge { left: var(--sp-3); right: auto; }
}
.split__body h2 { margin-bottom: var(--sp-4); }
.split__body > p { color: var(--muted); margin-bottom: var(--sp-4); }
.split__body .btn, .split__body .textlink { margin-top: var(--sp-4); }
.ticklist { display: grid; gap: var(--sp-3); margin-block: var(--sp-6); }
.ticklist li { display: flex; align-items: flex-start; gap: var(--sp-3); color: var(--text); }
.ticklist svg { width: 1.35rem; height: 1.35rem; color: var(--brand); background: var(--brand-tint); border-radius: 50%; padding: 3px; flex-shrink: 0; }
/* --------------------------------------------------------------------------
   11. Service cards
   -------------------------------------------------------------------------- */
.card-grid { display: grid; gap: var(--sp-6); grid-template-columns: 1fr; }
@media (min-width: 48em) {.card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 62em) {.card-grid--3 { grid-template-columns: repeat(3, 1fr); }
}
.scard {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--sp-8); transition: transform var(--med) var(--ease), box-shadow var(--med) var(--ease), border-color var(--med) var(--ease);
}
.scard:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: transparent; }
.scard__icon { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: var(--r-sm); background: var(--brand-tint); color: var(--brand); margin-bottom: var(--sp-6); }
.scard__icon svg { width: 1.5rem; height: 1.5rem; }
.scard h3 { margin-bottom: var(--sp-3); }
.scard p { color: var(--muted); font-size: var(--t-small); line-height: 1.75; }
.scard .textlink { margin-top: var(--sp-6); }
.section-foot { margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); text-align: center; }
/* --------------------------------------------------------------------------
   13. Team
   -------------------------------------------------------------------------- */
.team { display: grid; gap: var(--sp-6); grid-template-columns: 1fr; }
@media (min-width: 34em) {.team { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 62em) {.team { grid-template-columns: repeat(4, 1fr); }
}
.member { text-align: center; }
.member__photo { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 3 / 3.4; margin-bottom: var(--sp-4); background: var(--surface); }
.member__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--med) var(--ease); }
.member:hover .member__photo img { transform: scale(1.04); }
.member__socials { position: absolute; inset-inline: 0; bottom: 0; display: flex; justify-content: center; gap: var(--sp-2); padding: var(--sp-4); background: linear-gradient(to top, rgba(20,33,28,0.7), transparent); opacity: 0; transform: translateY(8px); transition: opacity var(--med) var(--ease), transform var(--med) var(--ease); }
.member:hover .member__socials { opacity: 1; transform: translateY(0); }
.member__socials a { width: 2rem; height: 2rem; display: grid; place-items: center; background: rgba(255,255,255,0.92); border-radius: 50%; color: var(--ink); }
.member__socials svg { width: 0.95rem; height: 0.95rem; }
.member h3 { font-size: 1.2rem; }
.member p { font-size: var(--t-small); color: var(--brand); font-weight: 600; margin-top: 2px; }
/* --------------------------------------------------------------------------
   14. Process
   -------------------------------------------------------------------------- */
.steps { display: grid; gap: var(--sp-8); grid-template-columns: 1fr; counter-reset: step; }
@media (min-width: 48em) {.steps { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 62em) {.steps--4 { grid-template-columns: repeat(4, 1fr); }
.steps--3 { grid-template-columns: repeat(3, 1fr); }
}
.step { counter-increment: step; }
.step__n { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--brand-tint); color: var(--brand); font-weight: 700; font-size: 1.15rem; margin-bottom: var(--sp-4); }
.step__n::before { content: counter(step, decimal-leading-zero); }
.section--dark .step__n { background: var(--on-dark-border); color: #fff; }
.step h3 { font-size: 1.2rem; margin-bottom: var(--sp-2); }
.step p { color: var(--muted); font-size: var(--t-small); line-height: 1.7; }
.section--dark .step p { color: var(--on-dark-muted); }
/* --------------------------------------------------------------------------
   16. CTA
   -------------------------------------------------------------------------- */
.cta { padding-block: var(--section); }
.cta__inner {
  background: var(--ink); color: var(--on-dark); border-radius: var(--r-lg);
  padding: clamp(2.5rem, 2rem + 4vw, 5rem); text-align: center; position: relative; overflow: hidden;
}
.cta__inner::before { content: ""; position: absolute; width: 24rem; height: 24rem; border-radius: 50%; background: radial-gradient(circle, rgba(15,122,86,0.5), transparent 65%); top: -8rem; right: -6rem; pointer-events: none; }
.cta__inner h2 { color: var(--on-dark); margin-bottom: var(--sp-4); position: relative; }
.cta__inner p { color: var(--on-dark-muted); font-size: var(--t-lead); max-width: 40rem; margin: 0 auto var(--sp-8); position: relative; }
.cta__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; position: relative; }
/* --------------------------------------------------------------------------
   17. Page hero (interior pages)
   -------------------------------------------------------------------------- */
.page-hero { background: var(--surface); border-bottom: 1px solid var(--border); }
.page-hero .container { padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem) clamp(2.5rem, 2rem + 2vw, 4rem); max-width: 52rem; text-align: center; }
.page-hero .eyebrow { margin-inline: auto; }
.page-hero h1 { margin-bottom: var(--sp-4); }
.page-hero p { color: var(--muted); font-size: var(--t-lead); max-width: 42rem; margin-inline: auto; }
/* --------------------------------------------------------------------------
   20. Contact
   -------------------------------------------------------------------------- */
.contact-layout { display: grid; gap: clamp(2.5rem, 2rem + 3vw, 4rem); }
@media (min-width: 62em) {.contact-layout { grid-template-columns: 5fr 7fr; align-items: start; }
}
.contact-info { display: flex; flex-direction: column; gap: var(--sp-6); }
.contact-item { display: flex; gap: var(--sp-4); align-items: flex-start; }
.contact-item__icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: var(--r-sm); background: var(--brand-tint); color: var(--brand); flex-shrink: 0; }
.contact-item__icon svg { width: 1.3rem; height: 1.3rem; }
.contact-item h3 { font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); font-weight: 600; margin-bottom: 2px; }
.contact-item p, .contact-item a { font-size: 1.05rem; color: var(--heading); font-weight: 500; }
.contact-item a:hover { color: var(--brand); }
.contact-panel { background: var(--surface); border-radius: var(--r-lg); padding: clamp(1.75rem, 1.4rem + 2vw, 2.75rem); }
.contact-panel h2 { margin-bottom: var(--sp-2); }
.contact-panel > p { color: var(--muted); font-size: var(--t-small); margin-bottom: var(--sp-6); }
/* --------------------------------------------------------------------------
   22. Reveal
   -------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease); transition-delay: var(--reveal-delay, 0ms); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.hero-copy > *, .hero-visual { animation: rise 0.9s var(--ease) both; }
.hero-copy > *:nth-child(1) { animation-delay: 0.05s; }
.hero-copy > *:nth-child(2) { animation-delay: 0.13s; }
.hero-copy > *:nth-child(3) { animation-delay: 0.21s; }
.hero-copy > *:nth-child(4) { animation-delay: 0.29s; }
.hero-copy > *:nth-child(5) { animation-delay: 0.37s; }
.hero-visual { animation-delay: 0.2s; }
@keyframes rise {from { opacity: 0; transform: translateY(26px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {html { scroll-behavior: auto; }
*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
.reveal { opacity: 1; transform: none; }
}

/* =====================================================================
   Priority+ navigation. See global-js/nav-fit.js and section 3a of
   ADDING-A-TEMPLATE.md. The source collapsed the nav at a fixed width;
   this measures the row instead, because the wordmark is the team's name
   and no single pixel value is right for every team.
   ===================================================================== */
.nav-panel {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 860;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  width: min(85vw, 20rem);
  padding: var(--sp-6);
  overflow-y: auto;
  background: var(--bg);
  box-shadow: -30px 0 60px -30px rgba(20, 33, 28, .35);
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.16, 1, .3, 1);
  /* Off-screen rather than hidden, so it can animate - and visibility is
     what keeps its links out of the tab order while it is closed. */
  visibility: hidden;
}
.nav-panel.is-open { transform: translateX(0); visibility: visible; }
.nav-panel .nav-list { flex-direction: column; align-items: stretch; gap: var(--sp-1); width: 100%; }
.nav-panel .nav-list a { display: block; padding: var(--sp-3) var(--sp-4); font-size: var(--t-body); }
.nav-panel .nav-cta { margin-top: auto; text-align: center; }
.nav-panel .nav-sub { padding-left: var(--sp-4); }
.nav-panel .nav-caret { display: none; }
body.nav-open { overflow: hidden; }

/* nav-fit.js measures each row child to decide what fits. A flex item that
   may shrink reports the width it was squeezed to rather than the one it
   needs, so the row looks like it fits while the CTA overlaps the last
   link. Refusing to shrink is what makes the measurement true. */
.site-header .container > .nav,
.site-header .container > .brand { flex: 0 0 auto; }

.nav .nav-list { display: flex; align-items: center; gap: var(--sp-6); }
.nav .nav-list > li { position: relative; }
.nav .nav-list a { white-space: nowrap; }
.nav .nav-caret {
  display: inline-block;
  width: .38em; height: .38em;
  margin-left: .4em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-.1em);
}
/* Opens on hover AND focus-within, so it is reachable from the keyboard
   without a script. */
.nav .nav-sub {
  position: absolute;
  top: 100%; left: 0;
  min-width: 12rem;
  padding: var(--sp-2) 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  box-shadow: 0 18px 40px -20px rgba(20, 33, 28, .28);
  opacity: 0; visibility: hidden;
  transform: translateY(.35rem);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.nav .nav-group:hover .nav-sub,
.nav .nav-group:focus-within .nav-sub { opacity: 1; visibility: visible; transform: none; }
.nav .nav-sub a { display: block; padding: var(--sp-2) var(--sp-4); }

/* The burger shows only when the panel holds something. nav-fit.js sets
   this to "false" when everything fits inline; ABSENT means visible, which
   is the state a phone loads in with every item still in the panel. */
.nav-toggle { display: inline-flex; }
[data-nav-overflow="false"] .nav-toggle { display: none; }
.nav-toggle .icon-close { display: none; }
body.nav-open .nav-toggle .icon-menu { display: none; }
body.nav-open .nav-toggle .icon-close { display: block; }

@media (prefers-reduced-motion: reduce) {
  .nav-panel, .nav .nav-sub { transition: none; }
}