/* ============================================================
   Ridgefield "Any time!" — hero scene
   Sky gradient sampled from Ridgefield-Header.svg.
   ============================================================ */
.hero {
  --sky-0: rgb(119, 201, 185);
  --sky-1: rgb(133, 209, 194);
  --sky-2: rgb(163, 222, 209);
  --sky-3: rgb(196, 234, 226);
  --sky-4: rgb(220, 243, 238);
  --sky-5: rgb(231, 247, 244);

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

  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* was 100svh — trimmed so the hero does not leave a large empty band
     above the next section on tall viewports */
  min-height: 78vh;
  min-height: 78svh;
  background: linear-gradient(
    180deg,
    var(--sky-0) 0%,
    var(--sky-1) 20%,
    var(--sky-2) 40%,
    var(--sky-3) 60%,
    var(--sky-4) 80%,
    var(--sky-5) 100%
  );
}

/* The scene is a fixed-ratio stage pinned to the top of the hero, so every
   element keeps its relative position as the viewport width changes. */
/* The site header sits in normal flow above the hero (it only goes sticky
   once you scroll), so the scene starts at the hero's own top edge. */
.hero__scene {
  position: absolute;
  inset: 0 0 auto 0;
  aspect-ratio: 2000 / 886;
  pointer-events: none;
}

/* One positioned layer. --x/--y/--w place it; --px/--py are driven by the
   pointer-parallax script and stay separate from the intro animation, which
   lives on the child <img>. */
.sl {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
  will-change: transform;
}
.sl img {
  display: block;
  width: 100%;
  height: auto;
}
.sl--flip img { transform: scaleX(-1); }

/* ---------- placement (desktop, matches the supplied comp) ---------- */
.sl--cloud-tl    { --x: 2.75%; --y: 10.7%; --w: 14.5%; z-index: 7; }
.sl--sun         { --x: 4.5%;  --y: 23.0%; --w: 12%;   z-index: 1; }
.sl--bank-left   { --x: 5.5%;  --y: 32.7%; --w: 24%;   z-index: 2; }
.sl--hometown    { --x: 28%;   --y: 3%;    --w: 42%;   z-index: 3; }
.sl--ridgefield  { --x: 20.3%; --y: 12%;   --w: 18.7%; z-index: 5; }
.sl--cloud-front { --x: 21.5%; --y: 33.9%; --w: 29%;   z-index: 8; }
.sl--cloud-mid   { --x: 46%;   --y: 36%;   --w: 4%;    z-index: 8; }
.sl--bird        { --x: 44.9%;  --y: 11%;  --w: 9.8%;  z-index: 6; }
.sl--bank-r-far  { --x: 66%;   --y: 27.5%; --w: 28%;   z-index: 2; }
.sl--bank-r-mid  { --x: 47%;   --y: 33%;   --w: 30%;   z-index: 3; }
.sl--revival     { --x: 59.2%; --y: 20.05%; --w: 13.5%; z-index: 5; }
.sl--puff        { --x: 49.5%; --y: 33.5%; --w: 8.5%;  z-index: 8; }
.sl--cloud-r     { --x: 78%;   --y: 32%;   --w: 13%;   z-index: 4; }
.sl--cloud-far-r { --x: 88%;   --y: 33.5%; --w: 8%;    z-index: 7; }

/* ---------- placement (narrow: stack the lockup) ---------- */
@media (max-width: 899px) {
  /* Portrait stage: the lockup stacks Ridgefield → heron → Revival.
     Inset slightly so the whole composition scales down as one and
     leaves room for the copy without rearranging anything. */
  .hero__scene {
    inset: 0 7% auto 7%;
    aspect-ratio: 1000 / 1560;
  }

  .sl--cloud-tl    { --x: 1%;   --y: 0.5%; --w: 28%; }
  .sl--sun         { --x: 4%;   --y: 16%;  --w: 28%; }
  .sl--cloud-far-r { --x: 74%;  --y: 20%;  --w: 20%; }
  .sl--hometown    { --x: 8%;   --y: 5%;   --w: 84%; }
  .sl--ridgefield  { --x: 16%;  --y: 4%;   --w: 66%; }
  .sl--bank-left   { --x: -8%;  --y: 26%;  --w: 70%; }
  .sl--cloud-front { --x: 22%;  --y: 33%;  --w: 75%; }
  .sl--bird        { --x: 34%;  --y: 38%;  --w: 32%; }
  .sl--cloud-mid   { --x: 12%;  --y: 48%;  --w: 10%; }
  .sl--bank-r-far  { --x: 38%;  --y: 57%;  --w: 65%; }
  .sl--revival     { --x: 20%;  --y: 56%;  --w: 60%; }
  .sl--bank-r-mid  { --x: -10%; --y: 62%;  --w: 70%; }
  .sl--cloud-r     { --x: 70%;  --y: 68%;  --w: 26%; }
  .sl--puff        { --x: 1%;   --y: 72%;  --w: 16%; }
}

/* ============================================================
   COPY — sits in normal flow below the artwork. Its top offset is
   expressed in vw because the scene scales with viewport width.
   ============================================================ */
.hero__copy {
  position: relative;
  z-index: 10;
  padding: calc(22vw + 0.5rem) clamp(1.25rem, 5vw, 3rem) clamp(2.5rem, 6vw, 4rem);
  text-align: center;
  color: #16181c;
  font-family: "Alvar W05", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
/* A short line above the headline — same italic slab as the mean-title
   treatment elsewhere, but smaller and in the brand orange so it reads
   as a lead-in, not a competing headline. */
.hero__tagline {
  margin: 0 auto 0.6em;
  color: #14377d;
  font-family: "DIN Next Slab W01", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.1rem, 0.95rem + 0.65vw, 1.55rem);
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.hero__ask {
  margin: 0 auto;
  max-width: 800px;
  /* the theme colours h1 navy; the comp has it near-black */
  color: #16181c;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.85rem, 1.1rem + 2.7vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.hero__ask u {
  text-decoration-thickness: 0.055em;
  text-underline-offset: 0.14em;
}
.hero__lede {
  margin: 0.85em auto 0;
  max-width: 58ch; /* keeps each line whole on desktop, wraps naturally below */
  font-size: clamp(1rem, 0.94rem + 0.45vw, 1.3rem);
  line-height: 1.45;
  text-wrap: pretty;
}
.hero__lede strong { font-weight: 900; }
.hero__badge-line { margin: 0.55em 0 0; }

/* Subline under the top badge — italic, muted, matches the letter
   section's original treatment but recolored for the light hero sky. */
.hero__sub {
  margin: 32px auto 0;
  max-width: 42ch;
  font-style: italic;
  color: rgba(22, 24, 28, 0.72);
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
}

/* Long-form story copy, left-aligned prose at a readable measure. Two
   instances share this class (the neighbor story, then the "what it
   means" answer), separated visually by .hero__rule + .hero__mean-title. */
.hero__story {
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  max-width: 800px;
  text-align: left;
  line-height: 1.55;
  color: rgba(22, 24, 28, 0.82);
}
/* Set directly on the <p>, not just inherited from .hero__story — the
   theme's own stylesheet has a bare `p { font-size: ... }` rule, and a
   rule targeting the element directly always beats an inherited value
   regardless of the ancestor's specificity. */
.hero__story p {
  margin: 0 0 1em;
  font-size: 24px;
}
.hero__story p:last-child { margin-bottom: 0; }
.hero__story--mean { margin-top: clamp(1.5rem, 3vw, 2rem); }
/* Inline drop cap on the opening paragraph only, sized to sit on the
   text baseline rather than floated (a float here squeezes the wrap). */
.hero__story p:first-of-type::first-letter {
  padding-right: 0.06em;
  font-family: "DIN Next Slab W01", Georgia, serif;
  font-weight: 900;
  font-style: italic;
  font-size: 1.7em;
  color: #ec532b;
}

.hero__rule {
  width: 100%;
  max-width: 800px;
  height: 3px;
  border: 0;
  margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
  background: repeating-linear-gradient(90deg, #16181c 0 18px, transparent 18px 32px);
  opacity: 0.18;
}

.hero__mean-title {
  margin: clamp(1.75rem, 3.5vw, 2.5rem) auto 0;
  text-align: center;
  color: #16181c;
  font-family: "DIN Next Slab W01", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.7rem, 1.1rem + 2.2vw, 2.75rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
}

/* Inline signoff badge inside the closing paragraph of the "what it
   means" story — same language as .hero__badge, sized to sit in text. */
.hero__signoff {
  display: inline-block;
  margin: 0.15em 0 0 0.15em;
  padding: 0.16em 0.5em 0.22em;
  border: 3px solid #16181c;
  border-radius: 10px;
  background: #ec532b;
  color: #16181c;
  font-family: "DIN Next Slab W01", 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 #16181c;
  transform: translateY(0);
  transition: transform 150ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 150ms cubic-bezier(0.16, 1, 0.3, 1),
              background-color 150ms cubic-bezier(0.16, 1, 0.3, 1);
}
.hero__signoff:hover {
  background: #d4491f;
  transform: translateY(-1px);
  box-shadow: 0 4px 0 #16181c;
}
.hero__signoff:active {
  transform: translateY(2px);
  box-shadow: 0 0 0 #16181c;
}
.hero__signoff:focus-visible {
  outline: 3px solid #16181c;
  outline-offset: 3px;
}
/* A real <button> now — not clickable yet, but it needs to read and feel
   like one: pointer cursor, a hover lift, a press-down on click, and a
   visible keyboard focus ring. The bottom-edge shadow is the 'raised'
   state; :active flattens it to read as pressed. */
.hero__badge {
  display: inline-block;
  margin-top: 32px;
  padding: 0.3em 0.62em 0.36em;
  border: 4px solid #16181c;
  border-radius: 14px;
  background: #ec532b;
  color: #16181c;
  font-family: inherit;
  font-weight: 900;
  font-size: clamp(1.65rem, 1rem + 2.3vw, 3rem);
  line-height: 1.06;
  letter-spacing: -0.01em;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  box-shadow: 0 5px 0 #16181c;
  transform: translateY(0);
  transition: transform 150ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 150ms cubic-bezier(0.16, 1, 0.3, 1),
              background-color 150ms cubic-bezier(0.16, 1, 0.3, 1);
}
.hero__badge:hover {
  background: #d4491f;
  transform: translateY(-2px);
  box-shadow: 0 7px 0 #16181c;
}
.hero__badge:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #16181c;
}
.hero__badge:focus-visible {
  outline: 3px solid #16181c;
  outline-offset: 4px;
}

@media (max-width: 899px) {
  /* scene is 86% of viewport width at a 1000:1560 ratio → 134vw tall */
  .hero__copy { padding-top: calc(124vw + 2rem); }
}

/* ============================================================
   SCROLL CUE — last item in the flow of .hero__copy. Its top
   margin and the section's own bottom padding share one clamp
   (--cue-gap), so the space above it (from the last line of copy)
   and below it (to the next section) stay equal at every viewport
   instead of two independently-tuned offsets drifting apart.
   Pulses in place (scale + opacity), doesn't bounce or travel, so
   it reads as a heartbeat rather than a nudge.
   ============================================================ */
.hero__copy {
  --cue-gap: clamp(2.75rem, 6vw, 4.5rem);
  padding-bottom: var(--cue-gap);
}
/* Plain line glyph, no fill/border/shadow of its own. A ring on the
   wrapping container pings outward around it — expands and fades,
   loops slowly — while the arrow just breathes in opacity. Two
   different motions on one clock keeps it from reading as one
   over-busy pulse. */
.hero__scroll-cue {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin: var(--cue-gap) auto 0;
  pointer-events: none;
}
.hero__scroll-cue::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid #16181c;
  border-radius: 50%;
  opacity: 0;
  animation: hero-cue-ring 4s ease-out infinite;
}
.hero__scroll-cue__arrow {
  position: relative;
  z-index: 1;
  animation: hero-cue-fade 4s ease-in-out infinite;
}
@keyframes hero-cue-ring {
  0%   { transform: scale(0.5); opacity: 0.5; }
  75%, 100% { transform: scale(1.25); opacity: 0; }
}
@keyframes hero-cue-fade {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__scroll-cue::before { animation: none; opacity: 0; }
  .hero__scroll-cue__arrow { animation: none; opacity: 0.85; }
}

/* ============================================================
   INTRO — runs on load. Every layer's resting state is the finished
   state, so if the animation never plays the scene is still correct.
   ============================================================ */
@keyframes hero-sun-in {
  from { opacity: 0; transform: scale(0.55); }
  to   { opacity: 1; transform: none; }
}
@keyframes hero-drift-l {
  from { opacity: 0; transform: translate3d(-46px, 0, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes hero-drift-r {
  from { opacity: 0; transform: translate3d(46px, 0, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes hero-drift-l-flip {
  from { opacity: 0; transform: translate3d(-46px, 0, 0) scaleX(-1); }
  to   { opacity: 1; transform: scaleX(-1); }
}
@keyframes hero-drift-r-flip {
  from { opacity: 0; transform: translate3d(46px, 0, 0) scaleX(-1); }
  to   { opacity: 1; transform: scaleX(-1); }
}
@keyframes hero-lift {
  from { opacity: 0; transform: translate3d(0, 22px, 0) scale(0.97); }
  to   { opacity: 1; transform: none; }
}
@keyframes hero-fly-in {
  from { opacity: 0; transform: translate3d(-90px, 26px, 0) rotate(-6deg); }
  to   { opacity: 1; transform: none; }
}

.sl img { animation-fill-mode: both; animation-timing-function: var(--ease-out); }

.sl--sun img         { animation: hero-sun-in 1100ms 60ms; }
.sl--bank-left img   { animation: hero-drift-l 1000ms 140ms; }
.sl--cloud-tl img    { animation: hero-drift-l 900ms 220ms; }
.sl--cloud-front img { animation: hero-drift-l 950ms 320ms; }
.sl--cloud-mid img   { animation: hero-drift-l 900ms 420ms; }
.sl--puff img        { animation: hero-drift-r 950ms 380ms; }
.sl--cloud-r img     { animation: hero-drift-r 950ms 300ms; }
.sl--cloud-far-r img { animation: hero-drift-r 900ms 240ms; }
.sl--bank-r-far img  { animation: hero-drift-r-flip 1000ms 180ms; }
.sl--bank-r-mid img  { animation: hero-drift-r-flip 1000ms 260ms; }
.sl--hometown img    { animation: hero-lift 850ms 220ms; }
.sl--ridgefield img  { animation: hero-lift 850ms 300ms; }
.sl--revival img     { animation: hero-lift 850ms 440ms; }
.sl--bird img        { animation: hero-fly-in 1150ms 560ms; }

.hero__copy > * {
  animation: hero-lift 750ms both var(--ease-out);
}
.hero__tagline { animation-delay: 520ms; }
.hero__ask   { animation-delay: 620ms; }
.hero__badge { animation-delay: 720ms; }
.hero__sub   { animation-delay: 820ms; }
/* Long-form content below the fold of the intro: skip the staggered
   lift-in entirely so it doesn't race ahead of the headline/badge/sub
   (which still animate) or sit invisible if JS/animation stalls. */
.hero__story,
.hero__rule,
.hero__mean-title {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .sl img,
  .hero__copy > * {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
  }
  .sl { transition: none !important; }
}