/* ==========================================================================
   Growack — Marketing-grade visual layer (loaded after premium.css)
   Goal: make it read like a sales & marketing studio — bolder type, tasteful
   brand-colour depth, floating metric chips, results charts, richer graphics.
   Stays premium: soft, low-opacity brand washes only (no loud gradients).
   ========================================================================== */

/* ---------- 1. Bolder typography ----------------------------------------- */
/* WEIGHT is what carries the "bolder" intent here — the SIZES are pinned to the
   Developer Brief §2.2 scale (H1 44/32, H2 32/26, H3 24/22, H4 20/18). These
   clamps mirror styles.css exactly; they stay declared so this layer never
   silently re-inflates the scale again. */
:root {
  --fs-display: clamp(2rem, 1.4rem + 2.4vw, 2.75rem);   /* hero H1: 32 → 44 */
  --fs-h1: clamp(2rem, 1.4rem + 2.4vw, 2.75rem);        /* 32 → 44 */
  --fs-h2: clamp(1.625rem, 1.3rem + 1.3vw, 2rem);       /* 26 → 32 */
  --fs-h3: clamp(1.375rem, 1.2rem + 0.6vw, 1.5rem);     /* 22 → 24 */
  --fs-lead: clamp(1.12rem, 1.02rem + 0.55vw, 1.375rem);
}
h1 { font-weight: 800; }
/* ONE WEIGHT FOR THE SECTION-HEADING ROLE.
   This rule used to reach only `.section-head h2` / `.statement h2` / `.cta-band h2`,
   so a bare <h2> in a plain section fell back to the base 700 while its neighbour
   inside a .section-head rendered 800 — identical role, identical 32px size, mixed
   WITHIN a single page on 42 of 48 pages (e.g. /services/revops-systems/ runs
   800,800,700,700,800,800,700,800,800,800 in document order, all unclassed h2).
   The 32px section heading is now 800 everywhere, and the two h2 roles that are
   deliberately NOT that heading keep their own declared weight below. */
h2 { font-weight: 800; letter-spacing: -0.035em; }
.hero h1, .page-hero h1 { font-weight: 800; letter-spacing: -0.045em; line-height: 1.2; }
/* Secondary h2s (form cards, in-column sub-heads) stay calm — not the big section size */
.form-card h2, .form-success h2, .page-hero h2 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }
/* NOTE: no .article-body exception. Keeping in-article h2 at 700 left FOUR blog
   pages rendering 32px/700 and 32px/800 side by side — the same defect at the
   same size, just moved. One weight for the 32px role, everywhere. */
.hero-sub, .page-hero .lead { font-size: var(--fs-lead); }
.eyebrow { font-size: 0.82rem; letter-spacing: 0.14em; }

/* ---------- 2. Brand-colour depth (soft, tasteful) ----------------------- */
.hero { position: relative; overflow: clip; isolation: isolate; }
.hero::before {   /* warm orange glow, upper-right */
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: min(46vw, 640px); aspect-ratio: 1; right: -8%; top: -26%;
  background: radial-gradient(circle, rgba(249, 115, 22, 0.18), transparent 62%);
}
.hero::after {    /* cool teal glow, lower-left */
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: min(40vw, 520px); aspect-ratio: 1; left: -14%; bottom: -22%;
  background: radial-gradient(circle, rgba(15, 118, 110, 0.14), transparent 62%);
  -webkit-mask: none; mask: none; opacity: 1;
}
.page-hero { position: relative; overflow: clip; isolation: isolate; }
.page-hero::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 420px; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38vw 38vw at 88% -30%, rgba(249, 115, 22, 0.14), transparent 60%),
    radial-gradient(30vw 30vw at 2% 0%, rgba(15, 118, 110, 0.10), transparent 60%);
}

/* Section decoration helpers (opt-in) */
.deco { position: relative; overflow: clip; isolation: isolate; }
.deco--warm::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: 520px; aspect-ratio: 1; right: -12%; top: -30%;
  background: radial-gradient(circle, rgba(249, 115, 22, 0.10), transparent 62%);
}
.deco--teal::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: 480px; aspect-ratio: 1; left: -14%; bottom: -30%;
  background: radial-gradient(circle, rgba(15, 118, 110, 0.09), transparent 62%);
}

/* Dotted grid accent (subtle, for a marketing texture) */
.dotgrid-bg {
  background-image: radial-gradient(rgba(17, 24, 39, 0.06) 1.1px, transparent 1.1px);
  background-size: 22px 22px;
}

/* ---------- 3. Hero card: richer, alive ---------------------------------- */
.hero-visual { position: relative; }
.hero-card {
  box-shadow: 0 30px 60px -24px rgba(17, 24, 39, 0.22), 0 10px 24px -14px rgba(249, 115, 22, 0.18);
}
/* Floating metric chip */
.float-chip {
  position: absolute; z-index: 3;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  box-shadow: 0 16px 30px -14px rgba(17, 24, 39, 0.28);
  padding: 12px 15px; display: flex; align-items: center; gap: 11px;
  /* 6s, not the 5s this carried: the site's floating-chip loop is 6s
     (.gfx-chip in graphics.css, .result-card in refine.css). This one renders
     on no page today, which is exactly why it drifted and exactly why it is
     worth pinning - the next page that uses a .float-chip would have bobbed a
     fifth faster than the .gfx-chip beside it and nobody would have measured
     it. Phase offset below scaled with it (1.2s of 5s -> 1.4s of 6s, the same
     23% the .gfx-chip pair uses). */
  animation: chip-float 6s ease-in-out infinite;
}
.float-chip--tr { top: -26px; right: -22px; }
.float-chip--bl { bottom: -24px; left: -26px; animation-delay: 1.4s; }
@media (max-width: 520px) { .float-chip--tr { right: 4px; top: -18px; } .float-chip--bl { left: 2px; bottom: -14px; } }
.float-chip .fc-ic {
  width: 34px; height: 34px; border-radius: 9px; flex: none; display: grid; place-items: center;
  background: var(--color-primary-soft); color: var(--color-primary);
}
.float-chip .fc-ic--teal { background: var(--color-teal-soft); color: var(--color-teal); }
.float-chip .fc-ic svg { width: 19px; height: 19px; }
.float-chip .fc-num { display: block; font-family: var(--font-heading); font-weight: 800; font-size: 1.15rem; line-height: 1.05; letter-spacing: -0.02em; color: var(--color-primary); }
.float-chip .fc-lab { display: block; }
.float-chip--bl .fc-num { color: var(--color-teal); }
.float-chip .fc-lab { font-size: var(--fs-xs); color: var(--color-text-muted); margin-top: 2px; }
@keyframes chip-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@media (prefers-reduced-motion: reduce) { .float-chip { animation: none; } }

/* Mini sparkline row inside the hero card */
.sparkline { width: 100%; height: 34px; display: block; margin-top: 4px; }

/* ---------- 4. Results chart (proof section) ----------------------------- */
.chart-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-8);
  box-shadow: var(--shadow-md);
}
.chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); flex-wrap: wrap; }
.chart-head .ch-title { font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; }
.chart-head .ch-legend { display: flex; gap: var(--space-4); font-size: var(--fs-xs); color: var(--color-text-muted); }
.chart-head .ch-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: 5px; vertical-align: -1px; }
.growth-chart { width: 100%; height: auto; display: block; }
.growth-chart .bar-a { fill: var(--color-teal); opacity: 0.72; }
.growth-chart .bar-b { fill: var(--color-primary-bright); }
.growth-chart .grid-line { stroke: var(--color-border); stroke-width: 1; }
/* ---- Case-study chart labels: DECLARED IS NOT DELIVERED ------------------
   effective_px = declared_px x (rendered width / viewBox width). Authored in a
   480-unit viewBox, this chart renders between 286px and 706px depending on the
   width, i.e. it is scaled by 0.60x to 1.47x, so one declared number cannot
   serve it. Measured rendered width at 28 viewport widths:

     360:286  390:316  430:354  480:400  520:436  560:473  600:510  640:550
     700:586  768:654  820:706 | 860:319 (the section splits into two columns)
     900:338  960:366  1023:396  1120:442  1200:480  1280-1600:478

   Sized so the delivered result stays inside 12.2-16.0px at every one of them,
   and checked by eye for label collision, which no automated spacing test
   catches. The 640px card-padding reclaim below is kept: it is what stops the
   scale collapsing on a phone in the first place.   */
.growth-chart .axis-lab { fill: var(--color-text-muted); font: 500 var(--gclab, 20.5px) var(--font-body); }
.growth-chart .val-lab { fill: var(--color-text); font: 700 var(--gclab, 20.5px) var(--font-heading); }
@media (max-width: 640px) { .chart-card { padding: var(--space-5); } }
@media (min-width: 480px) and (max-width: 639px) { .growth-chart { --gclab: 14.75px; } }
@media (min-width: 640px) and (max-width: 859px) { .growth-chart { --gclab: 10.75px; } }
@media (min-width: 860px) and (max-width: 1119px) { .growth-chart { --gclab: 18.5px; } }
@media (min-width: 1120px) { .growth-chart { --gclab: 13.25px; } }

/* draw-in animation for bars */
.js .growth-chart rect[class^="bar"] { transform-box: fill-box; transform-origin: bottom; transform: scaleY(0); transition: transform 0.9s var(--ease-out); }
.js .growth-chart.is-in rect[class^="bar"] { transform: scaleY(1); }
.js .growth-chart.is-in rect.bar-b { transition-delay: 0.12s; }
@media (prefers-reduced-motion: reduce) { .js .growth-chart rect[class^="bar"] { transform: none; } }

/* ---------- 5. Process — visual journey ---------------------------------- */
.journey { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
@media (max-width: 860px) { .journey { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .journey { grid-template-columns: 1fr; } }
.journey--3 { grid-template-columns: repeat(3, 1fr); max-width: 900px; margin-inline: auto; }
@media (max-width: 640px) { .journey--3 { grid-template-columns: 1fr; } }
.journey--5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 980px) { .journey--5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .journey--5 { grid-template-columns: 1fr; } }
.journey::before {   /* connecting rail */
  content: ""; position: absolute; top: 34px; left: 8%; right: 8%; height: 2px;
  background: repeating-linear-gradient(90deg, var(--color-border) 0 8px, transparent 8px 16px);
  z-index: 0;
}
@media (max-width: 860px) { .journey::before { display: none; } }
.journey-step { position: relative; z-index: 1; text-align: center; }
.journey-step .js-badge {
  width: 68px; height: 68px; margin: 0 auto var(--space-4); border-radius: 20px;
  display: grid; place-items: center; background: var(--color-surface);
  border: 1.5px solid var(--color-border); box-shadow: var(--shadow-sm);
  color: var(--color-primary); position: relative;
  /* hover timing: MOTION SYSTEM role 3 (v2.css). border-color used to be
     untokened here, so ONE declaration carried two different easings. */
}
.journey-step:nth-child(2) .js-badge { color: var(--color-teal); }
.journey-step:nth-child(3) .js-badge { color: var(--color-primary); }
.journey-step:nth-child(4) .js-badge { color: var(--color-teal); }
.journey-step .js-badge svg { width: 30px; height: 30px; }
.journey-step .js-badge .js-n {
  position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--color-primary); color: #fff; font: 800 12px var(--font-heading);
  display: grid; place-items: center; box-shadow: 0 2px 6px rgba(249,115,22,0.4);
}
.journey-step:hover .js-badge { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: #d9c9b8; }
.journey-step h3 { font-size: var(--fs-h4); margin-bottom: var(--space-2); }
.journey-step p { color: var(--color-text-muted); font-size: 0.95rem; }

/* ---------- 6. Richer card icons + stat cards --------------------------- */
.card-icon { width: 52px; height: 52px; border-radius: 14px; }
.card-icon svg { width: 26px; height: 26px; }
.card--hover:hover .card-icon { transform: scale(1.05); }

/* Metric mini-cards (marketing proof tiles) */
.metric-tile {
  border: 1px solid var(--color-border); border-radius: var(--radius);
  padding: var(--space-6); text-align: left;
  position: relative; overflow: hidden;
  /* The corner blush used to be an absolutely positioned ::after at
     right:-20px / bottom:-20px, 80x80. An out-of-flow box hanging off the
     block-end and inline-end edges IS scrollable overflow, so every tile
     reported scrollWidth 16-20px past clientWidth in both axes and only
     overflow:hidden kept it invisible. Painting it as a background circle
     is the identical mark with no overflow region at all. */
  background:
    radial-gradient(circle 40px at calc(100% + 20px) calc(100% + 20px), #fef9e3 0 100%, transparent 100%),
    var(--color-surface);
}
.metric-tile .mt-num { font-family: var(--font-heading); font-weight: 800; font-size: clamp(2rem, 1.4rem + 2vw, 2.6rem); color: var(--color-primary); line-height: 1; letter-spacing: -0.02em; position: relative; }
.metric-tile .mt-lab { color: var(--color-text-muted); font-size: var(--fs-sm); margin-top: var(--space-3); position: relative; }
.metric-tile .mt-trend { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); font-weight: 700; color: var(--color-success-text); margin-top: var(--space-2); }

/* ---------- 7. Colored spotlight band (marketing energy) ---------------- */
.band-spotlight {
  background:
    radial-gradient(60% 120% at 100% 0%, rgba(249, 115, 22, 0.10), transparent 60%),
    var(--color-surface-alt);
  border-radius: var(--radius-lg);
}

/* ---------- 8. Founder — richer visual ---------------------------------- */
.founder-media { position: relative; }
.founder-frame {
  position: relative; aspect-ratio: 1; max-width: 340px; margin-inline: auto;
  border-radius: 26px; overflow: hidden;
  background: linear-gradient(150deg, var(--color-primary-soft), var(--color-teal-soft));
  display: grid; place-items: center;
}
.founder-frame .fm-mono {
  font-family: var(--font-heading); font-weight: 800; font-size: 5rem; letter-spacing: -0.03em;
  color: var(--color-text);
}
.founder-frame::after {   /* subtle dot texture inside frame */
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(17,24,39,0.06) 1.2px, transparent 1.2px); background-size: 20px 20px;
}
.founder-badge {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  background: var(--color-surface); border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md); border-radius: var(--radius-pill);
  padding: 8px 16px; font-size: var(--fs-sm); font-weight: 600; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 8px;
}
.founder-badge .dot { width: 8px; height: 8px; }

/* ---------- 9. Eyebrow pill variant (marketing badge) ------------------- */
.eyebrow-pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-primary); background: var(--color-primary-soft);
  padding: 6px 14px; border-radius: var(--radius-pill); margin-bottom: var(--space-6);
}
.eyebrow-pill--teal { color: var(--color-teal); background: var(--color-teal-soft); }

/* TOOLS / TECH STACK LOOP - v3.1 item 6.
   "it is in orange in other places, so it should be same all across the
   website." The icon was already orange ink and the label was slate #475569,
   so the row read grey with an orange glyph rather than as an orange band.
   Label and glyph now share one ink, --color-primary #C2410C, which is the
   palette's AA-safe orange ink on every surface this band sits on (#F8FAFC
   paper 7.4:1, #FFFFFF 8.0:1). The 0.85 icon opacity is gone with it: two
   different strengths of the same orange in one row is the inconsistency he
   is pointing at.
   Scope note: .marquee-item is the STACK loop only. The client logo loop is
   .trust-mq__item and the partner loop is .partner-mq__item; neither is
   touched here, and both stay uniform grey on cream. */
.marquee-item { font-size: 1.1rem; color: var(--color-primary); }
.marquee-item svg { color: var(--color-primary); opacity: 1; }