/* ── Scenes: the four services at the top of the page ──────────────────── */
.scene {
  --field: var(--ivory);
  --bd: var(--bd-ivory);
  --fg: var(--ink);
  --fg-soft: var(--ink-soft);
  --wave-h: clamp(44px, 7vw, 120px);
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--nav-h) + 1rem) 0 calc(var(--wave-h) + 4.5rem);
  background: var(--field);
  color: var(--fg);
  overflow-x: clip;
}
.scene--champagne { --field: var(--champagne); --bd: var(--bd-champagne); }
.scene--sage { --field: var(--sage); --bd: var(--bd-sage); }
.scene--green {
  --field: var(--green); --bd: var(--bd-green);
  --fg: var(--light); --fg-soft: var(--light-soft);
}

.scene--pine {
  --field: var(--pine); --bd: var(--bd-pine);
  --fg: var(--light); --fg-soft: var(--light-soft);
}

.scene__anchor { position: absolute; top: 0; }

/* The soft wave each scene rises on, sitting over the end of the one before. */
.scene__wave {
  position: absolute; left: 0; bottom: calc(100% - 1px);
  width: 100%; height: var(--wave-h);
  fill: var(--field);
  transform-origin: bottom;
  pointer-events: none;
}

/* The big soft word behind the photo. */
.scene__backdrop, .backdrop {
  position: absolute; left: 0; right: 0; z-index: 0;
  max-width: none;
  font-family: var(--font-serif);
  font-weight: 900;
  font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 144;
  font-size: var(--fs-backdrop);
  line-height: 0.8;
  letter-spacing: -0.035em;
  white-space: nowrap;
  text-align: center;
  color: var(--bd);
  pointer-events: none;
  user-select: none;
}
.scene__backdrop { bottom: calc(var(--wave-h) + 1rem); }
.scene__backdrop span, .backdrop span { display: inline-block; }

.scene__inner {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
}

.scene__text { position: relative; z-index: 3; }
.scene__title { display: grid; gap: 0.75rem; font-weight: inherit; }
.scene__label {
  font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.005em;
  color: var(--fg-soft);
}
.scene__word {
  display: block;
  overflow: hidden;
  padding-bottom: 0.04em;
  margin-left: -0.04em;
  font-size: var(--fs-word);
  font-weight: 800;
  line-height: 0.84;
  letter-spacing: -0.045em;
  font-variation-settings: 'opsz' 96;
}
.scene__letter { display: inline-block; transform-origin: bottom left; }
.scene__copy {
  max-width: 31rem;
  margin: 1.75rem 0 1.75rem;
  font-size: 1.125rem; line-height: 1.55;
}

/* Three short points, side by side, each under a short gold bar. */
.scene__points {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem;
  max-width: 36rem; margin-bottom: 2.25rem;
}
.point { display: grid; gap: 0.3rem; align-content: start; }
.point::before { content: ''; width: 28px; height: 4px; border-radius: 2px; background: var(--gold); margin-bottom: 0.5rem; }
.point__title { font-size: 1.0625rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
.point__text { font-size: 0.95rem; line-height: 1.45; color: var(--fg-soft); }
/* Where the text column is too narrow for three columns, list them instead. */
@media (max-width: 1279px) {
  .scene__points { grid-template-columns: 1fr; gap: 0.8rem; }
  .point { grid-template-columns: auto 1fr; column-gap: 0.75rem; align-items: baseline; }
  .point::before { grid-row: span 2; align-self: center; width: 4px; height: 100%; min-height: 34px; margin: 0; }
}

/* The photograph in a tall arch. */
.scene__stage {
  position: relative;
  height: min(66vh, 700px);
  height: min(66svh, 700px);
}
.scene__arch {
  position: absolute; inset: 0; margin: auto;
  height: 100%; max-width: 62%;
  aspect-ratio: 3 / 4;
  border-radius: var(--arch);
  overflow: hidden;
  background: var(--bd);
  z-index: 1;
}
.scene__arch-inner { position: absolute; inset: -3%; }
.scene__arch-inner img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); }


/* Hay drifting down past the first photo, like the beans in a coffee grinder. */
.hay { position: absolute; inset: -10% 10% 0; z-index: 2; pointer-events: none; overflow: hidden; }
.hay__strand {
  position: absolute; top: 0; left: var(--x);
  width: 4px; height: var(--h); border-radius: 3px;
  background: var(--c);
  opacity: 0;
  animation: hay-fall var(--d) linear var(--delay) infinite;
}
@keyframes hay-fall {
  0% { transform: translate3d(0, -10vh, 0) rotate(var(--r)); opacity: 0; }
  12% { opacity: 0.9; }
  85% { opacity: 0.9; }
  100% { transform: translate3d(var(--sway), 90vh, 0) rotate(calc(var(--r) + 220deg)); opacity: 0; }
}

/* Previous / next and where you are among the four: a vertical rail on the
   right edge, with room kept for it beside the content. */
.scene { --rail: 64px; }
.scene__inner { padding-right: calc(var(--gutter) + var(--rail)); }
.scene__pager {
  position: absolute; right: max(10px, calc(var(--gutter) * 0.6)); top: 50%; z-index: 4;
  transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 0.75rem;
}
.scene__arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: color-mix(in srgb, var(--fg) 9%, transparent);
  color: var(--fg);
  transition: background-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), opacity var(--t-fast);
}
.scene__arrow .icon { transform: rotate(90deg); }
@media (hover: hover) and (pointer: fine) {
  .scene__arrow:hover { background: color-mix(in srgb, var(--fg) 18%, transparent); }
}
.scene__arrow:active { transform: scale(0.92); }
.scene__arrow:disabled { opacity: 0.3; pointer-events: none; }
.scene__dots { display: flex; flex-direction: column; align-items: center; }
.scene__dots a {
  display: block; width: 8px; height: 8px; border-radius: 4px;
  background: var(--fg); opacity: 0.3;
  transition: height var(--t) var(--ease), opacity var(--t-fast);
}
.scene__dots a:hover { opacity: 0.6; }
.scene__dots a.is-active { height: 26px; opacity: 1; }
/* A larger target for fingers and the mouse than the dot itself. */
.scene__dots li { padding: 3px 14px; }

/* Before the scripts take over (motion allowed only). */
.motion .scene__letter { transform: translateY(110%); }
.motion .scene__label, .motion .scene__copy, .motion .point, .motion .scene__cta, .motion .scene__backdrop span { opacity: 0; visibility: hidden; }
.motion .scene__arch { clip-path: inset(100% 0% 0% 0% round 999px 999px 32px 32px); }
/* The first photo drops in rather than opening, and the nav waits for it. */
.motion .scene:first-child .scene__arch { clip-path: none; visibility: hidden; }
.motion .scene:first-child .hay, .motion .nav .logo, .motion .nav__links, .motion .nav__cta, .motion .nav__toggle { opacity: 0; visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  .hay { display: none; }
}

/* ── Phone and tablet ─────────────────────────────────────────────────── */
@media (max-width: 899px) {
  .scene { justify-content: flex-start; }
  .scene__inner { grid-template-columns: 1fr; gap: 0.5rem; }
  .scene__word { font-size: clamp(5rem, 24vw, 10rem); }
  .scene__copy { margin: 1.25rem 0 1.5rem; font-size: 1.0625rem; }
  .scene__points { margin-bottom: 1.75rem; }
  .scene__stage { height: min(118vw, 640px); }
  .scene__arch { max-width: 74%; }
  .scene__backdrop { bottom: calc(var(--wave-h) + 3.5rem); }
}
@media (max-width: 559px) {
  .scene__inner { padding-right: var(--gutter); }
  .scene__pager { display: none; }
  .scene__points { grid-template-columns: 1fr; gap: 0.9rem; }
}