:root {
  --white: #FFFFFF;
  --mist: #F7FBFA;
  --aqua-50: #EDF6F4;
  --aqua-100: #D7ECE8;
  --aqua-200: #99CFC2;
  --aqua-300: #8BB7AB;
  --teal: #3F7D79;
  --deep-teal: #1E4D4A;
  --ink: #1E2928;
  --muted: #637270;
  --rose-50: #FCE9E4;
  --rose: #F29B87;
  --brick: #BD5947;
  --wine: #580404;
  --blue-50: #E8ECFA;
  --blue: #6E83C7;
  --forest-50: #E8F4E9;
  --forest: #254D2A;
  --orange-50: #F9D9A6;
  --orange: #F2AC4C;
  --burnt-orange: #C8791E;
  --brown: #583900;
  --purple-50: #F3EBF6;
  --purple: #563B62;
  --gold-50: #F6DC88;
  --gold: #F1BE15;
  --gold-dark: #CEA00C;
  --action-blue: #1A73E8;
  --accent-cyan: #0F8F96;
  --accent-violet: #6F42C1;
  --accent-amber: #D48A00;
  --accent-red: #D94F5C;
  /* Shared elevation for content cards outside the Nutrition Compass page. */
  --card-shadow:
    0 24px 48px rgba(30, 41, 40, .16),
    0 10px 20px rgba(88, 57, 0, .10);
  /* Reserved for cards that are genuinely interactive. */
  --card-shadow-hover:
    0 32px 62px rgba(30, 41, 40, .20),
    0 14px 24px rgba(88, 57, 0, .12);
  --page-gutter: clamp(32px, calc(12.691px + 5.3636vw), 150px);
  --content-max: 1620px;
  --adime-monitor-max: 1400px;
  --teaser-gutter: var(--page-gutter);
  --teaser-column-gap: clamp(12px, 2vw, 32px);
  --header-rail: clamp(96px, calc(87.164px + 2.4545vw), 150px);
  --nav-rail-height: clamp(42px, calc(39.709px + 0.6364vw), 56px);
  --nav-offset-y: clamp(16px, calc(14.527px + 0.4091vw), 25px);
  --brand-heading-top: clamp(52px, calc(35.964px + 4.4545vw), 150px);
  --nav-link-size: clamp(0.815rem, calc(0.6003rem + 0.2147vw), 1.15rem);
  --nav-link-gap: clamp(10px, calc(1.591px + 0.8409vw), 28px);
  --menu-label-inset: clamp(22px, calc(20.036px + 0.5455vw), 34px);
  --menu-button-size: clamp(48px, calc(43.5px + 1.25vw), 56px);
  --hero-rail: 900px;
  --site-card-padding: clamp(32px, calc(25.59px + 0.641vw), 42px);
  --gold-card-border-width: 3.5px;
  --taupe-card-border-width: 1px;
  --section-heading-size: clamp(1.75rem, calc(1.3125rem + 1.9444vw), 3.25rem);
  --subsection-heading-above: clamp(75px, calc(65.385px + 0.9615vw), 90px);
  --subsection-heading-below: clamp(32px, calc(30.077px + 0.1923vw), 35px);
  --hero-copy-rail: 5.45rem;
  --brass-divider-rail: 20px;
  --footer-rail: 154px;
  --display: "Montserrat", "Segoe UI", Arial, sans-serif;
  --brand: "Cormorant SC", "Cormorant Garamond", Georgia, serif;
  --sans: Inter, "Segoe UI", Arial, sans-serif;
  --body: var(--sans);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  max-width: 100%;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--mist);
  font-family: var(--sans);
  font-size: clamp(1.1rem, calc(1.0755rem + 0.1091vw), 1.25rem);
  font-weight: 550;
  line-height: 1.75;
  letter-spacing: .01em;
}

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

main {
  position: relative;
  overflow: hidden;
  background-color: #FFF6E8;
}

main > :not(.page-art) {
  position: relative;
  z-index: 1;
}

.site-header {
  min-height: var(--header-rail);
  padding: 0;
  background: transparent;
  position: relative;
  z-index: 2;
}

.site-header-inner,
.hero-content {
  width: min(var(--content-max), calc(100% - var(--page-gutter) - var(--page-gutter)));
  margin-inline: auto;
}

.site-header-inner {
  position: relative;
  min-height: var(--header-rail);
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: var(--header-rail) auto;
  align-items: center;
  align-content: start;
  gap: 0 28px;
}

.site-header-inner::before {
  content: "";
  grid-column: 1 / -1;
  grid-row: 1;
  align-self: center;
  width: 100%;
  height: var(--nav-rail-height);
  border: 1px solid rgba(246, 220, 136, .72);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(63, 125, 121, .28), rgba(30, 77, 74, .08) 46%, rgba(88, 57, 0, .10)),
    #1E4D4A;
  box-shadow:
    0 2px 0 rgba(246, 220, 136, .45),
    0 10px 26px rgba(30, 77, 74, .20);
  transform: translateY(var(--nav-offset-y));
  pointer-events: none;
}

.nav-toggle {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

.nav-toggle-label {
  display: none;
}

.brand-heading {
  grid-column: 1 / -1;
  grid-row: 2;
  justify-self: center;
  align-self: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  text-align: center;
  margin-top: var(--brand-heading-top);
}

.persephone-wordmark {
  display: block;
  grid-column: 1 / -1;
  grid-row: 2;
  justify-self: center;
  align-self: start;
  min-width: 0;
  font-family: "Cormorant SC", serif;
  font-size: clamp(4.75rem, calc(3.65rem + 3.2vw), 8rem);
  font-weight: 700;
  line-height: 0.8;
  letter-spacing: 0.04em;
  text-decoration: none;
  background:
    linear-gradient(
      116deg,
      rgba(255, 242, 191, 0) 0%,
      rgba(255, 242, 191, .14) 8%,
      rgba(255, 242, 191, .58) 18%,
      rgba(246, 220, 136, .50) 28%,
      rgba(241, 190, 21, .22) 38%,
      rgba(206, 160, 12, .36) 65%,
      rgba(88, 57, 0, .24) 88%,
      rgba(88, 57, 0, .12) 94%,
      rgba(88, 57, 0, 0) 96%,
      rgba(88, 57, 0, 0) 100%
    ),
    linear-gradient(
      180deg,
      rgba(255, 248, 218, .52) 0%,
      rgba(246, 220, 136, .28) 24%,
      rgba(241, 190, 21, .06) 46%,
      rgba(206, 160, 12, .16) 84%,
      rgba(88, 57, 0, .28) 100%
    ),
    linear-gradient(
      100deg,
      #F6DC88 0%,
      #F6DC88 10%,
      #F1BE15 35%,
      #CEA00C 65%,
      #6A4600 100%
    );
  background-size: 100% 100%, 100% 100%, 100% 100%;
  background-position: center, center, center;
  background-blend-mode: normal, soft-light, normal;
  -webkit-background-clip: text;
  background-clip: text;
  color: #F1BE15;
  -webkit-text-fill-color: #F1BE15;
  -webkit-text-stroke: 0;
  paint-order: normal;
  text-shadow: none;
  filter:
    drop-shadow(-1px -1px 0 rgba(255, 250, 224, 0.34))
    drop-shadow(1px 1px 0 rgba(88, 57, 0, 0.58))
    drop-shadow(0 2px 1px rgba(88, 57, 0, 0.46))
    drop-shadow(0 4px 5px rgba(88, 57, 0, 0.30))
    drop-shadow(0 9px 13px rgba(88, 57, 0, 0.14));
  opacity: 1;
  max-width: 100%;
  text-align: center;
  white-space: normal;
  margin-top: 0;
  margin-bottom: 0;
  overflow-wrap: normal;
  word-break: normal;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .persephone-wordmark {
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

@media (max-width: 700px) {
  .persephone-wordmark {
    filter:
      drop-shadow(-1px -1px 0 rgba(255, 246, 205, 0.22))
      drop-shadow(1px 1px 0 rgba(88, 57, 0, 0.44))
      drop-shadow(0 2px 2px rgba(88, 57, 0, 0.24))
      drop-shadow(0 5px 7px rgba(88, 57, 0, 0.12));
  }
}

.nc-landing .nc-closing-section .nc-cta-ready {
  margin-top: 32px;
  color: #1E4D4A;
  font-family: var(--display);
  font-size: clamp(1.15rem, calc(1.08rem + .3vw), 1.4rem);
  font-weight: 700;
  line-height: 1.3;
}

.nc-landing .nc-closing-section .nc-cta-prompt {
  margin-top: 8px;
}

.nc-landing .nc-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.nc-landing .nc-closing-section .nc-cta-actions .nc-button {
  margin-top: 0;
}

.brand-heading .persephone-wordmark {
  grid-column: auto;
  grid-row: auto;
  justify-self: auto;
  align-self: center;
  margin: 0;
}

.wordmark-line {
  display: inline;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: inherit;
  -webkit-text-fill-color: inherit;
  -webkit-text-stroke: 0;
  text-shadow: none;
  paint-order: normal;
}

.wordmark-line + .wordmark-line::before {
  content: " ";
}

@media (max-width: 1200px) {
  .persephone-wordmark {
    width: max-content;
    max-width: 100%;
  }

  .persephone-wordmark .wordmark-line {
    display: block;
    width: max-content;
    max-width: 100%;
    margin-inline: auto;
    paint-order: normal;
  }

  .persephone-wordmark .wordmark-line + .wordmark-line::before {
    content: none;
  }
}

.nav-links {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 16px;
  gap: 4px var(--nav-link-gap);
  flex-wrap: nowrap;
  min-height: 34px;
  align-self: center;
  position: relative;
  z-index: 1;
  font-family: "Montserrat", "Segoe UI", Arial, sans-serif;
  font-weight: 700;
  font-size: var(--nav-link-size);
  line-height: 1.25;
  letter-spacing: .12em;
  text-transform: uppercase;
  transform: translateY(var(--nav-offset-y));
}

.nav-links a,
.portal-link {
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.nav-links a {
  position: relative;
  border-radius: 999px;
  padding: 6px 8px;
  color: #FFFFFF;
  white-space: nowrap;
}

.nav-links a.nav-home-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  padding: 6px 8px;
  color: #FFFFFF;
}

.nav-links a.nav-home-link svg {
  width: 27px;
  height: 27px;
  transform: translateY(-2px);
}

.nav-links a.nav-home-link .home-house-body {
  fill: #1E4D4A;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linejoin: round;
}

.nav-links a.nav-home-link .home-house-roof {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-links a.nav-home-link .home-house-door {
  fill: currentColor;
  stroke: none;
}

.nav-links a:hover,
.nav-links a:focus-visible,
.nav-links a:active,
.nav-links a[aria-current="page"] {
  color: #F6DC88;
  background-color: transparent;
  outline: none;
}

.site-header-inner:not(.is-nav-collapsed) .nav-links a:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(var(--nav-link-gap) / -2 - 2px);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #F1BE15;
  transform: translate(50%, -50%);
  box-shadow: 0 0 0 1px rgba(246, 220, 136, .28);
}

.portal-link:hover,
.portal-link:focus-visible {
  color: #FFFFFF;
  outline: none;
}

.portal-link {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  align-self: center;
  display: flex;
  align-items: center;
  gap: 14px;
  padding-right: 16px;
  position: relative;
  z-index: 2;
  color: #F1BE15;
  font-family: "Montserrat", "Segoe UI", Arial, sans-serif;
  text-transform: uppercase;
  white-space: nowrap;
  min-width: max-content;
  transform: translateY(var(--nav-offset-y));
}

.portal-badge {
  display: inline-block;
  position: relative;
  width: clamp(70px, calc(68.36px + 0.4545vw), 80px);
  height: clamp(70px, calc(68.36px + 0.4545vw), 80px);
  flex: 0 0 auto;
  border: 3px solid var(--accent-amber);
  border-radius: 50%;
  background-color: var(--white);
  box-shadow: 0 9px 22px rgba(88, 57, 0, .36);
  overflow: hidden;
  transform: translateZ(0);
  transition: transform .34s cubic-bezier(.22, 1.55, .36, 1), box-shadow .25s ease;
}

.portal-badge::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-image: url("assets/patient-portal-mark.png?v=20260821");
  background-position: center;
  background-size: 90%;
  background-repeat: no-repeat;
  transform: translate(-1px, 1px) scale(1);
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  will-change: transform;
  transition: transform .34s cubic-bezier(.22, 1.55, .36, 1);
}

.portal-link strong,
.portal-link small {
  display: block;
}

.portal-link strong {
  font-family: "Montserrat", "Segoe UI", Arial, sans-serif;
  font-size: var(--nav-link-size);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .08em;
  white-space: nowrap;
}

.portal-badge:hover {
  transform: translateZ(0) scale(1.12);
  box-shadow: 0 11px 26px rgba(88, 57, 0, .44);
}

.portal-link small {
  color: var(--brown);
  margin-top: 4px;
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 450;
  line-height: 1.25;
}

.site-header-inner.is-nav-collapsed {
  width: calc(100% - 48px);
  min-height: var(--header-rail);
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: var(--header-rail) auto;
  align-content: start;
  gap: 14px 16px;
}

.site-header-inner.is-nav-collapsed::before {
  grid-column: 1 / -1;
  grid-row: 1;
  justify-self: stretch;
  width: 100%;
  min-width: 0;
}

.site-header-inner.is-nav-collapsed .nav-toggle-label {
  --hamburger-line-thickness: 3px;
  position: relative;
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--menu-button-size);
  min-height: var(--menu-button-size);
  padding: 0;
  margin-left: var(--menu-label-inset);
  border: 0;
  border-radius: 0;
  color: #F1BE15;
  background: transparent;
  cursor: pointer;
  font-family: "Montserrat", "Segoe UI", Arial, sans-serif;
  font-size: var(--nav-link-size);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .32em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translateY(var(--nav-offset-y));
  transition: color .2s ease;
}

.site-header-inner.is-nav-collapsed .nav-toggle-label .nav-toggle-text {
  position: relative;
  display: block;
  width: clamp(24px, calc(20.625px + 0.9375vw), 30px);
  height: clamp(18px, calc(15.75px + 0.625vw), 22px);
  overflow: hidden;
  color: inherit;
  font-size: 0;
  letter-spacing: 0;
  line-height: 0;
}

.site-header-inner.is-nav-collapsed .nav-toggle-label .nav-toggle-text::before,
.site-header-inner.is-nav-collapsed .nav-toggle-label .nav-toggle-text::after,
.site-header-inner.is-nav-collapsed .nav-toggle-label::after {
  content: "";
  position: absolute;
  left: 50%;
  width: clamp(24px, calc(20.625px + 0.9375vw), 30px);
  height: var(--hamburger-line-thickness);
  border-radius: 999px;
  background: currentColor;
  transform: translateX(-50%);
}

.site-header-inner.is-nav-collapsed .nav-toggle-label .nav-toggle-text::before {
  top: 0;
}

.site-header-inner.is-nav-collapsed .nav-toggle-label .nav-toggle-text::after {
  bottom: 0;
}

.site-header-inner.is-nav-collapsed .nav-toggle-label::after {
  top: 50%;
  transform: translate(-50%, -50%);
}

.site-header-inner.is-nav-collapsed .nav-toggle:focus-visible + .nav-toggle-label,
.site-header-inner.is-nav-collapsed .nav-toggle:checked + .nav-toggle-label,
.site-header-inner.is-nav-collapsed .nav-toggle-label:hover {
  color: #F6DC88;
}

.site-header-inner.is-nav-collapsed .portal-link {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  align-self: center;
}

.site-header-inner.is-nav-collapsed .brand-heading {
  grid-column: 1 / -1;
  grid-row: 2;
  justify-self: center;
  align-self: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.site-header-inner.is-nav-collapsed .persephone-wordmark {
  grid-column: 1 / -1;
  grid-row: 2;
  justify-self: center;
  text-align: center;
  display: block;
  width: max-content;
  max-width: 100%;
}

.site-header-inner.is-nav-collapsed .brand-heading .persephone-wordmark {
  grid-column: auto;
  grid-row: auto;
  justify-self: auto;
  align-self: center;
  margin: 0;
}

.site-header-inner.is-nav-collapsed .persephone-wordmark .wordmark-line {
  display: block;
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
  paint-order: normal;
}

.site-header-inner.is-nav-collapsed .persephone-wordmark .wordmark-line + .wordmark-line::before {
  content: none;
}

.site-header-inner.is-nav-collapsed .nav-links {
  grid-column: 1;
  grid-row: 1;
  position: absolute;
  top: calc((var(--header-rail) + var(--menu-button-size)) / 2 + var(--nav-offset-y) + 4px);
  left: 0;
  z-index: 10;
  display: none;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 2px;
  width: min(280px, 100%);
  min-height: 0;
  padding: 8px;
  border: 1px solid rgba(30, 77, 74, .12);
  border-radius: 12px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 14px 30px rgba(30, 41, 40, .12);
  letter-spacing: .01em;
  transform: translateX(-8px);
  text-transform: uppercase;
}

.site-header-inner.is-nav-collapsed .nav-toggle:checked ~ .nav-links {
  display: flex;
}

.site-header-inner.is-nav-collapsed .nav-links a {
  width: 100%;
  padding: 10px 12px 10px 26px;
  border-radius: 8px;
  color: #1E4D4A;
  white-space: nowrap;
}

.site-header-inner.is-nav-collapsed .nav-links a.nav-home-link {
  justify-content: flex-start;
  width: 100%;
  height: auto;
  padding: 10px 12px 10px 26px;
}

.site-header-inner.is-nav-collapsed .nav-links a.nav-home-link svg {
  width: 27px;
  height: 27px;
}

.site-header-inner.is-nav-collapsed .nav-links a::before {
  content: none;
}

.site-header-inner.is-nav-collapsed .nav-links a::after {
  content: none;
}

.site-header-inner.is-nav-collapsed .nav-links a:hover,
.site-header-inner.is-nav-collapsed .nav-links a:focus-visible,
.site-header-inner.is-nav-collapsed .nav-links a:active {
  color: #F1BE15;
  background: #EDF6F4;
}

.site-header-inner.is-nav-collapsed .nav-links a[aria-current="page"] {
  color: #1E2928;
  background: transparent;
}

.site-header-inner.is-nav-collapsed .nav-links a[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, #F6DC88 0%, #F1BE15 42%, #CEA00C 100%);
  box-shadow: 0 0 5px rgba(241, 190, 21, .28);
}

.site-header-inner.is-nav-collapsed .nav-links a[aria-current="page"]:hover,
.site-header-inner.is-nav-collapsed .nav-links a[aria-current="page"]:focus-visible,
.site-header-inner.is-nav-collapsed .nav-links a[aria-current="page"]:active {
  color: #1E4D4A;
  background: #EDF6F4;
}

.hero {
  position: relative;
  min-height: var(--hero-rail);
  overflow: visible;
  background: transparent;
}

.page-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  max-width: none;
  pointer-events: none;
  user-select: none;
}

.page-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.hero-content {
  position: relative;
  z-index: 1;
  padding-top: 0;
  padding-bottom: 0;
}

.hero-copy {
  position: relative;
  z-index: 1;
  max-width: 100%;
  margin-inline: auto;
}

.hero-slogan {
  margin: .18em 0 0;
  font-family: var(--brand);
  font-size: clamp(2.7rem, calc(2.36rem + 1.28vw), 4.35rem);
  line-height: 1;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--deep-teal);
  -webkit-text-stroke: 0;
  paint-order: normal;
  text-align: center;
  white-space: nowrap;
}

.hero-slogan .slogan-line {
  display: block;
  margin-top: 0;
  line-height: 1;
  white-space: nowrap;
}

.hero-slogan .slogan-line--primary {
  color: var(--deep-teal);
  font-size: clamp(2.7rem, calc(2.36rem + 1.28vw), 4.35rem);
  font-weight: 600;
  letter-spacing: .01em;
  -webkit-text-stroke: 0;
  paint-order: normal;
}

.hero-slogan .slogan-line--secondary {
  margin-top: .06em;
  color: #3F7D79;
  font-size: clamp(2rem, calc(1.69rem + 1.16vw), 3.6rem);
  font-weight: 400;
  letter-spacing: .05em;
  text-stroke: clamp(0.95px, calc(0.9009px + 0.01364vw), 1.25px) #1E4D4A;
  -webkit-text-stroke: clamp(0.95px, calc(0.9009px + 0.01364vw), 1.25px) #1E4D4A;
  paint-order: stroke fill;
}

.hero-introduction {
  max-width: min(1150px, 100%);
  margin: clamp(16px, 1.4vw, 24px) auto 0;
  color: #1E2928;
  font-size: clamp(1.05rem, calc(1.0136rem + 0.1591vw), 1.25rem);
  font-weight: 450;
  line-height: 1.75;
  letter-spacing: .01em;
  text-align: justify;
  text-align-last: center;
}

@media (max-width: 1200px) {
  .hero-introduction {
    box-sizing: border-box;
    max-width: 100%;
    padding-inline: 8px;
  }
}

.hero-intro-divider {
  display: grid;
  grid-template-columns: minmax(clamp(48px, 8vw, 96px), 1fr) auto minmax(clamp(48px, 8vw, 96px), 1fr);
  align-items: center;
  gap: clamp(7px, .85vw, 12px);
  width: min(100%, var(--content-max));
  margin: clamp(18px, 1.8vw, 28px) auto 0;
  color: #C89105;
}

.hero-intro-divider--top {
  margin-top: clamp(28px, 2.5vw, 42px);
}

.hero-intro-divider:not(.hero-intro-divider--top) {
  margin-bottom: 24px;
}

.hero-intro-divider > span:not(.hero-divider-compass) {
  height: 4px;
  border-radius: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(246, 220, 136, .9) 18%,
    rgba(241, 190, 21, .98) 50%,
    rgba(206, 160, 12, .72) 82%,
    transparent 100%
  );
}

.hero-intro-divider span:last-child {
  transform: scaleX(-1);
}

.hero-divider-compass {
  display: block;
  position: relative;
  isolation: isolate;
  width: 82.944px;
  height: 82.944px;
  pointer-events: none;
}

.hero-divider-compass::before {
  content: "";
  position: absolute;
  inset: 0;
  -webkit-mask: url("assets/hero-divider-pomegranate.png?v=20260817-gold-divider-pomegranate") center / contain no-repeat;
  mask: url("assets/hero-divider-pomegranate.png?v=20260817-gold-divider-pomegranate") center / contain no-repeat;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 248, 211, .76) 0 11%, transparent 34%),
    linear-gradient(135deg, #F6DC88 0%, #F1BE15 36%, #CEA00C 68%, #8A6200 100%);
  filter: url(#hero-pomegranate-thin) drop-shadow(0 1px 1px rgba(88, 57, 0, .3));
  transform: none;
  z-index: 1;
}

.hero-divider-compass::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-mask: url("assets/hero-divider-pomegranate.png?v=20260817-gold-divider-pomegranate") center / contain no-repeat;
  mask: url("assets/hero-divider-pomegranate.png?v=20260817-gold-divider-pomegranate") center / contain no-repeat;
  background: #583900;
  transform: translate(1px, 1px);
  filter: drop-shadow(0 1px 1px rgba(88, 57, 0, .28));
  z-index: 0;
}

.hero-pathways {
  --hero-icon-size: clamp(65px, calc(59.273px + 1.5909vw), 100px);
  --services-icon-size: clamp(101.8875px, calc(92.91043px + 2.49374vw), 156.75px);
  --compass-icon-size: clamp(75.075px, calc(68.4603px + 1.83749vw), 115.5px);
  --hero-card-pad: clamp(32px, calc(25.59px + 0.641vw), 42px);
  --hero-icon-gap: clamp(4px, calc(-0.1176px + 1.17647vw), 30px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
  align-items: stretch;
  justify-items: stretch;
  column-gap: clamp(32px, calc(10.205px + 2.1795vw), 66px);
  row-gap: clamp(32px, calc(10.205px + 2.1795vw), 66px);
  width: 100%;
  max-width: var(--content-max);
  margin: clamp(30px, 3vw, 48px) auto 0;
  padding-bottom: 22px;
}

.hero-pathway {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-width: 0;
  align-self: stretch;
  padding: var(--site-card-padding);
  overflow: hidden;
  border: var(--gold-card-border-width) solid transparent;
  border-radius: clamp(14px, 1vw, 18px);
  background:
    linear-gradient(var(--white), var(--white)) padding-box,
    linear-gradient(
      135deg,
      #F9E7A8 0%,
      #F6DC88 14%,
      #F1BE15 34%,
      #FFF0B5 45%,
      #F1BE15 55%,
      #CEA00C 78%,
      #9A6A08 100%
    ) border-box;
  box-shadow: var(--card-shadow);
}

.hero-pathway:first-child {
  --hero-current-icon-size: var(--compass-icon-size);
}

.hero-pathway:nth-child(2) {
  --hero-current-icon-size: var(--compass-icon-size);
}

.hero-pathway-icon {
  position: absolute;
  z-index: 3;
  top: var(--hero-card-pad);
  left: var(--hero-card-pad);
  width: var(--hero-icon-size);
  aspect-ratio: 1;
  padding: 0;
}

.hero-pathway-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.services-icon {
  color: #1E4D4A;
  top: calc(var(--hero-card-pad) - 24px);
  left: calc(var(--hero-card-pad) - 16px);
  width: var(--services-icon-size);
}

.compass-icon {
  color: #563B62;
  top: calc(var(--hero-card-pad) - 4px);
  left: calc(var(--hero-card-pad) - 8px);
  width: var(--compass-icon-size);
}

.hero-pathway h2 {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--hero-icon-size);
  width: 100%;
  margin: 0;
  padding: 0 0 0 calc(var(--hero-current-icon-size) + var(--hero-icon-gap));
  font-family: var(--display);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .01em;
  color: #D94F5C;
  text-align: left;
  white-space: nowrap;
}

.hero-pathway:nth-of-type(2) h2 {
  color: #3F7D79;
}

.hero-pathway-heading span,
.hero-pathway-heading strong {
  display: block;
  white-space: normal;
}

.hero-pathway-heading span {
  margin-top: 8px;
  color: inherit;
  font-family: var(--display);
  font-size: clamp(1.05rem, calc(0.9390rem + 0.50679vw), 1.75rem);
  font-style: italic;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .01em;
  white-space: nowrap;
}

.hero-pathway-heading strong {
  color: inherit;
  font-family: var(--display);
  font-size: clamp(1.6rem, calc(1.4179rem + 0.83258vw), 2.75rem);
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .01em;
  white-space: nowrap;
}

.hero-pathway p {
  max-width: none;
  margin: clamp(24px, calc(22.691px + 0.3636vw), 32px) 0 0;
  color: #1E2928;
  font-size: clamp(1.1rem, calc(1.0755rem + 0.1091vw), 1.25rem);
  font-weight: 450;
  line-height: 1.75;
  letter-spacing: .01em;
}

.hero-pathway-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  align-items: flex-start;
}

.hero-pathway-cta {
  margin-top: auto;
  padding-top: 24px;
  width: 100%;
}

.hero-action-button {
  align-self: end;
  justify-self: start;
  margin-top: 0;
  min-height: 54px;
  padding: 0 34px;
  min-width: 230px;
  max-width: 280px;
  font-size: 1rem;
  white-space: nowrap;
}

.gold-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 54px;
  padding: 0 34px;
  border-radius: 999px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .01em;
  box-shadow: 0 8px 18px rgba(30, 77, 74, .18);
}

.gold-button.hero-action-button {
  align-self: flex-start;
  width: max-content;
  min-width: min(230px, 100%);
  max-width: 100%;
  padding: 0 34px;
  border: 1.5px solid #B98708;
  font-size: 1rem;
  white-space: nowrap;
  background: linear-gradient(180deg, #F9E7A8 0%, #F6DC88 18%, #F1BE15 48%, #E1AD09 78%, #C99508 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .62),
    inset 0 -1px 0 rgba(88, 57, 0, .18),
    0 6px 14px rgba(88, 57, 0, .24);
}

.services {
  position: relative;
  z-index: 2;
  overflow: visible;
  padding: var(--subsection-heading-above) var(--page-gutter) 0;
  background: transparent;
}

.services::before {
  display: none;
}

.services::after {
  display: none;
}

.section-heading {
  position: relative;
  z-index: 2;
  width: fit-content;
  display: grid;
  place-items: center;
  text-align: center;
  margin: 0 auto var(--subsection-heading-below);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.section-heading h2 {
  margin: 0;
  color: var(--teal);
  font-family: var(--display);
  font-size: var(--section-heading-size);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .01em;
  text-shadow:
    1px 1px 0 rgba(30, 77, 74, .30),
    0 2px 2px rgba(30, 41, 40, .18);
}

.section-heading span {
  display: none;
  color: var(--burnt-orange);
  font-size: 1.15rem;
  font-family: var(--display);
  font-weight: 700;
  line-height: 1;
  margin-top: 8px;
}

.service-grid {
  position: relative;
  z-index: 4;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding-bottom: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(280px, 1fr));
  gap: clamp(32px, calc(10.205px + 2.1795vw), 66px);
  align-items: stretch;
  align-content: stretch;
  overflow: visible;
}

.service-card {
  z-index: 4;
  width: 100%;
  height: 100%;
  min-height: 470px;
  overflow: hidden;
  border: var(--taupe-card-border-width) solid #E7DED1;
  border-radius: 12px;
  background: var(--white);
  box-shadow: var(--card-shadow);
  position: relative;
  display: flex;
  flex-direction: column;
  transition: transform .28s cubic-bezier(.2, 1.35, .35, 1), box-shadow .28s ease;
  will-change: transform;
}

.service-card:hover,
.service-card:focus-within {
  z-index: 5;
  transform: translateY(-10px);
  box-shadow: var(--card-shadow-hover);
}

.card-image {
  height: 180px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.image-wheat {
  background-image: url("assets/service-medical-fruit-heart.jpg");
  background-size: cover;
  background-position: center 48%;
}

.image-citrus {
  background-image: url("assets/service-meal-produce-bags.jpg");
  background-position: 18% 40%;
}

.image-grain {
  background-image: url("assets/service-consulting-citrus.jpg");
  background-position: center 35%;
}

.service-icon {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  position: absolute;
  top: 142px;
  left: 36px;
  transform: none;
  border: 3px solid currentColor;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 8px 18px rgba(30, 41, 40, .16);
}

.service-icon svg {
  width: 45px;
  height: 45px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.service-icon.consulting svg {
  width: 54px;
  height: 54px;
  stroke: none;
}

.service-icon .utensils-icon {
  width: 48px;
  height: 48px;
  fill: none;
  stroke: currentColor;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.medical {
  color: var(--forest);
}

.planning {
  color: var(--burnt-orange);
}

.consulting {
  color: var(--purple);
}

.card-body {
  border-top: 3px solid currentColor;
  padding: var(--site-card-padding);
  text-align: left;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.service-card:nth-child(1) .card-body {
  color: var(--forest);
}

.service-card:nth-child(2) .card-body {
  color: var(--burnt-orange);
}

.service-card:nth-child(3) .card-body {
  color: var(--purple);
}

.card-body h3 {
  margin: 20px 0 20px;
  font-family: var(--display);
  font-size: clamp(1.75rem, calc(1.6273rem + 0.54545vw), 2.5rem);
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: .0125em;
  color: var(--ink);
}

.service-card:nth-child(1) h3 {
  color: #254D2A;
}

.service-card:nth-child(2) h3 {
  color: #D48A00;
}

.service-card:nth-child(3) h3 {
  color: #563B62;
}

.card-body p {
  max-width: none;
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.1rem, calc(1.0755rem + 0.1091vw), 1.25rem);
  font-weight: 450;
  line-height: 1.75;
  letter-spacing: .01em;
}

.card-body a {
  color: var(--deep-teal);
  font-family: var(--display);
  font-size: .95rem;
  font-weight: 700;
  line-height: 1;
  margin: auto 0 0;
  padding-top: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}

.card-body a:hover,
.card-body a:focus-visible {
  color: #0F8F96;
}

.card-body a span {
  margin-left: 0;
  font-size: 1.15rem;
  vertical-align: -2px;
}

.site-footer {
  display: grid;
  grid-template-columns: 1.4fr .85fr 1.1fr 1.2fr;
  gap: 48px;
  padding: 38px clamp(28px, 6vw, 80px);
  color: var(--deep-teal);
  background:
    radial-gradient(circle at 25% 30%, rgba(153, 207, 194, .26), transparent 36%),
    linear-gradient(135deg, var(--teal), var(--deep-teal));
}

.footer-brand {
  max-width: 310px;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 12px;
  align-items: center;
}

.footer-portal-mark {
  grid-column: 1;
  grid-row: 1 / span 3;
  width: 95px;
  height: 95px;
  object-fit: contain;
  align-self: center;
  margin-right: 12px;
}

.footer-brand strong {
  display: block;
  font-family: var(--brand);
  font-size: 2.55rem;
  font-weight: 600;
  line-height: .9;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-align: right;
}

.footer-brand p {
  grid-column: 2;
  margin: 8px 0 0;
  font-size: .85rem;
  line-height: 1.25;
  letter-spacing: .01em;
  text-align: right;
}

.site-footer h2 {
  margin: 0 0 14px;
  font-family: var(--display);
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.25;
}

.site-footer a,
.site-footer p {
  display: block;
  margin: 7px 0;
  color: rgba(255, 255, 255, .9);
  font-family: var(--sans);
  font-size: .9rem;
  font-weight: 400;
  line-height: 1.5;
}

.socials {
  display: flex;
  gap: 14px;
  margin-top: 18px;
}

.socials a {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: 50%;
  font-family: var(--display);
  font-size: .75rem;
  font-weight: 700;
}

.copyright {
  padding: 14px 24px;
  color: #1E4D4A;
  font-family: var(--sans);
  text-align: center;
  background: var(--deep-teal);
  font-size: .75rem;
  font-weight: 400;
  line-height: 1;
}

.about-main {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 246, 232, .94), rgba(237, 246, 244, .96) 58%, rgba(255, 252, 245, .98));
}

.about-page-art {
  top: -132px;
  opacity: .82;
}

.about-hero {
  min-height: clamp(620px, 58vw, 820px);
  position: relative;
}

.about-hero-inner,
.about-section-inner {
  width: min(var(--content-max), calc(100% - var(--page-gutter) - var(--page-gutter)));
  margin-inline: auto;
}

.about-hero-inner {
  max-width: min(1080px, calc(100% - var(--page-gutter) - var(--page-gutter)));
  margin-left: max(var(--page-gutter), calc((100vw - var(--content-max)) / 2));
  padding-top: clamp(78px, 8vw, 132px);
  padding-bottom: clamp(90px, 9vw, 150px);
}

.about-kicker {
  margin: 0 0 14px;
  color: var(--accent-amber);
  font-family: var(--display);
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.about-hero h1,
.about-copy h2,
.about-centered-heading h2,
.about-mission h2 {
  margin: 0;
  color: var(--deep-teal);
  font-family: var(--brand);
  font-weight: 600;
  letter-spacing: .035em;
}

.about-hero h1 {
  max-width: 920px;
  font-size: clamp(3rem, 4.8vw, 5.85rem);
  line-height: 1.02;
  -webkit-text-stroke: 1px #1E4D4A;
  paint-order: stroke fill;
}

.about-hero p:not(.about-kicker) {
  max-width: 680px;
  margin: 32px 0 0;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: .01em;
}

.about-section {
  position: relative;
  padding: clamp(78px, 8vw, 128px) 0;
  background: var(--white);
}

.about-section--open {
  background: transparent;
}

.about-section--cream {
  background:
    radial-gradient(circle at 12% 12%, rgba(246, 220, 136, .24), transparent 34%),
    linear-gradient(180deg, #FFF6E8, #FFFCF5);
}

.about-section--teal {
  color: var(--white);
  background:
    radial-gradient(circle at 84% 22%, rgba(153, 207, 194, .22), transparent 36%),
    linear-gradient(135deg, var(--deep-teal), #18423F);
}

.about-split,
.about-story-grid,
.about-compass-story {
  display: grid;
  grid-template-columns: minmax(320px, .82fr) minmax(0, 1.18fr);
  gap: clamp(48px, 6vw, 92px);
  align-items: center;
}

.about-compass-story {
  grid-template-columns: minmax(0, .82fr) minmax(420px, 1.18fr);
}

.about-copy {
  min-width: 0;
}

.about-copy h2,
.about-centered-heading h2,
.about-mission h2 {
  font-size: clamp(2.4rem, 3.2vw, 4.25rem);
  line-height: 1.08;
}

.about-copy p:not(.about-kicker),
.about-team-card p,
.about-mission p,
.about-screenshot figcaption,
.about-timeline li {
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: .01em;
}

.about-copy p:not(.about-kicker) {
  max-width: 780px;
  margin: 24px 0 0;
}

.about-section--teal .about-copy h2,
.about-section--teal .about-copy p,
.about-section--teal .about-kicker {
  color: var(--white);
}

.about-section--teal .about-kicker {
  color: var(--gold);
}

.about-portrait-card {
  min-height: clamp(420px, 40vw, 620px);
  display: grid;
  align-content: end;
  gap: 24px;
  padding: var(--site-card-padding);
  border: var(--taupe-card-border-width) solid #E7DED1;
  border-radius: 8px;
  color: var(--white);
  background:
    linear-gradient(180deg, rgba(30, 77, 74, .1), rgba(30, 77, 74, .88)),
    radial-gradient(circle at 50% 20%, rgba(246, 220, 136, .38), transparent 42%),
    var(--teal);
}
@media (min-width: 1001px) {
  .about-split {
    align-items: stretch;
  }

  .about-split .about-portrait-card {
    min-height: 0;
    height: 100%;
  }
}

.about-profile-image {
  display: block;
  width: min(100%, clamp(260px, 30vw, 390px));
  justify-self: center;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 18px 30px rgba(8, 34, 32, .22));
}

.about-portrait-card p {
  margin: 0;
}

.about-portrait-name span {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: .01em;
}

.about-portrait-name span:first-child {
  font-size: clamp(2rem, 2.25vw, 2.8rem);
}

.about-portrait-name span:last-child {
  margin-top: 6px;
  font-size: clamp(1.35rem, 1.65vw, 2rem);
}

.about-portrait-role {
  display: block;
  margin-top: 12px;
  font-family: var(--sans);
  font-size: clamp(.98rem, .95vw, 1.08rem);
  font-weight: 600;
  line-height: 1.5;
  color: rgba(255,255,255,.92);
}

.about-principles {
  display: grid;
  gap: 16px;
  align-content: center;
}

.about-principles span {
  display: block;
  padding: 18px 22px;
  border-left: 4px solid var(--gold);
  border-radius: 0 8px 8px 0;
  color: var(--deep-teal);
  background: rgba(237, 246, 244, .86);
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .01em;
}
.about-section--open .about-story-grid {
  grid-template-columns: 1fr;
  justify-content: stretch;
  gap: 28px;
}

.about-section--open .about-principles {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px clamp(28px, 4vw, 56px);
  max-width: 100%;
}

.about-section--open .about-copy p:not(.about-kicker) {
  max-width: 1180px;
}

.about-principles-intro {
  margin: 0;
  color: var(--deep-teal);
  font-family: var(--display);
  font-size: clamp(1.25rem, calc(1.1845rem + 0.2909vw), 1.65rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.about-section--open .about-principles span {
  position: relative;
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 0 0 0 58px;
  border-left: 0;
  border-radius: 0;
  background: transparent;
}

.about-section--open .about-principles span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 40px;
  height: 40px;
  background: url("assets/pomegranate-bullet-d94f5c.png") center / contain no-repeat;
  transform: translateY(-50%);
}

.about-screenshot {
  margin: 0;
  padding: clamp(12px, 1.4vw, 18px);
  border-radius: 8px;
  background: linear-gradient(135deg, var(--gold-50), var(--gold) 55%, #8A6200);
  box-shadow: var(--card-shadow);
}

.about-screenshot img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: left top;
  border-radius: 4px;
  background: var(--white);
}

.about-screenshot figcaption {
  margin: 14px 2px 2px;
  color: rgba(255,255,255,.9);
  font-size: .92rem;
}

.about-centered-heading {
  max-width: 920px;
  margin: 0 auto clamp(42px, 5vw, 72px);
  text-align: center;
}

.about-team-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.about-team-card {
  min-height: 100%;
  padding: var(--site-card-padding);
  border: var(--taupe-card-border-width) solid #E7DED1;
  border-radius: 8px;
  background: rgba(255, 255, 255, .92);
  box-shadow: var(--card-shadow);
}

.about-team-card h3 {
  margin: 0;
  color: var(--deep-teal);
  font-family: var(--brand);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .04em;
}

.about-team-card h3 .team-credentials {
  white-space: nowrap;
  font-size: .72em;
  letter-spacing: .02em;
}

.about-team-card p:last-child {
  margin: 0;
}

.about-mission {
  text-align: center;
  background:
    linear-gradient(rgba(255, 252, 245, .92), rgba(255, 252, 245, .96)),
    url("assets/persephone-background-continuation.png") center / cover no-repeat;
}

.about-mission .about-section-inner {
  max-width: 1080px;
}

.about-mission p {
  max-width: 840px;
  margin: 28px auto 0;
  font-size: 1.2rem;
}

.about-timeline {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.about-timeline li {
  position: relative;
  min-height: 170px;
  padding: var(--site-card-padding);
  border: var(--taupe-card-border-width) solid #E7DED1;
  border-top: var(--gold-card-border-width) solid var(--gold);
  border-radius: 8px;
  background: var(--white);
  box-shadow: var(--card-shadow);
}

.about-timeline span {
  display: block;
  margin-bottom: 18px;
  color: var(--accent-amber);
  font-family: var(--display);
  font-size: .85rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .12em;
}

/* Final homepage teaser/footer structure */
.compass {
  --compass-divider-logo-gap: 40px;
  --compass-edge-gap: var(--compass-divider-logo-gap);
  display: block;
  min-height: 0;
  position: relative;
  padding: calc(var(--brass-divider-rail) + var(--compass-edge-gap)) var(--page-gutter) var(--compass-edge-gap);
  background: var(--deep-teal);
  border-top: 0;
}

.compass::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: var(--brass-divider-rail);
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, .06) 0 1px,
      rgba(88, 57, 0, .04) 1px 2px,
      transparent 2px 4px
    ),
    linear-gradient(
      90deg,
      #D4AF37 0%,
      #E8C669 25%,
      #F1D784 50%,
      #E8C669 75%,
      #C4951A 100%
    );
  background-blend-mode: soft-light, normal;
  box-shadow: none;
}

.compass-section-heading {
  scroll-margin-top: -32px;
  position: relative;
  z-index: 0;
  display: grid;
  align-content: center;
  margin-top: 0;
  padding: var(--subsection-heading-above) var(--page-gutter) var(--subsection-heading-below);
  text-align: center;
  background: transparent;
}

.compass-section-heading::after {
  display: none;
}

.compass-section-heading h2 {
  position: relative;
  z-index: 2;
  margin: 0;
  color: var(--teal);
  font-family: var(--display);
  font-size: var(--section-heading-size);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .01em;
  text-shadow:
    1px 1px 0 rgba(30, 77, 74, .30),
    0 2px 2px rgba(30, 41, 40, .18);
}

.compass-section-heading p {
  margin: 8px 0 0;
  color: var(--deep-teal);
  font-family: var(--display);
  font-size: clamp(1.4rem, calc(1.2855rem + 0.5091vw), 2.10rem);
  font-style: italic;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: .01em;
}

.compass-container {
  --teaser-column-gap: 55px;
  --nc-logo-title-size: clamp(1.72rem, calc(1.6044rem + 0.52851vw), 2.45rem);
  --nc-workspace-size: clamp(0.98rem, calc(0.9119rem + 0.31131vw), 1.41rem);
  --nc-copy-size: clamp(1.1rem, calc(1.0755rem + 0.1091vw), 1.25rem);
  --nc-list-indent: clamp(16px, calc(var(--teaser-column-gap) + .4em), 24px);
  --nc-list-text-offset: calc(var(--nc-list-indent) + 1.25rem + (var(--nc-copy-size) * .6));
  --nc-nutrition-tracking: .05em;
  --nc-compass-tracking: .05em;
  --nc-workspace-tracking: .1em;
  --nc-logo-mark-size: clamp(62px, calc(56.7738px + 1.49321vw), 95px);
  --nc-lockup-top-offset: 0;
  --nc-copy-top-gap: clamp(22px, 2.1vw, 34px);
  --nc-logo-icon-divider-gap: clamp(10px, .8vw, 14px);
  --nc-logo-divider-text-gap: clamp(8px, 0.4vw, 10px);
  --nc-lockup-text-width: min(100%, calc(var(--nc-logo-title-size) * 21.25));
  --nc-lockup-total-width: min(100%, calc(var(--nc-logo-mark-size) + var(--nc-logo-icon-divider-gap) + 2px + var(--nc-logo-divider-text-gap) + var(--nc-lockup-text-width)));
  width: min(100%, var(--content-max));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, min(57vw, var(--adime-monitor-max)));
  grid-template-areas:
    "brand brand"
    "copy dashboard";
  grid-template-rows: auto auto;
  column-gap: var(--teaser-column-gap);
  row-gap: 0;
  align-items: start;
}

.compass-copy {
  grid-area: copy;
  width: 100%;
  position: relative;
  font-family: var(--sans);
  min-width: 0;
  display: block;
  align-self: start;
  overflow: visible;
  z-index: 2;
  container-type: inline-size;
}

.compass-lockup-row {
  grid-area: brand;
  position: relative;
  display: flex;
  width: fit-content;
  max-width: 100%;
  margin: var(--nc-lockup-top-offset) 0 70px -4px;
  column-gap: 0;
  align-items: center;
  justify-content: flex-start;
  justify-self: start;
  justify-items: start;
  min-width: 0;
  align-self: start;
}

.compass-logo-mark {
  display: block;
  width: var(--nc-logo-mark-size);
  height: var(--nc-logo-mark-size);
  flex: 0 0 auto;
  object-fit: contain;
}

.lockup-vertical-divider {
  width: 1.5px;
  min-width: 1.5px;
  max-width: 1.5px;
  height: calc((var(--nc-logo-title-size) * 1.05) + var(--nc-workspace-size) + (var(--nc-workspace-size) * .34));
  flex: 0 0 1.5px;
  margin-left: var(--nc-logo-icon-divider-gap);
  margin-right: var(--nc-logo-divider-text-gap);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(241, 190, 21, 0), #F6DC88 18%, var(--gold) 50%, #F6DC88 82%, rgba(241, 190, 21, 0));
}

.compass-lockup {
  display: grid;
  width: max-content;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  align-content: start;
  justify-items: stretch;
}

.compass-lockup h2 {
  display: flex;
  gap: .32em;
  justify-items: start;
  width: max-content;
  margin: 0;
  color: var(--white);
  font-family: var(--display);
  font-size: var(--nc-logo-title-size);
  font-weight: 575;
  line-height: .92;
  white-space: nowrap;
  text-transform: uppercase;
  background: transparent;
}

.compass-lockup h2 span {
  display: inline-block;
}

.compass-lockup .lockup-word--nutrition {
  width: max-content;
  letter-spacing: var(--nc-nutrition-tracking);
}

.compass-lockup .lockup-word--compass {
  width: max-content;
  letter-spacing: var(--nc-compass-tracking);
}

.compass-lockup .subhead {
  width: 100%;
  margin: .34em 0 0;
  padding: 0;
  color: var(--gold);
  font-family: var(--display);
  font-size: var(--nc-workspace-size);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--nc-workspace-tracking);
  white-space: nowrap;
  text-transform: uppercase;
  background: transparent;
}

.nc-text-block__intro {
  max-width: 43ch;
  min-width: 0;
  margin: 0 0 32px;
  font-size: 1em;
  line-height: 1.72;
}

.nc-feature-list {
  max-width: 100%;
  min-width: 0;
  margin: 0 0 0 var(--nc-list-indent);
  padding: 0;
  list-style: none;
  display: grid;
  row-gap: 8pt;
}

.nc-feature-list li {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  column-gap: .6em;
  align-items: center;
  margin: 0;
  padding-left: 0;
  color: var(--white);
  font-size: 1em;
  line-height: 1.75rem;
}

.nc-feature-list li span:last-child {
  min-width: 0;
  white-space: nowrap;
}

.nc-feature-list__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  color: transparent;
  border: 1.5px solid var(--gold);
  border-radius: 50%;
  font-size: 1em;
  font-weight: 900;
  line-height: 1;
  text-shadow: none;
}

.nc-feature-list__icon::before {
  content: "\2713";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--gold);
  font-size: .74em;
  font-weight: 900;
  line-height: 1;
  transform: translateY(-.03em);
}

.compass-action {
  grid-area: cta;
  width: max-content;
  max-width: 100%;
  font-size: clamp(.92rem, .9vw, 1rem);
  margin: 40px 0 0 0;
  align-self: start;
}

.gold-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  position: relative;
  width: max-content;
  max-width: none;
  padding: 0 34px;
  overflow: hidden;
  border-radius: 999px;
  color: #1E4D4A;
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .01em;
  text-align: center;
  white-space: nowrap;
  background: linear-gradient(180deg, #F9E7A8 0%, #F6DC88 18%, #F1BE15 48%, #E1AD09 78%, #C99508 100%);
  border: 1.5px solid #B98708;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .62),
    inset 0 -1px 0 rgba(88, 57, 0, .18),
    0 6px 14px rgba(88, 57, 0, .24);
}

.gold-button span {
  display: inline-block;
  transition: transform .22s ease;
}

.gold-button:hover,
.gold-button:focus-visible {
  color: var(--white);
  background: linear-gradient(180deg, #F6DC88 0%, #F1BE15 100%);
}

.gold-button:hover span,
.gold-button:focus-visible span {
  transform: translateX(6px);
}

.teaser-dashboard-stack {
  grid-area: dashboard;
  width: 100%;
  max-width: var(--adime-monitor-max);
  justify-self: end;
  align-self: start;
}

/* Refined principles: quiet satin teal plaques with a narrow gold edge. */
.about-page .story-principles {
  container-type: inline-size;
}

.about-page .story-principles-list {
  --principle-height: 56px;
  --principle-gap: 28px;
  --principle-min-width: 380px;
  --principle-max-width: 760px;
  grid-template-columns: repeat(2, minmax(var(--principle-min-width), var(--principle-max-width)));
  justify-content: center;
  gap: var(--principle-gap) clamp(24px, calc(12cqi - 70px), 100px);
  padding-bottom: calc(var(--principle-height) / 2);
}

.about-page .story-principle,
.about-page .story-principle--teal {
  --engraving-fill: #F7F6EF;
  --engraving-rim: rgba(255, 255, 255, .38);
  --engraving-shadow: rgba(4, 34, 33, .82);
  --metal-edge-light: #F6DC88;
  --metal-edge-mid: #CEA00C;
  --metal-edge-dark: #8F6900;
  --metal-face:
    linear-gradient(104deg,
      transparent 18%,
      rgba(97, 161, 157, .10) 27%,
      rgba(194, 229, 225, .30) 37%,
      rgba(111, 177, 172, .18) 46%,
      transparent 58%),
    linear-gradient(180deg,
      #4B827E 0%,
      #3F7773 15%,
      #326966 42%,
      #285A57 76%,
      #1E4D4A 100%);
  --arrow-depth: 18px;
  padding: 8px 30px;
  filter:
    drop-shadow(0 2px 2px rgba(35, 39, 31, .14))
    drop-shadow(0 7px 9px rgba(35, 39, 31, .16));
  font-weight: 650;
}

.about-page .story-principle-metal {
  background: linear-gradient(
    180deg,
    var(--metal-edge-light) 0%,
    var(--metal-edge-mid) 46%,
    var(--metal-edge-dark) 100%
  );
}

.about-page .story-principle-metal::before {
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, .24) 0%,
      rgba(255, 255, 255, .06) 13%,
      transparent 27%,
      transparent 78%,
      rgba(0, 0, 0, .12) 100%),
    var(--metal-face);
}

.about-page .story-principle > span {
  color: var(--engraving-fill);
}

/* 2 x 380px plaques plus the 24px minimum center gutter. */
@container (max-width: 783px) {
  .about-page .story-principles-list {
    --principle-gap: 18px;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--principle-gap);
    padding-bottom: 0;
  }

  .about-page .story-principle {
    width: calc(100% - var(--arrow-depth));
    margin-left: var(--arrow-depth);
  }

  .about-page .story-principle--teal {
    margin-left: 0;
    transform: none;
  }
}

@media (max-width: 820px) {
  .about-page .story-principles-list {
    --principle-gap: 18px;
  }
}

/* Keep every hero slogan inside the navigation rail's rounded ends. */
.site-header .brand-heading {
  inline-size: 100% !important;
  max-inline-size: 100% !important;
  min-inline-size: 0 !important;
  box-sizing: border-box;
}

.site-header .hero-slogan {
  --slogan-rail-inset: clamp(18px, 3vw, 52px);
  inline-size: calc(100% - (2 * var(--slogan-rail-inset))) !important;
  max-inline-size: calc(100% - (2 * var(--slogan-rail-inset))) !important;
  min-inline-size: 0 !important;
  margin-inline: auto !important;
  box-sizing: border-box;
}

.site-header .hero-slogan,
.site-header .hero-slogan .slogan-line {
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
}

.site-header .hero-slogan .slogan-line {
  max-inline-size: 100% !important;
}

/* Match the company-purpose heading clearance to every other subsection. */
.about-page .about-section--team {
  padding-bottom: 0;
}

.about-page .about-section--team + .about-purpose {
  padding-top: var(--subsection-heading-above);
}

@media (max-width: 650px) {
  .about-page .about-section--team {
    padding-bottom: 0;
  }
}

.teaser-dashboard-heading {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(80px, 1fr) auto minmax(80px, 1fr);
  align-items: center;
  gap: clamp(18px, 2vw, 34px);
  margin-top: clamp(2px, .35vw, 8px);
  margin-bottom: clamp(14px, 1.25vw, 22px);
  color: #F1BE15;
  font-family: var(--display);
  font-size: clamp(1.05rem, 1.35vw, 1.65rem);
  font-weight: 500;
  letter-spacing: .055em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow:
    0 1px 0 rgba(255, 248, 211, .24),
    0 2px 3px rgba(7, 31, 29, .18);
}

.teaser-dashboard-heading span {
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(241, 190, 21, 0), #D4AF37 28%, #E8C669 58%, #C4951A 100%);
}

.teaser-dashboard-heading span:last-child {
  background: linear-gradient(90deg, #C4951A 0%, #E8C669 42%, #D4AF37 72%, rgba(241, 190, 21, 0));
}

.dashboard-shell {
  --monitor-border: clamp(4px, .42vw, 7px);
  --monitor-inner-radius: clamp(8px, calc(6.691px + .3636vw), 14px);
  width: 100%;
  max-width: var(--adime-monitor-max);
  min-width: 0;
  justify-self: end;
  grid-area: dashboard;
  align-self: start;
  margin-top: 0;
  z-index: 1;
  aspect-ratio: 16 / 9.75;
  min-height: 0;
  grid-template-columns: 132px 1fr;
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: clamp(14px, calc(12.691px + 0.3636vw), 22px);
  padding: var(--monitor-border);
  background:
    linear-gradient(
      135deg,
      #F9E7A8 0%,
      #F6DC88 16%,
      #F1BE15 38%,
      #D4AF37 58%,
      #CEA00C 78%,
      #8A6200 100%
    );
  box-shadow:
    0 18px 34px rgba(0, 0, 0, .24),
    0 6px 14px rgba(88, 57, 0, .18),
    inset 0 1px 0 rgba(255, 248, 211, .58),
    inset 1px 0 0 rgba(255, 248, 211, .42),
    inset -1px 0 0 rgba(88, 57, 0, .22),
    inset 0 -1px 0 rgba(88, 57, 0, .30);
}

.dashboard-image-shell {
  display: block;
  min-height: 0;
  height: auto;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  margin: 0;
  border-radius: clamp(14px, calc(12.691px + 0.3636vw), 22px);
}

.mobile-teaser-compass {
  display: none;
  grid-area: dashboard;
  position: relative;
  justify-self: center;
  --mobile-rose-size: 60%;
  --mobile-compass-visual-top-trim: max(-39.755px, -10.866vw);
  --mobile-compass-visual-bottom-trim: max(-62.83px, -17.171vw);
  width: min(111.2711428125vw, 407.089546875px);
  aspect-ratio: 1 / 1;
  pointer-events: none;
  isolation: isolate;
}

.mobile-teaser-compass::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  background: url("assets/mobile-teaser-compass-dark-background.png?v=20260830-mobile-dark-compass") center / contain no-repeat;
  filter: url(#mobile-compass-recess-outline);
  transform: translateY(-5px) scale(.75);
  transform-origin: center;
  pointer-events: none;
}

.mobile-teaser-compass__base {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: auto;
  pointer-events: none;
  user-select: none;
  transform: translateY(-5px) scale(.75);
  transform-origin: center;
}

.mobile-teaser-compass__rose-frame {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: calc(50% - 5px);
  display: block;
  width: auto;
  height: var(--mobile-rose-size);
  aspect-ratio: 1 / 1;
  transform: translate(-49.76%, -51.04%);
  overflow: visible;
  pointer-events: none;
  user-select: none;
}

.mobile-teaser-compass__rose {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: none;
  transform-origin: 49.76% 51.04%;
  pointer-events: none;
  user-select: none;
  backface-visibility: hidden;
  will-change: transform;
}

.mobile-teaser-compass__rose.is-spinning {
  animation: mobileCompassRoseSpin 1.8s cubic-bezier(.22, .68, .22, 1) both;
}

@keyframes mobileCompassRoseSpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-teaser-compass__rose.is-spinning {
    animation: none !important;
  }
}

.adime-live-preview {
  --adime-preview-height: 3500px;
  --adime-preview-scale: .74;
  --adime-preview-source-width: 1180px;
  --adime-preview-source-height: 10250px;
  height: 100%;
  min-height: 100%;
  overflow: hidden auto;
  contain: paint;
  border-radius: var(--monitor-inner-radius);
  clip-path: inset(0 round var(--monitor-inner-radius));
  background: #EDF6F4;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  overscroll-behavior: contain;
}

.adime-live-preview::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.adime-live-preview::-webkit-scrollbar-track {
  margin: 8px 3px;
  border-radius: 999px;
  background: transparent;
}

.adime-live-preview::-webkit-scrollbar-thumb {
  border: 0;
  border-radius: 999px;
  background: transparent;
}

.adime-live-preview::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

.adime-frame-stage {
  position: relative;
  width: 100%;
  margin-inline: 0;
  height: var(--adime-preview-height);
  min-height: var(--adime-preview-height);
  overflow: hidden;
  border-radius: var(--monitor-inner-radius);
  clip-path: inset(0 round var(--monitor-inner-radius));
  background: #EDF6F4;
}

.adime-live-frame {
  display: block;
  visibility: visible;
  opacity: 1;
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--adime-preview-source-width);
  height: var(--adime-preview-source-height);
  border: 0;
  border-radius: var(--monitor-inner-radius);
  background: #EDF6F4;
  pointer-events: none;
  transform: translateX(-50%) scale(var(--adime-preview-scale)) translateZ(0);
  transform-origin: top center;
  backface-visibility: hidden;
}

.site-footer {
  display: block;
  min-height: var(--footer-rail);
  padding: 0;
  color: var(--white);
  background:
    radial-gradient(circle at 25% 30%, rgba(153, 207, 194, .26), transparent 36%),
    linear-gradient(135deg, var(--teal), var(--deep-teal));
}

.footer-container {
  width: min(var(--content-max), calc(100% - var(--page-gutter) - var(--page-gutter)));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(330px, 1.25fr) minmax(150px, .75fr) minmax(260px, 1fr) minmax(300px, 1.1fr);
  gap: 28px 48px;
  align-items: start;
  align-content: start;
  justify-content: space-between;
  grid-auto-rows: min-content;
  min-height: var(--footer-rail);
  padding: 12px 0;
}

.footer-brand {
  max-width: none;
  display: grid;
  grid-template-columns: max-content;
  align-items: start;
  justify-content: start;
  text-align: left;
}

.footer-brand-lockup {
  grid-column: 2;
  grid-row: 1;
  display: block;
  color: inherit;
  text-decoration: none;
}

.footer-brand strong {
  grid-column: 1;
  grid-row: 1;
  display: block;
  font-family: var(--brand);
  text-align: left;
  color: var(--white);
  font-size: 2.55rem;
  font-weight: 600;
  line-height: .9;
  letter-spacing: .05em;
  text-transform: none;
}

.footer-wordmark-line {
  display: block;
}

.footer-wordmark-line--persephone {
  letter-spacing: .01em;
}

.footer-brand p {
  grid-column: 2;
  margin: 4px 0 0;
  max-width: 260px;
  color: var(--white);
  font-family: var(--sans);
  font-size: .85rem;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: .01em;
  text-align: left;
}

.site-footer h2 {
  margin: 0 0 8px;
  color: var(--white);
  font-family: var(--display);
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.25;
}

.site-footer a,
.site-footer p {
  margin: 0;
  color: var(--white);
  font-family: var(--sans);
  font-size: .9rem;
  font-weight: 400;
  line-height: 1.5;
}

.site-footer .footer-brand p {
  margin: 4px 0 0;
  max-width: 260px;
  font-family: var(--sans);
  font-size: .85rem;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: .01em;
}

.footer-quick-links {
  display: grid;
  grid-template-columns: max-content;
  column-gap: 0;
  row-gap: 0;
  align-content: start;
  justify-content: start;
}

.footer-quick-links h2 {
  grid-column: 1;
  text-align: left;
}

.footer-quick-links a:nth-of-type(n) {
  grid-column: 1;
  grid-row: auto;
}

.socials {
  grid-column: 1;
  grid-row: 3;
  align-self: start;
  width: fit-content;
  margin: 10px 0 0;
  padding: 0;
  background: transparent;
}

@media (max-width: 1700px) {
  .adime-live {
    max-height: calc(clamp(430px, 42vw, 680px) - 159px);
  }
}

@media (max-width: 1400px) {
  .compass-container {
    --nc-nutrition-tracking: .04em;
    --nc-compass-tracking: .04em;
    --nc-workspace-tracking: .1em;
    --nc-logo-icon-divider-gap: clamp(10px, .8vw, 14px);
    --nc-logo-divider-text-gap: clamp(8px, 0.4vw, 10px);
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "brand"
      "dashboard"
      "copy";
    grid-template-rows: auto auto auto;
    row-gap: 32px;
    align-items: start;
  }

  .compass-lockup-row {
    justify-self: start;
    width: fit-content;
    max-width: 100%;
  }

  .teaser-dashboard-stack {
    justify-self: center;
    align-self: start;
    width: 100%;
    max-width: var(--adime-monitor-max);
  }

  .dashboard-shell {
    width: 100%;
    margin: 0 0 13px;
  }

  .teaser-dashboard-heading {
    margin-top: 0;
  }

  .dashboard-image-shell {
    margin: 0;
  }

  .compass-copy {
    display: grid;
    grid-area: copy;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "copy copy"
      "list list"
      "cta cta";
    column-gap: 55px;
    row-gap: 32px;
    justify-self: center;
    align-self: start;
    width: 100%;
    max-width: var(--adime-monitor-max);
  }

  .nc-text-block__intro {
    grid-area: copy;
    max-width: none;
    margin: 0;
  }

  .nc-feature-list {
    grid-area: list;
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    column-gap: 55px;
    justify-self: stretch;
    margin: 0;
  }

  .compass-action {
    grid-area: cta;
    justify-self: center;
    margin: 0;
  }

}

@media (max-width: 1050px) {
  .site-header-inner {
    grid-template-columns: 1fr auto;
  }

  .persephone-wordmark {
    width: max-content;
    max-width: 100%;
  }

  .persephone-wordmark .wordmark-line {
    display: block;
    width: max-content;
    max-width: 100%;
    margin-inline: auto;
    paint-order: normal;
  }

  .persephone-wordmark .wordmark-line + .wordmark-line::before {
    content: none;
  }

  .nav-links {
    grid-column: 1;
    grid-row: 1;
    justify-content: flex-start;
    flex-wrap: nowrap;
  }

  .footer-container {
    grid-template-columns: 1fr 1fr;
    justify-content: stretch;
  }
}

@media (max-width: 1000px) {
  .persephone-wordmark {
    -webkit-text-stroke: 0;
  }

  .hero-slogan {
    -webkit-text-stroke: 0;
  }

  .hero-slogan .slogan-line--secondary {
    text-stroke: 0.95px #1E4D4A;
    -webkit-text-stroke-width: 0.95px;
  }

  .hero-pathways {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .hero-introduction {
    max-width: 100%;
  }

  .hero-action-button {
    justify-self: start;
    width: max-content;
    max-width: min(100%, 280px);
  }

  .service-grid {
    grid-template-columns: 1fr;
    gap: 32px;
    row-gap: 32px;
    column-gap: 32px;
  }

}

@media (max-width: 720px) {
  .adime-live-preview {
    --adime-preview-scale: .25;
  }

  .site-header {
    min-height: var(--header-rail);
    padding: 0;
  }

  .site-header-inner {
    width: calc(100% - 48px);
    min-height: var(--header-rail);
  }

  .persephone-wordmark {
    justify-self: center;
    text-align: center;
    white-space: normal;
  }

  .portal-link {
    justify-self: start;
  }

  .nav-links {
    gap: 4px 24px;
  }

  .hero-content {
    width: calc(100% - 48px);
    padding-top: 0;
    padding-bottom: 0;
  }

  .hero-slogan,
  .hero-slogan .slogan-line {
    white-space: normal;
  }

  .hero-pathway {
    justify-items: stretch;
    text-align: left;
  }

  .hero-pathway-cta {
    display: flex;
    justify-content: center;
  }

  .hero-action-button,
  .gold-button.hero-action-button {
    align-self: center;
    margin-inline: auto;
    text-align: center;
  }

  .gold-button {
    width: max-content;
    max-width: 100%;
    padding: 0 34px;
    justify-content: center;
    text-align: center;
  }

  .services,
  .compass,
  .site-footer {
    padding-left: 24px;
    padding-right: 24px;
  }

  .services {
    padding-top: var(--subsection-heading-above);
    padding-bottom: 0;
  }

  .services::before {
    display: none;
  }

  .section-heading {
    width: min(100%, 420px);
    max-width: 100%;
    margin-bottom: var(--subsection-heading-below);
    padding: 0;
  }

  .service-grid {
    grid-template-columns: 1fr;
    gap: 32px;
    row-gap: 32px;
    column-gap: 32px;
  }

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

  .footer-quick-links {
    grid-template-columns: max-content;
  }

  .footer-brand {
    grid-template-columns: max-content;
    justify-content: start;
    text-align: left;
  }

  .socials {
    grid-column: 1;
    grid-row: auto;
    margin: 10px 0 0;
  }

  .compass-container {
    grid-template-columns: 1fr;
    row-gap: 32px;
    align-items: start;
  }

  .compass-copy {
    width: 100%;
    max-width: var(--adime-monitor-max);
    justify-self: center;
    padding: 0;
  }

  .dashboard-shell {
    width: 100%;
    max-width: var(--adime-monitor-max);
    grid-template-columns: 1fr;
  }

  .nc-feature-list {
    grid-template-rows: none;
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: none;
    column-gap: .6em;
    margin: 0 0 0 var(--nc-list-indent);
  }

  .compass-action {
    justify-self: start;
    margin: 40px 0 0 0;
  }

}

@media (max-width: 560px) {
  .compass-container {
    --nc-list-indent: clamp(16px, calc(var(--teaser-column-gap) + .4em), 24px);
    --nc-list-text-offset: calc(var(--nc-list-indent) + 1.25rem + (var(--nc-copy-size) * .6));
    row-gap: 0;
  }

  .dashboard-shell {
    display: none;
  }

  .teaser-scrollbar {
    display: none;
  }

  .mobile-teaser-compass {
    display: block;
    justify-self: start;
    left: 50%;
    margin: calc(var(--mobile-compass-visual-top-trim) + 26px) 0 calc(var(--mobile-compass-visual-bottom-trim) + 16px);
    transform: translateX(-50%);
  }

  .teaser-dashboard-heading {
    display: none;
  }

  .compass-copy {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "copy"
      "cta";
    column-gap: 0;
    row-gap: 0;
  }

  .nc-feature-list li {
    grid-template-columns: 1.25rem minmax(0, 1fr);
    column-gap: .6em;
  }

  .compass-logo-mark {
    margin: 0;
    align-self: center;
    transform: none;
  }

  .compass-action {
    justify-self: start;
    margin-left: var(--nc-list-text-offset);
  }

  .footer-quick-links {
    grid-template-columns: 1fr;
    justify-content: stretch;
  }

  .footer-quick-links h2,
  .footer-quick-links a:nth-of-type(n) {
    grid-column: 1;
    grid-row: auto;
    text-align: left;
  }

  .portal-badge {
    width: 58px;
    height: 58px;
  }

}

@media (max-width: 720px) {
  .hero-slogan,
  .hero-slogan .slogan-line {
    text-align: center;
  }

  .service-grid {
    gap: 32px;
    row-gap: 32px;
    column-gap: 32px;
  }

  .card-body h3 {
    font-size: clamp(1.75rem, calc(1.6273rem + 0.54545vw), 2.5rem);
    text-align: left;
  }
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-card {
  background: transparent !important;
}
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-card::before {
  content: none !important;
  display: none !important;
}
@media (max-width: 1000px) {
  .about-split,
  .about-story-grid,
  .about-compass-story {
    grid-template-columns: 1fr;
  }

  .about-compass-story .about-screenshot {
    order: -1;
  }

  .about-team-grid,
  .about-timeline {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .about-hero-inner,
  .about-section-inner {
    width: calc(100% - 48px);
  }

  .about-hero-inner {
    margin-inline: auto;
    padding-top: 56px;
  }

  .about-hero h1 {
    font-size: clamp(2.65rem, 12vw, 4rem);
    line-height: 1.05;
    -webkit-text-stroke-width: .95px;
  }

  .about-hero p:not(.about-kicker),
  .about-mission p {
    font-size: 1.05rem;
  }

  .about-section {
    padding: 64px 0;
  }

  .about-copy h2,
  .about-centered-heading h2,
  .about-mission h2 {
    font-size: clamp(2.15rem, 10vw, 3rem);
  }

  .about-portrait-card {
    min-height: 380px;
  }

  .about-screenshot {
    padding: 8px;
  }
}

/* Teal teaser unified vertical layout */
.compass-container {
  --nc-logo-top-space: 0px;
  --nc-logo-bottom-space: 40px;
  --nc-paragraph-includes-space: 36px;
  --nc-list-dashboard-space: 50px;
  --nc-cta-viewer-space: 20px;
  --nc-control-rail-height: clamp(50px, 4.2cqw, 58px);
  --nc-viewer-bottom-lip: var(--nc-frame-side-rail);
  --nc-frame-side-rail: clamp(10px, 1.4cqw, 16px);
  --nc-frame-right-rail: var(--nc-frame-side-rail);
  --nc-preview-bevel-width: 2px;
  --nc-scrollbar-width: clamp(16px, 1.5cqw, 20px);
  --nc-dashboard-title-size: clamp(1.25rem, calc(1.1845rem + 0.2909vw), 1.65rem);
  --nc-text-stack-height: auto;
  --nc-dashboard-shell-height: auto;
  --nc-dashboard-start-offset: 0px;
  --nc-frame-radius: clamp(14px, calc(12.691px + 0.3636vw), 22px);
  --nc-frame-gold:
    linear-gradient(90deg, rgba(255, 255, 255, .08) 0%, rgba(255, 255, 255, .34) 12%, rgba(246, 220, 136, .18) 27%, rgba(255, 255, 255, .08) 50%, rgba(246, 220, 136, .20) 73%, rgba(255, 255, 255, .30) 88%, rgba(255, 255, 255, .08) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, .50) 0%, rgba(246, 220, 136, .36) 9%, rgba(255, 255, 255, 0) 21%),
    linear-gradient(115deg, rgba(255, 255, 255, 0) 0 18%, rgba(255, 255, 255, .24) 25%, rgba(255, 255, 255, 0) 34% 100%),
    linear-gradient(150deg, #F6DC88 0%, #F1BE15 18%, #CEA00C 43%, #F6DC88 54%, #F1BE15 66%, #CEA00C 82%, #583900 100%);
  --nc-includes-list-space: 32px;
  --nc-list-indent: 24px;
  --nc-list-column-gap: 75px;
  --nc-list-item-gap: 12px;
  width: min(var(--content-max), calc(100vw - var(--page-gutter) - var(--page-gutter)));
  position: relative;
  grid-template-columns: minmax(0, 2fr) 75px minmax(0, 3fr);
  grid-template-areas:
    "brand divider dashboard"
    "text divider dashboard";
  grid-template-rows: auto auto;
  column-gap: 0;
  row-gap: 0;
  justify-items: stretch;
}

.compass-container::after {
  content: none;
  grid-column: 2;
  grid-row: 1 / 4;
  justify-self: center;
  width: 1.5px;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(241, 190, 21, 0), #F6DC88 12%, var(--gold) 50%, #F6DC88 88%, rgba(241, 190, 21, 0));
}

.compass-lockup-row {
  justify-self: start;
  width: 100%;
  max-width: 100%;
  margin: var(--nc-logo-top-space) auto var(--nc-logo-bottom-space);
  transform: translateX(0);
}

.compass-text-stack {
  grid-area: text;
  min-width: 0;
  align-self: start;
}

.compass-copy {
  display: block;
  width: 100%;
  max-width: none;
  justify-self: stretch;
  margin: 0;
  box-sizing: border-box;
  padding-inline: 8px;
}

.nc-text-block__intro {
  max-width: none;
  margin: 0;
  color: #FFFFFF;
  font-family: var(--sans);
  font-size: var(--nc-copy-size);
  font-weight: 450;
  line-height: 1.75;
  letter-spacing: .01em;
  margin-bottom: var(--nc-paragraph-includes-space);
}

.teaser-dashboard-column {
  grid-area: dashboard;
  container-type: inline-size;
  width: 100%;
  max-width: var(--adime-monitor-max);
  justify-self: end;
  align-self: start;
  min-width: 0;
  margin-top: var(--nc-dashboard-start-offset);
}

.teaser-dashboard-stack {
  position: relative;
  container-type: inline-size;
  width: 100%;
  max-width: none;
  display: block;
  min-height: 0;
  height: auto;
  margin: 0;
  padding-bottom: var(--nc-viewer-bottom-lip);
  overflow: hidden;
  border-radius: var(--nc-frame-radius);
  background: var(--nc-frame-gold);
  border: 1px solid #583900;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .62),
    inset 0 9px 12px rgba(255, 255, 255, .16),
    inset 0 -4px 7px rgba(88, 57, 0, .42),
    inset 1px 0 0 rgba(246, 220, 136, .28),
    inset -1px 0 0 rgba(88, 57, 0, .38),
    0 8px 10px rgba(0, 0, 0, .24),
    0 2px 4px rgba(0, 0, 0, .18);
}

/* Final purpose-section handoff: use the shared title clearance. */
.about-page .about-section--team {
  padding-bottom: 0 !important;
}

.about-page .about-section--team + .about-purpose {
  padding-top: var(--subsection-heading-above) !important;
}

/* Stacked biography: keep the plate on the content rail and the portrait modest. */
@media (max-width: 900px) {
  .about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto clamp(40px, 7vw, 64px) !important;
    padding: clamp(24px, 5vw, 40px) !important;
    box-sizing: border-box !important;
    border-radius: 8px !important;
  }

  .about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame {
    width: min(100%, 330px) !important;
    max-width: 330px !important;
  }
}

.teaser-dashboard-stack::before,
.teaser-dashboard-stack::after {
  content: none;
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  pointer-events: none;
}

.teaser-scrollbar {
  position: absolute;
  top: calc(24px + var(--nc-dashboard-title-size) + 3px);
  right: calc(var(--nc-frame-right-rail) + 2px);
  bottom: calc(var(--nc-viewer-bottom-lip) + 3px);
  z-index: 2;
  width: var(--nc-scrollbar-width);
  --teaser-scrollbar-travel: 1px;
  border: 1px solid #583900;
  border-radius: 999px;
  background:
    linear-gradient(180deg, #FFF7CD 0%, #F6DC88 35%, #F1BE15 68%, #CEA00C 100%) top / 100% 24px no-repeat,
    linear-gradient(180deg, #F6DC88 0%, #F1BE15 48%, #CEA00C 100%) bottom / 100% 24px no-repeat,
    linear-gradient(180deg, transparent 0 24px, #F6DC88 24px, #F6DC88 calc(100% - 24px), transparent calc(100% - 24px)),
    linear-gradient(90deg, #583900 0%, #CEA00C 13%, #F6DC88 42%, #F6DC88 62%, #CEA00C 86%, #583900 100%);
  box-shadow:
    inset 1px 0 0 rgba(255, 255, 255, .52),
    inset -1px 0 0 rgba(88, 57, 0, .58),
    0 0 0 1px rgba(246, 220, 136, .22),
    -2px 0 3px rgba(0, 0, 0, .22);
  cursor: default;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  clip-path: inset(0 2px 0 0 round 999px);
}

.teaser-scrollbar__arrow {
  position: absolute;
  left: 50%;
  z-index: 2;
  width: 8px;
  height: 6px;
  transform: translateX(-50%);
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .30));
}

.teaser-scrollbar__arrow--up {
  top: 8px;
  background: #583900;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.teaser-scrollbar__arrow--down {
  bottom: 8px;
  background: #583900;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.teaser-scrollbar__thumb {
  position: absolute;
  left: 50%;
  top: 24px;
  width: calc(100% - 7px);
  height: clamp(56px, 7.4cqw, 84px);
  border: 1px solid rgba(88, 57, 0, .70);
  border-radius: 999px;
  background: linear-gradient(180deg, #CEA00C 0%, #583900 100%);
  box-shadow:
    inset 1px 0 0 rgba(255, 255, 255, .28),
    inset -1px 0 0 rgba(88, 57, 0, .50);
  transform: translate(-50%, calc(var(--teaser-scroll-ratio, 0) * var(--teaser-scrollbar-travel)));
  transition:
    background .18s ease,
    box-shadow .18s ease;
}

.teaser-scrollbar:hover .teaser-scrollbar__thumb,
.teaser-scrollbar:focus-within .teaser-scrollbar__thumb {
  background: linear-gradient(180deg, #F1BE15 0%, #CEA00C 100%);
  box-shadow:
    inset 1px 0 0 rgba(255, 255, 255, .46),
    inset -1px 0 0 rgba(88, 57, 0, .42),
    0 0 6px rgba(241, 190, 21, .34);
}

.teaser-dashboard-heading {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 12px clamp(18px, 2.4cqw, 28px);
  border-radius: var(--nc-frame-radius) var(--nc-frame-radius) 0 0;
  color: #123F3D;
  background: transparent;
  box-shadow: none;
}

.teaser-dashboard-heading strong {
  position: relative;
  z-index: 1;
  display: inline-block;
  color: #1E4D4A;
  font-family: "Montserrat", var(--sans);
  font-size: var(--nc-dashboard-title-size);
  font-weight: 900;
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  -webkit-text-fill-color: #1E4D4A;
  -webkit-text-stroke: clamp(.55px, .045vw, .95px) #CEA00C;
  paint-order: stroke fill;
  text-shadow:
    0 -.5px 0 rgba(246, 220, 136, .65),
    0 1px 0 rgba(88, 57, 0, .35);
}

.teaser-dashboard-heading strong::before {
  content: none;
}

.teaser-dashboard-heading strong::after {
  content: none;
}

.dashboard-shell,
.dashboard-image-shell {
  box-sizing: border-box;
  position: relative;
  isolation: isolate;
  display: block;
  min-height: 0;
  height: clamp(360px, 34vw, 620px);
  max-height: none;
  aspect-ratio: auto;
  width: calc(100% - var(--nc-frame-side-rail) - var(--nc-frame-right-rail));
  margin: 0 var(--nc-frame-right-rail) 0 var(--nc-frame-side-rail);
  padding: 4px;
  overflow: hidden;
  border-radius: var(--monitor-inner-radius);
  clip-path: inset(0 round var(--monitor-inner-radius));
  background: #583900;
  box-shadow:
    inset 0 4px 8px rgba(0, 0, 0, .52),
    inset 0 -1px 1px rgba(246, 220, 136, .22);
}

.dashboard-image-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  box-sizing: border-box;
  border: 4px solid #583900;
  border-right-width: 19px;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, .46),
    inset 0 -1px 1px rgba(246, 220, 136, .18),
    0 1px 0 rgba(255, 255, 255, .12);
}

.dashboard-image-shell::before {
  content: none;
}

.teaser-dashboard-stack .adime-live-preview {
  position: absolute;
  inset: 4px 4px 4px 3px;
  z-index: 1;
  display: block;
  width: auto;
  height: calc(100% - 8px);
  min-height: 0;
  border-radius: 0;
  clip-path: inset(0);
}

.teaser-dashboard-stack .adime-frame-stage,
.teaser-dashboard-stack .adime-live-frame {
  border-radius: 0;
  clip-path: inset(0);
}

@media (min-width: 1221px) {
  .compass-container.is-teaser-measured .dashboard-shell,
  .compass-container.is-teaser-measured .dashboard-image-shell {
    height: var(--nc-dashboard-shell-height, var(--nc-text-stack-height));
    aspect-ratio: auto;
  }
}

.compass-includes {
  width: 100%;
  max-width: none;
  justify-self: stretch;
  box-sizing: border-box;
  padding-inline: 8px;
  color: #FFFFFF;
  font-family: var(--sans);
  font-size: var(--nc-copy-size);
  font-weight: 450;
  line-height: 1.75;
  letter-spacing: .01em;
}

.nc-includes-heading {
  margin: 0 0 var(--nc-includes-list-space);
  color: #FFFFFF;
  font-family: var(--sans);
  font-size: var(--nc-copy-size);
  font-weight: 450;
  line-height: 1.75;
  letter-spacing: .01em;
}

.nc-feature-list {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: none;
  grid-auto-flow: row;
  column-gap: .6em;
  row-gap: var(--nc-list-item-gap);
  margin: 0 0 0 var(--nc-list-indent);
}

.nc-feature-list li {
  color: #FFFFFF;
  font-family: var(--sans);
  font-size: var(--nc-copy-size);
  font-weight: 450;
  line-height: 1.75;
  letter-spacing: .01em;
}

.compass-action {
  width: 100%;
  max-width: none;
  margin: var(--nc-cta-viewer-space) 0 0;
  padding: 0;
}

@property --nc-cta-border-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.compass-action .gold-button {
  display: flex;
  width: 100%;
  height: 42px;
  min-height: 42px;
  padding: 0 clamp(24px, 3.2cqw, 42px);
  overflow: hidden;
  border-radius: 999px;
  border: 2px solid transparent;
  color: #1E4D4A;
  font-weight: 700;
  font-size: clamp(.98rem, 1.25cqw, 1.12rem);
  letter-spacing: .01em;
  --nc-cta-border-angle: 0deg;
  background:
    linear-gradient(180deg, #F9E7A8 0%, #F6DC88 18%, #F1BE15 48%, #E1AD09 78%, #C99508 100%) padding-box,
    conic-gradient(
      from var(--nc-cta-border-angle),
      #CEA00C 0deg 220deg,
      #F1BE15 238deg,
      #F6DC88 256deg,
      #FFF4C2 274deg,
      rgba(255, 255, 255, 1) 292deg,
      rgba(255, 255, 255, 1) 316deg,
      #FFF4C2 334deg,
      #F6DC88 348deg,
      #CEA00C 360deg
    ) border-box;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .62),
    inset 0 -1px 0 rgba(88, 57, 0, .18),
    inset 0 0 0 1px rgba(88, 57, 0, .32),
    0 0 0 1px rgba(246, 220, 136, .72),
    0 0 10px rgba(241, 190, 21, .46),
    0 0 18px rgba(246, 220, 136, .26),
    0 8px 12px rgba(0, 0, 0, .34),
    0 3px 6px rgba(88, 57, 0, .26);
  outline: 0;
  isolation: isolate;
  text-shadow: none;
  animation: ncCtaBorderSweep 3.8s linear infinite;
  transition:
    color .22s ease,
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease;
}

.compass-action .gold-button::before {
  content: none;
}

.compass-action .gold-button::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -2;
  border-radius: inherit;
  background:
    radial-gradient(
      ellipse at center,
      rgba(241, 190, 21, .28) 0%,
      rgba(241, 190, 21, .16) 42%,
      rgba(246, 220, 136, 0) 100%
    );
  filter: blur(5px);
  opacity: .28;
  pointer-events: none;
}

.compass-action .gold-button span {
  margin-left: .65em;
}

.compass-action .gold-button:hover,
.compass-action .gold-button:focus-visible {
  color: var(--white);
  background:
    linear-gradient(180deg, #F6DC88 0%, #F1BE15 100%) padding-box,
    linear-gradient(180deg, #FFF4C2 0%, #F6DC88 26%, #F1BE15 62%, #CEA00C 100%) border-box;
  transform: none;
  animation: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .68),
    inset 0 -1px 0 rgba(88, 57, 0, .18),
    inset 0 0 0 1px rgba(88, 57, 0, .22),
    0 0 0 1px rgba(255, 244, 194, .88),
    0 0 10px rgba(246, 220, 136, .42),
    0 0 18px rgba(241, 190, 21, .24),
    0 10px 14px rgba(0, 0, 0, .36),
    0 4px 8px rgba(88, 57, 0, .30);
}

@keyframes ncCtaBorderSweep {
  to {
    --nc-cta-border-angle: 360deg;
  }
}

@media (prefers-reduced-motion: reduce) {
  .compass-action .gold-button {
    animation: none;
  }
}

@media (max-width: 1220px) {
    .compass-container {
      grid-template-columns: minmax(0, 1fr);
      grid-template-areas:
        "brand"
        "text"
        "dashboard";
      grid-template-rows: auto auto auto;
      column-gap: 0;
    }

    .compass-container::after {
      display: none;
    }

  .compass-lockup-row {
    justify-self: center;
    max-width: var(--adime-monitor-max);
    transform: translateX(0);
  }

    .compass-copy,
    .compass-text-stack,
    .compass-includes {
      width: 100%;
      max-width: none;
      justify-self: stretch;
  }

    .compass-text-stack {
      margin-bottom: var(--nc-list-dashboard-space);
    }

      .teaser-dashboard-column {
        width: 100%;
        max-width: var(--adime-monitor-max);
        justify-self: center;
        align-self: start;
        margin-top: 0;
      }

      .teaser-dashboard-stack {
        container-type: normal;
        display: block;
        width: 100%;
        max-width: none;
        height: auto;
        margin: 0;
      }

    .dashboard-shell,
    .dashboard-image-shell {
      height: clamp(360px, 52vw, 560px);
      aspect-ratio: auto;
      border-radius: var(--monitor-inner-radius);
    }

  .nc-text-block__intro {
    max-width: none;
  }

  .nc-feature-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    column-gap: var(--nc-list-column-gap);
  }

    .compass-action {
      margin: var(--nc-cta-viewer-space) 0 0;
    }

    .compass-action .gold-button {
      height: 42px;
      min-height: 42px;
      font-size: clamp(1rem, calc(.9491rem + .2182vw), 1.12rem);
    }
}

@media (max-width: 720px) {
  .compass-lockup-row {
    margin-top: var(--nc-logo-top-space);
    margin-bottom: var(--nc-logo-bottom-space);
  }
}

@media (max-width: 900px) and (min-width: 561px) {
  .nc-feature-list {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-auto-flow: row;
    grid-auto-columns: auto;
    column-gap: .6em;
  }
}

@media (max-width: 560px) {
  .compass-container {
    row-gap: 0;
  }

  .compass-lockup-row {
    transform: translateX(-4px);
  }

  .dashboard-shell {
    display: none;
  }

  .mobile-teaser-compass {
    display: block;
    justify-self: start;
    left: 50%;
    margin: calc(var(--mobile-compass-visual-top-trim) + 26px) 0 calc(var(--mobile-compass-visual-bottom-trim) + 16px);
    transform: translateX(-50%);
  }

  .teaser-dashboard-stack {
    width: 100%;
    max-width: none;
    align-items: center;
    height: auto;
  }

  .teaser-dashboard-heading {
    display: none;
  }

    .compass-copy {
      grid-template-columns: none;
      grid-template-areas: none;
      column-gap: 0;
      row-gap: 0;
      padding-inline: 0;
    }

    .compass-text-stack {
      width: 100%;
      max-width: none;
      justify-self: stretch;
    }

  .compass-includes {
    padding-inline: 0;
  }

  .nc-feature-list {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-auto-flow: row;
    grid-auto-columns: auto;
    column-gap: .6em;
  }

  .nc-feature-list li {
    grid-template-columns: 1.25rem minmax(0, 1fr);
    column-gap: .6em;
  }

  .compass-action {
    justify-self: center;
    width: 100%;
    margin: var(--nc-cta-viewer-space) 0 0;
    padding-bottom: 16px;
  }

  .compass-action .gold-button {
    height: 42px;
    min-height: 42px;
    padding-inline: 26px;
    border-radius: 999px;
  }
}

/* Nutrition Compass landing page */
.nc-landing {
  background: #FFFFFF;
  color: var(--ink);
  font-family: var(--sans);
  overflow-x: hidden;
}

.nc-main {
  background: #FFFFFF;
  overflow-x: hidden;
}

.nc-landing h1,
.nc-landing h2,
.nc-landing h3 {
  margin: 0;
}

.nc-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, .92);
  border-bottom: 1px solid rgba(30, 77, 74, .1);
  backdrop-filter: blur(12px);
}

.nc-header-inner,
.nc-hero-inner,
.nc-section,
.nc-workspace,
.nc-footer-inner {
  width: min(var(--content-max), calc(100% - var(--page-gutter) - var(--page-gutter)));
  margin-inline: auto;
}

.nc-header-inner {
  min-height: 86px;
  display: grid;
  grid-template-columns: minmax(245px, auto) 1fr auto;
  gap: clamp(24px, 3vw, 58px);
  align-items: center;
}

.nc-logo-lockup {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--deep-teal);
  line-height: 1;
}

.nc-logo-lockup img {
  width: 70px;
  height: 70px;
  object-fit: contain;
  flex: 0 0 auto;
}

.nc-logo-lockup strong {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.1rem, 1.7vw, 1.75rem);
  font-weight: 700;
  letter-spacing: .11em;
}

.nc-logo-lockup small {
  display: block;
  margin-top: 5px;
  font-family: var(--display);
  font-size: clamp(.46rem, .55vw, .62rem);
  font-weight: 650;
  color: var(--accent-cyan);
  letter-spacing: .22em;
}

.nc-nav,
.nc-actions,
.nc-hero-buttons {
  display: flex;
  align-items: center;
}

.nc-nav {
  justify-content: center;
  gap: clamp(24px, 3vw, 54px);
  font-size: .86rem;
  font-weight: 700;
  color: var(--deep-teal);
}

.nc-actions,
.nc-hero-buttons {
  gap: 14px;
}

.nc-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: .78rem 1.35rem;
  border-radius: 6px;
  font-family: var(--sans);
  font-size: .88rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.nc-button-outline {
  color: var(--deep-teal);
  border: 1px solid rgba(30, 77, 74, .78);
  background: rgba(255, 255, 255, .55);
}

.nc-button-outline-light {
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, .72);
  background: transparent;
}

.nc-button-home {
  color: var(--deep-teal);
  border: 1px solid rgba(30, 77, 74, .34);
  background: rgba(255, 255, 255, .72);
}

.nc-button-gold {
  color: var(--deep-teal);
  border: 1px solid rgba(88, 57, 0, .32);
  background:
    linear-gradient(180deg, #F6DC88 0%, #F1BE15 50%, #CEA00C 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .58),
    inset 0 -2px 0 rgba(88, 57, 0, .14),
    0 10px 22px rgba(88, 57, 0, .16);
}

.nc-hero {
  position: relative;
  overflow: hidden;
  background: #031716;
  aspect-ratio: 16 / 9;
  min-height: 0;
}

.nc-hero-art {
  position: absolute;
  inset: 0 auto auto 50%;
  z-index: 0;
  width: min(2560px, 100%);
  max-width: none;
  height: auto;
  transform: translateX(-50%);
  transform-origin: center top;
  opacity: 1;
}

.nc-hero::before,
.nc-hero::after {
  content: none;
}

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

.nc-hero-copy,
.nc-hero-copy::before {
  display: contents;
}

.nc-hero h1 {
  font-family: var(--brand);
  font-size: clamp(3rem, 5vw, 5.1rem);
  font-weight: 600;
  line-height: .98;
  letter-spacing: .01em;
  color: var(--deep-teal);
}

.nc-eyebrow {
  margin: 28px 0 18px;
  font-family: var(--display);
  font-size: .83rem;
  font-weight: 700;
  letter-spacing: .35em;
  color: var(--deep-teal);
}

.nc-hero-copy > p:not(.nc-eyebrow):not(.nc-credential),
.nc-workspace-copy > h3 {
  font-size: 1.03rem;
  line-height: 1.6;
}
.nc-check-list {
  list-style: none;
  margin: 18px 0 26px;
  padding: 0;
  display: grid;
  gap: 9px;
  font-size: .98rem;
  line-height: 1.45;
}

.nc-check-list li {
  position: relative;
  padding-left: 26px;
}

.nc-check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .18em;
  width: 14px;
  height: 14px;
  border: 1.8px solid var(--deep-teal);
  border-radius: 50%;
}

.nc-check-list li::after {
  content: "";
  position: absolute;
  left: 4px;
  top: .48em;
  width: 6px;
  height: 3px;
  border-left: 1.8px solid var(--deep-teal);
  border-bottom: 1.8px solid var(--deep-teal);
  transform: rotate(-45deg);
}

.nc-credential {
  max-width: 430px;
  margin: 24px 0 0;
  font-size: .78rem;
  color: var(--muted);
}

.nc-section {
  padding: 58px 0 44px;
}

.nc-section-heading {
  margin: 0 auto 32px;
  text-align: center;
}

.nc-section-heading h2 {
  font-family: var(--brand);
  font-size: clamp(2rem, 2.6vw, 3rem);
  font-weight: 600;
  line-height: 1;
  color: var(--deep-teal);
}

.nc-section-heading span {
  display: block;
  margin-top: 10px;
  color: var(--accent-amber);
  font-size: 1.3rem;
}

.nc-feature-grid,
.nc-audience-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border: 1px solid rgba(30, 77, 74, .14);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255, 255, 255, .8);
}

.nc-feature-grid article,
.nc-audience-grid article {
  min-height: 206px;
  padding: 28px 22px;
  text-align: center;
  border-right: 1px solid rgba(30, 77, 74, .12);
}

.nc-feature-grid article:last-child,
.nc-audience-grid article:last-child {
  border-right: 0;
}

.nc-line-icon {
  width: 58px;
  height: 58px;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(206, 160, 12, .32);
  background: #FFF9EF;
  color: var(--deep-teal);
  font-family: var(--display);
  font-weight: 700;
}

.nc-feature-grid h3,
.nc-audience-grid h3 {
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 750;
  line-height: 1.15;
  color: var(--deep-teal);
}

.nc-feature-grid p,
.nc-audience-grid p {
  margin: 12px 0 0;
  font-size: .82rem;
  line-height: 1.45;
}

.nc-video-section {
  padding-top: 28px;
}

.nc-video-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34px;
}

.nc-video-grid article {
  position: relative;
  min-height: 220px;
  overflow: hidden;
  border-radius: 10px;
  background:
    linear-gradient(rgba(30,77,74,.48), rgba(30,77,74,.62)),
    linear-gradient(135deg, #D7ECE8, #FFFFFF 42%, #99CFC2);
  box-shadow: 0 20px 44px rgba(30, 41, 40, .18);
}

.nc-video-grid button {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 72px;
  height: 72px;
  border: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 12px 28px rgba(30, 41, 40, .22);
}

.nc-video-grid button::before {
  content: "";
  position: absolute;
  left: 30px;
  top: 23px;
  border-left: 18px solid var(--deep-teal);
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
}

.nc-video-grid strong {
  position: absolute;
  inset: auto 0 0;
  padding: 14px 16px;
  color: var(--white);
  text-align: center;
  font-size: 1rem;
}

.nc-text-link {
  display: block;
  width: max-content;
  margin: 26px auto 0;
  color: var(--deep-teal);
  font-weight: 750;
}

.nc-workspace {
  padding: 54px 0 58px;
  display: grid;
  gap: 28px;
}

.nc-workspace-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, .72fr);
  gap: clamp(40px, 5vw, 86px);
  align-items: center;
}

.nc-monitor-frame {
  padding: 16px 16px 32px;
  border-radius: 18px 18px 24px 24px;
  background: linear-gradient(100deg, #F6DC88 0%, #F1BE15 34%, #CEA00C 84%, #583900 100%);
  box-shadow:
    inset 0 2px 0 #F6DC88,
    inset 2px 0 0 #F6DC88,
    inset -2px 0 0 #CEA00C,
    inset 0 -3px 0 #583900,
    inset 0 0 0 1px #CEA00C,
    0 24px 48px rgba(30,41,40,.16);
}

.nc-monitor-screen {
  min-height: 350px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 132px 1fr;
  border-radius: 4px;
  background: var(--white);
}

.nc-monitor-screen aside {
  padding: 18px 14px;
  display: grid;
  align-content: start;
  gap: 11px;
  color: var(--aqua-50);
  background: var(--deep-teal);
  font-size: .72rem;
}

.nc-monitor-screen aside strong {
  color: var(--gold-50);
  font-family: var(--display);
  line-height: .95;
}

.nc-monitor-screen aside span {
  padding: 8px 9px;
  border-radius: 7px;
  background: rgba(255, 255, 255, .08);
}

.nc-monitor-content {
  padding: 26px;
  background: var(--mist);
}

.nc-monitor-top,
.nc-monitor-cards span,
.nc-monitor-panels span {
  display: block;
  border: 1px solid rgba(30, 77, 74, .12);
  border-radius: 8px;
  background: var(--white);
}

.nc-monitor-top {
  height: 68px;
  margin-bottom: 20px;
}

.nc-monitor-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}

.nc-monitor-cards span {
  height: 94px;
}

.nc-monitor-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.nc-monitor-panels span {
  height: 150px;
  background:
    linear-gradient(160deg, var(--white) 0%, var(--white) 62%, rgba(153,207,194,.32) 63%),
    repeating-linear-gradient(to top, rgba(30,77,74,.1) 0 1px, transparent 1px 32px);
}

.nc-workspace-copy {
  color: var(--ink);
}

.nc-workspace-copy h3 {
  margin-bottom: 22px;
  font-family: var(--brand);
  font-size: clamp(1.65rem, 2.1vw, 2.35rem);
  color: var(--deep-teal);
}

.nc-audience-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border: 0;
}

.nc-audience-grid article {
  min-height: 145px;
  border-right: 1px solid rgba(30, 77, 74, .14);
}

.nc-final-cta {
  position: relative;
  overflow: hidden;
  padding: 48px var(--page-gutter);
  text-align: center;
  color: var(--white);
  background: linear-gradient(135deg, #0F3B39, var(--deep-teal));
}

.nc-final-cta::after {
  content: "";
  position: absolute;
  right: 7%;
  top: 50%;
  width: clamp(240px, 20vw, 340px);
  height: clamp(240px, 20vw, 340px);
  transform: translateY(-50%);
  background: url("assets/nc-footer-transparent-icon.png") center / contain no-repeat;
  border-radius: 50%;
  opacity: .18;
  filter: saturate(1.08) brightness(1.08);
}

.nc-final-cta > div {
  position: relative;
  z-index: 1;
}

.nc-final-cta h2 {
  font-family: var(--brand);
  font-size: clamp(2rem, 3vw, 3.2rem);
  font-weight: 600;
  line-height: 1;
}

.nc-final-cta p {
  margin: 14px 0 22px;
}

.nc-final-cta .nc-hero-buttons {
  justify-content: center;
}

.nc-final-cta small {
  display: block;
  margin-top: 20px;
}

.nc-footer {
  background:
    radial-gradient(circle at 12% 0%, rgba(153, 207, 194, .2), transparent 34%),
    linear-gradient(135deg, #0F3B39 0%, var(--deep-teal) 54%, #123F3C 100%);
  border-top: 1px solid rgba(246, 220, 136, .38);
  padding: 28px 0 20px;
  color: var(--white);
}

.nc-footer-inner {
  display: grid;
  grid-template-columns: minmax(260px, 1.4fr) repeat(3, minmax(130px, .55fr)) minmax(210px, .8fr);
  gap: 36px;
  align-items: start;
}

.nc-footer h2 {
  margin: 0 0 10px;
  font-family: var(--display);
  font-size: .9rem;
  color: var(--white);
}

.nc-footer a,
.nc-footer p {
  display: block;
  margin: 0 0 8px;
  font-size: .82rem;
  color: rgba(255, 255, 255, .86);
}

.nc-footer a:hover {
  color: var(--gold-50);
}

.nc-footer-brand {
  display: grid;
  grid-template-columns: minmax(230px, auto) 58px;
  gap: 24px;
  align-items: center;
  width: min(100%, 420px);
}

.nc-footer .nc-logo-lockup {
  display: block;
  color: var(--white);
}

.nc-footer .nc-logo-lockup strong {
  font-size: clamp(1.15rem, 1.45vw, 1.55rem);
  letter-spacing: .12em;
  color: var(--white);
}

.nc-footer .nc-logo-lockup small {
  margin-top: 6px;
  font-size: clamp(.46rem, .52vw, .58rem);
  letter-spacing: .26em;
  color: var(--gold-50);
}

.nc-footer-standalone-mark {
  width: 58px;
  height: 58px;
  object-fit: contain;
  flex: 0 0 auto;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .22));
}

.nc-footer-home-link {
  grid-column: 1 / -1;
  width: fit-content;
  margin-top: 6px;
  color: var(--gold-50);
  font-weight: 700;
}

.nc-help-box {
  padding: 18px;
  border: 1px solid rgba(246, 220, 136, .38);
  border-radius: 8px;
  background: rgba(255, 255, 255, .06);
}

.nc-help-box .nc-button-outline {
  color: var(--white);
  border-color: rgba(246, 220, 136, .68);
  background: rgba(255, 255, 255, .04);
}

.nc-copyright {
  margin: 20px 0 0;
  text-align: center;
  font-size: .75rem;
  color: rgba(255, 255, 255, .72);
}

@media (max-width: 1100px) {
  .nc-header-inner {
    grid-template-columns: 1fr;
    padding: 18px 0;
  }

  .nc-nav,
  .nc-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
.nc-feature-grid,
  .nc-audience-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .nc-workspace-grid {
    grid-template-columns: 1fr;
  }

  .nc-footer-inner {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 760px) {
  .nc-header-inner,
  .nc-hero-inner,
  .nc-section,
  .nc-workspace,
  .nc-footer-inner {
    width: min(var(--content-max), calc(100% - 48px));
  }
.nc-feature-grid,
  .nc-audience-grid,
  .nc-video-grid,
  .nc-footer-inner {
    grid-template-columns: 1fr;
  }

  .nc-feature-grid article,
  .nc-audience-grid article {
    border-right: 0;
    border-bottom: 1px solid rgba(30, 77, 74, .12);
  }

  .nc-monitor-screen {
    grid-template-columns: 1fr;
  }

  .nc-monitor-screen aside {
    display: none;
  }
}

/* Nutrition services page */
.nutrition-services-page .services-page-hero {
  min-height: auto;
  padding-bottom: 0;
}

.nutrition-services-page .services-page-hero-content {
  padding-bottom: 0;
}

.services-page-intro {
  max-width: min(76rem, 100%);
}

.nutrition-services-page .service-detail-page {
  padding-top: 0;
}

.service-detail-page {
  position: relative;
  z-index: 2;
  padding: var(--subsection-heading-above) var(--page-gutter);
  background: transparent;
}

.service-detail-wrap {
  width: min(var(--content-max), 100%);
  margin-inline: auto;
  display: grid;
  gap: clamp(44px, 4vw, 70px);
}

.service-detail-section {
  scroll-margin-top: calc(var(--nav-rail-height) + 48px);
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(0, 2fr);
  gap: 0;
  align-items: stretch;
  padding: 0;
  border: var(--taupe-card-border-width) solid #E7DED1;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, .94);
  box-shadow: var(--card-shadow);
}

.service-detail-section--reverse {
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
}

.service-detail-visual {
  min-height: clamp(300px, 24vw, 440px);
  height: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
  position: relative;
  isolation: isolate;
  border: 0;
  --service-image-line-width: 0px;
  --service-image-vignette-depth: 42px;
  --service-visual-line-rgb: 30 77 74;
  border-radius: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.54), inset 0 -16px 28px rgba(30, 77, 74, .15);
}

.service-detail-section--reverse .service-detail-visual {
  order: 2;
  border-right: 0;
  border-left: 0;
}

.service-detail-section--reverse .service-detail-copy {
  order: 1;
}

.service-detail-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
}

.service-detail-visual::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: var(--service-image-vignette-depth);
  pointer-events: none;
  background: linear-gradient(270deg, rgb(var(--service-visual-line-rgb) / .42) 0, rgb(var(--service-visual-line-rgb) / .24) 10px, rgb(var(--service-visual-line-rgb) / .10) 22px, rgb(var(--service-visual-line-rgb) / 0) 100%);
}

.service-detail-section--reverse .service-detail-visual::after {
  right: auto;
  left: 0;
  background: linear-gradient(90deg, rgb(var(--service-visual-line-rgb) / .42) 0, rgb(var(--service-visual-line-rgb) / .24) 10px, rgb(var(--service-visual-line-rgb) / .10) 22px, rgb(var(--service-visual-line-rgb) / 0) 100%);
}
.service-detail-visual--therapy {
  --service-visual-line: var(--forest);
  --service-visual-line-rgb: 37 77 42;
}

.service-detail-visual--therapy::before {
  background-image: url("assets/service-medical-fruit-heart.jpg");
}

.service-detail-visual--planning {
  --service-visual-line: var(--burnt-orange);
  --service-visual-line-rgb: 200 121 30;
}

.service-detail-visual--planning::before {
  background-image: url("assets/service-meal-produce-bags.jpg");
  background-position: 18% 42%;
}

.service-detail-visual--consulting {
  --service-visual-line: var(--purple);
  --service-visual-line-rgb: 86 59 98;
}

.service-detail-visual--consulting::before {
  background-image: url("assets/service-consulting-citrus.jpg");
  background-position: center 34%;
}


.service-detail-copy {
  padding: var(--site-card-padding);
}

.service-detail-kicker {
  margin: 0 0 10px;
  color: var(--gold-dark);
  font-family: var(--display);
  font-size: .86rem;
  font-weight: 750;
  letter-spacing: .12em;
  line-height: 1.2;
  text-transform: uppercase;
}

.service-detail-copy h2 {
  margin: 0 0 18px;
  color: var(--deep-teal);
  font-family: var(--display);
  font-size: clamp(1.75rem, calc(1.6273rem + 0.54545vw), 2.5rem);
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: .0125em;
}

.service-detail-visual--therapy + .service-detail-copy h2 {
  color: #254D2A;
}

.service-detail-visual--planning + .service-detail-copy h2 {
  color: #D48A00;
}

.service-detail-visual--consulting + .service-detail-copy h2 {
  color: #563B62;
}

.service-detail-copy p:not(.service-detail-kicker) {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.1rem, calc(1.0755rem + 0.1091vw), 1.25rem);
  font-weight: 450;
  line-height: 1.75;
  letter-spacing: .01em;
}

.service-detail-list {
  list-style: none;
  padding: 0;
  margin: 26px 0 0;
  display: grid;
  gap: 12px;
}

.service-detail-list li {
  position: relative;
  padding-left: 32px;
  color: var(--ink);
  font-size: clamp(1.05rem, calc(1.03rem + 0.09vw), 1.18rem);
  font-weight: 500;
  line-height: 1.5;
}

.service-detail-list li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: .75em;
  width: 12px;
  height: 12px;
  border: 2px solid var(--gold);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #F6DC88 0 20%, #F1BE15 45%, #CEA00C 100%);
  box-shadow: 0 0 0 1px rgba(241, 190, 21, .12);
  transform: translateY(-50%);
}

.service-detail-button {
  margin-top: 30px;
  margin-left: 24px;
}


@media (max-width: 980px) {
  .service-detail-section,
  .service-detail-section--reverse {
    grid-template-columns: 1fr;
  }

  .service-detail-section--reverse .service-detail-visual,
  .service-detail-section--reverse .service-detail-copy {
    order: initial;
  }

  .service-detail-visual,
  .service-detail-section--reverse .service-detail-visual {
    min-height: clamp(220px, 36vw, 340px);
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
  }
}

/* Final portrait inset treatment: use the source silhouette for the curved
   top and bottom, with a restrained CEA00C bevel and a crisp 1px keyline. */
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame::before {
  inset: -6px;
  z-index: 0;
  background: #CEA00C !important;
  border-radius: 0 !important;
  filter: drop-shadow(0 1px 1px rgba(88, 57, 0, .18));
  box-shadow: none !important;
  -webkit-mask: url("assets/kathleen-boxx-nextdoor-profile.png") center / 100% 100% no-repeat;
  mask: url("assets/kathleen-boxx-nextdoor-profile.png") center / 100% 100% no-repeat;
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame::after {
  inset: -1px;
  z-index: 3;
  background: #583900 !important;
  border-radius: 0 !important;
  filter: none !important;
  box-shadow: none !important;
  -webkit-mask-image: url("assets/kathleen-boxx-nextdoor-profile.png"), url("assets/kathleen-boxx-nextdoor-profile.png");
  mask-image: url("assets/kathleen-boxx-nextdoor-profile.png"), url("assets/kathleen-boxx-nextdoor-profile.png");
  -webkit-mask-position: center, center;
  mask-position: center, center;
  -webkit-mask-size: 100% 100%, calc(100% - 2px) calc(100% - 2px);
  mask-size: 100% 100%, calc(100% - 2px) calc(100% - 2px);
  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-repeat: no-repeat, no-repeat;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* The name lockup reads as lettering cut through the gold plate to the teal. */
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-name,
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-role {
  color: #3F7D79 !important;
  text-shadow: none !important;
}

/* The portrait plate should float on the teal section without a second
   rectangular portrait-card surface behind it. */
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-card::before {
  content: none !important;
  display: none !important;
}

/* About portrait row: teal canvas with two contained, floating panels. */
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] {
  background: #3F7D79;
  box-shadow: none;
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-split {
  align-items: start;
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-copy {
  align-self: start;
  height: auto;
  min-height: 0;
  padding: var(--site-card-padding);
  border-radius: 8px;
  box-shadow: none;
  background: rgba(255, 252, 245, .96);
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-card {
  align-self: start;
  height: auto !important;
  min-height: 0 !important;
  padding: var(--site-card-padding);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: #3F7D79;
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame {
  width: min(100%, clamp(260px, 30vw, 390px));
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: auto;
  margin: 0 auto;
  padding: 45px 6px !important;
  overflow: visible;
  border: 0;
  border-radius: 34px 34px 42px 42px / 72px 72px 56px 56px;
  background: linear-gradient(118deg, #FFF4C2 0%, #F6DC88 38%, #FFFADE 50%, #F1BE15 74%, #CEA00C 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72), inset 0 -2px 2px rgba(88, 57, 0, .22), 0 9px 16px rgba(88, 57, 0, .28);
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame::before {
  display: none;
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-image {
  width: 100%;
  height: auto !important;
  aspect-ratio: auto;
  object-fit: contain;
  border: 0;
  border-radius: 34px 34px 42px 42px / 72px 72px 56px 56px;
  box-shadow: none;
}

@media (max-width: 1000px) {
  .about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame {
    height: auto !important;
  }
}

/* Service details: keep the category color at the image/content seam only. */
.nutrition-services-page .service-detail-visual::after {
  right: -1px;
  width: 64px;
  z-index: 3;
  background: linear-gradient(
    90deg,
    rgb(var(--service-visual-line-rgb) / 0) 0,
    rgb(var(--service-visual-line-rgb) / .16) 34px,
    rgb(var(--service-visual-line-rgb) / .52) 57px,
    rgb(var(--service-visual-line-rgb) / .90) 59px,
    rgb(var(--service-visual-line-rgb) / .90) 63px,
    rgb(var(--service-visual-line-rgb) / 0) 64px
  );
}

.nutrition-services-page .service-detail-section--reverse .service-detail-visual::after {
  right: auto;
  left: -1px;
  background: linear-gradient(
    270deg,
    rgb(var(--service-visual-line-rgb) / 0) 0,
    rgb(var(--service-visual-line-rgb) / .16) 34px,
    rgb(var(--service-visual-line-rgb) / .52) 57px,
    rgb(var(--service-visual-line-rgb) / .90) 59px,
    rgb(var(--service-visual-line-rgb) / .90) 63px,
    rgb(var(--service-visual-line-rgb) / 0) 64px
  );
}

.nutrition-services-page .service-detail-icon-badge {
  --service-detail-badge-size: 76px;
  top: clamp(28px, 4vw, 48px);
  transform: none;
}

.nutrition-services-page .service-detail-section--reverse .service-detail-icon-badge {
  top: clamp(28px, 4vw, 48px);
  transform: none;
}

.nutrition-services-page .service-detail-copy {
  padding-left: calc(var(--site-card-padding) + (var(--service-detail-badge-size) / 2) + 45px);
}

.nutrition-services-page .service-detail-section--reverse .service-detail-copy {
  padding-left: calc(var(--site-card-padding) + (var(--service-detail-badge-size) / 2) + 45px);
}

@media (max-width: 980px) {
  .nutrition-services-page .service-detail-visual::after,
  .nutrition-services-page .service-detail-section--reverse .service-detail-visual::after {
    right: 0;
    bottom: -1px;
    left: 0;
    width: auto;
    height: 64px;
    background: linear-gradient(
      0deg,
      rgb(var(--service-visual-line-rgb) / .90) 0 5px,
      rgb(var(--service-visual-line-rgb) / .52) 5px,
      rgb(var(--service-visual-line-rgb) / .16) 30px,
      rgb(var(--service-visual-line-rgb) / 0) 64px
    );
  }

  .nutrition-services-page .service-detail-section--reverse .service-detail-visual::after {
    top: auto;
  }

  .nutrition-services-page .service-detail-icon-badge,
  .nutrition-services-page .service-detail-section--reverse .service-detail-icon-badge {
    top: auto;
    right: auto;
    bottom: calc(var(--service-detail-badge-size) / -2);
    left: clamp(28px, 8vw, 56px);
    transform: none;
  }

  .nutrition-services-page .service-detail-copy,
  .nutrition-services-page .service-detail-section--reverse .service-detail-copy {
    padding-top: calc(14px + (var(--service-detail-badge-size) / 2));
    padding-left: var(--site-card-padding);
  }
}

/* Final unified seam values. */
.service-card .card-image::after {
  height: 45px;
  background: linear-gradient(0deg, rgb(var(--card-service-line-rgb) / .90) 0 4px, rgb(var(--card-service-line-rgb) / .36) 4px, rgb(var(--card-service-line-rgb) / .12) 22px, rgb(var(--card-service-line-rgb) / 0) 45px);
}

.nutrition-services-page .service-detail-visual::after,
.nutrition-services-page .service-detail-section--reverse .service-detail-visual::after {
  width: 45px;
  background: linear-gradient(90deg, rgb(var(--service-visual-line-rgb) / 0), rgb(var(--service-visual-line-rgb) / .16) 20px, rgb(var(--service-visual-line-rgb) / .52) 37px, rgb(var(--service-visual-line-rgb) / .90) 41px, rgb(var(--service-visual-line-rgb) / 0) 45px);
}

.nutrition-services-page .service-detail-section--reverse .service-detail-visual::after {
  background: linear-gradient(270deg, rgb(var(--service-visual-line-rgb) / 0), rgb(var(--service-visual-line-rgb) / .16) 20px, rgb(var(--service-visual-line-rgb) / .52) 37px, rgb(var(--service-visual-line-rgb) / .90) 41px, rgb(var(--service-visual-line-rgb) / 0) 45px);
}

@media (max-width: 980px) {
  .nutrition-services-page .service-detail-visual::after,
  .nutrition-services-page .service-detail-section--reverse .service-detail-visual::after {
    width: auto;
    height: 45px;
    background: linear-gradient(0deg, rgb(var(--service-visual-line-rgb) / .90) 0 4px, rgb(var(--service-visual-line-rgb) / .36) 4px, rgb(var(--service-visual-line-rgb) / .12) 22px, rgb(var(--service-visual-line-rgb) / 0) 45px);
  }

  .nutrition-services-page .service-detail-copy,
  .nutrition-services-page .service-detail-section--reverse .service-detail-copy {
    padding-top: calc(14px + (var(--service-detail-badge-size) / 2));
  }
}

/* Unified category seam: 4px color edge with a 45px localized fade. */
.service-card .card-image::after {
  height: 45px;
  background: linear-gradient(
    0deg,
    rgb(var(--card-service-line-rgb) / 0),
    rgb(var(--card-service-line-rgb) / .16) 20px,
    rgb(var(--card-service-line-rgb) / .52) 37px,
    rgb(var(--card-service-line-rgb) / .90) 41px,
    rgb(var(--card-service-line-rgb) / .90) 45px
  );
}

.nutrition-services-page .service-detail-visual::after {
  width: 45px;
  background: linear-gradient(
    90deg,
    rgb(var(--service-visual-line-rgb) / 0),
    rgb(var(--service-visual-line-rgb) / .16) 20px,
    rgb(var(--service-visual-line-rgb) / .52) 37px,
    rgb(var(--service-visual-line-rgb) / .90) 41px,
    rgb(var(--service-visual-line-rgb) / .90) 45px
  );
}

.nutrition-services-page .service-detail-section--reverse .service-detail-visual::after {
  width: 45px;
  background: linear-gradient(
    270deg,
    rgb(var(--service-visual-line-rgb) / 0),
    rgb(var(--service-visual-line-rgb) / .16) 20px,
    rgb(var(--service-visual-line-rgb) / .52) 37px,
    rgb(var(--service-visual-line-rgb) / .90) 41px,
    rgb(var(--service-visual-line-rgb) / .90) 45px
  );
}

@media (max-width: 980px) {
  .nutrition-services-page .service-detail-visual::after,
  .nutrition-services-page .service-detail-section--reverse .service-detail-visual::after {
    height: 45px;
    background: linear-gradient(
      0deg,
      rgb(var(--service-visual-line-rgb) / .90) 0 4px,
      rgb(var(--service-visual-line-rgb) / .36) 4px,
      rgb(var(--service-visual-line-rgb) / .12) 22px,
      rgb(var(--service-visual-line-rgb) / 0) 45px
    );
  }
}

/* Final portrait inset treatment: use the source silhouette for the curved
   top and bottom, with a restrained CEA00C bevel and a crisp 1px keyline. */
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame::before {
  inset: -6px;
  z-index: 0;
  background: #CEA00C !important;
  border-radius: 0 !important;
  filter: drop-shadow(0 1px 1px rgba(88, 57, 0, .18));
  box-shadow: none !important;
  -webkit-mask: url("assets/kathleen-boxx-nextdoor-profile.png") center / 100% 100% no-repeat;
  mask: url("assets/kathleen-boxx-nextdoor-profile.png") center / 100% 100% no-repeat;
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame::after {
  inset: -1px;
  z-index: 3;
  background: #583900 !important;
  border-radius: 0 !important;
  filter: none !important;
  box-shadow: none !important;
  -webkit-mask-image: url("assets/kathleen-boxx-nextdoor-profile.png"), url("assets/kathleen-boxx-nextdoor-profile.png");
  mask-image: url("assets/kathleen-boxx-nextdoor-profile.png"), url("assets/kathleen-boxx-nextdoor-profile.png");
  -webkit-mask-position: center, center;
  mask-position: center, center;
  -webkit-mask-size: 100% 100%, calc(100% - 2px) calc(100% - 2px);
  mask-size: 100% 100%, calc(100% - 2px) calc(100% - 2px);
  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-repeat: no-repeat, no-repeat;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* The name lockup reads as lettering cut through the gold plate to the teal. */
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-name,
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-role {
  color: #3F7D79 !important;
  text-shadow: none !important;
}

@media (max-width: 700px) {
  .nutrition-services-page .services-page-hero { padding-bottom: 64px; }
  .service-detail-page { padding-inline: 24px; }
  .service-detail-copy { padding: 30px 24px 34px; }
}
/* End nutrition services page */





/* Contact page */
.contact-page .contact-page-hero {
  min-height: auto;
  padding-bottom: 0;
}

.contact-page .contact-page-hero-content {
  padding-bottom: 0;
}

.contact-page-intro {
  max-width: min(76rem, 100%);
  color: #CEA00C;
  font-family: var(--brand);
  font-size: clamp(2.5rem, calc(2rem + 2.2vw), 4rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: .02em;
  text-align: center;
  text-align-last: center;
}

.contact-panel-section {
  position: relative;
  z-index: 2;
  padding: 24px var(--page-gutter) var(--subsection-heading-above);
  background: transparent;
}

.contact-panel-wrap {
  width: min(var(--content-max), 100%);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, .7fr);
  gap: clamp(34px, 4vw, 72px);
  align-items: start;
}

.contact-form-card,
.contact-info-card {
  border: var(--gold-card-border-width) solid transparent;
  border-radius: 12px;
  background:
    linear-gradient(rgba(255, 255, 255, .94), rgba(255, 255, 255, .94)) padding-box,
    linear-gradient(135deg, #F6DC88 0%, #F1BE15 42%, #CEA00C 78%, #8A6200 100%) border-box;
  box-shadow: var(--card-shadow);
}

.contact-form-card {
  padding: var(--site-card-padding);
}

.contact-info-card {
  padding: var(--site-card-padding);
}

.contact-form-heading h2,
.contact-info-card h2 {
  margin: 0 0 18px;
  color: var(--deep-teal);
  font-family: var(--display);
  font-size: clamp(1.75rem, calc(1.6273rem + 0.54545vw), 2.5rem);
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: .0125em;
}

.contact-form-heading p:not(.service-detail-kicker),
.contact-info-card p {
  color: var(--ink);
  font-size: clamp(1.05rem, calc(1.03rem + 0.09vw), 1.18rem);
  line-height: 1.65;
  letter-spacing: .01em;
}

.contact-form {
  display: grid;
  gap: 14px;
  margin-top: 28px;
}

.contact-form label {
  color: var(--deep-teal);
  font-family: var(--display);
  font-size: .9rem;
  font-weight: 750;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(30, 77, 74, .28);
  border-radius: 8px;
  background: rgba(255,255,255,.88);
  color: var(--ink);
  font: 500 1rem/1.4 var(--body);
  padding: 13px 14px;
  box-shadow: inset 0 1px 2px rgba(30,41,40,.08);
}

.contact-form textarea {
  resize: vertical;
  min-height: 160px;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: 2px solid rgba(241, 190, 21, .65);
  outline-offset: 2px;
  border-color: var(--gold-dark);
}

.contact-submit-button {
  justify-self: start;
  margin-top: 16px;
}

.contact-form-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-form-status {
  margin: 4px 0 0;
  color: var(--deep-teal);
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.4;
}

.contact-form-status.is-error {
  color: #8a1f1f;
}

.contact-info-list {
  display: grid;
  gap: 22px;
}

.contact-info-list a {
  color: var(--deep-teal);
  font-weight: 750;
  text-decoration: none;
}

.contact-info-list a:hover,
.contact-info-list a:focus-visible {
  color: var(--gold-dark);
}

@media (max-width: 980px) {
  .contact-panel-wrap { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .contact-panel-section { padding-inline: 24px; }
  .contact-form-card,
  .contact-info-card { padding: 28px 22px; }
  .contact-submit-button { width: 100%; }
}
/* End contact page */
/* Page schema alignment overrides */
.about-page .about-hero .hero-slogan {
  margin: .18em 0 0;
  color: var(--deep-teal);
  font-family: var(--brand);
  font-size: clamp(2.7rem, calc(2.36rem + 1.28vw), 4.35rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .01em;
  text-align: center;
  white-space: nowrap;
  -webkit-text-stroke: 0;
  paint-order: normal;
}

.about-page .about-hero .hero-slogan .slogan-line {
  display: block;
  margin-top: 0;
  line-height: 1;
  white-space: nowrap;
}

.about-page .about-hero .hero-slogan .slogan-line--primary {
  color: var(--deep-teal);
  font-size: clamp(2.7rem, calc(2.36rem + 1.28vw), 4.35rem);
  font-weight: 600;
  letter-spacing: .01em;
  -webkit-text-stroke: 0;
  paint-order: normal;
}

.about-page .about-hero .hero-slogan .slogan-line--secondary {
  margin-top: .06em;
  color: #3F7D79;
  font-size: clamp(2rem, calc(1.69rem + 1.16vw), 3.6rem);
  font-weight: 400;
  letter-spacing: .05em;
  -webkit-text-stroke: clamp(0.95px, calc(0.9009px + 0.01364vw), 1.25px) #1E4D4A;
  paint-order: stroke fill;
}

.about-page .about-hero .hero-introduction {
  width: min(100%, 1150px);
  max-width: 1150px;
  margin: clamp(16px, 1.4vw, 24px) auto 0;
  color: #1E2928;
  font-family: var(--body);
  font-size: clamp(1.05rem, calc(1.0136rem + 0.1591vw), 1.25rem);
  font-weight: 550;
  line-height: 1.75;
  letter-spacing: .01em;
  text-align: justify;
  text-align-last: center;
}

/* Keep every page's hero wordmark and slogan on the same locked lines as the
   homepage. This prevents page-specific wrapping changes at narrow widths. */
.hero-slogan,
.hero-slogan .slogan-line,
.persephone-wordmark,
.persephone-wordmark .wordmark-line {
  white-space: nowrap;
}

/* Shared hero rhythm: exact responsive spacing used across the site. */
:root {
  --hero-space-slogan-to-intro: clamp(40px, calc(28px + 2.4vw), 72px);
  --hero-space-intro-to-divider: clamp(12px, calc(8px + .8vw), 24px);
  --hero-space-divider-to-content: clamp(28px, calc(12px + 1vw), 48px);
}

.hero-introduction,
.services-page-intro,
.contact-page-intro,
.about-page-intro,
.about-page .about-hero .hero-introduction {
  margin-top: var(--hero-space-slogan-to-intro);
}

.hero-copy > .hero-intro-divider:not(.hero-intro-divider--top),
.services-page-hero .hero-intro-divider:not(.hero-intro-divider--top),
.contact-page-hero .hero-intro-divider:not(.hero-intro-divider--top),
.about-page .about-hero .hero-intro-divider:not(.hero-intro-divider--top) {
  margin-top: var(--hero-space-intro-to-divider);
  margin-bottom: 0;
}

.hero-copy > .hero-pathways {
  margin-top: var(--hero-space-divider-to-content);
}

.nutrition-services-page .service-detail-page,
.contact-page .contact-panel-section {
  padding-top: var(--hero-space-divider-to-content);
}

.hero-copy > .hero-introduction {
  margin-top: var(--hero-space-slogan-to-intro);
}

@media (max-width: 1200px) {
  .about-page .about-hero .hero-introduction {
    box-sizing: border-box;
    max-width: 100%;
    padding-inline: 8px;
  }
}
.nutrition-services-page .services-page-hero,
.contact-page .contact-page-hero,
.about-page .about-hero {
  min-height: auto;
  padding-bottom: 0;
}

.nutrition-services-page .services-page-hero-content,
.contact-page .contact-page-hero-content,
.about-page .about-hero-content {
  padding-bottom: 0;
}

.services-page-intro,
.contact-page-intro,
.about-page-intro {
  max-width: min(76rem, 100%);
}

.about-main {
  position: relative;
  overflow: visible;
  background: transparent;
}

.about-section-inner,
.service-detail-wrap,
.contact-panel-wrap {
  width: min(var(--content-max), calc(100% - var(--page-gutter) - var(--page-gutter)));
}

.service-detail-page,
.contact-panel-section {
  padding-top: 0;
}

.about-section {
  padding: clamp(54px, calc(41.143px + 3.571vw), 104px) 0;
}

.about-kicker,
.service-detail-kicker,
.contact-form label {
  font-family: var(--display);
  font-size: .86rem;
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.about-copy h2,
.about-centered-heading h2,
.about-mission h2,
.service-detail-copy h2,
.contact-form-heading h2,
.contact-info-card h2 {
  font-family: var(--display);
  font-size: clamp(1.75rem, calc(1.5864rem + 0.7273vw), 2.75rem);
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: .0125em;
  -webkit-text-stroke: 0;
  paint-order: normal;
}

.about-copy p:not(.about-kicker),
.about-team-card p,
.about-mission p,
.about-screenshot figcaption,
.about-timeline li,
.service-detail-copy p:not(.service-detail-kicker),
.contact-form-heading p:not(.service-detail-kicker),
.contact-info-card p {
  font-family: var(--body);
  font-size: clamp(1.1rem, calc(1.0755rem + 0.1091vw), 1.25rem);
  font-weight: 450;
  line-height: 1.75;
  letter-spacing: .01em;
}

.about-team-card h3 {
  font-family: var(--display);
  font-size: clamp(1.75rem, calc(1.6273rem + 0.54545vw), 2.5rem);
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: .0125em;
}

.about-portrait-card p {
  font-family: var(--display);
  font-size: clamp(1.75rem, calc(1.6273rem + 0.54545vw), 2.5rem);
  font-weight: 650;
  line-height: 1.05;
  letter-spacing: .0125em;
}

.about-principles span {
  font-family: var(--display);
  font-size: clamp(1.05rem, calc(1.03rem + 0.09vw), 1.18rem);
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: .01em;
}
.about-section--open .about-story-grid {
  grid-template-columns: 1fr;
  justify-content: stretch;
  gap: 28px;
}

.about-section--open .about-principles {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px clamp(28px, 4vw, 56px);
  max-width: 100%;
}

.about-section--open .about-copy p:not(.about-kicker) {
  max-width: 1180px;
}

.about-principles-intro {
  margin: 0;
  color: var(--deep-teal);
  font-family: var(--display);
  font-size: clamp(1.25rem, calc(1.1845rem + 0.2909vw), 1.65rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.about-section--open .about-principles span {
  position: relative;
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 0 0 0 58px;
  border-left: 0;
  border-radius: 0;
  background: transparent;
}

.about-section--open .about-principles span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 40px;
  height: 40px;
  background: url("assets/pomegranate-bullet-d94f5c.png") center / contain no-repeat;
  transform: translateY(-50%);
}

.about-team-grid,
.about-timeline {
  gap: clamp(22px, calc(15.6px + 1.7778vw), 42px);
}

@media (max-width: 980px) {
  .about-section-inner,
  .service-detail-wrap,
  .contact-panel-wrap {
    width: min(var(--content-max), calc(100% - var(--page-gutter) - var(--page-gutter)));
  }
}

@media (max-width: 700px) {
  .about-section-inner,
  .service-detail-wrap,
  .contact-panel-wrap {
    width: min(var(--content-max), calc(100% - 48px));
  }

  .service-detail-page,
  .contact-panel-section {
    padding-inline: 24px;
  }

  .about-section {
    padding-block: 48px;
  }
}
/* About story two-column refinement */
.about-section--open .about-story-grid {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  justify-content: stretch;
  align-items: start;
  gap: clamp(48px, 5vw, 78px);
}

.about-section--open .about-copy {
  padding: clamp(28px, 3vw, 44px);
  border: 1px solid rgba(246, 220, 136, .42);
  border-radius: 8px;
  background: rgba(255, 252, 245, .72);
  box-shadow: var(--card-shadow);
}

.about-section--open .about-copy p:not(.about-kicker) {
  max-width: none;
}

.about-section--open .about-principles {
  grid-template-columns: 1fr;
  align-content: start;
  gap: 18px;
  max-width: 420px;
  padding: clamp(22px, 2.2vw, 32px);
  border-radius: 8px;
  border: 1px solid rgba(206, 160, 12, .46);
  background:
    linear-gradient(145deg, rgba(255, 244, 194, .88) 0%, rgba(246, 220, 136, .78) 28%, rgba(241, 190, 21, .42) 58%, rgba(246, 220, 136, .66) 100%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .018) 0, rgba(255, 255, 255, .018) 1px, rgba(206, 160, 12, .012) 1px, rgba(206, 160, 12, .012) 5px);
}

.about-section--open .about-principles .about-principles-intro {
  margin: 0 0 4px;
  padding-left: 0;
  min-height: 0;
  color: var(--deep-teal);
  font-family: var(--display);
  font-size: clamp(1.25rem, calc(1.1845rem + 0.2909vw), 1.65rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.about-section--open .about-principles .about-principles-intro::before {
  content: none;
}

@media (max-width: 1000px) {
  .about-section--open .about-story-grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .about-section--open .about-principles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 100%;
    padding: clamp(22px, 2.2vw, 32px);
  }
}

@media (max-width: 640px) {
  .about-section--open .about-copy {
    padding: 24px;
  }

  .about-section--open .about-principles {
    grid-template-columns: 1fr;
  }
}
/* About principles gold placards */
.about-section--open .about-principles {
  grid-template-columns: 1fr;
  align-content: start;
  gap: 14px;
  max-width: 440px;
  padding: clamp(8px, 1.2vw, 16px) 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.about-section--open .about-principles .about-principles-intro {
  margin: 0 0 8px;
  padding-left: 0;
  min-height: 0;
  color: var(--deep-teal);
  font-family: var(--display);
  font-size: clamp(1.25rem, calc(1.1845rem + 0.2909vw), 1.65rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.about-section--open .about-principles .about-principles-intro::before {
  content: none;
}

.about-section--open .about-principles span {
  min-height: 54px;
  padding: 9px 18px 9px 62px;
  border: 1px solid rgba(206, 160, 12, .58);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(255, 244, 194, .92) 0%, rgba(246, 220, 136, .82) 42%, rgba(241, 190, 21, .48) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .46),
    inset 0 -1px 2px rgba(206, 160, 12, .16),
    var(--card-shadow);
}

.about-section--open .about-principles span::before {
  left: 14px;
  width: 36px;
  height: 36px;
}

@media (max-width: 1000px) {
  .about-section--open .about-principles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 100%;
    padding-top: 0;
  }

  .about-section--open .about-principles .about-principles-intro {
    grid-column: 1 / -1;
  }
}

/* Meet section: let the cream band end with the stretched content row. */
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] {
  padding-top: clamp(28px, 4vw, 56px);
  padding-bottom: 0;
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-copy {
  align-self: stretch;
  padding-block: clamp(24px, 3.2vw, 48px);
}

/* Use the portrait's own alpha silhouette for the metallic plate. */
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame {
  border-radius: 34px 34px 42px 42px / 72px 72px 56px 56px;
  -webkit-mask: none;
  mask: none;
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-image {
  border-radius: 34px 34px 42px 42px / 72px 72px 56px 56px;
}

@media (max-width: 640px) {
  .about-section--open .about-principles {
    grid-template-columns: 1fr;
  }
}
/* About principles numbered placards */
.about-section--open .about-principles {
  counter-reset: principle;
}

.about-section--open .about-principles span {
  counter-increment: principle;
  min-height: 56px;
  padding: 10px 18px 10px 64px;
  color: #3F7D79;
  font-size: clamp(1.12rem, calc(1.071rem + 0.218vw), 1.42rem);
  font-weight: 700;
}

.about-section--open .about-principles span::before {
  content: counter(principle) ".";
  left: 18px;
  top: 50%;
  width: auto;
  height: auto;
  background: none;
  color: #583900;
  font-family: var(--display);
  font-size: clamp(1rem, calc(.959rem + .182vw), 1.25rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: .04em;
  transform: translateY(-50%);
}
/* About profile image gold edge */
.about-profile-frame {
  display: block;
  width: min(100%, clamp(260px, 30vw, 390px));
  aspect-ratio: .76;
  justify-self: center;
  padding: 6px;
  border: 1px solid rgba(88, 57, 0, .58);
  border-radius: 42% / 16%;
  background:
    linear-gradient(145deg, #FFF4C2 0%, #F6DC88 18%, #CEA00C 48%, #F1BE15 68%, #583900 100%);
  box-shadow:
    inset 0 2px 1px rgba(255,255,255,.62),
    inset 0 -3px 5px rgba(88,57,0,.36),
    0 18px 30px rgba(8,34,32,.24);
  overflow: hidden;
}

.about-profile-image {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  object-fit: cover;
  object-position: 50% 46%;
  filter: none;
}
/* Nutrition services horizontal card refinement: taupe frame, reused homepage service badges, tighter seam fade */
.nutrition-services-page .service-detail-section {
  border: var(--taupe-card-border-width) solid #E7DED1;
  background: rgba(255, 255, 255, .94);
}

.nutrition-services-page .service-detail-visual {
  overflow: visible;
  z-index: 2;
  --service-image-vignette-depth: 42px;
}

.nutrition-services-page .service-detail-copy {
  position: relative;
  z-index: 1;
}

.nutrition-services-page .service-detail-visual::after {
  width: var(--service-image-vignette-depth);
  background: linear-gradient(270deg, rgb(var(--service-visual-line-rgb) / .42) 0, rgb(var(--service-visual-line-rgb) / .24) 10px, rgb(var(--service-visual-line-rgb) / .10) 22px, rgb(var(--service-visual-line-rgb) / 0) 100%);
}

.nutrition-services-page .service-detail-section--reverse .service-detail-visual::after {
  background: linear-gradient(90deg, rgb(var(--service-visual-line-rgb) / .42) 0, rgb(var(--service-visual-line-rgb) / .24) 10px, rgb(var(--service-visual-line-rgb) / .10) 22px, rgb(var(--service-visual-line-rgb) / 0) 100%);
}

.nutrition-services-page .service-detail-icon-badge {
  --service-detail-badge-size: clamp(70px, 5.4vw, 96px);
  position: absolute;
  z-index: 4;
  top: 50%;
  right: calc(var(--service-detail-badge-size) / -2);
  left: auto;
  width: var(--service-detail-badge-size);
  height: var(--service-detail-badge-size);
  transform: translateY(-50%);
  border-width: 3px;
  box-shadow:
    0 14px 26px rgba(30, 41, 40, .18),
    0 4px 10px rgba(88, 57, 0, .10);
}

.nutrition-services-page .service-detail-section--reverse .service-detail-icon-badge {
  right: auto;
  left: calc(var(--service-detail-badge-size) / -2);
}

.nutrition-services-page .service-detail-icon-badge svg {
  width: 58%;
  height: 58%;
}

.nutrition-services-page .service-detail-icon-badge.consulting svg {
  width: 68%;
  height: 68%;
}

.nutrition-services-page .service-detail-icon-badge .utensils-icon {
  width: 62%;
  height: 62%;
}

@media (max-width: 980px) {
  .nutrition-services-page .service-detail-visual {
    overflow: visible;
  }

  .nutrition-services-page .service-detail-icon-badge,
  .nutrition-services-page .service-detail-section--reverse .service-detail-icon-badge {
    top: auto;
    right: auto;
    bottom: calc(var(--service-detail-badge-size) / -2);
    left: clamp(28px, 8vw, 56px);
    transform: none;
  }

  .nutrition-services-page .service-detail-copy {
    padding-top: calc(30px + (var(--service-detail-badge-size, 70px) / 2));
  }

  .nutrition-services-page .service-detail-visual::after,
  .nutrition-services-page .service-detail-section--reverse .service-detail-visual::after {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    height: 38px;
    background: linear-gradient(0deg, rgb(var(--service-visual-line-rgb) / .36) 0, rgb(var(--service-visual-line-rgb) / .15) 16px, rgb(var(--service-visual-line-rgb) / 0) 100%);
  }
}
/* Shared Persephone hero intro treatment: match homepage paragraph behavior across pages */
.hero-introduction,
.services-page-intro,
.contact-page-intro,
.about-page-intro,
.about-page .about-hero .hero-introduction {
  box-sizing: border-box;
  width: min(100%, 1150px);
  max-width: 1150px;
  margin: clamp(16px, 1.4vw, 24px) auto 0;
  padding-inline: 0;
  color: #1E2928;
  font-family: var(--body);
  font-size: clamp(1.05rem, calc(1.0136rem + 0.1591vw), 1.25rem);
  font-weight: 550;
  line-height: 1.75;
  letter-spacing: .01em;
  text-align: justify;
  text-align-last: center;
}

@media (max-width: 1200px) {
  .hero-introduction,
  .services-page-intro,
  .contact-page-intro,
  .about-page-intro,
  .about-page .about-hero .hero-introduction {
    width: 100%;
    max-width: 100%;
    padding-inline: 8px;
  }
}

/* Shared site schema for secondary pages. Keep only the short all-caps
   kickers page-specific; the remaining type follows the homepage roles. */
.about-page,
.nutrition-services-page,
.contact-page {
  --page-body-size: clamp(1.1rem, calc(1.0755rem + 0.1091vw), 1.25rem);
  --page-body-leading: 1.75;
  --page-section-title-size: var(--section-heading-size);
  --page-card-title-size: clamp(1.75rem, calc(1.5864rem + 0.7273vw), 2.75rem);
}

.about-page .about-copy p:not(.about-kicker),
.about-page .about-team-card p,
.about-page .about-mission p,
.about-page .about-screenshot figcaption,
.about-page .about-timeline li,
.nutrition-services-page .service-detail-copy p:not(.service-detail-kicker),
.contact-page .contact-form-heading p:not(.service-detail-kicker),
.contact-page .contact-info-card p {
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--page-body-size);
  font-weight: 450;
  line-height: var(--page-body-leading);
  letter-spacing: .01em;
}

.about-page .about-copy h2,
.about-page .about-centered-heading h2,
.about-page .about-mission h2,
.nutrition-services-page .service-detail-copy h2,
.contact-page .contact-form-heading h2,
.contact-page .contact-info-card h2 {
  font-family: var(--display);
  font-size: var(--page-card-title-size);
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: .0125em;
}

.about-page .about-kicker,
.nutrition-services-page .service-detail-kicker,
.contact-page .contact-form label,
.contact-page .contact-info-card .service-detail-kicker {
  font-family: var(--display);
  font-size: .86rem;
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Keep secondary-page cards on the same usable rail as the homepage. */
.nutrition-services-page .service-detail-wrap,
.contact-page .contact-panel-wrap,
.about-page .about-section-inner,
.about-page .about-team-grid,
.about-page .about-mission .about-section-inner,
.about-page .about-centered-heading {
  max-width: var(--content-max);
}

.nutrition-services-page .service-detail-wrap,
.contact-page .contact-panel-wrap {
  width: 100%;
}

.about-page .about-section-inner {
  width: min(var(--content-max), calc(100% - var(--page-gutter) - var(--page-gutter)));
}
/* About profile image: natural transparent fade with separate inset metallic gold frame */
.about-profile-frame {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, clamp(280px, 30vw, 410px));
  aspect-ratio: .76;
  justify-self: center;
  padding: clamp(12px, 1.1vw, 18px);
  border: 0;
  border-radius: 42% / 16%;
  background: transparent;
  box-shadow: 0 18px 30px rgba(8, 34, 32, .18);
  overflow: visible;
}

.about-profile-frame::before {
  content: "";
  position: absolute;
  inset: clamp(2px, .35vw, 6px);
  z-index: 2;
  border-radius: 42% / 16%;
  padding: clamp(4px, .45vw, 7px);
  background:
    linear-gradient(145deg, #FFF4C2 0%, #F6DC88 16%, #F1BE15 36%, #CEA00C 58%, #583900 78%, #F6DC88 100%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  filter:
    drop-shadow(0 2px 1px rgba(88, 57, 0, .36))
    drop-shadow(0 -1px 0 rgba(255, 248, 211, .44));
}

.about-profile-frame::after {
  content: "";
  position: absolute;
  inset: clamp(8px, .8vw, 13px);
  z-index: 3;
  border-radius: 42% / 16%;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .58),
    inset 0 -2px 3px rgba(88, 57, 0, .28);
  pointer-events: none;
}

.about-profile-image {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  object-fit: contain;
  object-position: center;
  filter: none;
}


/* Mobile menu home icon color tuning */
.site-header-inner.is-nav-collapsed .nav-links a.nav-home-link {
  color: #1E4D4A;
}

.site-header-inner.is-nav-collapsed .nav-links a.nav-home-link .home-house-body {
  fill: transparent;
}

.site-header-inner.is-nav-collapsed .nav-links a.nav-home-link:hover,
.site-header-inner.is-nav-collapsed .nav-links a.nav-home-link:focus-visible,
.site-header-inner.is-nav-collapsed .nav-links a.nav-home-link:active {
  color: #F1BE15;
}

.site-header-inner.is-nav-collapsed .nav-links a.nav-home-link:hover .home-house-body,
.site-header-inner.is-nav-collapsed .nav-links a.nav-home-link:focus-visible .home-house-body,
.site-header-inner.is-nav-collapsed .nav-links a.nav-home-link:active .home-house-body {
  fill: #EDF6F4;
}

/* About portrait card: centered satin-gold mounting stripe behind the natural portrait fade */
.about-portrait-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.about-portrait-card::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 50%;
  width: clamp(112px, 32%, 190px);
  transform: translateX(-50%);
  z-index: -1;
  background:
    linear-gradient(90deg,
      rgba(88, 57, 0, .42) 0%,
      rgba(206, 160, 12, .70) 12%,
      rgba(246, 220, 136, .78) 33%,
      rgba(255, 244, 194, .72) 48%,
      rgba(241, 190, 21, .74) 64%,
      rgba(206, 160, 12, .68) 82%,
      rgba(88, 57, 0, .38) 100%);
  box-shadow:
    inset 1px 0 0 rgba(255, 255, 255, .34),
    inset -1px 0 0 rgba(88, 57, 0, .30),
    0 0 28px rgba(246, 220, 136, .14);
  opacity: .86;
  pointer-events: none;
}

.about-portrait-card > * {
  position: relative;
  z-index: 1;
}

.about-profile-frame::before {
  inset: clamp(7px, .75vw, 12px);
  padding: clamp(3px, .35vw, 5px);
  opacity: .92;
}

.about-profile-frame::after {
  inset: clamp(11px, 1vw, 17px);
}

/* About portrait card: flatten gold stripe into a wider satin metal plate */
.about-portrait-card::before {
  width: min(calc(100% - 48px), clamp(330px, 34vw, 470px));
  background:
    linear-gradient(90deg,
      rgba(88, 57, 0, .28) 0%,
      rgba(206, 160, 12, .58) 7%,
      rgba(246, 220, 136, .72) 18%,
      rgba(241, 190, 21, .70) 42%,
      rgba(246, 220, 136, .66) 58%,
      rgba(206, 160, 12, .56) 82%,
      rgba(88, 57, 0, .28) 100%);
  box-shadow:
    inset 1px 0 0 rgba(255, 255, 255, .28),
    inset -1px 0 0 rgba(88, 57, 0, .22),
    0 10px 24px rgba(8, 34, 32, .12);
  opacity: .76;
}

/* About portrait card: crisp metal plate, no portrait ring or blur */
.about-portrait-card::before {
  width: min(calc(100% - 56px), clamp(320px, 32vw, 450px));
  background:
    linear-gradient(90deg,
      #583900 0%,
      #CEA00C 8%,
      #F1BE15 20%,
      #F6DC88 36%,
      #FFF4C2 46%,
      #F6DC88 54%,
      #F1BE15 70%,
      #CEA00C 88%,
      #583900 100%);
  box-shadow:
    inset 1px 0 0 rgba(255, 255, 255, .45),
    inset -1px 0 0 rgba(88, 57, 0, .38),
    0 8px 16px rgba(8, 34, 32, .10);
  opacity: 1;
}

.about-profile-frame {
  box-shadow: none;
}

.about-profile-frame::before,
.about-profile-frame::after {
  content: none;
}

/* About portrait card: remove gold backing and top-align portrait lockup */
.about-portrait-card {
  align-content: start;
  justify-items: center;
}

.about-portrait-card::before {
  content: none;
}

.about-portrait-card .about-profile-frame {
  margin-top: clamp(4px, 1vw, 14px);
}

.about-portrait-card .about-portrait-name {
  width: 100%;
  margin-top: clamp(14px, 1.6vw, 24px);
}

/* About portrait card final: proportional card height, left-quarter gold stripes, tight name lockup */
.about-split {
  align-items: stretch;
}

.about-split .about-portrait-card {
  align-self: stretch;
  min-height: 0;
  height: auto;
}

.about-portrait-card {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, auto) auto;
  align-content: start;
  justify-items: center;
  gap: 0;
  overflow: hidden;
  isolation: isolate;
}

.about-portrait-card::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 25%;
  width: clamp(78px, 10vw, 132px);
  transform: translateX(-50%);
  z-index: 0;
  background:
    linear-gradient(90deg,
      transparent 0%,
      transparent 19%,
      rgba(88, 57, 0, .52) 20%,
      #CEA00C 23%,
      #F6DC88 27%,
      #F1BE15 31%,
      rgba(88, 57, 0, .46) 35%,
      transparent 38%,
      transparent 62%,
      rgba(88, 57, 0, .46) 65%,
      #CEA00C 69%,
      #F6DC88 73%,
      #F1BE15 77%,
      rgba(88, 57, 0, .52) 80%,
      transparent 81%,
      transparent 100%);
  box-shadow: none;
  opacity: .78;
  pointer-events: none;
}

.about-profile-frame {
  align-self: start;
  width: min(100%, clamp(270px, 24vw, 390px));
  height: auto;
  margin-top: clamp(2px, .9vw, 12px);
  box-shadow: none;
}

.about-profile-frame::before,
.about-profile-frame::after {
  content: none;
}

.about-portrait-card .about-portrait-name {
  width: 100%;
  margin-top: clamp(12px, 1.1vw, 20px);
}

.about-portrait-role {
  display: block;
  width: 100%;
  margin-top: 8px;
  font-family: var(--sans);
  font-size: clamp(1rem, .95vw, 1.15rem);
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: .01em;
  color: rgba(255, 255, 255, .94);
}

/* About portrait card final sizing pass: flexible portrait area with two left-quarter gold stripes */
.about-split .about-portrait-card {
  height: 100%;
}

.about-portrait-card {
  grid-template-rows: minmax(0, 1fr) auto;
  padding-top: clamp(18px, 2vw, 32px);
  padding-bottom: clamp(28px, 3vw, 44px);
}

.about-portrait-card::before {
  left: 25%;
  width: clamp(86px, 11vw, 148px);
  background:
    linear-gradient(90deg,
      transparent 0%,
      transparent 17%,
      rgba(88, 57, 0, .44) 18%,
      #CEA00C 22%,
      #F6DC88 26%,
      #F1BE15 30%,
      rgba(88, 57, 0, .38) 34%,
      transparent 37%,
      transparent 63%,
      rgba(88, 57, 0, .38) 66%,
      #CEA00C 70%,
      #F6DC88 74%,
      #F1BE15 78%,
      rgba(88, 57, 0, .44) 82%,
      transparent 83%,
      transparent 100%);
  opacity: .82;
}

.about-profile-frame {
  align-self: stretch;
  display: grid;
  place-items: end center;
  width: min(100%, clamp(270px, 24vw, 390px));
  height: 100%;
  max-height: 100%;
  margin-top: 0;
}

.about-profile-image {
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center bottom;
}

.about-portrait-card .about-portrait-name {
  margin-top: min(20px, clamp(12px, 1.1vw, 20px));
}

/* About portrait final material pass: shaped metallic plate behind the portrait, no stripes */
.about-portrait-card::before {
  content: none;
}

.about-profile-frame {
  position: relative;
  overflow: visible;
  isolation: isolate;
}

.about-profile-frame::before {
  content: "";
  position: absolute;
  inset: -12px -6px;
  z-index: 0;
  border-radius: 42% / 16%;
  background:
    linear-gradient(135deg,
      rgba(255,255,255,.62) 0%,
      rgba(246,220,136,.94) 13%,
      #F1BE15 34%,
      #CEA00C 58%,
      #F6DC88 78%,
      #583900 100%),
    linear-gradient(90deg,
      rgba(255,255,255,.26) 0%,
      transparent 24%,
      rgba(255,255,255,.32) 45%,
      transparent 63%,
      rgba(88,57,0,.26) 100%);
  background-blend-mode: screen, normal;
  border: 1px solid rgba(88,57,0,.72);
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.62),
    inset -2px -3px 5px rgba(88,57,0,.42),
    0 10px 18px rgba(8,34,32,.24);
  pointer-events: none;
}

.about-profile-image {
  position: relative;
  z-index: 1;
}

/* About portrait final layout: solid shaped gold plate, portrait in upper half */
.about-split .about-portrait-card {
  height: 100%;
  min-height: 0;
}

.about-portrait-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: clamp(28px, 3vw, 44px) clamp(28px, 3vw, 44px) clamp(30px, 3.2vw, 46px);
}

.about-portrait-card::before {
  content: none;
}

.about-profile-frame {
  position: relative;
  display: block;
  width: min(100%, clamp(282px, 24vw, 402px));
  height: auto;
  max-height: none;
  margin: 0 auto;
  padding: 12px 6px;
  border-radius: 42% / 16%;
  background:
    linear-gradient(145deg,
      #FFF4C2 0%,
      #F6DC88 14%,
      #F1BE15 34%,
      #CEA00C 57%,
      #F6DC88 78%,
      #583900 100%),
    linear-gradient(90deg,
      rgba(88,57,0,.34) 0%,
      rgba(255,255,255,.44) 32%,
      rgba(255,255,255,.22) 48%,
      rgba(88,57,0,.26) 100%);
  background-blend-mode: normal, screen;
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.64),
    inset -2px -3px 5px rgba(88,57,0,.42),
    0 12px 20px rgba(8,34,32,.26);
  overflow: hidden;
  isolation: isolate;
}

.about-profile-frame::before,
.about-profile-frame::after {
  content: none;
}

.about-profile-image {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  object-position: center;
}

.about-portrait-card .about-portrait-name {
  width: 100%;
  margin-top: 20px;
}

.about-portrait-role {
  font-family: var(--display);
  font-size: clamp(1.05rem, calc(.9708rem + .36199vw), 1.55rem);
  font-weight: 650;
  line-height: 1.05;
  letter-spacing: .01em;
  color: rgba(255,255,255,.96);
}

/* Page width normalization: keep secondary-page rails aligned with the main page */
.hero-content,
.service-grid,
.compass-container,
.footer-container,
.about-hero-inner,
.about-section-inner,
.service-detail-wrap,
.contact-panel-wrap,
.nc-header-inner,
.nc-section,
.nc-workspace,
.nc-footer-inner {
  width: min(var(--content-max), calc(100% - var(--page-gutter) - var(--page-gutter)));
  max-width: var(--content-max);
  margin-inline: auto;
}

.nutrition-services-page .service-detail-page,
.contact-page .contact-panel-section {
  padding-inline: var(--page-gutter);
}

.nutrition-services-page .service-detail-wrap,
.contact-page .contact-panel-wrap,
.about-page .about-section-inner,
.about-page .about-team-grid,
.about-page .about-mission .about-section-inner,
.about-page .about-centered-heading {
  max-width: var(--content-max);
}

@media (max-width: 700px) {
  .about-page .about-section-inner {
    width: min(var(--content-max), calc(100% - 48px));
  }

  .nutrition-services-page .service-detail-page,
  .contact-page .contact-panel-section {
    padding-inline: 24px;
  }

  .hero-content,
  .service-grid,
  .compass-container,
  .footer-container,
  .about-hero-inner,
  .about-section-inner,
  .service-detail-wrap,
  .contact-panel-wrap,
  .nc-header-inner,
  .nc-section,
  .nc-workspace,
  .nc-footer-inner {
    width: min(var(--content-max), calc(100% - 48px));
  }
}


/* About portrait role: match Meet the Team role typography while staying white */
.about-portrait-card .about-portrait-role {
  display: block;
  margin-top: 12px;
  color: rgba(255, 255, 255, .96);
  font-family: var(--display);
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* About portrait plate refinement: smooth shaped metal plate and role spacing */
.about-portrait-card .about-profile-frame {
  box-sizing: border-box;
  width: min(100%, clamp(282px, 24vw, 402px));
  height: auto;
  margin: 0 auto;
  padding: 12px 6px;
  border-radius: 38px 38px 46px 46px / 58px 58px 42px 42px;
  background:
    linear-gradient(90deg,
      #583900 0%,
      #CEA00C 8%,
      #F6DC88 18%,
      #FFF4C2 28%,
      #F1BE15 44%,
      #CEA00C 68%,
      #F6DC88 84%,
      #583900 100%);
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.68),
    inset -2px -2px 0 rgba(88,57,0,.42),
    inset 0 -8px 14px rgba(88,57,0,.20),
    0 12px 22px rgba(8,34,32,.28);
  overflow: hidden;
  isolation: isolate;
}

.about-portrait-card .about-profile-frame::before,
.about-portrait-card .about-profile-frame::after {
  content: none;
}

.about-portrait-card .about-profile-image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
  clip-path: inset(0 round 32px 32px 38px 38px / 50px 50px 34px 34px);
  filter: none;
}

.about-portrait-card .about-portrait-name {
  margin-top: 20px;
  margin-bottom: 0;
}

.about-portrait-card .about-portrait-role {
  margin-top: 14px;
}

/* About portrait plate: match the portrait silhouette exactly */
.about-portrait-card .about-profile-frame {
  border-radius: 34px 34px 42px 42px / 72px 72px 56px 56px;
}

.about-portrait-card .about-profile-image {
  border-radius: 34px 34px 42px 42px / 72px 72px 56px 56px;
  clip-path: none;
}

/* Let the principles column share the story copy's full desktop height. */
.about-section--open .about-story-grid {
  align-items: stretch;
}

.about-section--open .about-principles {
  grid-template-columns: 1fr;
  grid-template-rows: auto repeat(6, minmax(44px, 1fr));
  align-content: stretch;
  row-gap: clamp(10px, calc(4px + 0.65vw), 20px);
  height: 100%;
}

@media (max-width: 1000px) {
  .about-section--open .about-principles {
    grid-template-rows: auto;
    row-gap: clamp(14px, 2vw, 22px);
    height: auto;
  }
}
/* Match the hero usable rail inside padded teal and services sections. */
.services > .service-grid,
.compass > .compass-container {
  width: 100%;
}

/* Shared content-card inset: keep the later pages as spacious as the homepage. */
.about-page .about-portrait-card,
.about-page .about-team-card,
.about-page .about-timeline li {
  padding: var(--site-card-padding);
}

.nutrition-services-page .service-detail-copy,
.contact-page .contact-form-card,
.contact-page .contact-info-card {
  padding: var(--site-card-padding);
}

@media (max-width: 700px) {
  .nutrition-services-page .service-detail-copy {
    padding-top: calc(30px + (var(--service-detail-badge-size, 70px) / 2));
    padding-inline: var(--site-card-padding);
    padding-bottom: var(--site-card-padding);
  }

  .contact-page .contact-form-card,
  .contact-page .contact-info-card {
    padding: var(--site-card-padding);
  }
}

/* Final shared hero rhythm overrides. Keep the three relationships exact at every breakpoint. */
.hero-copy > .hero-introduction,
.services-page-intro,
.contact-page-intro,
.about-page-intro,
.about-page .about-hero .hero-introduction {
  margin-top: var(--hero-space-slogan-to-intro);
}

.about-page .about-hero + .about-section,
.nutrition-services-page .services-page-hero + .service-detail-page,
.contact-page .contact-page-hero + .contact-panel-section {
  padding-top: var(--hero-space-divider-to-content);
}

/* Keep the first About card visibly separated from the hero divider even when
   section background rules collapse the section's own top padding. */
.about-page .about-hero + .about-section {
  margin-top: var(--hero-space-divider-to-content);
  padding-top: 0;
}

.about-page .about-hero + .about-section > .about-section-inner {
  padding-top: 0;
}

/* Principles: keep placards compact and distribute the available height into
   the gaps between them instead of stretching the placards themselves. */
.about-page .about-section--open .about-principles {
  --principles-gap: clamp(14px, calc(8px + 0.8vw), 24px);
  grid-template-rows: auto repeat(6, minmax(56px, auto));
  align-content: start;
  row-gap: var(--principles-gap);
  padding-bottom: 45px;
  height: 100%;
}

.about-page .about-section--open .about-principles span:first-of-type {
  margin-top: calc(12px - var(--principles-gap));
}

.about-page .about-section--open .about-principles span {
  box-sizing: border-box;
  min-height: 56px;
  height: 56px;
  padding-block: 10px;
  background:
    linear-gradient(118deg,
      rgba(255, 244, 194, .98) 0%,
      rgba(246, 220, 136, .94) 38%,
      rgba(255, 250, 222, .78) 50%,
      rgba(241, 190, 21, .68) 74%,
      rgba(206, 160, 12, .76) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .72),
    inset 0 -1px 2px rgba(88, 57, 0, .18),
    0 5px 10px rgba(88, 57, 0, .08);
}

@media (max-width: 1000px) {
  .about-page .about-section--open .about-principles {
    --principles-gap: clamp(14px, 2vw, 22px);
    grid-template-rows: auto repeat(6, minmax(56px, auto));
    height: auto;
    align-content: start;
    row-gap: var(--principles-gap);
  }
}

/* Desktop principles rhythm: fixed placards with flexible spacer rows. */
@media (min-width: 1001px) {
  .about-page .about-section--open .about-story-grid {
    align-items: stretch;
  }

  .about-page .about-section--open .about-principles {
    align-self: stretch;
    box-sizing: border-box;
    height: 100%;
    padding-top: var(--site-card-padding);
    padding-bottom: 75px;
    grid-template-rows: auto 14px 56px repeat(5, minmax(0, 1fr) 56px);
    align-content: stretch;
    row-gap: 0;
  }

  .about-page .about-section--open .about-principles-intro {
    margin-bottom: 0;
  }

  .about-page .about-section--open .about-principles span {
    grid-column: 1;
  }

  .about-page .about-section--open .about-principles span:nth-of-type(1) { grid-row: 3; }
  .about-page .about-section--open .about-principles span:nth-of-type(2) { grid-row: 5; }
  .about-page .about-section--open .about-principles span:nth-of-type(3) { grid-row: 7; }
  .about-page .about-section--open .about-principles span:nth-of-type(4) { grid-row: 9; }
  .about-page .about-section--open .about-principles span:nth-of-type(5) { grid-row: 11; }
  .about-page .about-section--open .about-principles span:nth-of-type(6) { grid-row: 13; }
}

/* Match the portrait's continuous arched top and bottom silhouette. */
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame,
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-image {
  border-radius: 50% / 16%;
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame {
  display: flow-root;
  border: 1px solid #CEA00C;
  background:
    linear-gradient(118deg,
      #FFF4C2 0%,
      #F6DC88 38%,
      #FFFADE 50%,
      #F1BE15 74%,
      #CEA00C 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .72),
    inset 0 -1px 2px rgba(88, 57, 0, .18),
    0 5px 10px rgba(88, 57, 0, .08);
  padding-top: 20px !important;
  padding-right: 6px !important;
  padding-bottom: 20px !important;
  padding-left: 6px !important;
  overflow: visible;
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-image {
  margin: 0;
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-name {
  margin-top: 24px;
}

/* Keep both label-to-content relationships identical. */
.about-page {
  --about-label-content-gap: 14px;
}

.about-page .about-section--open .about-principles-intro {
  margin-bottom: 0;
}

.about-page .about-section--open .about-principles {
  row-gap: var(--about-label-content-gap);
}

.about-page .about-section--open .about-principles span:first-of-type {
  margin-top: calc(var(--about-label-content-gap) - var(--principles-gap, var(--about-label-content-gap)));
}

.about-page .about-story-grid .about-copy > .about-kicker {
  margin-bottom: var(--about-label-content-gap);
}

@media (min-width: 1001px) {
  .about-page .about-section--open .about-principles {
    row-gap: 0;
    grid-template-rows: auto 24px 56px repeat(5, minmax(0, 1fr) 56px);
  }

  .about-page .about-section--open .about-principles span:first-of-type {
    margin-top: 0;
  }
}

@media (max-width: 1000px) {
  .about-page .about-section--open .about-principles {
    row-gap: 24px;
  }

  .about-page .about-section--open .about-principles-intro {
    margin-bottom: 0;
  }
}

/* Keep principle spacing fixed and compact in both split and stacked layouts. */
.about-page .about-section--open .about-principles {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto;
  column-gap: 24px;
  row-gap: 24px;
  align-content: start;
  height: auto;
  padding-bottom: 45px;
}

.about-page .about-section--open .about-principles-intro {
  grid-column: 1 / -1;
  margin-bottom: 0;
}

.about-page .about-section--open .about-principles span:first-of-type {
  margin-top: 0;
}

/* Keep the portrait plate visibly taller than the image. */
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame {
  padding-top: 45px !important;
  padding-bottom: 45px !important;
}

/* Principles fill their available column, then become a full-width list when
   the story layout stacks. */
.about-page .about-section--open .about-principles {
  width: 100%;
  max-width: none;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto repeat(6, 56px);
  column-gap: 0;
  row-gap: 24px;
  align-content: start;
}

.about-page .about-section--open .about-principles span {
  grid-column: 1;
  grid-row: auto !important;
  width: 100%;
}

.about-page .about-section--open .about-principles-intro {
  grid-column: 1;
  grid-row: auto !important;
  white-space: nowrap;
}

/* Once the story columns stack, keep the six principles in two compact rows. */
@media (min-width: 761px) and (max-width: 1000px) {
  .about-page .about-section--open .about-principles {
    width: min(100%, 900px);
    max-width: 900px;
    margin-inline: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto repeat(3, 56px);
    column-gap: 24px;
    row-gap: 24px;
  }

  .about-page .about-section--open .about-principles-intro {
    grid-column: 1 / -1;
  }

  .about-page .about-section--open .about-principles span {
    grid-column: auto;
  }
}

/* Narrow mobile widths get a single full-width principle per row. */
@media (max-width: 760px) {
  .about-page .about-section--open .about-principles {
    width: min(100%, 420px);
    max-width: 420px;
    margin-inline: auto;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto repeat(6, 56px);
    column-gap: 0;
    row-gap: 24px;
  }

  .about-page .about-section--open .about-principles-intro {
    grid-column: 1;
  }

  .about-page .about-section--open .about-principles span {
    grid-column: 1;
  }
}

/* Product introduction and purpose statements share a clear, editorial rhythm. */
.about-page .about-compass-intro {
  width: min(var(--content-max), calc(100% - (var(--page-gutter) * 2)));
  max-width: var(--content-max);
}

.about-page .about-compass-lockup {
  display: flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  justify-self: start;
  margin: 0 0 40px;
}

.about-page .about-compass-lockup .compass-logo-mark {
  display: block;
  width: clamp(62px, calc(56.7738px + 1.49321vw), 95px);
  height: clamp(62px, calc(56.7738px + 1.49321vw), 95px);
  flex: 0 0 auto;
}

.about-page .about-compass-lockup .lockup-vertical-divider {
  width: 1.5px;
  min-width: 1.5px;
  max-width: 1.5px;
  height: calc(
    (clamp(1.72rem, calc(1.6044rem + 0.52851vw), 2.45rem) * 1.05) +
    clamp(.98rem, calc(.9119rem + .31131vw), 1.41rem) +
    (clamp(.98rem, calc(.9119rem + .31131vw), 1.41rem) * .34)
  );
  margin-left: clamp(10px, .8vw, 14px);
  margin-right: clamp(8px, .4vw, 10px);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(241, 190, 21, 0), #F6DC88 18%, #F1BE15 50%, #F6DC88 82%, rgba(241, 190, 21, 0));
  flex: 0 0 1.5px;
}

.about-page .about-compass-lockup .compass-lockup {
  flex: 0 1 auto;
  min-width: 0;
}

.about-page .about-compass-lockup {
  margin: 0 0 40px;
}

.about-page .about-compass-lockup .compass-logo-mark {
  width: clamp(62px, calc(56.7738px + 1.49321vw), 95px);
  height: clamp(62px, calc(56.7738px + 1.49321vw), 95px);
}

.about-page .about-compass-lockup .compass-lockup h2 {
  color: rgba(255, 255, 255, .92);
  font-family: "Montserrat", sans-serif;
  font-size: clamp(1.72rem, calc(1.6044rem + 0.52851vw), 2.45rem);
  font-weight: 575;
  letter-spacing: .05em;
  line-height: .92;
  gap: .32em;
}

.about-page .about-compass-lockup .compass-lockup h2 .lockup-word,
.about-page .about-compass-lockup .compass-lockup h2 .lockup-word--nutrition,
.about-page .about-compass-lockup .compass-lockup h2 .lockup-word--compass {
  letter-spacing: .05em;
}

.about-page .about-compass-lockup .compass-lockup .subhead {
  color: #F1BE15;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(.98rem, calc(.9119rem + .31131vw), 1.41rem);
  font-weight: 600;
  letter-spacing: .1em;
  line-height: 1;
  margin: .34em 0 0;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .about-page .about-compass-lockup {
    transform: translateX(-4px);
  }
}

.about-page .about-compass-intro .about-copy h2,
.about-page .about-compass-intro .about-copy p:not(.about-kicker) {
  color: var(--white);
}

.about-page .about-compass-intro .about-copy p:not(.about-kicker) {
  max-width: 1000px;
  margin-top: 24px;
  letter-spacing: .01em;
  line-height: 1.7;
  text-transform: none;
}

/* Carry the portrait plate through the full teal card as a centered stripe. */
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-card {
  /* Keep a proportional teal reveal on both sides of the centered plate. */
  --portrait-plate-width: min(520px, calc(100% - clamp(48px, 6.6667vw, 80px)));
  position: relative;
  isolation: isolate;
  border-radius: 0;
  border: 0;
  background: var(--teal);
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-card::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  left: 50%;
  width: var(--portrait-plate-width);
  transform: translateX(-50%);
  background:
    linear-gradient(118deg,
      #FFF4C2 0%,
      #F6DC88 38%,
      #FFFADE 50%,
      #F1BE15 74%,
      #CEA00C 100%);
  opacity: 1;
  mix-blend-mode: normal;
  border-inline: 1px solid #CEA00C;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .72),
    inset 0 -1px 2px rgba(88, 57, 0, .18);
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-card > * {
  position: relative;
  z-index: 1;
}

/* Recess the portrait into the plate with a crisp, non-glowing metal rim. */
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame {
  position: relative;
  background:
    linear-gradient(118deg,
      #FFF4C2 0%,
      #F6DC88 38%,
      #FFFADE 50%,
      #F1BE15 74%,
      #CEA00C 100%);
  opacity: 1;
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame::before {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 49px 10px;
  border-radius: 50% / 16%;
  box-shadow:
    inset 0 0 0 2px #CEA00C,
    inset 0 3px 5px rgba(255, 255, 255, .48),
    inset 0 -4px 7px rgba(88, 57, 0, .32);
  pointer-events: none;
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-role {
  margin-top: 12px;
  color: var(--deep-teal);
  font-family: var(--display);
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-name,
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-role {
  color: var(--deep-teal);
}

.about-page .about-purpose {
  background:
    linear-gradient(rgba(255, 252, 245, .92), rgba(255, 252, 245, .96)),
    url("assets/persephone-background-continuation.png") center / cover no-repeat;
}

/* Final About lockup tokens: keep the workspace line gold after shared copy rules. */
.about-page .about-section--teal .about-compass-lockup .compass-lockup h2 {
  font-family: "Montserrat", sans-serif !important;
  font-size: clamp(1.72rem, calc(1.6044rem + 0.52851vw), 2.45rem) !important;
  font-weight: 575 !important;
  line-height: .92 !important;
  letter-spacing: .05em !important;
  color: #FFFFFF !important;
}

.about-page .about-section--teal .about-compass-lockup .compass-lockup .subhead {
  font-family: "Montserrat", sans-serif !important;
  font-size: clamp(.98rem, calc(.9119rem + .31131vw), 1.41rem) !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: .1em !important;
  color: #F1BE15 !important;
}

.about-page .about-section--teal .about-compass-lockup .compass-logo-mark {
  width: clamp(62px, calc(56.7738px + 1.49321vw), 95px) !important;
  height: clamp(62px, calc(56.7738px + 1.49321vw), 95px) !important;
}

/* Shared service-card category seams: one crisp color line with a short fade. */
.nutrition-services-page .service-detail-visual::after {
  background: linear-gradient(
    270deg,
    rgb(var(--service-visual-line-rgb) / .72) 0 3px,
    rgb(var(--service-visual-line-rgb) / .40) 3px,
    rgb(var(--service-visual-line-rgb) / .18) 14px,
    rgb(var(--service-visual-line-rgb) / 0) 42px
  );
}

.nutrition-services-page .service-detail-section--reverse .service-detail-visual::after {
  background: linear-gradient(
    90deg,
    rgb(var(--service-visual-line-rgb) / .72) 0 3px,
    rgb(var(--service-visual-line-rgb) / .40) 3px,
    rgb(var(--service-visual-line-rgb) / .18) 14px,
    rgb(var(--service-visual-line-rgb) / 0) 42px
  );
}

.nutrition-services-page .service-detail-section--reverse .service-detail-visual::after,
.nutrition-services-page .service-detail-visual::after {
  border: 0;
}

/* Homepage service cards use the same localized seam instead of a hard color bar. */
.service-card .card-body {
  position: relative;
  border-top: 0;
}

.service-card .card-body::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 45px;
  transform: translateY(-1px);
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgb(var(--card-service-line-rgb) / .90) 0 4px,
    rgb(var(--card-service-line-rgb) / .36) 4px,
    rgb(var(--card-service-line-rgb) / .12) 22px,
    rgb(var(--card-service-line-rgb) / 0) 45px
  );
}

.service-card:nth-child(1) { --card-service-line-rgb: 37 77 42; }
.service-card:nth-child(2) { --card-service-line-rgb: 200 121 30; }
.service-card:nth-child(3) { --card-service-line-rgb: 86 59 98; }

/* The homepage teal teaser uses the gold workspace subtitle treatment. */
.compass .compass-lockup .subhead {
  color: #F1BE15 !important;
}

/* Keep the portal mark crisp and let the footer mark sit directly on the teal field. */
.portal-badge::before {
  background-size: 90%;
}

.footer-brand {
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 12px;
  align-items: center;
}

.footer-portal-mark {
  grid-column: 1;
  grid-row: 1 / span 3;
  width: 76px;
  height: 76px;
  margin: 0;
  object-fit: contain;
  filter: none;
}

.footer-brand-lockup,
.footer-brand p,
.footer-brand .socials {
  grid-column: 2;
}

.footer-brand .socials {
  grid-row: 3;
}

@media (max-width: 720px) {
  .footer-brand {
    grid-template-columns: max-content minmax(0, 1fr);
  }

  .footer-portal-mark {
    width: 80px;
    height: 80px;
  }
}

/* Nutrition Services cards: one authoritative image-edge seam. */
.nutrition-services-page .service-detail-visual {
  --service-image-vignette-depth: 45px;
  --service-image-line-width: 4px;
  overflow: visible;
  box-shadow: none;
}

.nutrition-services-page .service-detail-visual::after,
.nutrition-services-page .service-detail-section--reverse .service-detail-visual::after {
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  z-index: 3;
  width: 45px;
  height: auto;
  background: linear-gradient(
    270deg,
    rgb(var(--service-visual-line-rgb) / .90) 0 var(--service-image-line-width),
    rgb(var(--service-visual-line-rgb) / .36) var(--service-image-line-width),
    rgb(var(--service-visual-line-rgb) / .12) 22px,
    rgb(var(--service-visual-line-rgb) / 0) 45px
  );
}

.nutrition-services-page .service-detail-section--reverse .service-detail-visual::after {
  right: auto;
  left: 0;
  background: linear-gradient(
    90deg,
    rgb(var(--service-visual-line-rgb) / .90) 0 var(--service-image-line-width),
    rgb(var(--service-visual-line-rgb) / .36) var(--service-image-line-width),
    rgb(var(--service-visual-line-rgb) / .12) 22px,
    rgb(var(--service-visual-line-rgb) / 0) 45px
  );
}

/* Match homepage service badges while preserving the established placement. */
.nutrition-services-page .service-detail-icon-badge {
  --service-detail-badge-size: 76px;
  width: var(--service-detail-badge-size);
  height: var(--service-detail-badge-size);
  border: 3px solid currentColor;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 8px 18px rgba(30, 41, 40, .16);
  z-index: 4;
}

.nutrition-services-page .service-detail-icon-badge svg {
  width: 45px;
  height: 45px;
}

.nutrition-services-page .service-detail-icon-badge.consulting svg {
  width: 54px;
  height: 54px;
}

.nutrition-services-page .service-detail-icon-badge .utensils-icon {
  width: 48px;
  height: 48px;
}

/* Keep the category mapping consistent with the homepage cards. */
.nutrition-services-page #medical-nutrition-therapy .service-detail-visual {
  --service-visual-line-rgb: 37 77 42;
}

.nutrition-services-page #recipe-meal-planning .service-detail-visual {
  --service-visual-line-rgb: 200 121 30;
}

.nutrition-services-page #nutrition-program-consulting .service-detail-visual {
  --service-visual-line-rgb: 86 59 98;
}

@media (max-width: 980px) {
  .nutrition-services-page .service-detail-visual::after,
  .nutrition-services-page .service-detail-section--reverse .service-detail-visual::after {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    height: 45px;
    background: linear-gradient(
      0deg,
      rgb(var(--service-visual-line-rgb) / .90) 0 var(--service-image-line-width),
      rgb(var(--service-visual-line-rgb) / .36) var(--service-image-line-width),
      rgb(var(--service-visual-line-rgb) / .12) 22px,
      rgb(var(--service-visual-line-rgb) / 0) 45px
    );
  }
}

/* Final portrait inset treatment: use the source silhouette for the curved
   top and bottom, with a restrained CEA00C bevel and a crisp 1px keyline. */
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame::before {
  inset: -6px;
  z-index: 0;
  background: #CEA00C !important;
  border-radius: 0 !important;
  filter: drop-shadow(0 1px 1px rgba(88, 57, 0, .18));
  box-shadow: none !important;
  -webkit-mask: url("assets/kathleen-boxx-nextdoor-profile.png") center / 100% 100% no-repeat;
  mask: url("assets/kathleen-boxx-nextdoor-profile.png") center / 100% 100% no-repeat;
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame::after {
  inset: -1px;
  z-index: 3;
  background: #583900 !important;
  border-radius: 0 !important;
  filter: none !important;
  box-shadow: none !important;
  -webkit-mask-image: url("assets/kathleen-boxx-nextdoor-profile.png"), url("assets/kathleen-boxx-nextdoor-profile.png");
  mask-image: url("assets/kathleen-boxx-nextdoor-profile.png"), url("assets/kathleen-boxx-nextdoor-profile.png");
  -webkit-mask-position: center, center;
  mask-position: center, center;
  -webkit-mask-size: 100% 100%, calc(100% - 2px) calc(100% - 2px);
  mask-size: 100% 100%, calc(100% - 2px) calc(100% - 2px);
  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-repeat: no-repeat, no-repeat;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* The name lockup reads as lettering cut through the gold plate to the teal. */
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-name,
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-role {
  color: #3F7D79 !important;
  text-shadow: none !important;
}

/* Footer brand lockup: icon left, wordmark right, supporting content below. */
.site-footer .footer-brand {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  column-gap: 12px;
  row-gap: 0;
  align-items: start;
  justify-items: start;
  text-align: left;
}

.site-footer .footer-brand-link {
  display: contents;
}

.site-footer .footer-portal-mark {
  grid-column: 1;
  grid-row: 1 / span 3;
  align-self: start;
  width: 100px;
  height: 100px;
  margin: 0;
  object-fit: contain;
}

.site-footer .footer-brand-lockup {
  grid-column: 2;
  grid-row: 1;
  display: block;
  min-width: 0;
}

.site-footer .footer-brand-lockup strong {
  display: block;
  margin: 0;
  text-align: left;
  white-space: nowrap;
}

.site-footer .footer-wordmark-line {
  white-space: nowrap;
}

.site-footer .footer-brand p,
.site-footer .footer-brand .socials,
.site-footer .footer-quick-links a,
.site-footer .footer-container > div:nth-child(3) a,
.site-footer .footer-container > div:nth-child(4) a {
  white-space: nowrap;
}

.site-footer .footer-portal-mark {
  filter: drop-shadow(2px 4px 1px rgba(30, 77, 74, .55));
}

.site-footer .footer-brand > p {
  grid-column: 2;
  grid-row: 2;
  margin: 4px 0 0;
  text-align: left;
}

.site-footer .footer-brand > .socials {
  grid-column: 2;
  grid-row: 3;
  margin: 10px 0 0;
}

@media (max-width: 720px) {
  .site-footer .footer-portal-mark {
    width: 84px;
    height: 84px;
  }
}

/* Keep the category fade inside the image; the badges sit above every layer. */
.service-card .card-image {
  position: relative;
  z-index: 1;
}

.service-card .card-image::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 45px;
  pointer-events: none;
  background: linear-gradient(
    0deg,
    rgb(var(--card-service-line-rgb) / .90) 0 4px,
    rgb(var(--card-service-line-rgb) / .36) 4px,
    rgb(var(--card-service-line-rgb) / .12) 22px,
    rgb(var(--card-service-line-rgb) / 0) 45px
  );
}

.service-card .card-body {
  border-top: 0;
}

.service-card .card-body::before {
  display: none;
}

.service-card .service-icon {
  z-index: 4;
}

@media (max-width: 980px) {
  .nutrition-services-page .service-detail-visual::after,
  .nutrition-services-page .service-detail-section--reverse .service-detail-visual::after {
    background: linear-gradient(
      0deg,
      rgb(var(--service-visual-line-rgb) / .72) 0 3px,
      rgb(var(--service-visual-line-rgb) / .34) 3px,
      rgb(var(--service-visual-line-rgb) / .12) 16px,
      rgb(var(--service-visual-line-rgb) / 0) 38px
    );
  }
}

.about-page .about-purpose-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(42px, 5vw, 72px);
}

.about-page .about-purpose-block h2 {
  max-width: 720px;
  margin: 0;
  color: var(--deep-teal);
  font-size: clamp(1.8rem, calc(1.45rem + 1.3vw), 3.2rem);
  line-height: 1.15;
}

/* Vision and mission pair a display-style title with readable supporting copy. */
.about-page .about-purpose-block .about-purpose-statement {
  max-width: none;
  margin: 0;
  color: var(--ink);
  font-family: var(--body);
  font-size: calc(var(--page-body-size) + 2pt);
  font-weight: 450;
  line-height: 1.68;
  letter-spacing: .01em;
  text-align: left;
}

.about-page .about-purpose-block .about-purpose-statement strong {
  display: block;
  margin-bottom: 18px;
  color: var(--deep-teal);
  font-family: var(--display);
  font-size: var(--page-card-title-size);
  font-style: normal;
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: .0125em;
  text-transform: none;
  text-align: center;
}

.about-page .about-purpose-block .about-purpose-statement em {
  display: block;
  font-style: normal;
  text-indent: 2em;
}

.about-page .about-purpose-intro {
  max-width: 1080px;
}

.about-page .about-purpose-intro .about-kicker {
  margin-bottom: 14px;
}

.about-page .about-purpose-intro h2 {
  margin: 0;
  color: var(--deep-teal);
  font-family: var(--display);
  font-size: var(--page-card-title-size);
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: .0125em;
}

.about-page .about-purpose-block p:not(.about-kicker):not(.about-purpose-statement) {
  max-width: 720px;
  margin: 24px 0 0;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.12rem;
  line-height: 1.7;
}

/* Final service-card seam treatment overrides the earlier broad-image fades. */
.nutrition-services-page .service-detail-section {
  --service-detail-badge-size: 76px;
  background: #FFFFFF;
}

.nutrition-services-page .service-detail-icon-badge {
  --service-detail-badge-size: 76px;
}

/* Metallic treatment for the portal badge and the shared footer mark. */
.portal-badge {
  border: 3px solid transparent;
  background:
    linear-gradient(#FFFFFF, #FFFFFF) padding-box,
    linear-gradient(135deg, #FFF4B8 0%, #F6DC88 22%, #CEA00C 52%, #F1BE15 78%, #FFF4B8 100%) border-box;
  box-shadow:
    0 0 0 1px #CEA00C,
    0 1px 0 rgba(255, 255, 255, .92),
    0 3px 8px rgba(206, 160, 12, .24),
    0 7px 14px rgba(88, 57, 0, .14);
}

.portal-badge:hover {
  box-shadow:
    0 0 0 1px #CEA00C,
    0 1px 0 rgba(255, 255, 255, .98),
    0 4px 10px rgba(206, 160, 12, .3),
    0 8px 16px rgba(88, 57, 0, .16);
}

/* Keep the portal artwork untouched; depth belongs to the badge, not the image. */
.portal-badge::before {
  background-size: 94%;
  transform: translate(-2px, 2px);
  filter: none;
  transition: none;
}

.portal-badge {
  border: 3px solid #CEA00C;
  background: #FFFFFF;
  box-shadow:
    0 0 0 1px #CEA00C,
    0 4px 10px rgba(10, 35, 34, .26),
    0 8px 16px rgba(10, 35, 34, .16);
  transition: box-shadow .25s ease;
  transform: none;
}

.portal-badge:hover {
  box-shadow:
    0 0 0 1px #CEA00C,
    0 5px 12px rgba(10, 35, 34, .3),
    0 10px 20px rgba(10, 35, 34, .2);
  transform: none;
}

.footer-portal-mark {
  align-self: start;
  grid-row: 1 / span 2;
  width: 100px;
  height: 100px;
  margin-top: 0;
  filter: drop-shadow(1px 1px 1px rgba(30, 77, 74, .78));
}

@media (max-width: 720px) {
  .footer-portal-mark {
    width: 84px;
    height: 84px;
  }
}

/* Give the footer lockup room at tablet widths and align mobile links with its wordmark. */
@media (min-width: 721px) and (max-width: 1050px) {
  .footer-container {
    grid-template-columns: minmax(0, 1.15fr) minmax(260px, .85fr);
    column-gap: clamp(40px, 6vw, 72px);
    row-gap: 28px;
    padding-inline: clamp(16px, 3vw, 36px);
  }

  .footer-brand {
    padding-right: 24px;
  }
}

@media (max-width: 720px) {
  .footer-quick-links,
  .footer-container > div:nth-child(3),
  .footer-container > div:nth-child(4) {
    margin-left: calc(84px + 12px);
    width: calc(100% - (84px + 12px));
  }
}

@media (max-width: 720px) {
  .nutrition-services-page .service-detail-button {
    display: flex;
    width: max-content;
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
  }
}

/* Keep the portal artwork crisp while restoring its small hover bounce. */
.portal-badge::before {
  transform: translate(-2px, 2px);
  filter: none;
  animation: none;
}

.portal-badge:hover::before,
.portal-badge:focus-visible::before {
  animation: portal-mark-bounce .65s cubic-bezier(.22, 1.2, .36, 1);
}

@keyframes portal-mark-bounce {
  0%, 100% { transform: translate(-1px, 2px); }
  28% { transform: translate(-1px, -2px); }
  52% { transform: translate(-1px, 1px); }
  72% { transform: translate(-1px, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .portal-badge:hover::before,
  .portal-badge:focus-visible::before {
    animation: none;
  }
}

.nutrition-services-page .service-detail-visual {
  overflow: visible;
  border: 0;
}

/* One authoritative image/content seam, matching the homepage card fade. */
.nutrition-services-page .service-detail-visual::after,
.nutrition-services-page .service-detail-section--reverse .service-detail-visual::after {
  z-index: 3;
  width: 45px;
  background: linear-gradient(
    270deg,
    rgb(var(--service-visual-line-rgb) / .90) 0 4px,
    rgb(var(--service-visual-line-rgb) / .36) 4px,
    rgb(var(--service-visual-line-rgb) / .12) 22px,
    rgb(var(--service-visual-line-rgb) / 0) 45px
  );
}

.nutrition-services-page .service-detail-visual::after {
  right: -1px;
}

.nutrition-services-page .service-detail-section--reverse .service-detail-visual::after {
  right: auto;
  left: -1px;
  background: linear-gradient(
    90deg,
    rgb(var(--service-visual-line-rgb) / .90) 0 4px,
    rgb(var(--service-visual-line-rgb) / .36) 4px,
    rgb(var(--service-visual-line-rgb) / .12) 22px,
    rgb(var(--service-visual-line-rgb) / 0) 45px
  );
}

.nutrition-services-page .service-detail-icon-badge {
  --service-detail-badge-size: 76px;
  top: clamp(28px, 4vw, 48px);
  right: calc(var(--service-detail-badge-size) / -2);
  left: auto;
  transform: none;
}

.nutrition-services-page .service-detail-section--reverse .service-detail-icon-badge {
  right: auto;
  left: calc(var(--service-detail-badge-size) / -2);
}

.nutrition-services-page .service-detail-copy,
.nutrition-services-page .service-detail-section--reverse .service-detail-copy {
  background: #FFFFFF;
  padding-left: 75px;
  padding-right: var(--site-card-padding);
  border: 0;
}

.nutrition-services-page .service-detail-section--reverse .service-detail-copy {
  padding-left: var(--site-card-padding);
  padding-right: 75px;
}

.nutrition-services-page #medical-nutrition-therapy,
.nutrition-services-page #nutrition-program-consulting {
  --service-visual-line-rgb: 37 77 42;
}

.nutrition-services-page #recipe-meal-planning {
  --service-visual-line-rgb: 200 121 30;
}

.nutrition-services-page .service-detail-list {
  padding-left: 24px;
}

.nutrition-services-page .service-detail-list li::before {
  width: 11px;
  height: 11px;
  box-shadow:
    1px 2px 0 rgba(88, 57, 0, .34),
    0 0 0 1px rgba(241, 190, 21, .14);
}

@media (max-width: 980px) {
  .nutrition-services-page .service-detail-visual::after,
  .nutrition-services-page .service-detail-section--reverse .service-detail-visual::after {
    top: auto;
    right: 0;
    bottom: -1px;
    left: 0;
    width: auto;
    height: 45px;
    background: linear-gradient(
      0deg,
      rgb(var(--service-visual-line-rgb) / .90) 0 4px,
      rgb(var(--service-visual-line-rgb) / .36) 4px,
      rgb(var(--service-visual-line-rgb) / .12) 22px,
      rgb(var(--service-visual-line-rgb) / 0) 45px
    );
  }

  .nutrition-services-page .service-detail-icon-badge,
  .nutrition-services-page .service-detail-section--reverse .service-detail-icon-badge {
    top: auto;
    right: auto;
    bottom: calc(var(--service-detail-badge-size) / -2);
    left: clamp(28px, 8vw, 56px);
    transform: none;
  }

  .nutrition-services-page .service-detail-copy,
  .nutrition-services-page .service-detail-section--reverse .service-detail-copy {
    padding-top: calc(14px + (var(--service-detail-badge-size) / 2));
    padding-left: var(--site-card-padding);
    padding-right: var(--site-card-padding);
  }
}


/* Final About layout: shared page background and full-rail purpose cards. */
.about-page .about-section--cream[aria-labelledby="team-title"],
.about-page .about-purpose {
  background: transparent;
}

.about-page .about-purpose .about-section-inner {
  width: min(var(--content-max), calc(100% - (var(--page-gutter) * 2)));
  max-width: var(--content-max);
}

.about-page .about-purpose-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 3vw, 42px);
}

.about-page .about-purpose-block {
  width: 100%;
  box-sizing: border-box;
  padding: clamp(28px, 3vw, 48px);
  border: var(--taupe-card-border-width) solid #E7DED1;
  border-radius: 8px;
  background: rgba(255, 252, 245, .92);
  box-shadow: var(--card-shadow);
}

@media (max-width: 700px) {
  .about-page .about-purpose .about-section-inner {
    width: min(var(--content-max), calc(100% - 48px));
  }

  .about-page .about-purpose-block {
    padding: 24px;
  }
}

/* Keep the portrait-to-name gap at a measured 35px. */
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame {
  padding-bottom: 35px !important;
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-name {
  margin-top: 0 !important;
}

/* Keep the About teal introduction on the same full-width rail and rhythm as
   the homepage Nutrition Compass teaser. */
.about-page .about-section--teal {
  padding-block: var(--site-card-padding);
}

.about-page .about-section--teal > .about-section-inner.about-compass-intro {
  width: min(var(--content-max), calc(100% - (var(--page-gutter) * 2)));
  max-width: var(--content-max);
  box-sizing: border-box;
}

.about-page .about-section--teal .about-compass-intro .about-copy {
  width: 100%;
  max-width: none;
}

.about-page .about-section--teal .about-compass-intro .about-copy p:not(.about-kicker) {
  max-width: none;
}

.about-page .about-section--teal .about-compass-lockup {
  row-gap: 0;
}

/* Anchor the decorative Compass layers without letting them affect section height. */
.about-page .about-section--teal > .about-compass-intro {
  position: relative;
}

.about-page .about-section--teal .about-compass-intro .about-copy {
  position: relative;
  z-index: 1;
}

.about-page .about-section--teal .about-compass-lockup .compass-lockup h2 {
  line-height: .92 !important;
}

.about-page .about-section--teal .about-compass-lockup .compass-lockup .subhead {
  margin: .34em 0 0 !important;
  line-height: 1 !important;
}

/* Mobile footer: keep the brand centered, share the link row, and center the
   contact block without centering its text. */
@media (max-width: 720px) {
  .footer-container {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(24px, 8vw, 48px);
    row-gap: 24px;
  }

  .footer-container > .footer-brand {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: center;
    width: max-content;
    max-width: 100%;
    margin: 0;
  }

  .footer-container > .footer-quick-links,
  .footer-container > div:nth-child(3) {
    grid-row: 2;
    width: 100%;
    max-width: none;
    margin-left: 0;
    justify-self: stretch;
  }

  .footer-container > .footer-quick-links {
    grid-column: 1;
  }

  .footer-container > div:nth-child(3) {
    grid-column: 2;
  }

  .footer-container > div:nth-child(4) {
    grid-column: 1 / -1;
    grid-row: 3;
    width: max-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
  }
}

/* Animate the complete portal badge so its artwork stays seated and crisp. */
.portal-badge {
  transform: translateZ(0);
  transform-origin: center;
  transition:
    transform .35s cubic-bezier(.22, .8, .3, 1),
    box-shadow .35s ease;
}

.portal-badge::before,
.portal-badge:hover::before,
.portal-badge:focus-visible::before {
  animation: none !important;
}

.portal-badge:hover,
.portal-badge:focus-visible {
  transform: translateZ(0) scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
  .portal-badge:hover,
  .portal-badge:focus-visible {
    transform: translateZ(0);
    transition: none;
  }
}

/* Grow the complete portal badge while keeping its artwork seated and crisp. */
.portal-badge {
  transform: translateZ(0);
  transform-origin: center;
  transition: transform .25s cubic-bezier(.22, .8, .3, 1), box-shadow .25s ease;
}

.portal-badge:hover,
.portal-badge:focus-visible {
  transform: translateZ(0) scale(1.06);
}

.portal-badge::before,
.portal-badge:hover::before,
.portal-badge:focus-visible::before {
  animation: none !important;
  transform: translate(-2px, 2px);
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .portal-badge,
  .portal-badge:hover,
  .portal-badge:focus-visible {
    transform: none;
    transition: none;
  }
}

/* Align footer link columns with the top of the Persephone wordmark text. */
@media (min-width: 721px) {
  .footer-container > .footer-quick-links,
  .footer-container > div:nth-child(3),
  .footer-container > div:nth-child(4) {
    align-self: start;
    margin-top: 0;
    padding-top: 0;
  }
}

.footer-brand-link {
  display: contents;
  color: inherit;
  text-decoration: none;
}

/* Keep the footer aligned to the same gutter at every width. Flexible tracks
   let the columns wrap before their content can force the page wider. */
.site-footer {
  --footer-column-gap: clamp(28px, 4vw, 64px);
  --footer-row-gap: clamp(24px, 2.2vw, 36px);
}

.site-footer .footer-container {
  grid-template-columns: minmax(320px, 1.25fr) minmax(150px, .75fr) minmax(260px, 1fr) minmax(300px, 1.1fr);
  gap: var(--footer-row-gap) var(--footer-column-gap);
  justify-content: stretch;
  align-items: start;
  padding-inline: 0;
}

.site-footer .footer-brand,
.site-footer .footer-quick-links,
.site-footer .footer-container > div:nth-child(3),
.site-footer .footer-container > div:nth-child(4) {
  min-width: 0;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  justify-self: stretch;
  text-align: left;
}

.site-footer .footer-quick-links,
.site-footer .footer-container > div:nth-child(3),
.site-footer .footer-container > div:nth-child(4) {
  padding-top: 10px;
}

.site-footer a,
.site-footer p {
  overflow-wrap: anywhere;
}

/* Preserve the footer lockup and link labels as complete visual units. */
.site-footer .footer-brand-lockup strong,
.site-footer .footer-wordmark-line,
.site-footer .footer-quick-links a,
.site-footer .footer-container > div:nth-child(3) a,
.site-footer .footer-container > div:nth-child(4) a {
  white-space: nowrap;
  overflow-wrap: normal;
}

.site-footer .footer-portal-mark {
  filter: drop-shadow(2px 4px 1px rgba(30, 77, 74, .55));
}

@media (min-width: 721px) and (max-width: 1200px) {
  .site-footer .footer-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-footer .footer-brand {
    grid-column: 1 / -1;
  }

  .site-footer .footer-container > div:nth-child(4) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  .site-footer .footer-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(24px, 8vw, 48px);
    row-gap: var(--footer-row-gap);
  }

  .site-footer .footer-container > .footer-brand {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: start;
    width: 100%;
    max-width: none;
    margin: 0;
  }

  .site-footer .footer-container > .footer-quick-links,
  .site-footer .footer-container > div:nth-child(3) {
    grid-row: 2;
    width: 100%;
    margin: 0;
    padding-top: 10px;
  }

  .site-footer .footer-container > .footer-quick-links {
    grid-column: 1;
  }

  .site-footer .footer-container > div:nth-child(3) {
    grid-column: 2;
  }

  .site-footer .footer-container > div:nth-child(4) {
    grid-column: 1 / -1;
    grid-row: 3;
    width: 100%;
    margin: 0;
    padding-top: 10px;
    text-align: left;
  }
}

/* Let the About biography copy establish the desktop row height. The portrait
   panel fills that row instead of making the row taller than the copy. */
@media (min-width: 1001px) {
  .about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-split {
    align-items: stretch;
    min-height: 0;
  }

  .about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-card {
    min-height: 0;
    height: 100%;
    min-width: 0;
    overflow: hidden;
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame {
    min-height: 0;
    height: 100%;
    width: min(100%, clamp(260px, 30vw, 390px));
    aspect-ratio: auto;
  }

  .about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-image {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
}

/* Keep the biography row keyed to the copy. The portrait plate fills the
   available left column instead of adding height through its frame padding. */
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] {
  background: #3F7D79;
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] > .about-split {
  align-items: stretch;
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] > .about-split > .about-copy {
  box-sizing: border-box;
  align-self: stretch;
  padding: var(--site-card-padding);
  border-radius: 8px;
  background: rgba(255, 252, 245, .96);
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-card {
  box-sizing: border-box;
  grid-template-rows: minmax(0, 1fr) auto;
  align-content: stretch;
  align-items: stretch;
  gap: 0;
  min-height: 0;
  height: 100%;
  padding: var(--site-card-padding);
  background: #3F7D79;
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame {
  box-sizing: border-box;
  width: min(100%, clamp(260px, 30vw, 390px));
  height: calc(100% - clamp(20px, 2vw, 32px));
  min-height: 0;
  margin: clamp(20px, 2vw, 32px) auto 0;
  padding: 45px 6px;
  overflow: hidden;
  border: 0;
  background:
    linear-gradient(118deg,
      #FFF4C2 0%,
      #F6DC88 38%,
      #FFFADE 50%,
      #F1BE15 74%,
      #CEA00C 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .72),
    inset 0 -1px 2px rgba(88, 57, 0, .18),
    0 5px 10px rgba(88, 57, 0, .12);
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame::before {
  display: none;
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-image {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  border: 2px solid #CEA00C;
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, .28),
    0 2px 4px rgba(88, 57, 0, .22);
}

@media (max-width: 1000px) {
  .about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-card {
    height: auto;
    min-height: 0;
  }

  .about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame {
    height: auto;
    min-height: 0;
    margin-top: 0;
  }

  .about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-image {
    height: auto;
    aspect-ratio: 1 / 1.18;
  }
}

/* Final About portrait row: contained panels over a single teal field. */
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] {
  padding-block: clamp(28px, 4vw, 56px);
  background: #3F7D79;
  box-shadow: none;
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-split {
  align-items: start !important;
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-copy {
  align-self: start !important;
  width: 100%;
  height: fit-content !important;
  min-height: 0 !important;
  box-shadow: none;
  background: rgba(255, 252, 245, .96);
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-card {
  align-self: start;
  height: auto !important;
  min-height: 0 !important;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: #3F7D79;
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame {
  width: min(100%, clamp(260px, 30vw, 390px));
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: auto;
  margin: 0 auto;
  padding: 0 !important;
  overflow: visible;
  border: 0;
  border-radius: 34px 34px 42px 42px / 72px 72px 56px 56px;
  background: transparent;
  box-shadow: none;
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame::before {
  display: none;
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-image {
  width: 100%;
  height: auto !important;
  aspect-ratio: auto;
  object-fit: contain;
  border: 2px solid #CEA00C;
  border-radius: 34px 34px 42px 42px / 72px 72px 56px 56px;
  box-shadow: none;
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-card::before {
  box-shadow:
    inset 1px 0 0 rgba(255, 255, 255, .72),
    inset -2px 0 0 rgba(88, 57, 0, .28),
    4px 0 0 rgba(88, 57, 0, .18),
    8px 0 14px rgba(8, 34, 32, .16);
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-card > div {
  width: min(100%, clamp(260px, 30vw, 390px));
  margin-inline: auto;
  text-align: left;
}

/* About section intros and role labels share one enlarged, dark-teal treatment. */
.about-page .about-kicker {
  font-size: .989rem;
}

.about-page .about-portrait-card .about-portrait-role {
  color: #1E4D4A;
  font-family: var(--display);
  font-size: .989rem;
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.about-page .about-section--teal .about-kicker {
  color: var(--gold);
}

.about-page .about-portrait-card .about-portrait-role {
  margin-top: 14px;
}

.about-page .about-portrait-name span:last-child {
  margin-top: 0 !important;
}

/* Keep the portrait plate anchored to the full teal portrait column. The
   portrait itself remains a clean inset, with two independent beveled edges
   following its rounded silhouette. */
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] > .about-split {
  align-items: stretch !important;
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-card {
  position: relative;
  align-self: stretch !important;
  height: auto !important;
  min-height: 0 !important;
  grid-template-rows: auto auto;
  align-content: start;
  padding: clamp(24px, 3vw, 44px) var(--site-card-padding);
  overflow: hidden;
  background: #3F7D79;
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-card::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  width: clamp(68%, 76%, 82%);
  left: 50%;
  transform: translateX(-50%);
  background:
    linear-gradient(118deg,
      #FFF4C2 0%,
      #F6DC88 38%,
      #FFFADE 50%,
      #F1BE15 74%,
      #CEA00C 100%);
  box-shadow:
    inset 1px 0 0 rgba(255,255,255,.72),
    inset -2px 0 0 rgba(88,57,0,.34),
    5px 0 0 rgba(88,57,0,.18),
    -5px 0 0 rgba(255,255,255,.2);
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-card > * {
  position: relative;
  z-index: 1;
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame {
  position: relative;
  width: min(100%, clamp(260px, 30vw, 390px));
  height: auto !important;
  min-height: 0 !important;
  margin: 0 auto;
  padding: 0 !important;
  overflow: visible;
  border: 0;
  border-radius: 34px 34px 42px 42px / 72px 72px 56px 56px;
  background: transparent;
  box-shadow: none;
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame::before,
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: inherit;
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame::before {
  z-index: 2;
  inset: -4px;
  border: 2px solid #CEA00C;
  box-shadow:
    2px 3px 0 #583900,
    inset 1px 1px 0 rgba(255,255,255,.72);
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame::after {
  z-index: 2;
  inset: 2px;
  border: 1px solid rgba(88,57,0,.72);
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.55);
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-image {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto !important;
  aspect-ratio: auto;
  object-fit: contain;
  border: 0;
  border-radius: inherit;
  box-shadow: none;
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-card > div {
  width: min(100%, clamp(260px, 30vw, 390px));
  margin: clamp(20px, 2vw, 28px) auto 0;
  padding-inline: clamp(12px, 1.5vw, 24px);
  box-sizing: border-box;
  text-align: left;
}

/* Extend the gold plate through the teal section's vertical padding instead
   of leaving it floating inside the portrait card. */
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] {
  --about-meet-section-pad: clamp(28px, 4vw, 56px);
  padding-block: var(--about-meet-section-pad);
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-card {
  overflow: visible;
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-card::before {
  inset-block: calc(-1 * var(--about-meet-section-pad));
  box-shadow:
    inset 1px 0 0 rgba(255,255,255,.58),
    inset -2px 0 0 rgba(88,57,0,.38),
    5px 0 0 rgba(88,57,0,.2);
}

/* The portrait asset has a rounded arch silhouette; these two lines sit on
   either side of that silhouette to create a crisp beveled cut-out. */
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame {
  overflow: visible;
  border-radius: 34px 34px 42px 42px / 72px 72px 56px 56px;
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame::before {
  inset: -5px;
  border: 2px solid #CEA00C;
  box-shadow:
    2px 3px 0 #583900,
    inset 1px 1px 0 rgba(255,255,255,.7);
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame::after {
  inset: 2px;
  border: 1px solid rgba(88,57,0,.78);
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.52);
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-image {
  border-radius: inherit;
  border: 0;
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-card > div {
  padding-inline: clamp(18px, 2.5vw, 36px);
}

/* Set the portrait into the gold plate: the thicker rim is part of the
   frame, while the image is inset inside it rather than sitting on top. */
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame {
  box-sizing: border-box;
  padding: 8px !important;
  border: 4px solid #F1BE15;
  background: transparent;
  box-shadow:
    inset 2px 2px 0 #FFF4C2,
    inset -3px -4px 0 #583900,
    3px 4px 0 #583900;
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame::before {
  inset: -3px;
  border: 2px solid #CEA00C;
  box-shadow:
    2px 3px 0 #583900,
    inset 1px 1px 0 rgba(255,255,255,.78);
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame::after {
  inset: 4px;
  border: 1px solid rgba(88,57,0,.82);
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.56);
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-image {
  display: block;
  width: 100%;
  border: 0;
  border-radius: inherit;
  box-shadow: none;
}

/* Match the portrait's actual arched silhouette instead of treating it like
   a generic rounded rectangle. Use one warm-gold bevel system throughout. */
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame {
  border-radius: 50% 50% 24% 24% / 19% 19% 18% 18%;
  border: 5px solid #F1BE15;
  box-shadow:
    inset 2px 2px 0 #FFF4C2,
    inset -3px -3px 0 #CEA00C,
    2px 3px 0 rgba(206,160,12,.72);
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame::before {
  inset: -4px;
  border: 2px solid #CEA00C;
  border-radius: inherit;
  box-shadow: 2px 3px 0 rgba(206,160,12,.8);
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame::after {
  z-index: 3;
  inset: 2px;
  border: 2px solid #CEA00C;
  border-radius: inherit;
  box-shadow:
    inset 1px 1px 0 #FFF4C2,
    inset -1px -1px 0 rgba(206,160,12,.65);
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-image {
  border-radius: inherit;
  clip-path: inset(0 round 50% 50% 24% 24% / 19% 19% 18% 18%);
}

/* Final portrait plate reset. The source portrait already contains the
   intended silhouette, so use its alpha as the border shape instead of
   approximating it with CSS corner radii. */
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame {
  position: relative;
  box-sizing: border-box;
  padding: 0 !important;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame::before,
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(135deg, #FFF4C2 0%, #F1BE15 52%, #CEA00C 100%);
  -webkit-mask: url("assets/kathleen-boxx-nextdoor-profile.png") center / 100% 100% no-repeat;
  mask: url("assets/kathleen-boxx-nextdoor-profile.png") center / 100% 100% no-repeat;
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame::before {
  inset: -8px;
  filter: drop-shadow(2px 4px 0 rgba(206,160,12,.85));
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame::after {
  inset: -3px;
  z-index: 1;
  background: #CEA00C;
  filter: drop-shadow(1px 2px 0 rgba(88,57,0,.48));
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-image {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto !important;
  border: 0;
  border-radius: 0;
  clip-path: none;
  box-shadow: none;
}

/* Restore an opaque gold backing directly behind the portrait so its soft
   source edge reveals the plate rather than the teal section. */
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame {
  padding: 0 !important;
  background: linear-gradient(135deg, #FFF4C2 0%, #F1BE15 54%, #CEA00C 100%);
  border-radius: 50% 50% 30% 30% / 19% 19% 24% 24%;
}

/* Crisp inset lip over the portrait edge; do not let the source fade show
   between the image and the gold plate. */
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame::after {
  z-index: 3;
  inset: -2px;
  background: #A87800;
  border: 0;
  border-radius: 0;
  -webkit-mask-image: url("assets/kathleen-boxx-nextdoor-profile.png"), url("assets/kathleen-boxx-nextdoor-profile.png");
  -webkit-mask-position: center, center;
  -webkit-mask-size: 100% 100%, calc(100% - 10px) calc(100% - 10px);
  -webkit-mask-repeat: no-repeat, no-repeat;
  -webkit-mask-composite: xor;
  mask-image: url("assets/kathleen-boxx-nextdoor-profile.png"), url("assets/kathleen-boxx-nextdoor-profile.png");
  mask-position: center, center;
  mask-size: 100% 100%, calc(100% - 10px) calc(100% - 10px);
  mask-repeat: no-repeat, no-repeat;
  mask-composite: exclude;
  filter: drop-shadow(1px 2px 0 rgba(88,57,0,.48));
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-image {
  border-radius: 0;
  clip-path: none;
}

/* Portrait plate cleanup: one opaque medium-gold silhouette with a crisp,
   thin dark inner keyline. Keep the plate itself shadow-free. */
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame {
  background: transparent !important;
  box-shadow: none !important;
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame::before {
  inset: -6px;
  z-index: 0;
  background: #CEA00C;
  border-radius: 0;
  filter: none;
  box-shadow: none;
  -webkit-mask-image: url("assets/kathleen-boxx-nextdoor-profile.png");
  mask-image: url("assets/kathleen-boxx-nextdoor-profile.png");
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame::after {
  inset: -1px;
  z-index: 3;
  background: #583900;
  border-radius: 0;
  filter: none;
  box-shadow: none;
  -webkit-mask-image: url("assets/kathleen-boxx-nextdoor-profile.png"), url("assets/kathleen-boxx-nextdoor-profile.png");
  mask-image: url("assets/kathleen-boxx-nextdoor-profile.png"), url("assets/kathleen-boxx-nextdoor-profile.png");
  -webkit-mask-position: center, center;
  mask-position: center, center;
  -webkit-mask-size: 100% 100%, calc(100% - 8px) calc(100% - 8px);
  mask-size: 100% 100%, calc(100% - 8px) calc(100% - 8px);
  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-repeat: no-repeat, no-repeat;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* Final clean bevel: keep the source silhouette, remove the lumpy filter
   shadows, and make the inner brown keyline crisp. */
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame::before {
  inset: -7px;
  background: linear-gradient(135deg, #FFF4C2 0%, #F6DC88 48%, #F1BE15 78%, #CEA00C 100%);
  filter: none;
  border-radius: 50% 50% 28% 28% / 22% 22% 22% 22%;
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame::after {
  inset: -2px;
  background: #583900;
  filter: none;
  -webkit-mask-size: 100% 100%, calc(100% - 9px) calc(100% - 9px);
  mask-size: 100% 100%, calc(100% - 9px) calc(100% - 9px);
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-copy {
  position: relative;
  z-index: 4;
  isolation: isolate;
  opacity: 1;
  background-color: #FFFCF5 !important;
  background-image: none !important;
  box-shadow: var(--card-shadow);
}

/* Guiding principles sit directly on the page background; only each gold
   placard gets the lifted card shadow. */
.about-page .about-section--open .about-principles {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none !important;
}

/* Floating content cards remain solid against the botanical page artwork. */
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-copy,
.about-page .about-purpose-block,
.about-page .about-section--open .about-copy,
.about-page .about-timeline li,
.about-page .about-screenshot {
  background: #FFFCF5 !important;
  opacity: 1 !important;
}

@media (max-width: 1000px) {
  .about-page .about-section--cream[aria-labelledby="meet-kathleen"] {
    position: relative;
    overflow: visible;
  }

  .about-page .about-section--cream[aria-labelledby="meet-kathleen"]::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    bottom: 0;
    left: 12%;
    width: 76%;
    background: linear-gradient(135deg, #FFF4C2 0%, #F1BE15 52%, #CEA00C 100%);
    box-shadow:
      inset 1px 0 0 rgba(255,255,255,.58),
      inset -2px 0 0 rgba(88,57,0,.38),
      3px 0 0 rgba(206,160,12,.7);
  }

  .about-page .about-section--cream[aria-labelledby="meet-kathleen"] > .about-split {
    position: relative;
    z-index: 1;
  }

  .about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-card::before {
    display: none;
  }

  .about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-card {
    background: transparent;
  }
}

/* Final footer rhythm: equal column starts and a tighter mobile link pair. */
@media (min-width: 1201px) {
  .site-footer .footer-container {
    grid-template-columns: max-content max-content max-content max-content;
    column-gap: clamp(28px, 4vw, 64px);
    justify-content: space-between;
  }
}

@media (max-width: 720px) {
  .site-footer .footer-container {
    grid-template-columns: max-content max-content;
    column-gap: clamp(20px, 5vw, 36px);
    justify-content: start;
  }
}

/* Keep all four footer columns in play until their actual content needs to
   wrap. Flexible tracks make the inter-column rhythm contract naturally. */
.site-footer {
  --footer-column-gap: clamp(18px, 2.25vw, 36px);
}

@media (min-width: 1001px) {
  .site-footer .footer-container {
    grid-template-columns:
      minmax(250px, 1.25fr)
      minmax(135px, .72fr)
      minmax(210px, 1fr)
      minmax(225px, 1.05fr);
    column-gap: var(--footer-column-gap);
    justify-content: stretch;
  }
}

@media (min-width: 721px) and (max-width: 1000px) {
  .site-footer .footer-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(20px, 3vw, 32px);
    row-gap: clamp(24px, 3vw, 32px);
  }
}

/* Final Nutrition Services card contract: seam at the image edge, fade only
   into the image, and homepage-matched service badges. */
.nutrition-services-page .service-detail-visual {
  --service-image-line-width: 4px;
  --service-image-vignette-depth: 45px;
  overflow: visible;
  box-shadow: none;
}

.nutrition-services-page .service-detail-visual::after,
.nutrition-services-page .service-detail-section--reverse .service-detail-visual::after {
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  width: 45px;
  height: auto;
  z-index: 3;
  background: linear-gradient(
    270deg,
    rgb(var(--service-visual-line-rgb) / .90) 0 var(--service-image-line-width),
    rgb(var(--service-visual-line-rgb) / .36) var(--service-image-line-width),
    rgb(var(--service-visual-line-rgb) / .12) 22px,
    rgb(var(--service-visual-line-rgb) / 0) 45px
  );
}

.nutrition-services-page .service-detail-section--reverse .service-detail-visual::after {
  right: auto;
  left: 0;
  background: linear-gradient(
    90deg,
    rgb(var(--service-visual-line-rgb) / .90) 0 var(--service-image-line-width),
    rgb(var(--service-visual-line-rgb) / .36) var(--service-image-line-width),
    rgb(var(--service-visual-line-rgb) / .12) 22px,
    rgb(var(--service-visual-line-rgb) / 0) 45px
  );
}

.nutrition-services-page .service-detail-icon-badge {
  --service-detail-badge-size: 76px;
  width: 76px;
  height: 76px;
  border: 3px solid currentColor;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 8px 18px rgba(30, 41, 40, .16);
  z-index: 4;
}

.nutrition-services-page .service-detail-icon-badge svg {
  width: 45px;
  height: 45px;
}

.nutrition-services-page .service-detail-icon-badge.consulting svg {
  width: 54px;
  height: 54px;
}

.nutrition-services-page .service-detail-icon-badge .utensils-icon {
  width: 48px;
  height: 48px;
}

.nutrition-services-page #medical-nutrition-therapy .service-detail-visual {
  --service-visual-line-rgb: 37 77 42;
}

.nutrition-services-page #recipe-meal-planning .service-detail-visual {
  --service-visual-line-rgb: 200 121 30;
}

.nutrition-services-page #nutrition-program-consulting .service-detail-visual {
  --service-visual-line-rgb: 86 59 98;
}

@media (max-width: 980px) {
  .nutrition-services-page .service-detail-visual::after,
  .nutrition-services-page .service-detail-section--reverse .service-detail-visual::after {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    height: 45px;
    background: linear-gradient(
      0deg,
      rgb(var(--service-visual-line-rgb) / .90) 0 var(--service-image-line-width),
      rgb(var(--service-visual-line-rgb) / .36) var(--service-image-line-width),
      rgb(var(--service-visual-line-rgb) / .12) 22px,
      rgb(var(--service-visual-line-rgb) / 0) 45px
    );
  }
}
/* Authoritative portrait inset overrides. */
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame::before {
  inset: -6px;
  z-index: 0;
  background: #CEA00C !important;
  filter: drop-shadow(0 1px 1px rgba(88, 57, 0, .18));
  box-shadow: none !important;
  -webkit-mask: url("assets/kathleen-boxx-nextdoor-profile.png") center / 100% 100% no-repeat;
  mask: url("assets/kathleen-boxx-nextdoor-profile.png") center / 100% 100% no-repeat;
}
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame::after {
  inset: -1px;
  z-index: 3;
  background: #583900 !important;
  filter: none !important;
  box-shadow: none !important;
  -webkit-mask-image: url("assets/kathleen-boxx-nextdoor-profile.png"), url("assets/kathleen-boxx-nextdoor-profile.png");
  mask-image: url("assets/kathleen-boxx-nextdoor-profile.png"), url("assets/kathleen-boxx-nextdoor-profile.png");
  -webkit-mask-position: center, center;
  mask-position: center, center;
  -webkit-mask-size: 100% 100%, calc(100% - 2px) calc(100% - 2px);
  mask-size: 100% 100%, calc(100% - 2px) calc(100% - 2px);
  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-repeat: no-repeat, no-repeat;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-name,
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-role {
  color: #3F7D79 !important;
  text-shadow: none !important;
}
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-card::before {
  content: none !important;
  display: none !important;
}
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame::before {
  inset: -6px !important;
  background: #CEA00C !important;
  border-radius: 0 !important;
  filter: none !important;
  box-shadow: none !important;
  -webkit-mask: url("assets/kathleen-boxx-nextdoor-profile.png") center / 100% 100% no-repeat;
  mask: url("assets/kathleen-boxx-nextdoor-profile.png") center / 100% 100% no-repeat;
}
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame::after {
  inset: -1px !important;
  background: #583900 !important;
  border-radius: 0 !important;
  filter: none !important;
  box-shadow: none !important;
  -webkit-mask-size: 100% 100%, calc(100% - 2px) calc(100% - 2px) !important;
  mask-size: 100% 100%, calc(100% - 2px) calc(100% - 2px) !important;
}
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-name span:first-child {
  white-space: nowrap;
}
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-name,
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-role {
  color: #3F7D79 !important;
  -webkit-text-stroke: .45px #1E4D4A;
  text-shadow: none !important;
}
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame {
  box-sizing: border-box;
  padding: 5px !important;
  background: #CEA00C !important;
  border: 0 !important;
  border-radius: 50% 50% 28% 28% / 20% 20% 18% 18% !important;
  overflow: visible;
  box-shadow: none !important;
}
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame::before {
  content: none !important;
  display: none !important;
}
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame::after {
  content: "" !important;
  position: absolute;
  inset: 5px !important;
  z-index: 3;
  display: block;
  background: transparent !important;
  border: 1px solid #583900 !important;
  border-radius: 50% 50% 28% 28% / 20% 20% 18% 18% !important;
  filter: none !important;
  box-shadow: none !important;
  -webkit-mask: none !important;
  mask: none !important;
}
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-image {
  border-radius: 50% 50% 28% 28% / 20% 20% 18% 18% !important;
  clip-path: none !important;
  filter: none !important;
}
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-name,
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-role {
  -webkit-text-stroke: 0 !important;
  text-shadow: 1px 1px 0 #1E4D4A !important;
}
/* Consolidated portrait plate: image, inset keyline, then medium-gold rim. */
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame {
  position: relative;
  box-sizing: border-box;
  width: min(100%, clamp(260px, 30vw, 390px));
  padding: 5px !important;
  background: #CEA00C !important;
  border: 0 !important;
  border-radius: 50% 50% 28% 28% / 20% 20% 18% 18% !important;
  overflow: visible;
  box-shadow: 0 0 2px 1px rgba(255, 244, 194, .62) !important;
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame::before {
  content: none !important;
  display: none !important;
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame::after {
  content: "" !important;
  position: absolute;
  inset: 7px !important;
  z-index: 3;
  display: block;
  background: transparent !important;
  border: 2px solid #583900 !important;
  border-radius: 50% 50% 28% 28% / 20% 20% 18% 18% !important;
  filter: none !important;
  box-shadow: none !important;
  -webkit-mask: none !important;
  mask: none !important;
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-image {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto !important;
  border: 0 !important;
  border-radius: 50% 50% 28% 28% / 20% 20% 18% 18% !important;
  clip-path: none !important;
  filter: none !important;
}
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-name,
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-role {
  color: #3F7D79 !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
}
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame {
  padding: 5px !important;
  background: #CEA00C !important;
  border-radius: 50% 50% 38% 38% / 20% 20% 22% 22% !important;
  box-shadow: none !important;
}
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame::before {
  content: "" !important;
  display: block !important;
  position: absolute;
  inset: 1px !important;
  z-index: 2;
  background: transparent !important;
  border: 4px solid #CEA00C !important;
  border-radius: 50% 50% 38% 38% / 20% 20% 22% 22% !important;
  filter: drop-shadow(0 0 2px rgba(255, 244, 194, .5));
  box-shadow: none !important;
  -webkit-mask: none !important;
  mask: none !important;
}
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame::after {
  content: "" !important;
  display: block !important;
  position: absolute;
  inset: 7px !important;
  z-index: 3;
  background: transparent !important;
  border: 2px solid #583900 !important;
  border-radius: 50% 50% 38% 38% / 20% 20% 22% 22% !important;
  filter: none !important;
  box-shadow: none !important;
  -webkit-mask: none !important;
  mask: none !important;
}
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-image {
  border-radius: 50% 50% 38% 38% / 20% 20% 22% 22% !important;
}
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-name,
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-role {
  color: #3F7D79 !important;
  -webkit-text-stroke: .65px #1E4D4A !important;
  text-shadow: none !important;
}
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame {
  background: #F6DC88 !important;
}
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame::before {
  inset: 3px !important;
  border: 4px solid #CEA00C !important;
  filter: none !important;
  box-shadow: 0 0 3px 1px rgba(255, 244, 194, .62) !important;
}
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame::after {
  inset: 7px !important;
  border: 2px solid #583900 !important;
  filter: none !important;
  box-shadow: none !important;
}
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame::before {
  inset: 5px 5px 6px 5px !important;
}
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame::after {
  inset: 9px 9px 10px 9px !important;
}
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame {
  background: #F6DC88 !important;
  box-shadow: none !important;
}
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame::before {
  filter: none !important;
  box-shadow: none !important;
}
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-name,
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-role {
  color: #1E4D4A !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
}

/* Final responsive gap alignment for Meet Your Dietitian. */
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] > .about-split,
.about-page .about-section--open .about-story-grid {
  column-gap: clamp(48px, 6vw, 92px) !important;
}

/* Final Meet Your Dietitian layout contract. The portrait column owns one
   full-height plate; the image stays inset inside that plate at every size. */
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] {
  --about-row-gap: clamp(48px, 6vw, 92px);
  position: relative;
  overflow: visible;
  background: #3F7D79 !important;
}
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] > .about-split {
  position: relative;
  z-index: 1;
  column-gap: var(--about-row-gap) !important;
  align-items: stretch !important;
}
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-card {
  position: relative;
  isolation: isolate;
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: var(--site-card-padding);
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible;
}
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-card::before {
  content: "" !important;
  display: block !important;
  position: absolute;
  z-index: -1;
  top: 0;
  right: 24px;
  bottom: 0;
  left: 24px;
  border: 0;
  border-radius: 0;
  background: linear-gradient(135deg, #FFF4C2 0%, #F6DC88 48%, #F1BE15 78%, #CEA00C 100%);
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, .38), inset -2px 0 0 rgba(88, 57, 0, .28);
}
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame {
  position: relative;
  z-index: 1;
  display: block;
  width: min(100%, calc(100% - 48px), clamp(260px, 30vw, 390px));
  max-width: 100%;
  margin-inline: auto;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto !important;
  object-fit: contain;
}
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-card > div {
  position: relative;
  z-index: 1;
  width: min(100%, calc(100% - 48px));
  margin-inline: auto;
}
.about-page .about-section--open .about-story-grid {
  column-gap: var(--about-row-gap, clamp(48px, 6vw, 92px)) !important;
}
@media (max-width: 1000px) {
  .about-page .about-section--cream[aria-labelledby="meet-kathleen"]::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 0 !important;
    top: 0 !important;
    right: 24px !important;
    bottom: 0 !important;
    left: 24px !important;
    background: linear-gradient(135deg, #FFF4C2 0%, #F6DC88 48%, #F1BE15 78%, #CEA00C 100%) !important;
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, .38), inset -2px 0 0 rgba(88, 57, 0, .28) !important;
  }
  .about-page .about-section--cream[aria-labelledby="meet-kathleen"] > .about-split {
    row-gap: var(--about-row-gap) !important;
  }
  .about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-card::before {
    display: none !important;
  }
  .about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-copy {
    position: relative;
    z-index: 1;
    background: #FFFCF5 !important;
  }
}

/* Single-plate guarantee: the desktop plate belongs to the portrait column;
   the stacked layout owns one section-level plate instead. */
@media (min-width: 1001px) {
  .about-page .about-section--cream[aria-labelledby="meet-kathleen"]::before {
    content: none !important;
    display: none !important;
  }
}

/* Final geometry correction: the plate and portrait share one grid track,
   and the plate is clipped to the teal row instead of floating beyond it. */
@media (min-width: 1001px) {
  .about-page .about-section--cream[aria-labelledby="meet-kathleen"] {
    --about-plate-side-space: clamp(24px, 2vw, 40px);
    overflow: hidden;
  }

  .about-page .about-section--cream[aria-labelledby="meet-kathleen"] > .about-split {
    grid-template-columns: minmax(calc(clamp(260px, 30vw, 390px) + (2 * var(--about-plate-side-space))), 0.82fr) minmax(0, 1.18fr) !important;
    min-height: 0;
    align-items: stretch !important;
  }

  .about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-card {
    align-self: stretch !important;
    height: auto !important;
    min-height: 100% !important;
    justify-self: stretch !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center !important;
    text-align: center;
  }

  .about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-card::before {
    top: 0;
    right: var(--about-plate-side-space);
    bottom: 0;
    left: var(--about-plate-side-space);
  }

  .about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    float: none !important;
    width: min(calc(100% - (2 * var(--about-plate-side-space))), clamp(260px, 30vw, 390px)) !important;
    margin-inline: auto !important;
    justify-self: center !important;
  }

  .about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-card > div {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    width: min(calc(100% - (2 * var(--about-plate-side-space))), clamp(260px, 30vw, 390px)) !important;
    margin-inline: auto !important;
    justify-self: center !important;
    text-align: left;
  }
}

/* Cascade authority: keep the entire Meet Your Dietitian row inside the same
   centered content frame as the rest of the site. */
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] {
  position: relative !important;
  --about-row-gap: clamp(48px, 6vw, 92px);
  --about-plate-side-space: clamp(24px, 2vw, 40px);
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding-block: var(--site-card-padding) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  background: #3F7D79 !important;
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-card,
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame,
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-card > div {
  inset: auto !important;
  transform: none !important;
  float: none !important;
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] > .about-section-inner.about-split {
  display: grid !important;
  width: min(var(--content-max), calc(100% - (2 * var(--page-gutter)))) !important;
  max-width: var(--content-max) !important;
  min-width: 0 !important;
  margin-inline: auto !important;
  box-sizing: border-box !important;
  align-items: stretch !important;
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-copy {
  min-width: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  border-block: 4px solid #3F7D79 !important;
  border-inline: 0 !important;
  background: #FFFCF5 !important;
  opacity: 1 !important;
}

@media (min-width: 1001px) {
  .about-page .about-section--cream[aria-labelledby="meet-kathleen"] > .about-section-inner.about-split {
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr) !important;
    column-gap: var(--about-row-gap) !important;
  }

  .about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-card {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    justify-items: center !important;
    min-width: 0 !important;
    min-height: 100% !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: var(--site-card-padding) !important;
    overflow: visible !important;
    isolation: isolate !important;
  }

  .about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame,
  .about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-card > div {
    position: relative !important;
    z-index: 1 !important;
    inset: auto !important;
    transform: none !important;
    float: none !important;
    justify-self: center !important;
    width: min(calc(100% - (2 * var(--about-plate-side-space))), clamp(260px, 30vw, 390px)) !important;
    max-width: 100% !important;
    margin-inline: auto !important;
  }
}

/* Final Meet portrait contract: the stacked layout has one section plate;
   the image frame supplies the single matched curved border. */
@media (max-width: 1000px) {
  .about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-card::before {
    content: none !important;
    display: none !important;
  }

  .about-page .about-section--cream[aria-labelledby="meet-kathleen"]::before {
    left: var(--page-gutter) !important;
    right: var(--page-gutter) !important;
    width: auto !important;
    transform: none !important;
  }
}

/* Portrait geometry: one symmetric arc for the upper and lower contours. */
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame,
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-image {
  border-radius: 50% / 22% !important;
}

/* Portrait frame: mirrored arch, vertical sides, and a clipped image edge. */
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame {
  overflow: hidden !important;
}
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame::before,
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame::after {
  border-radius: 50% / 22% !important;
}
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame::before {
  border-width: 5px !important;
}

@media (max-width: 1000px) {
  .about-page .about-section--cream[aria-labelledby="meet-kathleen"] > .about-section-inner.about-split {
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: var(--about-row-gap) !important;
  }

  .about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-card {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center !important;
    min-width: 0 !important;
    min-height: 0 !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: var(--site-card-padding) !important;
    overflow: visible !important;
    isolation: isolate !important;
  }

  .about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame,
  .about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-card > div {
    position: relative !important;
    z-index: 1 !important;
    inset: auto !important;
    transform: none !important;
    float: none !important;
    justify-self: center !important;
    width: min(calc(100% - (2 * var(--about-plate-side-space))), clamp(260px, 78vw, 390px)) !important;
    max-width: 100% !important;
    margin-inline: auto !important;
  }

  .about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-card::before {
    content: none !important;
    display: none !important;
  }
}

/* Final Meet layout contract: center the usable page frame and keep the
   portrait image fully inside its single plate at every viewport. */
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] > .about-section-inner.about-split {
  width: min(var(--content-max), calc(100% - (2 * var(--page-gutter)))) !important;
  max-width: var(--content-max) !important;
  margin-inline: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame {
  overflow: hidden !important;
  border-radius: 50% / 22% !important;
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-image {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  border-radius: 50% / 22% !important;
  clip-path: inset(0 round 50% / 22%) !important;
}

@media (min-width: 1001px) {
  .about-page .about-section--cream[aria-labelledby="meet-kathleen"] > .about-section-inner.about-split {
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr) !important;
    column-gap: var(--about-row-gap) !important;
  }

  .about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-card {
    overflow: hidden !important;
    align-self: stretch !important;
    justify-items: center !important;
  }

  .about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-card::before {
    content: "" !important;
    display: block !important;
    z-index: 0 !important;
    top: 0 !important;
    right: var(--about-plate-side-space) !important;
    bottom: 0 !important;
    left: var(--about-plate-side-space) !important;
    width: auto !important;
    transform: none !important;
  }

  .about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame,
  .about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-card > div {
    position: relative !important;
    z-index: 1 !important;
  }
}

/* Align the gold plate to the shared card gutter while preserving the
   established column gap between the plate and biography card. */
@media (min-width: 1001px) {
  .about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-card::before {
    left: 0 !important;
    right: 0 !important;
    top: calc(-1 * var(--site-card-padding)) !important;
    bottom: calc(-1 * var(--site-card-padding)) !important;
  }

  .about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame,
  .about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-card > div {
    transform: none !important;
  }

  .about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-card {
    overflow: visible !important;
  }
}

/* Make the photograph a true inset: its soft source edge is cropped inside
   the gold and brown rim rather than merely covered by the keylines. */
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame {
  overflow: hidden !important;
  isolation: isolate !important;
  justify-self: center !important;
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-image {
  border: 0 !important;
  box-shadow: none !important;
  clip-path: inset(10px round 50% / 22%) !important;
}

/* One metallic plate surface, shared by desktop and the stacked layout. */
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] {
  --portrait-plate-metal:
    linear-gradient(102deg,
      #CEA00C 0%,
      #F6DC88 13%,
      #FFF4C2 25%,
      #E6B514 41%,
      #F1BE15 58%,
      #FFF0A5 74%,
      #CEA00C 100%);
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-card::before,
.about-page .about-section--cream[aria-labelledby="meet-kathleen"]::before {
  background: var(--portrait-plate-metal) !important;
  box-shadow:
    inset 1px 0 0 rgba(255, 255, 255, .72),
    inset -2px 0 0 rgba(88, 57, 0, .26),
    inset 0 1px 0 rgba(255, 255, 255, .42) !important;
}

/* The portrait and its identity lockup share one exact responsive width. */
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-card {
  --portrait-lockup-width: min(
    calc(100% - (2 * var(--about-plate-side-space))),
    clamp(260px, 78vw, 390px)
  );
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame,
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-card > div {
  width: var(--portrait-lockup-width) !important;
  max-width: 100% !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
  box-sizing: border-box !important;
  text-align: left !important;
}

@media (min-width: 1001px) {
  .about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-card {
    --portrait-lockup-width: min(
      calc(100% - (2 * var(--about-plate-side-space))),
      clamp(260px, 30vw, 390px)
    );
  }
}

/* Align the lettering to the visible photograph, not the surrounding rim. */
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-card {
  container-type: inline-size;
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-card > div {
  width: calc(var(--portrait-lockup-width) - 20px) !important;
}

/* Scale the lockup with the portrait column while keeping its established
   readable minimum and maximum. */
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-name span:first-child {
  font-size: clamp(2rem, 7.2cqi, 2.8rem) !important;
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-name span:last-child {
  font-size: clamp(1.35rem, 5.1cqi, 2rem) !important;
}

/* Give Kathleen's credentials a little breathing room below her name. */
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-name span:last-child {
  margin-top: clamp(4px, .45vw, 8px) !important;
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-role {
  font-size: clamp(.9rem, 3.15cqi, 1.08rem) !important;
  margin-top: 18px !important;
}

/* Keep the shared post-divider rhythm inside the About hero so it remains
   visible between the gold pomegranate divider and the teal section. */
.about-page .about-hero-content {
  padding-bottom: var(--hero-space-divider-to-content) !important;
}

.about-page .about-hero + .about-section {
  margin-top: 0 !important;
}

/* Team cards: a compact, self-contained editorial treatment. */
.about-page .about-section--team {
  padding-block: clamp(52px, 6vw, 96px);
  background: transparent;
}

.about-page .about-team-heading {
  max-width: none;
  margin: 0 0 clamp(28px, 3.5vw, 48px);
  text-align: left;
}

.about-page .about-team-heading .about-kicker {
  margin-bottom: 12px;
}

.about-page .about-team-heading-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0 auto 12px;
}

.about-page .about-team-heading-divider span {
  width: clamp(64px, 8vw, 126px);
  height: 1px;
  background: linear-gradient(90deg, transparent, #CEA00C 20%, #CEA00C 80%, transparent);
}

.about-page .about-team-heading-divider img {
  display: block;
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.about-page .about-team-heading h2 {
  margin: 0;
  color: var(--deep-teal);
  font-family: var(--brand);
  font-size: clamp(2rem, 3.3vw, 3.8rem);
  font-weight: 600;
  line-height: .98;
  letter-spacing: 0;
}

.about-page .about-team-heading h2 span {
  display: block;
  margin-top: 4px;
  font-size: .78em;
}

.about-page .about-team-heading > p:last-child {
  max-width: none;
  margin: clamp(16px, 1.7vw, 24px) 0 0;
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(1rem, 1.1vw, 1.25rem);
  font-weight: 500;
  line-height: 1.45;
}

.about-page .about-section--team .about-team-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: 1fr;
  gap: clamp(24px, 2.2vw, 36px);
  width: min(var(--content-max), calc(100% - (2 * var(--page-gutter))));
  max-width: var(--content-max);
  margin: 0 auto;
}

.about-page .about-section--team .about-team-card {
  --team-divider-size: 20px;
  --team-outer-bar-size: 0px;
  --team-portrait-cap: calc(var(--team-outer-bar-size) + var(--team-card-radius));
  --team-photo-outer-inset: var(--team-outer-bar-size);
  --team-photo-inner-inset: calc(var(--team-divider-size) - var(--team-card-radius));
  --team-portrait-column: 30%;
  --team-card-surface: #0F5B5A;
  --team-card-radius: 8px;
  --team-divider-color: #FFFDF8;
  --team-portrait-zoom: 1;
  --team-portrait-offset-y: 0px;
  position: relative;
  display: grid;
  grid-template-columns: var(--team-portrait-column) minmax(0, 1fr);
  align-items: start;
  min-height: 0;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: var(--taupe-card-border-width) solid #E7DED1;
  border-radius: var(--team-card-radius);
  background: var(--team-divider-color);
  isolation: isolate;
}

.about-page .about-section--team .about-team-card::before {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: var(--team-portrait-column);
  width: calc(var(--team-divider-size) * 2);
  border-radius: var(--team-card-radius) 0 0 var(--team-card-radius);
  content: "";
  background: var(--team-divider-color);
  transform: translateX(-50%);
  pointer-events: none;
}

.about-page .about-section--team .about-team-portrait {
  position: relative;
  width: 100%;
  max-width: none;
  min-width: 0;
  min-height: 0;
  height: auto;
  align-self: start;
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 0;
  border-radius: var(--team-card-radius) 0 0 var(--team-card-radius);
  background: var(--team-card-surface);
  box-shadow: none;
}

.about-page .about-section--team .about-team-portrait::before {
  position: absolute;
  z-index: 0;
  inset: 0 0 0 auto;
  width: var(--team-card-radius);
  content: "";
  background: var(--team-divider-color);
  pointer-events: none;
}

.about-page .about-section--team .about-team-card--scott .about-team-portrait::before {
  right: auto;
  left: 0;
}

.about-page .about-section--team .about-team-portrait img {
  position: absolute;
  z-index: 1;
  inset: 0 var(--team-photo-inner-inset) 0 var(--team-photo-outer-inset);
  width: calc(100% - var(--team-photo-outer-inset) - var(--team-photo-inner-inset));
  height: calc(100% + var(--team-portrait-offset-y));
  object-fit: cover;
  object-position: center;
  transform: translateY(calc(-1 * var(--team-portrait-offset-y))) scale(var(--team-portrait-zoom));
  transform-origin: center;
  border-radius: var(--team-card-radius);
  clip-path: inset(0 round var(--team-card-radius));
}

.about-page .about-section--team .about-team-card--kathleen .about-team-portrait img {
  object-position: center 42%;
}

.about-page .about-section--team .about-team-card--kathleen {
  --team-portrait-zoom: 1;
  --team-portrait-offset-y: 0px;
}

.about-page .about-section--team .about-team-portrait--placeholder {
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.92);
  font-family: var(--brand);
  font-size: clamp(3rem, 6vw, 5.3rem);
  font-weight: 600;
  letter-spacing: .04em;
}

.about-page .about-section--team .about-team-card--scott .about-team-portrait--placeholder {
  background: linear-gradient(135deg, #D6E1E4 0%, #AFC8D6 48%, #7597B7 100%);
}

.about-page .about-section--team .about-team-card--steven .about-team-portrait--placeholder {
  background: linear-gradient(135deg, #E2DFC5 0%, #B6B577 48%, #64733E 100%);
}

.about-page .about-section--team .about-team-card-copy {
  --team-divider-height: var(--team-divider-size);
  position: relative;
  z-index: 3;
  align-self: stretch;
  min-width: 0;
  padding: clamp(38px, 3.5vw, 50px) clamp(20px, 2vw, 32px) clamp(24px, 2.4vw, 34px);
  margin-left: 0;
  border-left: 0;
  border-radius: var(--team-card-radius) 0 0 var(--team-card-radius);
  padding-left: clamp(36px, 3vw, 48px);
  padding-right: clamp(36px, 3vw, 48px);
  text-align: center;
}

.about-page .about-section--team .about-team-card--kathleen .about-team-card-copy { background: var(--team-card-surface); }
.about-page .about-section--team .about-team-card--scott {
  --team-card-surface: linear-gradient(135deg, #E8C95E 0%, #D6AC35 58%, #C49124 100%);
  --team-portrait-zoom: 1;
  --team-portrait-offset-y: 0px;
}
.about-page .about-section--team .about-team-card--scott::before {
  right: var(--team-portrait-column);
  left: auto;
  border-radius: 0 var(--team-card-radius) var(--team-card-radius) 0;
  transform: translateX(50%);
}
.about-page .about-section--team .about-team-card--scott .about-team-card-copy {
  background: var(--team-card-surface);
}
.about-page .about-section--team .about-team-card--steven {
  --team-card-surface: #40538E;
}
.about-page .about-section--team .about-team-card--steven .about-team-portrait img {
  transform-origin: center top;
}
.about-page .about-section--team .about-team-card--kathleen .about-team-portrait img,
.about-page .about-section--team .about-team-card--scott .about-team-portrait img {
  transform-origin: center top;
}
.about-page .about-section--team .about-team-card--steven .about-team-card-copy {
  background: var(--team-card-surface);
}

.about-page .about-section--team .about-team-card--scott .about-team-portrait {
  order: 2;
  border-radius: 0 var(--team-card-radius) var(--team-card-radius) 0;
}

.about-page .about-section--team .about-team-card--scott {
  grid-template-columns: minmax(0, 1fr) var(--team-portrait-column);
}

.about-page .about-section--team .about-team-card--scott .about-team-portrait img {
  object-position: center;
}

.about-page .about-section--team .about-team-card--scott .about-team-card-copy {
  order: 1;
  margin-right: 0;
  margin-left: 0;
  border-right: 0;
  border-left: 0;
  border-radius: 0 var(--team-card-radius) var(--team-card-radius) 0;
  padding-right: clamp(36px, 3vw, 48px);
  padding-left: clamp(36px, 3vw, 48px);
}

.about-page .about-section--team .about-team-card--scott .about-team-medallion {
  right: calc(var(--team-divider-height) / -2);
  left: auto;
  transform: translate(50%, -50%);
}

.about-page .about-section--team .about-team-medallion {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: calc(var(--team-divider-height) / -2);
  display: grid;
  place-items: center;
  width: clamp(42px, 4vw, 58px);
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid #B9870B;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 32%, #FBE79A 0%, #EAC554 58%, #C99618 100%);
  box-shadow:
    inset 0 1px 1px rgba(255, 248, 201, .72),
    inset 0 -1px 1px rgba(120, 78, 0, .32),
    0 2px 5px rgba(30, 77, 74, .22);
  transform: translate(-50%, -50%);
  isolation: isolate;
}

.about-page .about-section--team .about-team-medallion::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 3px;
  border: 1px solid rgba(145, 96, 0, .42);
  border-radius: 50%;
  box-shadow: inset 0 1px 0 rgba(255, 245, 187, .58);
  pointer-events: none;
}

.about-page .about-section--team .about-team-medallion::after {
  display: none;
}

.about-page .about-team-medallion img {
  position: relative;
  z-index: 2;
  width: 78%;
  height: 78%;
  object-fit: contain;
  filter: contrast(1.12) saturate(1.03) drop-shadow(0 1px 1px rgba(104, 67, 0, .2));
}

.about-page .about-section--team .about-team-card h3 {
  margin: 0;
  color: #FFFDF8;
  font-family: var(--brand);
  font-size: calc(var(--page-card-title-size) + .2rem);
  font-weight: 600;
  line-height: .95;
  letter-spacing: 0;
}

.about-page .about-section--team .about-team-card .about-role {
  margin: 10px 0 clamp(16px, 3vw, 45px);
  color: #F6D36A;
  font-family: var(--display);
  font-size: .989rem;
  font-weight: 750;
  font-variation-settings: "wght" 750;
  line-height: 1.2;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.about-page .about-section--team .about-team-card .about-role::after {
  display: block;
  width: 100%;
  height: 1px;
  margin-top: clamp(16px, 1.6vw, 22px);
  content: "";
  background: rgba(246, 220, 136, .58);
}

.about-page .about-section--team .about-team-card-copy > p:last-child {
  margin: 0;
  color: #FFFDF8;
  font-family: var(--display);
  font-size: clamp(.94rem, 1vw, 1.14rem);
  font-weight: 450;
  line-height: 1.52;
  text-align: left;
}

.about-page .about-section--team .about-team-card--scott h3 {
  color: #FFFDF8;
}

.about-page .about-section--team .about-team-card--scott .about-role {
  color: #1E4D4A;
}

.about-page .about-section--team .about-team-card--scott .about-role::after {
  background: #FFFDF8;
}

.about-page .about-section--team .about-team-card--scott .about-team-card-copy > p:last-child {
  color: #243C3A;
}

@media (max-width: 980px) {
  .about-page .about-section--team .about-team-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .about-page .about-section--team .about-team-card:last-child {
    grid-column: auto;
    width: 100%;
    justify-self: stretch;
  }
}

.about-team-header,
.about-team-identity { display: contents; }

@media (max-width: 1155px) {
  .about-page .about-section--team .about-team-card {
    display: grid;
    grid-template-columns: minmax(0, 268px) minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    background: var(--team-card-surface);
  }

  .about-page .about-section--team .about-team-card--scott {
    grid-template-columns: minmax(0, 1fr) minmax(0, 268px);
  }

  .about-page .about-section--team .about-team-card::before,
  .about-page .about-section--team .about-team-portrait::before,
  .about-page .about-section--team .about-team-card-copy::before,
  .about-page .about-section--team .about-team-card .about-role::after {
    display: none;
  }

  .about-page .about-section--team .about-team-card .about-team-portrait {
    grid-area: 1 / 1;
    order: 0;
    width: auto;
    max-width: none;
    height: auto;
    aspect-ratio: auto;
    margin: 24px;
    border-radius: var(--team-card-radius);
    background: transparent;
  }

  .about-page .about-section--team .about-team-card--scott .about-team-portrait {
    grid-column: 2;
  }

  .about-page .about-section--team .about-team-portrait img {
    position: relative;
    inset: auto;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1000 / 981;
  }

  .about-page .about-section--team .about-team-card .about-team-card-copy {
    display: contents;
  }

  .about-page .about-section--team .about-team-identity {
    display: block;
    grid-area: 1 / 2;
    min-width: 0;
    padding: 24px;
    text-align: center;
  }

  .about-page .about-section--team .about-team-card--scott .about-team-identity {
    grid-column: 1;
  }

  .about-page .about-section--team .about-team-card .about-role {
    margin: 14px 0 0;
  }

  /* The rounded biography surface overlaps the equally rounded white layer. */
  .about-page .about-section--team .about-team-card-copy > p:last-child {
    grid-column: 1 / -1;
    grid-row: 2;
    align-self: stretch;
    margin: var(--team-divider-size) 0 0;
    padding: 32px 24px 24px;
    border-radius: var(--team-card-radius) var(--team-card-radius) 0 0;
    background: var(--team-card-surface);
    box-shadow: 0 calc(-1 * var(--team-divider-size)) 0 var(--team-divider-color);
  }

  .about-page .about-section--team .about-team-card .about-team-medallion {
    position: relative;
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
    align-self: start;
    top: 10px;
    bottom: auto;
    left: auto;
    right: auto;
    z-index: 4;
    transform: translateY(-50%);
  }
}

@media (max-width: 600px) {
  .about-page .about-section--team .about-team-card,
  .about-page .about-section--team .about-team-card--scott {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
  }

  .about-page .about-section--team .about-team-card .about-team-portrait {
    grid-area: 1 / 1;
    width: min(220px, calc(100% - 48px));
    margin: 24px auto 0;
    justify-self: center;
  }

  .about-page .about-section--team .about-team-card .about-team-identity {
    grid-area: 2 / 1;
    padding: 24px 24px 28px;
  }

  .about-page .about-section--team .about-team-card-copy > p:last-child,
  .about-page .about-section--team .about-team-card .about-team-medallion {
    grid-row: 3;
  }
}

/* Keep the company-purpose introduction on the shared left content rail. */
.about-page .about-purpose-grid {
  gap: 0;
}

.about-page .about-purpose-intro {
  max-width: none;
  margin: 0 0 clamp(42px, 5vw, 72px);
  text-align: left;
}

.about-page .about-purpose-block + .about-purpose-block {
  margin-top: clamp(24px, 3vw, 42px);
}

@media (max-width: 480px) {
  .about-page .about-compass-lockup .lockup-vertical-divider {
    margin-left: 8px;
    margin-right: 6px;
  }

  .about-page .about-section--teal .about-compass-lockup .compass-lockup h2 {
    font-size: clamp(1rem, 5.2vw, 1.4rem) !important;
    letter-spacing: .03em !important;
  }

  .about-page .about-section--teal .about-compass-lockup .compass-lockup .subhead {
    font-size: clamp(.72rem, 3.35vw, .9rem) !important;
    letter-spacing: .075em !important;
  }
}

/* All shared page heroes: preserve the composed desktop lockup, then allow
   its actual words to reflow cleanly within the mobile page gutter. */
@media (max-width: 700px) {
  .brand-heading,
  .persephone-wordmark,
  .hero-slogan {
    max-inline-size: calc(100vw - (2 * var(--page-gutter))) !important;
    min-inline-size: 0 !important;
  }

  .persephone-wordmark,
  .persephone-wordmark .wordmark-line,
  .hero-slogan,
  .hero-slogan .slogan-line {
    white-space: normal !important;
    overflow-wrap: normal !important;
  }

  .persephone-wordmark .wordmark-line {
    display: block !important;
  }

  .persephone-wordmark .wordmark-line + .wordmark-line::before {
    content: none !important;
  }

  .hero-slogan .slogan-line {
    max-inline-size: 100% !important;
  }
}

/* Keep the wordmark-to-slogan relationship measured rather than fluid. */
.hero-slogan {
  margin-top: 20px !important;
}

/* About: use the same heading rhythm and full content rail as the homepage
   Compass teaser, without retaining the superseded empty artwork column. */
.about-page .about-section--open[aria-labelledby="introducing-compass"] {
  padding-block: 0 var(--subsection-heading-below);
}

.about-page .about-section--open[aria-labelledby="introducing-compass"] .about-centered-heading {
  max-width: none;
  margin-inline: 0;
  margin-bottom: 0;
  text-align: left;
}

.about-page .about-section--teal > .about-section-inner.about-compass-intro {
  display: block;
  width: min(var(--content-max), calc(100% - (2 * var(--page-gutter))));
  max-width: var(--content-max);
  padding-inline: 0;
}

@media (max-width: 700px) {
  .about-page .about-section--teal > .about-section-inner.about-compass-intro {
    width: min(var(--content-max), calc(100% - 48px));
    margin-inline: auto;
    padding-inline: 0;
  }
}

.about-page .about-section--teal > .about-section-inner.about-compass-intro .about-copy {
  max-width: none;
}

.about-page .about-section--teal .about-teaser-compass {
  position: absolute;
  z-index: 0;
  top: clamp(18px, 2vw, 32px);
  right: var(--site-card-padding);
  width: clamp(132px, 13vw, 210px);
  aspect-ratio: 1;
  pointer-events: none;
  isolation: isolate;
}

.about-page .about-section--teal .about-teaser-compass__base,
.about-page .about-section--teal .about-teaser-compass__rose {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.about-page .about-section--teal .about-teaser-compass__rose-frame {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  pointer-events: none;
}

.about-page .about-section--teal .about-teaser-compass__rose {
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  will-change: transform;
}

.about-page .about-section--teal .about-teaser-compass__rose.is-spinning {
  animation: aboutCompassRoseSpin 1.8s cubic-bezier(.22, .68, .22, 1) both;
}

/* Desktop/tablet Compass composition: keep the brand lockup on the shared
   left rail, center the animated mark beneath it, then begin the copy below. */
@media (min-width: 701px) {
  .about-page .about-section--teal .about-compass-lockup {
    transform: translateX(-4px);
    margin-bottom: calc(40px + clamp(60px, 5vw, 95px));
  }

  .about-page .about-section--teal .about-teaser-compass {
    top: var(--site-card-padding);
    right: var(--site-card-padding);
    left: auto;
    width: clamp(150px, 13.75vw, 225px);
    transform: none;
  }

  .about-page .about-section--teal .about-teaser-compass__rose-frame {
    inset: 7.5%;
  }
}

@keyframes aboutCompassRoseSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .about-page .about-section--teal .about-teaser-compass__rose.is-spinning {
    animation: none !important;
  }
}

@media (max-width: 700px) {
  .about-page .about-section--teal .about-teaser-compass {
    display: none;
  }
}

@media (max-width: 700px) {
  .persephone-wordmark {
    font-size: clamp(3.8rem, 14.5vw, 4.75rem) !important;
  }

  .hero-slogan .slogan-line--secondary {
    white-space: nowrap !important;
    font-size: clamp(1.1rem, 5vw, 1.65rem) !important;
  }
}

/* One shared handoff between the Team cards and the company-purpose section. */
.about-page .about-section--team {
  padding-bottom: clamp(40px, 4vw, 64px);
}

.about-page .about-section--team + .about-purpose {
  padding-top: 0;
}

@media (max-width: 650px) {
  .about-page .about-section--team {
    padding-bottom: clamp(40px, 8vw, 52px);
  }
}

/* Footer: keep every column gap on the same responsive rhythm before stacking. */
.site-footer {
  --footer-column-gap: clamp(14px, 1.6vw, 32px);
}

@media (min-width: 921px) {
  .site-footer .footer-container {
    grid-template-columns:
      minmax(320px, 1.25fr)
      minmax(125px, .72fr)
      minmax(190px, 1fr)
      minmax(210px, 1.05fr);
    column-gap: var(--footer-column-gap);
    justify-content: stretch;
  }
}

@media (min-width: 721px) and (max-width: 920px) {
  .site-footer .footer-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--footer-column-gap);
    row-gap: clamp(24px, 3vw, 32px);
  }
}

/* Team: use the full content rail, with the same body type system site-wide. */
.about-page .about-section--team > .about-section-inner {
  width: min(var(--content-max), calc(100% - (2 * var(--page-gutter))));
}

.about-page .about-section--team .about-team-grid {
  width: 100%;
}

.about-page .about-team-heading-divider {
  display: none;
}

.about-page .about-team-heading h2 {
  font-family: var(--display);
  font-size: var(--page-card-title-size);
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: .0125em;
}

.about-page .about-team-heading > p:last-child,
.about-page .about-section--team .about-team-card-copy > p:last-child {
  font-family: var(--body);
  font-size: var(--page-body-size);
  font-weight: 450;
  line-height: var(--page-body-leading);
  letter-spacing: .01em;
}

.about-page .about-section--team .about-team-card-copy > p:last-child {
  text-align: left;
  text-indent: 2em;
}

.about-page .about-section--team .about-team-card .about-team-portrait img {
  object-position: center top;
}

@media (min-width: 1156px) {
  .about-page .about-section--team .about-team-card {
    --team-portrait-column: calc(30% - 40px);
    --team-portrait-cap: calc(var(--team-outer-bar-size) + var(--team-card-radius));
    --team-photo-outer-inset: var(--team-outer-bar-size);
  }

  .about-page .about-section--team .about-team-portrait {
    align-self: stretch;
    height: 100%;
    aspect-ratio: auto;
    background: var(--team-card-surface);
  }

  .about-page .about-section--team .about-team-portrait::after {
    position: absolute;
    z-index: 0;
    inset: 0 auto 0 0;
    width: var(--team-portrait-cap);
    content: "";
    background: var(--team-card-surface);
    pointer-events: none;
  }

  .about-page .about-section--team .about-team-portrait img {
    inset: 0 var(--team-photo-inner-inset) 0 var(--team-photo-outer-inset);
    width: calc(100% - var(--team-photo-outer-inset) - var(--team-photo-inner-inset));
    height: calc(100% + var(--team-portrait-offset-y));
    aspect-ratio: auto;
    object-fit: cover;
    border-radius: var(--team-card-radius);
    clip-path: inset(
      var(--team-portrait-offset-y) 0 0 0
      round var(--team-card-radius)
    );
  }

  .about-page .about-section--team .about-team-card--scott .about-team-portrait::after {
    right: 0;
    left: auto;
  }

  .about-page .about-section--team .about-team-card--scott .about-team-portrait img {
    right: var(--team-photo-outer-inset);
    left: var(--team-photo-inner-inset);
  }

}

@media (min-width: 1400px) {
  .about-page .about-section--team .about-team-card--steven {
    --team-portrait-zoom: 1.04;
  }
}

@media (min-width: 1600px) {
  .about-page .about-section--team .about-team-card--steven {
    --team-portrait-zoom: 1.08;
  }
}

@media (min-width: 1800px) {
  .about-page .about-section--team .about-team-card--steven {
    --team-portrait-zoom: 1.12;
  }
}

@media (max-width: 700px) {
  .about-page .about-section--team > .about-section-inner {
    width: min(var(--content-max), calc(100% - 48px));
  }
}


/* Footer: keep the full four-column row until the content rail is genuinely
   too narrow for it. The gap contracts evenly before the layout stacks. */
@media (min-width: 841px) and (max-width: 920px) {
  .site-footer .footer-container {
    grid-template-columns:
      minmax(250px, 1.2fr)
      minmax(115px, .62fr)
      minmax(165px, .88fr)
      minmax(180px, .95fr);
    column-gap: clamp(12px, 1.35vw, 20px);
    row-gap: 0;
  }
}

@media (min-width: 841px) and (max-width: 1000px) {
  .site-footer .footer-portal-mark {
    width: 84px;
    height: 84px;
  }

  .site-footer .footer-brand {
    column-gap: 10px;
  }

  .site-footer .footer-brand-lockup strong {
    font-size: 2.15rem;
  }

  .site-footer .footer-brand p {
    font-size: .78rem;
  }

  .site-footer .footer-brand .socials {
    margin-top: 8px;
  }

  .site-footer a,
  .site-footer p {
    font-size: .84rem;
  }
}

/* At medium widths, place every footer block in the two-row grid instead of
   reserving a full row for the brand. This removes the empty right-hand area
   while preserving the compact, centered mobile footer below this range. */
@media (min-width: 560px) and (max-width: 840px) {
  .site-footer .footer-container {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: clamp(20px, 4vw, 36px);
    row-gap: clamp(24px, 3vw, 32px);
  }

  .site-footer .footer-container > .footer-brand {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    width: 100%;
  }

  .site-footer .footer-container > .footer-quick-links {
    grid-column: 2;
    grid-row: 1;
  }

  .site-footer .footer-container > div:nth-child(3) {
    grid-column: 1;
    grid-row: 2;
  }

  .site-footer .footer-container > div:nth-child(4) {
    grid-column: 2;
    grid-row: 2;
    justify-self: stretch;
    width: 100%;
  }

  .site-footer .footer-portal-mark {
    width: 86px;
    height: 86px;
  }

  .site-footer .footer-brand-lockup strong {
    font-size: 2.15rem;
  }
}

/* About Compass: place the larger base in the open right-hand field while
   keeping the spinning rose at its existing visual scale. */
@media (min-width: 701px) {
  .about-page .about-section--teal .about-teaser-compass {
    right: clamp(64px, 9vw, 152px);
    width: clamp(145px, 13vw, 235px);
  }

  .about-page .about-section--teal .about-teaser-compass__rose-frame {
    inset: 10%;
  }
}

/* First footer wrap: retain all three information columns on one evenly
   spaced row below the brand. The smaller two-column/mobile layout follows
   only once this row no longer fits. Kept at the cascade tail so it overrides
   earlier footer experiments. */
@media (min-width: 641px) and (max-width: 840px) {
  .site-footer .footer-container {
    grid-template-columns: max-content max-content max-content;
    grid-template-rows: auto auto;
    column-gap: 0;
    row-gap: clamp(22px, 3vw, 30px);
    justify-content: space-between;
  }

  .site-footer .footer-container > .footer-brand {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: start;
    width: auto;
  }

  .site-footer .footer-container > .footer-quick-links {
    grid-column: 1;
    grid-row: 2;
  }

  .site-footer .footer-container > div:nth-child(3) {
    grid-column: 2;
    grid-row: 2;
  }

  .site-footer .footer-container > div:nth-child(4) {
    grid-column: 3;
    grid-row: 2;
    justify-self: end;
    width: auto;
  }

}

/* Continuous mobile-to-desktop sizing, independent of the compass stacking point. */
.about-page .about-section--teal .about-compass-lockup {
  --nc-logo-title-size: clamp(1.72rem, max(calc(1.6044rem + .52851vw), calc(1.1316rem + 1.6091vw)), 3.0625rem);
  --nc-workspace-size: clamp(.98rem, max(calc(.9119rem + .31131vw), calc(.6381rem + .9372vw)), 1.7625rem);
  --nc-logo-mark-size: clamp(62px, max(calc(56.7738px + 1.49321vw), calc(37.663px + 4.2233vw)), 118.75px);
  --nc-logo-icon-divider-gap: clamp(10px, max(.8vw, calc(5.6967px + .61475vw)), 17.5px);
  --nc-logo-divider-text-gap: clamp(8px, max(.4vw, calc(5.418px + .36885vw)), 12.5px);
  --nc-nutrition-tracking: .05em;
  --nc-compass-tracking: .05em;
  --nc-workspace-tracking: .1em;
}

@media (max-width: 700px) {
  .about-page .about-section--teal .about-compass-lockup {
    --nc-nutrition-tracking: .04em;
    --nc-compass-tracking: .04em;
  }
}

.about-page .about-section--teal .about-compass-lockup .compass-logo-mark {
  width: var(--nc-logo-mark-size) !important;
  height: var(--nc-logo-mark-size) !important;
}

.about-page .about-section--teal .about-compass-lockup .lockup-vertical-divider {
  height: calc((var(--nc-logo-title-size) * 1.05) + var(--nc-workspace-size) + (var(--nc-workspace-size) * .34));
  margin-left: var(--nc-logo-icon-divider-gap);
  margin-right: var(--nc-logo-divider-text-gap);
}

.about-page .about-section--teal .about-compass-lockup .compass-lockup h2 {
  font-size: var(--nc-logo-title-size) !important;
}

.about-page .about-section--teal .about-compass-lockup .compass-lockup h2 .lockup-word,
.about-page .about-section--teal .about-compass-lockup .compass-lockup h2 .lockup-word--nutrition,
.about-page .about-section--teal .about-compass-lockup .compass-lockup h2 .lockup-word--compass {
  letter-spacing: var(--nc-nutrition-tracking);
}

.about-page .about-section--teal .about-compass-lockup .compass-lockup .subhead {
  font-size: var(--nc-workspace-size) !important;
  letter-spacing: var(--nc-workspace-tracking) !important;
}

/* Footer: distribute actual content columns, not fractional tracks. That keeps
   the visible spaces on either side of Quick Links contracting together. */
@media (min-width: 1201px) {
  .site-footer .footer-container {
    grid-template-columns: max-content max-content max-content max-content;
    column-gap: 0;
    justify-content: space-between;
  }
}

/* First desktop wrap: logo on row one, then all three information columns on
   one evenly distributed row. Reset older two-column placement rules here. */
@media (min-width: 841px) and (max-width: 1200px) {
  .site-footer .footer-container {
    grid-template-columns: max-content max-content max-content;
    grid-template-rows: auto auto;
    column-gap: 0;
    row-gap: clamp(22px, 2.5vw, 30px);
    justify-content: space-between;
  }

  .site-footer .footer-container > .footer-brand {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: start;
    width: auto;
  }

  .site-footer .footer-container > .footer-quick-links {
    grid-column: 1;
    grid-row: 2;
  }

  .site-footer .footer-container > div:nth-child(3) {
    grid-column: 2;
    grid-row: 2;
  }

  .site-footer .footer-container > div:nth-child(4) {
    grid-column: 3;
    grid-row: 2;
    justify-self: end;
    width: auto;
  }
}

/* Row-major metallic principle pairs alternate when collapsed to one column. */
.about-page .about-story-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(48px, calc(4vw + 16px), 72px);
}
.about-page .about-story-layout > .about-copy {
  width: 100%;
  max-width: none;
  min-width: 0;
  box-sizing: border-box;
}
.story-principles-list {
  --principle-height: 64px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 12px;
  padding: 0 0 calc(var(--principle-height) / 2);
  margin: 20px 0 0;
  list-style: none;
}
.story-principle {
  --engraving-fill: #5A3B07;
  --engraving-rim: rgba(255, 246, 208, .55);
  --engraving-shadow: rgba(65, 42, 4, .72);
  --metal-edge-light: #FFF4C2;
  --metal-edge-mid: #F1BE15;
  --metal-edge-dark: #B48300;
  --metal-face:
    linear-gradient(102deg, transparent 2%, rgba(241,190,21,.2) 10%, rgba(255,244,194,.92) 31%, rgba(246,220,136,.68) 46%, rgba(241,190,21,.16) 60%, transparent 72%),
    linear-gradient(90deg, #C28F00 0%, #D6A400 14%, #E5B400 28%, #F1BE15 50%, #E5B400 72%, #D6A400 86%, #C28F00 100%);
  --arrow-depth: 22px;
  --arrow-shape: polygon(0 0, calc(100% - var(--arrow-depth)) 0, 100% 50%, calc(100% - var(--arrow-depth)) 100%, 0 100%, var(--arrow-depth) 50%);
  position: relative;
  display: grid;
  place-items: center;
  min-height: var(--principle-height);
  height: var(--principle-height);
  max-height: var(--principle-height);
  min-width: 0;
  box-sizing: border-box;
  padding: 10px 34px;
  filter: drop-shadow(0 3px 3px rgba(35, 39, 31, .20)) drop-shadow(0 11px 11px rgba(35, 39, 31, .22));
  color: #583900;
  font-family: var(--display);
  font-size: var(--principle-font-size, 1rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: center;
}
.story-principle-metal {
  position: absolute;
  inset: 0;
  clip-path: var(--arrow-shape);
  background: linear-gradient(180deg, var(--metal-edge-light) 0%, var(--metal-edge-mid) 48%, var(--metal-edge-dark) 100%);
}
.story-principle-metal::before {
  content: "";
  position: absolute;
  inset: 3px;
  clip-path: var(--arrow-inner-shape, var(--arrow-shape));
  background:
    linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,.08) 14%, transparent 30%, transparent 72%, rgba(0,0,0,.18) 100%),
    var(--metal-face);
}
.story-principle > span {
  position: relative;
  white-space: nowrap;
  color: var(--engraving-fill);
  filter: url(#principle-inner-shadow);
  text-shadow: none;
}
.story-principle--teal {
  --engraving-fill: #F5F8F5;
  --engraving-rim: rgba(159, 202, 197, .55);
  --engraving-shadow: rgba(7, 43, 41, .82);
  --metal-edge-light: #D5E8E4;
  --metal-edge-mid: #3F7D79;
  --metal-edge-dark: #1E4D4A;
  --metal-face:
    linear-gradient(102deg, transparent 6%, rgba(15,143,150,.24) 14%, rgba(211,241,238,.62) 28%, rgba(63,125,121,.38) 44%, transparent 62%),
    linear-gradient(90deg, #1E4D4A 0%, #326B67 20%, #3F7D79 50%, #326B67 80%, #1E4D4A 100%);
  --arrow-shape: polygon(var(--arrow-depth) 0, 100% 0, calc(100% - var(--arrow-depth)) 50%, 100% 100%, var(--arrow-depth) 100%, 0 50%);
  transform: translateY(calc(var(--principle-height) / 2));
  color: #D5EBE9;
}
@media (max-width: 700px) {
  .story-principles-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding-bottom: 0;
  }
  .story-principle {
    width: calc(100% - var(--arrow-depth));
    margin-left: var(--arrow-depth);
  }
  .story-principle--teal {
    margin-left: 0;
    transform: none;
  }
}

/* Compass composition: the lockup and opener form one identity block, while
   the animated Compass occupies a centered artwork lane. Body copy then uses
   the full content rail beneath both. */
@media (min-width: 1001px) {
  .about-page .about-section--teal .about-compass-intro .about-copy {
    display: grid;
    grid-template-columns: fit-content(70%) minmax(0, 1fr);
    grid-template-areas:
      "lockup compass"
      "heading compass"
      "copy copy";
    column-gap: 0;
    row-gap: clamp(24px, 2.4vw, 38px);
    align-items: start;
  }

  .about-page .about-section--teal .about-compass-lockup {
    grid-area: lockup;
    align-self: start;
    margin: 0;
  }

  .about-page .about-section--teal .about-teaser-compass {
    grid-area: compass;
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    align-self: center;
    justify-self: center;
    width: clamp(190px, 13vw, 250px);
    margin: 0;
    transform: none;
  }

  .about-page .about-section--teal .about-compass-intro .about-copy > h2 {
    grid-area: heading;
    max-width: none;
    margin: 0;
  }

  .about-page .about-section--teal .about-compass-intro .about-copy > p:not(.about-kicker) {
    grid-area: copy;
    width: 100%;
    max-width: none;
    margin: 0;
  }
}

@media (max-width: 1000px) {
  .about-page .about-section--teal .about-compass-lockup {
    margin-bottom: 0;
  }

  .about-page .about-section--teal .about-teaser-compass {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    display: block;
    width: clamp(112px, 24vw, 184px);
    margin: clamp(18px, 3vw, 28px) auto;
    transform: none;
  }
}

/* On phones the Compass becomes part of the reading flow: lockup, animated
   mark, then the section heading and copy. */
@media (max-width: 700px) {
  .about-page .about-section--teal .about-compass-lockup {
    margin-bottom: 0;
  }

  .about-page .about-section--teal .about-teaser-compass {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    display: block;
    width: clamp(118px, 38vw, 162px);
    margin: clamp(18px, 4vw, 24px) auto;
    aspect-ratio: 1;
  }

  .about-page .about-section--teal .about-teaser-compass__rose-frame {
    inset: 10%;
  }
}

/* The About rose uses the same off-center artwork hub as the homepage rose.
   Keep the frame at exactly 80% while placing that one hub on the dial center. */
.about-page .about-section--teal .about-teaser-compass__rose-frame {
  inset: 9.168% 9.808% 10.832% 10.192%;
}

.about-page .about-section--teal .about-teaser-compass__rose {
  transform-origin: 49.76% 51.04%;
}

/* Round the Meet Your Dietitian plate in both axes. The horizontal metal
   remains intact while this second lighting pass shapes its top and bottom. */
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-card::before,
.about-page .about-section--cream[aria-labelledby="meet-kathleen"]::before {
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, .58) 0%,
      rgba(255, 244, 194, .22) 8%,
      rgba(255, 255, 255, 0) 20%,
      rgba(88, 57, 0, 0) 80%,
      rgba(88, 57, 0, .14) 92%,
      rgba(88, 57, 0, .32) 100%),
    var(--portrait-plate-metal) !important;
  border-radius: 0 !important;
  box-shadow:
    inset 2px 0 2px rgba(255, 255, 255, .58),
    inset -2px 0 3px rgba(88, 57, 0, .28),
    inset 0 3px 3px rgba(255, 255, 255, .56),
    inset 0 -4px 5px rgba(88, 57, 0, .30),
    0 7px 14px rgba(88, 57, 0, .16) !important;
}

/* Secondary-page keylines follow the homepage card contract. Dark teal is
   reserved for full-width teal bands; ordinary cards use the 1px taupe rule. */
.about-page .about-section--teal {
  border-top: 1px solid #1E4D4A;
  border-bottom: 1px solid #1E4D4A;
}

/* Draw the Meet Your Dietitian boundary beneath its content so the gold plate
   sits over the line at both the top and bottom edges. */
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] {
  box-shadow:
    inset 0 1px 0 #1E4D4A,
    inset 0 -1px 0 #1E4D4A !important;
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-copy,
.about-page .about-team-card,
.about-page .about-purpose-block,
.about-page .about-section--open .about-copy,
.about-page .about-timeline li,
.about-page .about-screenshot,
.nutrition-services-page .service-detail-section,
.contact-page .contact-form-card,
.contact-page .contact-info-card {
  border: 1px solid #E7DED1;
}

/* Meet Your Dietitian: use one portrait-first stack at every viewport. */
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] {
  --about-row-gap: clamp(40px, 4.5vw, 64px);
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"]::before {
  content: none !important;
  display: none !important;
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] > .about-section-inner.about-split {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: var(--about-row-gap) !important;
  align-items: start !important;
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-card {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  justify-items: center !important;
  align-self: start !important;
  width: min(100%, 760px) !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: clamp(32px, 4vw, 56px) var(--site-card-padding) !important;
  overflow: hidden !important;
  isolation: isolate !important;
  justify-self: center !important;
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-card::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  z-index: 0 !important;
  inset: 0 !important;
  width: auto !important;
  transform: none !important;
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, .58) 0%,
      rgba(255, 244, 194, .22) 8%,
      rgba(255, 255, 255, 0) 20%,
      rgba(88, 57, 0, 0) 80%,
      rgba(88, 57, 0, .14) 92%,
      rgba(88, 57, 0, .32) 100%),
    var(--portrait-plate-metal) !important;
  box-shadow:
    inset 2px 0 2px rgba(255, 255, 255, .58),
    inset -2px 0 3px rgba(88, 57, 0, .28),
    inset 0 3px 3px rgba(255, 255, 255, .56),
    inset 0 -4px 5px rgba(88, 57, 0, .30),
    0 7px 14px rgba(88, 57, 0, .16) !important;
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame,
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-card > div {
  position: relative !important;
  z-index: 1 !important;
  width: min(calc(100% - 20px), 390px) !important;
  max-width: 100% !important;
  margin-inline: auto !important;
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-card > div {
  width: min(calc(100% - 40px), 370px) !important;
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-copy {
  align-self: start !important;
  width: 100% !important;
}

/* Wide editorial inset: the portrait belongs to the biography surface. */
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] > .about-section-inner.about-split {
  display: block !important;
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-copy {
  display: flow-root !important;
  padding: clamp(30px, 4vw, 56px) !important;
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  justify-items: center !important;
  width: min(36%, 390px) !important;
  min-width: 320px !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 clamp(28px, 3.5vw, 52px) 28px 0 !important;
  padding: 16px 16px 22px !important;
  float: left !important;
  clear: none !important;
  overflow: hidden !important;
  border: 3px solid transparent !important;
  border-radius: 6px !important;
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, .42) 0%,
      rgba(255, 244, 194, .16) 12%,
      rgba(255, 255, 255, 0) 28%,
      rgba(88, 57, 0, .10) 100%) padding-box,
    var(--portrait-plate-metal) padding-box,
    linear-gradient(118deg, #CEA00C 0%, #F6DC88 26%, #FFF4C2 38%, #F1BE15 62%, #CEA00C 100%) border-box !important;
  box-shadow:
    inset 1px 1px 0 rgba(255, 244, 194, .95),
    inset -1px -1px 0 rgba(88, 57, 0, .30),
    0 8px 18px rgba(38, 48, 40, .16) !important;
  container-type: inline-size;
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-card::before {
  content: none !important;
  display: none !important;
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame {
  width: 100% !important;
  max-width: 350px !important;
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-card > div {
  width: calc(100% - 20px) !important;
  max-width: 330px !important;
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-copy > p:not(.about-kicker) {
  width: auto !important;
  max-width: none !important;
}

@media (max-width: 900px) {
  .about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-card {
    width: min(100%, 430px) !important;
    min-width: 0 !important;
    margin: 0 auto clamp(36px, 5vw, 52px) !important;
    float: none !important;
  }
}

/* Refine the inset as one softly beveled plate, without a separate outline. */
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-card {
  border: 0 !important;
  border-radius: 7px !important;
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, .48) 0%,
      rgba(255, 244, 194, .18) 10%,
      rgba(255, 255, 255, 0) 27%,
      rgba(88, 57, 0, .10) 100%),
    var(--portrait-plate-metal) !important;
  box-shadow:
    inset 0 2px 1px rgba(255, 250, 222, .92),
    inset 2px 0 2px rgba(255, 244, 194, .46),
    inset -2px 0 2px rgba(134, 92, 0, .24),
    inset 0 -3px 2px rgba(134, 92, 0, .38),
    0 8px 18px rgba(38, 48, 40, .17) !important;
}

/* Identity type scales as a single proportional lockup with the portrait. */
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-name span,
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-role {
  display: block;
  color: #1E4D4A !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
  filter: url(#principle-inner-shadow);
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-name span:first-child {
  font-size: clamp(1.65rem, 8.2cqi, 2.35rem) !important;
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-name span:last-child {
  font-size: clamp(1.1rem, 5.8cqi, 1.65rem) !important;
  margin-top: clamp(3px, 1.1cqi, 7px) !important;
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-role {
  font-size: clamp(.78rem, 3.6cqi, 1.02rem) !important;
  margin-top: clamp(12px, 4.5cqi, 18px) !important;
}

@media (min-width: 901px) {
  .about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-copy {
    padding-block: clamp(32px, 2.8vw, 44px) !important;
  }
}

/* The card content box is the portrait width and drives the whole lockup. */
.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-card {
  width: min(100%, clamp(300px, 26vw, 382px)) !important;
  min-width: 0 !important;
  box-shadow:
    inset 0 2px 0 rgba(255, 250, 222, .98),
    inset 2px 0 0 rgba(255, 244, 194, .88),
    inset -2px 0 2px rgba(134, 92, 0, .24),
    inset 0 -3px 2px rgba(134, 92, 0, .38),
    0 8px 18px rgba(38, 48, 40, .17) !important;
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame {
  width: 100% !important;
  max-width: none !important;
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-card > div {
  width: calc(100% - 26px) !important;
  max-width: none !important;
  font-size: clamp(15px, 5.2cqi, 20px) !important;
  margin-inline: auto !important;
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-name {
  font-size: inherit !important;
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-name span:first-child {
  font-size: 1.7em !important;
  width: max-content;
  max-width: none;
  white-space: nowrap;
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-name span:last-child {
  font-size: 1.2em !important;
  margin-top: .2em !important;
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-role {
  margin-top: 1.05em !important;
  font-family: var(--display) !important;
  font-size: .86rem !important;
  font-weight: 750 !important;
  line-height: 1.2 !important;
  letter-spacing: .12em !important;
  -webkit-text-stroke: .18px #1E4D4A !important;
}

@media (min-width: 901px) {
  .about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-card {
    --portrait-wrap-gap: clamp(28px, 3.5vw, 52px);
    margin: 0 var(--portrait-wrap-gap) max(0px, calc(var(--portrait-wrap-gap) - 24px)) 0 !important;
  }
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-biography-content {
  display: contents;
}

.about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-biography-content > p:not(.about-kicker) {
  width: auto !important;
  max-width: none !important;
}

@media (max-width: 900px) {
  .about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-copy {
    display: flow-root !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-card {
    width: 100vw !important;
    max-width: none !important;
    margin: 0 0 clamp(40px, 7vw, 64px) calc(50% - 50vw) !important;
    padding: clamp(30px, 6vw, 48px) var(--page-gutter) !important;
    float: none !important;
    border-radius: 0 !important;
  }

  .about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-profile-frame {
    width: min(100%, 430px) !important;
    max-width: 430px !important;
  }

  .about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-biography-content {
    display: block;
    width: 100%;
    padding: clamp(28px, 5vw, 48px);
    box-sizing: border-box;
    border: 1px solid #E7DED1;
    border-radius: 8px;
    background: #FFFCF5;
    box-shadow: 0 8px 18px rgba(38, 48, 40, .13);
  }
}

.contact-page .contact-form-card,
.contact-page .contact-info-card {
  border: 1px solid #E7DED1;
  background: #FFFFFF;
}

/* Main contact details share one display size; only the portal action is emphasized. */
.contact-page .contact-info-list > p:first-child a,
.contact-page .contact-info-list > p:nth-child(2) .contact-info-line,
.contact-page .contact-info-list > p:last-child a {
  font-size: clamp(1.15rem, calc(1.1rem + .22vw), 1.35rem);
  line-height: 1.55;
}

.contact-page .contact-info-list > p:first-child a,
.contact-page .contact-info-list > p:nth-child(2) .contact-info-line {
  color: #1E2928;
  font-weight: 400;
}

.contact-page .contact-info-list > p:last-child a {
  color: #1E4D4A;
  font-weight: 750;
}

.contact-page .contact-info-list > p:first-child a:hover,
.contact-page .contact-info-list > p:first-child a:focus-visible,
.contact-page .contact-info-list > p:last-child a:hover,
.contact-page .contact-info-list > p:last-child a:focus-visible {
  color: #F6DC88;
}

/* Keep footer type fixed while the columns wrap in a predictable sequence. */
.site-footer {
  border-top: 1px solid #1E4D4A;
  padding-inline: 0;
}

.about-page .about-section--team .about-team-grid {
  width: 100%;
  max-width: 100%;
}

.site-footer .footer-container {
  width: min(var(--content-max), calc(100% - var(--page-gutter) - var(--page-gutter)));
  margin-inline: auto;
}

@media (max-width: 700px) {
  .site-footer .footer-container {
    width: min(var(--content-max), calc(100% - 48px));
  }
}

.site-footer .footer-brand,
.site-footer .footer-quick-links,
.site-footer .footer-container > div:nth-child(3),
.site-footer .footer-container > div:nth-child(4) {
  justify-items: start;
  text-align: left;
}

.site-footer .footer-brand {
  transform: translateX(-4px);
}

.site-footer .footer-container > div:not(.footer-brand) a,
.site-footer .footer-container > div:not(.footer-brand) p {
  font-size: .9rem;
  text-align: left;
}

@media (min-width: 421px) and (max-width: 640px) {
  .site-footer .footer-container {
    grid-template-columns: max-content max-content;
    grid-template-rows: auto auto auto;
    column-gap: clamp(24px, 8vw, 48px);
    row-gap: 24px;
    justify-content: space-between;
  }

  .site-footer .footer-container > .footer-brand {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: start;
    width: auto;
  }

  .site-footer .footer-container > .footer-quick-links {
    grid-column: 1;
    grid-row: 2;
  }

  .site-footer .footer-container > div:nth-child(3) {
    grid-column: 2;
    grid-row: 2;
  }

  .site-footer .footer-container > div:nth-child(4) {
    grid-column: 1 / -1;
    grid-row: 3;
    justify-self: start;
    width: auto;
  }
}

@media (max-width: 420px) {
  .site-footer .footer-container {
    grid-template-columns: max-content;
    grid-template-rows: repeat(4, auto);
    row-gap: 24px;
    justify-content: start;
  }

  .site-footer .footer-container > .footer-brand,
  .site-footer .footer-container > .footer-quick-links,
  .site-footer .footer-container > div:nth-child(3),
  .site-footer .footer-container > div:nth-child(4) {
    grid-column: 1;
    justify-self: start;
    width: auto;
  }

  .site-footer .footer-container > .footer-brand { grid-row: 1; }
  .site-footer .footer-container > .footer-quick-links { grid-row: 2; }
  .site-footer .footer-container > div:nth-child(3) { grid-row: 3; }
  .site-footer .footer-container > div:nth-child(4) { grid-row: 4; }
}

/* Match the homepage gold plate edge to the dimensional Meet Your Dietitian
   metal treatment while preserving this plate's rounded silhouette. */
.teaser-dashboard-stack {
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, .58) 0%,
      rgba(255, 244, 194, .22) 8%,
      rgba(255, 255, 255, 0) 20%,
      rgba(88, 57, 0, 0) 80%,
      rgba(88, 57, 0, .14) 92%,
      rgba(88, 57, 0, .32) 100%),
    var(--nc-frame-gold);
  box-shadow:
    inset 2px 0 2px rgba(255, 255, 255, .58),
    inset -2px 0 3px rgba(88, 57, 0, .28),
    inset 0 3px 3px rgba(255, 255, 255, .56),
    inset 0 -4px 5px rgba(88, 57, 0, .30),
    0 8px 10px rgba(0, 0, 0, .24),
    0 2px 4px rgba(0, 0, 0, .18);
}

/* Final stacked portrait sizing must follow the page rail. */
@media (max-width: 900px) {
  .about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-copy > .about-portrait-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto clamp(40px, 7vw, 64px) !important;
    padding: clamp(24px, 5vw, 40px) !important;
    box-sizing: border-box !important;
    border-radius: 8px !important;
  }

  .about-page .about-section--cream[aria-labelledby="meet-kathleen"] .about-portrait-card > .about-profile-frame {
    width: min(100%, 330px) !important;
    max-width: 330px !important;
  }
}

/* Mission and vision use the homepage hero-card gold frame and type rhythm. */
.about-page .about-purpose-block {
  border: var(--gold-card-border-width) solid transparent !important;
  border-radius: 8px !important;
  background:
    linear-gradient(rgba(255, 252, 245, .96), rgba(255, 252, 245, .96)) padding-box,
    linear-gradient(
      135deg,
      #F9E7A8 0%,
      #F6DC88 14%,
      #F1BE15 34%,
      #FFF0B5 45%,
      #F1BE15 55%,
      #CEA00C 78%,
      #9A6A08 100%
    ) border-box !important;
  box-shadow: var(--card-shadow) !important;
  text-align: left !important;
}

.about-page .about-purpose-block .about-kicker {
  margin: 0 0 14px !important;
  color: #D89000 !important;
  text-align: left !important;
}

.about-page .about-purpose-block h2 {
  max-width: none !important;
  margin: 0 !important;
  color: var(--deep-teal) !important;
  font-family: var(--display) !important;
  font-size: clamp(1.8rem, calc(1.45rem + 1.3vw), 3.2rem) !important;
  font-weight: 650 !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
}

.about-page .about-purpose-block > p:not(.about-kicker) {
  max-width: none !important;
  margin: 24px 0 0 !important;
  color: var(--ink) !important;
  font-family: var(--body) !important;
  font-size: var(--page-body-size) !important;
  font-weight: 450 !important;
  line-height: 1.68 !important;
  letter-spacing: .01em !important;
  text-align: left !important;
  text-indent: 0 !important;
}

/* Center each service divider on the image/copy boundary. */
.nutrition-services-page .service-detail-section {
  --service-image-line-width: 6px;
}

@media (min-width: 981px) {
  .nutrition-services-page .service-detail-section:not(.service-detail-section--reverse) .service-detail-visual::after {
    right: -3px;
  }

  .nutrition-services-page .service-detail-section--reverse .service-detail-visual::after {
    left: -3px;
  }
}

@media (max-width: 980px) {
  .nutrition-services-page .service-detail-visual::after,
  .nutrition-services-page .service-detail-section--reverse .service-detail-visual::after {
    bottom: -3px;
  }
}

/* Keep the enlarged service badges centered on the divider in both layouts. */
.nutrition-services-page .service-detail-section {
  --service-detail-badge-size: 86px;
}

.nutrition-services-page .service-detail-icon-badge {
  --service-detail-badge-size: 86px;
  width: var(--service-detail-badge-size);
  height: var(--service-detail-badge-size);
  border-width: 4px;
}

.nutrition-services-page .service-detail-icon-badge svg {
  width: 50px;
  height: 50px;
}

.nutrition-services-page .service-detail-icon-badge.consulting svg {
  width: 61px;
  height: 61px;
}

.nutrition-services-page .service-detail-icon-badge .utensils-icon {
  width: 54px;
  height: 54px;
}

@media (min-width: 981px) {
  .nutrition-services-page .service-detail-icon-badge,
  .nutrition-services-page .service-detail-section--reverse .service-detail-icon-badge {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
  }

  .nutrition-services-page .service-detail-icon-badge {
    right: calc(var(--service-detail-badge-size) / -2);
    left: auto;
  }

  .nutrition-services-page .service-detail-section--reverse .service-detail-icon-badge {
    right: auto;
    left: calc(var(--service-detail-badge-size) / -2);
  }

  .nutrition-services-page .service-detail-copy {
    padding-left: calc((var(--service-detail-badge-size) / 2) + 16px);
  }

  .nutrition-services-page .service-detail-section--reverse .service-detail-copy {
    padding-right: calc((var(--service-detail-badge-size) / 2) + 16px);
    padding-left: var(--site-card-padding);
  }
}

@media (max-width: 980px) {
  .nutrition-services-page .service-detail-icon-badge,
  .nutrition-services-page .service-detail-section--reverse .service-detail-icon-badge {
    top: auto;
    right: auto;
    bottom: calc(var(--service-detail-badge-size) / -2);
    left: 50%;
    transform: translateX(-50%);
  }

  .nutrition-services-page .service-detail-copy,
  .nutrition-services-page .service-detail-section--reverse .service-detail-copy {
    padding-top: calc((var(--service-detail-badge-size) / 2) + 16px);
  }
}

/* Final Nutrition Compass landing-page rhythm and icon-free hero. */
.nc-landing .nc-header-inner,
.nc-landing .nc-hero-inner,
.nc-landing .nc-section,
.nc-landing .nc-workspace {
  width: min(var(--content-max), calc(100% - var(--page-gutter) - var(--page-gutter)));
  max-width: var(--content-max);
  margin-inline: auto;
}

.nc-landing .nc-section,
.nc-landing .nc-workspace {
  padding-block: var(--subsection-heading-above);
}

.nc-landing .nc-section-heading {
  margin-bottom: var(--subsection-heading-below);
}

.nc-landing .nc-video-section {
  padding-top: var(--subsection-heading-above);
}

.nc-landing .nc-hero {
  min-height: clamp(560px, 58vw, 760px);
  aspect-ratio: auto;
  background: #FFF6E8;
}

.nc-landing .nc-hero-art {
  inset: 0;
  width: 100%;
  height: 100%;
  transform: none;
  object-fit: cover;
  object-position: center 55%;
}

.nc-landing .nc-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  background: linear-gradient(
    90deg,
    rgba(255, 250, 238, .98) 0%,
    rgba(255, 250, 238, .94) 35%,
    rgba(255, 250, 238, .70) 55%,
    rgba(255, 250, 238, .10) 78%,
    rgba(255, 250, 238, 0) 100%
  );
}

.nc-landing .nc-hero::after,
.nc-landing .nc-final-cta::after {
  content: none;
  background: none;
}

.nc-landing .nc-hero-inner {
  position: relative;
  z-index: 2;
  min-height: clamp(560px, 58vw, 760px);
  height: auto;
  padding-block: var(--subsection-heading-above);
  overflow: visible;
  clip: auto;
  white-space: normal;
  display: flex;
  align-items: center;
}

.nc-landing .nc-hero-copy {
  display: block;
  width: min(100%, 680px);
}

.nc-landing .nc-hero-copy::before {
  display: none;
}

.nc-landing .nc-final-cta {
  padding-block: var(--subsection-heading-above);
  padding-inline: var(--page-gutter);
}

@media (max-width: 700px) {
  .nc-landing .nc-header-inner,
  .nc-landing .nc-hero-inner,
  .nc-landing .nc-section,
  .nc-landing .nc-workspace {
    width: min(var(--content-max), calc(100% - 48px));
  }

  .nc-landing .nc-section,
  .nc-landing .nc-workspace,
  .nc-landing .nc-hero-inner,
  .nc-landing .nc-final-cta {
    padding-block: clamp(56px, 10vw, 72px);
  }

  .nc-landing .nc-hero,
  .nc-landing .nc-hero-inner {
    min-height: 650px;
  }

  .nc-landing .nc-hero-art {
    object-position: 60% center;
  }

  .nc-landing .nc-hero::before {
    background: linear-gradient(
      180deg,
      rgba(255, 250, 238, .98) 0%,
      rgba(255, 250, 238, .94) 60%,
      rgba(255, 250, 238, .54) 82%,
      rgba(255, 250, 238, .16) 100%
    );
  }
}

/* Approved Nutrition Compass hero and horizontal logo lockups. */
.nc-landing .nc-header-logo {
  display: block;
  width: clamp(250px, 20vw, 330px);
  height: auto;
  object-fit: contain;
}

.nc-landing .nc-hero {
  min-height: 0;
  aspect-ratio: auto;
  background: #031716;
}

.nc-landing .nc-hero-art {
  position: relative;
  inset: auto;
  display: block;
  width: 100%;
  height: auto;
  transform: none;
  object-fit: contain;
  object-position: center;
}

.nc-landing .nc-hero::before,
.nc-landing .nc-hero::after {
  content: none;
  display: none;
  background: none;
}

.nc-landing .nc-hero-inner {
  position: absolute;
  width: 1px;
  min-height: 0;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  display: block;
}

.nc-landing .nc-footer-logo-link {
  display: block;
  width: min(100%, 390px);
}

.nc-landing .nc-footer-logo {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.nc-landing .site-footer .footer-brand {
  align-content: start;
  transform: none;
}

.nc-landing .site-footer .footer-brand > p {
  margin-top: 12px;
}

@media (max-width: 700px) {
  .nc-landing .nc-header-logo {
    width: min(100%, 300px);
  }

  .nc-landing .nc-footer-logo-link {
    width: min(100%, 330px);
  }
}

/* Nutrition Compass long-form clinical content. */
.nc-landing .nc-content-section {
  padding-block: var(--subsection-heading-above);
  background: #FFFFFF;
}

.nc-landing .nc-content-section--tint {
  background: #F3F8F7;
}

.nc-landing .nc-content-inner {
  width: min(var(--content-max), calc(100% - var(--page-gutter) - var(--page-gutter)));
  max-width: var(--content-max);
  margin-inline: auto;
}

.nc-landing .nc-copy-rail {
  max-width: min(1040px, calc(100% - var(--page-gutter) - var(--page-gutter)));
}

.nc-landing .nc-content-heading {
  max-width: 1040px;
  margin-bottom: var(--subsection-heading-below);
}

.nc-landing .nc-content-kicker {
  margin: 0 0 14px;
  color: #D48A00;
  font-family: var(--display);
  font-size: .88rem;
  font-weight: 750;
  line-height: 1.25;
  letter-spacing: .12em;
}

.nc-landing .nc-content-section h2 {
  margin: 0;
  color: var(--deep-teal);
  font-family: var(--display);
  font-size: var(--section-heading-size);
  font-weight: 650;
  line-height: 1.14;
  letter-spacing: 0;
}

.nc-landing .nc-content-section h3 {
  color: var(--deep-teal);
  font-family: var(--display);
  font-size: clamp(1.05rem, calc(.98rem + .3vw), 1.35rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
}

.nc-landing .nc-content-section p,
.nc-landing .nc-content-section li,
.nc-landing .nc-content-section dd {
  font-size: clamp(1rem, calc(.96rem + .16vw), 1.15rem);
  line-height: 1.68;
}

.nc-landing .nc-content-intro p:not(.nc-content-kicker),
.nc-landing .nc-decision-section p,
.nc-landing .nc-closing-section p {
  margin: 24px 0 0;
}

.nc-landing .nc-process-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 28px);
}

.nc-landing .nc-process-grid article {
  padding: clamp(24px, 2.2vw, 34px);
  border: 1px solid rgba(30, 77, 74, .17);
  border-top: 4px solid var(--gold-dark);
  border-radius: 6px;
  background: #FFFFFF;
  box-shadow: 0 12px 24px rgba(30, 41, 40, .08);
}

.nc-landing .nc-process-grid article > span {
  display: block;
  margin-bottom: 18px;
  color: #D48A00;
  font-family: var(--display);
  font-size: .86rem;
  font-weight: 750;
}

.nc-landing .nc-process-grid h3,
.nc-landing .nc-process-grid p,
.nc-landing .nc-benefit-grid h3,
.nc-landing .nc-benefit-grid p,
.nc-landing .nc-value-grid h3,
.nc-landing .nc-value-grid p {
  margin: 0;
}

.nc-landing .nc-process-grid p,
.nc-landing .nc-benefit-grid p,
.nc-landing .nc-value-grid p {
  margin-top: 12px;
  font-size: .98rem;
}

.nc-landing .nc-tool-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(40px, 6vw, 90px);
  margin: 0;
}

.nc-landing .nc-tool-list > div {
  padding: 24px 0 26px;
  border-top: 2px solid rgba(206, 160, 12, .55);
}

.nc-landing .nc-tool-list dt {
  color: var(--deep-teal);
  font-family: var(--display);
  font-size: 1.08rem;
  font-weight: 750;
}

.nc-landing .nc-tool-list dd {
  margin: 8px 0 0;
}

.nc-landing .nc-content-section--teal {
  color: rgba(255, 255, 255, .94);
  background: var(--deep-teal);
}

.nc-landing .nc-content-section--teal h2,
.nc-landing .nc-content-section--teal h3 {
  color: #FFFFFF;
}

.nc-landing .nc-content-section--teal .nc-content-kicker {
  color: var(--gold-50);
}

.nc-landing .nc-picture-grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(48px, 7vw, 110px);
  align-items: start;
}

.nc-landing .nc-picture-grid p {
  margin: 0 0 18px;
}

.nc-landing .nc-picture-grid ul,
.nc-landing .nc-lifespan-grid ul {
  margin: 0;
  padding-left: 22px;
}

.nc-landing .nc-benefit-grid,
.nc-landing .nc-value-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 64px);
}

.nc-landing .nc-benefit-grid article,
.nc-landing .nc-value-grid article {
  padding-top: 24px;
  border-top: 3px solid var(--gold-dark);
}

.nc-landing .nc-lifespan-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 5vw, 72px);
}

.nc-landing .nc-lifespan-grid article {
  padding: clamp(28px, 3vw, 44px);
  border: 1px solid rgba(30, 77, 74, .15);
  border-radius: 6px;
  background: #FFFFFF;
}

.nc-landing .nc-lifespan-grid h3 {
  margin: 0 0 18px;
}

.nc-landing .nc-decision-section {
  text-align: left;
}

.nc-landing .nc-decision-statement {
  padding-left: 24px;
  border-left: 4px solid var(--gold-dark);
  color: var(--deep-teal);
  font-family: var(--display);
  font-size: clamp(1.2rem, calc(1.08rem + .55vw), 1.7rem) !important;
  font-weight: 650;
}

.nc-landing .nc-flow-list {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 28px;
  margin: var(--subsection-heading-below) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: nc-flow;
}

.nc-landing .nc-flow-list li {
  position: relative;
  min-height: 112px;
  padding: 48px 14px 16px;
  border: 1px solid rgba(246, 220, 136, .42);
  border-radius: 6px;
  text-align: center;
  background: rgba(255, 255, 255, .07);
  counter-increment: nc-flow;
}

.nc-landing .nc-flow-list li::before {
  content: counter(nc-flow, decimal-leading-zero);
  position: absolute;
  top: 14px;
  left: 50%;
  color: var(--gold-50);
  font-family: var(--display);
  font-size: .78rem;
  font-weight: 750;
  transform: translateX(-50%);
}

.nc-landing .nc-flow-list li:not(:last-child)::after {
  content: ">";
  position: absolute;
  top: 50%;
  right: -21px;
  color: var(--gold-50);
  font-size: 1.1rem;
  transform: translateY(-50%);
}

.nc-landing .nc-closing-section {
  background: #FFF6E8;
}

.nc-landing .nc-closing-section .nc-button {
  margin-top: 30px;
}

@media (max-width: 1200px) {
  .nc-landing .nc-process-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nc-landing .nc-process-grid article:last-child {
    grid-column: 1 / -1;
  }

  .nc-landing .nc-flow-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .nc-landing .nc-flow-list li:nth-child(4)::after {
    content: none;
  }
}

@media (max-width: 800px) {
  .nc-landing .nc-content-inner,
  .nc-landing .nc-copy-rail {
    width: min(var(--content-max), calc(100% - 48px));
    max-width: none;
  }

  .nc-landing .nc-content-section {
    padding-block: clamp(56px, 10vw, 72px);
  }

  .nc-landing .nc-process-grid,
  .nc-landing .nc-tool-list,
  .nc-landing .nc-picture-grid,
  .nc-landing .nc-benefit-grid,
  .nc-landing .nc-value-grid,
  .nc-landing .nc-lifespan-grid {
    grid-template-columns: 1fr;
  }

  .nc-landing .nc-process-grid article:last-child {
    grid-column: auto;
  }

  .nc-landing .nc-flow-list {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .nc-landing .nc-flow-list li {
    min-height: 0;
  }

  .nc-landing .nc-flow-list li:not(:last-child)::after,
  .nc-landing .nc-flow-list li:nth-child(4)::after {
    content: "v";
    top: auto;
    right: 50%;
    bottom: -25px;
    transform: translateX(50%);
  }
}

/* Minimal Nutrition Compass footer: PNS lockup, return link, and socials only. */
.nc-landing .nc-minimal-footer {
  padding-block: clamp(36px, 4vw, 58px);
}

.nc-landing .nc-minimal-footer .footer-container {
  display: block;
}

.nc-landing .nc-minimal-footer .footer-brand {
  display: flex;
  width: 100%;
  max-width: none;
  margin: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  text-align: center;
  transform: none;
}

.nc-landing .nc-pns-footer-logo {
  display: block;
  width: min(100%, 1080px);
  height: auto;
  object-fit: contain;
}

.nc-landing .nc-footer-back-link {
  margin-top: clamp(22px, 2.2vw, 32px);
  color: var(--gold-50);
  font-size: .95rem;
  font-weight: 700;
}

.nc-landing .nc-minimal-footer .footer-brand > .socials {
  display: flex;
  grid-column: auto;
  grid-row: auto;
  margin: 16px 0 0;
  align-self: center;
  justify-content: center;
}

@media (max-width: 700px) {
  .nc-landing .nc-pns-footer-logo {
    width: 100%;
  }
}

/* Balance the PNS footer lockup without letting it become a second hero. */
.nc-landing .nc-footer-lockup-group {
  width: 50%;
  max-width: 900px;
  align-self: flex-start;
}

.nc-landing .nc-footer-lockup-group .nc-pns-footer-logo {
  width: 100%;
}

.nc-landing .nc-footer-lockup-group > .socials {
  display: flex;
  width: 82%;
  margin: 16px 0 0 18%;
  align-self: auto;
  justify-content: center;
}

.nc-landing .nc-minimal-footer .footer-container > .nc-footer-top-link {
  display: flex;
  width: max-content;
  margin: 0 0 clamp(18px, 2vw, 28px) auto;
  align-items: center;
  color: rgba(255, 255, 255, .82);
  font-size: .82rem;
  font-weight: 550;
  text-align: center;
}

.nc-landing .nc-minimal-footer .nc-footer-top-link span {
  display: inline-block;
  margin-right: 5px;
  font-size: 1.15em;
  line-height: 1;
}

.nc-landing .nc-footer-lockup-group + .nc-footer-back-link {
  margin-top: clamp(26px, 2.8vw, 40px);
  color: var(--gold-50);
  font-size: .95rem;
  font-weight: 700;
  text-align: center;
}

@media (max-width: 700px) {
  .nc-landing .nc-footer-lockup-group {
    width: 100%;
    max-width: none;
  }
}

/* Keep the minimal footer compact rather than applying section-scale spacing. */
.nc-landing .nc-minimal-footer {
  padding-block: 24px;
}

.nc-landing .nc-minimal-footer .footer-container {
  position: relative;
}

.nc-landing .nc-minimal-footer .footer-container > .nc-footer-top-link {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
}

.nc-landing .nc-footer-lockup-group > .socials {
  margin-top: 8px;
}

.nc-landing .nc-footer-lockup-group + .nc-footer-back-link {
  margin-top: 14px;
}

@media (max-width: 700px) {
  .nc-landing .nc-minimal-footer {
    padding-block: 20px;
  }
}

/* Optically align the asymmetric PNS mark and anchor socials to the wordmark. */
.nc-landing .nc-footer-lockup-group {
  width: min(100%, clamp(0px, calc(16.536vw + 436.93px), 701.5px));
  max-width: none;
  transform: translateX(-8px);
}

.nc-landing .nc-footer-lockup-group > .socials {
  width: auto;
  gap: 14px;
  margin: calc(12px - 1.121%) 0 0 19.215%;
  justify-content: flex-start;
}

.nc-landing .nc-footer-lockup-group > .socials a {
  width: 30px;
  height: 30px;
}

.nc-landing .nc-minimal-footer {
  overflow-x: hidden;
}

/* Fill the lockup width with visible artwork at every point on the scale. */
.nc-landing .nc-footer-lockup-group .nc-pns-footer-logo {
  width: calc(100.807% + 8.065px);
  max-width: none;
}

.nc-landing .nc-footer-lockup-group > .socials {
  margin-top: calc(-12.09px - 1.13%);
  margin-left: calc(19.371% + 1.55px);
}

/* Keep Nutrition Compass on the same layout and type system as the main site. */
.nc-landing {
  --page-body-size: clamp(1.1rem, calc(1.0755rem + 0.1091vw), 1.25rem);
  --page-body-leading: 1.75;
  --page-card-title-size: clamp(1.75rem, calc(1.5864rem + 0.7273vw), 2.75rem);
  font-family: var(--body);
  font-size: var(--page-body-size);
  font-weight: 450;
  line-height: var(--page-body-leading);
  letter-spacing: .01em;
}

.nc-landing .nc-header-inner,
.nc-landing .nc-content-inner,
.nc-landing .nc-copy-rail {
  width: min(var(--content-max), calc(100% - var(--page-gutter) - var(--page-gutter)));
  max-width: var(--content-max);
  margin-inline: auto;
}

.nc-landing .nc-copy-rail > h2,
.nc-landing .nc-copy-rail > p {
  max-width: 1180px;
}

.nc-landing .nc-header-inner {
  min-height: var(--header-rail);
}

.nc-landing .nc-nav {
  gap: var(--nav-link-gap);
  font-family: var(--display);
  font-size: var(--nav-link-size);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.nc-landing .nc-button {
  min-height: 54px;
  padding: 0 34px;
  border-radius: 999px;
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .01em;
}

.nc-landing .nc-content-section {
  padding-block: var(--subsection-heading-above);
}

.nc-landing .nc-content-section .nc-content-kicker {
  margin-bottom: 14px;
  font-family: var(--display);
  font-size: .86rem;
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.nc-landing .nc-content-section h2 {
  font-family: var(--display);
  font-size: var(--page-card-title-size);
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: .0125em;
}

.nc-landing .nc-content-section h3,
.nc-landing .nc-tool-list dt {
  font-family: var(--display);
  font-size: clamp(1.25rem, calc(1.1682rem + 0.3636vw), 1.75rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .01em;
}

.nc-landing .nc-content-section p:not(.nc-content-kicker),
.nc-landing .nc-content-section li,
.nc-landing .nc-content-section dd,
.nc-landing .nc-process-grid p,
.nc-landing .nc-benefit-grid p,
.nc-landing .nc-value-grid p {
  font-family: var(--body);
  font-size: var(--page-body-size);
  font-weight: 450;
  line-height: var(--page-body-leading);
  letter-spacing: .01em;
}

@media (max-width: 700px) {
  .nc-landing .nc-header-inner,
  .nc-landing .nc-content-inner,
  .nc-landing .nc-copy-rail {
    width: min(var(--content-max), calc(100% - 48px));
  }
}

/* Nutrition Compass header: proportional logo lockup with page navigation below. */
.nc-landing .nc-header {
  position: relative;
  top: auto;
}

.nc-landing .nc-header-inner {
  display: flex;
  min-height: 0;
  padding-block: clamp(20px, calc(16.727px + .9091vw), 40px);
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(14px, calc(12.691px + .3636vw), 22px);
}

.nc-landing .nc-logo-lockup {
  display: block;
  width: min(100%, clamp(0px, calc(100vw - 48px), 540px));
}

.nc-landing .nc-logo-lockup .nc-header-logo {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
}

.nc-landing .nc-nav {
  width: 100%;
  justify-content: flex-start;
  column-gap: var(--nav-link-gap);
  row-gap: 8px;
  flex-wrap: wrap;
}

.nc-landing .nc-nav a {
  padding-block: 3px;
  white-space: nowrap;
}

.nc-landing .nc-content-section[id] {
  scroll-margin-top: 0;
}

/* Desktop section navigation echoes the main site's gold-dot rhythm. */
.nc-landing .nc-nav-toggle,
.nc-landing .nc-nav-toggle-label {
  display: none;
}

.nc-landing .nc-nav a {
  position: relative;
  color: var(--deep-teal);
  transition: color .18s ease;
}

.nc-landing .nc-nav a::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: -4px;
  left: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .18s ease;
}

.nc-landing .nc-nav a:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(var(--nav-link-gap) / -2 - 2px);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  transform: translate(50%, -50%);
}

.nc-landing .nc-nav a:hover,
.nc-landing .nc-nav a:focus-visible {
  color: var(--gold-dark);
  outline: none;
}

.nc-landing .nc-nav a:hover::before,
.nc-landing .nc-nav a:focus-visible::before {
  transform: scaleX(1);
}

@media (max-width: 899px) {
  .nc-landing .nc-nav-toggle {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }

  .nc-landing .nc-nav-toggle-label {
    display: grid;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 10px 7px;
    place-content: center;
    gap: 5px;
    color: var(--deep-teal);
    cursor: pointer;
  }

  .nc-landing .nc-nav-toggle-label span {
    display: block;
    width: 30px;
    height: 3px;
    border-radius: 999px;
    background: var(--gold-dark);
    transition: transform .18s ease, opacity .18s ease;
  }

  .nc-landing .nc-nav {
    display: none;
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
    border-top: 1px solid rgba(206, 160, 12, .45);
    border-bottom: 1px solid rgba(30, 77, 74, .12);
  }

  .nc-landing .nc-nav-toggle:checked ~ .nc-nav {
    display: grid;
  }

  .nc-landing .nc-nav-toggle:checked + .nc-nav-toggle-label span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .nc-landing .nc-nav-toggle:checked + .nc-nav-toggle-label span:nth-child(2) {
    opacity: 0;
  }

  .nc-landing .nc-nav-toggle:checked + .nc-nav-toggle-label span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  .nc-landing .nc-nav a {
    width: 100%;
    padding: 11px 12px;
    text-align: left;
  }

  .nc-landing .nc-nav a + a {
    border-top: 1px solid rgba(30, 77, 74, .1);
  }

  .nc-landing .nc-nav a::before,
  .nc-landing .nc-nav a::after,
  .nc-landing .nc-nav a:not(:last-child)::after {
    content: none;
  }

  .nc-landing .nc-nav a:hover,
  .nc-landing .nc-nav a:focus-visible {
    color: var(--gold-dark);
    background: var(--aqua-50);
  }
}

/* Final Compass desktop-nav spacing and fixed-weight hover underline. */
@media (min-width: 900px) {
  .nc-landing .nc-nav {
    --nc-section-nav-gap: clamp(30px, 3vw, 56px);
    width: auto;
    margin-inline: auto;
    column-gap: var(--nc-section-nav-gap);
  }

  .nc-landing .nc-nav a {
    transition: none;
  }

  .nc-landing .nc-nav a:not(:last-child)::after {
    right: calc(var(--nc-section-nav-gap) / -2 - 2px);
    pointer-events: none;
  }

  .nc-landing .nc-nav a::before {
    opacity: 0;
    transform: none;
    transition: none;
    pointer-events: none;
  }

  .nc-landing .nc-nav a:hover::before,
  .nc-landing .nc-nav a:focus-visible::before {
    opacity: 1;
    transform: none;
  }
}

/* Regular Persephone footer interactions match the Compass footer language. */
.site-footer:not(.nc-minimal-footer) .footer-quick-links a,
.site-footer:not(.nc-minimal-footer) .footer-container > div:nth-child(3) a,
.site-footer:not(.nc-minimal-footer) .footer-contact-email,
.site-footer:not(.nc-minimal-footer) .socials a {
  color: rgba(255, 255, 255, .9);
  transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}

.site-footer:not(.nc-minimal-footer) .footer-quick-links a:hover,
.site-footer:not(.nc-minimal-footer) .footer-quick-links a:focus-visible,
.site-footer:not(.nc-minimal-footer) .footer-container > div:nth-child(3) a:hover,
.site-footer:not(.nc-minimal-footer) .footer-container > div:nth-child(3) a:focus-visible,
.site-footer:not(.nc-minimal-footer) .footer-contact-email:hover,
.site-footer:not(.nc-minimal-footer) .footer-contact-email:focus-visible,
.site-footer:not(.nc-minimal-footer) .socials a:hover,
.site-footer:not(.nc-minimal-footer) .socials a:focus-visible {
  color: #F6DC88;
}

.site-footer:not(.nc-minimal-footer) .socials a:hover,
.site-footer:not(.nc-minimal-footer) .socials a:focus-visible {
  border-color: #F6DC88;
  background: rgba(246, 220, 136, .08);
}

/* Keep contact details readable before moving the card beneath the form. */
.contact-page .contact-panel-wrap {
  grid-template-columns: minmax(0, 1.4fr) minmax(440px, .8fr);
}

.contact-page .contact-info-label {
  display: block;
  margin-bottom: 8px;
  color: var(--gold-dark);
  font-family: var(--display);
  font-size: .86rem;
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.contact-page .contact-info-line {
  display: block;
}

@media (min-width: 701px) {
  .contact-page .contact-info-list a,
  .contact-page .contact-info-line {
    white-space: nowrap;
  }
}

@media (max-width: 1100px) {
  .contact-page .contact-panel-wrap {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Center the mobile menu and let it overlay the hero without changing page flow. */
@media (max-width: 899px) {
  .nc-landing .nc-header-inner {
    position: static;
    padding: 12px 0 8px;
    gap: 6px;
  }

  .nc-landing .nc-nav-toggle-label {
    height: 40px;
    padding-block: 8px;
    margin-inline: auto;
  }

  .nc-landing .nc-nav {
    position: absolute;
    z-index: 30;
    top: 100%;
    left: 0;
    width: 100%;
    margin: 0;
    row-gap: 0;
    background: #FFFFFF;
    box-shadow: 0 18px 30px rgba(30, 41, 40, .18);
    transform: none;
  }

  .nc-landing .nc-nav a {
    display: flex;
    min-height: 0;
    padding: 8px 24px;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
}

/* Match the main site's tighter section rhythm across the Compass page. */
.nc-landing .nc-content-section {
  padding-block: clamp(48px, 5vw, 72px);
}

/* Keep Nutrition Compass surfaces within its white-and-teal brand palette. */
.nc-landing .nc-main {
  background: #FFFFFF;
}

.nc-landing .nc-hero {
  background: var(--deep-teal);
}

.nc-landing .nc-closing-section {
  background: #F3F8F7;
}

/* The revised Nutrition Care Process contains four balanced steps. */
.nc-landing .nc-process-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1200px) {
  .nc-landing .nc-process-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nc-landing .nc-process-grid article:last-child {
    grid-column: auto;
  }
}

@media (max-width: 800px) {
  .nc-landing .nc-process-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.nc-landing .nc-process-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
}

.nc-landing .nc-process-grid .nc-process-title > span {
  display: inline;
  flex: 0 0 auto;
  margin: 0;
}

.nc-landing .nc-process-grid .nc-process-title > h3 {
  min-width: 0;
  font-size: clamp(1rem, calc(.945rem + .244vw), 1.2rem);
  white-space: nowrap;
}

/* Nutrition Compass section palette: warm golds and green-leaning teals only. */
.nc-landing .nc-content-section--tint {
  background: #EDF6F4;
}

.nc-landing .nc-closing-section {
  background: #D7ECE8;
}

.nc-landing .nc-content-kicker,
.nc-landing .nc-process-grid article > span,
.nc-landing .nc-process-grid .nc-process-title > span {
  color: #CEA00C;
}

.nc-landing .nc-content-section--teal {
  background: #1E4D4A;
}

.nc-landing .nc-content-section--teal .nc-content-kicker {
  color: #F6DC88;
}

/* Give the data-transparency list a clean hanging-bullet rhythm. */
.nc-landing .nc-picture-grid ul {
  display: grid;
  gap: 12px;
  padding-left: 24px;
  list-style: none;
}

.nc-landing .nc-picture-grid li {
  position: relative;
  padding-left: 28px;
}

.nc-landing .nc-picture-grid li::before {
  content: "";
  position: absolute;
  top: .84em;
  left: 2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #F6DC88;
  transform: translateY(-50%);
}

/* Pricing remains tabular on wide screens and becomes labeled plan cards on tablets and mobile. */
.nc-landing .nc-pricing-table {
  width: 100%;
  margin-top: var(--subsection-heading-below);
  overflow: hidden;
  border: 1px solid #C9DDD8;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 6px;
  color: var(--ink);
  background: #FFFFFF;
}

.nc-landing .nc-pricing-table th,
.nc-landing .nc-pricing-table td {
  padding: 18px 20px;
  text-align: left;
  vertical-align: top;
}

.nc-landing .nc-pricing-table thead th {
  color: #FFFFFF;
  font-family: var(--display);
  font-size: .86rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: #1E4D4A;
}

.nc-landing .nc-pricing-table tbody th,
.nc-landing .nc-pricing-table tbody td {
  border-top: 1px solid #C9DDD8;
}

.nc-landing .nc-pricing-table tbody tr:first-child > * {
  border-top: 0;
}

.nc-landing .nc-pricing-table tbody tr:nth-child(even) > * {
  background: #F7FBFA;
}

.nc-landing .nc-pricing-table tbody th {
  color: #1E4D4A;
  font-family: var(--display);
  font-weight: 700;
}

.nc-landing .nc-pricing-table td:nth-child(3),
.nc-landing .nc-pricing-table td:nth-child(4) {
  white-space: nowrap;
}

.nc-landing .nc-pricing-table td strong {
  color: #1E4D4A;
}

.nc-landing .nc-pricing-discount {
  margin-left: 6px;
  color: #F6DC88;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}

.nc-landing .nc-pricing-period {
  color: var(--ink);
  font-weight: 450;
  white-space: nowrap;
}

.nc-landing .nc-pricing-value {
  display: inline-flex;
  min-width: max-content;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .nc-landing .nc-pricing-table,
  .nc-landing .nc-pricing-table tbody,
  .nc-landing .nc-pricing-table tr,
  .nc-landing .nc-pricing-table th,
  .nc-landing .nc-pricing-table td {
    display: block;
    width: 100%;
  }

  .nc-landing .nc-pricing-table {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .nc-landing .nc-pricing-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .nc-landing .nc-pricing-table tbody {
    display: grid;
    gap: 16px;
  }

  .nc-landing .nc-pricing-table tbody tr {
    overflow: hidden;
    border: 1px solid #C9DDD8;
    border-top: 4px solid #CEA00C;
    border-radius: 6px;
    background: #FFFFFF;
  }

  .nc-landing .nc-pricing-table tbody th,
  .nc-landing .nc-pricing-table tbody td,
  .nc-landing .nc-pricing-table tbody tr:first-child > * {
    display: grid;
    grid-template-columns: clamp(112px, 20vw, 144px) minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    padding: 11px 16px;
    border-top: 1px solid #D7ECE8;
    background: #FFFFFF;
    white-space: normal;
  }

  .nc-landing .nc-pricing-table tbody th:first-child {
    border-top: 0;
  }

  .nc-landing .nc-pricing-table .nc-pricing-value {
    grid-column: 2;
    display: inline-flex;
    width: max-content;
    max-width: none;
    flex-wrap: nowrap;
  }

  .nc-landing .nc-pricing-table tbody th::before,
  .nc-landing .nc-pricing-table tbody td::before {
    content: attr(data-label);
    color: #3F7D79;
    font-family: var(--display);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
  }

  .nc-landing .nc-pricing-table tbody td:nth-child(4)::before {
    content: "Annual\A*10% off";
    line-height: 1.45;
    white-space: pre-line;
  }
}

/* Give the final invitation its own warm finish and responsive, tactile actions. */
.nc-landing .nc-closing-section {
  background: #F6DC88;
}

.nc-landing .nc-closing-section .nc-content-kicker {
  margin-top: 0;
  color: #D48A00;
}

.nc-landing .nc-closing-section h2 {
  color: #0F8F96;
}

.nc-landing .nc-closing-section .nc-cta-card {
  width: 100%;
  margin-top: clamp(28px, 3vw, 40px);
  padding: clamp(24px, 4vw, 48px);
  border: 1px solid rgba(206, 160, 12, .48);
  border-top: 5px solid #CEA00C;
  border-radius: 6px;
  background: #FFFFFF;
  box-shadow: 0 18px 42px rgba(88, 57, 0, .14);
}

.nc-landing .nc-closing-section .nc-cta-card > p:first-child {
  margin-top: 0;
}

.nc-landing .nc-closing-section .nc-cta-card .nc-cta-ready {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid #D7ECE8;
  scroll-margin-top: 8px;
}

.nc-landing .nc-closing-section .nc-cta-actions .nc-button {
  position: relative;
  gap: 10px;
  min-width: 190px;
  min-height: 48px;
  padding-inline: 24px;
  overflow: hidden;
  border-width: 1px;
  border-radius: 7px;
  font-family: var(--body);
  font-size: .92rem;
  letter-spacing: 0;
  transition: transform .18s ease, background-color .18s ease,
    color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.nc-landing .nc-closing-section .nc-cta-actions .nc-button-gold {
  color: #FFFFFF;
  border-color: #3F7D79;
  background: #3F7D79;
  box-shadow: 0 3px 8px rgba(38, 71, 68, .18);
}

.nc-landing .nc-closing-section .nc-cta-actions .nc-button-outline {
  color: #FFFFFF;
  border-color: #CEA00C;
  background: #CEA00C;
  text-shadow: 0 1px 2px rgba(88, 57, 0, .55);
  box-shadow: 0 3px 8px rgba(88, 57, 0, .18);
}

.nc-landing .nc-closing-section .nc-button-arrow {
  font-size: 1.2em;
  line-height: 1;
  transition: transform .18s ease;
}

.nc-landing .nc-closing-section .nc-cta-actions .nc-button:hover,
.nc-landing .nc-closing-section .nc-cta-actions .nc-button:focus-visible {
  transform: translateY(-2px);
}

.nc-landing .nc-closing-section .nc-cta-actions .nc-button:hover .nc-button-arrow,
.nc-landing .nc-closing-section .nc-cta-actions .nc-button:focus-visible .nc-button-arrow {
  transform: translateX(3px);
}

.nc-landing .nc-closing-section .nc-cta-actions .nc-button-gold:hover,
.nc-landing .nc-closing-section .nc-cta-actions .nc-button-gold:focus-visible {
  color: #FFFFFF;
  border-color: #0F8F96;
  background: #0F8F96;
  box-shadow: 0 7px 18px rgba(15, 143, 150, .24);
}

.nc-landing .nc-closing-section .nc-cta-actions .nc-button-outline:hover,
.nc-landing .nc-closing-section .nc-cta-actions .nc-button-outline:focus-visible {
  color: #FFFFFF;
  border-color: #CEA00C;
  background: #F1BE15;
  box-shadow: 0 7px 18px rgba(88, 57, 0, .24);
}

.nc-landing .nc-closing-section .nc-cta-actions .nc-button:focus-visible {
  outline: 3px solid #0F8F96;
  outline-offset: 3px;
}

.nc-landing .nc-closing-section .nc-cta-actions .nc-button:active {
  transform: translateY(0);
}

@media (max-width: 520px) {
  .nc-landing .nc-closing-section .nc-cta-actions {
    display: grid;
  }

  .nc-landing .nc-closing-section .nc-cta-actions .nc-button {
    width: 100%;
  }
}

/* Footer links stay neutral at rest; gold is reserved for interaction feedback. */
.nc-landing .nc-minimal-footer .nc-footer-contact h2,
.nc-landing .nc-minimal-footer .nc-footer-contact a,
.nc-landing .nc-minimal-footer .nc-footer-contact address,
.nc-landing .nc-minimal-footer .nc-footer-utility .nc-footer-back-link,
.nc-landing .nc-minimal-footer .nc-footer-utility .nc-footer-top-link,
.nc-landing .nc-minimal-footer .nc-footer-lockup-group > .socials a {
  color: #FFFFFF;
}

.nc-landing .nc-minimal-footer .nc-footer-contact {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-end;
  justify-self: stretch;
  text-align: right;
}

@media (max-width: 1000px) {
  .nc-landing .nc-minimal-footer .footer-brand {
    padding-right: 0;
  }
}

.nc-landing .nc-minimal-footer .nc-footer-contact h2,
.nc-landing .nc-minimal-footer .nc-footer-contact a,
.nc-landing .nc-minimal-footer .nc-footer-contact address {
  width: fit-content;
  max-width: 100%;
  text-align: right;
}

.nc-landing .nc-minimal-footer .nc-footer-contact a,
.nc-landing .nc-minimal-footer .nc-footer-utility a,
.nc-landing .nc-minimal-footer .nc-footer-lockup-group > .socials a {
  transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}

.nc-landing .nc-minimal-footer .nc-footer-contact a:hover,
.nc-landing .nc-minimal-footer .nc-footer-contact a:focus-visible,
.nc-landing .nc-minimal-footer .nc-footer-utility a:hover,
.nc-landing .nc-minimal-footer .nc-footer-utility a:focus-visible,
.nc-landing .nc-minimal-footer .nc-footer-lockup-group > .socials a:hover,
.nc-landing .nc-minimal-footer .nc-footer-lockup-group > .socials a:focus-visible {
  color: #F6DC88;
}

.nc-landing .nc-minimal-footer .nc-footer-lockup-group > .socials a:hover,
.nc-landing .nc-minimal-footer .nc-footer-lockup-group > .socials a:focus-visible {
  border-color: #F6DC88;
  background: rgba(246, 220, 136, .08);
}

/* Contact is a page-level hero title, not body introduction copy. */
.contact-page .contact-page-intro {
  color: #CEA00C;
  font-family: var(--brand);
  font-size: clamp(2.5rem, calc(2rem + 2.2vw), 4rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: .02em;
  text-align: center;
  text-align-last: center;
}

/* Bring the inquiry pulldown into the Persephone form palette. */
.contact-page .contact-form select {
  border-color: #99CFC2;
  background-color: #FFFFFF;
  color: #1E4D4A;
  accent-color: #3F7D79;
}

.contact-page .contact-form select:hover {
  border-color: #3F7D79;
}

.contact-page .contact-form select:focus {
  border-color: #CEA00C;
  outline-color: #F1BE15;
}

.contact-page .contact-form select option {
  background: #FFFFFF;
  color: #1E4D4A;
  font-weight: 450;
}

.contact-page .contact-form select option:checked {
  background: #3F7D79 linear-gradient(0deg, #3F7D79 0%, #3F7D79 100%);
  color: #FFFFFF;
}

.contact-page .contact-form select option:hover,
.contact-page .contact-form select option:focus {
  background: #F6DC88 linear-gradient(0deg, #F6DC88 0%, #F6DC88 100%);
  color: #1E4D4A;
}

/* Custom inquiry pulldown mirrors the collapsed site navigation. */
.contact-page .contact-select {
  position: relative;
}

.contact-page .contact-select-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 52px;
  box-sizing: border-box;
  padding: 13px 14px;
  border: 1px solid #99CFC2;
  border-radius: 8px;
  background: #FFFFFF;
  color: #1E4D4A;
  font: 500 1rem/1.4 var(--body);
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 1px 2px rgba(30, 41, 40, .08);
}

.contact-page .contact-select-button:hover {
  border-color: #3F7D79;
}

.contact-page .contact-select-button:focus-visible,
.contact-page .contact-select-button[aria-expanded="true"] {
  border-color: #CEA00C;
  outline: 2px solid #F1BE15;
  outline-offset: 2px;
}

.contact-page .contact-select-button[aria-invalid="true"] {
  border-color: #CEA00C;
}

.contact-page .contact-select-chevron {
  flex: 0 0 auto;
  color: #1E4D4A;
  font-size: 1.1rem;
  line-height: 1;
  transition: transform .18s ease;
}

.contact-page .contact-select-button[aria-expanded="true"] .contact-select-chevron {
  transform: rotate(180deg);
}

.contact-page .contact-select-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  width: 100%;
  box-sizing: border-box;
  padding: 8px;
  border: 1px solid rgba(30, 77, 74, .18);
  border-radius: 12px;
  background: #FFFFFF;
  box-shadow: 0 14px 30px rgba(30, 41, 40, .16);
}

.contact-page .contact-select-list[hidden] {
  display: none;
}

.contact-page .contact-select-list [role="option"] {
  position: relative;
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px 10px 26px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #1E4D4A;
  font: 550 1rem/1.4 var(--body);
  text-align: left;
  cursor: pointer;
}

.contact-page .contact-select-list [role="option"]:hover,
.contact-page .contact-select-list [role="option"]:focus-visible {
  outline: 0;
  background: #EDF6F4;
  color: #F1BE15;
}

.contact-page .contact-select-list [role="option"][aria-selected="true"]::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 8px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, #F6DC88 0%, #F1BE15 42%, #CEA00C 100%);
  box-shadow: 0 0 5px rgba(241, 190, 21, .28);
}

.contact-page .contact-select-error {
  margin: -4px 0 0;
  color: #583900;
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.4;
}

/* Final CTA uses the established dark-teal section palette. */
.nc-landing .nc-closing-section {
  background: #1E4D4A;
}

.nc-landing .nc-closing-section .nc-content-kicker {
  color: #F6DC88;
}

.nc-landing .nc-closing-section h2 {
  color: #FFFFFF;
}

/* Mobile header utility row: menu under the mark, focused CTA at the right. */
.nc-landing .nc-mobile-header-utility,
.nc-landing .nc-header-trial-link {
  display: none;
}

@media (max-width: 899px) {
  .nc-landing .nc-mobile-header-utility {
    display: grid;
    width: 100%;
    grid-template-columns: clamp(44px, 16.7%, 90px) minmax(0, 1fr);
    gap: 16px;
    align-items: center;
  }

  .nc-landing .nc-mobile-header-utility .nc-nav-toggle-label {
    display: grid;
    margin: 0;
    justify-self: center;
  }

  .nc-landing .nc-header-trial-link {
    display: inline-flex;
    min-height: 40px;
    padding: 9px clamp(13px, 2.5vw, 20px);
    border: 1px solid #CEA00C;
    border-radius: 6px;
    justify-self: end;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    background: #CEA00C;
    box-shadow: 0 5px 12px rgba(88, 57, 0, .15);
    font-family: var(--display);
    font-size: clamp(.72rem, calc(.68rem + .18vw), .82rem);
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    transition: color .18s ease, background-color .18s ease,
      border-color .18s ease, box-shadow .18s ease, transform .18s ease;
  }

  .nc-landing .nc-header-trial-link:hover,
  .nc-landing .nc-header-trial-link:focus-visible {
    color: #FFFFFF;
    border-color: #F1BE15;
    background: #F1BE15;
    box-shadow: 0 8px 18px rgba(88, 57, 0, .2);
    transform: translateY(-1px);
  }

  .nc-landing .nc-header-trial-link:focus-visible {
    outline: 2px solid #0F8F96;
    outline-offset: 3px;
  }

  .nc-landing .nc-nav-toggle:checked ~ .nc-mobile-header-utility .nc-nav-toggle-label span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .nc-landing .nc-nav-toggle:checked ~ .nc-mobile-header-utility .nc-nav-toggle-label span:nth-child(2) {
    opacity: 0;
  }

  .nc-landing .nc-nav-toggle:checked ~ .nc-mobile-header-utility .nc-nav-toggle-label span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nc-landing .nc-header-trial-link {
    transition: none;
  }
}

@media (min-width: 900px) {
  .nc-landing .nc-header-inner {
    position: relative;
  }

  .nc-landing .nc-mobile-header-utility {
    position: absolute;
    top: calc(clamp(20px, calc(16.727px + .9091vw), 40px) + 23px);
    right: 0;
    display: block;
  }

  .nc-landing .nc-mobile-header-utility .nc-nav-toggle-label {
    display: none;
  }

  .nc-landing .nc-header-trial-link {
    display: inline-flex;
    min-height: 44px;
    padding: 10px 20px;
    border: 1px solid #CEA00C;
    border-radius: 6px;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    background: #CEA00C;
    box-shadow: 0 5px 12px rgba(88, 57, 0, .15);
    font-family: var(--display);
    font-size: .82rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    transition: color .18s ease, background-color .18s ease,
      border-color .18s ease, box-shadow .18s ease, transform .18s ease;
  }

  .nc-landing .nc-header-trial-link:hover,
  .nc-landing .nc-header-trial-link:focus-visible {
    color: #FFFFFF;
    border-color: #F1BE15;
    background: #F1BE15;
    box-shadow: 0 8px 18px rgba(88, 57, 0, .2);
    transform: translateY(-1px);
  }

  .nc-landing .nc-header-trial-link:focus-visible {
    outline: 2px solid #0F8F96;
    outline-offset: 3px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nc-landing .nc-closing-section .nc-cta-actions .nc-button {
    transition: none;
  }
}

/* FAQ: one compact clinical accordion, closed by default. */
.nc-landing .nc-faq-section {
  background: #EDF6F4;
}

.nc-landing .nc-faq-toggle-all {
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  cursor: pointer;
  transition: color .18s ease;
}

.nc-landing .nc-faq-toggle-all:hover,
.nc-landing .nc-faq-toggle-all:focus-visible {
  color: #0F8F96;
}

.nc-landing .nc-faq-toggle-all:focus-visible {
  outline: 2px solid #0F8F96;
  outline-offset: 5px;
}

.nc-landing .nc-faq-list {
  border-top: 1px solid #99CFC2;
}

.nc-landing .nc-faq-list details {
  border-bottom: 1px solid #C9DDD8;
}

.nc-landing .nc-faq-list summary {
  display: grid;
  min-height: 64px;
  padding: 16px 0;
  grid-template-columns: minmax(0, 1fr) 32px;
  gap: 20px;
  align-items: center;
  color: #1E4D4A;
  font-family: var(--body);
  font-size: clamp(1rem, calc(.975rem + .11vw), 1.12rem);
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}

.nc-landing .nc-faq-list summary::-webkit-details-marker {
  display: none;
}

.nc-landing .nc-faq-list summary::after {
  content: "+";
  display: grid;
  width: 28px;
  height: 28px;
  border: 1px solid #99CFC2;
  border-radius: 50%;
  place-items: center;
  color: #0F8F96;
  background: #FFFFFF;
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1;
  transition: color .18s ease, background-color .18s ease,
    border-color .18s ease, transform .18s ease;
}

.nc-landing .nc-faq-list details[open] summary {
  color: #D48A00;
}

.nc-landing .nc-faq-list details[open] summary::after {
  color: #FFFFFF;
  border-color: #0F8F96;
  background: #0F8F96;
}

.nc-landing .nc-faq-list summary:hover,
.nc-landing .nc-faq-list summary:focus-visible {
  color: #D48A00;
}

.nc-landing .nc-faq-list summary:hover::after,
.nc-landing .nc-faq-list summary:focus-visible::after {
  color: #FFFFFF;
  border-color: #0F8F96;
  background: #0F8F96;
}

.nc-landing .nc-faq-list summary:focus-visible {
  outline: 2px solid #D48A00;
  outline-offset: 4px;
}

.nc-landing .nc-faq-list details[open] summary::after {
  content: "\2212";
  transform: rotate(180deg);
}

.nc-landing .nc-faq-answer {
  max-width: 1080px;
  padding: 0 52px 24px 0;
  color: var(--ink);
}

.nc-landing .nc-faq-answer p {
  margin: 0;
}

.nc-landing .nc-faq-answer p + p,
.nc-landing .nc-faq-answer ul + p {
  margin-top: 14px;
}

.nc-landing .nc-faq-answer a {
  color: #0F8F96;
  font-weight: 650;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.nc-landing .nc-faq-answer ul {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding-left: 24px;
}

.nc-landing .nc-closing-section p.nc-cta-reassurance {
  margin-top: 20px;
  color: #637270;
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.5;
}

.nc-landing .nc-cta-reassurance span {
  margin-inline: 7px;
  color: #CEA00C;
}

.nc-landing .nc-closing-section p.nc-cta-reassurance {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: baseline;
  gap: 0;
}

.nc-landing .nc-cta-reassurance .nc-cta-reassurance-item {
  margin: 0;
  color: #637270;
  white-space: nowrap;
}

.nc-landing .nc-cta-reassurance .nc-cta-reassurance-item + .nc-cta-reassurance-item::before {
  content: "\00B7";
  margin-inline: 12px;
  color: #CEA00C;
}

@media (max-width: 640px) {
  .nc-landing .nc-closing-section p.nc-cta-reassurance {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
    row-gap: 5px;
  }

  .nc-landing .nc-cta-reassurance .nc-cta-reassurance-item:last-child {
    grid-column: 1 / -1;
    justify-self: center;
  }

  .nc-landing .nc-cta-reassurance .nc-cta-reassurance-item:last-child::before {
    content: none;
  }
}

/* Add the main-site contact details without turning the Compass footer into a sitemap. */
.nc-landing .nc-minimal-footer .footer-brand {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  grid-template-rows: auto auto;
  column-gap: clamp(36px, 5vw, 72px);
  row-gap: 14px;
  align-items: end;
  justify-content: stretch;
  text-align: left;
}

.nc-landing .nc-minimal-footer .nc-footer-lockup-group {
  grid-column: 1;
  grid-row: 1;
}

.nc-landing .nc-footer-contact {
  grid-column: 2;
  grid-row: 1;
  padding-top: 0;
  align-self: start;
  justify-self: end;
  color: #FFFFFF;
  text-align: right;
}

.nc-landing .nc-footer-contact h2 {
  margin: 0 0 8px;
  color: #F6DC88;
  font-family: var(--body);
  font-size: .82rem;
  font-weight: 750;
  letter-spacing: .08em;
  text-align: right;
  text-transform: uppercase;
}

.nc-landing .nc-footer-contact a,
.nc-landing .nc-footer-contact address {
  display: block;
  margin: 0;
  color: rgba(255, 255, 255, .9);
  font-family: var(--body);
  font-size: .82rem;
  font-style: normal;
  font-weight: 450;
  line-height: 1.55;
}

.nc-landing .nc-footer-contact a {
  margin-bottom: 4px;
}

.nc-landing .nc-footer-contact a:hover,
.nc-landing .nc-footer-contact a:focus-visible {
  color: #F6DC88;
}

.nc-landing .nc-minimal-footer .nc-footer-back-link {
  grid-column: 1 / -1;
  grid-row: 2;
  justify-self: center;
  margin-top: 0;
  text-align: center;
}

.nc-landing .nc-minimal-footer .footer-container > .nc-footer-top-link {
  top: auto;
  right: 0;
  bottom: 0;
}

@media (max-width: 1000px) {
  .nc-landing .nc-minimal-footer .footer-brand {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    row-gap: 14px;
  }

  .nc-landing .nc-minimal-footer .nc-footer-contact {
    grid-column: 1;
    grid-row: 2;
    width: max-content;
    max-width: 100%;
    margin-left: auto;
    padding-top: 0;
    align-items: flex-end;
    justify-self: end;
    text-align: right;
  }

  .nc-landing .nc-footer-contact h2 {
    text-align: right;
  }

  .nc-landing .nc-minimal-footer .nc-footer-back-link {
    grid-column: 1;
    grid-row: 3;
  }

  .nc-landing .nc-minimal-footer .footer-container > .nc-footer-top-link {
    bottom: 30px;
  }
}

@media (max-width: 520px) {
  .nc-landing .nc-faq-list summary {
    min-height: 58px;
    gap: 14px;
    padding-block: 14px;
  }

  .nc-landing .nc-faq-answer {
    padding-right: 0;
  }

  .nc-landing .nc-closing-section p.nc-cta-reassurance {
    text-align: center;
  }

  .nc-landing .nc-minimal-footer .nc-footer-back-link {
    justify-self: start;
    max-width: 170px;
    line-height: 1.3;
    text-align: left;
  }

  .nc-landing .nc-minimal-footer .footer-container > .nc-footer-top-link {
    bottom: 0;
  }
}

/* Keep both footer navigation actions in one shared, responsive utility row. */
.nc-landing .nc-minimal-footer .nc-footer-utility {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  margin-top: 16px;
  align-items: end;
}

.nc-landing .nc-minimal-footer .nc-footer-utility .nc-footer-back-link,
.nc-landing .nc-minimal-footer .nc-footer-utility .nc-footer-top-link {
  position: static;
  width: max-content;
  margin: 0;
}

.nc-landing .nc-minimal-footer .nc-footer-utility .nc-footer-back-link {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  color: var(--gold-50);
  font-size: .95rem;
  font-weight: 700;
  text-align: center;
}

.nc-landing .nc-minimal-footer .nc-footer-utility .nc-footer-top-link {
  display: flex;
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  align-items: center;
  color: rgba(255, 255, 255, .82);
  font-size: .82rem;
  font-weight: 550;
  white-space: nowrap;
}

.nc-landing .nc-minimal-footer .nc-footer-utility .nc-footer-top-link span {
  margin-right: 5px;
  font-size: 1.15em;
  line-height: 1;
}

@media (max-width: 520px) {
  .nc-landing .nc-minimal-footer .nc-footer-utility {
    grid-template-columns: minmax(0, 170px) 1fr;
    gap: 16px;
  }

  .nc-landing .nc-minimal-footer .nc-footer-utility .nc-footer-back-link {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    max-width: 170px;
    line-height: 1.3;
    text-align: left;
    white-space: normal;
  }

  .nc-landing .nc-minimal-footer .nc-footer-utility .nc-footer-top-link {
    grid-column: 2;
    grid-row: 1;
  }
}

/* Final footer color contract: white at rest, light gold only on interaction. */
.nc-landing .nc-minimal-footer .nc-footer-contact h2,
.nc-landing .nc-minimal-footer .nc-footer-contact a,
.nc-landing .nc-minimal-footer .nc-footer-contact address,
.nc-landing .nc-minimal-footer .nc-footer-utility .nc-footer-back-link,
.nc-landing .nc-minimal-footer .nc-footer-utility .nc-footer-top-link,
.nc-landing .nc-minimal-footer .nc-footer-lockup-group > .socials a {
  color: #FFFFFF;
}

.nc-landing .nc-minimal-footer .nc-footer-contact a:hover,
.nc-landing .nc-minimal-footer .nc-footer-contact a:focus-visible,
.nc-landing .nc-minimal-footer .nc-footer-utility a:hover,
.nc-landing .nc-minimal-footer .nc-footer-utility a:focus-visible,
.nc-landing .nc-minimal-footer .nc-footer-lockup-group > .socials a:hover,
.nc-landing .nc-minimal-footer .nc-footer-lockup-group > .socials a:focus-visible {
  color: #F6DC88;
}

.nc-landing .nc-minimal-footer .nc-footer-lockup-group > .socials a:hover,
.nc-landing .nc-minimal-footer .nc-footer-lockup-group > .socials a:focus-visible {
  border-color: #F6DC88;
  background: rgba(246, 220, 136, .08);
}

/* Security page */
.security-page .security-page-hero {
  min-height: auto;
  padding-bottom: 0;
}

.security-page .security-page-hero-content {
  padding-bottom: 0;
}

.security-page-intro {
  max-width: min(76rem, 100%);
  color: #CEA00C;
  font-family: var(--brand);
  font-size: clamp(2.5rem, calc(2rem + 2.2vw), 4rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: .02em;
  text-align: center;
  text-align-last: center;
}

.policy-section {
  position: relative;
  z-index: 2;
  padding: 24px var(--page-gutter) clamp(90px, 9vw, 150px);
  background: transparent;
}

.policy-wrap {
  width: min(920px, 100%);
  margin-inline: auto;
}

.policy-content {
  border: var(--gold-card-border-width) solid transparent;
  border-radius: 12px;
  padding: var(--site-card-padding);
  background:
    linear-gradient(rgba(255, 255, 255, .96), rgba(255, 255, 255, .96)) padding-box,
    linear-gradient(135deg, #F6DC88 0%, #F1BE15 42%, #CEA00C 78%, #8A6200 100%) border-box;
  box-shadow: var(--card-shadow);
}

.policy-updated {
  margin: 0 0 8px;
  color: var(--muted);
  font-family: var(--sans);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.policy-content > h2:first-of-type {
  margin: 0 0 18px;
  color: var(--deep-teal);
  font-family: var(--display);
  font-size: clamp(1.75rem, calc(1.6273rem + 0.54545vw), 2.5rem);
  font-weight: 650;
  line-height: 1.15;
}

.policy-content > p {
  margin: 0 0 16px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: .01em;
}

.policy-content > p a {
  color: var(--teal);
  font-weight: 600;
}

.policy-content > p a:hover,
.policy-content > p a:focus-visible {
  color: var(--deep-teal);
}

.policy-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 8px 0 32px;
  padding: 18px 20px;
  border-radius: 10px;
  background: var(--mist);
}

.policy-toc a {
  color: var(--teal);
  font-family: var(--sans);
  font-size: .92rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.policy-toc a:hover,
.policy-toc a:focus-visible {
  color: var(--deep-teal);
  text-decoration: underline;
}

.policy-block {
  padding: 28px 0;
  border-top: 1px solid var(--aqua-100);
}

.policy-content > .policy-toc + .policy-block {
  border-top: none;
  padding-top: 0;
}

.policy-block h2 {
  margin: 0 0 14px;
  color: var(--deep-teal);
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.3;
}

.policy-block p {
  margin: 0 0 14px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.02rem;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: .01em;
}

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

.policy-block a {
  color: var(--teal);
  font-weight: 600;
}

.policy-block a:hover,
.policy-block a:focus-visible {
  color: var(--deep-teal);
}

.policy-list {
  margin: 0 0 14px;
  padding-left: 1.3em;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.02rem;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: .01em;
}

.policy-list li {
  margin-bottom: 8px;
}

.policy-list li:last-child {
  margin-bottom: 0;
}

@media (max-width: 640px) {
  .policy-content {
    padding: clamp(22px, 6vw, 32px);
  }

  .policy-toc {
    gap: 6px 10px;
    padding: 16px;
  }
}
/* End security page */