/* ============================================
   Header
   ============================================ */
.site-header {
  padding: var(--space-3) var(--section-pad-x);
  background: transparent;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
}
.site-header__inner {
  max-width: var(--max-wide);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

/* Wordmark using mono PNG as CSS mask, tinted per section */
.wordmark {
  display: inline-block;
  text-decoration: none;
}
.wordmark__mark {
  display: block;
  width: 200px;
  height: 88px;
  background-color: var(--ink); /* default tint, overridden below */
  -webkit-mask-image: url('../images/logo-pono-energy-mono.png');
          mask-image: url('../images/logo-pono-energy-mono.png');
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: left center;
          mask-position: left center;
}

/* On dark sections (hero, etc.), tint logo bone */
.dark .wordmark__mark,
.site-header.over-dark .wordmark__mark {
  background-color: var(--bone);
}

/* Desktop nav */
.nav-desktop a {
  color: var(--ink);
  text-decoration: none;
  margin-left: var(--space-3);
  font-size: var(--fs-sm);
}
.dark .nav-desktop a,
.site-header.over-dark .nav-desktop a {
  color: var(--bone);
}

/* Mobile hamburger */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  padding: 0.5rem;
  cursor: pointer;
}
.nav-toggle__bar {
  display: block;
  width: 28px;
  height: 2px;
  background: var(--ink);
  margin: 5px 0;
  transition: background var(--duration-fast);
}
.dark .nav-toggle__bar,
.site-header.over-dark .nav-toggle__bar {
  background: var(--bone);
}

.nav-mobile[hidden] { display: none; }
.nav-mobile {
  position: fixed;
  inset: 0;
  background: var(--bone);
  z-index: 100;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--space-3);
}
.nav-mobile a {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--ink);
  text-decoration: none;
}

@media (max-width: 767px) {
  .nav-toggle { display: block; }
  .nav-desktop { display: none; }
}

/* ============================================
   Footer
   ============================================ */
.site-footer {
  padding: var(--space-8) var(--section-pad-x);
  background: var(--ink);
  color: var(--bone);
}
.footer__inner {
  max-width: var(--max-wide);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
}
.footer__brand {
  flex: 0 0 auto;
}
.footer__logo {
  display: block;
  height: 96px;
  width: auto;
  max-width: 100%;
}
.footer__meta {
  flex: 1 1 auto;
  text-align: right;
  min-width: 200px;
}
.footer__meta p {
  margin: 0 0 var(--space-2);
}
.footer__link {
  color: var(--bone);
  text-decoration: none;
  border-bottom: 1px solid var(--steel);
}
.footer__link:hover {
  border-bottom-color: var(--bone);
}
.footer__copy {
  color: var(--steel);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
}
@media (max-width: 599px) {
  .footer__inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .footer__meta {
    text-align: center;
  }
}

/* ============================================
   Main / utility
   ============================================ */
.site-main {
  min-height: 50vh;
  padding: 0;
  margin: 0;
  max-width: none;
  width: 100%;
  overflow-x: clip;
}

/* Hairline rule between consecutive bone sections. The rhythm is carried
   by the ink sections (hero, how-it-works, footer) plus these quiet divisions
   between the bone-on-bone runs. Hairlines inherit the section's bg color
   via ::before so they never show on ink. */
.one-line-story + .how-it-works,
.how-it-works + .problem-opportunity,
.problem-opportunity + .carbon-cycle,
.carbon-cycle + .about,
.about + .partners-press,
.partners-press + .primary-cta,
.how-it-works,
.problem-opportunity,
.carbon-cycle,
.about,
.partners-press,
.primary-cta {
  position: relative;
}
.problem-opportunity + .carbon-cycle::before,
.carbon-cycle + .about::before,
.about + .partners-press::before,
.partners-press + .primary-cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--section-pad-x);
  right: var(--section-pad-x);
  height: 1px;
  background: var(--steel);
  opacity: 0.18;
}

/* Remove WP block-gap above header, between top-level template parts, and
   inside main. Required because WP injects `.is-layout-flow > * { margin-block-start: 24px }`
   which pushes the hero down and exposes main's bone background (the "cream strip"). */
.wp-site-blocks > * { margin-block-start: 0 !important; }
.wp-block-template-part { margin: 0 !important; }
.site-main > * {
  max-width: none;
  margin-block-start: 0 !important;
}
#main-content {
  scroll-margin-top: 80px;
}

/* ============================================
   One-line story (Section 5.2)
   ============================================ */
.one-line-story {
  padding: var(--section-pad-y) var(--section-pad-x);
  background: var(--bone);
}
.one-line-story__text {
  max-width: 640px;
  margin: 0 auto;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.25rem);
  line-height: 1.6;
  color: var(--ink);
  letter-spacing: 0;
}

/* ============================================
   How It Works (Section 5.3, Viz 1)
   ============================================ */
.how-it-works {
  padding: var(--section-pad-y) var(--section-pad-x);
  background: var(--ink);
  color: var(--bone);
}
.how-it-works__inner {
  max-width: var(--max-wide);
  margin: 0 auto;
}
.hiw__intro {
  max-width: 640px;
  margin: 0 0 var(--space-8) 0;
}
.hiw__eyebrow {
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-dim);
  margin: 0 0 var(--space-2) 0;
}
.hiw__heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--bone);
  margin: 0;
}
.how-it-works__tiles {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 768px) {
  .how-it-works__tiles {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
  }
}
.hiw-tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--steel);
  opacity: 0;
  transform: translateY(8px);
}
.hiw-tile__num {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--steel);
  font-size: clamp(2rem, 1.5rem + 1.5vw, 3rem);
  line-height: 1;
  letter-spacing: -0.01em;
}
.hiw-tile__label {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--bone);
  margin: 0;
}
.hiw-tile__desc {
  color: var(--bone-dim);
  line-height: 1.55;
  max-width: 36ch;
}
.hiw-tile__place {
  color: var(--steel);
  font-size: var(--fs-xs);
  margin-top: var(--space-2);
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-transform: uppercase;
}

/* ============================================
   Problem & Opportunity (Section 5.4)
   ============================================ */
.problem-opportunity {
  padding: var(--section-pad-y) var(--section-pad-x) 0;
  background: var(--bone);
}
.po__inner {
  max-width: var(--max-wide);
  margin: 0 auto;
}
.po__intro {
  max-width: 640px;
  margin: 0 0 var(--space-3) 0;
}
.po__eyebrow {
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  color: var(--steel);
  text-transform: uppercase;
  margin: 0 0 var(--space-2) 0;
}
.po__section-heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
}
.po__lede {
  max-width: 65ch;
  margin: 0 0 var(--space-8) 0;
  line-height: 1.55;
}

.po__voices {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 1024px) {
  .po__voices {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }
}

.po__quote {
  margin: 0;
  padding-left: var(--space-3);
  border-left: 2px solid var(--brand);
}
.po__quote--leaf {
  border-left-color: var(--leaf);
}
.po__quote p {
  font-size: var(--fs-lg);
  line-height: 1.45;
  font-style: italic;
  color: var(--ink);
  max-width: none;
}
.po__quote cite {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--steel);
  font-style: normal;
  letter-spacing: 0.03em;
  line-height: 1.4;
}

.po__photo {
  margin: var(--space-8) 0 0;
}
.po__photo img {
  width: 100%;
  /* Cinematic letterbox crop — the aspect itself is the framing decision.
     Shorter height reads as documentary still, not a rectangular tile. */
  height: clamp(220px, 28vw, 380px);
  object-fit: cover;
  display: block;
}

/* ============================================
   Partners & Press (Section 5.5)
   ============================================ */
.partners-press {
  padding: var(--section-pad-y) var(--section-pad-x);
  background: var(--bone);
}
.pp__inner {
  max-width: var(--max-wide);
  margin: 0 auto;
  text-align: center;
}
.pp__heading {
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  color: var(--steel);
  text-transform: uppercase;
  text-align: center;
  font-weight: 400;
  margin: 0 0 var(--space-4) 0;
}
.pp__press-heading {
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  color: var(--ink);
  text-transform: uppercase;
  text-align: center;
  font-weight: 500;
  margin: 0 0 var(--space-4) 0;
}
.pp__hero-row,
.pp__grower-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-6);
}
.pp__tier-label {
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  color: var(--steel);
  text-transform: uppercase;
  text-align: center;
  margin: var(--space-6) 0 var(--space-3) 0;
  width: 100%;
}
.pp__logo {
  /* Fixed visual slot per tier: every logo is placed in the same-size box
     regardless of its intrinsic aspect ratio, so rows read as balanced.
     object-fit: contain preserves the logo proportions within the slot.
     mix-blend-mode: multiply lets logos designed for dark backgrounds
     (e.g. Aloun Farms white-fill PNG) blend correctly on bone. */
  object-fit: contain;
  object-position: center;
  filter: grayscale(1);
  opacity: 0.85;
  mix-blend-mode: multiply;
  transition: filter var(--duration-fast) var(--ease-out),
              opacity var(--duration-fast) var(--ease-out);
}
.pp__logo--hero {
  width: 220px;
  height: 72px;
}
.pp__logo--grower {
  width: 160px;
  height: 72px;
}
@media (hover: hover) and (pointer: fine) {
  .pp__logo:hover {
    filter: grayscale(0);
    opacity: 1;
  }
}
.pp__logo:focus-visible {
  filter: grayscale(0);
  opacity: 1;
}

.pp__footnote {
  color: var(--steel);
  font-size: var(--fs-xs);
  letter-spacing: 0.02em;
  line-height: 1.6;
  /* Extra top margin so footnote reads as a quieter third tier, not a
     caption of the grower row. */
  margin: var(--space-8) 0 0 0;
  text-align: center;
  width: 100%;
  max-width: none;
}

.pp__press {
  margin-top: var(--space-8);
}
.pp__press-heading {
  margin-top: var(--space-4);
  margin-bottom: var(--space-6);
}
.pp__press-card {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto auto;
  column-gap: var(--space-4);
  row-gap: 0.5rem;
  max-width: 680px;
  margin: 0 auto;
  padding: var(--space-3) 0;
  border-top: 1px solid var(--steel);
  text-decoration: none;
  color: var(--ink);
  transition: background var(--duration-fast) var(--ease-out),
              transform 140ms var(--ease-out);
}
.pp__press-card:last-child {
  border-bottom: 1px solid var(--steel);
}
@media (hover: hover) and (pointer: fine) {
  .pp__press-card:hover {
    background: rgba(24, 122, 124, 0.04);
  }
}
.pp__press-card:focus-visible {
  background: rgba(24, 122, 124, 0.04);
}
.pp__press-card:active {
  transform: scale(0.995);
}
.pp__press-outlet {
  grid-column: 1;
  grid-row: 1;
  font-size: var(--fs-xs);
  color: var(--steel);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.pp__press-headline {
  grid-column: 1;
  grid-row: 2;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.pp__press-date {
  grid-column: 1;
  grid-row: 3;
  font-size: var(--fs-xs);
  color: var(--steel);
  letter-spacing: 0.04em;
}
.pp__press-arrow {
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: center;
  color: var(--brand);
  font-size: 1.5rem;
  transition: transform var(--duration-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .pp__press-card:hover .pp__press-arrow {
    transform: translateX(4px);
  }
}
@media (max-width: 599px) {
  .pp__press-arrow {
    display: none;
  }
}

@media (max-width: 599px) {
  /* Stack each tier vertically on mobile. 2+1 row layouts read as one
     logo being "left over"; a single column gives all partners equal
     weight and matches the editorial tone. */
  .pp__hero-row,
  .pp__grower-row {
    flex-direction: column;
    gap: var(--space-4);
  }
  .pp__logo--hero {
    width: 180px;
    height: 56px;
  }
  .pp__logo--grower {
    width: 160px;
    height: 64px;
  }
}

/* ============================================
   Carbon Cycle (Viz 2)
   ============================================ */
.carbon-cycle {
  padding: var(--section-pad-y) var(--section-pad-x);
  background: var(--bone);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}
.carbon-cycle__intro {
  max-width: 640px;
  text-align: center;
}
.carbon-cycle__eyebrow {
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel);
  margin: 0 0 var(--space-3) 0;
}
.carbon-cycle__heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.75rem, 1.1rem + 2vw, 2.75rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 var(--space-4) 0;
}
.carbon-cycle__lede {
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.125rem);
  line-height: 1.55;
  color: var(--steel);
  margin: 0;
  max-width: 52ch;
  margin-left: auto;
  margin-right: auto;
}
.carbon-cycle__svg {
  width: 100%;
  max-width: 720px;
  height: auto;
}
.cc-label {
  font-family: var(--font-mono);
  font-size: 1.125rem;
  font-weight: 600;
  fill: var(--ink);
  letter-spacing: 0.08em;
}
.cc-arc {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
}
.cc-node circle {
  transform-origin: center;
  transform-box: fill-box;
  transform: scale(0.92);
  opacity: 0;
}

.cc-mobile { display: none; list-style: none; padding: 0; margin: 0; }
@media (max-width: 767px) {
  .carbon-cycle__svg { display: none; }
  .cc-mobile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.875rem;
    letter-spacing: 0.08em;
  }
  .cc-mobile__node {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--bone);
    border: 1px solid var(--steel);
  }
  .cc-mobile__dot {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
  }
  .cc-mobile__arrow { color: var(--steel); }
  .cc-mobile__arrow--loop { color: var(--sun); margin-top: 0.5rem; }
}

/* ============================================
   About / Why Pono
   ============================================ */
.about {
  padding: var(--section-pad-y) var(--section-pad-x);
  background: var(--bone);
}
.about__inner {
  max-width: var(--max-wide);
  margin: 0 auto;
}
.about__intro {
  max-width: 640px;
  margin: 0 0 var(--space-6) 0;
}
.about__eyebrow {
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  color: var(--steel);
  text-transform: uppercase;
  margin: 0 0 var(--space-2) 0;
}
.about__heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 var(--space-3) 0;
}
.about__body {
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.125rem);
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
  max-width: 56ch;
}
.about__photo {
  margin: 0;
}
.about__photo img {
  width: 100%;
  height: clamp(260px, 34vw, 440px);
  object-fit: cover;
  object-position: center 75%;
  display: block;
}

/* ============================================
   Hero (Section 5.1)
   ============================================ */
.hero {
  position: relative;
  min-height: 100vh;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  background: var(--ink);
}
.hero__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(10,27,42,0) 45%, rgba(10,27,42,0.6) 100%);
  pointer-events: none;
}
.hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 80%;
  /* Transform is fully owned by GSAP (scale + translate). Setting any transform
     here causes GSAP's tween to wipe/re-set it every frame, which stutters. */
  transform-origin: center center;
  will-change: transform;
  backface-visibility: hidden;
}
.hero__content {
  position: absolute;
  bottom: clamp(3rem, 5vw, 6rem);
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - (var(--section-pad-x) * 2));
  max-width: var(--max-wide);
  color: var(--bone);
  z-index: 2;
}
.hero__kicker {
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  color: var(--bone);
  opacity: 0.92;
  margin: 0 0 var(--space-2) 0;
  text-transform: uppercase;
}
.hero__headline {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.0;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-3);
  font-size: clamp(3rem, 5vw + 1rem, 6rem);
  color: var(--bone);
}
/* Mask container injected by JS around each .hero__word.
   overflow: hidden clips the word as it slides up into view.
   Bottom padding gives descenders (g, p, y, etc) room below the
   baseline; the negative margin pulls the mask back so the
   padding doesn't bump sibling words down. */
.hero__word-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.2em;
  margin-bottom: -0.2em;
}
.hero__word {
  display: inline-block;
  margin-right: 0.25em;
  /* Initial translateY set by GSAP gsap.from(); no CSS opacity needed. */
}
.hero__subhead {
  font-size: var(--fs-lg);
  margin-bottom: var(--space-4);
  max-width: 540px;
  color: var(--bone);
}
.hero__cta {
  display: inline-block;
}
.hero__caption {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - (var(--section-pad-x) * 2));
  max-width: var(--max-wide);
  bottom: var(--section-pad-x);
  color: var(--bone);
  opacity: 0.7;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-align: right;
  z-index: 2;
}

/* On the hero, header switches to bone-tinted wordmark + nav */
.hero ~ * .site-header,
body:has(.hero) .site-header {
  /* placeholder: header is positioned absolutely at top, will sit over hero */
}

/* CTA buttons */
.btn {
  display: inline-block;
  padding: 0.875rem 1.5rem;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid currentColor;
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              transform 140ms var(--ease-out);
  cursor: pointer;
}
.btn:active {
  transform: scale(0.97);
}
.btn--ink {
  background: var(--ink);
  color: var(--bone);
  border-color: var(--ink);
}
.btn--ink:hover {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
/* When the ink button sits on a dark section (hero, etc.), keep the hover
   text readable against the dark background. */
.dark .btn--ink:hover,
.hero .btn--ink:hover {
  color: var(--bone);
  border-color: var(--bone);
}
.btn--bone {
  background: var(--bone);
  color: var(--ink);
  border-color: var(--bone);
}

/* Hero responsive: lock headline line-break behavior */
@media (max-width: 767px) {
  .hero__headline { font-size: 3rem; line-height: 1.05; }
  /* Mobile hero photo is a dedicated portrait composition — no object-
     position skew needed, let it render natural-center. */
  .hero__photo { object-position: center center; }
  /* Caption sits bottom-left below the content block on mobile. Right-
     aligned placement collided with the CTA button at narrow widths. */
  .hero__caption {
    font-size: 10px;
    bottom: 1.5rem;
    left: var(--section-pad-x);
    right: auto;
    width: auto;
    max-width: none;
    transform: none;
    text-align: left;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .hero__headline { font-size: 4rem; }
}
@media (min-width: 1024px) {
  .hero__headline { font-size: 6rem; white-space: nowrap; }
}

/* When the page contains a hero section, header overlays it. Wordmark + nav must read on dark. */
body:has(.hero) .wordmark__mark { background-color: var(--bone); }
body:has(.hero) .nav-desktop a { color: var(--bone); }
body:has(.hero) .nav-toggle__bar { background: var(--bone); }

/* ============================================
   Primary CTA + Sun callback (Section 5.7)
   ============================================ */
.primary-cta {
  position: relative;
  padding: var(--section-pad-y) var(--section-pad-x);
  background: var(--bone);
  text-align: center;
  overflow: hidden;
}
.primary-cta__sun {
  /* Large Sun peeking off the right edge — visual rhyme with the Sun node
     in the carbon-cycle viz above. Partial crop gives it presence without
     competing with the centered statement. Hidden under 600px where the
     decoration would collide with the centered copy column. */
  position: absolute;
  top: 50%;
  right: -80px;
  transform: translateY(-50%);
  width: 200px;
  height: 200px;
  opacity: 0.95;
  pointer-events: none;
}
@media (max-width: 599px) {
  .primary-cta__sun {
    display: none;
  }
}
@media (min-width: 768px) {
  .primary-cta__sun {
    right: -100px;
    width: 280px;
    height: 280px;
  }
}
@media (min-width: 1280px) {
  .primary-cta__sun {
    right: -120px;
    width: 360px;
    height: 360px;
  }
}
.cta__inner {
  max-width: 720px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.cta__eyebrow {
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  color: var(--steel);
  text-transform: uppercase;
  margin: 0 0 var(--space-3) 0;
}
.cta__pullquote {
  margin: 0 0 var(--space-4) 0;
  padding: 0;
}
.cta__statement {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.75rem, 1.1rem + 2vw, 2.75rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 var(--space-3) 0;
  font-style: italic;
}
.cta__cite {
  display: block;
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel);
  font-style: normal;
}
.cta__sub {
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.125rem);
  line-height: 1.55;
  color: var(--steel);
  margin: 0 auto var(--space-6) auto;
  max-width: 52ch;
}
.cta__primary {
  display: inline-block;
}

/* ============================================
   Section boundary hairline rule (Change 6)
   Injected as .section__rule by JS; tweened
   scaleX 0 to 1 via ScrollTrigger.
   ============================================ */
.section__rule {
  position: absolute;
  top: 0;
  left: var(--section-pad-x);
  right: var(--section-pad-x);
  height: 1px;
  background: var(--leaf);
  opacity: 0.3;
  transform-origin: left center;
  /* scaleX controlled by GSAP; pointer-events none so it never
     intercepts clicks on elements above it. */
  pointer-events: none;
}

/* ============================================
   Typography: OpenType features (Change 5)
   Fraunces is loaded as static woff2 files
   (500, 600 weight only) so font-variation-
   settings axes are not available. Only
   font-feature-settings and font-variant-
   numeric are applied.
   ============================================ */
.hero__headline,
h2,
.hiw__heading,
.po__section-heading,
.carbon-cycle__heading,
.about__heading {
  font-feature-settings: 'ss01', 'liga', 'kern';
  font-variant-numeric: oldstyle-nums;
}