/* ===========================================================
   Frontrow Brand & Marketing Studio — Stylesheet
   Fonts: Runda (Adobe Fonts, primary) + Kangge (self-hosted, accent)
   Theme: dark, editorial, imagery-led
=========================================================== */

@font-face {
  font-family: 'Kangge';
  src: url('../assets/fonts/Kangge.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand palette (used as accents against the dark base) */
  --cream: #F9ECD9;
  --cream-soft: #FDF8F0;
  --cream-deep: #F1E1C8;
  --sage: #AFBAAC;
  --sage-soft: #DDE3D9;
  --olive: #738076;
  --olive-dark: #5C6759;
  --taupe: #847D77;
  --charcoal: #363A3B;
  --charcoal-deep: #24262A;
  --white: #FFFFFF;

  /* Dark-theme base */
  --near-black: #131415;

  /* Semantic */
  --bg: #131415;
  --bg-alt: #1A1B1C;
  --bg-surface: #212224;
  --ink: var(--cream-soft);
  --ink-soft: var(--sage);
  --accent: var(--olive);
  --accent-ink: var(--cream-soft);
  --border: rgba(249, 236, 217, 0.12);

  /* Type */
  --font-body: "runda", "Runda", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display: "runda", "Runda", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-accent: "Kangge", var(--font-display);

  /* Gradients (sourced from studio gradient board) */
  --grad-warm: linear-gradient(135deg, var(--cream) 0%, var(--sage-soft) 45%, var(--sage) 100%);
  --grad-olive: linear-gradient(135deg, var(--olive) 0%, var(--olive-dark) 100%);
  --grad-dusk: linear-gradient(160deg, #4b5449 0%, var(--charcoal-deep) 55%, #1c2e30 100%);
  --grad-earth: linear-gradient(135deg, var(--taupe) 0%, var(--olive) 50%, var(--charcoal-deep) 100%);
  --grad-mesh: radial-gradient(60% 60% at 15% 20%, rgba(175,186,172,0.14) 0%, rgba(175,186,172,0) 60%),
               radial-gradient(50% 50% at 85% 15%, rgba(132,125,119,0.12) 0%, rgba(132,125,119,0) 65%),
               radial-gradient(55% 55% at 75% 85%, rgba(115,128,118,0.12) 0%, rgba(115,128,118,0) 60%);

  /* Layout */
  --container: 1180px;
  --radius-s: 10px;
  --radius-m: 18px;
  --radius-l: 28px;
  --radius-pill: 999px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--near-black);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 998;
  pointer-events: none;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

body {
  margin: 0;
  background: var(--grad-mesh), var(--bg);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  letter-spacing: -0.011em;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Pages with the fixed background video behind them stay transparent so it shows through */
body.has-bg-video { background: transparent; }

/* ---------- Fixed hero/background video ----------
   One video, fixed to the viewport for the whole page. It starts crisp
   (acting as the hero) and JS drives --bg-blur/--bg-brightness/--bg-scale/
   --bg-tint up as you scroll through the hero, so it smoothly becomes the
   blurred atmosphere living behind the glass sections below. Defaults here
   are the "crisp hero, no JS" resting state. */
.page-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background: var(--near-black);
}
.page-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(19,20,21,0.9);
  opacity: var(--bg-tint, 0);
}
.page-bg__video {
  position: absolute;
  inset: -80px;
  width: calc(100% + 160px);
  height: calc(100% + 160px);
  object-fit: cover;
  object-position: 62% 38%;
  filter: blur(var(--bg-blur, 0px)) brightness(var(--bg-brightness, 1)) saturate(1.15);
  transform: scale(var(--bg-scale, 1));
}
@media (max-width: 720px) {
  .page-bg__video { object-position: 30% 42%; }
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0 0 0.5em;
  color: var(--ink);
}

h1 { font-size: clamp(2.6rem, 5.4vw, 5rem); }
h2 { font-size: clamp(2rem, 3.6vw, 3.1rem); }
h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); }
h4 { font-size: 1.05rem; letter-spacing: -0.015em; }

p { margin: 0 0 1em; }

.lede {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  color: var(--ink-soft);
  max-width: 46ch;
}

.accent-font {
  font-family: var(--font-accent);
  font-weight: 400;
  letter-spacing: -0.01em;
}

.sprinkle {
  font-family: var(--font-accent);
  font-weight: 400;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
}

section { position: relative; }

.section {
  padding: clamp(64px, 9vw, 128px) 0;
}
.section--tight { padding: clamp(40px, 6vw, 72px) 0; }
.section--alt { background: var(--bg-alt); }
/* Translucent "glass" treatment (home page only) so the fixed background
   video reads through the plain-color sections; combined selector keeps
   this above .section--alt's solid background regardless of source order */
.section--alt.section--glass { background: rgba(26,27,28,0.55); }
.section--dark {
  background:
    linear-gradient(160deg, rgba(10,11,12,0.62) 0%, rgba(18,20,21,0.74) 55%, rgba(8,14,13,0.66) 100%),
    url('../assets/img/gradient-rich-v2.jpg') center/cover no-repeat;
  color: var(--cream-soft);
}
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 {
  color: var(--cream-soft);
}
.section--dark .lede { color: var(--sage); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-accent);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--sage);
  font-weight: 400;
  margin-bottom: 14px;
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: currentColor;
  display: inline-block;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 28px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: -0.01em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }

.btn--primary {
  background: var(--grad-olive);
  color: var(--cream-soft);
  box-shadow: 0 10px 24px rgba(0,0,0,0.4);
}
.btn--primary:hover {
  background: linear-gradient(135deg, var(--olive-dark) 0%, #4b554a 100%);
  box-shadow: 0 14px 30px rgba(0,0,0,0.48);
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--border);
}
.btn--ghost:hover { border-color: var(--sage); color: var(--sage); }

.btn--light {
  background: var(--cream-soft);
  color: var(--charcoal-deep);
}
.btn--light:hover { background: var(--white); }

.btn--block { width: 100%; justify-content: center; }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 18px 0;
  background:
    linear-gradient(160deg, rgba(10,11,12,0.9) 0%, rgba(16,17,18,0.94) 55%, rgba(8,13,12,0.92) 100%),
    url('../assets/img/gradient-rich-v2.jpg') center/cover no-repeat;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow 0.3s ease;
}
.site-header.is-scrolled {
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}

.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-accent);
  font-size: 1.28rem;
  letter-spacing: -0.01em;
  color: var(--cream-soft);
}
.brand img {
  height: 34px;
  width: auto;
  filter:
    drop-shadow(0 0 1px rgba(0,0,0,0.3))
    drop-shadow(0 1px 2px rgba(0,0,0,0.18));
}

.nav-pill {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(249,236,217,0.05);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 6px;
}
.nav-pill a {
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--sage-soft);
  transition: background 0.2s ease, color 0.2s ease;
}
.nav-pill a:hover { color: var(--cream-soft); }
.nav-pill a.active {
  background: var(--grad-olive);
  color: var(--cream-soft);
}

.nav-actions { display: flex; align-items: center; gap: 12px; }

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(249,236,217,0.05);
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.nav-toggle span, .nav-toggle::before, .nav-toggle::after {
  content: "";
  display: block;
  width: 18px;
  height: 2px;
  background: var(--cream-soft);
  position: relative;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.nav-toggle::before { transform: translateY(-6px); }
.nav-toggle::after { transform: translateY(4px); }
.nav-toggle.is-open span { opacity: 0; }
.nav-toggle.is-open::before { transform: translateY(0) rotate(45deg); }
.nav-toggle.is-open::after { transform: translateY(-2px) rotate(-45deg); }

.mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--near-black);
  padding: 100px 28px 40px;
  flex-direction: column;
  gap: 6px;
}
.mobile-menu.is-open { display: flex; }
.mobile-menu a {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--cream-soft);
  padding: 14px 4px;
  border-bottom: 1px solid var(--border);
}
.mobile-menu .btn { margin-top: 24px; }

/* ---------- Marquee ---------- */
.marquee {
  background:
    linear-gradient(120deg, rgba(10,11,12,0.7) 0%, rgba(16,17,18,0.76) 60%, rgba(8,14,13,0.7) 100%),
    url('../assets/img/gradient-rich-v2.jpg') center/cover no-repeat;
  color: var(--cream);
  overflow: hidden;
  padding: 16px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 32s linear infinite;
}
.marquee__group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.marquee__group span {
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: 1.05rem;
  padding: 0 28px;
  white-space: nowrap;
  color: var(--sage);
}
.marquee__group span.dot {
  color: var(--olive);
  text-transform: none;
  font-weight: 400;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- Hero ---------- */
.hero {
  padding: clamp(56px, 10vw, 108px) 0 clamp(40px, 6vw, 72px);
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.3fr 0.9fr;
  gap: 48px;
  align-items: end;
}
.hero h1 { margin-bottom: 0.3em; }
.hero__foot {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 28px;
}
.hero__side {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.hero__note {
  border-left: 2px solid var(--olive);
  padding-left: 18px;
  color: var(--ink-soft);
  font-size: 0.98rem;
}

/* ---------- Hero — full-bleed video ---------- */
.hero--video {
  position: relative;
  min-height: min(92vh, 820px);
  display: flex;
  align-items: flex-end;
  padding: 0 0 clamp(64px, 9vw, 108px);
  overflow: hidden;
  color: var(--cream-soft);
}
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(8,9,10,0.4) 0%, rgba(8,9,10,0.46) 45%, rgba(6,10,9,0.92) 100%),
    linear-gradient(90deg, rgba(6,7,8,0.6) 0%, rgba(6,7,8,0.08) 55%);
}
.hero__content {
  position: relative;
  z-index: 2;
  max-width: 720px;
}
.hero--video .eyebrow { color: var(--sage); }
.hero--video .eyebrow::before { background: var(--sage); }
.hero--video h1 { color: var(--cream-soft); }
.hero--video .lede { color: var(--sage-soft); max-width: 48ch; }
.hero__caption {
  position: absolute;
  z-index: 2;
  right: 28px;
  bottom: 28px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(221,227,217,0.65);
}
.hero__caption span.dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #e0554f;
  box-shadow: 0 0 0 3px rgba(224,85,79,0.25);
  animation: pulseDot 1.8s ease-in-out infinite;
}
@keyframes pulseDot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
@media (max-width: 720px) {
  .hero--video { min-height: 88vh; align-items: flex-end; }
  .hero__caption { display: none; }
}

.page-hero {
  padding: clamp(48px, 8vw, 84px) 0 clamp(32px, 5vw, 56px);
  border-bottom: 1px solid var(--border);
}
.page-hero__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items: end;
}
.page-hero--stacked h1 {
  font-size: clamp(2.4rem, 4.6vw, 4.2rem);
  white-space: nowrap;
}
@media (max-width: 900px) {
  .page-hero--stacked h1 { white-space: normal; }
}
.page-hero--stacked .lede {
  margin-top: 20px;
  max-width: 56ch;
}

/* ---------- Cards ---------- */
.grid {
  display: grid;
  gap: 24px;
}
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--5 { grid-template-columns: repeat(5, 1fr); }

.card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  padding: 30px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 50px rgba(0,0,0,0.45);
  border-color: rgba(175,186,172,0.35);
}
.card__icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(249,236,217,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  font-family: var(--font-accent);
  color: var(--sage);
  font-size: 1.3rem;
}
.card__num {
  font-family: var(--font-accent);
  font-size: 2.2rem;
  /* background-clip:text only paints within the box's own background area,
     which line-height controls the height of — 1 was too tight for the
     Kangge "0" glyph (it has a slightly taller round top than cap-height),
     so the top of "0" had no background under it and read as cut off. A
     looser line-height gives the glyph's full ink room inside the box. */
  line-height: 1.3;
  margin-bottom: 14px;
  display: block;
  width: fit-content;
  background: linear-gradient(90deg, var(--cream) 0%, var(--sage-soft) 50%, var(--sage) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.4s ease;
}
.card:hover .card__num {
  transform: scale(1.14) translateY(-2px) rotate(-2deg);
  /* The gradient stops (cream/sage-soft/sage) are already near-white —
     brightness() above ~1.05 clips cream straight to solid #fff, wiping
     out the gradient entirely. saturate() alone intensifies the existing
     hues without blowing out the highlights. */
  filter: saturate(1.6);
}
@media (prefers-reduced-motion: reduce) {
  .card__num { transition: none; }
  .card:hover .card__num { transform: none; }
}
.card p:last-child { margin-bottom: 0; }
.card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  font-weight: 700;
  color: var(--sage);
  font-size: 0.95rem;
}
.card__link:hover { color: var(--cream-soft); }

.tag {
  display: inline-block;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--sage-soft);
  color: var(--olive-dark);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

/* ---------- Service blocks ---------- */
.service-block {
  padding: 34px 0;
  border-bottom: 1px solid var(--border);
}
.service-block:last-child { border-bottom: none; }
.service-block__grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 36px;
}
.service-block__head .tag { margin-bottom: 12px; }
.service-block__head h3 { font-size: 1.32rem; margin-bottom: 8px; }
.service-block__head p { font-size: 0.95rem; color: var(--ink-soft); margin-bottom: 0; }
.check-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 7px 20px;
}
.check-list li {
  position: relative;
  padding-left: 24px;
  font-size: 0.92rem;
  line-height: 1.4;
  color: var(--ink);
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--olive);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.service-note {
  margin-top: 14px;
  font-size: 0.83rem;
  line-height: 1.5;
  color: var(--ink-soft);
  border-top: 1px dashed var(--border);
  padding-top: 12px;
}
.tier-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.98rem;
  margin-bottom: 8px;
  color: var(--ink);
}
.tier {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  padding: 18px 20px;
}
.tier p { font-size: 0.88rem; }
.tier + .tier { margin-top: 14px; }
.tier-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.tier-grid .tier { margin-top: 0; height: 100%; }
.tier--addon {
  margin-top: 16px;
  border: 1px solid rgba(249,236,217,0.14);
  background:
    linear-gradient(150deg, rgba(10,11,12,0.86) 0%, rgba(18,20,21,0.92) 55%, rgba(8,14,13,0.88) 100%),
    url('../assets/img/gradient-rich-v2.jpg') center/cover no-repeat;
  color: var(--cream-soft);
}
.tier--addon .tier-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--cream-soft);
}
.tier-badge {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--olive-dark);
  background: var(--sage-soft);
  padding: 3px 9px;
  border-radius: var(--radius-pill);
}
.tier--addon .tier-badge {
  color: var(--charcoal-deep);
  background: var(--cream-soft);
}
.tier--addon p { margin-bottom: 0; font-size: 0.88rem; color: var(--sage-soft); }
.tier--addon .service-note {
  margin-top: 10px;
  color: var(--sage);
  border-top-color: rgba(249,236,217,0.18);
}

/* ---------- Process ---------- */
.process-list {
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}
.process-step {
  position: relative;
  padding-top: 16px;
  border-top: 2px solid var(--border);
}
.process-step__num {
  font-family: var(--font-accent);
  font-weight: 400;
  font-size: 2.4rem;
  color: var(--olive);
  display: block;
  margin-bottom: 10px;
  line-height: 1;
}
.process-step h4 { margin-bottom: 8px; }
.process-step p { font-size: 0.92rem; color: var(--ink-soft); margin-bottom: 0; }

/* ---------- Stats / highlight strip ---------- */
.highlight-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.highlight-strip .card { text-align: left; }

/* ---------- Snapshot callout ---------- */
.callout {
  background:
    linear-gradient(150deg, rgba(10,11,12,0.68) 0%, rgba(18,20,21,0.8) 55%, rgba(8,14,13,0.72) 100%),
    url('../assets/img/gradient-rich-v2.jpg') center/cover no-repeat;
  color: var(--cream-soft);
  border-radius: var(--radius-l);
  padding: clamp(32px, 5vw, 56px);
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 32px;
  align-items: center;
  border: 1px solid var(--border);
}
.callout h2, .callout h3 { color: var(--cream-soft); }
.callout .eyebrow { color: var(--sage); }
.callout .lede { color: var(--sage-soft); }
.callout ul {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.callout ul li {
  padding-left: 22px;
  position: relative;
  font-size: 0.95rem;
  color: var(--sage);
}
.callout ul li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--olive);
}
.callout__side {
  background: rgba(249,236,217,0.05);
  border: 1px solid rgba(249,236,217,0.15);
  border-radius: var(--radius-m);
  padding: 26px;
}

/* ---------- Case study ---------- */
.case-hero {
  border-radius: var(--radius-l);
  overflow: hidden;
  margin-bottom: 28px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.55);
}
.case-hero img { width: 100%; display: block; }
@media (min-width: 721px) {
  /* Source photo is a tall 4:5 portrait crop — at full container width on a
     wide screen it renders taller than the viewport. Cap the showcase hero
     (but not the smaller featured-project card, which has its own sizing)
     to a sane banner height and crop in on the activation + tagline.
     Mobile keeps the full portrait crop, which already reads fine there. */
  .case-hero:not(.featured-project__media) {
    height: 640px;
  }
  .case-hero:not(.featured-project__media) img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 78%;
  }
}
.case-meta-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.case-lockup-chip {
  display: inline-flex;
  align-items: center;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  padding: 9px 16px;
  border-radius: var(--radius-s);
}
.case-lockup { height: 18px; width: auto; display: block; }
.case-title { margin-bottom: 14px; }
.case-desc {
  max-width: 68ch;
  color: var(--ink-soft);
  font-size: 1.03rem;
  margin-bottom: 36px;
}
.case-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.case-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-m);
  display: block;
}
.case-video-wrap {
  grid-column: span 2;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-m);
  overflow: hidden;
  background: var(--bg-surface);
}
.case-video-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.case-disclaimer {
  margin-top: 32px;
  padding-left: 16px;
  border-left: 3px solid var(--border);
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 68ch;
}

/* ---------- Featured project (home page) ---------- */
.featured-project__media { display: block; overflow: hidden; }
.featured-project__media img { transition: transform 0.5s ease; }
.featured-project__media:hover img { transform: scale(1.03); }
@media (min-width: 721px) {
  /* Image is a tall 4:5 portrait crop — full container width makes it
     dominate a wide viewport, so cap it to a sane card size on desktop.
     Mobile keeps it full-width, where the shorter viewport already scales it fine. */
  .featured-project__media {
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ---------- Portfolio / coming soon (sliding marquee, home page) ---------- */
.soon-section { overflow: hidden; }
.soon-cta { margin-top: 40px; text-align: center; }
.soon-marquee {
  width: 100%;
  overflow: hidden;
  margin-top: 44px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.soon-track {
  display: flex;
  width: max-content;
  animation: soonSlide 34s linear infinite;
}
/* Two rows drift in opposite directions at different speeds, and never
   pause on hover — the cards keep gliding, only the hovered tile reacts. */
.soon-track--row2 {
  animation-name: soonSlideReverse;
  animation-duration: 42s;
}
.soon-group {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding-right: 20px;
  flex-shrink: 0;
}
@keyframes soonSlide {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes soonSlideReverse {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .soon-track { animation: none; }
}
.soon-card {
  width: 240px;
  flex-shrink: 0;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-m);
  background: linear-gradient(155deg, var(--taupe) 0%, var(--charcoal-deep) 100%);
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 20px;
  /* Guarantees legible light text regardless of card shape — a wide tile's
     diagonal gradient doesn't reliably land dark under the bottom-left
     label, so a fixed scrim there is more reliable than tuning gradient
     angles per aspect ratio. Neutralized on the light/dark-text variants. */
  box-shadow: inset 0 -90px 60px -30px rgba(10,11,12,0.55);
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.4s ease, border-color 0.4s ease;
}
.soon-card:hover {
  transform: translateY(-8px) scale(1.035);
  box-shadow: 0 26px 50px rgba(0,0,0,0.5), inset 0 -90px 60px -30px rgba(10,11,12,0.55);
  border-color: rgba(249,236,217,0.4);
  z-index: 1;
}
.soon-card--c2, .soon-card--c7 {
  box-shadow: none;
}
.soon-card--c2:hover, .soon-card--c7:hover {
  box-shadow: 0 26px 50px rgba(0,0,0,0.5);
}
.soon-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('../assets/img/logo-on-dark.png') center/40% no-repeat;
  opacity: 0.32;
}
/* Spark: a soft light sweep that glides across the tile on hover */
.soon-card::after {
  content: "";
  position: absolute;
  inset: -60% -20%;
  background: linear-gradient(115deg, transparent 42%, rgba(253,248,240,0.4) 50%, transparent 58%);
  transform: translateX(-130%);
  transition: transform 0.85s ease;
  pointer-events: none;
}
.soon-card:hover::after { transform: translateX(60%); }
.soon-card span {
  position: relative;
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--cream-soft);
  font-size: 1.05rem;
}
/* Positional coloring below is scoped to the Work page's stationary grid
   only — the home page marquee's cards carry their own --c1..--c8 color
   modifiers instead, since :nth-child(n) here would otherwise outrank a
   single class modifier and clobber it (higher selector specificity). */
.soon-grid .soon-card:nth-child(2) {
  background: linear-gradient(150deg, var(--olive) 0%, var(--charcoal-deep) 70%, #0e1615 100%);
}
.soon-grid .soon-card:nth-child(3) {
  background: linear-gradient(150deg, var(--charcoal) 0%, #0e1615 100%);
}
.soon-grid .soon-card:nth-child(4) {
  background: linear-gradient(155deg, var(--sage) 0%, var(--olive-dark) 100%);
}
.soon-grid .soon-card:nth-child(4) span { color: var(--charcoal-deep); }
.soon-grid .soon-card:nth-child(4)::before { background-image: url('../assets/img/logo-mono-dark.png'); opacity: 0.4; }
.soon-grid .soon-card:nth-child(4) { box-shadow: none; }
.soon-grid .soon-card:nth-child(4):hover { box-shadow: 0 26px 50px rgba(0,0,0,0.5); }
.soon-grid .soon-card:nth-child(5) {
  background: linear-gradient(155deg, var(--taupe) 0%, var(--olive) 100%);
}
.soon-grid .soon-card:nth-child(6) {
  background: linear-gradient(155deg, var(--olive-dark) 0%, #0e1615 100%);
}

/* Mismatched sizing (home page marquee only) for the collage look */
.soon-card--sm { width: 180px; aspect-ratio: 1 / 1; }
.soon-card--md { width: 240px; aspect-ratio: 4 / 5; }
.soon-card--lg { width: 340px; aspect-ratio: 4 / 3; }

/* Richer, more saturated colorway for the home page tiles — layered over
   the nth-child rules above by being later in the cascade. */
.soon-card--c1 {
  background: linear-gradient(150deg, var(--sage) 0%, var(--olive) 55%, var(--charcoal-deep) 100%);
}
.soon-card--c2 {
  background: linear-gradient(160deg, var(--cream) 0%, var(--sage-soft) 60%, var(--olive) 100%);
}
.soon-card--c2 span { color: var(--charcoal-deep); }
.soon-card--c2::before { background-image: url('../assets/img/logo-mono-dark.png'); opacity: 0.4; }
.soon-card--c3 {
  background: linear-gradient(150deg, var(--olive-dark) 0%, var(--charcoal) 55%, #0e1615 100%);
}
.soon-card--c4 {
  background: linear-gradient(155deg, var(--taupe) 0%, var(--olive-dark) 60%, var(--charcoal-deep) 100%);
}
.soon-card--c5 {
  background: linear-gradient(150deg, var(--charcoal-deep) 0%, var(--olive) 100%);
}
.soon-card--c6 {
  background: linear-gradient(160deg, var(--sage-soft) 0%, var(--taupe) 55%, var(--charcoal-deep) 100%);
}
.soon-card--c7 {
  background: linear-gradient(150deg, var(--olive) 0%, var(--sage) 100%);
}
.soon-card--c7 span { color: var(--charcoal-deep); }
.soon-card--c7::before { background-image: url('../assets/img/logo-mono-dark.png'); opacity: 0.4; }
.soon-card--c8 {
  background: linear-gradient(155deg, var(--charcoal) 0%, var(--olive-dark) 55%, #0e1615 100%);
}
@media (max-width: 720px) {
  .soon-card--sm { width: 140px; }
  .soon-card--md { width: 190px; }
  .soon-card--lg { width: 250px; }
}

/* Stationary grid variant (Work page) */
.soon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-top: 44px;
}
.soon-grid .soon-card { width: 100%; }

/* ---------- Footer ---------- */
.site-footer {
  background:
    linear-gradient(170deg, rgba(8,9,10,0.82) 0%, rgba(14,15,16,0.9) 50%, rgba(6,10,9,0.86) 100%),
    url('../assets/img/gradient-rich-v2.jpg') center/cover no-repeat;
  color: var(--sage-soft);
  padding: 64px 0 28px;
  border-top: 1px solid var(--border);
}
.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 0.8fr 1fr;
  gap: 36px;
  padding-bottom: 44px;
  border-bottom: 1px solid var(--border);
}
.footer-brand .brand { color: var(--cream-soft); }
.footer-brand p { color: var(--sage); max-width: 34ch; margin-top: 14px; }
.footer-col h4 { color: var(--cream-soft); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 16px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-col a { color: var(--sage-soft); font-size: 0.95rem; transition: color 0.2s ease; }
.footer-col a:hover { color: var(--cream-soft); }
.footer-col a.btn, .footer-col a.btn:hover { color: var(--charcoal-deep); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  font-size: 0.85rem;
  color: var(--sage);
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- WhatsApp floating button ---------- */
.wa-float {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 90;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--grad-olive);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 34px rgba(0,0,0,0.5);
  transition: transform 0.25s ease, background 0.25s ease;
}
.wa-float:hover { transform: translateY(-3px) scale(1.04); background: linear-gradient(135deg, var(--olive-dark) 0%, #4b554a 100%); }
.wa-float svg { width: 26px; height: 26px; fill: var(--cream-soft); }

/* ---------- Intro loader (logo spin splash) ---------- */
html.intro-active, html.intro-active body {
  overflow: hidden;
  height: 100%;
}
.intro-loader {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(55% 55% at 50% 45%, rgba(249,236,217,0.08) 0%, rgba(249,236,217,0) 70%),
    linear-gradient(160deg, rgba(8,9,10,0.5) 0%, rgba(16,17,18,0.62) 55%, rgba(6,10,9,0.52) 100%),
    url('../assets/img/gradient-rich-v2.jpg') center/cover no-repeat;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
.intro-loader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.intro-loader__stage {
  perspective: 1000px;
}
.intro-loader__mark {
  width: 26vw;
  max-width: 160px;
  min-width: 84px;
  display: block;
  transform-style: preserve-3d;
  animation: introSpin 1.5s cubic-bezier(0.62, 0.04, 0.32, 1) both;
  filter: drop-shadow(0 18px 30px rgba(0,0,0,0.45));
}
@keyframes introSpin {
  0%   { transform: perspective(1000px) rotateY(0deg) rotateX(8deg) scale(0.7); opacity: 0; }
  12%  { opacity: 1; }
  65%  { transform: perspective(1000px) rotateY(1080deg) rotateX(0deg) scale(1.08); opacity: 1; }
  100% { transform: perspective(1000px) rotateY(1080deg) rotateX(0deg) scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .intro-loader__mark { animation: none; opacity: 1; }
}

/* ---------- Reveal animation ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Utilities ---------- */
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.mt-0 { margin-top: 0 !important; }
.text-center { text-align: center; }
.center-head { max-width: 680px; margin: 0 auto 48px; text-align: center; }
.center-head .lede { max-width: 100%; margin: 0 auto; }

/* ===========================================================
   Responsive
=========================================================== */
@media (max-width: 1024px) {
  .hero__grid, .page-hero__grid { grid-template-columns: 1fr; }
  .hero__side { flex-direction: row; flex-wrap: wrap; }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--5 { grid-template-columns: repeat(3, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .process-list { grid-template-columns: repeat(3, 1fr); }
  .service-block__grid { grid-template-columns: 1fr; gap: 20px; }
  .callout { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .highlight-strip { grid-template-columns: 1fr; }
  .case-gallery { grid-template-columns: repeat(2, 1fr); }
  .case-video-wrap { grid-column: span 2; }
}

/* The full nav-pill (5 links) plus the brand mark and "Start a Project"
   button need more room than the general mobile breakpoint below — on its
   own they'd start overlapping the brand mark before the layout otherwise
   needs to go mobile, so the nav collapses to the hamburger menu earlier. */
@media (max-width: 960px) {
  .nav-pill { display: none; }
  .nav-actions .btn--primary { display: none; }
  .nav-toggle { display: flex; }
}

@media (max-width: 720px) {
  .grid--2, .grid--3, .grid--4, .grid--5 { grid-template-columns: 1fr; }
  .process-list { grid-template-columns: repeat(2, 1fr); }
  .check-list { grid-template-columns: 1fr; }
  .tier-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .case-gallery { grid-template-columns: 1fr 1fr; }
  .case-video-wrap { grid-column: span 2; aspect-ratio: 4/5; }
  .soon-card { width: 190px; }
  h1 { letter-spacing: -0.02em; }
}