/* ============================================
   North River Accounting and Tax Services
   Main Stylesheet — css/style.css

   TABLE OF CONTENTS:
   1.  Variables (design tokens)
   2.  Reset & Base
   3.  Navigation
   4.  Mobile Drawer
   5.  Hero
   6.  Trust Bar
   7.  Section Layout
   8.  Service Cards
   9.  About Split
   10. CTA Banner
   11. Team Cards
   12. Page Headers (inner pages)
   13. Service Detail Pages
   14. Contact Page
   15. Footer
   16. Utilities & Animations
   17. Responsive
   ============================================ */


/* ===================================================
   1. VARIABLES — design tokens, edit these to retheme
   =================================================== */
:root {
  /* Brand colors — pulled from the logo */
  --green:       #1B4D35;
  --green-dark:  #122E20;
  --green-mid:   #245E40;
  --gold:        #C9A55C;
  --gold-light:  #E8D5A0;
  --gold-pale:   #F5EDD8;

  /* Surfaces */
  --bg:   #FFFFFF;   /* page background */
  --s1:   #F0F5F2;   /* card / lifted surface */
  --s2:   #E4EDE8;   /* secondary surface */

  /* Borders */
  --rule: #D5E0D9;   /* default border */
  --hi:   #C9A55C;   /* highlighted / accent border */

  /* Text */
  --text: #1A1A18;   /* primary headings */
  --t2:   #3C3C3A;   /* body copy */
  --t3:   #6B7280;   /* muted / label text */

  /* Functional aliases */
  --primary:   var(--green);
  --secondary: var(--gold);
  --white:     #FFFFFF;

  /* Spacing */
  --px:      clamp(20px, 6vw, 96px);    /* horizontal page padding */
  --section: clamp(64px, 8vw, 104px);  /* vertical section spacing */

  /* Typography */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;

  /* Misc */
  --radius:     6px;
  --radius-lg:  12px;
  --shadow-sm:  0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md:  0 8px 32px rgba(0, 0, 0, 0.10);
  --shadow-lg:  0 20px 60px rgba(0, 0, 0, 0.15);
  --transition: 240ms ease;
}


/* ===================================================
   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-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--t2);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

address {
  font-style: normal;
}

/* Focus styles for accessibility */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Container — centered, padded */
.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--px);
}


/* ===================================================
   3. NAVIGATION
   =================================================== */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900;
  background-color: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 var(--rule);
  transition: background-color var(--transition), box-shadow var(--transition);
}

/* Homepage hero: nav starts transparent, turns solid on scroll */
.hero-page .site-nav {
  background-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

.site-nav.is-scrolled {
  background-color: rgba(255, 255, 255, 0.97) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  box-shadow: 0 1px 0 var(--rule), 0 2px 12px rgba(0, 0, 0, 0.06) !important;
}

/* On dark hero pages, nav starts transparent */
.hero-page .site-nav:not(.is-scrolled) .nav-link,
.hero-page .site-nav:not(.is-scrolled) .nav-logo span {
  color: rgba(255, 255, 255, 0.92);
}

.hero-page .site-nav:not(.is-scrolled) .nav-hamburger span {
  background-color: rgba(255, 255, 255, 0.9);
}

.nav-inner {
  display: flex;
  align-items: center;
  gap: 32px;
  height: 72px;
  padding: 0 var(--px);
  max-width: 1340px;
  margin: 0 auto;
}

.nav-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-right: auto;
}

/* ---- Wordmark (text logo) ---- */
.nav-wordmark,
.footer-wordmark {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  gap: 2px;
}

.wm-name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--green);
  letter-spacing: -0.01em;
  transition: color var(--transition);
}

.wm-sub {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}

/* On dark hero, nav wordmark becomes white */
.hero-page .site-nav:not(.is-scrolled) .wm-name {
  color: rgba(255, 255, 255, 0.96);
}
.hero-page .site-nav:not(.is-scrolled) .wm-sub {
  color: var(--gold-light);
}

/* Footer wordmark adjustments */
.site-footer .wm-name {
  color: var(--white);
  font-size: 17px;
}
.site-footer .wm-sub {
  color: rgba(184, 150, 78, 0.75);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav-link {
  font-size: 14px;
  font-weight: 400;
  color: var(--t2);
  letter-spacing: 0.02em;
  transition: color var(--transition);
  padding: 4px 0;
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--gold);
  transition: width var(--transition);
}

.nav-link:hover,
.nav-link.is-active {
  color: var(--green);
}

.nav-link:hover::after,
.nav-link.is-active::after {
  width: 100%;
}

/* Client portal CTA button */
.btn-portal {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 20px;
  background-color: var(--green);
  color: var(--white);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 40px;
  white-space: nowrap;
  transition: background-color var(--transition), transform var(--transition);
  flex-shrink: 0;
}

.btn-portal:hover {
  background-color: var(--green-mid);
  transform: translateY(-1px);
}

/* Hamburger button — mobile only */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  flex-shrink: 0;
}

.nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background-color: var(--green);
  border-radius: 2px;
  transition: var(--transition);
}


/* ===================================================
   4. MOBILE DRAWER
   =================================================== */
.nav-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(18, 46, 32, 0.5);
  backdrop-filter: blur(2px);
  z-index: 910;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition);
}

.nav-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(340px, 88vw);
  background-color: var(--bg);
  z-index: 920;
  padding: 24px 32px 40px;
  transform: translateX(100%);
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--rule);
}

.nav-drawer.is-open {
  transform: translateX(0);
}

.drawer-close {
  align-self: flex-end;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--rule);
  border-radius: 50%;
  font-size: 20px;
  color: var(--t2);
  cursor: pointer;
  margin-bottom: 32px;
  transition: border-color var(--transition), color var(--transition);
}

.drawer-close:hover {
  border-color: var(--gold);
  color: var(--green);
}

.drawer-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.drawer-links a {
  font-size: 18px;
  font-family: var(--font-display);
  color: var(--text);
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
  transition: color var(--transition), padding-left var(--transition);
}

.drawer-links a:hover {
  color: var(--green);
  padding-left: 8px;
}

.drawer-portal {
  margin-top: 28px;
  padding: 14px 24px !important;
  background-color: var(--green);
  color: var(--white) !important;
  text-align: center;
  border-radius: 40px;
  border-bottom: none !important;
  font-size: 14px !important;
  font-family: var(--font-body) !important;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.drawer-portal:hover {
  background-color: var(--green-mid);
  padding-left: 24px !important;
}


/* ===================================================
   5. HERO
   =================================================== */
.hero {
  position: relative;
  min-height: 92svh;
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #122E20 0%, #1B4D35 50%, #1B4D35 100%);
  overflow: hidden;
}

/* Subtle diagonal light overlay */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse at 20% 80%, rgba(184, 150, 78, 0.08) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 15%, rgba(255, 255, 255, 0.04) 0%, transparent 50%);
  z-index: 1;
}

/* Gold bottom border accent */
.hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  z-index: 3;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Compass rose watermark */
.compass-watermark {
  position: absolute;
  right: -5%;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(360px, 50vw, 700px);
  height: clamp(360px, 50vw, 700px);
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='150' cy='150' r='140' fill='none' stroke='%23C9A55C' stroke-width='1'/%3E%3Ccircle cx='150' cy='150' r='100' fill='none' stroke='%23C9A55C' stroke-width='0.5'/%3E%3Ccircle cx='150' cy='150' r='8' fill='%23C9A55C'/%3E%3Cpolygon points='150,10 142,150 158,150' fill='%23C9A55C'/%3E%3Cpolygon points='150,290 142,150 158,150' fill='%23C9A55C' opacity='0.7'/%3E%3Cpolygon points='290,150 150,142 150,158' fill='%23C9A55C' opacity='0.7'/%3E%3Cpolygon points='10,150 150,142 150,158' fill='%23C9A55C' opacity='0.7'/%3E%3Cpolygon points='248,52 150,150 154,146' fill='%23C9A55C' opacity='0.4'/%3E%3Cpolygon points='248,248 150,150 146,154' fill='%23C9A55C' opacity='0.4'/%3E%3Cpolygon points='52,248 150,150 154,154' fill='%23C9A55C' opacity='0.4'/%3E%3Cpolygon points='52,52 150,150 146,146' fill='%23C9A55C' opacity='0.4'/%3E%3Ctext x='150' y='32' text-anchor='middle' font-size='16' font-family='serif' fill='%23C9A55C' letter-spacing='2'%3EN%3C/text%3E%3Ctext x='150' y='278' text-anchor='middle' font-size='16' font-family='serif' fill='%23C9A55C' letter-spacing='2'%3ES%3C/text%3E%3Ctext x='278' y='155' text-anchor='middle' font-size='16' font-family='serif' fill='%23C9A55C' letter-spacing='2'%3EE%3C/text%3E%3Ctext x='22' y='155' text-anchor='middle' font-size='16' font-family='serif' fill='%23C9A55C' letter-spacing='2'%3EW%3C/text%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 1180px;
  margin: 0 auto;
  padding: 120px var(--px) 80px;
  width: 100%;
}

.hero-eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.hero-eyebrow::before {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  background-color: var(--gold);
}

.hero-headline {
  font-family: var(--font-display);
  font-size: clamp(44px, 6.5vw, 88px);
  font-weight: 700;
  line-height: 1.08;
  color: var(--white);
  letter-spacing: -0.02em;
  margin-bottom: 28px;
  max-width: 700px;
}

.hero-headline em {
  font-style: italic;
  color: var(--gold-light);
}

.hero-sub {
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.78);
  max-width: 520px;
  margin-bottom: 44px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 52px;
}

.hero-contact-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 32px;
  border-top: 1px solid rgba(201, 165, 92, 0.3);
}

.hero-phone,
.hero-email {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.75);
  transition: color var(--transition);
}

.hero-phone:hover,
.hero-email:hover {
  color: var(--gold-light);
}

.hero-contact-bar .divider {
  color: rgba(201, 165, 92, 0.4);
}


/* ===================================================
   6. TRUST BAR
   =================================================== */
.trust-bar {
  background-color: var(--s1);
  border-bottom: 1px solid var(--rule);
}

.trust-items {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  padding: 20px 0;
}

.trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 32px;
  gap: 2px;
}

.trust-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--t3);
}

.trust-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--green);
  text-align: center;
}

.trust-sep {
  width: 1px;
  height: 36px;
  background-color: var(--rule);
}


/* ===================================================
   7. SECTION LAYOUT
   =================================================== */
.section {
  padding: var(--section) 0;
}

.section-header {
  max-width: 680px;
  margin-bottom: 56px;
}

.section-header.centered {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.section-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-eyebrow::before {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  background-color: var(--gold);
}

.section-header.centered .section-eyebrow {
  justify-content: center;
}

.section-header.centered .section-eyebrow::before {
  display: none;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 700;
  line-height: 1.15;
  color: var(--text);
  letter-spacing: -0.01em;
  margin-bottom: 16px;
}

.section-desc {
  font-size: 17px;
  line-height: 1.75;
  color: var(--t3);
}

.section.bg-surface {
  background-color: var(--s1);
}

.section.bg-forest {
  background-color: var(--green-dark);
}


/* ===================================================
   8. SERVICE CARDS
   =================================================== */
.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.service-card {
  display: flex;
  flex-direction: column;
  padding: 36px;
  background-color: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
  cursor: pointer;
}

.service-card:hover {
  border-color: var(--gold);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.service-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--s1);
  border-radius: var(--radius);
  color: var(--gold);
  margin-bottom: 20px;
  flex-shrink: 0;
}

.service-card h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 12px;
  line-height: 1.3;
}

.service-card p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--t2);
  flex: 1;
  margin-bottom: 24px;
}

.card-link {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: gap var(--transition), color var(--transition);
}

.card-link::after {
  content: '\2192'; /* right arrow */
  font-size: 14px;
  transition: transform var(--transition);
}

.service-card:hover .card-link {
  color: var(--gold);
  gap: 10px;
}

.service-card:hover .card-link::after {
  transform: translateX(3px);
}


/* ===================================================
   9. ABOUT SPLIT
   =================================================== */
.about-highlight {
  background-color: var(--s1);
}

.about-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}

.about-img-frame {
  position: relative;
}

/* Decorative offset border */
.about-img-frame::before {
  content: '';
  position: absolute;
  top: -16px;
  left: -16px;
  right: 16px;
  bottom: 16px;
  border: 2px solid var(--gold);
  border-radius: var(--radius-lg);
  z-index: 0;
}

.about-img-placeholder {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-top: 115%;
  background-color: var(--s2);
  border-radius: var(--radius-lg);
  background-image: linear-gradient(135deg, var(--green-dark) 0%, var(--green-mid) 60%, var(--green) 100%);
  overflow: hidden;
}

/* Compass watermark inside the image placeholder */
.about-img-placeholder::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='150' cy='150' r='120' fill='none' stroke='%23C9A55C' stroke-width='1'/%3E%3Ccircle cx='150' cy='150' r='8' fill='%23C9A55C' opacity='0.6'/%3E%3Cpolygon points='150,30 143,150 157,150' fill='%23C9A55C' opacity='0.6'/%3E%3Cpolygon points='150,270 143,150 157,150' fill='%23C9A55C' opacity='0.4'/%3E%3Cpolygon points='270,150 150,143 150,157' fill='%23C9A55C' opacity='0.4'/%3E%3Cpolygon points='30,150 150,143 150,157' fill='%23C9A55C' opacity='0.4'/%3E%3Ctext x='150' y='52' text-anchor='middle' font-size='18' font-family='serif' fill='%23C9A55C' opacity='0.7'%3EN%3C/text%3E%3C/svg%3E");
  background-size: 60%;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.2;
}

.about-img-badge {
  position: absolute;
  bottom: -20px;
  right: -20px;
  z-index: 2;
  background-color: var(--gold);
  color: var(--green-dark);
  border-radius: 50%;
  width: 100px;
  height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 2px;
  box-shadow: var(--shadow-md);
}

.about-img-badge span {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
}

.about-content-col .section-title {
  margin-bottom: 20px;
}

.about-content-col p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--t2);
  margin-bottom: 20px;
}


/* ===================================================
   10. CTA BANNER
   =================================================== */
.cta-banner {
  background: linear-gradient(135deg, #122E20 0%, #1B4D35 100%);
  padding: clamp(48px, 6vw, 80px) 0;
  position: relative;
  overflow: hidden;
}

.cta-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(ellipse at 90% 50%, rgba(184, 150, 78, 0.08) 0%, transparent 55%);
  pointer-events: none;
}

.cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

.cta-text h2 {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 700;
  color: var(--white);
  line-height: 1.2;
  margin-bottom: 8px;
}

.cta-text p {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.72);
}

.cta-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.cta-phone {
  font-size: 17px;
  font-weight: 700;
  color: var(--gold-light);
  transition: color var(--transition);
}

.cta-phone:hover {
  color: var(--white);
}


/* ===================================================
   11. TEAM CARDS
   =================================================== */
.team-preview {
  background-color: var(--bg);
}

.team-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-bottom: 48px;
}

.team-card {
  background-color: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition);
}

.team-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.team-photo {
  width: 100%;
  padding-top: 60%;
  background-color: var(--s2);
  background-image: linear-gradient(160deg, var(--green-dark) 0%, var(--green) 100%);
}

.team-info {
  padding: 28px 32px 32px;
}

.team-info h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.team-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}

.team-info p:not(.team-title) {
  font-size: 15px;
  line-height: 1.75;
  color: var(--t2);
}

.team-cta {
  text-align: center;
}


/* ===================================================
   12. PAGE HEADERS (inner pages)
   =================================================== */
.page-header {
  background-color: var(--bg);
  border-bottom: 1px solid var(--rule);
  padding: 120px var(--px) 64px;
  position: relative;
}

/* Subtle green-tinted wash */
.page-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, var(--s1) 0%, rgba(255,255,255,0) 60%);
  pointer-events: none;
}

/* Gold bottom line */
.page-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: var(--px);
  width: 64px;
  height: 3px;
  background-color: var(--gold);
}

.page-header-inner {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
}

.page-header .overline,
.page-header .section-eyebrow {
  color: var(--green);
}

.page-header .section-eyebrow::before {
  background-color: var(--green);
}

.page-header h1 {
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 58px);
  font-weight: 700;
  line-height: 1.1;
  color: var(--text);
  letter-spacing: -0.015em;
  margin-bottom: 16px;
  max-width: 800px;
}

.page-header .lead,
.page-header .page-header-sub {
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.75;
  color: var(--t3);
  max-width: 600px;
}

/* Remove compass watermark on inner pages — no dark bg to hide it */
.page-header .page-compass {
  display: none;
}


/* ===================================================
   13. SERVICE DETAIL PAGES
   =================================================== */

/* Intro block on service pages */
.service-intro {
  max-width: 760px;
  margin-bottom: 56px;
}

.service-intro p {
  font-size: 17px;
  line-height: 1.8;
  color: var(--t2);
  margin-bottom: 20px;
}

/* Service list block */
.service-list-block {
  margin-bottom: 56px;
}

.service-list-block h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--gold-pale);
}

.service-list-block ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 32px;
}

.service-list-block ul li {
  font-size: 15px;
  line-height: 1.6;
  color: var(--t2);
  padding-left: 16px;
  position: relative;
}

.service-list-block ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--gold);
}

/* Full-width single column list */
.service-list-block ul.single-col {
  grid-template-columns: 1fr;
}

/* Highlight callout box */
.callout-box {
  background-color: var(--gold-pale);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius);
  padding: 24px 28px;
  margin: 40px 0;
}

.callout-box p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--t2);
  margin: 0;
}

/* Services sub-nav tabs */
.service-subnav {
  background-color: var(--s1);
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 72px;
  z-index: 100;
}

.service-subnav-inner {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--px);
}

.service-subnav-inner::-webkit-scrollbar {
  display: none;
}

.subnav-link {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--t3);
  padding: 16px 20px;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}

.subnav-link:hover,
.subnav-link.active {
  color: var(--green);
  border-bottom-color: var(--gold);
}


/* ===================================================
   14. CONTACT PAGE
   =================================================== */
.contact-split {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 56px;
  align-items: start;
}

/* Support both class names */
.contact-form-wrapper,
.contact-form-wrap {
  min-width: 0;
}

.contact-form-wrapper h2,
.contact-form-wrap h2 {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}

.contact-form-wrapper .form-intro,
.contact-form-wrap .contact-form-intro {
  font-size: 16px;
  color: var(--t3);
  margin-bottom: 36px;
  line-height: 1.65;
}

.contact-form-wrap .contact-form-intro a {
  color: var(--green);
  font-weight: 700;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--t3);
  margin-bottom: 6px;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text);
  background-color: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  transition: border-color var(--transition), box-shadow var(--transition);
  appearance: none;
}

.form-group textarea {
  height: 120px;
  padding: 14px 16px;
  resize: vertical;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(27, 77, 53, 0.09);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.contact-sidebar {
  background-color: var(--green-dark);
  border-radius: var(--radius-lg);
  padding: 40px 36px;
  color: var(--white);
}

.contact-sidebar h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(201, 165, 92, 0.3);
}

.contact-detail {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
}

.contact-detail-icon {
  width: 40px;
  height: 40px;
  background-color: rgba(201, 165, 92, 0.15);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  flex-shrink: 0;
}

.contact-detail-text {
  padding-top: 2px;
}

.contact-detail-text .label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 3px;
}

.contact-detail-text a,
.contact-detail-text p {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.9);
  transition: color var(--transition);
  line-height: 1.5;
}

.contact-detail-text a:hover {
  color: var(--gold-light);
}

.map-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gold);
  transition: color var(--transition);
}

.map-link-btn:hover {
  color: var(--gold-light);
}

.hours-block {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.hours-block h4 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 12px;
}

.hours-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}


/* ===================================================
   15. FOOTER
   =================================================== */
.site-footer {
  background-color: var(--green-dark);
  color: rgba(255, 255, 255, 0.65);
  padding-top: clamp(56px, 6vw, 88px);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1.2fr;
  gap: 48px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-brand .footer-wordmark {
  margin-bottom: 20px;
}

.footer-brand p {
  font-size: 14px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.55);
  max-width: 280px;
  margin-bottom: 24px;
}

.footer-social {
  display: flex;
  gap: 12px;
}

.footer-social a {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.6);
  transition: border-color var(--transition), color var(--transition);
}

.footer-social a:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.footer-col h4 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 20px;
}

.footer-col ul li {
  margin-bottom: 10px;
}

.footer-col ul li a {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
  transition: color var(--transition);
}

.footer-col ul li a:hover {
  color: var(--gold-light);
}

.footer-col address p,
.footer-col address a {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.6;
  margin-bottom: 8px;
  display: block;
  transition: color var(--transition);
}

.footer-col address a:hover {
  color: var(--gold-light);
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0;
  gap: 16px;
  flex-wrap: wrap;
}

.footer-bottom p {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.35);
}

.footer-bottom a {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.35);
  transition: color var(--transition);
}

.footer-bottom a:hover {
  color: var(--gold-light);
}


/* ===================================================
   16. BUTTONS (global)
   =================================================== */
.btn-primary {
  display: inline-flex;
  align-items: center;
  height: 52px;
  padding: 0 28px;
  background-color: var(--gold);
  color: var(--green-dark);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  transition: background-color var(--transition), transform var(--transition), box-shadow var(--transition);
}

.btn-primary:hover {
  background-color: var(--gold-light);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(201, 165, 92, 0.35);
}

/* Light variant of primary button (on dark backgrounds) */
.btn-primary.btn-light {
  background-color: var(--white);
  color: var(--green-dark);
}

.btn-primary.btn-light:hover {
  background-color: var(--gold-light);
}

/* Ghost/outline — light on dark */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  height: 52px;
  padding: 0 28px;
  background-color: transparent;
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition), background-color var(--transition);
}

.btn-ghost:hover {
  border-color: rgba(255, 255, 255, 0.7);
  color: var(--white);
  background-color: rgba(255, 255, 255, 0.05);
}

/* Outline — on light backgrounds */
.btn-outline {
  display: inline-flex;
  align-items: center;
  height: 52px;
  padding: 0 28px;
  background-color: transparent;
  color: var(--green);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 4px;
  border: 2px solid var(--green);
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition);
}

.btn-outline:hover {
  background-color: var(--green);
  color: var(--white);
}

/* Submit button */
.btn-submit {
  width: 100%;
  height: 52px;
  background-color: var(--green);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color var(--transition), transform var(--transition);
}

.btn-submit:hover {
  background-color: var(--green-mid);
  transform: translateY(-1px);
}


/* ===================================================
   16. ANIMATIONS & UTILITIES
   =================================================== */

/* Scroll reveal — elements start hidden, JS adds .is-visible */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms ease, transform 600ms ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays for grid children */
.reveal-stagger > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger > *:nth-child(2) { transition-delay: 80ms; }
.reveal-stagger > *:nth-child(3) { transition-delay: 160ms; }
.reveal-stagger > *:nth-child(4) { transition-delay: 240ms; }

/* Divider line with gold accent */
.gold-rule {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  margin: 48px 0;
}

/* About page — full story block */
.story-block {
  max-width: 800px;
}

.story-block p {
  font-size: 17px;
  line-height: 1.85;
  color: var(--t2);
  margin-bottom: 24px;
}

.story-block p:last-child {
  margin-bottom: 0;
}

/* Two-column feature list */
.feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 48px 0;
}

.feature-item {
  padding: 24px;
  background-color: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  border-left: 3px solid var(--gold);
}

.feature-item h4 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}

.feature-item p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--t2);
  margin: 0;
}

/* Breadcrumb */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 20px;
}

.breadcrumb a {
  color: rgba(255, 255, 255, 0.5);
  transition: color var(--transition);
}

.breadcrumb a:hover {
  color: var(--gold-light);
}

.breadcrumb-sep {
  font-size: 10px;
  opacity: 0.4;
}

/* Team full-page detail */
.team-full {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 48px;
  align-items: start;
  padding: 56px 0;
  border-bottom: 1px solid var(--rule);
}

.team-full:first-of-type {
  padding-top: 0;
}

.team-full:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}

.team-full-photo {
  width: 300px;
  height: 360px;
  background-color: var(--s2);
  border-radius: var(--radius-lg);
  background-image: linear-gradient(160deg, var(--green-dark) 0%, var(--green) 100%);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.team-full-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Both class names supported */
.team-full-info,
.team-full-content {
  padding-top: 4px;
}

.team-full-info h2,
.team-full-content h2 {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
  line-height: 1.1;
}

.team-full-info .team-role,
.team-full-content .team-role {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--rule);
  display: block;
}

.team-full-info p,
.team-full-content p,
.team-bio p {
  font-size: 15px;
  line-height: 1.8;
  color: var(--t2);
  margin-bottom: 16px;
}

.team-bio p:last-child {
  margin-bottom: 0;
}


/* ===================================================
   17. RESPONSIVE
   =================================================== */

/* Tablet: 1024px and below */
@media (max-width: 1024px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .about-split {
    gap: 48px;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }

  .contact-split {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .contact-sidebar {
    max-width: 560px;
  }

  .team-full {
    grid-template-columns: 260px 1fr;
    gap: 36px;
  }
}

/* Mobile: 768px and below */
@media (max-width: 768px) {
  /* Hide desktop nav, show hamburger */
  .nav-links,
  .btn-portal {
    display: none;
  }

  .nav-hamburger {
    display: flex;
  }

  /* Hero */
  .compass-watermark {
    right: -20%;
    opacity: 0.04;
  }

  .hero-actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .hero-contact-bar .divider {
    display: none;
  }

  .hero-email {
    display: none;
  }

  /* Trust bar — vertical on mobile */
  .trust-items {
    flex-direction: column;
    gap: 0;
  }

  .trust-sep {
    width: 32px;
    height: 1px;
  }

  .trust-item {
    padding: 10px 20px;
  }

  /* Services */
  .services-grid {
    grid-template-columns: 1fr;
  }

  .service-card {
    padding: 28px 24px;
  }

  /* About split — stack */
  .about-split {
    grid-template-columns: 1fr;
    gap: 56px;
  }

  .about-img-frame::before {
    top: -10px;
    left: -10px;
    right: 10px;
    bottom: 10px;
  }

  .about-img-badge {
    right: -10px;
    bottom: -10px;
    width: 80px;
    height: 80px;
  }

  /* CTA */
  .cta-inner {
    flex-direction: column;
    text-align: center;
  }

  .cta-actions {
    justify-content: center;
  }

  /* Team */
  .team-cards {
    grid-template-columns: 1fr;
  }

  .team-full {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .team-full-photo {
    width: 100%;
    max-width: 320px;
    height: 300px;
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* Contact */
  .form-row {
    grid-template-columns: 1fr;
  }

  /* Service list single col on mobile */
  .service-list-block ul {
    grid-template-columns: 1fr;
  }

  /* Feature grid */
  .feature-grid {
    grid-template-columns: 1fr;
  }

  /* Page header */
  .page-header {
    padding: 108px var(--px) 56px;
  }
}

/* Small mobile: 480px and below */
@media (max-width: 480px) {
  .hero-headline {
    font-size: 38px;
  }

  .service-card {
    padding: 24px 20px;
  }

  .team-info {
    padding: 24px 20px;
  }

  .contact-sidebar {
    padding: 28px 24px;
  }
}


/* ===================================================
   15. TEAM CREDENTIALS & PHOTO PLACEHOLDER
   =================================================== */

.team-credentials {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}

.team-credentials span {
  display: inline-block;
  padding: 5px 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--green);
  background-color: rgba(27, 77, 53, 0.07);
  border-radius: 100px;
}

/* Photo placeholder — replaced with real img when available */
.photo-placeholder {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--green) 0%, var(--green-dark) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.photo-placeholder span {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.45);
  text-align: center;
  padding: 0 16px;
}

/* ===================================================
   16. CONTACT PAGE (EXTENDED)
   =================================================== */

/* Form wrap heading */
.contact-form-wrap h2 {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 700;
  color: var(--text);
  margin-bottom: 10px;
}

.contact-form-intro {
  font-size: 16px;
  color: var(--t3);
  margin-bottom: 36px;
  line-height: 1.65;
}

.contact-form-intro a {
  color: var(--green);
  font-weight: 700;
}

/* Submit button full width */
.btn-submit {
  width: 100%;
  justify-content: center;
  margin-top: 8px;
}

/* Success / error states */
.form-success,
.form-error {
  padding: 16px 20px;
  border-radius: var(--radius);
  font-size: 15px;
  margin-bottom: 24px;
}

.form-success {
  background-color: rgba(27, 77, 53, 0.07);
  color: var(--green-dark);
  border: 1px solid rgba(27, 77, 53, 0.15);
}

.form-error {
  background-color: rgba(180, 50, 50, 0.07);
  color: #8b1a1a;
  border: 1px solid rgba(180, 50, 50, 0.2);
}

/* Sidebar sections with gold-tinted separators */
.sidebar-section {
  padding-bottom: 28px;
  margin-bottom: 28px;
  border-bottom: 1px solid rgba(201, 165, 92, 0.25);
}

.sidebar-section:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}

.sidebar-section h3 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 16px;
}

.sidebar-section p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.65;
  margin-bottom: 16px;
}

.sidebar-contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-contact-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  color: rgba(255, 255, 255, 0.85);
}

.sidebar-contact-list svg {
  flex-shrink: 0;
  color: var(--gold);
  opacity: 0.85;
}

.sidebar-contact-list a {
  color: rgba(255, 255, 255, 0.9);
  font-size: 15px;
  transition: color var(--transition);
}

.sidebar-contact-list a:hover {
  color: var(--gold);
}

.sidebar-address {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 12px;
}

.sidebar-map-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
  transition: color var(--transition);
}

.sidebar-map-link:hover {
  color: var(--gold-light);
}

/* Office hours table */
.hours-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.hours-table td {
  padding: 7px 0;
  color: rgba(255, 255, 255, 0.8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  vertical-align: top;
}

.hours-table td:first-child {
  color: rgba(255, 255, 255, 0.55);
  font-weight: 700;
  letter-spacing: 0.04em;
  width: 50%;
}

.closed-row td {
  color: rgba(255, 255, 255, 0.4) !important;
}

.hours-note {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 14px;
  margin-bottom: 0;
  font-style: italic;
}

/* Portal button inside sidebar */
.sidebar-portal-btn {
  display: block;
  text-align: center;
  margin-top: 4px;
}


/* ===================================================
   17. PROSE / LEGAL PAGES
   =================================================== */
.prose-narrow {
  max-width: 760px;
}

.prose-narrow h2 {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.5vw, 28px);
  font-weight: 700;
  color: var(--text);
  margin-top: 48px;
  margin-bottom: 12px;
}

.prose-narrow p {
  font-size: 16px;
  color: var(--t2);
  line-height: 1.75;
  margin-bottom: 20px;
}

.prose-narrow ul {
  padding-left: 24px;
  margin-bottom: 20px;
}

.prose-narrow li {
  font-size: 16px;
  color: var(--t2);
  line-height: 1.7;
  margin-bottom: 8px;
}

.prose-narrow a {
  color: var(--green);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}