/* ---------------- Home density overrides ---------------- */
/* Tighter vertical pacing — scoped to this page only */
:root {
  --pad-section-y: clamp(28px, 4.5vw, 64px);
  --stack-lg: clamp(24px, 3vw, 40px);
}

/* ---------------- Home-specific ---------------- */


/* Hero — SPLIT variant */
#hero-split {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 0;
  /* Fill the desktop viewport down to the fixed nav's resting bottom edge.
     This keeps the logo marquee flush to the hero without letting the nav
     overlap the next section. The 100px offset is the 68px banner reserve
     plus the nav's 32px bottom inset. */
  min-height: max(720px, calc(100svh - 100px));
  padding-top: 0;
  padding-bottom: 0;
}

html.banner-dismissed #hero-split {
  min-height: max(720px, calc(100svh - 32px));
}
.split-left {
  padding: clamp(28px, 4vw, 56px) var(--pad-gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: clamp(20px, 2.5vw, 32px);
}
.hero-btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.hero-btns .btn {
  padding: 16px 28px;
  font-size: 13px;
  letter-spacing: 0.12em;
}
.hero-desc {
  display: block;
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.6;
  color: var(--fg-muted);
  max-width: 460px;
  margin: 0;
}
.split-right {
  background: var(--fg);
  position: relative;
  overflow: hidden;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-cover-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  opacity: 1;
  pointer-events: none;
}

#hero-split .split-headline,
#hero-split .hero-desc,
#hero-split .hero-btns {
  opacity: 1;
  transform: none;
  animation: none;
}

.split-right::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, color-mix(in oklch, var(--fg) 20%, transparent), transparent 38%),
    linear-gradient(180deg, transparent 62%, color-mix(in oklch, var(--fg) 24%, transparent));
  opacity: 1;
  pointer-events: none;
}
@media (max-width: 768px) {
  #hero-split { grid-template-columns: 1fr; min-height: auto; }
  html.banner-dismissed #hero-split { min-height: auto; }
  .split-right { min-height: clamp(360px, 80vw, 480px); }
}

/* Defer below-the-fold layout and paint work on mobile-sized devices. */
@media (max-width: 900px) {
  .client-bar,
  .love,
  .closing-cta,
  footer.kaci-footer {
    content-visibility: auto;
    contain-intrinsic-size: 1px 900px;
  }
}

/* ── Hero Card Cluster — polaroid scatter ── */
.hero-star {
  position: relative;
  z-index: 2;
  width: 560px;
  height: 660px;
  flex-shrink: 0;
  margin-top: 60px;
}

@keyframes hsc-drop {
  from {
    opacity: 0;
    transform: rotate(var(--rot)) translateY(-40px) scale(0.88);
  }
  to {
    opacity: 1;
    transform: rotate(var(--rot)) translateY(0);
  }
}

.hsc {
  position: absolute;
  background: #F5F3EE;
  border-radius: 1px;
  box-sizing: border-box;
  --rot: 0deg;
  --drop-delay: 0ms;
  padding: 9px 9px 38px;
  transform: rotate(var(--rot));
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.4s ease;
  box-shadow:
    0 2px 6px rgba(0,0,0,0.28),
    0 10px 32px rgba(0,0,0,0.22),
    0 1px 2px rgba(0,0,0,0.14);
  opacity: 0;
  overflow: hidden;
}
#hero-split.hero-ready .hsc {
  animation: hsc-drop 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--drop-delay);
}
#hero-split.hero-ready .hsc:not(.hsc-brand) {
  animation: none;
  transform: translate(var(--fly-x, 0px), var(--fly-y, 0px))
             rotate(var(--rot))
             scale(0.4);
  opacity: 0;
}

.hsc:hover {
  transform: rotate(calc(var(--rot) * 0.15)) translateY(-18px) scale(1.07);
  z-index: 50 !important;
  box-shadow:
    0 8px 20px rgba(0,0,0,0.28),
    0 24px 60px rgba(0,0,0,0.22);
}

.hsc img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hsc-label {
  position: absolute;
  bottom: 11px;
  left: 0; right: 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(15,10,5,0.38);
  pointer-events: none;
}

/* Scattered positions — big rotations, heavy overlap, all within container */
.hsc-pa   { width: 162px; height: 198px; top: -5px;  left: 0px;   --rot: -13deg; z-index: 2; }
.hsc-st   { width: 148px; height: 184px; top: 20px;  left: 238px; --rot: 17deg;  z-index: 3; }
.hsc-wide { width: 178px; height: 216px; top: 18px;  left: 92px;  --rot: -8deg;  z-index: 4; }
.hsc-bt   { width: 188px; height: 228px; top: 0px;   left: 312px; --rot: 10deg;  z-index: 4; }
.hsc-logo { width: 158px; height: 194px; top: 198px; left: 60px;  --rot: -19deg; z-index: 3; }
.hsc-brand { width: 188px; height: 228px; top: 165px; left: 215px; --rot: -3deg;  z-index: 6; }

.hsc-sq4  { width: 142px; height: 176px; top: 172px; left: 390px; --rot: 13deg;  z-index: 2; }
.hsc-pb   { width: 162px; height: 198px; top: 360px; left: 292px; --rot: -9deg;  z-index: 3; }
.hsc-sqa  { width: 155px; height: 190px; top: 400px; left: 40px;  --rot: 16deg;  z-index: 2; }
.hsc-sq3  { width: 170px; height: 208px; top: 412px; left: 168px; --rot: -6deg;  z-index: 3; }
.hsc-sqb  { width: 140px; height: 172px; top: 432px; left: 408px; --rot: 8deg;   z-index: 1; }

/*
  Collapse vectors — offset from each card's natural position to the brand card centre.
  Brand card centre inside .hero-star ≈ (276px, 279px).
  Each vector = brand_centre − card_centre, so adding it moves the card onto the brand card.
*/
.hsc-pa   { --fly-x:  195px; --fly-y:  185px; --fly-delay:   0ms; }
.hsc-st   { --fly-x:  -36px; --fly-y:  167px; --fly-delay:  40ms; }
.hsc-wide { --fly-x:   95px; --fly-y:  153px; --fly-delay:  20ms; }
.hsc-bt   { --fly-x: -130px; --fly-y:  165px; --fly-delay:  10ms; }
.hsc-logo { --fly-x:  191px; --fly-y:  -16px; --fly-delay:  60ms; }
.hsc-sq4  { --fly-x: -185px; --fly-y:   19px; --fly-delay:  50ms; }
.hsc-pb   { --fly-x:  -97px; --fly-y: -180px; --fly-delay:  80ms; }
.hsc-sqa  { --fly-x:  158px; --fly-y: -216px; --fly-delay:  90ms; }
.hsc-sq3  { --fly-x:   23px; --fly-y: -237px; --fly-delay:  70ms; }
.hsc-sqb  { --fly-x: -202px; --fly-y: -239px; --fly-delay: 100ms; }

/* Default: non-brand cards sit collapsed on top of the brand card */
.hsc:not(.hsc-brand) {
  animation: none;
  transform: translate(var(--fly-x, 0px), var(--fly-y, 0px))
             rotate(var(--rot))
             scale(0.4);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.6s ease;
  transition-delay: var(--fly-delay, 0ms);
}

/* .is-expanded is controlled by JS so the stack can fan out and collapse deliberately */
.hero-star.is-expanded .hsc:not(.hsc-brand) {
  transform: rotate(var(--rot));
  opacity: 1;
  pointer-events: auto;
}
#hero-split.hero-ready .hero-star.is-expanded .hsc:not(.hsc-brand) {
  transform: rotate(var(--rot));
  opacity: 1;
  pointer-events: auto;
}
#hero-split.hero-ready .hero-star.is-expanded .hsc:not(.hsc-brand):hover {
  transform: rotate(calc(var(--rot) * 0.15)) translateY(-18px) scale(1.07);
}

.hero-star.is-expanded .hsc-brand {
  transform: rotate(0deg) scale(1) translateY(-8px);
  z-index: 30 !important;
  overflow: hidden;
  box-shadow:
    0 12px 32px rgba(0,0,0,0.32),
    0 32px 80px rgba(0,0,0,0.24);
}

/* ── Brand card ripple on entry ── */
@keyframes brand-pulse {
  0%   { box-shadow: 0 2px 6px rgba(0,0,0,0.28), 0 10px 32px rgba(0,0,0,0.22), 0 0 0 0px  rgba(147,169,210,0.55); }
  100% { box-shadow: 0 2px 6px rgba(0,0,0,0.28), 0 10px 32px rgba(0,0,0,0.22), 0 0 0 22px rgba(147,169,210,0);   }
}

/* Brand card: bigger on load, ripple plays 3× after drop-in */
.hsc-brand {
  overflow: visible;
  transform: rotate(var(--rot)) scale(1);
  animation: none;
}

.hsc-brand .hsc-label { bottom: 11px; }


@media (prefers-reduced-motion: reduce) {
  .hsc { transition: none; animation: none; opacity: 1; }
  .hsc:not(.hsc-brand) { transition: none; }
  .hsc-brand { animation: none; }
  .hsc-brand::after { animation: none; opacity: 0.55; }
  .hero-star.is-expanded .hsc:not(.hsc-brand),
  .hero-star.is-expanded .hsc-brand { transition: none; }
}

.split-headline {
  font-family: var(--font-serif);
  font-size: clamp(56px, 8vw, 92px);
  line-height: 1.05;
  letter-spacing: normal;
}
.split-headline em {
  font-family: var(--font-script) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  color: var(--accent-copy);
}

.hero-btns .btn {
  font-weight: 400;
}

/* Client ticker bar */
.client-bar {
  background: var(--fg);
  color: var(--cream);
  padding: 22px 0;
  overflow: hidden;
}

.client-bar,
.love,
.closing-cta {
  /* #section-services deliberately excluded: it sits close enough to
     the fold that content-visibility:auto's placeholder/real-size
     mismatch (contain-intrinsic-size 720px vs its true ~900px+
     height) was producing a transient rendering seam right at its top
     edge on load. Little paint-skipping benefit for a section this
     close to the viewport anyway. */
  content-visibility: auto;
}

.client-bar {
  contain-intrinsic-size: 96px;
}

.closing-cta {
  contain-intrinsic-size: 720px;
}

.love {
  contain-intrinsic-size: 980px;
}
.client-bar .marquee-track {
  font-family: var(--font-mono);
  font-size: 14px;
  font-style: normal;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream);
  animation-duration: 30s;
}
.client-bar .marquee-track .dot { background: var(--accent); width: 6px; height: 6px; }

/* Logo marquee — continuous right-to-left scroll with hover pause */
.logo-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.logo-marquee-track {
  display: flex;
  width: max-content;
  animation: kaci-logo-marquee 40s linear infinite;
  will-change: transform;
}
.logo-marquee:hover .logo-marquee-track {
  animation-play-state: paused;
}
.logo-marquee-item {
  flex: 0 0 auto;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 28px;
}
@media (min-width: 1024px) {
  .logo-marquee-item {
    height: 64px;
    padding: 0 40px;
  }
}
.logo-marquee-link {
  display: block;
  text-decoration: none;
  border-radius: 12px;
  outline: none;
}
.logo-marquee-link:focus-visible { box-shadow: 0 0 0 2px var(--focus-ring); }
.logo-marquee-img {
  display: block;
  height: 48px;
  width: 48px;
  border-radius: 10px;
  object-fit: cover;
  opacity: 0.88;
  transition: opacity 0.4s ease, transform 0.4s ease;
  cursor: pointer;
}
@media (min-width: 1024px) { .logo-marquee-img { height: 60px; width: 60px; border-radius: 12px; } }
.logo-marquee-item:hover .logo-marquee-img { opacity: 1; transform: scale(1.04); }
@keyframes kaci-logo-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-marquee-track { animation: none; }
}

/* Services block */
.services-head {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
  align-items: end;
  margin-bottom: var(--stack-lg);
}
.services-head h2 { font-size: clamp(34px, 4.5vw, 56px); letter-spacing: normal; line-height: 1.08; }
.services-head h2 em {
  font-style: italic;
  color: var(--accent-copy);
  position: relative;
}
.services-head h2 em::after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.45s;
}
.services-head.is-visible h2 em::after { transform: scaleX(1); }

.services-list {
  border-top: 1px solid var(--rule);
}
/* Staggered row entrance — one bar at a time */
.services-list .svc-row {
  opacity: 0;
  transform: translateX(-32px);
  transition:
    opacity 0.65s cubic-bezier(0.25, 1, 0.5, 1),
    transform 0.65s cubic-bezier(0.25, 1, 0.5, 1);
}
/* .svc-title/.svc-desc below run their own nested transform on top of this
   row's transform while both are mid-transition — without an explicit
   compositing layer per element, that overlap can render as doubled/smeared
   glyphs on some GPUs. will-change forces each into its own layer so the
   two transforms interpolate independently instead of visually compounding. */
.services-list .svc-row,
.services-list .svc-row .svc-title,
.services-list .svc-row .svc-desc {
  will-change: opacity, transform;
}
.services-list.is-visible .svc-row:nth-child(1) { opacity: 1; transform: translateX(0); transition-delay:    0ms; }
.services-list.is-visible .svc-row:nth-child(2) { opacity: 1; transform: translateX(0); transition-delay:  480ms; }
.services-list.is-visible .svc-row:nth-child(3) { opacity: 1; transform: translateX(0); transition-delay:  960ms; }
/* Title slides in 100ms after its row */
.services-list .svc-row .svc-title {
  opacity: 0;
  transform: translateX(-16px);
  transition:
    opacity  0.6s cubic-bezier(0.25, 1, 0.5, 1),
    transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
.services-list.is-visible .svc-row:nth-child(1) .svc-title { opacity: 1; transform: translateX(0); transition-delay:  100ms; }
.services-list.is-visible .svc-row:nth-child(2) .svc-title { opacity: 1; transform: translateX(0); transition-delay:  580ms; }
.services-list.is-visible .svc-row:nth-child(3) .svc-title { opacity: 1; transform: translateX(0); transition-delay: 1060ms; }
/* Description slides in 100ms after its title */
.services-list .svc-row .svc-desc {
  opacity: 0;
  transform: translateX(-16px);
  transition:
    opacity  0.6s cubic-bezier(0.25, 1, 0.5, 1),
    transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
.services-list.is-visible .svc-row:nth-child(1) .svc-desc { opacity: 1; transform: translateX(0); transition-delay:  200ms; }
.services-list.is-visible .svc-row:nth-child(2) .svc-desc { opacity: 1; transform: translateX(0); transition-delay:  680ms; }
.services-list.is-visible .svc-row:nth-child(3) .svc-desc { opacity: 1; transform: translateX(0); transition-delay: 1160ms; }
.svc-row {
  position: relative;
  display: grid;
  grid-template-columns: 60px 1fr 2fr 120px;
  gap: 32px;
  padding: 32px 0 32px 14px;
  border-bottom: none;
  align-items: baseline;
  cursor: pointer;
  transition: background 0.3s ease;
}
/* Bottom rule wipes in left-to-right with the row */
.svc-row::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 1px;
  background: var(--rule);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1);
}
.services-list.is-visible .svc-row:nth-child(1)::after { transform: scaleX(1); transition-delay:    0ms; }
.services-list.is-visible .svc-row:nth-child(2)::after { transform: scaleX(1); transition-delay:  480ms; }
.services-list.is-visible .svc-row:nth-child(3)::after { transform: scaleX(1); transition-delay:  960ms; }
/* Accent left bar — replaces layout-shifting padding with a transform */
.svc-row::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.svc-row:hover {
  background: color-mix(in oklch, var(--accent) 8%, transparent);
}
.svc-row:hover::before { transform: scaleY(1); }
.svc-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--fg-muted);
}
.svc-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(28px, 3.2vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  position: relative;
  display: inline-block;
}
.svc-title::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 0;
  width: 100%; height: 1.5px;
  background: var(--fg);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.svc-row:hover .svc-title::after { transform: scaleX(1); }
.svc-desc {
  font-size: 15px;
  color: var(--fg-muted);
  max-width: 520px;
  line-height: 1.55;
}
.svc-arrow {
  justify-self: end;
  font-family: var(--font-mono);
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: transform 0.3s ease;
}
.svc-row:hover .svc-arrow { transform: translateX(8px); color: var(--accent-copy); }
.svc-row:hover .svc-num { color: var(--accent-copy); transition: color 0.25s ease; }

/* Results strip */
.results-head { margin-bottom: var(--stack-lg); }
.results-head h2 { font-size: clamp(34px, 4.5vw, 56px); letter-spacing: normal; line-height: 1.08; }
.results-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.result-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rule);
  border-radius: 4px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: var(--bg);
  transition:
    border-color 240ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 240ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
}
.result-card:hover {
  border-color: color-mix(in oklch, var(--fg) 30%, transparent);
  box-shadow: 0 4px 24px rgba(88, 71, 56, 0.08);
  transform: translateY(-3px);
}
.result-card-media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.result-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
}
.result-card:hover .result-card-media img { transform: scale(1.04); }
.result-card-body {
  padding: 24px 24px 28px;
}
.result-card-body .stat-num {
  color: var(--accent-copy);
  font-family: var(--font-sans);
  font-size: clamp(32px, 3vw, 44px);
  font-weight: 400;
  font-style: normal;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 6px;
}
.result-card-body .stat-label { margin-bottom: 16px; }
.result-client {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--fg);
  padding-top: 16px;
  border-top: 1px solid var(--rule);
}
.result-client .arrow { transition: transform 0.3s ease; }
.result-card:hover .result-client .arrow { transform: translateX(6px); color: var(--accent-copy); }
@media (max-width: 860px) {
  .results-grid { grid-template-columns: 1fr; }
}

  padding: var(--pad-section-y) var(--pad-gutter);
  max-width: 1600px;
  margin: 0 auto;
}
.pull blockquote {
  font-family: var(--font-serif);
  font-size: clamp(56px, 8vw, 120px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: 1200px;
}
.pull blockquote em { font-style: italic; color: var(--accent-copy); }
.pull .attrib {
  margin-top: 40px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-muted);
  display: flex;
  gap: 16px;
  align-items: center;
}
.pull .attrib-dot {
  width: 24px; height: 1px; background: currentColor;
}

/* Stats strip */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.stat {
  padding: 40px 28px;
  border-right: 1px solid var(--rule);
}
.stat:last-child { border-right: 0; }
.stat-num {
  font-family: var(--font-serif);
  font-size: clamp(44px, 5vw, 72px);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.stat-num em { font-style: italic; color: var(--accent-copy); }
.stat-unit { font-size: 0.45em; font-style: normal; letter-spacing: 0; font-family: var(--font-serif); font-weight: 700; }
.stat-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-muted);
}


/* Client Love Letters */
.love {
  background: var(--olive);
  padding: var(--pad-section-y) var(--pad-gutter);
}
.love .eyebrow,
.love-head h2 { color: var(--fg); }
.love-inner { max-width: 1440px; margin: 0 auto; }
.love-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: end;
  margin-bottom: var(--stack-lg);
}
.love-head h2 { font-size: clamp(34px, 4.5vw, 56px); letter-spacing: normal; line-height: 1.08; }
.love-head h2 em { font-style: italic; color: var(--accent-copy); }
.love-placeholder-note {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-muted);
  opacity: 0.7;
  margin-bottom: 16px;
  display: block;
}
/* Marquee wrapper — continuous spin + grab to browse */
.love-marquee {
  overflow-x: clip;
  overflow-y: visible;
  cursor: grab;
  margin: 0 calc(-1 * var(--pad-gutter));
  mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.love-marquee.is-grabbing { cursor: grabbing; }
.love-marquee-track {
  display: flex;
  gap: 16px;
  width: max-content;
  padding: 4px var(--pad-gutter) 8px;
  will-change: transform;
}
.love-card {
  width: clamp(260px, 35vw, 380px);
  flex-shrink: 0;
  border: 1px solid color-mix(in oklch, var(--fg) 14%, transparent);
  border-radius: 4px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  background: var(--bg);
  min-height: 0;
  transition:
    border-color 240ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 240ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
}
.love-card:hover {
  border-color: color-mix(in oklch, var(--fg) 30%, transparent);
  box-shadow: 0 4px 24px rgba(88, 71, 56, 0.08);
  transform: translateY(-3px);
}
.love-quote {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(16px, 1.5vw, 22px);
  line-height: 1.65;
  letter-spacing: 0;
  flex: 1;
}
.love-quote::before {
  content: '\201C';
  color: var(--accent-copy);
  font-size: 1.5em;
  line-height: 0;
  vertical-align: -0.35em;
  margin-right: 2px;
}
.love-quote::after {
  content: '\201D';
  color: var(--accent-copy);
  font-size: 1.5em;
  line-height: 0;
  vertical-align: -0.35em;
  margin-left: 2px;
}
/* Expandable full-letter pattern */
.love-full-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 420ms cubic-bezier(0.16, 1, 0.3, 1);
}
.love-full-wrap.is-open {
  grid-template-rows: 1fr;
}
.love-full-inner { overflow: hidden; }
.love-full {
  padding-top: 14px;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.75;
  color: var(--fg-muted);
  margin: 0;
}
.love-expand-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-copy);
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.love-expand-btn:hover { opacity: 0.7; }
.love-expand-arrow {
  display: inline-block;
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
.love-expand-btn[aria-expanded="true"] .love-expand-arrow { transform: rotate(180deg); }

.love-client {
  border-top: 1px solid color-mix(in oklch, var(--olive) 35%, transparent);
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.love-name {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.love-brand {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* Responsive */
@media (max-width: 1150px) {
  .hero-star { zoom: 0.84; }
}

@media (max-width: 900px) {
  #hero-split { grid-template-columns: 1fr; min-height: auto; }
  .split-right { min-height: 460px; }
  .hero-star { zoom: 0.68; }
  .services-head { grid-template-columns: 1fr; }
  .services-head { gap: 16px; }
  .svc-row { grid-template-columns: 40px 1fr; gap: 16px; }
  .svc-row .svc-desc, .svc-row .svc-arrow { grid-column: 2; }
  .love-head { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .split-right { min-height: 380px; }
}

@media (max-width: 430px) {
  .split-headline { font-size: clamp(44px, 11vw, 70px); }
  .hero-btns { flex-direction: column; align-items: flex-start; gap: 10px; }
  .hero-star { zoom: 0.52; }
  .client-bar { padding: 14px 0; }
  .svc-title { font-size: clamp(18px, 4vw, 22px); }
}
@media (max-width: 600px) {
  /* Hide service row arrows — whole row is the tap target */
  .svc-arrow { display: none; }
}
/* Narrowest phones */
@media (max-width: 360px) {
  .hero-star { zoom: 0.42; }
  .split-right { min-height: 300px; }
}

/* ── Touch devices: prevent stuck hover states ── */
@media (hover: none) {
  .svc-row:hover { background: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  #hero-split .split-headline,
  #hero-split .hero-desc,
  #hero-split .hero-btns,
  .hero-cover-media,
  .split-right::after {
    animation: none !important;
    opacity: 1;
    transform: none !important;
  }

  .love-card,
  .svc-title::after {
    transition-duration: 0.01ms !important;
  }

  .love-card:hover {
    transform: none !important;
  }
}

/* ── Section blend dividers ── */
.sec-blend {
  --divider-top: var(--bg);
  --divider-bottom: var(--fg);
  --divider-slope: clamp(12px, 2vw, 28px);
  display: block;
  position: relative;
  height: calc(2 * var(--divider-slope));
  margin-bottom: -1px;
  overflow: hidden;
  background: var(--divider-top);
  pointer-events: none;
}
.sec-blend::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--divider-bottom);
  clip-path: polygon(0 var(--divider-slope), 100% 0, 100% 100%, 0 100%);
}
.sec-blend.divider-right::after {
  clip-path: polygon(0 0, 100% var(--divider-slope), 100% 100%, 0 100%);
}
.blend-bg-to-olive  { --divider-top: var(--bg);    --divider-bottom: var(--olive); }
.blend-olive-to-bg  { --divider-top: var(--olive); --divider-bottom: var(--bg); }


/* Restore section backgrounds to solid colours */
.love         { background: var(--olive); }
.closing-cta  { background: var(--bg); }