/* ============================================================
   BuzzFam — Stripe-inspired showcase
   Brand: green #a0dd71 · black #000 · white #fff · high contrast
   ============================================================ */

@font-face {
  font-family: "Black Rocker";
  src: url("../assets/fonts/BlackRocker.ttf") format("truetype");
  font-weight: 400 900;
  font-display: swap;
}

:root {
  --green: #a0dd71;
  --green-bright: #b6f582;
  --green-deep: #6fb240;
  --amber: #ffb22e;      /* third color — honey/highlight */
  --amber-deep: #f2901a;
  --cyan: #2fb9d6;       /* punk spot colors */
  --cyan-deep: #1f93ab;
  --orange: #c85f2b;     /* burnt orange */
  --orange-deep: #a84a1e;
  --ink: #0f1712;        /* chalkboard slate-green */
  --ink-soft: #16211a;
  --black: #000;
  --white: #fff;
  --paper: #f1efe6;      /* warm off-white paper */
  --paper-2: #e6e3d6;
  --muted: #5b6660;
  --muted-light: #aab4ab;
  --line: rgba(0,0,0,.08);
  --line-light: rgba(255,255,255,.12);

  --radius: 3px;
  --radius-lg: 4px;
  --maxw: 1180px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.06), 0 6px 18px rgba(0,0,0,.06);
  --shadow-md: 0 10px 30px rgba(0,0,0,.10), 0 30px 60px rgba(0,0,0,.08);
  --shadow-green: 0 18px 50px rgba(111,178,64,.35);

  --display: "Black Rocker", "Archivo", system-ui, sans-serif;
  --sans: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --hand: "Caveat", "Segoe Script", cursive;  /* adult handwriting, legible */
  /* chalk-dust grain + honeycomb (lightweight raster tiles) */
  --grain: url("../assets/img/grain.png");
  --honey-tex: url("../assets/img/honeycomb.png");
  --distress: url("../assets/img/distress.png");
  --ink-mask: url("../assets/img/ink-mask.png");
  --residue: url("../assets/img/residue.png");  /* peeled-sticker / adhesive grime */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--white);
  line-height: 1.55;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ---------- Display type ---------- */
.hero__title, .section__title, .cta__title, .plan__price, .stat b, .mock__stat b,
.case__metrics b { font-family: var(--display); font-weight: 400; letter-spacing: .5px; line-height: .98; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: .5em;
  font-weight: 800; font-size: .98rem; letter-spacing: .3px; text-transform: uppercase;
  padding: 15px 26px; border-radius: var(--radius);
  cursor: pointer; border: 3px solid transparent;
  transition: transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .25s, background .2s, color .2s;
  will-change: transform;
}
.btn__arrow { transition: transform .25s cubic-bezier(.2,.7,.2,1); }
.btn:hover .btn__arrow { transform: translateX(4px); }
/* ---- Die-cut sticker TEXT buttons — white outline + burnt-orange fill (matches the character stickers) ---- */
.btn--primary, .btn--ghost {
  font-family: var(--hand); text-transform: none; letter-spacing: .5px; font-weight: 700;
  font-size: clamp(1.4rem, 1.9vw, 1.8rem); line-height: 1.05;
  position: relative; border: 0; box-shadow: none; background: none; padding: 8px 20px;
  color: #cf6a22;  /* burnt orange fill */
  -webkit-text-stroke: 4.5px #fff; paint-order: stroke fill;  /* white die-cut outline like the stickers */
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.45)) drop-shadow(2px 4px 0 rgba(0,0,0,.18));
  transform: rotate(-2deg);  /* slapped on crooked */
  transition: transform .2s cubic-bezier(.2,.7,.2,1), color .2s;
}
.btn--primary:hover, .btn--ghost:hover { transform: rotate(-2deg) scale(1.06); color: #e67e1f; }
.nav--scrolled .btn--ghost { color: #cf6a22; }
.btn--dark { background: var(--ink); color: #fff; border-color: #fff; box-shadow: 5px 5px 0 rgba(0,0,0,.35); }
.btn--dark:hover { transform: translate(-2px,-2px); background: #1d231d; }
/* subtle flickering smolder — a tight warm glow that hugs the exact torn-paper edge (drop-shadow follows the mask alpha) and gently flickers */
@keyframes emberEdge {
  0%   { filter: drop-shadow(0 0 2px rgba(255,150,45,.55))  drop-shadow(0 0 7px rgba(240,90,25,.26))  drop-shadow(4px 6px 7px rgba(0,0,0,.3)); }
  20%  { filter: drop-shadow(0 0 3px rgba(255,178,62,.74))  drop-shadow(0 0 9px rgba(245,100,28,.36))  drop-shadow(4px 6px 7px rgba(0,0,0,.3)); }
  37%  { filter: drop-shadow(0 0 2px rgba(255,148,44,.5))   drop-shadow(0 0 7px rgba(240,90,25,.24))   drop-shadow(4px 6px 7px rgba(0,0,0,.3)); }
  58%  { filter: drop-shadow(0 0 4px rgba(255,190,72,.82))  drop-shadow(0 0 12px rgba(248,108,30,.42)) drop-shadow(4px 6px 7px rgba(0,0,0,.3)); }
  78%  { filter: drop-shadow(0 0 2px rgba(255,158,48,.58))  drop-shadow(0 0 8px rgba(242,95,26,.3))    drop-shadow(4px 6px 7px rgba(0,0,0,.3)); }
  100% { filter: drop-shadow(0 0 2px rgba(255,150,45,.55))  drop-shadow(0 0 7px rgba(240,90,25,.26))   drop-shadow(4px 6px 7px rgba(0,0,0,.3)); }
}
.btn--lg { padding: 10px 26px; font-size: clamp(1.62rem, 2.2vw, 2.05rem); -webkit-text-stroke-width: 5.5px; }
.btn--block { width: 100%; justify-content: center; }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background .3s, box-shadow .3s, backdrop-filter .3s, border-color .3s;
  border-bottom: 1px solid transparent;
}
.nav__inner {
  max-width: var(--maxw); margin: 0 auto; padding: 10px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.nav__logo img { height: 92px; width: auto; transition: transform .3s; }
.nav__logo:hover img { transform: rotate(-2deg) scale(1.04); }
.nav__links { display: flex; gap: 22px; align-items: baseline; }
.nav__links a {
  font-family: var(--display); font-weight: 400; font-size: 1.32rem; letter-spacing: .5px;
  white-space: nowrap;
  color: #15201a; -webkit-text-stroke: 3px #fff; paint-order: stroke fill;
  filter: drop-shadow(1px 2px 0 rgba(0,0,0,.28));
  opacity: 1; position: relative; transition: color .3s, filter .2s;
}
.nav--scrolled .nav__links a { color: var(--green); -webkit-text-stroke: 3px #0f1712; }
.nav--scrolled .nav__links a:hover { color: #0f1712; -webkit-text-stroke: 3px #fff; }
.nav__links a:hover { color: var(--green-deep); filter: drop-shadow(1px 2px 0 rgba(0,0,0,.32)); }
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: -6px; height: 2px; width: 0;
  background: var(--green-deep); transition: width .25s;
}
.nav__links a:hover { opacity: 1; }
.nav__links a:hover::after { width: 100%; }
/* hamburger (JS-injected; hidden on desktop) */
.nav__burger { display: none; }
@media (max-width: 960px) { /* tablet + mobile: desktop nav links hide at 960, so the hamburger must too */
  .nav--js .nav__inner { justify-content: center; position: relative; padding-top: 6px; padding-bottom: 2px; }
  .nav--js .nav__logo img { height: 93px; }
  .nav--js .nav__burger { display: flex; flex-direction: column; justify-content: center; gap: 5px;
    position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
    width: 46px; height: 46px; padding: 9px; background: none; border: 0; cursor: pointer; z-index: 3; }
  .nav--js .nav__burger span { display: block; height: 3px; width: 28px; background: var(--ink); border-radius: 2px;
    filter: drop-shadow(0 1px 0 rgba(255,255,255,.55)); transition: transform .26s cubic-bezier(.2,.7,.2,1), opacity .2s; }
  .nav--js .nav__links { position: absolute; top: 100%; left: 0; right: 0; display: none;
    flex-direction: column; align-items: center; gap: 4px; padding: 16px 0 22px;
    background: var(--paper); background-image: var(--grain); border-bottom: 2px solid var(--ink);
    box-shadow: 0 16px 26px rgba(0,0,0,.2); }
  .nav--js.is-open .nav__links { display: flex; }
  .nav--js .nav__links a { font-size: 2rem; padding: 6px 4px; color: #15201a; }
  .nav--js.is-open .nav__burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .nav--js.is-open .nav__burger span:nth-child(2) { opacity: 0; }
  .nav--js.is-open .nav__burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
}
.nav__cta { display: flex; align-items: center; gap: 12px; }
.nav--scrolled {
  background: rgba(15,23,18,.9);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom-color: rgba(255,255,255,.1);
  box-shadow: 0 6px 30px rgba(0,0,0,.28);
}
.nav--scrolled .nav__burger span { background: #efe9d9; filter: drop-shadow(0 1px 0 rgba(0,0,0,.45)); }

/* ============================================================
   AURORA (animated gradient)
   ============================================================ */
.aurora { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.blob {
  position: absolute; border-radius: 50%;
  filter: blur(70px); opacity: .85; will-change: transform;
}
.blob--1 { width: 540px; height: 540px; left: -8%; top: -12%;
  background: radial-gradient(circle at 30% 30%, var(--green), transparent 65%);
  animation: drift1 18s ease-in-out infinite; }
.blob--2 { width: 460px; height: 460px; right: -6%; top: 4%;
  background: radial-gradient(circle at 50% 50%, var(--green-deep), transparent 62%);
  opacity: .7; animation: drift2 22s ease-in-out infinite; }
.blob--3 { width: 620px; height: 620px; left: 22%; bottom: -34%;
  background: radial-gradient(circle at 50% 50%, #2f7d2a, transparent 60%);
  opacity: .55; animation: drift3 26s ease-in-out infinite; }
.blob--4 { width: 300px; height: 300px; right: 24%; bottom: 6%;
  background: radial-gradient(circle at 50% 50%, var(--green-bright), transparent 60%);
  opacity: .6; animation: drift2 20s ease-in-out infinite reverse; }

@keyframes drift1 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(60px,40px) scale(1.12)} }
@keyframes drift2 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-50px,50px) scale(1.08)} }
@keyframes drift3 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(40px,-50px) scale(1.15)} }

/* ============================================================
   HERO
   ============================================================ */
/* single-screen hero — no scroll-jacking; the video autoplays + loops */
.hero { position: relative; height: 100svh; min-height: 620px; overflow: hidden;
  background-color: #faf9f5; background-image: var(--grain); }
.hero__pin {
  position: relative; height: 100%; overflow: hidden; display: flex; align-items: center; justify-content: center;
  /* reserve space for the fixed nav so the headline never tucks under the menu */
  padding: 140px 0 40px;
}
/* full-bleed explosion stage */
.hero__stage { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; }

/* continuous falling embers / debris / living character stickers blasting out of the screen */
.hero__fall { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.hero__fall .deb, .hero__fall .toon {
  position: absolute; top: -20vh; will-change: transform, opacity;
  animation: heroFall var(--dur, 9s) linear var(--delay, 0s) infinite;
}
/* stickers fall ONCE (JS spawner recycles them so only ~3 are ever on screen); embers/debris keep looping */
.hero__fall .toon { animation-iteration-count: 1; animation-fill-mode: forwards; }
.hero__fall .ember {
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #ffe1a0, #ff8a2b 52%, rgba(200,70,20,0) 76%);
  box-shadow: 0 0 9px 2px rgba(255,150,55,.6);
}
.hero__fall .chunk {
  border-radius: 30% 60% 52% 42%;
  background: linear-gradient(140deg, #4a2c19, #120a05);
  box-shadow: inset 1px 1px 2px rgba(255,160,80,.28), 1px 2px 3px rgba(0,0,0,.3);
}
@keyframes heroFall {
  0%   { transform: translateY(-20vh) translateX(0) rotate(0deg); opacity: 0; }
  6%   { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(124vh) translateX(var(--drift, 40px)) rotate(var(--spin, 360deg)); opacity: 0; }
}
/* the toon wrapper handles the FALL; its inner img is independently "alive" (bobs/wiggles) */
.hero__fall .toon img {
  display: block; width: 100%; height: auto;
  filter: drop-shadow(4px 6px 6px rgba(0,0,0,.38));
  transform-origin: 50% 60%;
  animation: var(--alive, toonBob) var(--adur, 2.6s) ease-in-out infinite;
}
@keyframes toonBob    { 0%,100% { transform: translateY(-6px) rotate(-5deg); } 50% { transform: translateY(6px) rotate(5deg); } }
@keyframes toonWiggle { 0%,100% { transform: rotate(-12deg); }                50% { transform: rotate(12deg); } }
@keyframes toonFlut   { 0%,100% { transform: rotate(-7deg) scale(1); }        50% { transform: rotate(8deg) scale(1.09); } }
@media (prefers-reduced-motion: reduce) { .hero__fall { display: none; } }

/* ---- scroll-flying rocket mascot ---- */
.rocketfly { position: fixed; top: 0; left: 0; width: 100vw; height: 100svh; z-index: 90; pointer-events: none; overflow: hidden; }
.rocketfly__ship { position: absolute; left: 0; top: 0; width: clamp(96px, 11vw, 168px); height: auto;
  opacity: 0; transform-origin: 50% 50%; will-change: transform, opacity; filter: drop-shadow(3px 5px 6px rgba(0,0,0,.34)); }
.rocketfly__trail { position: absolute; inset: 0; }
.rocketfly__puff { position: absolute; width: 16px; height: 16px; border-radius: 50%; transform: translate(-50%,-50%);
  background: radial-gradient(circle at 42% 36%, rgba(255,255,255,.85), rgba(206,206,206,.5) 55%, rgba(180,180,180,0) 72%);
  animation: rfPuff 1.3s ease-out forwards; will-change: transform, opacity; }
@keyframes rfPuff { from { opacity: .65; } to { opacity: 0; transform: translate(-50%,-50%) scale(2.3); } }
@media (max-width: 760px) { .rocketfly__ship { width: 80px; } }
@media (prefers-reduced-motion: reduce) { .rocketfly { display: none; } }
.boom, .hero__vid {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; background: #faf9f5;
}
/* two-phase hero: intro plays once, loop crossfades in on top of it */
.hero__vid--loop { opacity: 0; transition: opacity .7s ease; z-index: 2; }
.hero__vid--loop.is-on { opacity: 1; }
.hero__vid--intro { z-index: 1; transition: opacity .7s ease; }
.fly { position: absolute; left: 50%; top: 50%; width: clamp(98px, 11vw, 172px); height: auto;
  opacity: 0; z-index: 2; will-change: transform, opacity;
  transform: translate(-50%, -50%) scale(.2);
  filter: drop-shadow(5px 7px 6px rgba(0,0,0,.32)); }
.fly .badge { width: 100%; aspect-ratio: 1; display: grid; place-items: center; position: relative;
  border-radius: var(--shape, 24%); background: var(--badge, var(--green));
  box-shadow: 0 0 0 5px #fff, 0 0 0 6.5px rgba(0,0,0,.72), 6px 10px 16px rgba(0,0,0,.34); }
/* vinyl dimensional shading */
.fly .badge::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 1; pointer-events: none;
  background: linear-gradient(157deg, rgba(255,255,255,.34), rgba(255,255,255,0) 40%, rgba(0,0,0,.17)); }
/* glossy highlight streak (photo sticker sheen) */
.fly .badge::after { content: ""; position: absolute; left: 8%; top: 6%; width: 62%; height: 40%; z-index: 1; pointer-events: none;
  border-radius: 50%; transform: rotate(-10deg); filter: blur(2px); opacity: .85;
  background: linear-gradient(150deg, rgba(255,255,255,.62), rgba(255,255,255,0) 72%); }
.fly .badge svg, .fly .badge .glyph-txt { position: relative; z-index: 2; }
.fly .badge svg { width: 56%; height: 56%; display: block; }
.fly .glyph-txt { font-family: var(--sans); font-weight: 900; font-size: 2.6em; line-height: 1; }
.fly--tiktok    { --badge: #111; --shape: 50%; }              .fly--tiktok svg { fill: #fff; }
.fly--instagram { --badge: var(--amber); --shape: 27%; }      .fly--instagram svg { stroke: #1a1208; color: #1a1208; }
.fly--facebook  { --badge: var(--cyan); --shape: 50%; }       .fly--facebook svg { fill: #fff; }
.fly--linkedin  { --badge: var(--green-deep); --shape: 20%; } .fly--linkedin svg { fill: #fff; }
.fly--dollar    { --badge: var(--green); --shape: 50%; }       .fly--dollar .glyph-txt { color: #0c1a05; }
.fly--graph     { --badge: var(--amber); --shape: 22%; }       .fly--graph svg { stroke: #1a1208; }
.fly--heart     { --badge: var(--orange); --shape: 42% 42% 46% 46%; } .fly--heart svg { fill: #fff; }

/* water droplets + smudge on the screen */
.drops { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.smudge { position: absolute; border-radius: 50%; filter: blur(9px);
  background: radial-gradient(ellipse, rgba(208,238,248,.4), transparent 70%);
  opacity: clamp(0, calc(var(--p,0) * 1.3 - .15), .8); }
.drop { position: absolute; border-radius: 50% 50% 48% 52%;
  background: radial-gradient(circle at 36% 28%, rgba(255,255,255,.72), rgba(220,245,255,.12) 46%, rgba(10,30,40,.16) 78%, rgba(10,30,40,.04));
  box-shadow: inset -1px -2px 3px rgba(0,0,0,.2), inset 1px 2px 4px rgba(255,255,255,.6), 1px 2px 3px rgba(0,0,0,.16);
  opacity: clamp(0, calc(var(--p,0) * 1.3 - .1), 1); }
/* scorched burn marks on the glass */
.burn { position: absolute; border-radius: 48% 52% 50% 50%; filter: blur(2px); mix-blend-mode: multiply;
  background: radial-gradient(circle at 50% 46%, rgba(8,6,5,.9) 12%, rgba(40,22,12,.72) 34%, rgba(90,50,22,.34) 54%, rgba(120,70,30,.12) 68%, transparent 78%);
  opacity: clamp(0, calc(var(--p,0) * 1.4 - .3), .95); }
.burn--ember { mix-blend-mode: normal;
  background: radial-gradient(circle at 50% 46%, rgba(8,6,5,.92) 10%, rgba(40,20,10,.7) 28%, rgba(205,95,28,.5) 46%, rgba(255,150,45,.28) 60%, transparent 76%); }

/* stickers settle + stick to the glass at full size (flat, wet) */
.fly.is-stuck .badge { box-shadow: 0 0 0 5px rgba(255,255,255,.95), 0 0 0 6.5px rgba(0,0,0,.7), 1px 3px 6px rgba(0,0,0,.24),
  inset 4px 5px 12px rgba(255,255,255,.4), inset -3px -4px 11px rgba(10,40,50,.22); }
.fly.is-stuck { filter: drop-shadow(2px 3px 4px rgba(0,0,0,.28)) drop-shadow(0 0 7px rgba(150,210,230,.42)) saturate(1.06) brightness(1.02); }

/* HERO HEADLINE band — dropped below the hero, headline overlaps its bottom edge.
   Dark to match the marquee/scrolling-titles band directly below it. */
.herohead { position: relative; z-index: 6; text-align: center;
  background-color: var(--ink); background-image: var(--grain); padding: 0 0 48px; }
/* sticker headline (overlapping, on top) — go wide so the type spreads across the screen */
.hero__copy { position: relative; z-index: 5; text-align: center; max-width: min(1640px, 96vw);
  /* pull the headline up so the die-cut type kisses the bottom of the hero video */
  top: -84px; margin-bottom: -84px; }
@media (max-width: 720px) { .hero__copy { top: -48px; margin-bottom: -48px; } }
.hero__title { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
/* line 1 = "eXPLOSIVe ONLINe PReSeNCe." kept on a single row (wraps only on very small screens) */
/* row-gap keeps "eXPLOSIVe" / "ONLINe PReSeNCe." from overlapping when they wrap to two lines on mobile */
.hero__line { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: .55em .7em; }
/* die-cut stickers: white border hugs the letterforms (not a rectangle) */
.stick {
  display: inline-block; font-family: var(--display); font-weight: 400; line-height: .9; letter-spacing: 1px;
  font-size: clamp(2.3rem, 5vw, 4.8rem); color: var(--ink);
  background: none; border: 0; padding: 0;
  -webkit-text-stroke: 9px #fff; paint-order: stroke fill;
  filter: drop-shadow(0 0 1.6px rgba(0,0,0,.6)) drop-shadow(3px 4px 0 rgba(0,0,0,.22));
  white-space: nowrap; /* keep each word-group intact; line 1 stacks as whole groups only on mobile */
}
/* bigger, screen-spanning sizing now that the headline sits below the hero */
.hero__line .stick { font-size: clamp(2rem, 5vw, 5.4rem); }
.stick--3 { font-size: clamp(2.6rem, 8.6vw, 9rem); }
.stick--1 { transform: rotate(-3deg); }
.stick--2 { transform: rotate(2deg); }
.stick--3 { transform: rotate(-1.4deg); color: var(--green); -webkit-text-stroke-color: #000; }
/* real burnt-paper vintage label as the subtitle background */
.hero__sub { font-family: var(--hand); font-size: clamp(1.5rem, 2.4vw, 2rem); color: #2a1d0e; max-width: 470px;
  margin: 22px auto 0; line-height: 1.16; font-weight: 600; letter-spacing: .2px; transform: rotate(-1.5deg);
  background: url("../assets/img/label-sub.png") center / 100% 100% no-repeat;
  padding: 42px 64px 48px; border: 0;
  filter: drop-shadow(5px 8px 8px rgba(0,0,0,.34)); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 18px; justify-content: center; }
/* hero CTA = the same die-cut text button, just bigger & tilted */
.hero__actions .btn { font-size: clamp(1.75rem, 2.5vw, 2.3rem); padding: 12px 28px; transform: rotate(-1.8deg); -webkit-text-stroke-width: 6px; }
.hero__actions .btn:hover { transform: rotate(-1.8deg) scale(1.05); }

.hero__cue { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 6;
  color: #6b7565; font-size: .72rem; letter-spacing: 2px; text-transform: uppercase; font-weight: 800; }

/* Hero panel / mock */
.hero__panel { position: relative; }
.mock {
  position: relative; z-index: 2; background: #fff; color: var(--ink);
  border-radius: var(--radius-lg); box-shadow: 0 40px 80px rgba(0,0,0,.5);
  overflow: hidden; border: 1px solid rgba(255,255,255,.1);
  animation: floatY 6s ease-in-out infinite;
}
@keyframes floatY { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
.mock__bar {
  display: flex; align-items: center; gap: 7px; padding: 13px 16px;
  background: var(--paper); border-bottom: 1px solid var(--line);
}
.mock__bar span { width: 11px; height: 11px; border-radius: 50%; background: #cdd5cd; }
.mock__bar span:first-child { background: #ff5f57; }
.mock__bar span:nth-child(2){ background: #febc2e; }
.mock__bar span:nth-child(3){ background: var(--green-deep); }
.mock__bar em { margin-left: auto; font-style: normal; font-size: .72rem; color: var(--muted); font-weight: 600; }
.mock__body { padding: 22px; }
.mock__row { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.mock__stat { background: var(--paper); border-radius: var(--radius); padding: 14px; }
.mock__stat b { display: block; font-size: 1.9rem; color: var(--ink); letter-spacing: 0; }
.mock__stat i { font-style: normal; font-size: .72rem; color: var(--muted); font-weight: 600; }
.mock__chart { margin: 16px 0; height: 90px; }
.mock__chart svg { width: 100%; height: 100%; }
.chart-line { fill: none; stroke: var(--green-deep); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1000; stroke-dashoffset: 1000; }
.in .chart-line, .mock.seen .chart-line { animation: draw 1.6s ease forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.chart-fill { fill: rgba(160,221,113,.18); }
.mock__queue { display: grid; gap: 8px; }
.qpill {
  display: flex; align-items: center; gap: 9px; font-size: .8rem; font-weight: 600;
  background: var(--paper); border-radius: var(--radius); padding: 9px 12px; color: #2b332b;
}
.qpill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green-deep); box-shadow: 0 0 0 3px rgba(111,178,64,.2); }

.floatcard {
  position: absolute; z-index: 3; background: #fff; border-radius: var(--radius);
  padding: 12px 16px; box-shadow: 5px 5px 0 rgba(0,0,0,.25); border: 2px solid var(--ink);
}
.floatcard--a { border-color: var(--green-deep); }
.floatcard--a b, .floatcard--b b { color: var(--ink); }
.floatcard--b i { color: var(--amber-deep); }
.floatcard b { display: block; font-size: .92rem; color: var(--ink); }
.floatcard i { font-style: normal; font-size: .76rem; color: var(--green-deep); font-weight: 700; }
.floatcard--a { top: 16px; left: -34px; animation: floatY 5s ease-in-out infinite .4s; }
.floatcard--b { bottom: 30px; right: -26px; animation: floatY 7s ease-in-out infinite .8s; }

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee-wrap { background-color: var(--ink); background-image: var(--grain); color: #fff; padding: 0 0 56px; }
.marquee-label { text-align: center; color: #8b968c; font-size: .82rem; font-weight: 600;
  letter-spacing: 1.5px; text-transform: uppercase; padding: 6px 0 22px; }
.marquee { position: relative; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee__track { display: flex; gap: 64px; width: max-content; animation: scrollx 26s linear infinite; }
.marquee__track span {
  font-family: var(--display); font-size: 2rem; color: rgba(255,255,255,.4);
  white-space: nowrap; letter-spacing: 1px;
  transition: color .3s;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track span:hover { color: var(--green); }
@keyframes scrollx { to { transform: translateX(-50%); } }

/* ============================================================
   SECTIONS (shared)
   ============================================================ */
.section { padding: 120px 0; position: relative; }
.section--light { background-color: var(--paper); background-image: var(--residue), var(--grain); background-size: 600px auto, auto; background-blend-mode: multiply, normal; color: var(--ink); }
.section--dark {
  background-color: var(--ink);
  background-image: var(--grain), radial-gradient(ellipse 90% 90% at 50% 50%, transparent 56%, rgba(0,0,0,.42));
  color: #fff;
}
.section__head { max-width: 720px; margin-bottom: 64px; }
/* block (not inline-block) so the kicker always sits ABOVE the die-cut title —
   inline-block let short headings flow onto the same line and overlap (FAQ) */
.kicker { display: block; width: fit-content; font-weight: 800; font-size: .78rem; letter-spacing: 2px;
  text-transform: uppercase; color: var(--green-deep); margin-bottom: 18px; }
.kicker--green { color: var(--green); }
/* die-cut sticker headline — white border hugs the letterforms (matches hero .stick) */
.section__title {
  font-size: clamp(2.6rem, 4.9vw, 4.3rem); letter-spacing: 1px; line-height: .94;
  display: inline-block; color: var(--ink);
  -webkit-text-stroke: 8px #fff; paint-order: stroke fill;
  filter: drop-shadow(0 0 1.4px rgba(0,0,0,.55)) drop-shadow(3px 4px 0 rgba(0,0,0,.18));
  transform: rotate(-1.4deg);
}
/* dark-bg variant: ink fill + white stroke still reads as a sticker on dark sections */
.section__title--light { color: var(--ink); }
.section__lead { font-size: 1.18rem; color: var(--muted); margin-top: 18px; line-height: 1.55; }
.section__lead--light { color: #aeb8af; }

/* ---------- Service cards ---------- */
.cards { display: grid; grid-template-columns: repeat(2,1fr); gap: 22px; }
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 34px; position: relative; overflow: hidden;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s;
}
.card::before {
  content: ""; position: absolute; left: 0; top: 0; height: 4px; width: 100%;
  background: linear-gradient(90deg, var(--green), var(--green-deep));
  transform: scaleX(0); transform-origin: left; transition: transform .4s;
}
.card:hover { transform: translateY(-8px); box-shadow: var(--shadow-md); border-color: transparent; }
.card:hover::before { transform: scaleX(1); }
.card__icon {
  width: 66px; height: 66px; border-radius: var(--radius); display: grid; place-items: center;
  background: var(--ink); border: 2px solid var(--green); margin-bottom: 22px;
  transition: background .3s, transform .3s;
}
.card__icon svg { width: 34px; height: 34px; display: block; }
.card__icon svg * { stroke: var(--green); }
.card:hover .card__icon { background: var(--green); transform: rotate(-3deg); }
.card:hover .card__icon svg * { stroke: var(--ink); }
.card h3 { font-size: 1.4rem; font-weight: 800; margin-bottom: 10px; }
.card p { color: var(--muted); font-size: 1rem; }
.card__link { display: inline-block; margin-top: 18px; color: var(--green-deep); font-weight: 700; font-size: .9rem; }

/* ---------- Image band ---------- */
.band {
  position: relative; min-height: 520px; display: grid; place-items: center; text-align: center;
  background: #e9eddf url("../assets/img/band-friendly-2.png") center/cover no-repeat fixed;
  overflow: hidden; border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink);
}
.band__overlay { position: absolute; inset: 0;
  background: radial-gradient(ellipse 82% 104% at 50% 48%, rgba(8,14,10,.76), rgba(8,14,10,.34)); }
.band__inner { position: relative; z-index: 2; max-width: 880px; padding: 110px 24px; }
.band__title { font-family: var(--display); font-size: clamp(2.5rem, 5.4vw, 4.6rem); color: #fff;
  line-height: .96; letter-spacing: 1px; text-shadow: 0 4px 24px rgba(0,0,0,.5); }
.band__sub { color: #e3eadf; font-size: 1.22rem; font-weight: 600; margin: 20px auto 32px; max-width: 600px;
  text-shadow: 0 2px 14px rgba(0,0,0,.5); }

/* ---------- Services scroller (sticky, Tres-Mares-inspired) ---------- */
.section--intro { padding-bottom: 70px; overflow: hidden; }
/* two-column services intro: sales copy on the left, BIG crew sticker on the right
   (in-flow grid; sticker oversized and allowed to bleed off the right edge) */
.intro__grid { display: grid; grid-template-columns: minmax(380px, 1fr) minmax(380px, 1.35fr);
  gap: 34px; align-items: center; }
.intro__text { min-width: 0; }
.section--intro .section__head { max-width: none; margin-bottom: 22px; }
.intro__lead { font-size: clamp(1.18rem, 1.7vw, 1.42rem); line-height: 1.5; color: var(--ink);
  font-weight: 600; margin: 0 0 16px; }
.intro__lead strong { color: var(--green-deep); }
.intro__sub { font-size: 1.06rem; line-height: 1.62; color: var(--muted); margin: 0 0 28px; }
.intro__engines { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 28px; margin: 0 0 30px; }
.engine { position: relative; padding-left: 30px; }
.engine::before { content: ""; position: absolute; left: 0; top: 2px; width: 18px; height: 18px;
  border-radius: 5px; background: var(--green); border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 rgba(15,23,18,.18); }
.engine h3 { font-family: var(--sans); font-weight: 900; font-size: 1.08rem; color: var(--ink); margin: 0 0 5px; }
.engine p { font-size: .97rem; line-height: 1.5; color: var(--muted); margin: 0; }
/* sticker pulled in-flow into the right column (overrides the absolute .sticker base) */
/* wrapper carries the scroll-driven float; the img keeps its idle bob + tilt */
.intro__stickerwrap { width: 100%; margin: 0 clamp(-90px, -4vw, 0px) 0 0; justify-self: end;
  transform: translate(var(--fx, 0px), var(--fy, 0px)) rotate(var(--fr, 0deg));
  transition: transform .55s cubic-bezier(.22,.61,.36,1); will-change: transform; }
.intro__sticker { position: relative; width: 100%; max-width: none; height: auto; margin: 0;
  opacity: 1; transform: rotate(-4deg);
  filter: drop-shadow(2px 6px 8px rgba(0,0,0,.3)) drop-shadow(0 0 13px rgba(255,120,40,.28)); }
@media (max-width: 920px) {
  .intro__grid { grid-template-columns: 1fr; gap: 26px; }
  .intro__sticker { order: -1; max-width: 420px; justify-self: center; margin: 0 auto; }
  .intro__engines { grid-template-columns: 1fr; gap: 16px; }
}
/* services showcase — a normal one-screen section (was a 440vh scroll-jacked sticky pin) */
.svc { position: relative; background: var(--ink); }
.svc__sticky { position: relative; overflow: hidden; background: var(--ink); color: #fff; }
.svc__bg { position: absolute; inset: 0; z-index: 0; }
.svc__layer {
  position: absolute; inset: 0; opacity: 0; transform: scale(1.06);
  background-color: var(--ink);
  background-size: cover; background-position: center; background-repeat: no-repeat;
  transition: opacity .9s ease, transform 7s ease;
}
.svc__layer.is-active { opacity: 1; transform: scale(1); }
.svc__scrim { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(96deg, rgba(13,20,15,.95) 30%, rgba(13,20,15,.6) 58%, rgba(13,20,15,.32) 100%),
              radial-gradient(ellipse at 50% 120%, rgba(0,0,0,.5), transparent 60%); }
.svc__inner { position: relative; z-index: 2; min-height: 100vh; padding: 96px 0;
  display: grid; grid-template-columns: 290px 1fr; align-items: center; gap: 48px; }
.svc__menu { display: flex; flex-direction: column; border-left: 2px solid rgba(255,255,255,.14); }
.svc__item {
  text-align: left; background: none; border: 0; border-left: 2px solid transparent; margin-left: -2px;
  color: rgba(255,255,255,.42); font-family: var(--sans); font-weight: 800; font-size: 1.04rem;
  letter-spacing: .3px; text-transform: uppercase; padding: 14px 0 14px 20px; cursor: pointer;
  transition: color .3s, border-color .3s, padding .3s; display: flex; align-items: baseline; gap: 10px;
}
.svc__item em { font-style: normal; color: var(--green); font-size: .76rem; font-weight: 800; }
.svc__item:hover { color: rgba(255,255,255,.75); }
.svc__item.is-active { color: #fff; border-left-color: var(--green); padding-left: 26px; }
.svc__stages { position: relative; display: grid; }
.svc__panel { grid-area: 1 / 1; opacity: 0; transform: translateY(22px); pointer-events: none;
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.svc__panel.is-active { opacity: 1; transform: none; pointer-events: auto; }
.svc__num { color: var(--green); font-weight: 800; letter-spacing: 3px; font-size: .82rem; }
.svc__name { font-family: var(--display); font-size: clamp(4.5rem, 13vw, 12rem); line-height: .86;
  color: #fff; margin: 10px 0 18px; letter-spacing: 1px; text-shadow: 0 8px 40px rgba(0,0,0,.5); }
.svc__desc { max-width: 540px; color: #e3eadf; font-size: 1.18rem; font-weight: 500; }
.svc__stats { display: flex; flex-wrap: wrap; gap: 16px 40px; margin-top: 34px; }
.svc__stats b { font-family: var(--display); font-size: 1.9rem; color: var(--green); display: block; letter-spacing: .5px; }
.svc__stats i { font-style: normal; font-size: .76rem; text-transform: uppercase; letter-spacing: 1.2px; color: #9fb0a2; font-weight: 700; }
.svc__scrollcue { display: none; } /* showcase auto-rotates / is clickable now — no scroll cue */

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.step {
  border: 1px solid var(--line-light); border-radius: var(--radius-lg); padding: 36px 30px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
  transition: transform .35s, border-color .35s, background .35s;
}
.step:hover { transform: translateY(-6px); border-color: rgba(160,221,113,.45);
  background: linear-gradient(180deg, rgba(160,221,113,.06), rgba(255,255,255,0)); }
.step__num { font-family: var(--display); font-size: 3.2rem; color: var(--green); line-height: 1; }
.step h3 { font-size: 1.45rem; font-weight: 800; margin: 16px 0 10px; color: #fff; }
.step p { color: #aeb8af; }

/* ---------- Stats ---------- */
.stats { background-color: var(--green); background-image: var(--residue), var(--grain); background-size: 600px auto, auto; background-blend-mode: multiply, normal; color: #0c1a05; padding: 64px 0; position: relative; }
.stats__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; text-align: center; }
.stat b { display: block; font-size: clamp(2.6rem,5vw,4rem); color: #0c1a05; letter-spacing: 0; }
.stat i { font-style: normal; font-weight: 700; font-size: .98rem; color: #1f3312; opacity: .8; }

/* ---------- Case study ---------- */
.case { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.case__list { list-style: none; margin: 26px 0 30px; display: grid; gap: 12px; }
.case__list li { display: flex; align-items: center; gap: 12px; font-weight: 600; color: #2b332b; }
.case__list span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--radius);
  background: var(--green); color: #0c1a05; font-size: .85rem; font-weight: 900; flex: none; }
.case__card {
  background-color: var(--ink); background-image: var(--grain); color: #fff;
  border-radius: var(--radius-lg); padding: 34px 32px 32px;
  border: 2px solid #05080a; transform: rotate(-1.8deg);
  box-shadow: 7px 10px 0 rgba(0,0,0,.34), 0 0 26px rgba(255,120,40,.22);
}
.case__brandrow { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.case__badge { width: 54px; height: 54px; border-radius: var(--radius); display: grid; place-items: center;
  background: var(--green); color: #0c1a05; font-weight: 900; border: 2px solid var(--amber); }
.case__brandrow b { display: block; }
.case__brandrow i { font-style: normal; font-size: .82rem; color: var(--green); font-weight: 700; }
.case__metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-bottom: 24px; }
.case__metrics div { background: rgba(255,255,255,.05); border-radius: var(--radius); padding: 14px; text-align: center; border: 1px solid rgba(255,255,255,.08); }
.case__metrics b { display: block; font-size: 1.5rem; color: var(--green); letter-spacing: 0; }
.case__metrics i { font-style: normal; font-size: .72rem; color: #9aa79c; font-weight: 600; }
.case__bars { display: flex; align-items: flex-end; gap: 10px; height: 90px; }
.case__bars span { flex: 1; height: var(--h); background: linear-gradient(180deg, var(--green), var(--green-deep));
  border-radius: 6px 6px 0 0; transform: scaleY(0); transform-origin: bottom; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.in .case__bars span { transform: scaleY(1); }
.in .case__bars span:nth-child(2){ transition-delay:.08s } .in .case__bars span:nth-child(3){ transition-delay:.16s }
.in .case__bars span:nth-child(4){ transition-delay:.24s } .in .case__bars span:nth-child(5){ transition-delay:.32s }
.in .case__bars span:nth-child(6){ transition-delay:.4s }

/* ---------- Pricing ---------- */
.plans { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; align-items: stretch; }
.plan {
  background: #14181460; border: 1px solid var(--line-light); border-radius: var(--radius-lg);
  padding: 36px 30px; display: flex; flex-direction: column;
  transition: transform .35s, border-color .35s, background .35s;
}
.plan:hover { transform: translateY(-8px); border-color: rgba(160,221,113,.4); }
.plan__name { font-size: 1.05rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--green); }
.plan__price { font-size: 3.4rem; margin: 14px 0 4px; color: #fff; display: flex; align-items: flex-start; gap: 2px; }
.plan__price span { font-size: 1.6rem; margin-top: .5rem; }
.plan__price i { font-style: normal; font-size: 1rem; color: #9aa79c; align-self: flex-end; margin-bottom: .8rem; font-family: var(--sans); font-weight: 600; }
.plan__desc { color: #aeb8af; font-size: .95rem; min-height: 44px; }
.plan ul { list-style: none; margin: 20px 0 28px; display: grid; gap: 12px; flex: 1; }
.plan ul li { position: relative; padding-left: 28px; color: #d6ddd6; font-size: .95rem; }
.plan ul li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--green);
  font-weight: 900; }
.plan--featured {
  background: linear-gradient(180deg, rgba(160,221,113,.14), rgba(20,24,20,.5));
  border-color: rgba(160,221,113,.55); position: relative; box-shadow: var(--shadow-green);
}
.plan--featured .plan__name { color: var(--green-bright); }
.plan__tag { position: absolute; top: -15px; left: 50%; transform: translateX(-50%);
  background: var(--amber); color: #1a1206; font-weight: 900; font-size: .74rem; letter-spacing: 1.5px;
  text-transform: uppercase; padding: 7px 18px; border-radius: var(--radius); white-space: nowrap;
  box-shadow: 3px 3px 0 rgba(0,0,0,.45); }
.plans__note { text-align: center; color: #9aa79c; margin-top: 28px; font-size: .96rem; }
.plans__note strong { color: var(--green); }

/* ============================================================
   FINAL CTA
   ============================================================ */
.cta { position: relative; background-color: var(--ink);
  background-image: var(--honey-tex), var(--grain), radial-gradient(ellipse 80% 90% at 50% 50%, transparent 50%, rgba(0,0,0,.45));
  background-size: 200px 174px, 220px 220px, auto;
  color: #fff; padding: 130px 0; overflow: hidden; text-align: center; }
.aurora--cta .blob { filter: blur(90px); opacity: .5; }
.cta__inner { position: relative; z-index: 2; max-width: 760px; }
.cta__title { font-size: clamp(2.6rem, 5.5vw, 4.6rem); color: #fff; }
.cta__sub { font-size: 1.2rem; color: #c7d0c8; margin: 22px auto 36px; max-width: 540px; }
.cta__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.skyline { position: relative; z-index: 2; width: 100%; margin-top: 84px; line-height: 0; }
.skyline img { width: 100%; height: auto; display: block; filter: drop-shadow(0 -2px 0 rgba(160,221,113,.12)); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background-color: #080c08;
  /* footer top IS the body cream (#efe9d9) — the torn paper's cream is recolored to match, so the seam vanishes */
  background-image: var(--grain), linear-gradient(to bottom, #efe9d9 0, #efe9d9 74px, rgba(8,12,8,0) 158px);
  color: #c7d0c8; padding: 164px 0 36px; position: relative; overflow: hidden; }
/* torn-paper rip: only the CHARRED edge + embers come from the photo; its own cream is masked away so the
   body's continuous cream is the paper — no tan band, no seam */
.footer__tear { position: absolute; top: -1px; left: 0; width: 100%; height: 158px; object-fit: cover; object-position: center 4%;
  z-index: 4; pointer-events: none; filter: drop-shadow(0 3px 6px rgba(0,0,0,.28)); }
/* the footer holds the MOST embers — dense + bright on the dark ground */
.footer__embers { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 2; }
.footer__embers span { animation-name: emberRise; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.footer__inner, .footer__base { position: relative; z-index: 3; }
.footer__inner { display: grid; grid-template-columns: 1.1fr 2fr; gap: 48px; align-items: start; }
.footer__logo { height: 84px; margin-bottom: 18px; }
.footer__brand { display: flex; flex-direction: column; gap: 14px; }
.footer__promise { color: #d7ded6; font-size: 1.16rem; line-height: 1.45; font-weight: 600; max-width: 320px; text-align: center; }
.footer__promise strong { color: var(--green); }
/* giant faint brand watermark fills the lower negative space */
.footer::after { content: "BUZZFAM!"; position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%);
  font-family: var(--display); font-weight: 400; font-size: clamp(96px, 19vw, 270px); letter-spacing: 3px;
  color: #fff; opacity: .05; line-height: .78; white-space: nowrap; z-index: 1; pointer-events: none; }
/* family "badge": handwritten tagline ARCHED over the top of the sticker, as one emblem */
.footer__fambadge { position: relative; display: inline-block; width: 290px; max-width: 100%;
  margin-top: 2px; transform: rotate(-3deg); transform-origin: left center; }
.footer__famarc { display: block; width: 100%; height: auto; margin-bottom: -14px; overflow: visible; }
.footer__famarc text { font-family: var(--hand); font-weight: 700; font-size: 30px; fill: var(--green);
  paint-order: stroke; stroke: rgba(8,12,8,.9); stroke-width: 4.5px; stroke-linejoin: round; }
.footer__famimg { display: block; width: 100%; height: auto; margin: 0;
  filter: drop-shadow(2px 5px 6px rgba(0,0,0,.45)) drop-shadow(0 0 10px rgba(255,120,40,.28)); }

/* 404 page */
.error404 { text-align: center; min-height: 72vh; display: flex; align-items: center; }
.error404 .container { max-width: 760px; }
.error404 .kicker { margin-left: auto; margin-right: auto; }
.error404 .section__lead { margin: 18px auto 0; }
.error404__sticker { display: block; width: clamp(180px, 40vw, 260px); height: auto; margin: 30px auto 4px;
  transform: rotate(-3deg);
  filter: drop-shadow(2px 6px 8px rgba(0,0,0,.3)) drop-shadow(0 0 12px rgba(255,120,40,.3)); }
.error404__actions { display: flex; gap: 18px; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 30px; }

/* ===== "Alive" micro-interactions ===== */
/* scroll-progress ember bar */
.scrollbar { position: fixed; top: 0; left: 0; height: 4px; width: 0; z-index: 120; pointer-events: none;
  background: linear-gradient(90deg, var(--green) 0%, var(--amber) 58%, var(--orange) 100%);
  box-shadow: 0 0 9px rgba(255,150,55,.75); }
/* wood-fire spark cursor trail — tiny sharp white-hot points that flicker, arc up, and die fast */
.cursor-ember { position: fixed; width: var(--sz, 2.5px); height: var(--sz, 2.5px); border-radius: 50%;
  pointer-events: none; z-index: 115; background: #fff;
  box-shadow: 0 0 2px .5px #ffe7ad, 0 0 5px 1px rgba(255,120,30,.7);
  transform: translate(-50%,-50%); will-change: transform, opacity;
  animation: spark var(--dur, .6s) linear forwards; }
@keyframes spark {
  0%   { opacity: 1; transform: translate(-50%,-50%) scale(1.15); }
  15%  { opacity: 1; }
  30%  { opacity: .55; }
  45%  { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx,0px)), calc(-50% + var(--dy,-40px) + 16px)) scale(.25); }
}
/* idle "life" — gentle bob/sway on the character stickers (transform owned by the anim;
   hover brightens via filter so it doesn't fight the animation) */
@keyframes leafSway {
  0%   { transform: translate(0, 0) rotate(calc(var(--lr, 0deg) - 2deg)); }
  25%  { transform: translate(7px, -5px) rotate(calc(var(--lr, 0deg) + 2.5deg)); }
  50%  { transform: translate(-2px, -9px) rotate(calc(var(--lr, 0deg) - 1deg)); }
  75%  { transform: translate(-7px, -4px) rotate(calc(var(--lr, 0deg) + 1.5deg)); }
  100% { transform: translate(0, 0) rotate(calc(var(--lr, 0deg) - 2deg)); }
}
.intro__sticker     { --lr: -4deg; animation: leafSway 8s ease-in-out infinite; }
.blog-hero__sticker { --lr: 6deg;  animation: leafSway 8.6s ease-in-out infinite; }
.faq__sticker       { --lr: 6deg;  animation: leafSway 7.4s ease-in-out infinite .4s; }
.article__sticker   { --lr: -3deg; animation: leafSway 8.2s ease-in-out infinite .2s; }
.footer__famimg     { --lr: 0deg;  animation: leafSway 9s ease-in-out infinite; }
/* scattered burst stickers pick up the same leaf sway once they've settled into view */
.sticker.is-leafing { --lr: var(--r, -6deg); animation: leafSway var(--t, 8s) ease-in-out infinite; }
.intro__sticker, .blog-hero__sticker, .faq__sticker, .article__sticker, .footer__fambadge { transition: filter .3s; }
.intro__sticker:hover, .blog-hero__sticker:hover, .faq__sticker:hover, .article__sticker:hover {
  filter: drop-shadow(2px 6px 8px rgba(0,0,0,.34)) drop-shadow(0 0 18px rgba(255,150,55,.5)) brightness(1.06); }
.footer__fambadge { transition: transform .32s cubic-bezier(.2,.85,.25,1.25); }
.footer__fambadge:hover { transform: rotate(-3deg) scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  .intro__sticker, .blog-hero__sticker, .faq__sticker, .article__sticker, .footer__famimg { animation: none !important; }
}
@media (prefers-reduced-motion: reduce) { .scrollbar, .cursor-ember { display: none !important; } }
.footer__cols { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; align-self: center; }
.footer__cols h4 { color: var(--green); font-size: .95rem; font-weight: 900; letter-spacing: 1.5px;
  text-transform: uppercase; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 2px solid rgba(160,221,113,.22); }
.footer__cols a { display: block; color: #c7d0c8; font-size: 1.05rem; font-weight: 600; margin-bottom: 13px;
  transition: color .2s, transform .2s; }
.footer__cols a:hover { color: var(--green); transform: translateX(3px); }
.footer__base { display: flex; justify-content: space-between; border-top: 1px solid rgba(255,255,255,.08);
  margin-top: 48px; padding-top: 24px; color: #6b756c; font-size: .85rem; }

/* ============================================================
   REVEAL ANIMATIONS
   ============================================================ */
.reveal { opacity: 0; transform: translateY(32px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .75s cubic-bezier(.2,.9,.25,1.15); }
.reveal.in { opacity: 1; transform: none; }
.cards .reveal.in:nth-child(2){ transition-delay:.08s } .cards .reveal.in:nth-child(3){ transition-delay:.16s } .cards .reveal.in:nth-child(4){ transition-delay:.24s }
.steps .reveal.in:nth-child(2){ transition-delay:.1s } .steps .reveal.in:nth-child(3){ transition-delay:.2s }
.plans .reveal.in:nth-child(2){ transition-delay:.1s } .plans .reveal.in:nth-child(3){ transition-delay:.2s }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .blob, .mock, .floatcard, .marquee__track, .btn--primary, .btn--ghost { animation: none !important; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 960px) {
  .hero__grid { grid-template-columns: 1fr; gap: 64px; }
  .hero__panel { max-width: 460px; }
  .cards, .case, .footer__inner { grid-template-columns: 1fr; }
  .steps, .plans { grid-template-columns: 1fr; }
  .stats__grid { grid-template-columns: repeat(2,1fr); gap: 32px 20px; }
  .nav__links { display: none; }
  .plan--featured { order: -1; }
  .band { background-attachment: scroll; min-height: 420px; }
  .svc__inner { grid-template-columns: 1fr; gap: 22px; align-content: center; padding: 88px 0; }
  .svc__menu { flex-direction: row; flex-wrap: wrap; border-left: 0; gap: 6px 4px; }
  .svc__item { border-left: 0; border-bottom: 2px solid transparent; padding: 8px 12px; font-size: .82rem;
    background: rgba(255,255,255,.05); margin: 0; }
  .svc__item.is-active { padding-left: 12px; border-left: 0; border-bottom-color: var(--green); background: rgba(160,221,113,.14); }
  .svc__name { font-size: clamp(3.4rem, 22vw, 6rem); }
  .svc__desc { font-size: 1.04rem; }
}
@media (max-width: 620px) {
  .section { padding: 84px 0; }
  /* hero video is full-bleed on mobile too — the headline lives in its own .herohead section,
     so the old top/bottom padding here just created an empty cream gap under the transparent nav */
  .nav__cta .btn--ghost { display: none; }
  .footer__cols { grid-template-columns: 1fr 1fr; }
  .footer__base { flex-direction: column; gap: 8px; }
  .floatcard--a { left: -10px; } .floatcard--b { right: -6px; }
}

/* ============================================================
   SCRAPBOOK PASS — warm paper "lightened" sections
   Lifts How-It-Works, Pricing & the final CTA out of the dark
   and into the fun hero look: cream paper, tape, tilts, stickers.
   ============================================================ */
.section--scrap {
  background-color: #efe9d9;
  background-image: var(--residue), var(--grain);
  background-size: 600px auto, auto;
  background-blend-mode: multiply, normal;
  color: var(--ink);
}
.section--scrap .kicker { color: var(--green-deep); }
.section--scrap .section__lead { color: var(--muted); }

/* reusable strip of masking tape across a card's top edge */
.taped { position: relative; }
.taped::before {
  content: ""; position: absolute; top: -14px; left: 50%; z-index: 4;
  width: 112px; height: 30px; transform: translateX(-50%) rotate(-3.5deg);
  background:
    linear-gradient(180deg, rgba(255,255,255,.28), rgba(0,0,0,.06)),
    linear-gradient(90deg, rgba(255,212,92,.92), rgba(255,196,64,.86));
  border-left: 1px dashed rgba(120,80,0,.25); border-right: 1px dashed rgba(120,80,0,.25);
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
.taped:nth-child(even)::before { transform: translateX(-50%) rotate(3deg); left: 54%; }

/* --- How It Works steps as paper cards --- */
.section--scrap .steps { gap: 30px 26px; }
.section--scrap .step {
  background: #fff; border: 2px solid var(--ink); color: var(--ink);
  border-radius: var(--radius-lg); box-shadow: 6px 7px 0 rgba(0,0,0,.16);
  transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s;
}
.section--scrap .step:nth-child(1) { transform: rotate(-1.6deg); }
.section--scrap .step:nth-child(2) { transform: rotate(1deg); }
.section--scrap .step:nth-child(3) { transform: rotate(-.8deg); }
.section--scrap .step:hover { transform: rotate(0) translateY(-6px); box-shadow: 9px 12px 0 rgba(0,0,0,.18); border-color: var(--ink); background: #fff; }
.section--scrap .step__num { color: var(--green-deep); -webkit-text-stroke: 0; }
.section--scrap .step h3 { color: var(--ink); }
.section--scrap .step p { color: var(--muted); }

/* --- Pricing plans as paper cards --- */
.section--scrap .plan {
  background: #fff; border: 2px solid var(--ink); color: var(--ink);
  box-shadow: 6px 7px 0 rgba(0,0,0,.16);
}
.section--scrap .plan:nth-child(1) { transform: rotate(-1.3deg); }
.section--scrap .plan:nth-child(3) { transform: rotate(1.3deg); }
.section--scrap .plan:hover { transform: rotate(0) translateY(-8px); border-color: var(--ink); box-shadow: 9px 12px 0 rgba(0,0,0,.2); }
.section--scrap .plan__name { color: var(--green-deep); }
.section--scrap .plan__price { color: var(--ink); }
.section--scrap .plan__price i { color: var(--muted); }
.section--scrap .plan__desc { color: var(--muted); }
.section--scrap .plan ul li { color: #2b332b; }
.section--scrap .plan ul li::before { color: var(--green-deep); }
.section--scrap .plan--featured {
  background: linear-gradient(180deg, rgba(160,221,113,.30), #fff 70%);
  border-color: var(--green-deep); border-width: 3px;
  box-shadow: 7px 9px 0 rgba(111,178,64,.4); transform: rotate(0);
}
.section--scrap .plan--featured:hover { transform: translateY(-8px); }
.section--scrap .plan--featured .plan__name { color: var(--green-deep); }
.section--scrap .plans__note { color: var(--muted); }
.section--scrap .plans__note strong { color: var(--green-deep); }

/* --- Final CTA lifted onto warm paper --- */
.cta--scrap { background-color: #efe9d9; background-image: var(--residue), var(--grain); background-size: 600px auto, auto; background-blend-mode: multiply, normal; color: var(--ink); }
.cta--scrap .aurora--cta { display: none; }  /* no green tint — keep the body pure cream so it matches the footer at the rip */
.cta--scrap .cta__title { color: var(--ink);
  -webkit-text-stroke: 9px #fff; paint-order: stroke fill;
  filter: drop-shadow(0 0 1.6px rgba(0,0,0,.55)) drop-shadow(3px 5px 0 rgba(0,0,0,.2));
  transform: rotate(-1.2deg); }
.cta--scrap .cta__sub { color: var(--muted); }

@media (max-width: 620px) {
  /* straighten tilts on narrow screens so nothing clips */
  .section--scrap .step, .section--scrap .plan,
  .section__title, .cta--scrap .cta__title { transform: none; }
  .section__title { -webkit-text-stroke-width: 6px; }
}

/* ============================================================
   EXPLOSIVE THEME — floating embers + charred residue site-wide
   ============================================================ */
/* embers drifting up through the whole page (fixed overlay, in front of content, behind nav) */
.embers { position: fixed; inset: 0; z-index: 60; pointer-events: none; overflow: hidden; }
.embers span, .footer__embers span {
  position: absolute; bottom: -24px; border-radius: 50%;
  background: radial-gradient(circle at 45% 40%, #ffe7ad 0%, #ff9e3c 42%, rgba(255,110,30,.42) 66%, transparent 78%);
  filter: blur(.3px) drop-shadow(0 0 4px rgba(255,150,55,.7)) drop-shadow(0 0 9px rgba(255,90,25,.4));
  opacity: 0; will-change: transform, opacity;
  animation-name: emberRise; animation-timing-function: ease-in-out; animation-iteration-count: infinite;
}
/* drift up slowly, sway side to side, and twinkle — like live embers, kept subtle */
@keyframes emberRise {
  0%   { transform: translate(0, 0) scale(.85); opacity: 0; }
  12%  { opacity: .8; }
  30%  { transform: translate(calc(var(--drift, 24px) * .55), -28vh) scale(1); opacity: .4; }
  48%  { opacity: .78; }
  68%  { transform: translate(calc(var(--drift, 24px) * -.35), -68vh) scale(.7); opacity: .38; }
  86%  { opacity: .6; }
  100% { transform: translate(var(--drift, 24px), -103vh) scale(.4); opacity: 0; }
}

/* sooty/charred residue settling at the top seam of each section */
.section::before, .cta::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 70px; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(18,9,4,.20), rgba(18,9,4,.06) 45%, transparent);
  -webkit-mask-image: var(--distress); mask-image: var(--distress);
  -webkit-mask-size: 380px; mask-size: 380px;
}

@media (prefers-reduced-motion: reduce) {
  .embers { display: none; }
}

/* scattered burnt character stickers (decorative, slapped around the sections) */
.sticker {
  position: absolute; z-index: 6; pointer-events: none; width: calc(var(--w, 130px) * 1.4); height: auto;
  filter: drop-shadow(2px 5px 6px rgba(0,0,0,.32)) drop-shadow(0 0 9px rgba(255,120,40,.32));
  opacity: 0; transform-origin: center; will-change: transform, opacity;  /* JS bursts these out on scroll */
}
@media (prefers-reduced-motion: reduce) { .sticker { opacity: 1; transform: rotate(var(--r,-6deg)); } }
@media (max-width: 960px) {
  /* tablet + down: the layout stacks to one full-width column, so shrink the
     stickers and tuck them to peek from the page edges instead of covering text */
  .sticker { width: calc(var(--w, 130px) * .5); max-width: 92px; }
  /* a couple of stickers have positive `top` (inline) that lands in the
     content on a stacked layout — pull them up to peek from the top gap */
  #contact .sticker[src*="st-knight"] { top: 6px !important; left: -16px !important; }
  #how .sticker[src*="st-banana"] { top: -32px !important; }
}
@media (max-width: 480px) { .sticker { display: none; } }

/* FAQ: keep the heading/lead copy clear of the lightbulb sticker on the right */
/* FAQ + blog hero: headline left, related sticker pinned right beside it (in-flow grid,
   so the sticker stays next to the headline at every width instead of drifting to the edge) */
.faq__head, .blog-hero__head { display: grid; align-items: center; gap: 40px; }
.faq__head { grid-template-columns: minmax(0,1fr) clamp(200px, 26%, 300px); margin-bottom: 56px; }
.blog-hero__head { grid-template-columns: minmax(0,1fr) clamp(210px, 30%, 320px); margin-bottom: 40px; }
#faq .section__head, .blog-hero .section__head { max-width: none; margin-bottom: 0; }
.faq__sticker, .blog-hero__sticker { width: 100%; height: auto; justify-self: end; margin: 0;
  filter: drop-shadow(2px 6px 8px rgba(0,0,0,.3)) drop-shadow(0 0 12px rgba(255,120,40,.28)); }
.faq__sticker { max-width: 300px; transform: rotate(6deg); }
.blog-hero__sticker { max-width: 320px; transform: rotate(6deg); }
@media (max-width: 760px) {
  .faq__head, .blog-hero__head { grid-template-columns: 1fr; gap: 16px; }
  .faq__sticker, .blog-hero__sticker { order: -1; justify-self: start; max-width: 210px; }
}

/* ============================================================
   SERVICES SCROLLER — rebranded: brand-green bg, BLACK letters,
   explosive burn theme (drop the dark duotone photos)
   ============================================================ */
.svc, .svc__sticky { background-color: var(--green); }
.svc__sticky { color: var(--ink); background-image: var(--residue), var(--grain); background-size: 600px auto, auto; background-blend-mode: multiply, normal; }
.svc__bg { display: none; }   /* remove the off-brand dark photos */
/* charred burn vignette + scorched top/bottom edges on the green */
.svc__scrim {
  background:
    radial-gradient(ellipse 95% 85% at 50% 122%, rgba(8,16,5,.6), transparent 60%),
    linear-gradient(180deg, rgba(10,20,6,.34), transparent 16%, transparent 80%, rgba(10,20,6,.5));
}
.svc__menu { border-left-color: rgba(0,0,0,.30); }
.svc__item { color: rgba(10,20,6,.5); }
.svc__item em { color: #1d3c0f; }
.svc__item:hover { color: rgba(10,20,6,.82); }
.svc__item.is-active { color: var(--ink); border-left-color: var(--ink); }
.svc__num { color: #1d3c0f; }
.svc__name { color: var(--ink); text-shadow: 0 3px 0 rgba(0,0,0,.14), 0 12px 30px rgba(0,0,0,.22); }
.svc__desc { color: #16280c; }
.svc__stats b { color: var(--ink); }
.svc__stats i { color: #2c4a1e; }
.svc__scrollcue { color: rgba(10,20,6,.55); }
.svc__scrollcue::after { background: linear-gradient(rgba(10,20,6,.5), transparent); }
@media (max-width: 960px) {
  .svc__item { background: rgba(0,0,0,.07); }
  .svc__item.is-active { background: rgba(0,0,0,.14); border-bottom-color: var(--ink); }
}
/* per-service swapping sticker — way bigger, pops in for the active menu item */
.svc__pics { position: absolute; right: 2%; bottom: 4%; width: clamp(230px, 32vw, 440px); aspect-ratio: 1; z-index: 5; pointer-events: none; }
.svc__pic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  opacity: 0; transform: scale(.8) rotate(-5deg); transform-origin: bottom center;
  transition: opacity .45s ease, transform .55s cubic-bezier(.2,.9,.3,1.3);
  filter: drop-shadow(3px 7px 9px rgba(0,0,0,.45)) drop-shadow(0 0 13px rgba(255,120,40,.32)); }
.svc__pic.is-active { opacity: 1; transform: scale(1) rotate(0); }
/* ---- On-brand menu animations: the giant name STAMPS in + active item gets a live ember ---- */
.svc__panel.is-active .svc__name { animation: svcStamp .55s cubic-bezier(.2,.9,.3,1.25) both; }
@keyframes svcStamp {
  0%   { opacity: 0; transform: translateY(16px) scale(.8) rotate(-3deg); }
  55%  { opacity: 1; transform: translateY(0) scale(1.05) rotate(1.5deg); }
  100% { transform: translateY(0) scale(1) rotate(0); }
}
.svc__panel.is-active .svc__num { animation: svcRise .5s ease both .06s; }
.svc__panel.is-active .svc__desc { animation: svcRise .5s ease both .14s; }
.svc__panel.is-active .svc__stats { animation: svcRise .5s ease both .22s; }
@keyframes svcRise { 0% { opacity: 0; transform: translateY(14px); } 100% { opacity: 1; transform: none; } }
/* glowing ember marker on the active service in the menu */
.svc__item.is-active::before {
  content: ""; position: absolute; left: -7px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff2c4, #ff9a32 50%, rgba(255,90,20,.4) 76%, transparent);
  box-shadow: 0 0 9px rgba(255,140,40,.95), 0 0 18px rgba(255,90,20,.55);
  animation: emberDot 1.2s ease-in-out infinite;
}
@keyframes emberDot { 0%,100% { opacity: .65; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.25); } }
@media (prefers-reduced-motion: reduce) {
  .svc__panel.is-active .svc__name, .svc__panel.is-active .svc__num,
  .svc__panel.is-active .svc__desc, .svc__panel.is-active .svc__stats, .svc__item.is-active::before { animation: none; }
}

/* ============================================================
   PORTFOLIO — wheatpaste poster wall of customer highlights
   ============================================================ */
.portfolio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px 28px; }
.poster {
  position: relative; display: block; background: #fff; color: var(--ink);
  border: 2px solid var(--ink); box-shadow: 6px 8px 0 rgba(0,0,0,.16);
  padding: 14px 14px 18px; transform: rotate(var(--tilt, -1.5deg));
  transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s;
}
.poster:hover { transform: rotate(0) translateY(-6px); box-shadow: 9px 13px 0 rgba(0,0,0,.2); border-color: var(--ink); }
.poster__shot {
  display: grid; place-items: center; aspect-ratio: 4 / 3; margin-bottom: 14px;
  border: 1px solid var(--ink); background-color: var(--c, var(--green)); background-image: var(--grain);
  font-family: var(--display); font-size: clamp(2.6rem, 4vw, 3.4rem); color: rgba(0,0,0,.5);
  -webkit-text-stroke: 3px rgba(255,255,255,.55); paint-order: stroke fill;
}
.poster__shot--add {
  background: repeating-linear-gradient(45deg, #efe9d9, #efe9d9 11px, #e3dcc8 11px, #e3dcc8 22px);
  border-style: dashed; color: var(--green-deep); -webkit-text-stroke: 0;
}
.poster__name { display: block; font-family: var(--display); font-size: 1.55rem; line-height: 1; margin-bottom: 5px; }
.poster__tag { display: block; font-style: normal; color: var(--muted); font-size: .9rem; margin-bottom: 12px; }
.poster__link { font-family: var(--hand); font-weight: 700; color: #cf6a22; font-size: 1.2rem; }
.poster:hover .poster__link { color: #e67e1f; }
.poster--add { border-style: dashed; }
@media (max-width: 760px) { .portfolio { grid-template-columns: 1fr 1fr; gap: 28px 22px; } }

/* ============================================================
   TACTILE MICRO-INTERACTIONS — press, wiggle, tilt, celebrate
   (so the page feels alive to poke at)
   ============================================================ */
/* Buttons PRESS flat when clicked (die-cut sticker pushed into the page) */
.btn--primary:active, .btn--ghost:active {
  transform: rotate(-2deg) scale(.93) translateY(2px);
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.5));
  transition: transform .07s ease, filter .07s ease;
}
.hero__actions .btn:active { transform: rotate(-1.8deg) scale(.94) translateY(2px); }
.btn--dark:active { transform: translate(3px,3px); box-shadow: 1px 1px 0 rgba(0,0,0,.35);
  transition: transform .08s ease, box-shadow .08s ease; }

/* Decorative stickers WIGGLE when pointed at */
.sticker, .case__sticker { cursor: grab; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .sticker:hover, .case__sticker:hover { animation: stickerWiggle .55s ease-in-out; }
}
@keyframes stickerWiggle {
  0%,100% { transform: rotate(var(--r,0deg)) scale(1); }
  18% { transform: rotate(calc(var(--r,0deg) - 8deg)) scale(1.07); }
  42% { transform: rotate(calc(var(--r,0deg) + 7deg)) scale(1.07); }
  66% { transform: rotate(calc(var(--r,0deg) - 4deg)) scale(1.04); }
  85% { transform: rotate(calc(var(--r,0deg) + 2deg)) scale(1.02); }
}

/* Celebration FX overlay (logo rocket launch + CTA sticker pops; JS drives it) */
.fxlayer { position: fixed; inset: 0; width: 100vw; height: 100svh; z-index: 9999;
  pointer-events: none; overflow: hidden; }
.fx-stk    { position: absolute; left: 0; top: 0; width: 64px; height: auto;
  will-change: transform, opacity; filter: drop-shadow(2px 4px 4px rgba(0,0,0,.3)); }
.fx-rocket { position: absolute; left: 0; top: 0; width: clamp(70px, 8vw, 120px); height: auto;
  will-change: transform, opacity; filter: drop-shadow(2px 6px 6px rgba(0,0,0,.35)); }
.fx-spark  { position: absolute; left: 0; top: 0; will-change: transform, opacity;
  background: radial-gradient(circle at 40% 35%, #fff2c4, #ff9a32 55%, rgba(255,90,20,.2) 80%, transparent); }
@media (prefers-reduced-motion: reduce) { .fxlayer { display: none !important; } }
@media (max-width: 480px) { .portfolio { grid-template-columns: 1fr; } }

/* case-study visual = growth STICKER (matches the sticker art) + bare stat row */
.case__sticker { display: block; width: 100%; max-width: 460px; margin: 0 auto;
  transform: rotate(-2deg);
  filter: drop-shadow(3px 6px 7px rgba(0,0,0,.3)) drop-shadow(0 0 13px rgba(255,120,40,.32)); }
.case__stats { display: flex; justify-content: center; gap: 18px 42px; flex-wrap: wrap; margin-top: 18px; }
.case__stats div { text-align: center; }
.case__stats b { font-family: var(--display); font-size: 2.1rem; color: var(--green-deep); display: block; line-height: 1; letter-spacing: .5px; }
.case__stats i { font-style: normal; font-size: .8rem; text-transform: uppercase; letter-spacing: 1.2px; color: var(--muted); font-weight: 700; }

/* contact form in the final CTA */
.cta__form { max-width: 560px; margin: 30px auto 0; display: grid; gap: 14px; text-align: left; position: relative; z-index: 2; }
.cta__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cta__form input, .cta__form textarea {
  font-family: var(--sans); font-weight: 600; font-size: 1rem; color: var(--ink);
  background: #fffdf7; border: 2px solid var(--ink); border-radius: var(--radius);
  padding: 14px 16px; width: 100%; box-shadow: 3px 3px 0 rgba(0,0,0,.16);
  transition: border-color .2s, box-shadow .2s;
}
.cta__form textarea { resize: vertical; min-height: 92px; }
.cta__form input::placeholder, .cta__form textarea::placeholder { color: #8a9285; }
.cta__form input:focus, .cta__form textarea:focus { outline: none; border-color: var(--green-deep); box-shadow: 4px 4px 0 rgba(111,178,64,.4); }
.cta__form button { justify-self: center; margin-top: 8px; cursor: pointer; }
@media (max-width: 560px) { .cta__row { grid-template-columns: 1fr; } }

/* ---- FAQ (paper accordion) ---- */
.faq { max-width: 820px; margin: 0 auto; display: grid; gap: 16px; }
.faq__item { background: #fff; border: 2px solid var(--ink); border-radius: var(--radius-lg);
  box-shadow: 5px 6px 0 rgba(0,0,0,.14); }
.faq__item summary { cursor: pointer; list-style: none; padding: 20px 58px 20px 24px; position: relative;
  font-family: var(--sans); font-weight: 800; font-size: 1.12rem; color: var(--ink); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%);
  font-family: var(--display); font-size: 1.7rem; color: var(--green-deep); line-height: 0; }
.faq__item[open] summary::after { content: "\2013"; }
.faq__item p { padding: 0 24px 22px; margin: 0; color: var(--muted); font-size: 1.02rem; line-height: 1.6; }
.faq__item p em { color: var(--ink); font-style: italic; }

/* ============================================================
   BLOG index + article
   ============================================================ */
.blog-hero { padding-top: 150px; }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 26px; }
.post-card { display: flex; flex-direction: column; background: #fff; color: var(--ink);
  border: 2px solid var(--ink); border-radius: var(--radius-lg); box-shadow: 6px 8px 0 rgba(0,0,0,.14);
  padding: 22px; transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s; }
.post-card:hover { transform: translateY(-6px) rotate(-.6deg); box-shadow: 9px 12px 0 rgba(0,0,0,.2); }
.post-card__cat { align-self: flex-start; font-family: var(--sans); font-weight: 800; font-size: .7rem;
  letter-spacing: 1.5px; text-transform: uppercase; color: #14250b; background: var(--c, var(--green));
  border: 1.5px solid var(--ink); padding: 4px 10px; border-radius: var(--radius); margin-bottom: 14px; }
.post-card__title { font-family: var(--sans); font-weight: 900; font-size: 1.32rem; line-height: 1.15; margin-bottom: 10px; }
.post-card__excerpt { color: var(--muted); font-size: .98rem; line-height: 1.55; flex: 1; }
.post-card__meta { margin-top: 16px; font-family: var(--hand); font-weight: 700; color: #cf6a22; font-size: 1.1rem; }
@media (max-width: 900px) { .blog-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .blog-grid { grid-template-columns: 1fr; } }
/* blog search + category filters */
.blog-tools { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; justify-content: space-between; margin: 6px 0 30px; }
#blog-search { font-family: var(--sans); font-weight: 600; font-size: 1rem; color: var(--ink);
  background: #fff; border: 2px solid var(--ink); border-radius: var(--radius); padding: 12px 16px;
  flex: 1 1 240px; min-width: 220px; max-width: 360px; box-shadow: 3px 3px 0 rgba(0,0,0,.14); }
#blog-search:focus { outline: none; border-color: var(--green-deep); box-shadow: 3px 3px 0 rgba(111,178,64,.4); }
.blog-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.blog-pill { font-family: var(--sans); font-weight: 800; font-size: .76rem; letter-spacing: 1px; text-transform: uppercase;
  color: var(--ink); background: #fff; border: 2px solid var(--ink); border-radius: 999px; padding: 7px 14px; cursor: pointer;
  transition: background .2s, color .2s; }
.blog-pill:hover { background: #efe9d9; }
.blog-pill.is-active { background: var(--ink); color: #fff; }
.blog-empty { text-align: center; color: var(--muted); font-size: 1.05rem; padding: 30px 0; }

.article { padding-top: 150px; }
.article .container { max-width: 1080px; }
/* two-column header: title/meta on the left, the big topic sticker filling the right
   (kills the empty space the single narrow column used to leave) */
.article__head { display: grid; grid-template-columns: minmax(0, 1fr) clamp(260px, 36%, 420px);
  gap: 44px; align-items: center; margin: 8px 0 36px; }
.article__intro { min-width: 0; }
.article__body { max-width: 820px; }
.article__back { display: inline-block; font-family: var(--hand); font-weight: 700; color: #cf6a22; font-size: 1.15rem; margin-bottom: 16px; }
.article__cat { display: inline-block; font-family: var(--sans); font-weight: 800; font-size: .72rem; letter-spacing: 1.5px;
  text-transform: uppercase; color: #14250b; background: var(--c, var(--green)); border: 1.5px solid var(--ink);
  padding: 4px 10px; border-radius: var(--radius); }
.article__title { font-family: var(--display); font-weight: 400; font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1;
  letter-spacing: .5px; color: var(--ink); margin: 16px 0 10px;
  -webkit-text-stroke: 6px #fff; paint-order: stroke fill;
  filter: drop-shadow(0 0 1.4px rgba(0,0,0,.5)) drop-shadow(3px 4px 0 rgba(0,0,0,.16)); }
.article__meta { color: var(--muted); font-weight: 700; font-size: .95rem; margin-bottom: 30px; }
.article__body { font-size: 1.12rem; line-height: 1.7; color: #2b332b; }
.article__body p { margin: 0 0 18px; }
.article__body h2 { font-family: var(--sans); font-weight: 900; font-size: 1.5rem; color: var(--ink); margin: 32px 0 12px; }
.article__body ul { margin: 0 0 18px; padding-left: 0; list-style: none; display: grid; gap: 10px; }
.article__body li { position: relative; padding-left: 26px; }
.article__body li::before { content: "\2713"; position: absolute; left: 0; color: var(--green-deep); font-weight: 900; }
.article__body em { font-style: italic; color: var(--ink); }
.article__cta { margin-top: 34px; }
/* embedded YouTube videos in posts (responsive 16:9) */
.article__video { position: relative; width: 100%; max-width: 760px; aspect-ratio: 16 / 9; margin: 30px 0 8px;
  border: 2px solid var(--ink); border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: 5px 6px 0 rgba(0,0,0,.16); background: #000; }
.article__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.article__caption { font-size: .92rem; color: var(--muted); font-style: italic; margin: 0 0 26px; max-width: 760px; }
.article__sticker { display: block; width: 100%; max-width: 420px; height: auto; margin: 0; justify-self: end;
  transform: rotate(-3deg);
  filter: drop-shadow(3px 6px 7px rgba(0,0,0,.3)) drop-shadow(0 0 13px rgba(255,120,40,.3)); }
/* stack the header on narrow screens; sticker first, then title */
@media (max-width: 720px) {
  .article__head { grid-template-columns: 1fr; gap: 18px; }
  .article__sticker { order: -1; max-width: 260px; justify-self: start; margin-bottom: 4px; }
}

/* ============================================================
   CHARRED-DARK SECTIONS — brand "burned" rhythm (ink chalkboard).
   On-brand (green / black / cream only). Used to punctuate the page
   with dark charred bands where embers + char read; white cards pop.
   Stacks on --scrap so the card styling stays; defined AFTER --scrap
   so the dark background + light type win.
   ============================================================ */
.section--char {
  background-color: var(--ink);
  background-image: var(--grain), radial-gradient(ellipse 96% 92% at 50% 48%, transparent 48%, rgba(0,0,0,.55));
  color: #e9efe6;
}
.section--char .kicker { color: var(--green); opacity: 1; }
.section--char .section__lead { color: #c7d0c8; }
/* solid brand-green letters on the dark — no white outline */
.section--char .section__title { color: var(--green); -webkit-text-stroke: 0; }
/* faq accordion cards stay white with dark text */
.section--char .faq__item summary { color: var(--ink); }

/* ============================================================
   PRICING as physical tickets — perforation + punched notches,
   a red rubber stamp on Growth, a kraft string price tag on Authority.
   ============================================================ */
.section--scrap .plan { overflow: visible; position: relative; }
.plan__perf { position: relative; height: 0; margin: 10px -30px 22px; border-top: 2px dashed rgba(15,23,18,.32); }
/* Growth: flat amber tag -> angled red rubber stamp */
.plan--featured .plan__tag {
  top: 14px; left: auto; right: -8px; transform: rotate(-9deg);
  background: transparent; color: #bb3a1c; border: 2.5px solid #bb3a1c; border-radius: 4px;
  font-family: var(--sans); font-weight: 800; letter-spacing: 2px; font-size: .82rem;
  padding: 6px 12px; opacity: .85; box-shadow: none;
}
/* kraft hang tag tied to the Authority card */
.plan__hangtag {
  position: absolute; top: -16px; right: 24px; z-index: 7; line-height: 1;
  font-family: var(--hand); font-weight: 700; font-size: 1.18rem; color: #45320f;
  background: #d8c39c; padding: 9px 15px 11px; border-radius: 3px; transform: rotate(5deg);
  transform-origin: top left; box-shadow: 2px 3px 0 rgba(0,0,0,.22); border: 1px solid rgba(60,42,12,.25);
}
.plan__hangtag::before { content: ""; position: absolute; left: 17px; top: -15px; width: 2px; height: 16px;
  background: rgba(50,35,12,.6); transform: rotate(-14deg); transform-origin: bottom center; }
.plan__hangtag::after { content: ""; position: absolute; left: 13px; top: 7px; width: 8px; height: 8px;
  border-radius: 50%; border: 2px solid rgba(50,35,12,.5); background: #efe9d9; }
@media (max-width: 620px) { .plan__hangtag { right: 16px; } }

/* ============================================================
   MOBILE ZINE — the phone gets a bespoke flip-through layout, not a
   stacked desktop: edge-bleed headlines, tilts that survive, stickers
   slapped on every page, and a gentle page-flip snap.
   ============================================================ */
@media (max-width: 620px) {
  /* tighter gutters so headlines + stickers bleed to the edges */
  .container { padding: 0 14px; }

  /* oversized, tilted section headlines — sized + wrapped to fit narrow screens (no letter clipping) */
  .section__title {
    font-size: clamp(1.9rem, 9.6vw, 3.4rem); line-height: .9; letter-spacing: 0;
    -webkit-text-stroke-width: 5px; transform: rotate(-2deg);
    max-width: 100%; overflow-wrap: break-word; margin: 0 0 6px;
  }
  .section--char .section__title { -webkit-text-stroke: 0; }
  .cta--scrap .cta__title { font-size: clamp(1.9rem, 9.2vw, 3.1rem); max-width: 100%; overflow-wrap: break-word; transform: rotate(-1.6deg); }
  .section__head { margin-bottom: 40px; }
  .section__lead { font-size: 1.05rem; }

  /* tilts SURVIVE — a stronger zine slap on the paper cards */
  .section--scrap .step:nth-child(1) { transform: rotate(-2.4deg); }
  .section--scrap .step:nth-child(2) { transform: rotate(1.8deg); }
  .section--scrap .step:nth-child(3) { transform: rotate(-1.3deg); }
  .section--scrap .plan:nth-child(1) { transform: rotate(-1.8deg); }
  .section--scrap .plan:nth-child(3) { transform: rotate(1.8deg); }

  /* stickers come back on the phone. Size them with a floor so none read tiny,
     and a ceiling so they stay decorative. Every sticker peeks from a section's
     TOP gap (whitespace between sections) so it never covers copy. */
  .sticker { display: block; width: clamp(78px, calc(var(--w, 130px) * .64), 116px); max-width: none; }
  /* default: pull every sticker up to straddle the section's top edge */
  .sticker { top: -30px !important; bottom: auto !important; }
  /* the bottom-anchored ones (cactus by the pricing note, donut in the CTA)
     would otherwise land right on the text, so they move to the top gap too */
  #pricing .sticker[src*="st-cactus"] { top: -30px !important; bottom: auto !important; right: 3% !important; }
  /* #contact has overflow:hidden (clips negative-top stickers) but a big 130px
     top pad, so seat these INSIDE that padding gap: fully visible, above the heading */
  #contact .sticker[src*="st-knight"] { top: 8px !important; left: 6px !important; right: auto !important; bottom: auto !important; }
  #contact .sticker[src*="st-donut"]  { top: 8px !important; right: 3% !important; left: auto !important; bottom: auto !important; }

  /* each section reads like a full zine page */
  .section { padding: 72px 0; }
}