/* ============================================================
   Ridgefield "Any time!" — page sections below the hero
   ============================================================ */
.sec {
  --ink: #16181c;
  --ink-soft: #3e4349;
  --orange: #ec532b;
  --orange-dark: #a83a15;
  --navy: #14377d;
  --mint: rgb(150, 215, 198);
  --mint-pale: rgb(231, 247, 244);
  --card: #f2f3f5;
  --cell: #e6ebe9;
  --cell-neighbor: #d8f0e8;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  font-family: "Alvar W05", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--ink);
  line-height: 1.6;
}
.sec *, .sec *::before, .sec *::after { box-sizing: border-box; }
.sec p { margin: 0 0 1em; text-wrap: pretty; }
.sec p:last-child { margin-bottom: 0; }

.sec__inner {
  width: min(100% - clamp(2.5rem, 8vw, 6rem), 1180px);
  margin-inline: auto;
}

/* ---------- offers ---------- */
.offers {
  /* opens on the hero's closing colour so the seam disappears */
  background: linear-gradient(180deg,
    var(--mint-pale) 0%,
    rgb(196, 234, 226) 14%,
    var(--mint) 34%,
    var(--mint) 100%);
  padding: clamp(1.25rem, 3vw, 2.5rem) 0 clamp(3rem, 7vw, 6rem);
}

/* Section headings match the hero headline exactly. That resolves to
   DIN Next Slab W01 italic — the theme's own h1 face — not the
   black-italic caps it uses for h2/h3. */
.offers__title,
.pledge__title,
.club__title {
  margin: 0;
  font-family: "DIN Next Slab W01", "Roboto Slab", Rockwell, Georgia, serif;
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  /* 0.78x the hero headline at every step, so H1 : H2 holds a 1.28 ratio */
  font-size: clamp(1.45rem, 0.86rem + 2.1vw, 2.65rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
  color: var(--ink);
}

/* Title and the two column labels share one row; the labels drop away
   once the offer rows stack. */
.offers__head {
  display: grid;
  grid-template-columns: 1fr;
  align-items: end;
  gap: 0.7rem;
  /* + 4px so the labels line up with the columns inside the bordered deck */
  padding-inline: calc(clamp(0.7rem, 1.5vw, 1.1rem) + 4px);
  margin-bottom: clamp(0.9rem, 1.8vw, 1.3rem);
}
.offers__col {
  display: none;
  /* text hugs the bottom of its own box, so it lines up with the title's
     baseline rather than sitting centered above it */
  align-items: flex-end;
  justify-content: center;
  text-align: center;
  padding: 0.6em 0.5em 0;
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.15rem);
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--ink);
}

.offers__deck {
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.34);
  padding: clamp(1.15rem, 2.4vw, 2rem);
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
}

.offer {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.7rem;
}
.offer__body {
  background: var(--card);
  border-radius: 16px;
  padding: clamp(1.4rem, 2.8vw, 2.2rem);
}
.offer__icon {
  display: none; /* hidden for now — markup left in place to re-enable easily */
  width: 80px;
  height: 80px;
  margin-bottom: 0.7rem;
}
.offer__body h3 {
  margin: 0 0 0.7rem;
  color: var(--ink); /* theme colours h2/h3 navy by default */
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(1.08rem, 0.98rem + 0.75vw, 1.5rem);
  line-height: 1.12;
  letter-spacing: -0.008em;
  text-wrap: balance;
}
.offer__body h3 em {
  display: block;
  margin-top: 0.3em;
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.72em;
  line-height: 1.25;
  color: var(--ink-soft);
}
.offer__body p {
  font-size: clamp(1.16rem, 1.13rem + 0.19vw, 1.27rem);
  color: var(--ink-soft);
}

.offer__prices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
}
.offer__price {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.34rem;
  text-align: center;
  padding: 1.2rem 0.8rem;
}
.offer__label {
  font-weight: 900;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  line-height: 1.2;
  color: var(--ink-soft);
}
.offer__value {
  font-weight: 900;
  font-size: clamp(1.75rem, 1.2rem + 2.3vw, 3rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.offer__price--neighbor .offer__value { color: var(--orange-dark); }
.offer__note {
  font-style: italic;
  font-size: 0.98rem;
  line-height: 1.3;
  color: var(--ink-soft);
  max-width: 20ch;
}

@media (min-width: 880px) {
  .offer,
  .offers__head { grid-template-columns: minmax(0, 1.72fr) minmax(0, 0.64fr) minmax(0, 0.64fr); }
  .offers__col { display: flex; }
  .offer__prices { display: contents; }
  .offer__label { display: none; }
}

/* ---------- community giveback pledge ---------- */
.pledge {
  background: var(--mint);
  /* halved: was clamp(2.5rem, 6vw, 5rem) / clamp(3rem, 7vw, 6rem) */
  padding: clamp(1.25rem, 3vw, 2.5rem) 0 clamp(1.5rem, 3.5vw, 3rem);
  overflow-x: clip; /* the illustration bleeds to the viewport edge */
}
.pledge__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 4vw, 3.25rem);
  align-items: center;
}
.pledge__title {
  margin-bottom: clamp(0.9rem, 2vw, 1.4rem);
}
.pledge__copy p {
  max-width: 54ch;
  font-size: clamp(1.2rem, 1.14rem + 0.36vw, 1.34rem);
  color: var(--ink-soft);
}

/* The pledge itself — the line that names the number. Steps up in size and
   darkens, with a rule separating it from the setup above. */
.pledge__copy .pledge__give {
  margin-top: clamp(1.3rem, 2.6vw, 2rem);
  padding-top: clamp(1.1rem, 2.2vw, 1.6rem);
  border-top: 2px solid rgba(22, 24, 28, 0.2);
  max-width: 30ch;
  font-size: clamp(1.15rem, 1rem + 0.85vw, 1.6rem);
  line-height: 1.32;
  color: var(--ink);
}
.pledge__copy .pledge__give strong {
  font-weight: 900;
  color: var(--orange-dark);
}

.pledge__media { margin: 0; }
.pledge__media img {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 880px) {
  .pledge__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

  /* Bleed the illustration out to the right edge of the viewport.
     --bleed is the distance from the centred container's edge to the
     viewport edge, so a negative right margin of that size lands the
     artwork flush with the screen. */
  .pledge {
    --gutter: clamp(2.5rem, 8vw, 6rem);
    --container: min(100vw - var(--gutter), 1180px);
    --bleed: calc((100vw - var(--container)) / 2);
    /* how much of the artwork runs past the screen edge and gets sliced */
    --crop: 4.5vw;
  }
  .pledge__media { margin-right: calc((var(--bleed) + var(--crop)) * -1); }
}

/* ---------- revive 365 care club ---------- */
.club {
  background: var(--mint);
  padding: clamp(1.5rem, 3.5vw, 3rem) 0 clamp(3rem, 7vw, 6rem);
}
.club__head {
  display: grid;
  grid-template-columns: 1fr;
  align-items: end;
  gap: 0.7rem;
  padding-inline: calc(clamp(0.7rem, 1.5vw, 1.1rem) + 4px);
  margin-bottom: clamp(0.9rem, 1.8vw, 1.3rem);
}

.club__deck {
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.34);
  padding: clamp(1.15rem, 2.4vw, 2rem);
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
}
.club__body {
  background: var(--card);
  border-radius: 16px;
  padding: clamp(1.4rem, 2.8vw, 2.2rem);
}
.club__body p {
  font-size: clamp(1.16rem, 1.13rem + 0.19vw, 1.27rem);
  color: var(--ink-soft);
}

.tier {
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  align-items: center;
  gap: 0.7rem;
}
.tier__badge { display: grid; place-items: center; }
.tier__badge img {
  display: block;
  width: clamp(46px, 5.2vw, 62px);
  height: auto;
}
.tier__price {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  text-align: center;
  padding: 0.9rem 0.5rem;
}
.tier__label {
  font-weight: 900;
  text-transform: uppercase;
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  line-height: 1.2;
  color: var(--ink-soft);
}
.tier__value {
  font-weight: 900;
  font-size: clamp(1.75rem, 1.2rem + 2.3vw, 3rem);
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: var(--ink);
}
/* "/mo" drops to its own muted line under the number, same language as
   .offer__note — stays gray even in the neighbor column where the
   number itself goes orange. */
.tier__value-period {
  display: block;
  margin-top: 0.2em;
  font-weight: 400;
  font-style: italic;
  font-size: 18px;
  letter-spacing: normal;
  color: var(--ink-soft);
}
.tier__price--neighbor .tier__value { color: var(--orange-dark); }

@media (min-width: 880px) {
  /* Body card holds column 1 across all three rows; each tier's children
     become grid items so badges and prices line up down the section. */
  .club__deck,
  .club__head { grid-template-columns: minmax(0, 1.6fr) auto minmax(0, 0.62fr) minmax(0, 0.62fr); }
  /* three explicit rows so the body card can actually span them —
     grid-row: 1 / -1 resolves against explicit lines only */
  .club__deck { grid-template-rows: repeat(3, auto); }
  .club__body { grid-column: 1; grid-row: 1 / -1; }
  .tier { display: contents; }
  .tier__label { display: none; }

  /* breathing room between the copy card and the badge column */
  .tier__badge { padding-left: clamp(1rem, 2.5vw, 2.5rem); }

  /* hairline between tier rows */
  .tier + .tier > * {
    border-top: 1px solid rgba(22, 24, 28, 0.16);
  }
}

/* ---------- reveal (enhances an already-visible default) ---------- */
@keyframes sec-rise {
  from { opacity: 0; transform: translate3d(0, 20px, 0); }
  to   { opacity: 1; transform: none; }
}
.sec-reveal.is-in { animation: sec-rise 700ms var(--ease-out) both; }

@media (prefers-reduced-motion: reduce) {
  .sec-reveal.is-in { animation-duration: 0.001ms !important; }
}

/* ---------- enhanced internal rewards ---------- */
.perks {
  position: relative;
  isolation: isolate;
  background: var(--mint);
  color: inherit;
  padding: clamp(1.5rem, 3.5vw, 3rem) 0 clamp(300px, 40vw, 560px);
}

/* Wide-format export (2056x826, ~2.49:1) — the full reeds+sign scene in
   one composition, unlike the old 792x1224 portrait file. object-fit
   scales it to fill the section width at its own aspect ratio rather
   than cropping a tall canvas. Fades its top edge to transparent so it
   dissolves into the section's own mint background instead of showing
   a hard seam where the source artwork's sky-gradient doesn't match
   --mint exactly. */
.perks__footer-art {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 2056 / 826;
  object-fit: cover;
  object-position: bottom center;
  z-index: 0;
  pointer-events: none;
  mask-image: linear-gradient(to bottom, transparent 0%, black 48%, black 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 48%, black 100%);
}
.perks > .sec__inner {
  position: relative;
  z-index: 1;
}

/* The title and intro paragraph stack in one column so the REGULAR /
   RIDGEFIELD NEIGHBORS labels — bottom-aligned via .offers__head's own
   align-items: end — line up with the last line of the paragraph, not
   the title. */
.perks__head-copy { min-width: 0; }
.perks__head-copy .perks__intro {
  max-width: 68ch;
  margin: clamp(0.9rem, 2vw, 1.4rem) 0 0;
  font-size: clamp(1.2rem, 1.15rem + 0.26vw, 1.34rem);
  color: var(--ink-soft);
}

/* Footer SVG positioned behind the offers deck — absolute positioning
   with negative z-index so table content floats above it. */
@media (min-width: 880px) {
  .perks__head { align-items: end; }
}

/* Text-valued cells (Full Price / N/A / percentages) match the numeral
   size exactly — same weight of statement, just words instead of digits. */
.offer__value--text {
  letter-spacing: -0.01em;
}

/* ---------- the letter (parts one & two) ---------- */
.sec__inner--narrow {
  width: min(100% - clamp(2.5rem, 8vw, 6rem), 720px);
  margin-inline: auto;
  text-align: center;
}

.letter,
.means {
  background: var(--navy);
  color: #fff;
}
.letter {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(1.5rem, 3.5vw, 2.5rem);
}
/* Full-bleed at 100vw — the section itself has no side padding, so the
   sign's natural width:100% already spans edge to edge. */
.letter__sign {
  display: block;
  width: 50%;
  height: auto;
  margin: 0 auto;
}
.means {
  position: relative;
  isolation: isolate;
  padding: clamp(2rem, 4vw, 3rem) 0 0;
  min-height: clamp(280px, 34vw, 460px);
}

/* Bookend for the hero: the heron that opened the page on a bright sky
   returns here, quiet and monochrome, bleeding off the edge behind the
   story. brightness(0) flattens the artwork to solid black (alpha is
   untouched by filters), invert(1) flips that to white — a reliable
   way to get a clean silhouette regardless of the source art's colour. */
.letter__motif {
  position: absolute;
  top: clamp(-2rem, -4vw, -0.5rem);
  left: 50%;
  width: clamp(248px, 33.75vw, 518px);
  height: auto;
  filter: brightness(0) invert(1);
  opacity: 0.07;
  transform: translateX(-50%) rotate(8deg);
  z-index: 0;
  pointer-events: none;
}
.letter > .sec__inner { position: relative; z-index: 1; }

/* Echoes the hero's sunburst behind the section's closing beat. */
.means__glow {
  position: absolute;
  top: clamp(1rem, 4vw, 3rem);
  left: 50%;
  width: clamp(420px, 60vw, 760px);
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(236, 83, 43, 0.22), rgba(236, 83, 43, 0) 72%);
  z-index: 0;
  pointer-events: none;
}
.means > .sec__inner { position: relative; z-index: 1; }

@media (max-width: 640px) {
  .letter__motif { opacity: 0.05; width: clamp(160px, 44vw, 260px); }
}

.letter__head .offers__title,
.means__title {
  text-align: center;
  color: #fff; /* offers__title is near-black by default; these sections sit on navy */
}

/* Real <button>s, not clickable yet — pointer cursor, hover lift,
   press-down on click, visible keyboard focus. Same raised/pressed
   language as the hero badge; focus ring goes white here since these
   two sit on the navy background rather than the mint. */
.letter__badge {
  display: inline-block;
  margin: 0.55em 0 0.3em;
  padding: 0.3em 0.62em 0.36em;
  border: 4px solid var(--ink);
  border-radius: 14px;
  background: var(--orange);
  color: var(--ink);
  font-family: "DIN Next Slab W01", "Roboto Slab", Rockwell, Georgia, serif;
  font-weight: 900;
  font-style: italic;
  font-size: clamp(1.7rem, 1.1rem + 2.6vw, 3rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  box-shadow: 0 5px 0 var(--ink);
  transform: translateY(0);
  transition: transform 150ms var(--ease-out),
              box-shadow 150ms var(--ease-out),
              background-color 150ms var(--ease-out);
}
.letter__badge:hover {
  background: var(--orange-dark);
  transform: translateY(-2px);
  box-shadow: 0 7px 0 var(--ink);
}
.letter__badge:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--ink);
}
.letter__badge:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 4px;
}
/* .letter .letter__sub (two classes) — needed to outrank the generic
   .sec p rule (class+element), which otherwise wins on specificity and
   zeroes out the auto margins that centre this line. */
.letter .letter__sub {
  margin: 0.4em auto 0;
  max-width: 42ch;
  font-style: italic;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
}

.letter__body,
.means__body {
  margin-top: clamp(2rem, 4vw, 3rem);
  text-align: left;
  font-size: clamp(1.02rem, 0.98rem + 0.24vw, 1.14rem);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.88);
}
/* Inline, not floated: a floated first-letter has to land its box height
   on an exact multiple of the body line-height or the lines that
   partially overlap it get squeezed to inconsistent widths — a ragged,
   broken-looking wrap. An inline oversized letter reads just as
   distinct with zero wrap risk. */
.letter__body p:first-of-type::first-letter {
  padding-right: 0.06em;
  font-family: "DIN Next Slab W01", "Roboto Slab", Rockwell, Georgia, serif;
  font-weight: 900;
  font-style: italic;
  font-size: 1.7em;
  color: var(--orange);
}

.means__rule {
  width: 100%;
  height: 3px;
  border: 0;
  margin: 0 auto clamp(2.5rem, 5vw, 3.5rem);
  background: repeating-linear-gradient(90deg, #fff 0 18px, transparent 18px 32px);
  opacity: 0.35;
}
/* Bookends the opening .letter__badge — same chip, smaller, so the
   letter closes on the same visual beat it opened on. */
.means__signoff {
  display: inline-block;
  margin: 0.15em 0 0 0.15em;
  padding: 0.16em 0.5em 0.22em;
  border: 3px solid #fff;
  border-radius: 10px;
  background: var(--orange);
  color: var(--ink);
  font-family: "DIN Next Slab W01", "Roboto Slab", Rockwell, Georgia, serif;
  font-weight: 900;
  font-style: italic;
  font-size: 1.15em;
  line-height: 1.1;
  letter-spacing: -0.01em;
  vertical-align: -0.08em;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  box-shadow: 0 3px 0 #fff;
  transform: translateY(0);
  transition: transform 150ms var(--ease-out),
              box-shadow 150ms var(--ease-out),
              background-color 150ms var(--ease-out);
}
.means__signoff:hover {
  background: var(--orange-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 0 #fff;
}
.means__signoff:active {
  transform: translateY(2px);
  box-shadow: 0 0 0 #fff;
}
.means__signoff:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

/* The welcome sign — full-bleed background scenery pinned to the bottom
   of the section (same treatment as .perks__footer-art): object-fit
   crops/scales the source art to fill the width without distorting it,
   however wide the section actually renders at. */
.means__sign {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom center;
  z-index: 0;
  pointer-events: none;
}