/* ==========================================================================
   Wellspring Energy Resources: site.css
   One stylesheet for every page. Built from the six approved artboards
   (Home, Approach, Focus areas, Leadership, Contact, Privacy).

   Contents
   1.  Tokens
   2.  Base and reset
   3.  Accessibility helpers (skip link, visually-hidden, focus)
   4.  Layout (container, section, bands, stack)
   5.  Type (eyebrow, headings, ledes)
   6.  Buttons and links
   7.  Site header and nav (mobile menu at <= 760px)
   8.  Heroes (home hero with topo mark, page hero)
   9.  Home pieces (glance strip, duo, NGP strip, final CTA)
   10. Cards, points, names, tags
   11. Lists (rule lists, bullets, steps)
   12. Section patterns (section head, intro, split, statement, CTA band,
       photo band)
   13. Buildco flow
   14. Focus areas (basins + basin map, tiers, matrix)
   15. Leadership (bios, stats)
   16. Contact (form, fields, status, details, map embed)
   17. Privacy (prose)
   18. Site footer
   19. Responsive overrides
   20. Reduced motion and print
   ========================================================================== */


/* 0. Self-hosted fonts (latin subsets from Google Fonts, see assets/fonts/README.md)
   ========================================================================== */

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('../assets/fonts/newsreader-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../assets/fonts/public-sans-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/plex-mono-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/plex-mono-latin-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 1. Tokens
   ========================================================================== */

:root {
  /* Palette (from the artboards) */
  --paper: #F6F7F5;
  --white: #FFFFFF;
  --mist: #EAEEF0;
  --rule: #D8DDE1;
  --rule-strong: #C3CBD2;
  --ink: #17212B;
  --body: #33414E;
  --slate: #4C5D6D;
  --quiet: #5E6C78;
  --accent: #375D81;
  --deep: #1B2A38;
  --deep-text: #F6F7F5;
  --deep-quiet: #B9C4CE;
  --deep-rule: #3A4A59;

  /* Supporting tints used by specific artboard elements */
  --deep-body: #D4DCE3;      /* lede and bullet text on deep bands */
  --deep-faint: #9FB0BF;     /* name roles on deep bands */
  --deep-fine: #8E9DAB;      /* footer legal line */
  --deep-box: #5B6C7C;       /* Buildco flow box outline */
  --accent-light: #9FB9D3;   /* link hover on deep bands (7:1 on --deep) */
  --underline: #9AA8B4;      /* quiet underline under ink links */
  --field-border: #7A8996;   /* form control outline (3.6:1 on white) */
  --basin-fill: rgba(55, 93, 129, .22);
  --error: #A3392B;

  /* Type */
  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-sans: 'Public Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Spacing scale (value-named, px) */
  --space-4: 4px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-72: 72px;
  --space-80: 80px;
  --space-88: 88px;
  --space-96: 96px;
  --space-104: 104px;
  --space-112: 112px;

  /* Layout */
  --container: 1200px;
  --gutter: 32px;
  --rhythm: 1;            /* multiplies section padding; drops on mobile */
  --radius: 2px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --focus-ring: var(--accent);
}


/* 2. Base and reset
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd {
  margin: 0;
}

h1, h2, h3 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

img,
svg {
  max-width: 100%;
}

img {
  height: auto;
}

ul[role="list"],
ol[role="list"] {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

a:hover {
  color: var(--ink);
}

/* Links on deep surfaces never hover to ink. Component link classes override. */
:where(.band--deep, .site-footer) a:hover {
  color: var(--white);
}

strong {
  font-weight: 600;
}

address {
  font-style: normal;
}

main:focus {
  outline: none;
}


/* 3. Accessibility helpers
   ========================================================================== */

.skip-link {
  position: absolute;
  top: -200px;
  left: 16px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--paper);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius);
}

.skip-link:focus,
.skip-link:hover {
  top: 16px;
  color: var(--paper);
}

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

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

.band--deep,
.site-footer {
  --focus-ring: var(--deep-text);
}


/* 4. Layout
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Vertical padding for a full-width section. Pair with .container inside.
   Default 96 / 96. Modifiers match the artboards' section spacing. */
.section {
  --pt: 96px;
  --pb: 96px;
  padding-top: calc(var(--pt) * var(--rhythm));
  padding-bottom: calc(var(--pb) * var(--rhythm));
}

.section--sm      { --pt: 72px;  --pb: 88px; }
.section--md      { --pt: 88px;  --pb: 88px; }
.section--lg      { --pt: 104px; --pb: 104px; }
.section--pt-72   { --pt: 72px; }
.section--pt-80   { --pt: 80px; }
.section--pt-104  { --pt: 104px; }
.section--pb-72   { --pb: 72px; }
.section--pb-88   { --pb: 88px; }
.section--pb-104  { --pb: 104px; }

.section--ruled {
  border-top: 1px solid var(--rule);
}

.band--mist {
  background: var(--mist);
}

.band--deep {
  background: var(--deep);
  color: var(--deep-text);
}

/* Vertical stack with a fixed gap (default 48). */
.stack {
  --stack-gap: 48px;
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap);
}

.stack--16 { --stack-gap: 16px; }
.stack--20 { --stack-gap: 20px; }
.stack--32 { --stack-gap: 32px; }
.stack--40 { --stack-gap: 40px; }
.stack--48 { --stack-gap: 48px; }
.stack--56 { --stack-gap: 56px; }

/* Links and buttons inside column layouts hug their text. */
:is(.stack, .duo__col, .split__head, .split__body, .bio, .cta-final__inner, .details, .page-hero__inner) > :is(.link-arrow, .btn) {
  align-self: flex-start;
}


/* 5. Type
   ========================================================================== */

.eyebrow {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--slate);
}

.eyebrow--sm {
  font-size: 12px;
  color: var(--quiet);
}

.band--deep .eyebrow {
  color: var(--deep-quiet);
}

/* Display headings (Newsreader 400). Sizes scale down with the viewport. */
.heading {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.1;
  text-wrap: balance;
}

.heading--xl  { font-size: clamp(2.25rem, 1.5rem + 2.8vw, 3.5rem); line-height: 1.05; } /* 56 */
.heading--lg  { font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem); }                         /* 48 */
.heading--md  { font-size: clamp(1.875rem, 1.35rem + 1.9vw, 2.75rem); }                 /* 44 */
.heading--sm  { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); }                    /* 40 */
.heading--xs  { font-size: clamp(1.625rem, 1.25rem + 1.3vw, 2.25rem); line-height: 1.15; } /* 36 */
.heading--2xs { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.15; }      /* 32 */
.heading--3xs { font-size: clamp(1.375rem, 1.15rem + .75vw, 1.75rem); line-height: 1.2; } /* 28 */

/* Body-copy helpers used by more than one component */
.text-body {
  color: var(--body);
}

.measure-520 { max-width: 520px; }
.measure-680 { max-width: 680px; }


/* 6. Buttons and links
   ========================================================================== */

.btn {
  display: inline-block;
  padding: 15px 26px;
  border: 0;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: filter .2s ease, transform .2s ease;
}

.btn:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
}

.btn--primary,
.btn--primary:hover {
  background: var(--accent);
  color: var(--white);
}

.btn--ink,
.btn--ink:hover {
  background: var(--ink);
  color: var(--paper);
}

.btn--sm {
  padding: 10px 18px;
  font-size: 15px;
  font-weight: 500;
}

.btn--block {
  display: block;
  width: 100%;
}

/* Inline SVG icons (copied from the artboards). Size comes from width/height. */
.icon {
  display: inline-block;
  flex: none;
  vertical-align: -3px;
}

.icon--sm {
  vertical-align: -2px;
}

/* Text link with a trailing arrow or external-link icon. Accent by default. */
.link-arrow {
  font-size: 16px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: underline;
  transition: color .2s ease;
}

.link-arrow:hover {
  color: var(--ink);
}

.link-arrow .icon {
  margin-left: 6px;
  transition: transform .2s ease;
}

.link-arrow .icon--sm {
  margin-left: 5px;
}

.link-arrow:hover .icon--arrow {
  transform: translateX(3px);
}

.link-arrow--sm {
  font-size: 15px;
}

/* Ink text, quiet grey underline (hero "How we partner") */
.link-arrow--ink {
  color: var(--ink);
  text-underline-offset: 5px;
  text-decoration-color: var(--underline);
}

.link-arrow--ink:hover {
  color: var(--accent);
}

/* Light text on deep bands ("Meet the team") */
.link-arrow--light {
  color: var(--deep-text);
  text-underline-offset: 5px;
}

.link-arrow--light:hover {
  color: var(--accent-light);
}

/* Plain ink link with quiet underline (contact details email and phone) */
.link-quiet {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--underline);
  transition: color .2s ease;
}

.link-quiet:hover {
  color: var(--accent);
}

/* Icon + text on one line (address, email, phone) */
.icon-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.icon-row__indent {
  padding-left: 24px;
}


/* 7. Site header and nav
   ========================================================================== */

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-block: 28px;
}

.site-header__logo {
  display: block;
  line-height: 0;
}

.site-header__logo img {
  display: block;
  width: auto;
  height: 40px;
}

/* "Menu" button: shown only at <= 760px, and only once js/site.js has run. */
.site-header__toggle {
  display: none;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}

.site-header__toggle:hover {
  border-color: var(--ink);
}

.site-header__toggle::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .2s ease;
}

.site-header__toggle[aria-expanded="true"]::after {
  transform: translateY(2px) rotate(-135deg);
}

.site-nav__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
  font-weight: 500;
}

.site-nav__link {
  color: var(--ink);
  text-decoration: none;
  transition: color .2s ease;
}

.site-nav__link:hover {
  color: var(--accent);
}

.site-nav__link[aria-current="page"] {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 6px;
}

.site-nav__cta[aria-current="page"],
.site-nav__cta[aria-current="page"]:hover {
  background: var(--accent);
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 6px;
}


/* 8. Heroes
   ========================================================================== */

/* Home hero with the faint topo mark */
.hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--rule);
}

.hero__mark {
  position: absolute;
  top: -60px;
  right: -120px;
  width: 640px;
  max-width: none;
  height: 640px;
  opacity: .13;
  pointer-events: none;
  user-select: none;
  animation: topo-settle 1.8s var(--ease) both;
}

@keyframes topo-settle {
  from { opacity: 0; transform: translate(24px, 16px) scale(.97); }
  to   { opacity: .13; transform: none; }
}

.hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-top: calc(96px * var(--rhythm));
  padding-bottom: calc(104px * var(--rhythm));
}

.hero__title {
  max-width: 900px; /* holds the h1 to 3 lines from tablet up */
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1.5rem + 3vw, 3.5rem); /* 36 to 56 */
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -.01em;
  text-wrap: balance;
}

.hero__lede {
  max-width: 620px;
  font-size: clamp(1.125rem, 1rem + .4vw, 1.25rem); /* 18 to 20 */
  line-height: 1.55;
  color: var(--body);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  padding-top: 8px;
}

/* Inner-page hero: eyebrow, h1, then a lede or body paragraph */
.page-hero {
  border-bottom: 1px solid var(--rule);
}

.page-hero__inner {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: calc(72px * var(--rhythm));
  padding-bottom: calc(64px * var(--rhythm));
}

.page-hero__title {
  max-width: 860px;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1.5rem + 2.8vw, 3.5rem); /* 36 to 56 */
  font-weight: 400;
  line-height: 1.06;
  text-wrap: balance;
}

.page-hero__lede {
  max-width: 680px;
  font-size: clamp(1.125rem, 1rem + .4vw, 1.25rem);
  line-height: 1.55;
  color: var(--body);
}

/* 404: a short page, so the hero takes most of the viewport */
.page-hero--404 {
  border-bottom: 0;
}

.page-hero--404 .page-hero__inner {
  min-height: 56vh;
  justify-content: center;
  padding-bottom: calc(96px * var(--rhythm));
}

.page-hero__body {
  max-width: 680px;
  margin-top: 8px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--body);
}


/* 9. Home pieces
   ========================================================================== */

/* At-a-glance strip (dl) and leadership stats row share the ruled grid. */
.glance {
  padding-top: calc(48px * var(--rhythm));
  padding-bottom: calc(52px * var(--rhythm));
}

.glance__list,
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.glance__item,
.stats__item {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-right: 1px solid var(--rule);
}

.glance__list {
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* three facts on Home */
}

.glance__item {
  gap: 10px;
  padding: 8px 28px;
}

.glance__item:first-child,
.stats__item:first-child {
  padding-left: 0;
}

.glance__item:last-child,
.stats__item:last-child {
  padding-right: 0;
  border-right: 0;
}

.glance__label {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--quiet);
}

.glance__value {
  margin: 0;
  font-size: 17px;
  line-height: 1.45;
}

.glance__value--display {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.3rem + .5vw, 1.75rem); /* 24 to 28 */
  line-height: 1.2;
}

/* Two equal columns (home "Where we invest" + basin tags) */
.duo {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
}

.duo__col {
  flex: 1 1 420px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.duo__col--tight {
  gap: 14px;
}

/* NGP strip: logo and one sentence, ruled top and bottom. Its h2 is
   visually hidden. */
.ngp-strip {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.ngp-strip__logo {
  flex: 0 0 auto;
  display: block;
  height: 40px;
  width: auto;
}

.ngp-strip__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 40px;
  padding-block: calc(56px * var(--rhythm));
}

.ngp-strip__text {
  flex: 1 1 420px;
  min-width: 0;
  color: var(--body);
}

/* Large closing CTA (home) */
.cta-final__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding-block: calc(112px * var(--rhythm));
}

.cta-final__lede {
  max-width: 600px;
  font-size: clamp(1.0625rem, .95rem + .4vw, 1.1875rem); /* 17 to 19 */
  color: var(--body);
}

.cta-final__btn {
  margin-top: 8px;
}

.cta-final__note {
  margin-top: 8px;
  font-size: 13px;
  color: var(--quiet);
}


/* 10. Cards, points, names, tags
   ========================================================================== */

/* Three-column ruled cards (2px ink rule on top) */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cards > .card {
  min-width: 0;
}

.card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-top: 2px solid var(--ink);
  padding-top: 24px;
}

.card__title {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
}

.card__text {
  color: var(--body);
}

/* One fact line across the whole deal-types section (Approach) */
.section-fact {
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  font-size: 19px;
  color: var(--ink);
}

/* "What we look for" under the deal cards */
.lookfor {
  display: grid;
  gap: 20px;
}

/* Cards with a lead paragraph and a ruled examples list (Approach deal
   types). Subgrid puts titles, leads, and lists on shared rows, so the
   list tops line up across columns whatever the lead lengths. */
.cards--examples .rule-list {
  margin-top: 8px;
}

@supports (grid-template-rows: subgrid) {
  .cards--examples > .card {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
  }
}

/* Short points on a deep band (no rule) */
.points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 48px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Two points: two equal columns, stacked on phones (see Mobile) */
.points--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.points--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.point {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.point__title {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
}

.point__text {
  color: var(--deep-quiet);
}

/* Founders' names row on the home deep band */
.names {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  border-top: 1px solid var(--deep-rule);
  padding-top: 32px;
}

.names__list {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 48px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.name {
  width: 220px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.name__name {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.3;
}

.name__role {
  font-size: 14px;
  line-height: 1.5;
  color: var(--deep-faint);
}

/* Outlined tags (Home basins) */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
}

.tag {
  min-width: 0;
  padding: 8px 12px;
  border: 1px solid var(--rule-strong);
}


/* 11. Lists
   ========================================================================== */

/* Ruled list: hairline under every item */
.rule-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rule-list > li {
  padding-block: 12px;
  border-bottom: 1px solid var(--rule);
}

.rule-list--top {
  border-top: 1px solid var(--rule);
}

.rule-list--md > li {
  padding-block: 14px;
}

.rule-list--lg > li {
  padding-block: 16px;
}

/* First item sits flush with the top (lists that open under a heading) */
.rule-list--flush > li:first-child {
  padding-top: 0;
}

.rule-list--body {
  color: var(--body);
}

.rule-list--small {
  font-size: 16px;
}

.rule-list strong,
.rule-list__key {
  font-weight: 600;
  color: var(--ink);
}

.rule-list__note {
  color: var(--quiet);
}

/* Two columns of ruled items (leadership "Where the team has worked") */
.rule-list--cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rule-list--cols > li {
  padding-right: 16px;
}

/* Note under the Focus-areas basin list */
.basins__note {
  margin-top: 16px;
  font-size: 15px;
  color: var(--quiet);
}

/* LinkedIn icon links (principals and team) */
.linkedin-link {
  display: inline-flex;
  align-items: center;
  color: var(--accent);
}

.linkedin-link:hover,
.linkedin-link:focus-visible {
  color: var(--ink);
}

/* Team list: name over title, LinkedIn icon at the right */
.team-list__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.team-list__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.team-list__name {
  font-weight: 600;
  color: var(--ink);
}

.team-list__role {
  font-size: 15px;
  color: var(--slate);
}

/* Leadership "Where the principals have worked": two labeled columns */
.worked {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 40px;
}

.worked__group {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 8px;
}

/* Two-column ruled bullets (Buildco notes). Light text on deep bands.
   A grid, so an odd last item keeps its column width instead of
   stretching across the row. One column below about 930px. */
.bullets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr));
  gap: 28px 48px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bullets > li {
  min-width: 0;
  border-top: 1px solid var(--rule);
  padding-top: 18px;
  color: var(--body);
}

.band--deep .bullets > li {
  border-top-color: var(--deep-rule);
  color: var(--deep-body);
}

/* Numbered steps ("How we work") */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 40px 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.step {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid var(--rule);
  padding-top: 20px;
}

.step__num {
  font-family: var(--font-display);
  font-size: 44px;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.step__title {
  margin-top: 6px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
}

.step__text {
  font-size: 16px;
  color: var(--body);
}


/* 12. Section patterns
   ========================================================================== */

/* Heading with a link on the right, baseline aligned */
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

/* Eyebrow / heading / lede stacked */
.section-intro {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.section-intro > .heading {
  max-width: 760px;
}

.section-intro__lede {
  max-width: 680px;
  font-size: clamp(1.0625rem, .95rem + .4vw, 1.1875rem); /* 17 to 19 */
  color: var(--body);
}

.band--deep .section-intro__lede {
  max-width: 640px;
  color: var(--deep-body);
}

/* Heading column (1) + text column (2). Responsibility, NGP, worked. */
.split {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 40px;
}

.split--gap-40 {
  gap: 40px;
}

.split__head {
  flex: 1 1 320px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.split__body {
  flex: 2 1 520px;
  min-width: 0;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Plain list in the text column (leadership "Where the team has worked") */
.split__list {
  flex: 2 1 520px;
  min-width: 0;
}

.split__text {
  font-size: clamp(1.0625rem, .95rem + .4vw, 1.1875rem); /* 17 to 19 */
  line-height: 1.6;
  color: var(--body);
}

/* A logo as the heading in the head column (Approach "Capital partner":
   the h2 holds the NGP logo, alt="NGP"). Left-aligned, 56px tall. */
.partner-logo {
  margin: 0;
  line-height: 0;
}

.partner-logo__img {
  display: block;
  width: auto;
  height: 56px;
}

/* Single large statement paragraph (Approach) */
.statement {
  padding-top: calc(80px * var(--rhythm));
  padding-bottom: calc(88px * var(--rhythm));
}

.statement__text {
  max-width: 840px;
  font-size: clamp(1.1875rem, 1rem + .6vw, 1.375rem); /* 19 to 22 */
  line-height: 1.55;
  color: var(--ink);
}

/* Inner-page closing CTA band: heading left, button right */
.cta-band {
  border-top: 1px solid var(--rule);
}

.cta-band__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: calc(80px * var(--rhythm));
  padding-bottom: calc(96px * var(--rhythm));
}

/* Full-width duotone photo between sections, with a small location caption
   under it (Home, Approach, Focus areas). The image is decorative (alt="");
   the figcaption names the place. It carries no vertical margin, so it sits
   flush between the sections around it. Each image has an object-position
   modifier that keeps its subject in frame from 220px tall (phones) to
   520px tall (wide screens). */
.photo-band__img {
  display: block;
  width: 100%;
  max-width: none;
  height: clamp(220px, 34vw, 520px);
  object-fit: cover;
  background: var(--mist);
}

.photo-band__img--el-capitan     { object-position: 80% 50%; } /* mountain, lower right */
.photo-band__img--nd-badlands    { object-position: 50% 70%; } /* horizon, lower half */
.photo-band__img--uinta-badlands { object-position: 50% 30%; } /* ridges, middle */
.photo-band__img--west-texas     { object-position: 50% 88%; } /* grassland and peak, bottom */

/* Past 2560px the 520px cap makes the crop thinner, so move it up to keep
   El Capitan's summit and the ND buttes and horizon in frame. */
@media (min-width: 2561px) {
  .photo-band__img--el-capitan  { object-position: 80% 40%; }
  .photo-band__img--nd-badlands { object-position: 50% 55%; }
  .photo-band__img--west-texas  { object-position: 50% 80%; }
}

.photo-band__caption {
  padding-top: 12px;
  padding-bottom: 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--quiet);
}

/* The page hero's bottom rule is redundant right above a photo. */
.page-hero:has(+ .photo-band) {
  border-bottom: 0;
}


/* 13. Buildco flow
   ========================================================================== */

.flow {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  row-gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.flow__step {
  flex: 1 1 230px;
  min-width: 0;
  display: flex;
  align-items: center;
}

.flow__step:last-child {
  flex-basis: 200px;
}

.flow__box {
  flex: 1 1 auto;
  min-width: 0;
  align-self: stretch;
  display: flex;
  align-items: center;
  padding: 20px 22px;
  border: 1px solid var(--deep-box);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--deep-text);
}

.flow__box--end {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--white);
  font-weight: 600;
}

.flow__arrow {
  flex: 0 0 auto;
  padding: 0 14px;
  font-size: 22px;
  line-height: 1;
  color: var(--deep-quiet);
}

/* One explanation under each flow step, in the same four columns */
.flow-notes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.flow-notes > li {
  min-width: 0;
  border-top: 1px solid var(--deep-rule);
  padding-top: 18px;
  color: var(--deep-body);
}

.flow-aside {
  max-width: 720px;
  color: var(--deep-body);
}


/* 14. Focus areas
   ========================================================================== */

/* Basin map (3) + basin list (2) */
.basins {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 64px;
}

.basins__map {
  flex: 3 1 520px;
  min-width: 0;
  margin: 0;
}

.basins__aside {
  flex: 2 1 320px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Inline the contents of assets/img/us-basins.svg; its root is svg.basin-map */
.basin-map > svg,
svg.basin-map {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.basin-map__states :is(path, polygon, rect) {
  fill: var(--mist);
  stroke: var(--rule-strong);
  stroke-width: .75px;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.basin-map__basins :is(path, polygon, rect) {
  fill: var(--basin-fill);
  stroke: var(--accent);
  stroke-width: 1.25px;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* Label size is in SVG units (viewBox is 960 wide). At the artboard's map
   width (about 640px) 18 units renders near 12px on screen; 12 units would
   render near 8px. Labels are aria-hidden; the basin list carries the text. */
.basin-map__labels text {
  font-family: var(--font-sans);
  font-size: var(--basin-label-size, 18px);
  font-weight: 600;
  fill: var(--ink);
  paint-order: stroke;
  stroke: var(--paper);
  stroke-width: 4px;
  stroke-linejoin: round;
  pointer-events: none;
}

/* Source credit under the basin map (figcaption) */
.basins__credit {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--quiet);
}

/* Core vs selective tiers on a mist band */
.tiers {
  display: flex;
  flex-wrap: wrap;
  gap: 64px;
}

.tier {
  flex: 1 1 340px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  border-top: 2px solid var(--ink);
  padding-top: 24px;
}

.tier--core {
  border-top-color: var(--accent);
}

.tier--wide {
  flex: 1.5 1 440px;
}

/* Structured-capital matrix. The wrapper scrolls sideways on small screens. */
.matrix-wrap {
  position: relative;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* edge shadows that appear only when there is more to scroll */
  background:
    linear-gradient(to right, var(--paper) 30%, rgba(246, 247, 245, 0)) left / 40px 100% no-repeat local,
    linear-gradient(to left, var(--paper) 30%, rgba(246, 247, 245, 0)) right / 40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(23, 33, 43, .14), rgba(23, 33, 43, 0)) left / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(23, 33, 43, .14), rgba(23, 33, 43, 0)) right / 14px 100% no-repeat scroll;
}

.matrix {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  font-size: 16px;
  line-height: 1.5;
}

.matrix thead tr {
  border-bottom: 2px solid var(--ink);
}

.matrix tbody tr {
  border-bottom: 1px solid var(--rule);
}

.matrix__corner {
  width: 28%;
  padding: 16px 24px 16px 0;
}

.matrix th[scope="col"] {
  padding: 16px 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
  color: var(--slate);
}

.matrix th[scope="row"] {
  padding: 20px 24px 20px 0;
  text-align: left;
  font-weight: 600;
  color: var(--ink);
}

.matrix td {
  padding: 20px 12px;
  text-align: center;
}

.matrix__label,
.matrix__sub {
  display: block;
}

.matrix__sub {
  font-size: 14px;
  font-weight: 400;
  color: var(--quiet);
}

/* Upstream column: no fill, so the matrix reads as a list of proposals, not a chart */
.matrix .matrix__hl {
  background: transparent;
  color: var(--ink);
}

.matrix__dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: middle;
}

.matrix-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: var(--quiet);
}


/* 15. Leadership
   ========================================================================== */

.bios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 48px;
}

.bio {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Square duotone headshot above the ruled head */
.bio__photo {
  display: block;
  width: 160px;
  height: 160px;
  margin-bottom: 10px;
  object-fit: cover;
  background: var(--mist);
}

.bio__head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-top: 2px solid var(--ink);
  padding-top: 22px;
}

.bio__role {
  max-width: 260px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--slate);
}

.bio__text {
  font-size: 16px;
  color: var(--body);
}

.bio__meta {
  font-size: 15px;
  color: var(--quiet);
}

/* Collapsible bio: the toggle only appears when the script has run, so the
   page without JavaScript shows every bio in full. */
.bio__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.bio__toggle {
  display: none;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

.bio__toggle:hover,
.bio__toggle:focus-visible {
  color: var(--ink);
}

.bio__toggle-icon {
  transition: transform .2s ease;
}

.bio--collapsible .bio__toggle {
  display: inline-flex;
}

.bio--collapsible .bio__body {
  display: none;
}

.bio--collapsible.is-open .bio__body {
  display: flex;
}

.bio--collapsible.is-open .bio__toggle-icon {
  transform: rotate(180deg);
}

/* Stats row on a deep band (shares grid rules with .glance__list above) */
.stats__item {
  gap: 4px;
  padding: 8px 24px;
  border-right-color: var(--deep-rule);
}

.stats__value {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 1.9rem + 2vw, 3.5rem); /* 40 to 56 */
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.stats-note {
  max-width: 760px;
  color: var(--deep-body);
}

.stats__label {
  font-size: 15px;
  color: var(--deep-quiet);
  text-wrap: balance; /* keeps "co-founded" from splitting at its hyphen */
}


/* 16. Contact
   ========================================================================== */

.contact {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 64px 80px;
}

.contact__main {
  flex: 3 1 560px;
  min-width: 0;
}

.contact__aside {
  flex: 2 1 340px;
  min-width: 0;
}

.form {
  display: flex;
  flex-direction: column;
  gap: 24px;
  border-top: 2px solid var(--ink);
  padding-top: 28px;
}

.form__row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.form__row > .field {
  flex: 1 1 240px;
}

.field {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field__label {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink);
}

.field__req {
  margin-left: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--quiet);
}

.field__control {
  width: 100%;
  height: 48px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.4;
  transition: border-color .2s ease;
}

.field__control:hover {
  border-color: var(--slate);
}

.field__control:focus {
  border-color: var(--accent);
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.field__control:user-invalid {
  border-color: var(--error);
}

textarea.field__control {
  height: auto;
  min-height: 168px;
  padding: 12px 14px;
  line-height: 1.5;
  resize: vertical;
}

.form__note {
  max-width: 620px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--quiet);
}

/* Honeypot field for the launch form service: off-screen, never shown */
.form__hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Confirmation that replaces the form (filled by js/site.js) */
.form-status {
  margin: 0;
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink);
}

.form-status:not(:empty) {
  border-top: 2px solid var(--ink);
  padding-top: 28px;
}

.form-status:focus {
  outline: none;
}

/* Details column: name, address/email/phone/LinkedIn, map */
.details {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.details__head {
  border-top: 2px solid var(--ink);
  padding-top: 22px;
}

.details__list {
  font-size: 16px;
}

.details__address {
  display: flex;
  flex-direction: column;
  color: var(--body);
}

/* Map: Google Maps embed with the "Open in Google Maps" link under it */
.details__map {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.map-embed {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--rule-strong);
  filter: saturate(.35);
}


/* 17. Privacy (reading column)
   ========================================================================== */

.prose {
  max-width: 720px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 56px;
}

.prose__header {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.prose__meta {
  font-size: 15px;
  font-weight: 500;
  color: var(--quiet);
}

.prose__body {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.prose__section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-top: 1px solid var(--rule);
  padding-top: 28px;
}

.prose__section h2 {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.15rem + .75vw, 1.75rem); /* 22 to 28 */
  font-weight: 400;
  line-height: 1.2;
}

.prose__section p {
  min-width: 0;
  line-height: 1.65;
  color: var(--body);
}

.prose a {
  color: var(--accent);
  font-weight: 600;
}

.prose a:hover {
  color: var(--ink);
}


/* 18. Site footer
   ========================================================================== */

.site-footer {
  background: var(--deep);
  color: var(--deep-quiet);
  font-size: 14px;
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-top: calc(64px * var(--rhythm));
  padding-bottom: 40px;
}

.site-footer__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 40px;
}

.site-footer__brand {
  flex: 1 1 320px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.site-footer__logo {
  display: block;
  width: auto;
  height: 34px;
  align-self: flex-start;
}

.site-footer__nav {
  flex: 0 1 180px;
}

.site-footer__links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__contact {
  flex: 0 1 280px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-style: normal;
}

.site-footer__links a,
.site-footer__contact a {
  color: var(--deep-text);
  text-decoration: none;
}

.site-footer__links a:hover,
.site-footer__contact a:hover,
.site-footer__links a[aria-current="page"] {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.site-footer__contact .icon--sm {
  margin-left: 5px;
}

.site-footer__legal {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--deep-rule);
  padding-top: 20px;
  font-size: 12px;
  color: var(--deep-fine);
}

.site-footer__legal a {
  color: var(--deep-quiet);
}

.site-footer__legal a:hover {
  color: var(--white);
}


/* 19. Responsive overrides
   ========================================================================== */

/* Ruled grids drop to two columns */
@media (max-width: 1000px) {
  .glance__list,
  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 24px;
  }

  .glance__item:nth-child(odd),
  .stats__item:nth-child(odd) {
    padding-left: 0;
    padding-right: 28px;
    border-right: 1px solid var(--rule);
  }

  .stats__item:nth-child(odd) {
    padding-right: 24px;
    border-right-color: var(--deep-rule);
  }

  .glance__item:nth-child(even),
  .stats__item:nth-child(even) {
    padding-left: 28px;
    padding-right: 0;
    border-right: 0;
  }

  .stats__item:nth-child(even) {
    padding-left: 24px;
  }
}

/* The at-a-glance strip keeps its three columns on tablets, then stacks */
@media (max-width: 1000px) {
  .glance__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 0;
  }

  .glance__item,
  .glance__item:nth-child(odd),
  .glance__item:nth-child(even) {
    padding: 8px 20px;
    border-right: 1px solid var(--rule);
  }

  .glance__item:first-child {
    padding-left: 0;
  }

  .glance__item:last-child {
    padding-right: 0;
    border-right: 0;
  }
}

@media (max-width: 760px) {
  .glance__list {
    grid-template-columns: minmax(0, 1fr);
  }

  .glance__item,
  .glance__item:nth-child(odd),
  .glance__item:nth-child(even),
  .glance__item:first-child,
  .glance__item:last-child {
    padding: 16px 0;
    border-right: 0;
    border-bottom: 1px solid var(--rule);
  }
}

/* Mobile */
@media (max-width: 760px) {
  :root {
    --gutter: 20px;
    --rhythm: .62;
  }

  /* Header: logo + Menu button, nav drops below as a stacked list */
  .site-header__inner {
    gap: 12px 16px;
    padding-block: 18px;
  }

  .site-header__logo img {
    height: 32px;
  }

  .js .site-header__toggle {
    display: inline-flex;
  }

  .site-nav {
    flex: 1 0 100%;
  }

  .js .site-header__toggle[aria-expanded="false"] + .site-nav {
    display: none;
  }

  .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    border-top: 1px solid var(--rule);
    font-size: 17px;
  }

  .site-nav__list > li {
    border-bottom: 1px solid var(--rule);
  }

  .site-nav__list > li:last-child {
    border-bottom: 0;
    padding-top: 16px;
  }

  .site-nav__link {
    display: block;
    padding-block: 12px;
  }

  .site-nav__cta {
    display: block;
    padding-block: 13px;
  }

  /* Hero mark shrinks and tucks into the corner */
  .hero__mark {
    top: -40px;
    right: -150px;
    width: 420px;
    height: 420px;
  }

  .hero__inner {
    gap: 22px;
  }

  /* Tighter gaps */
  .stack--56 { --stack-gap: 40px; }
  .stack--48 { --stack-gap: 36px; }
  .stack--40 { --stack-gap: 32px; }

  .basins,
  .tiers {
    gap: 40px;
  }

  .contact {
    gap: 48px;
  }

  .points,
  .bios,
  .duo {
    gap: 36px;
  }

  .points--two,
  .points--three {
    grid-template-columns: minmax(0, 1fr);
  }

  .statement__text {
    font-size: 19px;
  }

  .page-hero__body {
    font-size: 17px;
  }

  .flow-notes {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Buildco flow stacks; arrows point down */
  .flow {
    flex-direction: column;
    row-gap: 0;
  }

  .flow__step,
  .flow__step:last-child {
    flex: 0 0 auto;
    flex-direction: column;
    align-items: stretch;
  }

  .flow__arrow {
    align-self: center;
    padding: 8px 0;
    transform: rotate(90deg);
  }

  .names__list {
    gap: 20px 32px;
  }
}

/* Small phones: ruled grids become single ruled stacks */
@media (max-width: 560px) {
  .worked {
    grid-template-columns: minmax(0, 1fr);
  }

  .glance__list,
  .stats {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
  }

  .glance__item,
  .glance__item:nth-child(odd),
  .glance__item:nth-child(even),
  .stats__item,
  .stats__item:nth-child(odd),
  .stats__item:nth-child(even) {
    padding: 16px 0;
    border-right: 0;
    border-bottom: 1px solid var(--rule);
  }

  .stats__item,
  .stats__item:nth-child(odd),
  .stats__item:nth-child(even) {
    border-bottom-color: var(--deep-rule);
  }

  .glance__item:first-child,
  .stats__item:first-child {
    padding-top: 0;
  }

  .glance__item:last-child,
  .stats__item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .rule-list--cols {
    grid-template-columns: minmax(0, 1fr);
  }

  .rule-list--cols > .rule-list__filler {
    display: none;
  }

  .name {
    width: 100%;
  }

  /* Basin map: at phone width the map is about 320-520px wide, so 18-unit
     labels would render at 6-9px. 28 units renders at about 10-15px. */
  .basin-map {
    --basin-label-size: 28px;
  }
}


/* 20. Reduced motion and print
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  .hero__mark {
    animation: none;
    opacity: .13;
  }

  .btn:hover,
  .link-arrow:hover .icon--arrow {
    transform: none;
  }
}

@media print {
  .skip-link,
  .site-header__toggle,
  .hero__mark {
    display: none !important;
  }

  .site-nav {
    display: block !important;
  }

  .band--deep,
  .site-footer {
    background: none;
    color: var(--ink);
  }
}