/* ==========================================================================
   Forge — Brand Growth & Retail Agency
   Core stylesheet — layout/spacing/type modelled on rosettabrands.com,
   coloured with Forge's own navy + ember-orange palette.
   ========================================================================== */

:root {
  --ink: #0c1220;
  --ink-900: #070b14;
  --ink-700: #141c30;
  --accent: #ff5a1f;
  --accent-600: #e14812;
  --accent-100: #fff1ea;
  --gold: #ffb020;
  --paper: #faf9f7;
  --white: #ffffff;
  --line: #e8e4de;
  --line-soft: #efece7;
  --muted: #6b6f76;
  --text: #14161a;
  --radius: 14px;
  --radius-sm: 10px;
  --radius-btn: 8px;
  --shadow: 0 20px 44px -18px rgba(12, 18, 32, 0.22);
  --shadow-lg: 0 34px 70px -20px rgba(12, 18, 32, 0.3);
  --max-width: 1200px;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-heading: 'DM Sans', var(--font);
  /* Hero lines: Lexend was designed and tested around reading speed
     (Shaver-Troup, validated at Vanderbilt), so the biggest, most-scanned
     type on the site is the type engineered to be read fastest. */
  --font-hero: 'Lexend', var(--font-heading);
  /* Figures share the hero face. Atkinson Hyperlegible was here first for
     its character distinction, but that design goal makes its letterforms
     utilitarian at display size — Lexend is tuned for reading fluency and
     reads friendlier for headline numbers, with tabular figures below. */
  --font-numeric: 'Lexend', var(--font-heading);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

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

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1, h2, h3, h4 {
  margin: 0 0 0.5em;
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-family: var(--font-heading);
}

p {
  margin: 0 0 1.2em;
  color: var(--muted);
}

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

/* Plain uppercase section label — no pill, matches rosettabrands.com's
   section eyebrows exactly (12px / 700 / 1.2px tracking / no background). */
.section-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent-600);
  margin-bottom: 16px;
}

/* Pill-style tag — reserved for the hero badge only. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 7px 16px 7px 12px;
  border-radius: 100px;
  margin-bottom: 24px;
}

.eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

.section {
  padding: 76px 0;
}

.section-tight {
  padding: 44px 0;
}

.section-head {
  max-width: 640px;
  margin: 0 auto 44px;
  text-align: center;
}

.section-head h2 {
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
}

.section-head p {
  font-size: 1.08rem;
  margin-bottom: 0;
}

.section-head .section-label {
  text-align: center;
}

.section-head a {
  color: var(--accent-600);
  font-weight: 700;
}

.section-head a:hover {
  color: var(--ink);
}

.bg-paper {
  background: var(--paper);
}

/* ---------- Scroll reveal ---------- */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.visible {
  opacity: 1;
  transform: none;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: var(--radius-btn);
  font-weight: 600;
  font-size: 0.9rem;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  white-space: nowrap;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-primary {
  background: var(--accent);
  color: var(--white);
  box-shadow: 0 12px 24px -10px rgba(255, 90, 31, 0.5);
}

.btn-primary:hover {
  background: var(--accent-600);
}

.btn-outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}

.btn-outline:hover {
  border-color: var(--ink);
}

.btn-on-dark {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.28);
}

.btn-on-dark:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.6);
}

/* ---------- Logo mark ---------- */

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font-weight: 800;
  font-size: 1.24rem;
  color: var(--ink);
  letter-spacing: -0.02em;
  font-family: var(--font-heading);
}

.brand-mark {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: block;
}

.brand-mark svg {
  width: 100%;
  height: 100%;
  display: block;
}

.brand-mark .plate {
  fill: var(--accent);
}

/* Diagonal highlight across the top-left of the tile — reads as light
   catching a struck surface, and stops the mark looking like a flat chip. */
.brand-mark .sheen {
  fill: var(--gold);
  opacity: 0.1;
}

.brand-mark .glyph {
  fill: var(--ink);
}

.footer-brand .brand-mark .plate {
  fill: var(--accent);
}

.footer-brand .brand-mark .glyph {
  fill: var(--ink);
}

/* ---------- Header / Nav ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
  transition: background 0.3s ease, border-color 0.3s ease;
}

/* Overlay mode: on pages that open with the dark hero the header sits
   transparently on top of it, then swaps to the solid treatment once the
   page scrolls (main.js toggles .is-stuck). Fixed rather than sticky so it
   overlaps the hero instead of reserving a white strip above it — the hero's
   top padding leaves room for it. */
.site-header.is-overlay {
  position: fixed;
  left: 0;
  right: 0;
}

.site-header.is-overlay:not(.is-stuck) {
  background: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
}

.site-header.is-overlay:not(.is-stuck) .brand,
.site-header.is-overlay:not(.is-stuck) .nav-links a {
  color: var(--white);
}

.site-header.is-overlay:not(.is-stuck) .nav-links a.active,
.site-header.is-overlay:not(.is-stuck) .nav-links a:hover {
  color: var(--gold);
}

.site-header.is-overlay:not(.is-stuck) .brand-mark .glyph {
  fill: var(--ink-900);
}

.site-header.is-overlay:not(.is-stuck) .btn-outline {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.32);
}

.site-header.is-overlay:not(.is-stuck) .btn-outline:hover {
  border-color: var(--white);
  background: rgba(255, 255, 255, 0.1);
}

.site-header.is-overlay:not(.is-stuck) .nav-toggle span {
  background: var(--white);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 30px;
}

.nav-links a {
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--ink);
  position: relative;
  padding: 4px 0;
}

.nav-links a.active,
.nav-links a:hover {
  color: var(--accent-600);
}

.nav-cta {
  display: flex;
  align-items: center;
  gap: 20px;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}

.nav-toggle span {
  width: 22px;
  height: 2px;
  background: var(--ink);
}

/* ==========================================================================
   Hero — dark aurora mesh
   Type-first composition on a deep navy ground. The backdrop is built from
   soft radial "aurora" blobs plus an SVG grain wash, which is the current
   premium-hero idiom (Stripe / Linear / Vercel) and deliberately avoids
   flat gradients and dot/square grids.
   ========================================================================== */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 132px 0 108px;
  background: var(--ink-900);
  color: var(--white);
}

/* --- Aurora field --- */

.hero-aurora {
  position: absolute;
  inset: -10%;
  z-index: -2;
  pointer-events: none;
}

.aurora-blob {
  position: absolute;
  display: block;
  border-radius: 50%;
  /* Soft-edged radial fills rather than blur() — same look, far cheaper to
     composite, and no GPU blend stack that can flatten to black. */
  will-change: transform;
}

.aurora-1 {
  top: -14%;
  left: 46%;
  width: 62vw;
  height: 62vw;
  max-width: 900px;
  max-height: 900px;
  background: radial-gradient(circle, rgba(255, 90, 31, 0.58), rgba(255, 90, 31, 0.16) 42%, transparent 68%);
  animation: auroraDriftA 20s ease-in-out infinite alternate;
}

.aurora-2 {
  top: 8%;
  left: -14%;
  width: 54vw;
  height: 54vw;
  max-width: 780px;
  max-height: 780px;
  background: radial-gradient(circle, rgba(255, 176, 32, 0.42), rgba(255, 176, 32, 0.1) 44%, transparent 70%);
  animation: auroraDriftB 26s ease-in-out infinite alternate;
}

.aurora-3 {
  bottom: -26%;
  left: 22%;
  width: 70vw;
  height: 58vw;
  max-width: 1000px;
  max-height: 820px;
  background: radial-gradient(circle, rgba(86, 108, 255, 0.34), rgba(86, 108, 255, 0.08) 46%, transparent 72%);
  animation: auroraDriftC 23s ease-in-out infinite alternate;
}

/* --- Grain --- */

.hero-grain {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.42;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)' opacity='0.38'/%3E%3C/svg%3E");
}

/* Vignette + a fade into the paper section below, so the dark band resolves
   into the light page instead of ending on a hard edge. */
.hero-grain::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(130% 100% at 50% 42%, transparent 52%, rgba(7, 11, 20, 0.6) 100%),
    linear-gradient(to bottom, transparent 80%, var(--paper) 100%);
}

/* --- Composition --- */

.hero-inner {
  position: relative;
  max-width: 940px;
}

.hero h1 {
  font-family: var(--font-hero);
  font-size: clamp(2.6rem, 6.4vw, 5rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--white);
  margin-bottom: 26px;
  text-wrap: balance;
}

/* Gradient-filled second clause. The plain colour is declared first so the
   headline stays legible if background-clip:text is unsupported. */
.hero h1 .accent-line {
  color: var(--accent);
  background: linear-gradient(102deg, var(--accent) 8%, var(--gold) 92%);
  -webkit-background-clip: text;
  background-clip: text;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero h1 .accent-line {
    color: transparent;
  }
}

.hero .eyebrow {
  color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(8px);
}

.hero-lead {
  font-size: clamp(1.06rem, 1.5vw, 1.2rem);
  color: rgba(255, 255, 255, 0.72);
  max-width: 620px;
  margin-bottom: 34px;
}

.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 52px;
}

.hero-actions .btn-primary {
  box-shadow: 0 16px 40px -12px rgba(255, 90, 31, 0.75);
}

/* --- Entrance --- */

.hero-inner > * {
  animation: heroRise 0.85s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.hero-inner > *:nth-child(1) { animation-delay: 0.06s; }
.hero-inner > *:nth-child(2) { animation-delay: 0.15s; }
.hero-inner > *:nth-child(3) { animation-delay: 0.24s; }
.hero-inner > *:nth-child(4) { animation-delay: 0.33s; }
.hero-inner > *:nth-child(5) { animation-delay: 0.42s; }

@keyframes auroraDriftA {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(-7%, 6%, 0) scale(1.12); }
}

@keyframes auroraDriftB {
  from { transform: translate3d(0, 0, 0) scale(1.08); }
  to { transform: translate3d(9%, -5%, 0) scale(1); }
}

@keyframes auroraDriftC {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(-6%, -8%, 0) scale(1.14); }
}

@keyframes heroRise {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Logo strip ---------- */

.stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 980px;
  margin: 0 auto 44px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line);
}

.stat-item {
  text-align: center;
  padding: 0 26px;
}

.stat-item + .stat-item {
  border-left: 1px solid var(--line);
}

.stat-item.reveal:nth-child(2) {
  transition-delay: 0.1s;
}

.stat-item.reveal:nth-child(3) {
  transition-delay: 0.2s;
}

.stat-item strong {
  display: block;
  font-family: var(--font-numeric);
  font-size: clamp(2.4rem, 4.6vw, 3.3rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: 10px;
  transition: transform 0.25s ease;
  font-variant-numeric: tabular-nums;
}

.stat-item:hover strong {
  transform: scale(1.06);
}

.stat-item span {
  display: block;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--accent-600);
}

.logo-strip-label {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 36px;
}

.logo-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 112px;
  min-width: 0;
}

.logo-slot img {
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Monochrome treatment: for logos that are transparent single-colour
   cutouts (no background of their own), rendered as a muted dark mark. */
.logo-mono {
  filter: brightness(0);
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

.logo-mono:hover {
  opacity: 1;
}

/* Boots' source file has extra transparent padding baked around the oval,
   so it renders visibly smaller than the other retailer logos at the same
   box size — scale it up to match their visual weight. */
.logo-boost {
  transform: scale(1.55);
}

/* ---------- Retailer cards (logo + what we did) ---------- */

/* Each client brand paired with the retailers we placed it into, one row
   per brand. Showing the mapping directly beats two disconnected logo
   strips, and giving each brand its own row means the very different
   aspect ratios of the two marks no longer have to balance side by side. */
/* One card per client brand: the brand mark, then its retailers grouped
   under a short label, then what we did. A labelled logo group is the
   pattern that actually reads on a marketing page — an earlier version
   drew a connector line from brand to retailers, which looked like a
   flowchart and left awkward dead space between marks of unequal width. */
.placements {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 940px;
  margin: 0 auto;
}

.placement {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 34px 30px;
  text-align: center;
}

/* Fixed min-height so the rule under the brand mark lands at the same
   point in both cards, despite the two marks being very different shapes.
   Box-sizing is border-box, so this has to clear the tallest mark (54px)
   plus the padding and border below it, or the taller card pushes down. */
.placement-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px;
  margin-bottom: 24px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line-soft);
}

.placement-brand img {
  width: auto;
  height: auto;
  object-fit: contain;
}

.placement-brand .logo-opp {
  width: min(310px, 100%);
}

/* Explicit height: this SVG carries only a viewBox with no intrinsic
   width/height, so height:auto collapses it to nothing. */
.placement-brand .logo-yn {
  height: 54px;
}

.placement-label {
  margin: 0 0 14px;
  font-size: 0.71rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent-600);
}

.placement-retailers {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 56px;
  flex-wrap: wrap;
  min-height: 56px;
  margin-bottom: 22px;
}

/* Tall enough to contain Boots at its 1.55 boost without it overflowing
   into the text below. */
.retail-mark {
  display: flex;
  align-items: center;
  height: 56px;
}

/* Still the smallest tier — the client brands lead and the figures carry
   the proof — but large enough now to actually be read. */
.retail-mark img {
  max-height: 34px;
  max-width: 118px;
  width: auto;
  border-radius: 3px;
}

.placement > p:last-child {
  margin: 0;
  font-size: 0.93rem;
  line-height: 1.6;
}

.logo-fallback {
  display: none;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  border: 1.5px dashed var(--line);
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-weight: 800;
  font-size: 0.98rem;
  letter-spacing: -0.01em;
  text-align: center;
  padding: 0 18px;
}

/* ---------- Differentiator (contrast statement + check list) ---------- */

.diff-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

.diff-grid h2 {
  font-size: clamp(1.8rem, 3vw, 2.3rem);
}

.diff-grid h2 em {
  font-style: normal;
  color: var(--accent);
}

.check-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.check-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 0.98rem;
  color: var(--text);
}

.check-list li svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: var(--accent-600);
}

/* ---------- Pillar cards ---------- */

.pillar-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  max-width: 880px;
  margin: 0 auto;
}

.pillar-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.pillar-card h3 {
  font-size: 1.25rem;
  margin-bottom: 12px;
}

.pillar-card > p {
  font-size: 0.95rem;
  margin-bottom: 24px;
}

.pillar-list {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin-bottom: 28px;
  flex: 1;
}

.pillar-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.88rem;
  color: var(--muted);
}

.pillar-list li::before {
  content: '';
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  margin-top: 8px;
}

.pillar-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--accent-600);
}

.pillar-link:hover {
  color: var(--ink);
}

/* ---------- Cards / Grid ---------- */

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

/* ---------- Zero-friction list ---------- */

.zero-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.zero-item {
  background: var(--white);
  padding: 28px 26px;
}

.zero-item strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--accent-600);
  margin-bottom: 8px;
}

.zero-item span {
  font-size: 0.95rem;
  color: var(--ink);
  font-weight: 600;
}

/* ---------- Case study cards ---------- */

.case-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.case-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.case-head {
  background: var(--ink);
  padding: 30px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.case-head .logo-slot {
  height: 36px;
  min-width: 0;
}

.case-head .logo-slot img {
  height: 28px;
  width: auto;
  max-width: 150px;
  filter: brightness(0) invert(1);
  opacity: 1;
}

.case-head .logo-fallback {
  border-color: rgba(255, 255, 255, 0.25);
  color: var(--white);
  border-style: solid;
  background: rgba(255, 255, 255, 0.06);
  height: 36px;
  font-size: 0.92rem;
  padding: 0 14px;
}

.case-tag {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--accent);
  padding: 6px 12px;
  border-radius: 100px;
  white-space: nowrap;
}

.case-body {
  padding: 34px 32px 32px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.case-body h3 {
  font-size: 1.3rem;
}

.case-list {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.case-list li {
  display: flex;
  gap: 10px;
  font-size: 0.93rem;
  color: var(--muted);
  align-items: flex-start;
}

.case-list li::before {
  content: '';
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--accent);
}

.case-note {
  margin-top: 20px;
  padding: 16px 18px;
  background: var(--paper);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--accent);
  font-size: 0.88rem;
  color: var(--muted);
}

.case-note strong {
  color: var(--ink);
}

.case-note-media {
  display: flex;
  gap: 16px;
  align-items: center;
}

/* The source shot is a wide landscape photo, so a plain square crop leaves
   the subject small. Wrap it and scale in on the subject instead. */
.case-note-thumb {
  width: 92px;
  height: 92px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--white);
}

.case-note-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(2.1);
  transform-origin: center 38%;
}

.case-note-media p {
  margin: 0;
}

/* ---------- Image break (duotone) ---------- */

.image-break {
  position: relative;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--ink);
}

/* Deliberately no mix-blend-mode here. Stacking luminosity over multiply on
   an opaque dark ground composites to solid black on some GPU/driver combos,
   which blanked the whole band. Plain alpha layers give the same duotone. */
.image-break img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.08) brightness(0.9);
}

.image-break::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(135deg, rgba(255, 90, 31, 0.42), rgba(12, 18, 32, 0.86) 65%);
}

.image-break::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(12, 18, 32, 0.42), rgba(12, 18, 32, 0.72));
}

.image-break-content {
  position: relative;
  z-index: 2;
  max-width: 760px;
  text-align: center;
  padding: 0 24px;
}

.image-break-content p {
  color: var(--white);
  font-size: clamp(1.3rem, 2.6vw, 1.8rem);
  font-weight: 700;
  font-style: italic;
  line-height: 1.4;
  margin: 0;
}

.image-break-content span {
  display: inline-block;
  margin-top: 20px;
  font-style: normal;
  font-weight: 700;
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ---------- Process steps ---------- */

.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  counter-reset: step;
}

.process-step {
  position: relative;
  padding: 28px 24px 24px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.process-step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  display: block;
  font-family: var(--font-heading);
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--line);
  letter-spacing: 0.02em;
  margin-bottom: 10px;
}

.process-step h4 {
  font-size: 1.02rem;
  margin-bottom: 8px;
}

.process-step p {
  font-size: 0.9rem;
  margin: 0;
}

/* ---------- Values ---------- */

.value-row {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 20px;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}

.value-row:last-child {
  border-bottom: none;
}

.value-num {
  font-family: var(--font-heading);
  font-weight: 800;
  color: var(--accent-600);
  font-size: 1.1rem;
}

.value-row h4 {
  font-size: 1.08rem;
  margin-bottom: 6px;
}

.value-row p {
  margin: 0;
}

/* ---------- CTA band ---------- */

.cta-band {
  background: linear-gradient(135deg, var(--ink) 0%, var(--ink-700) 100%);
  border-radius: 24px;
  padding: 64px 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}

.cta-band::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -60px;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(255, 90, 31, 0.35), transparent 70%);
}

.cta-band h2 {
  color: var(--white);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  margin-bottom: 8px;
}

.cta-band p {
  color: rgba(255, 255, 255, 0.66);
  margin: 0;
  max-width: 420px;
}

.cta-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  position: relative;
}

/* ---------- Founder / About ---------- */

.founder-strip {
  display: flex;
  gap: 28px;
  align-items: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px 36px;
  max-width: 760px;
  margin: 0 auto;
}

.founder-avatar {
  flex-shrink: 0;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.4rem;
}

.founder-strip h4 {
  margin-bottom: 4px;
  font-size: 1.12rem;
}

.founder-role {
  display: block;
  color: var(--accent-600);
  font-weight: 700;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}

.founder-strip p {
  margin: 0;
}

/* ---------- Framed image (duotone) ---------- */

.framed-image {
  position: relative;
}

.framed-image::before {
  content: '';
  position: absolute;
  top: 18px;
  left: -18px;
  right: 18px;
  bottom: -18px;
  background: var(--accent-100);
  border-radius: var(--radius);
}

.framed-image-media {
  position: relative;
  z-index: 1;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
}

/* Light touch only. The photo carries the section, so this is a hint of
   brand warmth rather than the heavy duotone used on the dark image bands —
   and a plain alpha layer, not a blend mode, to stay predictable. */
.framed-image-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.9) contrast(1.02);
}

.framed-image-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(150deg, rgba(255, 90, 31, 0.14), rgba(12, 18, 32, 0.08));
}

/* ---------- Contact block ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.contact-item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
}

.contact-item span {
  display: block;
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 8px;
}

.contact-item a,
.contact-item p {
  font-weight: 700;
  color: var(--ink);
  font-size: 1.02rem;
  margin: 0;
}

.contact-item a:hover {
  color: var(--accent-600);
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.68);
  padding: 72px 0 28px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-brand .brand {
  color: var(--white);
  margin-bottom: 14px;
}

.footer-brand p {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.92rem;
  max-width: 260px;
}

.footer-col h5 {
  color: var(--white);
  font-size: 0.84rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 18px;
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-col a {
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.58);
}

.footer-col a:hover {
  color: var(--accent);
}

.footer-col address {
  font-style: normal;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.58);
  line-height: 1.7;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 24px;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.38);
}

/* ---------- Page hero (services / about) — same dark aurora system as the
   homepage hero, shorter, centred single-column since there's no proof
   strip or action buttons to balance. ---------- */

.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 132px 0 84px;
  text-align: center;
  background: var(--ink-900);
  color: var(--white);
}

.page-hero .container {
  position: relative;
}

.page-hero .eyebrow {
  margin-left: auto;
  margin-right: auto;
  color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(8px);
}

.page-hero h1 {
  font-family: var(--font-hero);
  font-size: clamp(2.1rem, 4.2vw, 3rem);
  letter-spacing: -0.03em;
  color: var(--white);
  margin-bottom: 18px;
}

.page-hero p {
  max-width: 620px;
  margin: 0 auto;
  font-size: 1.08rem;
  color: rgba(255, 255, 255, 0.72);
}

/* ---------- Utilities ---------- */

.text-center {
  text-align: center;
}

.items-center {
  align-items: center;
}

.mt-lg {
  margin-top: 56px;
}

/* ---------- Responsive ---------- */

@media (max-width: 980px) {
  .hero {
    padding: 108px 0 88px;
  }

  .page-hero {
    padding: 100px 0 64px;
  }

  .hero-lead {
    max-width: none;
  }

  .grid-2,
  .process-grid,
  .footer-grid,
  .diff-grid,
  .pillar-grid,
  .zero-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .contact-grid {
    grid-template-columns: 1fr;
  }

  .framed-image {
    margin-top: 48px;
  }
}

@media (max-width: 760px) {
  .nav-links,
  .nav-cta .btn {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }

  .nav.open .nav-links {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    padding: 24px;
    gap: 18px;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
  }

  .grid-2,
  .grid-3,
  .process-grid,
  .footer-grid,
  .diff-grid,
  .pillar-grid,
  .zero-grid,
  .stats-row {
    grid-template-columns: 1fr;
  }

  /* Stacked, so the dividers have to run horizontally instead. */
  .stat-item + .stat-item {
    border-left: none;
    border-top: 1px solid var(--line);
    margin-top: 24px;
    padding-top: 24px;
  }

  .cta-band {
    flex-direction: column;
    text-align: center;
    padding: 44px 28px;
  }

  .cta-actions {
    justify-content: center;
  }

  .founder-strip {
    flex-direction: column;
    text-align: center;
    padding: 30px 26px;
  }

  .placements {
    grid-template-columns: 1fr;
  }

  .placement {
    padding: 26px 24px 24px;
  }

  .placement-brand {
    min-height: 0;
  }

  .section {
    padding: 72px 0;
  }

  .hero {
    padding: 92px 0 76px;
  }

  .page-hero {
    padding: 84px 0 56px;
  }

  .hero-actions {
    margin-bottom: 40px;
  }

  .hero-actions .btn {
    flex: 1 1 auto;
    justify-content: center;
  }

  /* Blobs are sized in vw, so on a narrow screen they shrink to nothing —
     pin a minimum so the aurora still fills the band. */
  .aurora-1,
  .aurora-2,
  .aurora-3 {
    width: 140vw;
    height: 140vw;
  }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .hero-inner > *,
  .aurora-blob {
    animation: none;
  }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}