/* ==========================================================================
   Light editorial system (Abi brief + homepage mockup SSOT, 2026-08-19)
   Split heroes, proof strip, spacing, and light-surface overrides.
   ========================================================================== */

/* ---------- Header scroll (subtle blur) ---------- */

.rd-header {
  transition:
    background 280ms var(--rd-ease),
    border-color 280ms var(--rd-ease),
    backdrop-filter 280ms var(--rd-ease);
}

.rd-header.is-scrolled {
  background: rgba(244, 240, 232, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom-color: rgba(26, 31, 34, 0.08);
}

/* ---------- Full-bleed photo heroes (new imagery, copy overlaid) ---------- */

.rd-hero-eyebrow {
  margin: 0 0 18px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rd-muted);
}

.rd-hero-sub {
  margin: 28px 0 0;
  max-width: 520px;
  font-size: clamp(16px, 1.55vw, 20px);
  line-height: 1.55;
  color: var(--rd-muted);
  text-wrap: pretty;
}

.rd-hero-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.rd-hero-photo picture,
.rd-hero-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--rd-hero-pos, 50% 50%);
  will-change: transform;
}

/* Parallax headroom inside clipped layer */
.rd-hero-photo[data-rd-parallax] img {
  height: 112%;
  margin-top: -4%;
}

:is(.rd-hero--light, .sv-hero--light, .wu-hero--light, .ct-hero--light) {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  /* Min 16:9 width-based height, but grow when copy + CTAs need more room (no max-height cap) */
  min-height: max(calc(100vw * 9 / 16), 32rem);
  height: auto;
  justify-content: flex-start;
  align-items: stretch;
  /* Clear fixed header (~72px) plus breathing room so first line is never under the nav */
  padding: max(clamp(108px, 12vh, 152px), calc(72px + 2.75rem)) 0 clamp(28px, 3vh, 40px);
  overflow: visible;
}

:is(.rd-hero--light, .sv-hero--light, .wu-hero--light, .ct-hero--light) .rd-hero-photo {
  inset: 0;
}

/* Warm editorial fade over photography (Abi mockup) — ivory wash, not dark scrim */
:is(.rd-hero--light, .sv-hero--light, .wu-hero--light, .ct-hero--light)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      102deg,
      rgba(244, 240, 232, 0.96) 0%,
      rgba(244, 240, 232, 0.88) 18%,
      rgba(244, 240, 232, 0.62) 36%,
      rgba(244, 240, 232, 0.28) 52%,
      rgba(244, 240, 232, 0.08) 64%,
      rgba(244, 240, 232, 0) 76%
    ),
    linear-gradient(to top, rgba(244, 240, 232, 0.42) 0%, rgba(244, 240, 232, 0) 32%),
    linear-gradient(to bottom, rgba(244, 240, 232, 0.28) 0%, rgba(244, 240, 232, 0) 22%);
}

.rd-hero--home::after {
  background:
    linear-gradient(
      102deg,
      rgba(244, 240, 232, 0.97) 0%,
      rgba(244, 240, 232, 0.9) 20%,
      rgba(244, 240, 232, 0.68) 38%,
      rgba(244, 240, 232, 0.32) 54%,
      rgba(244, 240, 232, 0.06) 66%,
      rgba(244, 240, 232, 0) 78%
    ),
    linear-gradient(to top, rgba(244, 240, 232, 0.38) 0%, rgba(244, 240, 232, 0) 30%),
    linear-gradient(to bottom, rgba(244, 240, 232, 0.24) 0%, rgba(244, 240, 232, 0) 20%);
}

.sv-hero--light::after,
.ct-hero--light::after {
  background:
    linear-gradient(
      100deg,
      rgba(244, 240, 232, 0.95) 0%,
      rgba(244, 240, 232, 0.84) 22%,
      rgba(244, 240, 232, 0.5) 42%,
      rgba(244, 240, 232, 0.14) 58%,
      rgba(244, 240, 232, 0) 72%
    ),
    linear-gradient(to top, rgba(244, 240, 232, 0.36) 0%, rgba(244, 240, 232, 0) 28%);
}

.rd-hero--light .rd-hero-content {
  position: relative;
  z-index: 2;
  max-width: min(640px, 54vw);
  margin-top: 0;
  margin-left: 0;
  margin-right: auto;
  align-self: flex-start;
  padding-left: 48px;
  padding-right: 48px;
}

.sv-hero--light {
  --rd-hero-pos: 58% 50%;
  --rd-hero-pos-m: 62% 44%;
  padding-bottom: clamp(28px, 3vh, 40px);
}

.rd-hero--home {
  --rd-hero-pos: 48% 46%;
  --rd-hero-pos-m: 52% 42%;
}

/* Same 16:9 band as services; smaller type so eyebrow + 3-line h1 + sub + CTAs fit without clip */
.rd-hero--home .rd-h1 {
  font-size: clamp(34px, 5.4vw, 88px);
  line-height: 0.96;
}

.rd-hero--home .rd-hero-eyebrow {
  margin-bottom: 14px;
}

.rd-hero--home .rd-hero-sub {
  margin-top: 22px;
}

.rd-hero--home .rd-cta-row {
  margin-top: 28px;
}

/* Headline mask animation clips ascenders when the hero box is height-capped — skip on light heroes */
.rd-hero--light .rd-h1-line {
  overflow: visible;
  padding: 0;
  margin: 0;
}

.rd-hero--light [data-rd-line-inner] {
  transform: none !important;
  transition: none !important;
}

.sv-hero--light .sv-hero-inner {
  position: relative;
  z-index: 2;
  max-width: min(560px, 50vw);
  margin-left: 0;
  margin-right: auto;
  align-self: flex-start;
  padding-left: 48px;
  padding-right: 48px;
}

.wu-hero--light {
  --rd-hero-pos: 50% 48%;
  --rd-hero-pos-m: 54% 42%;
  padding-bottom: clamp(28px, 3vh, 40px);
}

.wu-hero--light .wu-hero-grid {
  position: relative;
  z-index: 2;
  max-width: min(620px, 52vw);
  margin-left: 0;
  margin-right: auto;
  align-self: flex-start;
  padding-left: 48px;
  padding-right: 48px;
}

.ct-hero--light {
  --rd-hero-pos: 62% 50%;
  --rd-hero-pos-m: 66% 44%;
}

.ct-hero--light .ct-hero-inner {
  position: relative;
  z-index: 2;
  max-width: min(560px, 50vw);
  margin: 0;
  margin-right: auto;
  align-self: flex-start;
  padding-left: 48px;
  padding-right: 48px;
}

/* Beat legacy contact hero bottom-align + centered inner column */
.ct-hero.ct-hero--light {
  min-height: max(calc(100vw * 9 / 16), 32rem);
  justify-content: flex-start;
  align-items: stretch;
  padding: max(clamp(108px, 12vh, 152px), calc(72px + 2.75rem)) 0 clamp(28px, 3vh, 40px);
}

/* Process — no dark glow smudge on light theme */
.pr-hero--light {
  min-height: 0;
  justify-content: flex-start;
  padding: clamp(108px, 11vh, 144px) 48px clamp(40px, 5vh, 64px);
  background: var(--rd-bg);
}

.pr-hero--light .pr-hero-glow {
  display: none;
}

.pr-hero--light .pr-hero-inner {
  position: relative;
  z-index: 1;
}

/* No dark scrim on light heroes — imagery stays bright */
:is(.rd-hero--light, .sv-hero--light, .wu-hero--light, .ct-hero--light) .rd-hero-scrim,
:is(.rd-hero--light, .sv-hero--light, .wu-hero--light, .ct-hero--light) .rd-hero-vignette {
  display: none;
}

@media (max-width: 900px) {
  :is(.rd-hero--light, .sv-hero--light, .wu-hero--light, .ct-hero--light) {
    min-height: max(calc(100vw * 10 / 16), 36rem);
    padding-top: max(clamp(100px, 22vw, 132px), calc(72px + 2rem));
  }

  .rd-hero--home .rd-h1 {
    font-size: clamp(28px, 7.8vw, 38px);
    line-height: 1.02;
  }

  .rd-hero--light .rd-hero-content,
  .sv-hero--light .sv-hero-inner,
  .wu-hero--light .wu-hero-grid,
  .ct-hero--light .ct-hero-inner {
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }

  .rd-hero-photo img {
    object-position: var(--rd-hero-pos-m, var(--rd-hero-pos, 50% 42%));
  }

  :is(.rd-hero--light, .sv-hero--light, .wu-hero--light, .ct-hero--light)::after {
    background:
      linear-gradient(
        180deg,
        rgba(244, 240, 232, 0.94) 0%,
        rgba(244, 240, 232, 0.72) 28%,
        rgba(244, 240, 232, 0.28) 52%,
        rgba(244, 240, 232, 0) 68%
      ),
      linear-gradient(
        102deg,
        rgba(244, 240, 232, 0.88) 0%,
        rgba(244, 240, 232, 0.45) 42%,
        rgba(244, 240, 232, 0) 68%
      );
  }

  .pr-hero--light {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rd-hero-photo[data-rd-parallax] img {
    height: 100%;
    margin-top: 0;
    transform: none !important;
  }
}

/* ---------- Proof strip (mockup) ---------- */

.rd-proof-strip {
  background: var(--rd-stone);
  border-top: 1px solid rgba(26, 31, 34, 0.06);
  border-bottom: 1px solid rgba(26, 31, 34, 0.06);
  padding: 28px 48px;
}

.rd-proof-strip__inner {
  max-width: 1560px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(20px, 2.5vw, 40px);
}

.rd-proof-strip__item {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rd-proof-strip__stars {
  color: var(--rd-green);
  font-size: 11px;
  letter-spacing: 0.16em;
}

.rd-proof-strip__quote {
  margin: 0;
  font-family: var(--rd-font-display);
  font-size: clamp(15px, 1.25vw, 18px);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--rd-ink);
  text-wrap: pretty;
}

.rd-proof-strip__client {
  font-size: 11px;
  line-height: 1.5;
  color: var(--rd-muted);
}

/* ---------- Editorial spacing ---------- */

.rd-stack-teaser {
  padding: clamp(96px, 12vw, 160px) 48px;
}

.rd-work--editorial {
  padding-top: clamp(72px, 9vw, 120px);
  padding-bottom: clamp(120px, 14vw, 180px);
}

.rd-work--editorial .rd-card--tnt,
.rd-work--editorial .rd-card--iv {
  margin-top: 0;
}

.wk-portfolio {
  padding-top: clamp(48px, 6vw, 88px);
  padding-bottom: clamp(96px, 10vw, 140px);
}

/* ---------- Pricing + contact UI (light editorial, not SaaS green) ---------- */

.sv-price,
.sv-price-prefix {
  color: var(--rd-ink);
}

.sv-card {
  border-radius: 2px;
  box-shadow: none;
}

.sv-card-cta--core,
.sv-card-cta--core:hover {
  background: var(--rd-btn-bg);
  border-color: var(--rd-btn-bg);
  color: var(--rd-btn-fg);
}

.sv-tile.is-selected,
.sv-tile.is-selected:hover,
.ct-tile.is-selected,
.ct-tile.is-selected:hover {
  background: var(--rd-btn-bg);
  border-color: var(--rd-btn-bg);
  color: var(--rd-btn-fg);
}

.ct-tile,
.ct-card {
  border-radius: 2px;
  box-shadow: none;
}

/* ---------- Cookie + helper widget (light surfaces) ---------- */

.uf-helper,
.cookie-consent {
  --surface: var(--rd-surface);
  --surface-raised: var(--rd-bg);
  --brand-carbon: var(--rd-btn-fg);
  --shadow-mockup: rgba(26, 31, 34, 0.08) 0 18px 40px -12px;
}

.cookie-consent {
  background: rgba(244, 240, 232, 0.94);
  border-top: 1px solid rgba(26, 31, 34, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.cookie-consent .btn-primary {
  background: var(--rd-btn-bg);
  border-color: var(--rd-btn-bg);
  color: var(--rd-btn-fg);
}

.cookie-consent .btn-primary:hover {
  background: var(--rd-green-deep);
  border-color: var(--rd-green-deep);
  color: var(--rd-btn-fg);
}

/* ---------- Why Us / Process dark-pattern overrides ---------- */

.wu-hero-glow,
.sv-hero-glow,
.ct-hero-glow,
.wk-hero-glow,
.pr-hero-glow {
  display: none;
}

/* Photo heroes beat legacy .rd-hero mobile stack rules */
@media (max-width: 900px) {
  .rd-hero.rd-hero--light {
    min-height: 0;
    justify-content: flex-start;
    padding-top: clamp(100px, 22vw, 128px);
  }

  .sv-hero.sv-hero--light,
  .wu-hero.wu-hero--light,
  .ct-hero.ct-hero--light {
    min-height: 0;
    justify-content: flex-start;
    padding-top: clamp(100px, 22vw, 128px);
  }
}

.wu-frame,
.wu-tile,
.pr-spine-node {
  border-radius: 2px;
}

@media (max-width: 1024px) {
  .rd-proof-strip__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 28px;
  }
}

@media (max-width: 900px) {
  .rd-proof-strip {
    padding: 24px;
  }

  .rd-proof-strip__inner {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rd-header.is-scrolled {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* ---------- Dark-pattern remnants → light editorial ---------- */

.rd-band-dark::before {
  background: linear-gradient(to bottom, var(--rd-bg) 0%, rgba(244, 240, 232, 0) 100%);
}

.rd-band-dark::after {
  background: linear-gradient(to top, var(--rd-bg) 0%, rgba(244, 240, 232, 0) 100%);
}

.rd-card-inner {
  background: var(--rd-stone);
}

.rd-card-vignette {
  background: radial-gradient(115% 100% at 50% 45%, transparent 62%, rgba(26, 31, 34, 0.12) 100%);
}

.rd-card-view {
  color: var(--rd-ink);
}

:is(.rd-work, .wk-portfolio) .project-card__media {
  border-radius: 2px;
  border: 1px solid rgba(26, 31, 34, 0.08);
  background: var(--rd-stone);
  box-shadow: none;
}

:is(.rd-work, .wk-portfolio) .rd-work-card {
  --card-hairline-soft: rgba(26, 31, 34, 0.1);
  --card-shadow: none;
}

.rd-footer {
  background: var(--rd-stone);
  border-top: 1px solid rgba(26, 31, 34, 0.08);
}

.rd-footer,
.rd-footer a {
  color: var(--rd-muted);
}

.rd-footer a:hover {
  color: var(--rd-ink);
}