/* ==========================================================================
   Growack — v3 "editorial premium" layer  (loaded LAST, after visuals.css)
   Goal: the layout & graphics language of the founder's reference sites
   (airops / unmuted / dapper / growthsyndicate) — bold dark hero, highlighter-
   boxed keyword, fanned result-card deck, oversized metric walls, full-bleed
   dark moments — WITHIN the client's own brand: DM Sans headings + Inter body,
   orange (#f97316 / #c2410c) + teal (#0f766e), and the v2 slate neutrals.
   No serif face, no palette drift.
   ========================================================================== */

/* ---------- 1. Tokens: only ADD (dark surfaces), never override the palette -- */
:root {
  /* Dark "moment" surfaces — the brand's own slate dark (matches footer / CTA band) */
  --color-dark: #111827;          /* full-bleed dark sections */
  --color-dark-2: #0f172a;        /* hero — one notch deeper */
  --color-dark-line: rgba(255, 255, 255, 0.12);
  --color-on-dark: rgba(255, 255, 255, 0.74);   /* body text on dark (~9:1) */
  --color-on-dark-soft: rgba(255, 255, 255, 0.6);

  /* Hero display size = the brief's H1 ceiling. Confidence comes from weight
     (800) + tight tracking, not from exceeding the spec scale. */
  --fs-display: clamp(2rem, 1.4rem + 2.4vw, 2.75rem);   /* hero H1: 32 → 44 (brief §2.2) */

  /* Subtle film grain for dark surfaces */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* Headlines stay DM Sans (the client's heading face). Leading is the brief's
   H1 value (1.2) — roomy enough that a multi-line .hl highlighter box still
   clears the line above/below, since the box adds only ~0.14em. */
.hero h1, .page-hero h1 { line-height: 1.2; letter-spacing: -0.03em; }

/* ---------- 2. Highlighter-box keyword (unmuted signature) ---------------- */
/* box-decoration-break: clone gives each wrapped line its own padded box.
   Padding is modest so, with the roomier line-height above, the boxes clear the
   line above/below cleanly (the collision was what read as "compressed"). */
.hl {
  background: var(--color-primary-bright);
  color: #111827;
  /* Vertical padding kept minimal: DM Sans's inline content box is already ~1.30em,
     and the brief §2.2 pins H1/H2 line-height at 1.2, so any extra vertical padding
     makes stacked highlight boxes collide. Horizontal padding is unaffected. */
  padding: 0 0.28em 0.02em;
  border-radius: 9px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.hl--teal { background: var(--color-teal); color: #fff; }

/* ---------- 3. Full-bleed section variants ------------------------------- */
.section--paper { background: var(--color-surface-alt); }
.section--dark {
  position: relative;
  background: var(--color-dark);
  color: var(--color-on-dark);
  isolation: isolate;
  overflow: clip;
}
.section--dark::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--grain); opacity: 0.05;
}
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }
.section--dark .eyebrow { color: var(--color-primary-bright); }
.section--dark .eyebrow::before { background: var(--color-primary-bright); }
.section--dark .lead, .section--dark p { color: var(--color-on-dark); }
.section--dark .muted { color: var(--color-on-dark-soft); }
.section--dark .link-arrow { color: #5eead4; }
.section--dark .link-arrow:hover { color: #99f6e4; }
/* Light cards nested in a dark section keep their dark ink */
.section--dark .card,
.section--dark .chart-card,
.section--dark .hero-card,
.section--dark .quote,
.section--dark .metric-tile { color: var(--color-text); }
.section--dark .card h2, .section--dark .card h3, .section--dark .card h4,
.section--dark .card p, .section--dark .chart-card p,
.section--dark .quote p, .section--dark .quote h3 { color: var(--color-text); }
.section--dark .card .muted, .section--dark .chart-card .muted { color: var(--color-text-muted); }

/* ---------- 4. DARK HERO ------------------------------------------------- */
.hero--dark {
  position: relative;
  background: var(--color-dark-2);
  color: var(--color-on-dark);
  isolation: isolate;
  overflow: clip;
}
.hero--dark::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--grain); opacity: 0.06;
}
.hero--dark.hero::before { background: radial-gradient(circle, rgba(249,115,22,0.24), transparent 60%); }
.hero--dark.hero::after  { background: radial-gradient(circle, rgba(15,118,110,0.22), transparent 62%); }
.hero--dark h1 { color: #fff; }
.hero--dark .hero-sub { color: var(--color-on-dark); }
.hero--dark .hero-trust { color: var(--color-on-dark-soft); }
.hero--dark .hero-trust strong { color: #fff; }
.hero--dark .hero-superline {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
  backdrop-filter: blur(4px);
}
.hero--dark .hero-superline .dot { background: var(--color-primary-bright); box-shadow: 0 0 0 4px rgba(249,115,22,0.22); }
.hero--dark .link-arrow { color: #5eead4; }
.hero--dark .link-arrow:hover { color: #99f6e4; }
/* Feedback item 2: "Discover Our Work" is a subtle read-more link, not a box.
   Two dark surfaces are not .section--dark / .hero--dark and so were missed by
   the two rules above: the dark .cta-band (background var(--color-text)) and
   the dark .promo gradient band. Same two tokens, no new hue. */
.cta-band .link-arrow, .promo .link-arrow { color: #5eead4; }
.cta-band .link-arrow:hover, .promo .link-arrow:hover { color: #99f6e4; }

/* ---------- 5. Benefit check-list (growthsyndicate signature) ------------ */
.check-list { list-style: none; padding: 0; margin: var(--space-8) 0 0; display: grid; gap: var(--space-4); }
.check-list li { display: flex; gap: var(--space-3); align-items: flex-start; line-height: 1.5; }
.check-list .cl-ic {
  flex: none; width: 26px; height: 26px; border-radius: 50%; margin-top: 1px;
  display: grid; place-items: center;
  background: var(--color-teal-soft); color: var(--color-teal);
}
.check-list .cl-ic svg { width: 15px; height: 15px; }
.check-list b { font-weight: 600; color: inherit; }
.hero--dark .check-list li { color: var(--color-on-dark); }
.hero--dark .check-list b { color: #fff; }
.hero--dark .check-list .cl-ic { background: rgba(20, 184, 166, 0.16); color: #5eead4; }

/* ---------- 6. Fanned RESULT-CARD deck (growthsyndicate hero graphic) ----- */
.result-deck { position: relative; min-height: 470px; }
@media (max-width: 860px) { .result-deck { min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); } }
@media (max-width: 420px) { .result-deck { grid-template-columns: 1fr; } }

.result-card {
  position: absolute;
  width: 236px;
  background: var(--color-surface);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 18px;
  padding: 18px 20px;
  box-shadow: 0 30px 60px -24px rgba(2, 6, 23, 0.55), 0 12px 24px -14px rgba(2, 6, 23, 0.4);
}
@media (max-width: 860px) {
  .result-card { position: static; width: auto; transform: none !important; box-shadow: var(--shadow-lg); }
}
.result-card .rc-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-heading); font-size: var(--fs-xs); font-weight: 600;
  color: var(--color-text-muted); letter-spacing: 0.02em;
}
.result-card .rc-eyebrow .rc-ic {
  width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center;
  background: var(--color-primary-soft); color: var(--color-primary);
}
.result-card .rc-eyebrow .rc-ic svg { width: 13px; height: 13px; }
.result-card .rc-num {
  font-family: var(--font-heading); font-weight: 800; font-size: 2.35rem; line-height: 1.05;
  letter-spacing: -0.03em; color: var(--color-text); margin-top: 10px;
}
.result-card .rc-lab { font-size: var(--fs-sm); color: var(--color-text-muted); margin-top: 3px; }
.result-card--teal .rc-num { color: var(--color-teal); }
.result-card--teal .rc-eyebrow .rc-ic { background: var(--color-teal-soft); color: var(--color-teal); }
.result-card .rc-spark { width: 100%; height: 30px; margin-top: 12px; display: block; }

.result-card--1 { top: 8px;   right: 4px;   transform: rotate(3deg);  z-index: 4; }
.result-card--2 { top: 96px;  right: 156px; transform: rotate(-4deg); z-index: 3; }
.result-card--3 { top: 240px; right: 30px;  transform: rotate(3deg);  z-index: 2; }
.result-card--4 { top: 328px; right: 180px; transform: rotate(-3deg); z-index: 1; }
.js .result-card { animation: rc-float 6s ease-in-out infinite; }
.js .result-card--2 { animation-delay: .8s; }
.js .result-card--3 { animation-delay: 1.6s; }
.js .result-card--4 { animation-delay: 2.4s; }
.result-card--1 { --rot: 3deg; } .result-card--2 { --rot: -4deg; }
.result-card--3 { --rot: 3deg; } .result-card--4 { --rot: -3deg; }
@keyframes rc-float { 0%,100% { transform: translateY(0) rotate(var(--rot,0)); } 50% { transform: translateY(-8px) rotate(var(--rot,0)); } }
@media (prefers-reduced-motion: reduce), (max-width: 860px) { .js .result-card { animation: none; } }

/* ---------- 7. Oversized METRIC WALL (dapper signature) — DM Sans -------- */
.metric-wall { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-12) var(--space-8); }
@media (max-width: 820px) { .metric-wall { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px) { .metric-wall { grid-template-columns: 1fr; } }
.mw-item { position: relative; padding-left: var(--space-6); border-left: 3px solid var(--color-primary-bright); }
.section--dark .mw-item { border-left-color: rgba(249, 115, 22, 0.6); }
.mw-num {
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(2.6rem, 1.8rem + 2.8vw, 3.9rem); line-height: 1; letter-spacing: -0.04em;
  color: var(--color-primary);
}
.section--dark .mw-num { color: var(--color-primary-bright); }
.mw-lab { margin-top: var(--space-3); font-size: var(--fs-sm); color: var(--color-text-muted); max-width: 24ch; }
.section--dark .mw-lab { color: var(--color-on-dark); }
.mw-item--teal { border-left-color: var(--color-teal); }
.mw-item--teal .mw-num { color: var(--color-teal); }
.section--dark .mw-item--teal { border-left-color: #2dd4bf; }
.section--dark .mw-item--teal .mw-num { color: #2dd4bf; }

/* ---------- 8. Metric TILES — keep numbers inside their box, add air ------ */
/* Big numbers were clipping / wrapping badly inside narrow 2-up hero cards. */
.metric-tile .mt-num { font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.3rem); line-height: 1.05; }
.metric-tile .mt-lab { line-height: 1.4; }
/* 2-up tiles inside a card sit in a ~150px column — scale down + stop the
   decorative circle crowding so "+268%" and "50 → 115" render cleanly. */
.card .grid-2 .metric-tile,
.grid-2 .metric-tile { padding: var(--space-4); }
.card .grid-2 .metric-tile .mt-num,
.grid-2 .metric-tile .mt-num { font-size: clamp(1.35rem, 1.05rem + 1vw, 1.65rem); }
.card .grid-2 .metric-tile,
.grid-2 .metric-tile {
  background:
    radial-gradient(circle 27px at calc(100% + 16px) calc(100% + 16px), #fef9e3 0 100%, transparent 100%),
    var(--color-surface);
}

/* ---------- 9. Eyebrow — a touch quieter, more editorial ----------------- */
.eyebrow { letter-spacing: 0.16em; }

/* ---------- 10. Pull-quote — big DM Sans statement (no serif) ------------- */
.pullquote {
  font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2rem); line-height: 1.32;
  letter-spacing: -0.02em; color: var(--color-text); max-width: 22ch;
}
.section--dark .pullquote { color: #fff; }
.pullquote .pq-mark { color: var(--color-primary-bright); font-weight: 800; }

/* Case-card outcome headline stays on the heading face (no serif) */
.cc-outcome { font-family: var(--font-heading); }

/* ---- Chart bars: visible by DEFAULT (override visuals.css unconditional
   collapse). Only charts JS opts into (.draw) start collapsed for the draw-in,
   and main.js guarantees they always end up painted. This makes an empty-bars
   chart impossible even if IntersectionObserver never fires. */
.js .growth-chart rect[class^="bar"] { transform: none; transition: none; }
.js .growth-chart.draw rect[class^="bar"] {
  transform-box: fill-box; transform-origin: bottom;
  transform: scaleY(0); transition: transform 0.9s var(--ease-out);
}
.js .growth-chart.draw.is-in rect[class^="bar"] { transform: scaleY(1); }
.js .growth-chart.draw.is-in rect.bar-b { transition-delay: 0.12s; }
@media (prefers-reduced-motion: reduce) {
  .js .growth-chart.draw rect[class^="bar"] { transform: none; }
}

/* Quote attribution: stack name over role (they ran together inline) */
.quote-foot .qf-name { display: block; }
.quote-foot .qf-role { display: block; }

/* ---------- 11. Reduced-motion safety ------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .js .result-card { animation: none !important; }
}