/* NRC: main.css
   1. Tokens              7. Buttons & links      13. Page: About Us
   2. Reset & base        8. Hero                 14. Page: Protect
   3. Accessibility       9. Closing CTA          15. Page: Landowner Resources
   4. Layout utilities   10. Footer               16. Page: Contact Us
   5. Typography         11. Reusable components  17. Text pages (Privacy)
   6. Header & nav       12. Page: Home           18. Responsive
*/

/* 1. Tokens */
:root {
  /* Text and surfaces */
  --ink: var(--wp--preset--color--ink);
  --ink-2: var(--wp--preset--color--ink-2);
  --ink-3: #6b6b6b;
  --text-on-dark: var(--wp--preset--color--white);
  --bg: var(--wp--preset--color--white);
  --bg-alt: var(--wp--preset--color--bg-alt);
  --bg-dark: var(--wp--preset--color--bg-dark);
  --photo-bg: #e6e6e6;
  --border: #d9d9d9;
  --border-light: #eaeaea;
  --border-strong: #a8a8a8;
  --placeholder-2: #b8b8b8;
  --focus: #1a1a1a;

  /* Form messages */
  --error: #ba3308;
  --error-border: #f2643b;
  --error-bg: #fde8e2;

  /* NRC brand colors (from NRC Brand Guidelines) */
  --nrc-orange: var(--wp--preset--color--orange);
  /* Orange buttons use dark text, so they need a light orange; hover is the logo's light orange */
  --nrc-orange-light: #FAA545;
  --nrc-orange-light-hover: #F8941F;
  --nrc-leaf: var(--wp--preset--color--leaf);
  --nrc-forest: var(--wp--preset--color--forest);
  --nrc-forest-hover: var(--wp--preset--color--forest-dark);
  --nrc-forest-text: #1d813d; /* brand green darkened to pass 4.5:1 as text or behind white text */
  --nrc-forest-tint: rgba(32, 141, 66, 0.45);
  --nrc-forest-wash: #EBF1E8;
  --nrc-blue: var(--wp--preset--color--blue);
  /* Brand blue fails 4.5:1 as text or behind white text, so text and buttons use a darker shade */
  --nrc-blue-text: #3274aa;
  --nrc-blue-text-hover: #2c6597;
  --nrc-charcoal: var(--wp--preset--color--charcoal);

  /* NRC US Map */
  --map-active: #6B9B5A;
  --map-inactive: #CFC8B8;
  --map-stroke: #FFFFFF;

  /* Partner logos */
  --logo-blue-wash: #81B3D9;
  --logo-yellow-wash: #F7F5E6;
  --logo-stroke: #E7E7E7;

  /* Fonts */
  --font-sans: var(--wp--preset--font-family--sans);
  --font-serif: var(--wp--preset--font-family--serif);

  /* Layout and spacing */
  --container: 1280px;
  --gutter: 32px;
  --space-section: 112px;
  --space-section-lg: 128px;
  --space-section-sm: 80px;
  --radius: 6px;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  color: var(--ink);
  line-height: 1.55;
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-optical-sizing: none;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }

/* Sticky header offset for anchor targets */
[id] { scroll-margin-top: 96px; }

/* 3. Accessibility utilities */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  background: var(--ink);
  color: var(--text-on-dark);
  padding: 12px 20px;
  text-decoration: none;
  font-weight: 500;
  z-index: 999;
  border-radius: 2px;
}
.skip-link:focus { top: 16px; }

/* Text for screen readers only, such as "(opens in new tab)" */
.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;
}

a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* 4. Layout utilities */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section, .form-section { padding: var(--space-section) 0; }
.section-alt { background: var(--bg-alt); }

/* 5. Typography */
.eyebrow {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--nrc-forest-hover);
  margin-bottom: 14px;
}

.section-hd { max-width: 720px; }
.section-hd h1,
.section-hd h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 44px;
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: 16px;
  max-width: 720px;
  text-wrap: pretty;
}

.section-hd p:not(.eyebrow) {
  color: var(--ink-2);
  font-size: 17px;
  max-width: 640px;
}

/* 6. Header & navigation */
.site-header {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 50;
}
.admin-bar .site-header { top: var(--wp-admin--admin-bar--height, 0px); }
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 20px;
  padding-bottom: 20px;
}
.logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.logo-img {
  height: 44px;
  width: auto;
}
.nav {
  display: flex;
  align-items: center;
  gap: 40px;
}
.nav ul {
  display: flex;
  gap: 0;
  list-style: none;
  align-items: center;
}
.nav ul li {
  position: relative;
  padding: 0 30px;
}
.nav ul li:last-child {
  padding-right: 0;
}
.nav ul li + li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 14px;
  width: 1px;
  background: var(--border);
}
.nav ul a {
  color: var(--nrc-charcoal);
  text-decoration: none;
  font-size: 15px;
  font-weight: 400;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  /* Column flex so the hidden ::after below sets the width */
  display: inline-flex;
  flex-direction: column;
}
/* Reserve the width of the bold (current page) version of each label,
   so the links don't shift when the current page changes */
.nav ul a::after {
  content: attr(data-label);
  font-weight: 500;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
  user-select: none;
}
.nav ul a:hover { border-bottom-color: var(--nrc-blue-text); color: var(--nrc-blue-text); }
.nav ul a[aria-current="page"] { border-bottom-color: var(--nrc-blue-text); font-weight: 500; color: var(--nrc-blue-text); }
.mobile-toggle { display: none; }
.mobile-toggle .icon-close { display: none; }
.mobile-toggle[aria-expanded="true"] .icon-open { display: none; }
.mobile-toggle[aria-expanded="true"] .icon-close { display: block; }

/* 7. Buttons & links */
.btn-header, .btn-primary .wp-block-button__link, .btn-accent .wp-block-button__link {
  color: var(--text-on-dark);
  border: none;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  display: inline-block;
  transition: background 0.15s ease;
}
.btn-header {
  background: var(--nrc-orange-light);
  color: var(--ink);
  padding: 10px 20px;
  line-height: 1.25;
}
.btn-header:hover { background: var(--nrc-orange-light-hover); }
.btn-header[aria-current="page"] {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--nrc-orange);
}
.btn-header[aria-current="page"]:hover {
  background: var(--nrc-orange-light);
  color: var(--ink);
}
.btn-primary .wp-block-button__link, .btn-accent .wp-block-button__link { padding: 12px 26px; }
.btn-primary .wp-block-button__link { background: var(--nrc-blue-text); }
.btn-primary .wp-block-button__link:hover { background: var(--nrc-blue-text-hover); }
/* Orange variant of primary. Used only for the closing CTA (get in touch) */
.btn-accent .wp-block-button__link { background: var(--nrc-orange-light); color: var(--ink); }
.btn-accent .wp-block-button__link:hover { background: var(--nrc-orange-light-hover); }

.link-arrow .wp-block-button__link {
  color: var(--text-on-dark);
  background: none;
  padding: 0;
  border-radius: 0;
  font-size: 15px;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,0.6);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.link-arrow .wp-block-button__link:hover { text-decoration-color: var(--text-on-dark); }

/* Text links: shared underline. Size, spacing, and any offset change are set per link */
.section-next a, .steps-link a, .where-link a, .study-cta a, .resource-cta a,
.team-contact a, .topic-resources a, .contact-value a,
.process-next-body a, .hww-card-link a, .tax-link a {
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
/* Blue text links */
.section-next a, .steps-link a, .where-link a, .study-cta a, .resource-cta a,
.team-contact a, .topic-resources a, .contact-value a { color: var(--nrc-blue-text); }
.section-next a:hover, .steps-link a:hover, .where-link a:hover, .study-cta a:hover, .resource-cta a:hover,
.team-contact a:hover, .topic-resources a:hover, .contact-value a:hover { color: var(--nrc-blue-text-hover); }
/* Ink text links */
.hww-card-link, .tax-link { color: var(--ink); font-size: 15px; }
.hww-card:hover .hww-card-link,
.hww-card-link a:hover,
.tax-link a:hover { color: var(--ink-2); }

/* 8. Hero (shared). Every hero has a background photo, darkened for white text */
.hero {
  position: relative;
  min-height: 500px;
  display: flex;
  align-items: flex-start;
  color: var(--text-on-dark);
  overflow: hidden;
  background-color: var(--bg-dark);
  background-size: cover;
  background-position: center 100%;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.30);
  z-index: 1;
  pointer-events: none;
}
/* Hero photo: an Image block stretched behind the text. Framing is set per page */
.hero .hero-bg {
  position: absolute;
  inset: 0;
  margin: 0;
}
.hero .hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 100%;
}
.page-home .hero-bg img { object-position: center 40%; }
.page-about-us .hero-bg img { object-position: center 85%; }
.page-protect-and-preserve-your-land .hero-bg img,
.page-landowner-resources .hero-bg img { object-position: center 35%; }

/* Content sits above the photo and overlay (hero, CTA, photo-fade sections) */
.hero .container, .cta .container,
.steps .container, .hww .container, .reading .container {
  position: relative;
  z-index: 2;
}
.hero .container {
  padding-top: 120px;
  padding-bottom: 60px;
}
.hero .eyebrow { color: rgba(255,255,255,0.85); }
.hero h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 56px;
  line-height: 1.08;
  max-width: 720px;
  margin-bottom: 22px;
  text-wrap: pretty;
}
.page-protect-and-preserve-your-land .hero h1 { max-width: 660px; }
.page-protect-and-preserve-your-land .hero p.intro { max-width: 700px; }
.hero p.intro {
  color: rgba(255,255,255,0.9);
  font-size: 18px;
  max-width: 720px;
  margin-bottom: 36px;
  text-wrap: pretty;
}
.hero-ctas {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
/* Secondary hero action: white outline (ghost) button over the photo.
   The light tint inside the button keeps the text readable on bright photos.
   Padding allows for the border so it matches the height of .btn-primary */
.hero .link-arrow .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10.5px 24.5px;
  border: 1.5px solid var(--text-on-dark);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.32);
  line-height: 1.55;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.hero .link-arrow .wp-block-button__link:hover {
  background: var(--text-on-dark);
  color: var(--ink);
}
/* Keyboard focus ring in white so it shows against the photo */
.hero a:focus-visible { outline-color: var(--text-on-dark); }

/* 9. Closing CTA (shared) */
.cta {
  position: relative;
  color: var(--text-on-dark);
  overflow: hidden;
  padding: var(--space-section-lg) 0;
  text-align: center;
  background-color: var(--bg-dark);
  background-size: cover;
  background-position: center;
}
/* Photo variant: closing CTA with a background photo */
/* Photo: an Image block behind the text, sized like the original background (auto 130%, top left) */
.cta .cta-bg {
  position: absolute;
  inset: 0;
  margin: 0;
}
.cta .cta-bg img {
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  max-width: none;
  height: 130%;
  filter: grayscale(40%);
}
.cta-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    rgba(20, 20, 20, 0.45) 0%,
    rgba(20, 20, 20, 0.20) 70%,
    rgba(20, 20, 20, 0.10) 100%
  );
  z-index: 1;
}
.cta .eyebrow { color: rgba(255,255,255,0.9); letter-spacing: 0.22em; }
.cta h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 44px;
  line-height: 1.1;
  margin-bottom: 22px;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}
.cta p:not(.eyebrow) {
  color: rgba(255,255,255,0.9);
  font-size: 17px;
  max-width: 540px;
  margin: 0 auto 36px;
  line-height: 1.6;
}
.cta-actions {
  display: flex;
  gap: 28px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

/* 10. Footer
   Kit embed sets colors inline, so overrides here need !important.
   All rules scoped under .newsletter. */
.site-footer {
  background: var(--bg);
  border-top: 1px solid var(--border);
}

/* Top row: three columns */
.footer-top {
  display: flex;
  align-items: flex-start;
  gap: 64px;
  padding: 56px 0 48px;
}
.footer-col { min-width: 0; }
.footer-about { flex: 1 1 240px; max-width: 300px; }
.footer-links { flex: 0 1 190px; }
.footer-col.newsletter { flex: 1 1 400px; max-width: 470px; }

.footer-org {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 14px;
}
.footer-contact {
  font-style: normal;
  font-size: 14px;
  line-height: 1.95;
  color: var(--ink-2);
}
.footer-contact a {
  color: var(--ink-2);
  text-decoration: none;
  padding: 5px 0; /* larger tap area, no layout change */
}
.footer-contact a:hover { color: var(--ink); text-decoration: underline; }

.footer-links ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-links a {
  font-size: 14px;
  color: var(--ink-2);
  text-decoration: none;
  padding: 7px 0; /* larger tap area, no layout change */
}
.footer-links a:hover { color: var(--ink); text-decoration: underline; }

/* Newsletter column */
.newsletter h2 {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink);
  margin-bottom: 6px;
}
.newsletter p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
}
.newsletter-note {
  font-size: 12px !important;
  color: var(--ink-3);
  margin-top: 10px;
}

/* Kit embed: strip its own spacing, then set the field beside the button */
.newsletter .formkit-form { max-width: 100% !important; }
.newsletter .formkit-form [data-style="clean"] {
  padding: 0 !important;
  width: 100%;
}
.newsletter .formkit-fields {
  display: flex !important;
  align-items: stretch !important;
  gap: 10px !important;
  margin: 14px 0 0 !important;
}
.newsletter .formkit-field {
  flex: 1 1 auto !important;
  min-width: 0;
  margin: 0 !important;
}

/* Email input: matches .form-field input on Contact Us */
.newsletter .formkit-input {
  width: 100% !important;
  padding: 9px 12px !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius) !important;
  background: var(--bg) !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--ink) !important;
  line-height: 1.5 !important;
}
.newsletter .formkit-input::placeholder {
  color: var(--ink-3) !important;
  opacity: 1 !important;
}
.newsletter .formkit-input:focus {
  border-color: var(--ink) !important;
  outline: 2px solid var(--focus) !important;
  outline-offset: 2px !important;
}

/* Subscribe button: matches .form-submit--primary on Contact Us */
.newsletter .formkit-submit {
  flex: 0 0 auto !important;
  margin: 0 !important;
  position: relative;
  overflow: hidden;
  border: 0 !important;
  border-radius: var(--radius) !important;
  background-color: var(--nrc-blue-text) !important;
  color: var(--text-on-dark) !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.newsletter .formkit-submit:hover {
  background-color: var(--nrc-blue-text-hover) !important;
}
.newsletter .formkit-submit:focus-visible {
  outline: 2px solid var(--focus) !important;
  outline-offset: 2px;
}
/* Turn off Kit's own hover darkening on the inner span */
.newsletter .formkit-submit > span {
  display: block;
  padding: 9px 20px !important;
  background-color: transparent !important;
}

/* Loading spinner, hidden until the embed marks the button active */
.newsletter .formkit-spinner {
  position: absolute;
  inset: 0;
  margin: auto;
  height: 0;
  width: 0;
  overflow: hidden;
}

/* Error and success messages returned by the embed */
.newsletter .formkit-alert {
  list-style: none;
  margin: 14px 0 0;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-alt);
  font-size: 14px;
}
.newsletter .formkit-alert:empty { display: none; }
.newsletter .formkit-alert-error {
  border-color: var(--error-border);
  background: var(--error-bg);
  color: var(--error);
}

/* Bottom row: copyright and privacy left, social right */
.footer-bottom {
  border-top: 1px solid var(--border);
  padding: 20px 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.footer-legal {
  display: flex;
  align-items: baseline;
  gap: 20px;
  flex-wrap: wrap;
}
.site-footer .copyright {
  font-size: 13px;
  color: var(--ink-3);
}
.footer-legal a {
  font-size: 13px;
  color: var(--ink-3);
  text-decoration: none;
  padding: 10px 0; /* larger tap area, negative margin keeps layout */
  margin: -10px 0;
}
.footer-legal a:hover { color: var(--ink); text-decoration: underline; }
.site-footer .social {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}
.site-footer .social a {
  width: 36px;
  height: 36px;
  margin: -6px; /* 36px tap area, same 24px footprint */
  display: grid;
  place-items: center;
  color: var(--ink-2);
}
.site-footer .social a:hover { color: var(--ink); }

/* 11. Reusable components */

/* Jump-link menu (About Us, Protect, Landowner Resources) */
.jump-nav {
  background: var(--bg-alt);
}
.jump-nav .container {
  padding-top: 20px;
  padding-bottom: 20px;
}
.jump-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 36px;
  list-style: none;
  justify-content: center;
}
.jump-nav a {
  color: var(--nrc-forest-text);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 4px 0;
}
.jump-nav a:hover { color: var(--nrc-forest-hover); text-decoration-color: var(--nrc-forest-hover); }

/* Floating back to top */
.to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 17px;
  background: var(--nrc-forest-text);
  color: var(--text-on-dark);
  border: 0;
  border-radius: 999px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s, background-color 0.2s ease;
}
.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.to-top:hover { background: var(--nrc-forest-hover); }
.to-top:focus-visible { outline: 2px solid var(--nrc-blue); outline-offset: 3px; }
.to-top svg { flex-shrink: 0; }

/* Anchor link leading to the next section on the same page */
.section-next a {
  font-size: 15px;
  display: inline-block;
  position: relative;
}
/* Larger tap area without moving anything */
.section-next a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -7px;
  bottom: -7px;
}

/* Stacks two related section links vertically */
.section-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  margin-top: 12px;
}
.section-links > * { margin-top: 0 !important; }
/* Matches the 15px link, so the paragraph's line is no taller than the link */
.section-links .section-next { font-size: 15px; }

/* Placement helpers */
.why-band .section-next a { margin-top: 12px; }
.process-section-next a { margin-top: 40px; }

/* Numbered steps (Home, Protect, Landowner Resources) */
.step-card::before, .process-card:not(.process-card--next)::before, .topic-card::before {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 400;
  line-height: 1;
  color: var(--nrc-forest-hover);
  margin-bottom: 4px;
}
.steps-grid { counter-reset: step; }
/* Step numbers are generated, so editors cannot misnumber them. The empty alt text hides them from screen readers */
.step-card::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  content: counter(step, decimal-leading-zero) / "";
  margin-bottom: 8px;
}

/* Sections that fade from white into a photo on the right (Home, Protect, Landowner Resources) */
.steps, .hww, .reading {
  position: relative;
  background-image: url('../images/white-wildflowers.jpg');
  background-repeat: no-repeat;
  background-position: right center;
  background-size: auto 100%;
  overflow: hidden;
}
.steps::before, .hww::before, .reading::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 1;
  pointer-events: none;
}

/* Stretched link: the whole card is clickable via its CTA link */
.resource-cta a::before, .study-cta a::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* Partner strip (About, Landowner Resources) */
.partners .section-hd { text-align: center; margin: 0 auto 56px; max-width: 960px; }
.partners .section-hd h2, .partners .section-hd p,
.study .section-hd h2, .study .section-hd p { margin-left: auto; margin-right: auto; }
.partners-intro {
  max-width: 680px;
  margin: 0 auto 56px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-2);
  text-align: center;
}
/* Intro copy sitting inside .section-hd (About Us) */
.partners .section-hd .partners-intro {
  margin: 12px auto 0;
  max-width: 920px;
}
/* Each page sets the intro through the synced Partners pattern; Landowner Resources leaves it empty */
.partners .section-hd .partners-intro p { max-width: none; }
.partners-intro:not(:has(p:not(:empty))) { display: none; }
/* Extra paragraphs editors add to a body text area that holds one paragraph in the design */
.why-body p + p,
.tax-intro p + p,
.reading-intro p + p,
.process-body p + p,
.faq-answer p + p { margin-top: 16px; }
/* Partner card grid (About Us) */
.partner-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 1120px;
  margin: 0 auto;
}
.partner-card {
  aspect-ratio: 1 / 1;
  background: var(--bg);
  border: 1px solid var(--logo-stroke);
  display: grid;
  place-items: center;
  padding: 32px;
}
.partner-card--dark {
  background: var(--logo-blue-wash);
}
.partner-card--light {
  background: var(--logo-yellow-wash);
}
.partner-card .wp-block-image {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  margin: 0;
}
.partner-card img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.partner-card--wide img {
  max-width: 85%;
  max-height: 50%;
}
.partner-card--square img {
  max-width: 70%;
  max-height: 70%;
}

/* 12. Page: Home */

/* How to get started (three steps) */
.steps { background-position: 160% center; }
.steps::before {
  width: 90%;
  background: linear-gradient(
    to right,
    var(--bg) 0%,
    var(--bg) 40%,
    transparent 100%
  );
}
.steps .section-hd { margin-bottom: 56px; }
.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-bottom: 48px;
}
.step-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 32px;
  border-left: 1px solid var(--border-light);
}
.step-card:first-child {
  padding-left: 0;
  border-left: 0;
}
.step-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.2;
  color: var(--ink);
}
.step-body {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink-2);
}
.steps-link a { font-size: 15px; padding: 10px 0; } /* larger tap area, no layout change */

/* What we do (photo + text) */
.what-we-do .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.wwd-photo {
  margin: 0;
  aspect-ratio: 5 / 6;
  background: var(--photo-bg);
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}
.wwd-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wwd-photo svg {
  width: 100%;
  height: 100%;
}
.wwd-text h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.12;
  margin-bottom: 24px;
  max-width: 480px;
}
.wwd-text p:not(.eyebrow) {
  color: var(--ink-2);
  font-size: 17px;
  line-height: 1.7;
  margin-bottom: 18px;
  max-width: 520px;
}

/* Where we work (map + stats) */
.where .section-hd { margin-bottom: 56px; }
.where-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 80px;
  align-items: center;
}
.where-intro {
  font-size: 15px;
  color: var(--ink-2);
  max-width: 62ch;
  margin-top: 20px;
  margin-bottom: 12px;
  text-wrap: pretty;
}
.where-legend {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  color: var(--ink-2);
}
.where-legend::before {
  content: "";
  width: 14px;
  height: 14px;
  margin-top: 0.35em;
  background: var(--map-active);
  display: inline-block;
  flex-shrink: 0;
}
.map-wrap {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.map-placeholder {
  position: relative;
  overflow: hidden;
}
.map-svg {
  width: 100%;
  height: auto;
}
.map-svg .state {
  fill: var(--map-inactive);
  stroke: var(--map-stroke);
  stroke-width: 1;
  transition: fill 0.2s ease;
}
.map-svg .state--active {
  fill: var(--map-active);
}
.stats {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.stat-num {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 44px;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.stat-label {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 470px;
  text-wrap: pretty;
}
.stat-source {
  font-size: 12px;
  color: var(--ink-3);
  font-style: italic;
  align-self: flex-start;
}
.where-link {
  font-size: 15px;
  align-self: flex-start;
  margin-top: 12px;
}
.where-link a { display: inline-block; }

/* 13. Page: About Us */

/* Mission + Why band */
.mission-band, .why-band { padding: var(--space-section-lg) 0; }
.mission {
  max-width: 900px;
  margin: 0 auto 96px;
  text-align: center;
}
.mission-statement {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 34px;
  line-height: 1.3;
  color: var(--ink);
  max-width: 820px;
  margin: 0 auto;
}
/* Vision: same treatment as the mission, closer to it so the two read as a pair */
.mission:has(+ .vision) { margin-bottom: 64px; }
.vision {
  max-width: 900px;
  margin: 0 auto 96px;
  text-align: center;
}
/* Values: a fixed list of five. Name on the left, sentence on the right. */
.values {
  max-width: 780px;
  margin: 0 auto 96px;
}
.values-list { border-bottom: 1px solid var(--border); }
.value {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 24px;
  padding: 22px 0;
  border-top: 1px solid var(--border);
}
.values .value-name {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--ink);
}
.values .value-text {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-2);
}
/* Divider line between the mission and "Why it matters" */
.mission-band .why::before {
  content: "";
  display: block;
  width: 60px;
  height: 1px;
  background: var(--border-strong);
  margin: 0 auto 96px;
}
.why {
  max-width: 780px;
  margin: 0 auto;
}
.why .section-next a { margin-top: 24px; }
.why h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 36px;
  line-height: 1.15;
  margin-bottom: 20px;
}
.why p:not(.eyebrow, .section-next) {
  color: var(--ink-2);
  font-size: 17px;
  line-height: 1.7;
}

/* Who we are (image + text) */
.who .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.who h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.1;
  margin-bottom: 24px;
}
.who p:not(.eyebrow, .section-next) {
  color: var(--ink-2);
  font-size: 17px;
  line-height: 1.7;
  margin-bottom: 16px;
}

/* Team grid */
.team .section-hd { margin-bottom: 64px; }
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 56px 40px;
}
/* Horizontal card: photo and links left, text right */
.team-card {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.team-photo {
  aspect-ratio: 4 / 5;
  background: var(--nrc-forest-wash);
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Logo stands in where there is no headshot */
.team-photo--logo {
  background-image: url('../images/NRC-logo.webp');
  background-position: center;
  background-size: 62% auto;
  background-repeat: no-repeat;
}
.team-name {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 4px;
}
.team-title {
  font-size: 14px;
  color: var(--ink-3);
  margin-bottom: 12px;
  font-weight: 500;
}
.team-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: center;
  margin-bottom: 16px;
}
.team-contact a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 0; /* 44px tap area, negative margin keeps layout */
  margin: -12px 0;
  text-underline-offset: 3px;
  font-size: 13px;
}
.team-contact svg { width: 14px; height: 14px; flex-shrink: 0; }
.team-bio {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
}

/* 14. Page: Protect and Preserve Your Land */

/* Why conservation (intro band) */
.why-band .container {
  max-width: 720px;
}
.why-band h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.12;
  margin-bottom: 32px;
  max-width: 520px;
  text-wrap: balance;
}
.why-band p:not(.eyebrow, .section-next) {
  color: var(--ink-2);
  font-size: 17px;
  line-height: 1.75;
  margin-bottom: 18px;
  text-wrap: pretty;
}

/* Seven-step process */
.process .section-hd { margin-bottom: 64px; }
.process-grid {
  counter-reset: process;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px 56px;
}
.process-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.process-card:not(.process-card--next)::before {
  counter-increment: process;
  content: counter(process, decimal-leading-zero);
  content: counter(process, decimal-leading-zero) / "";
}
.process-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.2;
  color: var(--ink);
  max-width: 460px;
}
.process-body {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink-2);
  margin-top: 4px;
  max-width: 460px;
}

/* Companion card in slot 8. Its link covers the whole card */
.process-card--next {
  position: relative;
  border: 1px solid var(--nrc-forest-tint);
  padding: 24px;
  justify-content: flex-start;
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.2s ease;
}
.process-card--next:hover { border-color: var(--nrc-forest); }
.process-next-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.25;
  color: var(--ink);
  margin-bottom: 8px;
  max-width: 460px;
}
.process-next-body {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 460px;
  text-wrap: pretty;
}
.process-next-body a {
  font-size: 15px;
  color: var(--nrc-forest-text);
}
.process-card--next:hover .process-next-body a { color: var(--nrc-forest-hover); }
.process-next-body a::after,
.hww-card .hww-card-link a::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* Tax list lead-in */
.tax-lead {
  color: var(--ink);
  font-weight: 500;
  margin-top: 8px;
}

/* How we work */
.hww::before {
  background: linear-gradient(
    to right,
    var(--bg) 0%,
    var(--bg) 55%,
    rgba(255, 255, 255, 0.85) 70%,
    transparent 100%
  );
}
.hww .section-hd { margin-bottom: 56px; }
.hww-intro {
  max-width: 780px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-2);
  margin-bottom: 56px;
}
.hww-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-bottom: 64px;
  max-width: 820px;
}
.hww-card {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.2s ease;
}
.hww-card:hover { border-color: var(--nrc-blue); }
.hww-card-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.hww-card h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.3;
  color: var(--ink);
}
.hww-card p:not(.hww-card-label, .hww-card-link) {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-2);
}
.hww-card-link {
  align-self: flex-start;
  margin-top: 10px;
}
.hww-prose .hww-card-link { margin-top: 20px; }
.hww-prose {
  max-width: 700px;
}
.hww-prose h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.2;
  color: var(--ink);
  margin-top: 8px;
  margin-bottom: 18px;
}
.baseline-heading {
  display: flex;
  align-items: center;
  gap: 12px;
}
.baseline-heading::before {
  content: "";
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  background-color: var(--nrc-forest);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='M12 11h4'/%3E%3Cpath d='M12 16h4'/%3E%3Cpath d='M8 11h.01'/%3E%3Cpath d='M8 16h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}
.hww-body p {
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 18px;
  text-wrap: pretty;
}

/* Tax considerations */
.tax .section-hd { margin-bottom: 48px; }
.tax-content {
  max-width: 780px;
}
.tax-content p:not(.section-next, .tax-link) {
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 24px;
}
.tax-list {
  list-style: none;
  margin: 32px 0;
  border-top: 1px solid var(--border);
}
.tax-list li {
  padding: 24px 0;
  border-bottom: 1px solid var(--border);
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink-2);
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  align-items: start;
  text-wrap: pretty;
}
.tax-list li:nth-child(3) { grid-template-columns: 36px minmax(0, 560px); }
/* Each icon matches its item, so the list has a fixed four items */
.tax-list li::before {
  content: "";
  width: 22px;
  height: 22px;
  margin-top: 2px;
  background-color: var(--nrc-forest);
  mask: var(--tax-icon) center / contain no-repeat;
}
.tax-list li:nth-child(1) { --tax-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); }
.tax-list li:nth-child(2) { --tax-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M10 9H8'/%3E%3Cpath d='M16 13H8'/%3E%3Cpath d='M16 17H8'/%3E%3C/svg%3E"); }
.tax-list li:nth-child(3) { --tax-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z'/%3E%3Cpath d='m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z'/%3E%3Cpath d='M7 21h10'/%3E%3Cpath d='M12 3v18'/%3E%3Cpath d='M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2'/%3E%3C/svg%3E"); }
.tax-list li:nth-child(4) { --tax-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E"); }
.tax-link { margin-top: 8px; }

/* FAQ */
.faq .section-hd { margin-bottom: 48px; }
.faq-list {
  max-width: 860px;
  border-top: 1px solid var(--border);
}
.faq-item {
  border-bottom: 1px solid var(--border);
}
.faq-question {
  width: 100%;
  background: none;
  border: none;
  padding: 26px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  text-align: left;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.3;
  color: var(--ink);
  cursor: pointer;
}
.faq-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--ink-2);
  transition: transform 0.2s ease;
}
.faq-item[open] .faq-icon { transform: rotate(45deg); }
.faq-answer {
  padding: 0 40px 0 0;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink-2);
  max-width: 720px;
  overflow: hidden;
  transition: height 0.28s ease, opacity 0.28s ease;
}
.faq-item.is-animating .faq-answer { display: block !important; }
/* Bottom spacing lives inside the answer so it animates with the height */
.faq-answer::after {
  content: "";
  display: block;
  height: 26px;
}
details.faq-item summary { list-style: none; }
details.faq-item summary::-webkit-details-marker { display: none; }

/* 15. Page: Landowner Resources */

/* Tax forms */
.tax-forms .section-hd { margin-bottom: 32px; }
.tax-intro {
  max-width: 780px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-2);
  margin-bottom: 56px;
}
.resource-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.resource-card {
  border: 1px solid var(--border);
  background: var(--bg);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  transition: border-color 0.2s ease;
}
.resource-card:hover { border-color: var(--nrc-blue); }
.resource-meta {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.resource-source {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nrc-forest-hover);
}
.resource-format {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--ink-2);
  border: 1px solid var(--border-strong);
  padding: 3px 8px;
  border-radius: 2px;
}
.resource-card h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.25;
  color: var(--ink);
}
.resource-card p:not(.resource-source, .resource-format, .resource-cta) {
  font-size: 15.5px;
  color: var(--ink-2);
  line-height: 1.6;
  flex: 1;
}
.resource-cta {
  font-size: 14.5px;
  align-self: flex-start;
  margin-top: 4px;
}
.resource-cta a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* Arrow icon (Lucide arrow-up-right) */
.resource-cta a::after {
  content: "";
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='7' y1='17' x2='17' y2='7'/%3E%3Cpolyline points='7 7 17 7 17 17'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Further reading */
.reading::before {
  background: linear-gradient(
    to right,
    var(--bg) 0%,
    var(--bg) 72%,
    rgba(255, 255, 255, 0.92) 85%,
    rgba(255, 255, 255, 0.55) 100%
  );
}
.reading .section-hd { margin-bottom: 32px; }
.reading .section-hd h2 { text-wrap: balance; }
.reading-intro {
  max-width: 560px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-2);
  margin-bottom: 64px;
}
.topics {
  counter-reset: topic;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}
.topic-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.topic-card::before {
  counter-increment: topic;
  content: counter(topic, decimal-leading-zero);
  content: counter(topic, decimal-leading-zero) / "";
}
.topic-card h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.2;
  color: var(--ink);
}
.topic-definition {
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.65;
}
.topic-resources {
  margin-top: 8px;
}
.topic-resources ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.topic-resources li {
  font-size: 14px;
  line-height: 1.5;
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 10px;
  align-items: start;
}
.topic-resources li > svg {
  width: 16px;
  height: 16px;
  color: var(--nrc-blue);
  margin-top: 3px;
  flex-shrink: 0;
}
.topic-resources a { text-underline-offset: 3px; padding: 4px 0; /* larger tap area, no layout change */ }
.topic-source {
  color: var(--ink-3);
  font-size: 12.5px;
  display: block;
  margin-top: 4px;
  font-weight: 400;
}

/* Featured study */
.study .section-hd { text-align: center; margin: 0 auto 56px; max-width: 900px; }
.study .section-hd h2 { text-wrap: balance; }
.study .section-hd p { max-width: 780px; text-wrap: pretty; }
.study-card {
  background: var(--bg);
  border: 1px solid var(--border);
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s ease;
}
.study-card:hover { border-color: var(--nrc-blue); }
.study-media {
  position: relative;
  min-height: 100%;
}
.study-cover {
  height: 100%;
  margin: 0;
}
.study-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.2s ease, transform 0.4s ease;
}
.study-card:hover .study-cover img {
  opacity: 0.9;
  transform: scale(1.02);
}
.study-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  background: var(--bg);
  padding: 6px 14px;
  border-radius: 2px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  z-index: 2;
}
.study-body {
  padding: 56px 48px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  text-align: left;
}
.study-body .study-authors {
  margin-top: -18px;
}
.study-card h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.25;
  max-width: 620px;
  text-wrap: pretty;
  color: var(--ink);
}
.study-authors {
  font-size: 14px;
  color: var(--ink-3);
  font-family: var(--font-serif);
  font-style: italic;
  letter-spacing: 0.01em;
}
.study-desc {
  font-size: 16px;
  color: var(--ink-2);
  line-height: 1.7;
  max-width: 620px;
  margin-top: 4px;
}
.study-cta {
  font-size: 15px;
  margin-top: 12px;
}

/* Anchor link after the Tax forms grid, left-aligned like the section */
.tax-forms .section-next a { margin-top: 48px; }

/* 16. Page: Contact Us */

/* Compact hero modifier (shorter than the standard hero) */
.hero.hero-compact { min-height: 280px; }
.hero.hero-compact .container {
  padding-top: 72px;
  padding-bottom: 72px;
}
.hero.hero-compact p.intro {
  margin-bottom: 0;
  max-width: 460px;
}

/* Two-column layout: form on the left, contact sidebar on the right */
.form-section .container { max-width: 1080px; }
.form-layout {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 80px;
  align-items: start;
}
.form-main { min-width: 0; }
.form-main .section-hd { margin-bottom: 40px; }
.form-main .section-hd h2 { font-size: 36px; }
.form-main form {
  max-width: 100%;
  margin-top: 8px;
}
.form-field {
  margin-bottom: 24px;
}
.form-field label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 8px;
}
.form-field .optional {
  color: var(--ink-3);
  font-weight: 400;
  font-size: 13px;
}
.form-field input,
.form-field textarea,
.form-field select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border-strong);
  background: var(--bg);
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  border-radius: var(--radius);
  line-height: 1.5;
}
.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--placeholder-2);
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  border-color: var(--ink);
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.form-field textarea {
  min-height: 160px;
  resize: vertical;
}
.form-field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23525352' stroke-width='1.5'%3E%3Cpath d='M1 1.5 L6 6.5 L11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}
.form-submit {
  background: var(--ink);
  color: var(--text-on-dark);
  padding: 14px 32px;
  border: none;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}
.form-submit:hover { background: #333; }

/* Blue primary variant for form submits (matches body-action convention) */
.form-submit--primary { background: var(--nrc-blue-text); }
.form-submit--primary:hover { background: var(--nrc-blue-text-hover); }
.form-submit--primary:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Field errors and the message shown after sending (Fluent Forms markup) */
.form-field.ff-el-is-error input,
.form-field.ff-el-is-error textarea,
.form-field.ff-el-is-error select { border-color: var(--error-border); }
.form-field .error {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--error);
}
.form-main .ff-message-success,
.form-main .ff-errors-in-stack {
  padding: 16px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
}
.form-main .ff-errors-in-stack {
  margin-top: 20px;
  border-color: var(--error-border);
  background: var(--error-bg);
  color: var(--error);
}
.form-main .ff-errors-in-stack:empty { display: none; }
.form-main .error-clear { display: none; }
.form-submit:disabled { opacity: 0.7; cursor: progress; }

/* Combined response-time + privacy line under the submit button. Hidden once the message is sent */
.form-privacy {
  position: relative;
  padding-left: 22px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ink-3);
  margin-top: 20px;
  max-width: 480px;
  text-wrap: balance;
}
.form-privacy::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 0;
  width: 14px;
  height: 14px;
  background-color: var(--ink-3);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.form-main:has(.ff-message-success) .form-privacy { display: none; }

/* Sidebar */
.form-sidebar {
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.sidebar-heading {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.25;
  color: var(--ink);
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.contact-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.contact-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 2px;
}
.contact-value {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2;
  align-self: flex-start;
}
.contact-value a {
  font-weight: 400;
  text-underline-offset: 5px;
}
.contact-note {
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.55;
  margin-top: 4px;
}

/* 17. Text pages (Privacy): a title and body text, no hero */
.text-page .container { max-width: calc(720px + 2 * var(--gutter)); }
.text-page-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 44px;
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: 32px;
}
.text-page-body {
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.7;
}
.text-page-body > * + * { margin-top: 16px; }
.text-page-body > :first-child { margin-top: 0; }
.text-page-body h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.25;
  color: var(--ink);
  margin-top: 48px;
}
.text-page-body h3 {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
  margin-top: 32px;
}
.text-page-body > h2 + *,
.text-page-body > h3 + * { margin-top: 12px; }
.text-page-body ul,
.text-page-body ol { padding-left: 22px; }
.text-page-body li + li { margin-top: 6px; }
.text-page-body strong { color: var(--ink); font-weight: 600; }
.text-page-body a {
  color: var(--nrc-blue-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.text-page-body a:hover { color: var(--nrc-blue-text-hover); }

/* 18. Responsive */
@media (max-width: 1000px) {
  .section,
  .form-section,
  .mission-band,
  .why-band { padding: var(--space-section-sm) 0; }

  .hero h1 { font-size: 42px; }
  .section-hd h2 { font-size: 32px; }
  .text-page-title { font-size: 36px; }
  .cta h2 { font-size: 32px; }

  /* Footer: tighten the column gap before the 700px stack kicks in */
  .footer-top { gap: 40px; padding: 48px 0 40px; }

  /* Home */
  .steps { background-image: none; }
  .steps-grid { grid-template-columns: 1fr; gap: 32px; }
  .step-card {
    padding-left: 0;
    padding-top: 32px;
    border-left: 0;
    border-top: 1px solid var(--border);
  }
  .step-card:first-child { padding-top: 0; border-top: 0; }
  .what-we-do .container { grid-template-columns: 1fr; gap: 40px; }
  .wwd-text h2 { font-size: 30px; }
  .where-grid { grid-template-columns: 1fr; gap: 48px; }

  /* About */
  .mission-statement { font-size: 26px; }
  .who h2, .why h2 { font-size: 32px; }
  .who .container { grid-template-columns: 1fr; gap: 48px; }
  .team-grid { grid-template-columns: 1fr; gap: 48px; }
  .team-card { grid-template-columns: 200px minmax(0, 460px); }

  /* Protect */
  .why-band h2 { font-size: 30px; }
  .process-grid { grid-template-columns: 1fr; gap: 40px; }
  .hww-cards { grid-template-columns: 1fr; gap: 20px; }
  .jump-nav ul { gap: 8px 28px; }

  /* Landowner Resources */
  .resource-cards { grid-template-columns: 1fr; gap: 20px; }
  .topics { grid-template-columns: 1fr; gap: 56px; }
  .study-card { grid-template-columns: 1fr; }
  .study-card h3 { font-size: 24px; }
  .study-body { padding: 40px 32px; order: 1; }
  .study-media { order: 2; min-height: 240px; }

  /* Contact */
  .form-layout { grid-template-columns: 1fr; gap: 56px; }
  .form-main { order: 1; }
  .form-sidebar { order: 2; }
  .form-main .section-hd h2 { font-size: 28px; }

  /* Shared */
  .partner-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}

@media (max-width: 700px) {
  :root { --gutter: 20px; }

  /* Mobile header: logo left, Contact Us + toggle grouped right */
  .site-header .container { justify-content: flex-start; }
  .logo { margin-right: auto; }
  .nav { gap: 12px; }
  .mobile-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: 1px solid var(--border);
    padding: 8px 14px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
    border-radius: var(--radius);
    line-height: 1.2;
    cursor: pointer;
    margin-left: 12px;
  }
  .btn-header { padding: 8px 14px; font-size: 13px; line-height: 1.2; }
  .btn-header[aria-current="page"] { padding: 6.5px 12.5px; }

  /* Header buttons: 44px tap area without changing their look */
  .btn-header, .mobile-toggle { position: relative; }
  .btn-header::after, .mobile-toggle::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
  }

  /* Buttons span the full width */
  .btn-primary, .btn-accent,
  .btn-primary .wp-block-button__link, .btn-accent .wp-block-button__link, .form-submit {
    display: block;
    width: 100%;
    text-align: center;
  }
  .cta-actions { flex-direction: column; gap: 10px; }
  .cta .link-arrow .wp-block-button__link { padding: 10px 0; } /* tap area for the phone number; gap reduced to match */

  /* Form fields at 16px so phones don't zoom in when a field is tapped */
  .form-field input,
  .form-field textarea,
  .form-field select,
  .newsletter .formkit-input { font-size: 16px !important; }

  /* Jump links: two-column grid with 44px tap rows */
  .jump-nav .container { padding-top: 8px; padding-bottom: 8px; }
  .jump-nav ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
  }
  .jump-nav a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0;
  }

  /* Dropdown panel: nav list drops below the header when toggle is active.
     Hover and current page use the same blue as the desktop nav */
  .nav ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    padding: 8px 0;
    box-shadow: 0 8px 16px -12px rgba(0, 0, 0, 0.15);
  }
  .site-header.is-menu-open .nav ul { display: flex; }
  .nav ul li, .nav ul li:last-child { width: 100%; padding: 0; }
  .nav ul li + li::before { display: none; }
  .nav ul a {
    display: block;
    padding: 16px 20px;
    font-size: 16px;
    border-bottom: none;
    border-left: 2px solid transparent;
  }
  .nav ul a::after { display: none; }
  .nav ul a:hover { border-left-color: var(--nrc-blue-text); background: var(--bg-alt); }
  .nav ul a[aria-current="page"] { border-left-color: var(--nrc-blue-text); }

  .hero { min-height: 480px; }
  .hero .container { padding-top: 72px; padding-bottom: 72px; }
  .hero h1 { font-size: 34px; }
  .text-page-title { font-size: 30px; }
  .text-page-body h2 { font-size: 22px; }
  .hero p.intro { font-size: 16px; margin-bottom: 36px; }
  /* Hero buttons span the full width on mobile */
  .hero-ctas { flex-direction: column; align-items: stretch; gap: 20px; }
  .hero-ctas .wp-block-button__link { width: 100%; }

  /* Home */
  .step-title { font-size: 21px; }
  .wwd-text h2 { font-size: 26px; }
  .stat-num { font-size: 36px; }

  /* About */
  .mission-statement { font-size: 22px; }
  .mission, .mission-band .why::before { margin-bottom: 64px; }
  .vision, .values { margin-bottom: 64px; }
  .mission:has(+ .vision) { margin-bottom: 48px; }
  .value { grid-template-columns: 1fr; gap: 4px; padding: 18px 0; }
  .team-grid { gap: 40px; }
  .team-card {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .team-photo { max-width: 260px; }
  .team-media { margin-bottom: 20px; }

  /* Protect */
  .to-top { right: 16px; bottom: 16px; padding: 10px 15px; }
  .why-band h2 { font-size: 26px; }
  .process-title { font-size: 21px; }
  .process-card--next { padding: 28px 24px; }
  .process-next-title { font-size: 22px; }
  .hww-card { padding: 28px 24px; }
  .faq-question { font-size: 17px; padding: 22px 0; }

  /* Landowner Resources */
  .resource-card { padding: 28px 24px; }
  .resource-card h3 { font-size: 21px; }
  .topic-card h3 { font-size: 22px; }
  .study-body { padding: 32px 24px; }
  .study-card h3 { font-size: 22px; }

  /* Contact */
  .form-main .section-hd h2 { font-size: 24px; }
  .sidebar-heading { font-size: 20px; }
  .contact-value { font-size: 20px; }

  /* Shared */
  .partner-grid { gap: 16px; }
  .partner-card { padding: 24px; }
  .cta h2 { font-size: 28px; }
  .cta { padding: 88px 0; }
  /* Footer: columns stack, each one full width */
  .footer-top {
    flex-direction: column;
    gap: 36px;
    padding: 44px 0 36px;
  }
  .footer-about,
  .footer-links,
  .footer-col.newsletter {
    flex: 1 1 auto;
    max-width: 100%;
  }
  .newsletter .formkit-fields { flex-wrap: wrap !important; }
  .newsletter .formkit-field,
  .newsletter .formkit-submit { flex: 1 0 100% !important; }
  .newsletter .formkit-submit > span { text-align: center; }

  /* Copyright above the social icons, both left aligned */
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}