/*
 * Pop Waffle — main stylesheet
 *
 * All front-end CSS lives here. Populated in Phase 1 step 2 by consolidating
 * the <style> blocks from the six mockups in /_reference/.
 *
 * Organization (once populated):
 *   1. Brand tokens / CSS custom properties (:root)
 *   2. Reset + base
 *   3. Typography
 *   4. Layout utilities (.wrap)
 *   5. Buttons
 *   6. Navigation
 *   7. Hero variants
 *   8. Section components (intro-band, cred, etc.)
 *   9. Case study (hero, narrative, gallery, deliverables, pullquote)
 *  10. Team (corporate group, co-founder cards)
 *  11. Footer
 *  12. Media queries grouped at the end of each section
 */

/* ============================================================
   1. BRAND TOKENS
   ============================================================ */
:root{
  --mint: #5FD4B4;
  --mint-dk: #2FB592;
  --mint-lt: #C6F0E2;
  --pink: #F5B4BF;
  --pink-dk: #E98397;
  --pink-lt: #FBDFE4;
  --navy: #2B2B54;
  --navy-dk: #1A1A38;
  --violet: #5B4B9E;
  --violet-lt: #8F7ED1;
  --off: #FDF9F3;
  --paper: #FFFFFF;
  --ink: #1E1E3F;
  --ink-2: #504F72;
  --ink-3: #8887A5;
  --line: rgba(43, 43, 84, 0.14);

  --display: "Archivo", -apple-system, BlinkMacSystemFont, sans-serif;
  --body: "DM Sans", -apple-system, sans-serif;
  --script: "Caveat", cursive;
}

/* ============================================================
   2. RESET + BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--body);
  color:var(--ink);
  background:var(--off);
  line-height:1.55;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;font-size:inherit;cursor:pointer;border:none;background:none;color:inherit}

/* ============================================================
   3. TYPOGRAPHY
   ============================================================ */
/* .eyebrow — CONFLICT: homepage/cred include explicit color:var(--navy); goods/legend/agency omit color */
/* from popwaffle-homepage-v2.html, popwaffle-cred-v1.html */
.eyebrow{
  font-family:var(--display);
  font-weight:700;
  font-size:12px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--navy);
  display:inline-block;
}
/* from popwaffle-goods-v1.html, popwaffle-legend-v1.html, popwaffle-agency-v1.html */
/* .eyebrow{font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:0.16em;text-transform:uppercase;display:inline-block} */

.script{
  font-family:var(--script);
  font-weight:600;
  font-style:italic;
}

/* .h-hero — CONFLICT across all files */
/* from popwaffle-homepage-v2.html */
.h-hero{
  font-family:var(--display);
  font-weight:900;
  font-size:clamp(52px, 9vw, 128px);
  line-height:0.94;
  letter-spacing:-0.03em;
}
/* from popwaffle-goods-v1.html, popwaffle-cred-v1.html */
/* .h-hero{font-family:var(--display);font-weight:900;font-size:clamp(60px,10vw,160px);line-height:0.9;letter-spacing:-0.035em} */
/* from popwaffle-legend-v1.html, popwaffle-agency-v1.html */
/* .h-hero{font-family:var(--display);font-weight:900;font-size:clamp(60px,10vw,172px);line-height:0.9;letter-spacing:-0.04em} */

.h-section{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(36px, 5.5vw, 72px);
  line-height:1;
  letter-spacing:-0.025em;
}

/* .h-card — CONFLICT across files */
/* from popwaffle-homepage-v2.html */
.h-card{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(26px, 3vw, 38px);
  line-height:1.05;
  letter-spacing:-0.018em;
}
/* from popwaffle-goods-v1.html */
/* .h-card{font-family:var(--display);font-weight:800;font-size:clamp(28px,3.5vw,44px);line-height:1.02;letter-spacing:-0.02em} */
/* from popwaffle-legend-v1.html, popwaffle-agency-v1.html */
/* .h-card{font-family:var(--display);font-weight:800;font-size:clamp(24px,3vw,34px);line-height:1.05;letter-spacing:-0.015em} */
/* from popwaffle-cred-v1.html */
/* .h-card{font-family:var(--display);font-weight:800;font-size:clamp(24px,3vw,32px);line-height:1.05;letter-spacing:-0.015em} */

/* cred-only — case-study large heading */
.h-case{font-family:var(--display);font-weight:900;font-size:clamp(40px,5.5vw,76px);line-height:0.98;letter-spacing:-0.028em}

.lead{
  font-size:19px;
  line-height:1.55;
  color:var(--ink-2);
  max-width:560px;
}

.mint-word{color:var(--mint-dk)}
.pink-word{color:var(--pink-dk)}
.violet-word{color:var(--violet)}

/* ============================================================
   4. LAYOUT UTILITIES
   ============================================================ */
.wrap{max-width:1280px;margin:0 auto;padding:0 40px}
/* .wrap--narrow appears in popwaffle-legend-v1.html, popwaffle-agency-v1.html, popwaffle-cred-v1.html */
.wrap--narrow{max-width:960px;margin:0 auto;padding:0 40px}

/* .wrap responsive — CONFLICT: homepage/goods target .wrap only; legend/agency/cred target .wrap,.wrap--narrow */
/* from popwaffle-homepage-v2.html, popwaffle-goods-v1.html */
/* @media (max-width:640px){.wrap{padding:0 20px}} */
/* from popwaffle-legend-v1.html, popwaffle-agency-v1.html, popwaffle-cred-v1.html */
@media (max-width:640px){.wrap,.wrap--narrow{padding:0 20px}}

/* ============================================================
   5. BUTTONS
   ============================================================ */
/* .btn — CONFLICT: homepage includes letter-spacing:0.01em and box-shadow in transition, multi-line; others condensed without those props */
/* from popwaffle-homepage-v2.html */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:15px 26px;
  border-radius:999px;
  font-family:var(--body);
  font-size:14px;
  font-weight:600;
  letter-spacing:0.01em;
  border:2px solid transparent;
  transition: transform .2s ease, background .2s, color .2s, border-color .2s, box-shadow .2s;
  white-space:nowrap;
  line-height:1;
}
/* from popwaffle-goods-v1.html, popwaffle-legend-v1.html, popwaffle-agency-v1.html, popwaffle-cred-v1.html */
/* .btn{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border-radius:999px;font-family:var(--body);font-size:14px;font-weight:600;border:2px solid transparent;transition:transform .2s,background .2s,color .2s,border-color .2s;white-space:nowrap;line-height:1} */

.btn:hover{transform:translateY(-2px)}
.btn--mint{background:var(--mint);color:var(--navy);border-color:var(--mint)}
.btn--mint:hover{background:var(--mint-dk);border-color:var(--mint-dk);color:var(--paper)}
.btn--pink{background:var(--pink);color:var(--navy);border-color:var(--pink)}
.btn--pink:hover{background:var(--pink-dk);border-color:var(--pink-dk);color:var(--paper)}
.btn--navy{background:var(--navy);color:var(--paper);border-color:var(--navy)}

/* .btn--navy:hover — CONFLICT */
/* from popwaffle-homepage-v2.html */
.btn--navy:hover{background:var(--ink);border-color:var(--ink)}
/* from popwaffle-goods-v1.html, popwaffle-legend-v1.html, popwaffle-agency-v1.html, popwaffle-cred-v1.html */
/* .btn--navy:hover{background:var(--ink)} */

/* homepage only */
.btn--outline-mint{background:transparent;color:var(--navy);border-color:var(--mint)}
.btn--outline-mint:hover{background:var(--mint);border-color:var(--mint)}

.btn--outline-navy{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn--outline-navy:hover{background:var(--navy);color:var(--paper)}

/* goods, legend only — no conflict, unique to those files */
.btn--outline-paper{background:transparent;color:var(--paper);border-color:var(--paper)}
.btn--outline-paper:hover{background:var(--paper);color:var(--navy)}

.btn--sm{padding:11px 20px;font-size:13px}
.btn--lg{padding:19px 32px;font-size:15px}
.arrow svg{width:15px;height:15px;stroke-width:2;transition:transform .25s}
.btn:hover .arrow svg{transform:translate(3px,-3px)}

/* ============================================================
   6. NAVIGATION
   ============================================================ */
.nav{
  position:sticky;
  top:0;
  z-index:50;
  padding:18px 0;
  background:var(--off);
  border-bottom:1px solid transparent;
  transition:border-color .3s, background .3s;
}

/* When the WP admin bar is showing (logged-in users), offset the sticky nav
   so it sticks BELOW the admin bar, not behind it. WP's admin bar is 32px
   on desktop, 46px on <=782px viewports. Front-end visitors don't see the
   admin bar and this rule doesn't apply to them. */
.admin-bar .nav{top:32px}
@media screen and (max-width:782px){
  .admin-bar .nav{top:46px}
}

/* .nav.scrolled — CONFLICT */
/* from popwaffle-homepage-v2.html, popwaffle-goods-v1.html, popwaffle-agency-v1.html, popwaffle-cred-v1.html */
.nav.scrolled{border-bottom-color:var(--line);background:rgba(253,249,243,0.9);backdrop-filter:blur(10px)}
/* from popwaffle-legend-v1.html */
/* .nav.scrolled{border-bottom-color:rgba(253,249,243,0.12)} */

/* legend-only — dark nav variant */
.nav.dark{background:var(--navy-dk)}
.nav.dark .logo-text{color:var(--off)}
.nav.dark .logo-text small{color:rgba(253,249,243,0.5)}
.nav.dark .nav-links a{color:var(--off)}
.nav.dark .nav-links a:hover{background:rgba(253,249,243,0.1);color:var(--mint)}
.nav.dark .nav-links a.active{background:var(--mint);color:var(--navy)}
.nav.dark .btn--navy{background:var(--mint);color:var(--navy);border-color:var(--mint)}
.nav.dark .btn--navy:hover{background:var(--pink);border-color:var(--pink)}

.nav-inner{display:flex;align-items:center;gap:40px}
/* The nav uses a wider container than the rest of the site so the logo
   sits close to the left edge and the CTA sits close to the right, giving
   the top bar a full-bleed feel. Other .wrap containers stay at 1280px. */
.nav .nav-inner{max-width:none;padding-left:clamp(16px,3vw,56px);padding-right:clamp(16px,3vw,56px)}
.logo{display:flex;align-items:center;gap:12px;flex-shrink:0}
/* Logo is a single combined wordmark (icon + "Pop Waffle Design"). Height-
   constrained so it fits the nav bar; width auto preserves aspect ratio.
   max-width:none overrides the global img{max-width:100%} rule — without
   this override, narrow flex containers compress the wordmark horizontally
   while height stays at 44px, distorting the aspect ratio. */
.logo img{height:44px;width:auto;max-width:none;display:block}
.logo-text{
  font-family:var(--display);
  font-weight:800;
  font-size:20px;
  color:var(--navy);
  letter-spacing:-0.02em;
  line-height:1;
}
.logo-text small{
  display:block;
  font-weight:500;
  font-size:10px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin-top:3px;
}
.nav-links{
  display:flex;
  gap:6px;
  margin-left:32px;
}
/* When wp_nav_menu() populates the nav it wraps each item in <li> (and
   optionally a <ul>). The theme's fallback function outputs bare <a>s,
   but the real menu needs these list-style resets so default bullets
   don't appear. Safe to apply in both modes — just no-ops when there
   are no <li>/<ul> elements. */
.nav-links ul{
  list-style:none;
  margin:0;padding:0;
  display:flex;gap:6px;
}
.nav-links li{
  list-style:none;
  margin:0;padding:0;
}
.nav-links a{
  font-family:var(--display);
  font-weight:700;
  font-size:13px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--navy);
  padding:10px 14px;
  border-radius:999px;
  transition:background .2s, color .2s;
}
.nav-links a:hover{background:var(--mint-lt);color:var(--navy-dk)}
/* .nav-links a.active appears in goods/legend/agency/cred — not in homepage */
.nav-links a.active{background:var(--navy);color:var(--mint)}
.nav-cta{margin-left:auto}

/* ----- Mobile menu toggle (hamburger) ----- */
/* Hidden by default — only appears below the 960px breakpoint. The button
   is three stacked bars; .is-open transforms them into an X. */
.nav-toggle{
  display:none;
  width:44px;height:44px;
  padding:0;
  background:transparent;border:0;
  cursor:pointer;
  flex-direction:column;justify-content:center;align-items:center;gap:5px;
  border-radius:8px;
}
.nav-toggle:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.nav-toggle-bar{
  display:block;
  width:24px;height:2px;
  background:var(--navy);
  border-radius:2px;
  transition:transform .25s, opacity .2s;
}
.nav.dark .nav-toggle-bar{background:var(--off)}
/* Animated X state when the menu is open. */
.nav.is-open .nav-toggle-bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.is-open .nav-toggle-bar:nth-child(2){opacity:0}
.nav.is-open .nav-toggle-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* .nav responsive
   Below 960px the inline link list becomes a full-width drop-down drawer
   that slides open when .is-open is added by main.js. The CTA stays in
   the bar; the hamburger button replaces the inline links there. */
@media (max-width:960px){
  .nav-toggle{display:flex}

  /* Drawer container — absolutely positioned below the nav bar. */
  .nav-links{
    display:none;
    position:absolute;
    top:100%;left:0;right:0;
    background:var(--off);
    border-top:1px solid var(--line);
    padding:16px 20px 24px;
    flex-direction:column;
    gap:4px;
    margin-left:0;
    box-shadow:0 12px 24px rgba(43,43,84,.08);
  }
  .nav.dark .nav-links{
    background:var(--navy-dk);
    border-top-color:rgba(253,249,243,.12);
  }
  .nav.is-open .nav-links{display:flex}

  /* When the menu is rendered as a real WP menu, ACF wraps items in <ul>.
     Override the desktop horizontal flex to vertical stack inside the drawer. */
  .nav-links ul{
    flex-direction:column;
    gap:4px;
    width:100%;
  }
  .nav-links li{width:100%}
  .nav-links a{
    display:block;
    padding:14px 16px;
    font-size:15px;
  }

  /* Tighten the nav gap on mobile so the hamburger sits cleanly to the
     right of the logo. (Desktop keeps the original 40px gap.) */
  .nav-inner{gap:12px}

  /* Hide the bar CTA on mobile — the hamburger is the only right-side
     control. The "Get a brand review" link is still reachable inside
     the drawer (and via in-page CTAs throughout the site). */
  .nav-cta{display:none}

  /* The hamburger replaces the CTA's role as the right-aligned element. */
  .nav-toggle{margin-left:auto}

  /* Lock body scroll behind the open drawer so iOS doesn't double-scroll. */
  body.nav-open{overflow:hidden}
}

/* ============================================================
   7. HERO
   ============================================================ */

/* ----- Homepage hero (.hero) ----- */
.hero{
  position:relative;
  background:var(--mint);
  padding:70px 0 0;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;
  top:-40%;right:-10%;
  width:700px;height:700px;
  border-radius:50%;
  background:radial-gradient(circle at 30% 40%, rgba(255,255,255,0.25), transparent 60%);
  pointer-events:none;
}
.hero-grid{
  position:relative;
  display:grid;
  grid-template-columns:1.35fr 1fr;
  gap:60px;
  align-items:center;
  min-height:580px;
  padding-bottom:160px;
}
.hero-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 14px 8px 10px;
  border-radius:999px;
  background:rgba(43,43,84,0.12);
  color:var(--navy);
  font-family:var(--display);
  font-weight:700;
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  margin-bottom:28px;
}
.hero-eyebrow .dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--pink-dk);
  box-shadow:0 0 0 3px rgba(233,131,151,0.25);
}
.hero h1{color:var(--navy)}
.hero h1 .script-flourish{
  display:inline-block;
  font-family:var(--script);
  font-weight:700;
  font-style:italic;
  color:var(--pink-dk);
  font-size:0.85em;
  letter-spacing:0;
  transform:rotate(-3deg) translateY(-4px);
  margin:0 6px;
}
.hero-copy{
  margin-top:28px;
  font-size:19px;
  color:var(--navy);
  opacity:0.85;
  max-width:500px;
  line-height:1.55;
}
.hero-cta-row{
  display:flex;
  gap:12px;
  margin-top:36px;
  flex-wrap:wrap;
}
.hero-review{
  margin-top:40px;
  padding:20px 22px;
  background:var(--navy);
  color:var(--paper);
  border-radius:16px;
  max-width:440px;
  box-shadow:8px 8px 0 rgba(43,43,84,0.15);
}
.hero-review-label{
  font-family:var(--display);
  font-weight:700;
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--mint);
  margin-bottom:6px;
}
.hero-review h3{
  font-family:var(--display);
  font-weight:800;
  font-size:18px;
  margin-bottom:14px;
  letter-spacing:-0.01em;
}
.hero-review-form{
  display:flex;
  gap:6px;
  background:var(--paper);
  padding:4px 4px 4px 14px;
  border-radius:999px;
}
.hero-review-form input{
  flex:1;
  border:none;
  background:transparent;
  font-family:inherit;
  font-size:14px;
  color:var(--ink);
  outline:none;
}
.hero-review-form input::placeholder{color:var(--ink-3)}
.hero-review-form button{
  padding:10px 18px;
  border-radius:999px;
  background:var(--mint);
  color:var(--navy);
  font-family:var(--body);
  font-size:13px;
  font-weight:700;
  transition:background .2s;
}
.hero-review-form button:hover{background:var(--mint-dk);color:var(--paper)}

/* Hero visual */
.hero-visual{
  position:relative;
  align-self:stretch;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px 0 60px;
}
.hero-stack{
  position:relative;
  width:100%;
  max-width:440px;
  aspect-ratio:1;
}
.hero-card{
  position:absolute;
  background:var(--paper);
  border-radius:22px;
  box-shadow:
    0 1px 0 rgba(43,43,84,0.08),
    0 12px 40px rgba(43,43,84,0.14);
  padding:26px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.hero-card-1{
  top:0;left:0;
  width:62%;height:58%;
  background:var(--pink);
  transform:rotate(-5deg);
  z-index:2;
}
.hero-card-1 .logo-block{
  font-family:var(--display);
  font-weight:900;
  font-size:44px;
  line-height:0.85;
  color:var(--navy);
  letter-spacing:-0.03em;
}
.hero-card-1 .logo-block em{
  font-family:var(--script);
  font-weight:700;
  font-style:italic;
  font-size:30px;
  color:var(--violet);
  display:block;
  margin-top:6px;
}
.hero-card-2{
  top:22%;right:-4%;
  width:58%;height:46%;
  background:var(--navy);
  color:var(--paper);
  transform:rotate(6deg);
  z-index:1;
}
.hero-card-2 .swatch-row{
  display:flex;
  gap:6px;
  margin-bottom:auto;
}
.hero-card-2 .swatch{
  width:28px;height:28px;
  border-radius:50%;
}
.hero-card-2 .swatch-mint{background:var(--mint)}
.hero-card-2 .swatch-pink{background:var(--pink)}
.hero-card-2 .swatch-violet{background:var(--violet-lt)}
.hero-card-2 h4{
  font-family:var(--display);
  font-weight:800;
  font-size:20px;
  letter-spacing:-0.01em;
  margin-bottom:4px;
}
.hero-card-2 p{
  font-size:11px;
  opacity:0.7;
  font-family:var(--display);
  letter-spacing:0.1em;
  text-transform:uppercase;
}
.hero-card-3{
  bottom:0;left:14%;
  width:72%;height:42%;
  background:var(--off);
  transform:rotate(2deg);
  z-index:3;
  border:2px solid var(--navy);
}
.hero-card-3 .mini-logo{
  width:44px;height:44px;
  background:var(--mint);
  border-radius:12px;
  position:relative;
}
.hero-card-3 .mini-logo::before{
  content:"";
  position:absolute;
  top:8px;left:8px;right:8px;bottom:8px;
  background-image:
    linear-gradient(var(--navy) 2px, transparent 2px),
    linear-gradient(90deg, var(--navy) 2px, transparent 2px);
  background-size: 33% 33%;
  opacity:0.8;
}
.hero-card-3 h4{
  font-family:var(--display);
  font-weight:800;
  font-size:15px;
  margin-top:auto;
  color:var(--navy);
  letter-spacing:-0.01em;
}
.hero-card-3 .tag{
  display:inline-block;
  padding:3px 8px;
  border-radius:999px;
  background:var(--mint-lt);
  color:var(--navy);
  font-family:var(--display);
  font-weight:700;
  font-size:9px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  margin-top:6px;
}

/* Wave divider */
.wave{
  display:block;
  width:100%;
  height:auto;
}

@media (max-width:960px){
  .hero{padding:40px 0 0}
  .hero-grid{grid-template-columns:1fr;gap:40px;padding-bottom:100px;min-height:auto}
  .hero-visual{padding:0}
  .hero-stack{max-width:360px;margin:0 auto}
}

/* ----- Page hero (.page-hero) — used by goods/legend/agency/cred ----- */
/* .page-hero — CONFLICT: each page sets a different background/tone. Kept as four variants. */
/* from popwaffle-goods-v1.html */
.page-hero{
  background:var(--mint);
  padding:80px 0 120px;
  position:relative;
  overflow:hidden;
}
/* from popwaffle-legend-v1.html */
/* .page-hero{background:var(--navy-dk);color:var(--off);padding:80px 0 120px;position:relative;overflow:hidden} */
/* from popwaffle-agency-v1.html */
/* .page-hero{background:var(--violet);color:var(--off);padding:80px 0 110px;position:relative;overflow:hidden} */
/* from popwaffle-cred-v1.html */
/* .page-hero{background:var(--pink);padding:80px 0 100px;position:relative;overflow:hidden} */

/* .page-hero::before — CONFLICT: different radial gradient colors per page */
/* from popwaffle-goods-v1.html */
.page-hero::before{
  content:"";position:absolute;top:-30%;right:-12%;
  width:600px;height:600px;border-radius:50%;
  background:radial-gradient(circle at 30% 40%, rgba(255,255,255,0.28), transparent 60%);
}
/* from popwaffle-legend-v1.html */
/* .page-hero::before{content:"";position:absolute;top:-30%;right:-12%;width:680px;height:680px;border-radius:50%;background:radial-gradient(circle at 30% 40%, rgba(95,212,180,0.35), transparent 60%)} */
/* from popwaffle-agency-v1.html */
/* .page-hero::before{content:"";position:absolute;top:-30%;right:-12%;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle at 30% 40%, rgba(95,212,180,0.4), transparent 60%)} */
/* from popwaffle-cred-v1.html */
/* .page-hero::before{content:"";position:absolute;top:-30%;right:-12%;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle at 30% 40%, rgba(255,255,255,0.32), transparent 60%)} */

/* .page-hero::after — CONFLICT: different gradient colors */
/* from popwaffle-goods-v1.html */
.page-hero::after{
  content:"";position:absolute;bottom:-40%;left:-8%;
  width:500px;height:500px;border-radius:50%;
  background:radial-gradient(circle at 60% 30%, rgba(245,180,191,0.32), transparent 60%);
}
/* from popwaffle-legend-v1.html */
/* .page-hero::after{content:"";position:absolute;bottom:-35%;left:-10%;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle at 60% 30%, rgba(245,180,191,0.3), transparent 60%)} */
/* from popwaffle-agency-v1.html */
/* .page-hero::after{content:"";position:absolute;bottom:-40%;left:-8%;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle at 60% 30%, rgba(245,180,191,0.4), transparent 60%)} */
/* from popwaffle-cred-v1.html */
/* .page-hero::after{content:"";position:absolute;bottom:-40%;left:-8%;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle at 60% 30%, rgba(95,212,180,0.3), transparent 60%)} */

.page-hero-inner{position:relative}

/* .page-hero .breadcrumb — CONFLICT: navy vs mint variants */
/* from popwaffle-goods-v1.html, popwaffle-cred-v1.html */
.page-hero .breadcrumb{
  font-family:var(--display);font-weight:700;font-size:11px;
  letter-spacing:0.18em;text-transform:uppercase;color:var(--navy);
  opacity:0.65;margin-bottom:28px;
}
/* from popwaffle-legend-v1.html, popwaffle-agency-v1.html */
/* .page-hero .breadcrumb{font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--mint);opacity:0.85;margin-bottom:28px} */

/* goods-only — hover variant on breadcrumb link */
.page-hero .breadcrumb a:hover{color:var(--navy-dk);opacity:1}

/* .page-hero h1 — CONFLICT: navy vs off color */
/* from popwaffle-goods-v1.html, popwaffle-cred-v1.html */
.page-hero h1{color:var(--navy);margin-bottom:32px}
/* from popwaffle-legend-v1.html, popwaffle-agency-v1.html */
/* .page-hero h1{color:var(--off);margin-bottom:32px} */

/* .page-hero h1 em — CONFLICT: accent color + font-size differ per page */
/* from popwaffle-goods-v1.html */
.page-hero h1 em{
  font-style:normal;font-family:var(--script);font-weight:700;
  color:var(--pink-dk);font-size:0.7em;letter-spacing:0;
  transform:rotate(-3deg);display:inline-block;margin-left:8px;
}
/* from popwaffle-legend-v1.html */
/* .page-hero h1 em{font-style:normal;font-family:var(--script);font-weight:700;color:var(--pink);font-size:0.65em;letter-spacing:0;transform:rotate(-3deg);display:inline-block;margin-left:-2px} */
/* from popwaffle-agency-v1.html */
/* .page-hero h1 em{font-style:normal;font-family:var(--script);font-weight:700;color:var(--pink);font-size:0.7em;letter-spacing:0;transform:rotate(-3deg);display:inline-block;margin-left:-2px} */
/* from popwaffle-cred-v1.html */
/* .page-hero h1 em{font-style:normal;font-family:var(--script);font-weight:700;color:var(--violet);font-size:0.7em;letter-spacing:0;transform:rotate(-3deg);display:inline-block;margin-left:-4px} */

.page-hero-grid{
  display:grid;grid-template-columns:1fr auto;gap:60px;
  align-items:end;margin-bottom:40px;
}
/* goods override: margin-bottom:40px (above). legend uses margin-bottom:32px; agency uses 32px; cred uses 40px. */
/* from popwaffle-legend-v1.html, popwaffle-agency-v1.html */
/* .page-hero-grid{display:grid;grid-template-columns:1fr auto;gap:60px;align-items:end;margin-bottom:32px} */

/* .page-hero .lead — CONFLICT: color/max-width differ */
/* from popwaffle-goods-v1.html */
.page-hero .lead{
  font-size:20px;color:var(--navy);opacity:0.82;
  max-width:540px;line-height:1.5;
}
/* from popwaffle-legend-v1.html */
/* .page-hero .lead{font-size:22px;color:rgba(253,249,243,0.85);max-width:600px;line-height:1.5} */
/* from popwaffle-agency-v1.html */
/* .page-hero .lead{font-size:22px;color:rgba(253,249,243,0.88);max-width:640px;line-height:1.5} */
/* from popwaffle-cred-v1.html */
/* .page-hero .lead{font-size:20px;color:var(--navy);opacity:0.82;max-width:560px;line-height:1.5} */

/* legend/agency only — .lead em accent inside page-hero */
.page-hero .lead em{font-style:normal;color:var(--mint);font-family:var(--display);font-weight:700}

.page-hero-meta{
  display:flex;gap:32px;align-items:start;
}

/* .page-hero-meta-col .eyebrow — CONFLICT */
/* from popwaffle-goods-v1.html, popwaffle-cred-v1.html */
.page-hero-meta-col .eyebrow{
  color:var(--navy);opacity:0.7;margin-bottom:8px;display:block;
}
/* from popwaffle-legend-v1.html, popwaffle-agency-v1.html */
/* .page-hero-meta-col .eyebrow{color:var(--mint);opacity:0.9;margin-bottom:8px;display:block} */

/* .page-hero-meta-col p — CONFLICT (navy vs off) */
/* from popwaffle-goods-v1.html, popwaffle-cred-v1.html */
.page-hero-meta-col p{
  font-family:var(--display);font-weight:700;
  font-size:20px;color:var(--navy);letter-spacing:-0.01em;line-height:1.05;
}
/* from popwaffle-legend-v1.html, popwaffle-agency-v1.html */
/* .page-hero-meta-col p{font-family:var(--display);font-weight:700;font-size:20px;color:var(--off);letter-spacing:-0.01em;line-height:1.05} */

/* .page-hero responsive — goods uses padding:50px 0 80px; others identical. */
@media (max-width:900px){
  .page-hero{padding:50px 0 80px}
  .page-hero-grid{grid-template-columns:1fr;gap:24px}
  .page-hero-meta{flex-direction:column;gap:20px;margin-top:20px}
}

/* ============================================================
   8. HOMEPAGE SECTIONS
   ============================================================ */

/* ----- Intro band — homepage variant ----- */
/* .intro-band — CONFLICT: different padding across homepage/agency/cred */
/* from popwaffle-homepage-v2.html */
.intro-band{
  padding:110px 0 60px;
  background:var(--off);
  position:relative;
}
/* from popwaffle-agency-v1.html */
/* .intro-band{padding:90px 0 40px;background:var(--off)} */
/* from popwaffle-cred-v1.html */
/* .intro-band{padding:80px 0 40px;background:var(--off)} */

.intro-band .wrap{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:64px;
  align-items:start;
}
.intro-band .eyebrow{color:var(--pink-dk);white-space:nowrap;padding-top:14px}

/* .intro-band p — CONFLICT: different max-width + line-height across files */
/* from popwaffle-homepage-v2.html */
.intro-band p{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(22px, 2.5vw, 32px);
  line-height:1.3;
  color:var(--navy);
  max-width:860px;
  letter-spacing:-0.01em;
}
/* from popwaffle-agency-v1.html */
/* .intro-band p{font-family:var(--display);font-weight:500;font-size:clamp(22px,2.5vw,32px);line-height:1.35;color:var(--navy);max-width:920px;letter-spacing:-0.01em} */
/* from popwaffle-cred-v1.html */
/* .intro-band p{font-family:var(--display);font-weight:500;font-size:clamp(22px,2.5vw,32px);line-height:1.35;color:var(--navy);max-width:880px;letter-spacing:-0.01em} */

/* .intro-band p em — CONFLICT: accent color differs per page */
/* from popwaffle-homepage-v2.html, popwaffle-cred-v1.html */
.intro-band p em{
  font-family:var(--display);
  font-weight:800;
  font-style:normal;
  color:var(--mint-dk);
}
/* from popwaffle-agency-v1.html */
/* .intro-band p em{font-family:var(--display);font-weight:800;font-style:normal;color:var(--violet)} */

.intro-band p strong{
  font-weight:800;
  color:var(--navy);
}
@media (max-width:760px){
  .intro-band{padding:80px 0 40px}
  .intro-band .wrap{grid-template-columns:1fr;gap:20px}
}

/* ----- Work / CRED preview (homepage) ----- */
.cred{padding:60px 0 120px;background:var(--off)}
.cred-head{
  display:grid;
  grid-template-columns:1fr auto;
  gap:40px;
  align-items:end;
  margin-bottom:64px;
  padding-bottom:28px;
  border-bottom:2px solid var(--navy);
}
.cred-head .eyebrow{margin-bottom:14px}
.cred-head h2{color:var(--navy)}
.cred-head h2 em{font-style:normal;color:var(--mint-dk)}
.cred-head-right{display:flex;flex-direction:column;align-items:flex-end;gap:14px}
.cred-counter{
  font-family:var(--script);
  font-weight:600;
  font-style:italic;
  color:var(--pink-dk);
  font-size:26px;
  line-height:1;
  transform:rotate(-4deg);
}

.cred-list{
  display:flex;
  flex-direction:column;
  gap:20px;
}
.case{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:0;
  border-radius:22px;
  overflow:hidden;
  position:relative;
  min-height:420px;
  transition:transform .35s ease;
}
.case:hover{transform:translateY(-6px)}
.case-1{background:var(--mint)}
.case-2{background:var(--pink);grid-template-columns:1fr 1.1fr}
.case-2 .case-visual{order:2}
.case-2 .case-body{order:1}
.case-3{background:var(--navy);color:var(--paper)}
.case-3 .case-body h3, .case-3 .case-body .case-meta-item strong{color:var(--paper)}
.case-3 .case-body .eyebrow{color:var(--mint)}
.case-3 .case-body p{color:rgba(253,249,243,0.7)}
.case-3 .case-body .case-link{color:var(--mint)}
.case-3 .case-meta{border-color:rgba(253,249,243,0.18)}

.case-visual{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px;
}
.case-visual::before{
  content:"";
  position:absolute;
  inset:-40px;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.22), transparent 55%),
    radial-gradient(circle at 80% 80%, rgba(0,0,0,0.1), transparent 55%);
  pointer-events:none;
}
.case-mark{
  position:relative;
  z-index:1;
  font-family:var(--display);
  font-weight:900;
  font-size:clamp(100px, 14vw, 180px);
  line-height:0.8;
  letter-spacing:-0.05em;
  text-align:center;
}
.case-1 .case-mark{color:var(--navy)}
.case-2 .case-mark{color:var(--navy)}
.case-3 .case-mark{color:var(--mint)}
.case-mark small{
  display:block;
  font-size:0.2em;
  font-weight:800;
  letter-spacing:0.22em;
  text-transform:uppercase;
  margin-top:14px;
  opacity:0.8;
}
.case-tag{
  position:absolute;
  top:24px;left:24px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  background:rgba(43,43,84,0.9);
  color:var(--off);
  border-radius:999px;
  font-family:var(--display);
  font-weight:700;
  font-size:10px;
  letter-spacing:0.16em;
  text-transform:uppercase;
}
.case-3 .case-tag{background:var(--mint);color:var(--navy)}
.case-num{
  position:absolute;
  bottom:24px;right:24px;
  z-index:2;
  font-family:var(--display);
  font-weight:700;
  font-size:12px;
  letter-spacing:0.2em;
  color:var(--navy);
  opacity:0.75;
}
.case-3 .case-num{color:var(--mint)}

.case-body{
  padding:44px 44px;
  display:flex;
  flex-direction:column;
  background:var(--paper);
  justify-content:center;
}
.case-3 .case-body{background:var(--navy-dk)}
.case-body .eyebrow{color:var(--pink-dk);margin-bottom:16px}
.case-body h3{color:var(--navy);margin-bottom:16px}
.case-body h3 em{font-style:normal;color:var(--mint-dk)}
.case-2 .case-body h3 em{color:var(--pink-dk)}
.case-3 .case-body h3 em{color:var(--mint)}
.case-body p{font-size:16px;color:var(--ink-2);margin-bottom:24px;max-width:460px;line-height:1.55}
.case-meta{
  display:flex;
  gap:28px;
  padding:20px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  margin-bottom:20px;
}
.case-meta-item{display:flex;flex-direction:column;gap:4px}
.case-meta-item .eyebrow{font-size:10px;letter-spacing:0.12em;color:var(--ink-3);margin-bottom:0}
.case-meta-item strong{
  font-family:var(--display);
  font-weight:700;
  font-size:14px;
  color:var(--navy);
}
.case-link{
  font-family:var(--display);
  font-weight:700;
  font-size:14px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--navy);
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.case-link .arrow{display:inline-flex;transition:transform .25s}
.case:hover .case-link .arrow{transform:translate(4px,-4px)}

@media (max-width:900px){
  .case, .case-2{grid-template-columns:1fr}
  .case-2 .case-visual{order:0}
  .case-2 .case-body{order:1}
  .case-visual{min-height:280px;padding:32px}
  .case-body{padding:32px}
  .cred-head{grid-template-columns:1fr;gap:16px}
  .cred-head-right{align-items:flex-start}
}

/* ----- Troubled-by band (homepage only) ----- */
.troubled{
  position:relative;
  background:var(--navy);
  color:var(--paper);
  padding:120px 0;
  overflow:hidden;
}
.troubled::before{
  content:"";
  position:absolute;
  top:-200px;left:-100px;
  width:500px;height:500px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(95,212,180,0.22), transparent 70%);
}
.troubled::after{
  content:"";
  position:absolute;
  bottom:-200px;right:-100px;
  width:500px;height:500px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(233,131,151,0.22), transparent 70%);
}
.troubled-inner{position:relative;text-align:center}
.troubled .eyebrow{color:var(--mint);margin-bottom:20px}
.troubled h2{
  max-width:900px;
  margin:0 auto 40px;
  color:var(--paper);
}
.troubled h2 em{
  font-style:normal;
  font-family:var(--script);
  color:var(--pink);
  font-weight:700;
  font-size:1.05em;
}

.troubled-options{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:14px;
  max-width:980px;
  margin:0 auto 40px;
}
.troubled-option{
  padding:20px 22px;
  background:rgba(253,249,243,0.07);
  border:1px solid rgba(253,249,243,0.12);
  border-radius:14px;
  text-align:left;
  font-family:var(--body);
  font-size:15px;
  font-weight:500;
  color:var(--paper);
  cursor:pointer;
  transition:all .25s ease;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.troubled-option:hover{background:var(--mint);color:var(--navy);border-color:var(--mint);transform:translateY(-3px)}
.troubled-option .label{
  font-family:var(--display);
  font-weight:700;
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--mint);
  transition:color .25s;
}
.troubled-option:hover .label{color:var(--navy-dk)}
.troubled-option strong{font-weight:600;color:var(--paper)}
.troubled-option:hover strong{color:var(--navy)}

/* ----- Services preview / GOODS (homepage) ----- */
.goods{padding:120px 0;background:var(--off)}
.goods-head{
  display:grid;
  grid-template-columns:1fr auto;
  gap:40px;
  align-items:end;
  margin-bottom:56px;
  padding-bottom:28px;
  border-bottom:2px solid var(--navy);
}
.goods-head .eyebrow{margin-bottom:12px;color:var(--mint-dk)}
.goods-head h2{color:var(--navy)}
.goods-head h2 em{font-style:normal;color:var(--pink-dk)}

.goods-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:20px;
}
.good{
  border-radius:22px;
  padding:32px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:280px;
  position:relative;
  overflow:hidden;
  transition:transform .3s ease;
  cursor:pointer;
}
.good:hover{transform:translateY(-6px)}
.good-num{
  font-family:var(--display);
  font-weight:900;
  font-size:60px;
  line-height:1;
  letter-spacing:-0.04em;
  opacity:0.25;
  position:absolute;
  top:20px;right:24px;
}
.good h3{
  font-family:var(--display);
  font-weight:800;
  font-size:28px;
  letter-spacing:-0.015em;
  line-height:1.02;
  margin-bottom:10px;
}
.good p{font-size:14.5px;line-height:1.5;max-width:260px}
.good .good-arrow{
  margin-top:20px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:var(--display);
  font-weight:700;
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
}
.good .good-arrow svg{transition:transform .25s}
.good:hover .good-arrow svg{transform:translate(4px,-4px)}

.good-1{grid-column:span 6;background:var(--mint);color:var(--navy)}
.good-1 .good-num{color:var(--navy)}
.good-2{grid-column:span 6;background:var(--pink);color:var(--navy)}
.good-2 .good-num{color:var(--navy)}
.good-3{grid-column:span 4;background:var(--navy);color:var(--off)}
.good-3 .good-num{color:var(--mint)}
.good-4{grid-column:span 4;background:var(--violet);color:var(--off)}
.good-4 .good-num{color:var(--pink)}
.good-5{grid-column:span 4;background:var(--off);color:var(--navy);border:2px solid var(--navy)}
.good-5 .good-num{color:var(--navy)}

@media (max-width:900px){
  .goods-grid{grid-template-columns:1fr}
  .good-1,.good-2,.good-3,.good-4,.good-5{grid-column:span 1}
  .goods-head{grid-template-columns:1fr;gap:16px}
}

/* ----- Process (homepage + goods) ----- */
/* .process — CONFLICT: homepage uses pink-lt bg; goods uses off bg */
/* from popwaffle-homepage-v2.html */
.process{padding:120px 0;background:var(--pink-lt)}
/* from popwaffle-goods-v1.html */
/* .process{padding:120px 0;background:var(--off)} */

.process-head{text-align:center;margin-bottom:60px}
.process-head .eyebrow{color:var(--pink-dk);margin-bottom:16px}

/* .process-head h2 — CONFLICT: homepage max-width:720px; goods max-width:760px */
/* from popwaffle-homepage-v2.html */
.process-head h2{color:var(--navy);margin:0 auto;max-width:720px}
/* from popwaffle-goods-v1.html */
/* .process-head h2{color:var(--navy);margin:0 auto;max-width:760px} */

.process-head h2 em{font-style:normal;color:var(--pink-dk)}

.process-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  position:relative;
}
.process-grid::before{
  content:"";
  position:absolute;
  top:28px;left:5%;right:5%;
  height:2px;
  background:repeating-linear-gradient(to right, var(--navy) 0, var(--navy) 6px, transparent 6px, transparent 12px);
  z-index:0;
}
.step{
  position:relative;
  z-index:1;
  background:var(--off);
  border-radius:18px;
  padding:30px 28px;
  border:2px solid var(--navy);
  box-shadow:4px 4px 0 var(--navy);
  transition:transform .25s;
}
.step:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--navy)}
.step-num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;height:44px;
  background:var(--navy);
  color:var(--mint);
  border-radius:999px;
  font-family:var(--display);
  font-weight:800;
  font-size:14px;
  letter-spacing:0.08em;
  margin-bottom:18px;
}
.step:nth-child(2) .step-num{background:var(--pink-dk);color:var(--paper)}
.step:nth-child(3) .step-num{background:var(--mint-dk);color:var(--paper)}
.step:nth-child(4) .step-num{background:var(--violet);color:var(--paper)}
.step h3{
  font-family:var(--display);
  font-weight:800;
  font-size:26px;
  color:var(--navy);
  margin-bottom:10px;
  letter-spacing:-0.015em;
}
.step p{font-size:14.5px;color:var(--ink-2);line-height:1.5}
@media (max-width:900px){
  .process-grid{grid-template-columns:1fr 1fr;gap:16px}
  .process-grid::before{display:none}
}
@media (max-width:560px){.process-grid{grid-template-columns:1fr}}

/* ----- Studio / LEGEND preview (homepage only) ----- */
.legend{padding:120px 0;background:var(--off)}
.legend-inner{
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:70px;
  align-items:center;
}
.legend-visual{
  position:relative;
  aspect-ratio:4/5;
  background:var(--mint);
  border-radius:22px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.legend-visual::before{
  content:"";
  position:absolute;
  inset:16%;
  background:
    linear-gradient(var(--navy) 2px, transparent 2px) 0 0 / 20% 20%,
    linear-gradient(90deg, var(--navy) 2px, transparent 2px) 0 0 / 20% 20%;
  opacity:0.75;
  mask-image: radial-gradient(ellipse at center, black 60%, transparent 100%);
}
.legend-visual-tag{
  position:absolute;
  bottom:24px;left:24px;
  font-family:var(--display);
  font-weight:700;
  font-size:11px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--navy);
}
.legend-visual-tag em{
  font-family:var(--script);
  font-style:italic;
  font-weight:700;
  font-size:22px;
  letter-spacing:0;
  text-transform:none;
  color:var(--pink-dk);
  display:block;
  transform:rotate(-3deg);
  margin-top:2px;
}
.legend-copy .eyebrow{color:var(--mint-dk);margin-bottom:16px}
.legend-copy h2{margin-bottom:24px;color:var(--navy)}
.legend-copy h2 em{font-style:normal;color:var(--pink-dk)}
.legend-copy p{font-size:18px;color:var(--ink-2);margin-bottom:20px;max-width:520px;line-height:1.55}

.legend-team{
  margin-top:36px;
  padding-top:28px;
  border-top:2px solid var(--navy);
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:24px;
  align-items:center;
}
.avatars{display:flex;align-items:center}
.avatar{
  width:44px;height:44px;
  border-radius:50%;
  border:2px solid var(--off);
  margin-left:-10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--display);
  font-weight:800;
  font-size:15px;
  color:var(--navy);
}
.avatar:first-child{margin-left:0}
.avatar.av-principal{
  width:64px;height:64px;font-size:20px;
  background:var(--mint);color:var(--navy);
  border:3px solid var(--navy);
  box-shadow:3px 3px 0 var(--navy);
  margin-right:4px;
}
.avatar.av-principal-2{
  width:64px;height:64px;font-size:20px;
  background:var(--pink);color:var(--navy);
  border:3px solid var(--navy);
  box-shadow:3px 3px 0 var(--navy);
  margin-right:4px;margin-left:-2px;
}
.avatar.av-small{width:34px;height:34px;font-size:12px;color:var(--navy);border-width:2px}
.av-1{background:var(--mint)}
.av-2{background:var(--pink)}
.av-3{background:var(--violet-lt);color:var(--paper)}
.av-4{background:var(--navy);color:var(--mint)}
.av-5{background:var(--pink-dk);color:var(--paper)}
.av-6{background:var(--mint-dk);color:var(--paper)}
.legend-team-text{
  font-family:var(--display);
  font-weight:600;
  font-size:15px;
  color:var(--navy);
  line-height:1.3;
}
.legend-team-text small{
  display:block;
  font-weight:500;
  font-size:12px;
  color:var(--ink-3);
  font-family:var(--body);
  margin-top:2px;
}
@media (max-width:900px){
  .legend-inner{grid-template-columns:1fr;gap:40px}
  .legend-team{grid-template-columns:1fr;gap:16px}
}

/* ----- Insights / blog preview (homepage only) ----- */
.insights{padding:120px 0;background:var(--pink-lt)}
.insights-head{
  display:grid;
  grid-template-columns:1fr auto;
  gap:40px;
  align-items:end;
  margin-bottom:56px;
  padding-bottom:28px;
  border-bottom:2px solid var(--navy);
}
.insights-head .eyebrow{color:var(--pink-dk);margin-bottom:12px}
.insights-head h2{color:var(--navy)}
.insights-head h2 em{font-style:normal;color:var(--mint-dk)}

.insights-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.post{
  background:var(--off);
  border:2px solid var(--navy);
  border-radius:18px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform .25s, box-shadow .25s;
}
.post:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--navy)}
.post-img{
  aspect-ratio:16/9;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
}
.post-img::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 20% 30%, rgba(255,255,255,0.3), transparent 60%);
}
.post-1 .post-img{background:var(--mint)}
.post-2 .post-img{background:var(--pink)}
.post-3 .post-img{background:var(--violet-lt)}
.post-mark{
  position:relative;z-index:1;
  font-family:var(--display);
  font-weight:900;
  font-size:80px;
  line-height:1;
  color:var(--navy);
  letter-spacing:-0.05em;
}
.post-body{padding:22px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.post-meta{
  display:flex;align-items:center;gap:10px;
  font-family:var(--display);
  font-weight:700;
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--pink-dk);
}
.post-meta .dot{width:4px;height:4px;border-radius:50%;background:var(--ink-3)}
.post-meta span:last-child{color:var(--ink-3);font-weight:500}
.post h3{
  font-family:var(--display);
  font-weight:800;
  font-size:20px;
  color:var(--navy);
  line-height:1.15;
  letter-spacing:-0.01em;
}
.post p{font-size:14.5px;color:var(--ink-2);line-height:1.5}
.post-link{
  margin-top:auto;
  padding-top:12px;
  font-family:var(--display);
  font-weight:700;
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--navy);
  display:inline-flex;
  align-items:center;
  gap:6px;
}
@media (max-width:900px){.insights-grid{grid-template-columns:1fr}.insights-head{grid-template-columns:1fr;gap:16px}}

/* ============================================================
   9. GOODS PAGE
   ============================================================ */

/* ----- Service anchor pills ----- */
.pills-bar{
  background:var(--navy);
  padding:20px 0;
  position:sticky;
  top:90px;
  z-index:40;
  border-top:2px solid var(--navy);
  border-bottom:2px solid var(--navy);
}
.pills{
  display:flex;gap:8px;flex-wrap:wrap;justify-content:center;
}
.pill{
  padding:9px 18px;
  border-radius:999px;
  background:transparent;
  border:1.5px solid rgba(253,249,243,0.25);
  color:var(--off);
  font-family:var(--display);font-weight:700;font-size:12px;
  letter-spacing:0.12em;text-transform:uppercase;
  transition:all .25s;
}
.pill:hover{background:var(--mint);color:var(--navy);border-color:var(--mint)}
.pill .num{color:var(--mint);margin-right:6px;transition:color .25s}
.pill:hover .num{color:var(--navy)}

/* ----- Goods service blocks (detail page) ----- */
.goods-stack{padding:0}

.good-block{
  padding:120px 0;
  position:relative;
  border-bottom:1px solid var(--line);
}
.good-block:last-of-type{border-bottom:none}

.good-block.bg-mint{background:var(--mint)}
.good-block.bg-pink-lt{background:var(--pink-lt)}
.good-block.bg-navy{background:var(--navy);color:var(--off)}
.good-block.bg-off{background:var(--off)}
.good-block.bg-violet{background:var(--violet);color:var(--off)}

.good-grid{
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:80px;
  align-items:center;
}
.good-grid.reverse .good-visual{order:2}
.good-grid.reverse .good-content{order:1}

.good-visual{
  position:relative;
  aspect-ratio:1/1.1;
  border-radius:24px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid rgba(43,43,84,0.8);
}
.good-block.bg-mint .good-visual{background:var(--off);border-color:var(--navy)}
.good-block.bg-pink-lt .good-visual{background:var(--pink);border-color:var(--navy)}
.good-block.bg-navy .good-visual{background:var(--mint);border-color:var(--mint)}
.good-block.bg-off .good-visual{background:var(--violet-lt);border-color:var(--navy)}
.good-block.bg-violet .good-visual{background:var(--pink);border-color:var(--pink)}

.good-visual::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.22), transparent 55%),
    radial-gradient(circle at 80% 80%, rgba(0,0,0,0.08), transparent 55%);
  pointer-events:none;
}

.good-num-huge{
  position:relative;z-index:1;
  font-family:var(--display);font-weight:900;
  font-size:clamp(160px,22vw,280px);
  line-height:0.8;letter-spacing:-0.06em;
  color:var(--navy);
}
.good-block.bg-navy .good-num-huge{color:var(--navy-dk)}

.good-visual-tag{
  position:absolute;top:24px;left:24px;
  font-family:var(--display);font-weight:700;font-size:11px;
  letter-spacing:0.16em;text-transform:uppercase;
  padding:6px 12px;border-radius:999px;
  background:var(--navy);color:var(--off);
}
.good-block.bg-navy .good-visual-tag{background:var(--off);color:var(--navy)}
.good-visual-symbol{
  position:absolute;bottom:24px;right:24px;
  font-family:var(--script);font-style:italic;font-weight:700;
  font-size:28px;color:var(--navy);
  transform:rotate(-4deg);
}
.good-block.bg-navy .good-visual-symbol{color:var(--navy-dk)}

/* Service content */
.good-eyebrow{
  font-family:var(--display);font-weight:700;font-size:11px;
  letter-spacing:0.18em;text-transform:uppercase;
  margin-bottom:16px;display:block;
}
.good-block.bg-mint .good-eyebrow{color:var(--pink-dk)}
.good-block.bg-pink-lt .good-eyebrow{color:var(--mint-dk)}
.good-block.bg-navy .good-eyebrow{color:var(--mint)}
.good-block.bg-off .good-eyebrow{color:var(--violet)}
.good-block.bg-violet .good-eyebrow{color:var(--pink)}

.good-title{margin-bottom:20px}
.good-title em{font-style:normal}
.good-block.bg-mint .good-title em,
.good-block.bg-pink-lt .good-title em,
.good-block.bg-off .good-title em{color:var(--navy);opacity:0.55}
.good-block.bg-navy .good-title em,
.good-block.bg-violet .good-title em{color:var(--mint)}

.good-desc{
  font-size:18px;line-height:1.55;margin-bottom:32px;
  max-width:520px;
}
.good-block.bg-mint .good-desc{color:var(--navy);opacity:0.85}
.good-block.bg-pink-lt .good-desc,
.good-block.bg-off .good-desc{color:var(--ink-2)}
.good-block.bg-navy .good-desc{color:rgba(253,249,243,0.78)}
.good-block.bg-violet .good-desc{color:rgba(253,249,243,0.85)}

.good-box{
  background:var(--off);
  border:2px solid var(--navy);
  border-radius:16px;
  padding:24px 26px;
  margin-bottom:16px;
}
.good-block.bg-navy .good-box{background:rgba(253,249,243,0.06);border-color:rgba(253,249,243,0.2)}
.good-block.bg-violet .good-box{background:rgba(253,249,243,0.08);border-color:rgba(253,249,243,0.2)}

.good-box h4{
  font-family:var(--display);font-weight:700;font-size:11px;
  letter-spacing:0.18em;text-transform:uppercase;
  margin-bottom:14px;
}
.good-block.bg-mint .good-box h4{color:var(--mint-dk)}
.good-block.bg-pink-lt .good-box h4{color:var(--pink-dk)}
.good-block.bg-off .good-box h4{color:var(--violet)}
.good-block.bg-navy .good-box h4{color:var(--mint)}
.good-block.bg-violet .good-box h4{color:var(--pink)}

.good-list{list-style:none;display:flex;flex-wrap:wrap;gap:6px 16px}
.good-list li{
  font-size:14.5px;line-height:1.4;
  padding:4px 0;
  display:flex;align-items:center;gap:8px;
}
.good-list li::before{
  content:"◆";font-size:8px;
  color:currentColor;opacity:0.6;
}
.good-block.bg-mint .good-list li,
.good-block.bg-pink-lt .good-list li,
.good-block.bg-off .good-list li{color:var(--ink-2)}
.good-block.bg-navy .good-list li,
.good-block.bg-violet .good-list li{color:rgba(253,249,243,0.85)}
.good-list.split li{flex-basis:calc(50% - 8px)}

.good-ideal{font-size:15px;line-height:1.55}
.good-block.bg-mint .good-ideal,
.good-block.bg-pink-lt .good-ideal,
.good-block.bg-off .good-ideal{color:var(--ink-2)}
.good-block.bg-navy .good-ideal,
.good-block.bg-violet .good-ideal{color:rgba(253,249,243,0.85)}

.good-cta-row{
  display:flex;gap:12px;flex-wrap:wrap;
  margin-top:28px;align-items:center;
}
.good-related{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--display);font-weight:700;font-size:11px;
  letter-spacing:0.14em;text-transform:uppercase;
}
.good-block.bg-mint .good-related,
.good-block.bg-pink-lt .good-related,
.good-block.bg-off .good-related{color:var(--navy)}
.good-block.bg-navy .good-related,
.good-block.bg-violet .good-related{color:var(--mint)}
.good-related em{
  font-style:normal;opacity:0.55;margin-right:4px;
}

.good-meta{
  display:flex;gap:36px;margin-top:32px;padding-top:24px;
  border-top:1px solid rgba(43,43,84,0.15);
}
.good-block.bg-navy .good-meta,
.good-block.bg-violet .good-meta{border-top-color:rgba(253,249,243,0.18)}
.good-meta-item .eyebrow{
  font-size:10px;letter-spacing:0.12em;margin-bottom:4px;opacity:0.6;
}
.good-block.bg-mint .good-meta-item .eyebrow,
.good-block.bg-pink-lt .good-meta-item .eyebrow,
.good-block.bg-off .good-meta-item .eyebrow{color:var(--navy)}
.good-block.bg-navy .good-meta-item .eyebrow,
.good-block.bg-violet .good-meta-item .eyebrow{color:var(--off)}
.good-meta-item strong{
  font-family:var(--display);font-weight:700;font-size:15px;
  letter-spacing:-0.005em;
}
.good-block.bg-mint .good-meta-item strong,
.good-block.bg-pink-lt .good-meta-item strong,
.good-block.bg-off .good-meta-item strong{color:var(--navy)}
.good-block.bg-navy .good-meta-item strong,
.good-block.bg-violet .good-meta-item strong{color:var(--off)}

@media (max-width:900px){
  .good-block{padding:80px 0}
  .good-grid, .good-grid.reverse{grid-template-columns:1fr;gap:40px}
  .good-grid.reverse .good-visual{order:0}
  .good-grid.reverse .good-content{order:1}
  .good-meta{flex-direction:column;gap:16px}
}

/* ----- Testimonial (goods page) ----- */
.testimonial{
  padding:120px 0;
  background:var(--pink-lt);
  position:relative;
  overflow:hidden;
}
.testimonial-inner{max-width:880px;margin:0 auto;text-align:center;position:relative}
.testimonial-mark{
  font-family:var(--display);font-weight:900;font-size:200px;
  line-height:0.5;color:var(--pink);opacity:0.5;
  display:block;margin-bottom:-40px;
}
.testimonial blockquote{
  font-family:var(--display);font-weight:500;
  font-size:clamp(26px,3.5vw,42px);line-height:1.2;
  color:var(--navy);letter-spacing:-0.015em;
  margin-bottom:36px;
}
.testimonial blockquote em{
  font-style:normal;color:var(--pink-dk);
}
.testimonial-attr{
  display:flex;align-items:center;justify-content:center;gap:14px;
}
.testimonial-attr .avatar{
  width:48px;height:48px;border-radius:50%;
  background:var(--mint);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:800;font-size:17px;color:var(--navy);
}
.testimonial-attr-text{
  text-align:left;
  font-family:var(--body);font-size:14px;color:var(--navy);
}
.testimonial-attr-text strong{
  display:block;font-weight:700;font-size:15px;
  font-family:var(--display);letter-spacing:-0.005em;
}
.testimonial-attr-text small{
  display:block;color:var(--ink-3);font-size:13px;margin-top:2px;
}

/* ============================================================
   10. LEGEND PAGE
   ============================================================ */

/* ----- Legend-scoped overrides for the shared .page-hero component -----
   Legend uses a dark navy hero with mint accents and pink script script-em.
   These rules activate only when body has .page-slug-legend (added by the
   popwaffle_body_classes filter in functions.php). The base .page-hero
   rules earlier in this file render the lighter Goods-style hero by default.
------------------------------------------------------------------------- */
body.page-slug-legend .page-hero{background:var(--navy-dk);color:var(--off)}
body.page-slug-legend .page-hero::before{
  width:680px;height:680px;
  background:radial-gradient(circle at 30% 40%, rgba(95,212,180,0.35), transparent 60%);
}
body.page-slug-legend .page-hero::after{
  bottom:-35%;left:-10%;width:560px;height:560px;
  background:radial-gradient(circle at 60% 30%, rgba(245,180,191,0.3), transparent 60%);
}
body.page-slug-legend .page-hero .breadcrumb{color:var(--mint);opacity:0.85}
body.page-slug-legend .page-hero h1{color:var(--off)}
body.page-slug-legend .page-hero h1 em{color:var(--pink);font-size:0.65em;margin-left:-2px}
body.page-slug-legend .page-hero .lead{color:rgba(253,249,243,0.85);max-width:600px;font-size:22px}
body.page-slug-legend .page-hero-meta-col .eyebrow{color:var(--mint);opacity:0.9}
body.page-slug-legend .page-hero-meta-col p{color:var(--off);opacity:0.9}
body.page-slug-legend .page-hero-grid{margin-bottom:32px}

/* ----- Manifesto opener ----- */
.manifesto{
  background:var(--navy-dk);
  color:var(--off);
  padding:40px 0 120px;
  position:relative;
  overflow:hidden;
  border-top:1px solid rgba(253,249,243,0.12);
}
.manifesto-inner{position:relative;display:grid;grid-template-columns:auto 1fr;gap:56px;align-items:start}
.manifesto .label{
  font-family:var(--display);
  font-weight:700;
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--mint);
  padding-top:16px;
  white-space:nowrap;
}
.manifesto-statement{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(26px,3.6vw,42px);
  line-height:1.28;
  letter-spacing:-0.018em;
  color:var(--off);
  max-width:880px;
}
.manifesto-statement em{font-style:normal;color:var(--mint);font-weight:700}
.manifesto-statement strong{font-weight:800;color:var(--pink)}
@media (max-width:760px){
  .manifesto-inner{grid-template-columns:1fr;gap:16px}
  .manifesto{padding:20px 0 80px}
}

/* ----- Story ----- */
.story{padding:120px 0;background:var(--off);position:relative}
.story-head{display:grid;grid-template-columns:auto 1fr auto;gap:40px;align-items:baseline;margin-bottom:48px;padding-bottom:20px;border-bottom:2px solid var(--navy)}
.story-head .chapter{font-family:var(--display);font-weight:900;font-size:clamp(44px,5vw,64px);color:var(--pink-dk);letter-spacing:-0.02em;line-height:1}
.story-head h2{color:var(--navy)}
.story-head h2 em{font-style:normal;color:var(--pink-dk)}
.story-head .since{font-family:var(--script);font-style:italic;font-weight:700;color:var(--mint-dk);font-size:24px;transform:rotate(-3deg);white-space:nowrap}

.story-body{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:start;
}
.story-body p{font-size:18px;line-height:1.65;color:var(--ink-2);margin-bottom:20px}
.story-body p strong{color:var(--navy);font-weight:600}
.story-body p em{font-style:italic;color:var(--navy)}
.story-body p:first-child::first-letter{
  font-family:var(--display);
  font-weight:900;
  font-size:74px;
  float:left;
  line-height:0.85;
  margin:8px 12px 0 0;
  color:var(--mint-dk);
}
.story-pullout{
  background:var(--mint);
  border:2px solid var(--navy);
  border-radius:20px;
  padding:36px;
  position:relative;
  align-self:start;
  margin-top:8px;
  box-shadow:6px 6px 0 var(--navy);
}
.story-pullout .eyebrow{color:var(--navy);opacity:0.75;margin-bottom:16px;display:block}
.story-pullout blockquote{
  font-family:var(--display);
  font-weight:700;
  font-size:24px;
  line-height:1.25;
  color:var(--navy);
  letter-spacing:-0.015em;
  margin-bottom:20px;
}
.story-pullout blockquote em{font-style:normal;color:var(--pink-dk)}
.story-pullout .attr{
  display:flex;align-items:center;gap:12px;
  padding-top:14px;
  border-top:1.5px solid rgba(43,43,84,0.25);
}
.story-pullout .attr-av{
  width:40px;height:40px;border-radius:50%;
  background:var(--navy);color:var(--mint);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:900;font-size:14px;
}
.story-pullout .attr-text{font-family:var(--display);font-size:13px;color:var(--navy);line-height:1.3}
.story-pullout .attr-text strong{display:block;font-weight:700;font-size:14px}
.story-pullout .attr-text small{font-weight:600;opacity:0.65}

@media (max-width:900px){
  .story-body{grid-template-columns:1fr;gap:40px}
  .story-head{grid-template-columns:1fr;gap:12px}
  .story-head .since{transform:rotate(-3deg)}
}

/* ----- Timeline / Greatest Hits ----- */
.timeline{padding:100px 0;background:var(--pink-lt);position:relative;overflow:hidden}
.timeline-head{text-align:center;margin-bottom:56px}
.timeline-head .eyebrow{color:var(--pink-dk);margin-bottom:16px}
.timeline-head h2{color:var(--navy);margin:0 auto;max-width:680px}
.timeline-head h2 em{font-style:normal;color:var(--pink-dk)}

.timeline-track{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:24px;
  position:relative;
}
.timeline-track::before{
  content:"";
  position:absolute;
  top:34px;left:8%;right:8%;
  height:2px;
  background:repeating-linear-gradient(to right, var(--navy) 0, var(--navy) 6px, transparent 6px, transparent 12px);
  z-index:0;
}
.t-step{position:relative;z-index:1;text-align:center}
.t-step .year{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:68px;height:68px;
  border-radius:999px;
  background:var(--off);
  border:2px solid var(--navy);
  font-family:var(--display);
  font-weight:900;
  font-size:15px;
  color:var(--navy);
  letter-spacing:-0.01em;
  margin-bottom:16px;
  transition:transform .25s, background .25s;
}
.t-step:hover .year{transform:translateY(-4px);background:var(--pink)}
.t-step:nth-child(2):hover .year{background:var(--mint)}
.t-step:nth-child(3):hover .year{background:var(--violet-lt);color:var(--paper)}
.t-step:nth-child(4):hover .year{background:var(--pink-dk);color:var(--paper)}
.t-step:nth-child(5):hover .year{background:var(--navy);color:var(--mint)}
.t-step h4{
  font-family:var(--display);
  font-weight:800;
  font-size:15px;
  color:var(--navy);
  letter-spacing:-0.008em;
  line-height:1.15;
  margin-bottom:6px;
}
.t-step p{font-size:13px;color:var(--ink-2);line-height:1.45;max-width:180px;margin:0 auto}

@media (max-width:900px){.timeline-track{grid-template-columns:1fr 1fr;gap:32px 20px}.timeline-track::before{display:none}}
@media (max-width:500px){.timeline-track{grid-template-columns:1fr}}

/* ----- What we believe — vision pillars ----- */
.believe{padding:120px 0;background:var(--off)}
.believe-head{margin-bottom:64px;display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:end;padding-bottom:28px;border-bottom:2px solid var(--navy)}
.believe-head .chapter{font-family:var(--display);font-weight:900;font-size:clamp(44px,5vw,64px);color:var(--mint-dk);letter-spacing:-0.02em;line-height:1}
.believe-head h2{color:var(--navy)}
.believe-head h2 em{font-style:normal;color:var(--mint-dk)}
.believe-head .eyebrow{color:var(--navy);margin-bottom:10px;display:block;opacity:0.6}

.pillars{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.pillar{
  padding:40px;
  border-radius:24px;
  position:relative;
  overflow:hidden;
  min-height:260px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transition:transform .3s ease;
}
.pillar:hover{transform:translateY(-4px)}
.pillar-1{background:var(--mint);color:var(--navy)}
.pillar-2{background:var(--pink);color:var(--navy)}
.pillar-3{background:var(--violet);color:var(--off)}
.pillar-4{background:var(--navy);color:var(--off)}

.pillar .label{
  font-family:var(--display);
  font-weight:700;
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  margin-bottom:12px;
  opacity:0.65;
}
.pillar h3{
  font-family:var(--display);
  font-weight:900;
  font-size:clamp(34px,4vw,52px);
  letter-spacing:-0.025em;
  line-height:0.98;
  margin-bottom:12px;
}
.pillar-3 h3, .pillar-4 h3{color:var(--mint)}
.pillar-1 h3 em, .pillar-2 h3 em{font-style:normal;color:var(--navy);opacity:0.65}
.pillar-3 h3 em, .pillar-4 h3 em{font-style:normal;color:var(--pink)}
.pillar p{font-size:15.5px;line-height:1.5;max-width:400px}
.pillar-1 p, .pillar-2 p{color:var(--navy);opacity:0.8}
.pillar-3 p, .pillar-4 p{color:rgba(253,249,243,0.8)}

.pillar-num{
  font-family:var(--display);
  font-weight:900;
  font-size:120px;
  line-height:0.8;
  letter-spacing:-0.05em;
  position:absolute;
  top:20px;
  right:28px;
  opacity:0.18;
}
.pillar-1 .pillar-num, .pillar-2 .pillar-num{color:var(--navy)}
.pillar-3 .pillar-num, .pillar-4 .pillar-num{color:var(--mint)}

@media (max-width:760px){.pillars{grid-template-columns:1fr}.believe-head{grid-template-columns:1fr;gap:12px}}

/* ----- What we won't do — manifesto ----- */
.wont{padding:120px 0;background:var(--navy-dk);color:var(--off);position:relative;overflow:hidden}
.wont::before{content:"";position:absolute;top:-20%;right:-10%;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle, rgba(245,180,191,0.2), transparent 70%)}
.wont-inner{position:relative}
.wont-head{margin-bottom:60px;display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:end;padding-bottom:28px;border-bottom:2px solid var(--mint)}
.wont-head .chapter{font-family:var(--display);font-weight:900;font-size:clamp(44px,5vw,64px);color:var(--pink);letter-spacing:-0.02em;line-height:1}
.wont-head .eyebrow{color:var(--mint);margin-bottom:10px;display:block}
.wont-head h2{color:var(--off)}
.wont-head h2 em{font-style:normal;color:var(--mint)}

.wont-list{display:grid;grid-template-columns:1fr 1fr;gap:20px 48px}
.wont-item{
  display:flex;align-items:flex-start;gap:20px;
  padding:24px 0;
  border-bottom:1px solid rgba(253,249,243,0.12);
}
.wont-num{
  font-family:var(--display);
  font-weight:900;
  font-size:20px;
  letter-spacing:-0.01em;
  color:var(--pink);
  line-height:1.1;
  min-width:32px;
}
.wont-text h4{
  font-family:var(--display);
  font-weight:800;
  font-size:19px;
  color:var(--off);
  letter-spacing:-0.012em;
  line-height:1.2;
  margin-bottom:6px;
}
.wont-text h4 em{font-style:normal;color:var(--mint);text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:var(--pink);text-underline-offset:2px}
.wont-text p{font-size:14.5px;color:rgba(253,249,243,0.65);line-height:1.5}

@media (max-width:780px){.wont-list{grid-template-columns:1fr;gap:0}.wont-head{grid-template-columns:1fr;gap:12px}}

/* ----- Agency preview CTA (on legend page) ----- */
.agency-preview{padding:120px 0;background:var(--off)}
.agency-preview-inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
  padding:48px;
  border-radius:24px;
  border:2px solid var(--navy);
  background:var(--mint-lt);
}
.agency-preview .eyebrow{color:var(--mint-dk);margin-bottom:16px;display:block}
.agency-preview h2{color:var(--navy);margin-bottom:20px;font-size:clamp(32px,4vw,52px)}
.agency-preview h2 em{font-style:normal;color:var(--pink-dk)}
.agency-preview p{font-size:17px;color:var(--ink-2);margin-bottom:28px;line-height:1.55}

.agency-preview-avatars{display:flex;justify-content:center}
.av-lg{
  width:84px;height:84px;
  border-radius:50%;
  border:3px solid var(--off);
  margin-left:-14px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:900;font-size:26px;
  color:var(--navy);
  box-shadow:4px 4px 0 rgba(43,43,84,0.15);
}
.av-lg:first-child{margin-left:0}
.av-lg.c-mint{background:var(--mint)}
.av-lg.c-pink{background:var(--pink)}
.av-lg.c-violet{background:var(--violet-lt);color:var(--paper)}
.av-lg.c-navy{background:var(--navy);color:var(--mint)}
.av-lg.c-pinkd{background:var(--pink-dk);color:var(--paper)}
.av-lg.c-mintd{background:var(--mint-dk);color:var(--paper)}

/* Principal portrait + network treatment */
.agency-preview-portrait{
  display:flex;flex-direction:column;align-items:center;gap:20px;
  text-align:center;
}
.portrait-duo{
  display:flex;gap:-16px;align-items:center;
}
.portrait-big{
  width:140px;height:140px;
  border-radius:50%;
  border:3px solid var(--navy);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:900;font-size:48px;
  color:var(--navy);
  letter-spacing:-0.03em;
  box-shadow:6px 6px 0 var(--navy);
  position:relative;
}
.portrait-roby{background:var(--mint);z-index:2}
.portrait-rayne{background:var(--pink);margin-left:-24px;z-index:1}
.portrait-role{
  position:absolute;bottom:-10px;
  background:var(--navy);color:var(--mint);
  font-family:var(--display);font-weight:800;font-size:10px;
  letter-spacing:0.18em;text-transform:uppercase;
  padding:5px 10px;border-radius:999px;
  border:2px solid var(--navy);
}
.portrait-rayne .portrait-role{color:var(--pink)}
.portrait-caption{margin-top:20px}
.portrait-caption strong{
  display:block;
  font-family:var(--display);font-weight:800;font-size:20px;
  color:var(--navy);letter-spacing:-0.01em;
}
.portrait-caption small{
  display:block;margin-top:4px;
  font-family:var(--display);font-weight:600;font-size:11px;
  letter-spacing:0.14em;text-transform:uppercase;
  color:var(--pink-dk);
}
.portrait-network{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;
  max-width:320px;
  padding-top:20px;margin-top:8px;
  border-top:1px dashed var(--navy);
}
.network-dot{
  width:32px;height:32px;border-radius:50%;
  background:var(--off);
  border:1.5px solid var(--navy);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:800;font-size:11px;
  color:var(--navy);
}
.network-label{
  flex:1;min-width:140px;
  text-align:left;
  font-family:var(--display);font-weight:600;font-size:12px;
  color:var(--navy);opacity:0.75;line-height:1.4;
}

@media (max-width:780px){.agency-preview-inner{grid-template-columns:1fr;gap:32px;padding:36px 28px}}

/* ============================================================
   11. AGENCY PAGE
   ============================================================ */

/* ----- Agency-scoped overrides for shared .page-hero component -----
   Violet background, mint/pink accents, off-white text. Activated by
   body.page-slug-agency (added by popwaffle_body_classes filter).
------------------------------------------------------------------------ */
body.page-slug-agency .page-hero{background:var(--violet);color:var(--off);padding:80px 0 110px}
body.page-slug-agency .page-hero::before{
  width:600px;height:600px;
  background:radial-gradient(circle at 30% 40%, rgba(95,212,180,0.4), transparent 60%);
}
body.page-slug-agency .page-hero::after{
  bottom:-40%;left:-8%;width:560px;height:560px;
  background:radial-gradient(circle at 60% 30%, rgba(245,180,191,0.4), transparent 60%);
}
body.page-slug-agency .page-hero .breadcrumb{color:var(--mint);opacity:0.85}
body.page-slug-agency .page-hero h1{color:var(--off)}
body.page-slug-agency .page-hero h1 em{color:var(--pink);font-size:0.7em;margin-left:-2px}
body.page-slug-agency .page-hero .lead{color:rgba(253,249,243,0.88);max-width:640px;font-size:22px}
body.page-slug-agency .page-hero-meta-col .eyebrow{color:var(--mint);opacity:0.9}
body.page-slug-agency .page-hero-meta-col p{color:var(--off);opacity:0.9}
body.page-slug-agency .page-hero-grid{margin-bottom:32px}

/* ----- Founder feature card ----- */
.founder{padding:60px 0 120px;background:var(--off)}

.founders-head{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:40px;
  align-items:end;
  margin-bottom:48px;
  padding-bottom:28px;
  border-bottom:2px solid var(--navy);
}
.founders-head .chapter{
  font-family:var(--display);font-weight:900;
  font-size:clamp(44px,5vw,64px);
  color:var(--mint-dk);letter-spacing:-0.02em;line-height:1;
}
.founders-head .eyebrow{color:var(--navy);opacity:0.6;margin-bottom:10px;display:block}
.founders-head h2{color:var(--navy)}
.founders-head h2 em{font-style:normal;color:var(--mint-dk)}
.founders-head .co-tag{
  font-family:var(--script);
  font-style:italic;
  font-weight:700;
  color:var(--pink-dk);
  font-size:22px;
  transform:rotate(-3deg);
  white-space:nowrap;
}

.founder-card{
  border:3px solid var(--navy);
  border-radius:28px;
  padding:56px;
  position:relative;
  box-shadow:12px 12px 0 var(--navy);
  display:grid;
  grid-template-columns:auto 1fr;
  gap:56px;
  align-items:center;
  margin-bottom:40px;
}
.founder-card:last-of-type{margin-bottom:0}

.founder-roby{background:var(--mint)}
.founder-rayne{
  background:var(--pink);
  grid-template-columns:1fr auto;
}
.founder-rayne .founder-portrait{order:2}
.founder-rayne .founder-info{order:1}

.founder-portrait{position:relative}
.founder-avatar{
  width:220px;height:220px;
  border-radius:50%;
  background:var(--navy);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);
  font-weight:900;
  font-size:88px;
  letter-spacing:-0.04em;
  border:4px solid var(--pink);
}
.founder-roby .founder-avatar{color:var(--mint);border-color:var(--pink)}
.founder-rayne .founder-avatar{color:var(--pink);border-color:var(--mint)}

.founder-badge{
  position:absolute;top:8px;right:-10px;
  color:var(--navy);
  font-family:var(--display);font-weight:800;font-size:10px;
  letter-spacing:0.18em;text-transform:uppercase;
  padding:8px 14px;border-radius:999px;
  border:2px solid var(--navy);
  transform:rotate(8deg);
}
.founder-roby .founder-badge{background:var(--pink)}
.founder-rayne .founder-badge{background:var(--mint);top:8px;right:auto;left:-10px;transform:rotate(-8deg)}

.founder-info .eyebrow{color:var(--navy);opacity:0.7;margin-bottom:14px;display:block}
.founder-info h2{
  font-family:var(--display);font-weight:900;
  font-size:clamp(40px,5vw,64px);
  letter-spacing:-0.025em;line-height:0.98;
  color:var(--navy);margin-bottom:28px;
}
.founder-role{
  font-family:var(--display);font-weight:700;
  font-size:15px;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--navy);opacity:0.7;margin-bottom:24px;
}
.founder-role em{
  font-style:normal;font-family:var(--script);font-size:20px;
  text-transform:none;letter-spacing:0;font-weight:700;margin-left:4px;
}
.founder-roby .founder-role em{color:var(--pink-dk)}
.founder-rayne .founder-role em{color:var(--mint-dk)}

/* Template renders bio as a WYSIWYG (the_content-style) wrapped in
   .founder-bio-wrap. The legacy .founder-bio class is kept for mockup
   parity; new dynamic output hits .founder-bio-wrap and its child <p>s. */
.founder-bio,
.founder-bio-wrap{
  font-size:17px;line-height:1.6;
  color:var(--navy);opacity:0.85;
  max-width:640px;
  margin-bottom:36px;
}
.founder-bio strong,
.founder-bio-wrap strong{color:var(--navy);opacity:1;font-weight:600}
.founder-bio-wrap p{margin-bottom:1em}
.founder-bio-wrap p:last-child{margin-bottom:0}

.founder-tags{
  display:flex;gap:8px;flex-wrap:wrap;
  padding-top:28px;
  border-top:2px solid rgba(43,43,84,0.2);
}
.tag-ask{
  background:var(--navy);color:var(--mint);
  font-family:var(--display);font-weight:600;font-size:11px;
  letter-spacing:0.1em;text-transform:uppercase;
  padding:8px 14px;border-radius:999px;
}
.tag-ask strong{color:var(--pink);font-weight:700;margin-right:6px}
.founder-rayne .tag-ask{background:var(--navy);color:var(--pink)}
.founder-rayne .tag-ask strong{color:var(--mint)}

@media (max-width:900px){
  .founder-card, .founder-rayne{grid-template-columns:1fr;padding:40px 32px;text-align:center;gap:32px}
  .founder-rayne .founder-portrait{order:0}
  .founder-rayne .founder-info{order:1}
  .founder-portrait{justify-self:center}
  .founder-bio{margin-left:auto;margin-right:auto}
  .founder-tags{justify-content:center}
  .founder-badge{right:auto;left:50%;transform:translateX(-50%) rotate(6deg);top:-18px}
  .founder-rayne .founder-badge{left:50%;right:auto;transform:translateX(-50%) rotate(-6deg)}
  .founders-head{grid-template-columns:1fr;gap:12px}
}

/* ----- Corporate group ----- */
.corp{padding:120px 0;background:var(--pink-lt)}
.corp-head{
  display:grid;grid-template-columns:auto 1fr auto;gap:40px;
  align-items:end;margin-bottom:56px;
  padding-bottom:28px;border-bottom:2px solid var(--navy);
}
.corp-head .chapter{font-family:var(--display);font-weight:900;font-size:clamp(44px,5vw,64px);color:var(--pink-dk);letter-spacing:-0.02em;line-height:1}
.corp-head .eyebrow{color:var(--navy);opacity:0.6;margin-bottom:10px;display:block}
.corp-head h2{color:var(--navy)}
.corp-head h2 em{font-style:normal;color:var(--pink-dk)}
.corp-head-count{
  font-family:var(--script);font-style:italic;font-weight:700;
  color:var(--pink-dk);font-size:22px;
  transform:rotate(-3deg);white-space:nowrap;
}

.corp-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.member{
  padding:36px;
  border-radius:24px;
  position:relative;
  overflow:hidden;
  transition:transform .25s;
  display:flex;flex-direction:column;gap:20px;
}
.member:hover{transform:translate(-3px,-3px)}
.member-1{background:var(--pink);color:var(--navy);border:2px solid var(--navy);box-shadow:6px 6px 0 var(--navy)}
.member-2{background:var(--violet);color:var(--off);border:2px solid var(--navy);box-shadow:6px 6px 0 var(--navy)}
.member-3{background:var(--navy);color:var(--off);border:2px solid var(--navy);box-shadow:6px 6px 0 var(--mint)}
.member-4{background:var(--mint);color:var(--navy);border:2px solid var(--navy);box-shadow:6px 6px 0 var(--navy)}

.member-top{display:flex;align-items:center;gap:18px}
.member-avatar{
  width:76px;height:76px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:900;font-size:28px;
  letter-spacing:-0.02em;
  border:2px solid var(--navy);
  flex-shrink:0;
}
.member-1 .member-avatar{background:var(--off);color:var(--pink-dk)}
.member-2 .member-avatar{background:var(--pink);color:var(--navy)}
.member-3 .member-avatar{background:var(--mint);color:var(--navy);border-color:var(--mint)}
.member-4 .member-avatar{background:var(--navy);color:var(--mint);border-color:var(--navy)}

.member-identity h3{
  font-family:var(--display);font-weight:800;
  font-size:24px;letter-spacing:-0.015em;line-height:1.05;
  margin-bottom:4px;
}
.member-role{
  font-family:var(--display);font-weight:700;
  font-size:11px;letter-spacing:0.14em;text-transform:uppercase;
  opacity:0.75;
}
.member-bio{
  font-size:15px;line-height:1.6;
  opacity:0.85;
}
.member-1 .member-bio, .member-4 .member-bio{color:var(--navy)}
.member-2 .member-bio, .member-3 .member-bio{color:rgba(253,249,243,0.9)}

.member-ask{
  display:flex;gap:8px;align-items:center;
  padding-top:18px;margin-top:auto;
  border-top:1.5px solid rgba(43,43,84,0.22);
  font-family:var(--display);font-weight:600;font-size:12px;
  letter-spacing:0.1em;text-transform:uppercase;
  opacity:0.85;
}
.member-2 .member-ask, .member-3 .member-ask{border-top-color:rgba(253,249,243,0.2)}
.member-ask .script-tag{
  font-family:var(--script);font-style:italic;font-weight:700;
  font-size:18px;letter-spacing:0;text-transform:none;opacity:1;
}
.member-1 .member-ask .script-tag{color:var(--navy)}
.member-2 .member-ask .script-tag{color:var(--pink)}
.member-3 .member-ask .script-tag{color:var(--mint)}
.member-4 .member-ask .script-tag{color:var(--pink-dk)}

@media (max-width:900px){
  .corp-grid{grid-template-columns:1fr;gap:16px}
  .corp-head{grid-template-columns:1fr;gap:12px}
  .corp-head-count{transform:rotate(-3deg)}
}

/* ----- Creative network ----- */
.network{padding:120px 0;background:var(--navy-dk);color:var(--off);position:relative;overflow:hidden}
.network::before{content:"";position:absolute;top:-20%;right:-10%;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle, rgba(95,212,180,0.25), transparent 70%)}
.network-inner{position:relative}
.network-head{
  display:grid;grid-template-columns:auto 1fr;gap:40px;
  align-items:end;margin-bottom:56px;
  padding-bottom:28px;border-bottom:2px solid var(--mint);
}
.network-head .chapter{font-family:var(--display);font-weight:900;font-size:clamp(44px,5vw,64px);color:var(--mint);letter-spacing:-0.02em;line-height:1}
.network-head .eyebrow{color:var(--mint);margin-bottom:10px;display:block}
.network-head h2{color:var(--off)}
.network-head h2 em{font-style:normal;color:var(--mint)}
.network-subtext{
  font-size:17px;line-height:1.6;
  color:rgba(253,249,243,0.82);
  max-width:720px;margin-bottom:48px;
}

.specialist-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.specialist{
  padding:28px 22px;
  background:rgba(253,249,243,0.06);
  border:1.5px solid rgba(253,249,243,0.14);
  border-radius:18px;
  transition:all .25s;
  display:flex;flex-direction:column;gap:10px;
}
.specialist:hover{background:rgba(253,249,243,0.1);border-color:var(--mint)}
.specialist-mark{
  width:44px;height:44px;border-radius:12px;
  background:var(--mint);color:var(--navy);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:900;font-size:18px;
  letter-spacing:-0.01em;
}
.specialist:nth-child(2) .specialist-mark{background:var(--pink)}
.specialist:nth-child(3) .specialist-mark{background:var(--violet-lt);color:var(--paper)}
.specialist:nth-child(4) .specialist-mark{background:var(--pink-dk);color:var(--paper)}
.specialist h4{
  font-family:var(--display);font-weight:800;font-size:20px;
  color:var(--off);letter-spacing:-0.01em;line-height:1.1;
}
.specialist p{
  font-size:14px;line-height:1.5;
  color:rgba(253,249,243,0.7);
}
.specialist .tag{
  margin-top:auto;
  font-family:var(--display);font-weight:700;font-size:10px;
  letter-spacing:0.14em;text-transform:uppercase;
  color:var(--mint);opacity:0.85;
}

@media (max-width:900px){.specialist-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.specialist-grid{grid-template-columns:1fr}.network-head{grid-template-columns:1fr;gap:12px}}

/* ----- How we work together — engagement stages ----- */
.stages{padding:120px 0;background:var(--off)}
.stages-head{text-align:center;margin-bottom:60px}
.stages-head .eyebrow{color:var(--violet);margin-bottom:14px}
.stages-head h2{color:var(--navy);margin:0 auto;max-width:760px}
.stages-head h2 em{font-style:normal;color:var(--violet)}
.stages-head p{font-size:17px;color:var(--ink-2);max-width:600px;margin:16px auto 0;line-height:1.55}

.stages-table{
  border:2px solid var(--navy);
  border-radius:20px;
  overflow:hidden;
  background:var(--paper);
}
.stage-row{
  display:grid;
  grid-template-columns:140px 200px 1fr;
  gap:24px;
  align-items:center;
  padding:24px 28px;
  border-bottom:1px solid var(--line);
  transition:background .2s;
}
.stage-row:last-child{border-bottom:none}
.stage-row:hover{background:var(--mint-lt)}
.stage-label{
  font-family:var(--display);font-weight:900;
  font-size:22px;color:var(--violet);
  letter-spacing:-0.01em;line-height:1.05;
}
.stage-label small{
  display:block;font-family:var(--display);font-weight:700;
  font-size:10px;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--ink-3);margin-top:2px;
}
.stage-who{display:flex;gap:-8px;align-items:center}
.stage-who .mini{
  width:36px;height:36px;border-radius:50%;
  border:2px solid var(--paper);
  margin-left:-10px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:800;font-size:12px;
  color:var(--navy);
  position:relative;
}
.stage-who .mini:first-child{margin-left:0}
.stage-who .mini.principal{background:var(--mint);border-color:var(--navy);box-shadow:0 0 0 2px var(--navy)}
.stage-who .mini.coo{background:var(--pink);color:var(--navy);border-color:var(--navy);box-shadow:0 0 0 2px var(--navy)}
.stage-who .mini.cfo{background:var(--violet);color:var(--off)}
.stage-who .mini.sales{background:var(--navy);color:var(--mint)}
.stage-who .mini.eng{background:var(--pink-dk);color:var(--off)}
.stage-who .mini.infra{background:var(--mint-dk);color:var(--off)}
.stage-who .mini.network{background:var(--off);border-color:var(--navy);font-size:11px}
.stage-desc{
  font-size:15px;color:var(--ink-2);line-height:1.5;
}
.stage-desc strong{color:var(--navy);font-weight:600}

@media (max-width:860px){
  .stage-row{grid-template-columns:1fr;gap:12px}
  .stage-who{flex-wrap:wrap}
}

/* ----- Stages v2: labeled role pills -----
   Replaces the previous initial-circle chips. Each stage has a left
   gutter with the stage number and a right-side body with heading,
   description, and a row of colored role pills. Lead role gets an
   italic "leads" tag; network specialists use a dashed outline +
   "+ network" italic tag. See _reference/agency-stages-redesign.html.
------------------------------------------------------------------- */
.stages-new{
  background:var(--paper);
  border:2px solid var(--navy);
  border-radius:24px;
  overflow:hidden;
}
.stages-new .stage-new{
  display:grid;
  grid-template-columns:80px 1fr;
  gap:0;
  border-bottom:1px solid var(--line);
}
.stages-new .stage-new:last-child{border-bottom:none}

/* Left gutter: stage number. Hover reveals a colored accent bar. */
.stages-new .stage-num{
  background:var(--off);
  border-right:1px solid var(--line);
  padding:32px 0 32px 24px;
  display:flex;flex-direction:column;
  justify-content:flex-start;
  position:relative;
}
.stages-new .stage-num .n{
  font-family:var(--display);font-weight:900;
  font-size:36px;color:var(--violet);
  letter-spacing:-0.03em;line-height:0.9;
}
.stages-new .stage-num .l{
  font-family:var(--display);font-weight:700;
  font-size:9px;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--ink-3);margin-top:6px;
}
.stages-new .stage-num::before{
  content:"";position:absolute;top:0;left:0;
  width:4px;height:100%;
  background:var(--violet);
  opacity:0;transition:opacity .25s;
}
.stages-new .stage-new:hover .stage-num::before{opacity:1}

/* Right side — stage content */
.stages-new .stage-body{
  padding:28px 32px;
  display:flex;flex-direction:column;gap:14px;
}
.stages-new .stage-head{
  display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;
}
.stages-new .stage-name{
  font-family:var(--display);font-weight:900;
  font-size:24px;color:var(--navy);
  letter-spacing:-0.02em;line-height:1;
}
.stages-new .stage-name-sub{
  font-family:var(--script);font-style:italic;font-weight:700;
  font-size:18px;color:var(--ink-3);line-height:1;
}

/* Override the old .stage-desc rule for new markup. */
.stages-new .stage-desc{
  font-size:15px;color:var(--ink-2);
  line-height:1.55;max-width:680px;
}
.stages-new .stage-desc strong{color:var(--navy);font-weight:600}

/* Roles row */
.stages-new .stage-roles{
  display:flex;align-items:center;flex-wrap:wrap;gap:6px;
  padding-top:14px;
  border-top:1px dashed var(--line);
  margin-top:4px;
}
.stages-new .stage-roles-label{
  font-family:var(--display);font-weight:700;
  font-size:10px;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--ink-3);margin-right:8px;flex-shrink:0;
}

/* Role pills */
.role-pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px 6px 8px;
  border-radius:999px;
  font-family:var(--display);font-weight:700;
  font-size:11px;letter-spacing:0.06em;text-transform:uppercase;
  border:1.5px solid transparent;
  transition:transform .2s;
}
.role-pill:hover{transform:translateY(-1px)}
.role-pill::before{
  content:"";width:8px;height:8px;
  border-radius:50%;flex-shrink:0;
}

/* Solid-fill color variants for core roles */
.role-pill.creative       {background:var(--mint);    color:var(--navy); border-color:var(--navy)}
.role-pill.creative::before{background:var(--navy)}
.role-pill.operations     {background:var(--pink);    color:var(--navy); border-color:var(--navy)}
.role-pill.operations::before{background:var(--navy)}
.role-pill.finance        {background:var(--violet);  color:var(--off);  border-color:var(--violet)}
.role-pill.finance::before{background:var(--off)}
.role-pill.sales          {background:var(--navy);    color:var(--mint); border-color:var(--navy)}
.role-pill.sales::before  {background:var(--mint)}
.role-pill.engineering    {background:var(--pink-dk); color:var(--off);  border-color:var(--pink-dk)}
.role-pill.engineering::before{background:var(--off)}
.role-pill.infrastructure {background:var(--mint-dk); color:var(--off);  border-color:var(--mint-dk)}
.role-pill.infrastructure::before{background:var(--off)}

/* Network specialists — dashed outline signals "external brought in" */
.role-pill.network{
  background:transparent;
  color:var(--navy);
  border:1.5px dashed var(--navy);
}
.role-pill.network::before{background:var(--navy)}
.role-pill.network::after{
  content:"+ network";margin-left:6px;
  font-family:var(--script);font-style:italic;font-weight:700;
  font-size:13px;letter-spacing:0;text-transform:none;
  color:var(--ink-3);opacity:0.85;
}

/* Lead role indicator — italic "leads" tag on the driving role */
.role-pill.lead{position:relative}
.role-pill.lead::after{
  content:"leads";margin-left:6px;
  font-family:var(--script);font-style:italic;font-weight:700;
  font-size:13px;letter-spacing:0;text-transform:none;
  opacity:0.75;
}
.role-pill.creative.lead::after       {color:var(--navy)}
.role-pill.operations.lead::after     {color:var(--navy)}
.role-pill.sales.lead::after          {color:var(--mint)}
.role-pill.engineering.lead::after    {color:var(--off)}
.role-pill.infrastructure.lead::after {color:var(--off)}

@media (max-width:760px){
  .stages-new .stage-new{grid-template-columns:1fr}
  .stages-new .stage-num{
    border-right:none;border-bottom:1px solid var(--line);
    padding:18px 24px;flex-direction:row;
    align-items:baseline;gap:12px;
  }
  .stages-new .stage-num .n{font-size:28px}
  .stages-new .stage-num .l{margin-top:0}
  .stages-new .stage-body{padding:24px}
  .stages-new .stage-roles{padding-top:12px}
  .stages-new .stage-roles-label{display:block;width:100%;margin-bottom:4px}
}

/* ============================================================
   12. CRED / CASE STUDY
   ============================================================ */

/* ----- Cred-scoped overrides for shared .page-hero component -----
   Pink background, violet script-em. Activated on the case_study archive
   (URL /cred/) via WordPress's auto .post-type-archive-case_study body class.
------------------------------------------------------------------------ */
body.post-type-archive-case_study .page-hero{background:var(--pink);padding:80px 0 100px}
body.post-type-archive-case_study .page-hero::before{
  width:600px;height:600px;
  background:radial-gradient(circle at 30% 40%, rgba(255,255,255,0.32), transparent 60%);
}
body.post-type-archive-case_study .page-hero::after{
  bottom:-40%;left:-8%;width:500px;height:500px;
  background:radial-gradient(circle at 60% 30%, rgba(95,212,180,0.3), transparent 60%);
}
body.post-type-archive-case_study .page-hero h1 em{color:var(--violet);font-size:0.7em;margin-left:-4px}
body.post-type-archive-case_study .page-hero .lead{font-size:20px;color:var(--navy);opacity:0.82;max-width:560px}
body.post-type-archive-case_study .page-hero-grid{margin-bottom:40px}

/* ----- Stat strip ----- */
.stats{
  background:var(--navy);
  color:var(--off);
  padding:36px 0;
  border-top:2px solid var(--navy);
  border-bottom:2px solid var(--navy);
}
.stats-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:32px;
  align-items:center;
}
.stat-item{
  display:flex;
  flex-direction:column;
  gap:6px;
  border-right:1px solid rgba(253,249,243,0.18);
  padding-right:32px;
}
.stat-item:last-child{border-right:none}
.stat-item .label{font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--mint)}
.stat-item .value{font-family:var(--display);font-weight:900;font-size:32px;letter-spacing:-0.02em;line-height:1}
.stat-item .value em{font-style:normal;color:var(--pink)}
.stat-item .sub{font-size:13px;color:rgba(253,249,243,0.65);line-height:1.4}
@media (max-width:780px){.stats-grid{grid-template-columns:1fr 1fr;gap:24px}.stat-item{border-right:none;padding-right:0}}

/* ----- Case study section wrappers ----- */
.case-section{padding:80px 0 120px}
.case-section.bg-off{background:var(--off)}
.case-section.bg-pink-lt{background:var(--pink-lt)}

/* ----- Case hero band ----- */
.case-hero{
  border-radius:24px;
  padding:60px 56px;
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:1fr auto;
  gap:40px;
  align-items:end;
  min-height:440px;
  margin-bottom:60px;
  /* Side margin keeps the rounded hero from touching screen edges.
     clamp() = at least 12px on mobile, 2% of viewport in mid, capped
     at 40px on huge monitors so the hero doesn't drift too narrow. */
  margin-left:clamp(12px,2vw,40px);
  margin-right:clamp(12px,2vw,40px);
}

/* .case-hero-custom — used by the dynamic single-case_study.php template
   (as opposed to the mockup's fixed .case-hero-1/-2/-3/-bbl variants).
   Provides sensible sizing for the mark image and readable text defaults.
   Most case studies pick a dark brand-primary for hero_bg_color, so we
   default all hero text to --off (paper). Cases with a light hero_bg
   can add a body class or inline override to flip text back to navy. */
.case-hero-custom{color:var(--off)}
.case-hero-custom .h-case,
.case-hero-custom .case-hero-info h2,
.case-hero-custom .case-hero-corner,
.case-hero-custom .case-hero-mark-wordmark{color:var(--off)}
.case-hero-custom .case-tag{background:rgba(253,249,243,0.14);color:var(--off)}
.case-hero-custom .case-hero-meta-item .label{color:rgba(253,249,243,0.55)}
.case-hero-custom .case-hero-meta-item .value{color:var(--off)}
.case-hero-custom .case-hero-meta-row{border-top-color:rgba(253,249,243,0.2)}

/* The .case-hero-corner counter ("Case study · 02 / 02") and the .case-tag
   engagement pill both land near the top of the hero. On dynamic cases
   they end up overlapping at the top-left — the counter is decorative
   and the pill carries the more useful info, so the counter is hidden here.
   If the counter is wanted back, reposition it (e.g. top-right) rather
   than un-hiding it in place. */
.case-hero-custom .case-hero-corner{display:none}

.case-hero-custom .case-hero-mark-img{
  /* ~25% of viewport width, clamped so it stays readable on small screens
     and doesn't balloon past usable size on huge monitors. */
  width:clamp(220px,25vw,420px);
  height:auto;
  display:block;
}
.case-hero-custom .case-hero-mark-wrap{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
  /* margin-bottom:auto pins the wrap to the top of its grid cell.
     margin-top gives breathing room below the absolute .case-hero-corner
     label so the mark image doesn't crowd it. */
  margin-top:48px;
  margin-bottom:auto;
}
.case-hero-1{background:var(--mint);color:var(--navy)}
.case-hero-2{
  background:linear-gradient(135deg, #1a1f3a 0%, #0e1328 100%);
  color:var(--off);
}
.case-hero-3{background:var(--navy);color:var(--off)}

/* Real-asset case hero (77 Tango) */
.case-hero-real-mark{
  width:clamp(140px,18vw,220px);
  height:auto;
  margin-bottom:24px;
  filter:drop-shadow(4px 4px 0 rgba(0,0,0,0.25));
}
.case-hero-2 .case-hero-mark{color:#ff5c35;line-height:1;font-size:clamp(72px,8vw,100px);font-weight:900;letter-spacing:-0.03em}
.case-hero-2 .case-hero-mark .wordmark{
  display:block;font-family:var(--display);font-weight:500;
  font-size:0.3em;letter-spacing:-0.01em;margin-top:14px;color:var(--off);
  opacity:0.9;
}
.case-hero-2 .case-tag{background:#ff5c35;color:var(--navy-dk)}
.case-hero-2 .client em{color:#ff5c35}
.case-hero-2 .case-hero-meta-row{border-top-color:rgba(253,249,243,0.18)}
.case-hero-2 .case-hero-bottom-corner{color:#ff5c35}
.case-hero-2 .case-hero-corner{color:#ff5c35;opacity:0.8}

.case-hero-mark{
  font-family:var(--display);
  font-weight:900;
  font-size:clamp(120px,18vw,240px);
  line-height:0.85;
  letter-spacing:-0.06em;
  margin-bottom:auto;
}
.case-hero-1 .case-hero-mark{color:var(--navy)}
.case-hero-2 .case-hero-mark{color:var(--navy)}
.case-hero-3 .case-hero-mark{color:var(--mint)}

.case-hero-info{
  text-align:right;
  display:flex;
  flex-direction:column;
  gap:16px;
  padding-bottom:10px;
}
.case-hero-info .case-tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 14px;
  border-radius:999px;
  font-family:var(--display);
  font-weight:700;
  font-size:11px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  align-self:flex-end;
}
.case-hero-1 .case-tag{background:var(--navy);color:var(--mint)}
.case-hero-2 .case-tag{background:var(--navy);color:var(--pink)}
.case-hero-3 .case-tag{background:var(--mint);color:var(--navy)}

.case-hero-info h2{margin:0}
.case-hero-info .client{
  font-family:var(--display);
  font-weight:800;
  font-size:28px;
  letter-spacing:-0.01em;
  line-height:1;
}
.case-hero-info .client em{font-style:normal}
.case-hero-1 .client em, .case-hero-2 .client em{color:var(--navy);opacity:0.6}
.case-hero-3 .client em{color:var(--mint)}

.case-hero-meta-row{
  display:flex;
  gap:24px;
  padding-top:16px;
  border-top:2px solid rgba(43,43,84,0.25);
  justify-content:flex-end;
}
.case-hero-3 .case-hero-meta-row{border-top-color:rgba(253,249,243,0.25)}
.case-hero-meta-item{display:flex;flex-direction:column;gap:2px;text-align:right}
.case-hero-meta-item .label{
  font-family:var(--display);
  font-weight:700;
  font-size:10px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  opacity:0.65;
}
.case-hero-meta-item .value{
  font-family:var(--display);
  font-weight:700;
  font-size:14px;
  letter-spacing:-0.01em;
}

.case-hero-corner{
  position:absolute;
  top:24px;left:24px;
  font-family:var(--display);
  font-weight:700;
  font-size:12px;
  letter-spacing:0.18em;
  opacity:0.55;
}
.case-hero-bottom-corner{
  position:absolute;
  bottom:20px;right:28px;
  font-family:var(--script);
  font-style:italic;
  font-weight:700;
  font-size:24px;
  transform:rotate(-3deg);
  opacity:0.55;
}
.case-hero-1 .case-hero-bottom-corner{color:var(--navy)}
.case-hero-2 .case-hero-bottom-corner{color:var(--navy)}
.case-hero-3 .case-hero-bottom-corner{color:var(--pink)}

/* Pattern decorations per case */
.case-hero-pattern{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0.18;
}

@media (max-width:900px){
  .case-hero{grid-template-columns:1fr;gap:32px;padding:40px 32px;min-height:auto}
  .case-hero-info{text-align:left}
  .case-hero-info .case-tag{align-self:flex-start}
  .case-hero-meta-row{justify-content:flex-start}
  .case-hero-meta-item{text-align:left}
}

/* ----- Case body (Challenge · Approach · Outcome) ----- */
.case-body-head{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:24px;
  align-items:baseline;
  margin-bottom:40px;
  padding-bottom:20px;
  border-bottom:2px solid var(--navy);
}
.case-body-head .label-num{
  font-family:var(--display);
  font-weight:900;
  font-size:28px;
  letter-spacing:-0.01em;
  color:var(--mint-dk);
}
.case-body-head h3{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(24px,3vw,34px);
  line-height:1.1;
  letter-spacing:-0.018em;
  color:var(--navy);
}
.case-body-head h3 em{font-style:normal;color:var(--pink-dk)}

.case-narrative{
  display:grid;
  /* minmax(0,1fr) prevents min-content in one block from forcing columns
     wider than 1/3 share (which was pushing outcome to a new row). */
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:40px;
  margin-bottom:60px;
  align-items:start;
}
.narrative-block{display:flex;flex-direction:column;gap:14px}
.narrative-block .label{
  font-family:var(--display);
  font-weight:700;
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--pink-dk);
  padding-bottom:10px;
  border-bottom:1px solid var(--navy);
}
.case-3-body .narrative-block .label{color:var(--mint-dk)}
.narrative-block h4{
  font-family:var(--display);
  font-weight:800;
  font-size:20px;
  color:var(--navy);
  letter-spacing:-0.01em;
  line-height:1.15;
}
.narrative-block p{font-size:15.5px;color:var(--ink-2);line-height:1.6}
@media (max-width:900px){.case-narrative{grid-template-columns:1fr;gap:28px}}

/* ----- Real-asset mockup gallery (77 Tango) ----- */
.case-gallery{
  margin-bottom:60px;
}
.case-gallery-head{
  display:flex;align-items:baseline;justify-content:space-between;
  margin-bottom:20px;padding-bottom:14px;
  border-bottom:2px solid var(--navy);
}
.case-gallery-head .eyebrow{color:var(--navy)}
.case-gallery-head .count{
  font-family:var(--script);font-style:italic;font-weight:700;
  color:#ff5c35;font-size:22px;transform:rotate(-3deg);
}

.gallery-grid{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  grid-auto-rows:minmax(180px, auto);
  gap:16px;
}
.gallery-item{
  border-radius:16px;
  overflow:hidden;
  border:2px solid var(--navy);
  position:relative;
  background:var(--paper);
  transition:transform .3s ease, box-shadow .3s ease;
  display:flex;align-items:center;justify-content:center;
}
.gallery-item:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--navy)}
.gallery-item img{width:100%;height:100%;object-fit:cover;display:block}
.gallery-item-caption{
  position:absolute;
  left:16px;bottom:16px;
  background:var(--navy);color:var(--off);
  font-family:var(--display);font-weight:700;font-size:10px;
  letter-spacing:0.14em;text-transform:uppercase;
  padding:6px 12px;border-radius:999px;
}

/* Grid placement — 6-col editorial rhythm
   Two naming schemes co-exist:
   1. Semantic (.g-cards, .g-mark, .g-system, .g-letterhead, .g-wordmark) —
      used by the 77 Tango / BBL mockups directly.
   2. Technical (.g-large-4x2, .g-medium-4x1, .g-letterhead-2x2, .g-small-2x1) —
      produced by the ACF grid_span select on case_study. The technical
      classes are what dynamic posts use via the single-case_study.php template. */
.g-cards{grid-column:span 4;grid-row:span 2}
.g-mark{grid-column:span 2;grid-row:span 1;background:var(--navy-dk)}
.g-mark img{width:50%;height:auto;object-fit:contain}
.g-swatches{grid-column:span 2;grid-row:span 1;background:var(--paper);padding:20px;flex-direction:column;gap:10px}
.g-system{grid-column:span 4;grid-row:span 2}
.g-letterhead{grid-column:span 2;grid-row:span 2}
.g-wordmark{
  grid-column:span 4;grid-row:span 1;
  background:var(--paper);
  padding:24px 40px;
}
.g-wordmark img{max-width:100%;max-height:80px;width:auto;object-fit:contain}

/* ACF-driven grid_span values. Fallback to small-2x1 if unset. */
.g-large-4x2     {grid-column:span 4;grid-row:span 2}
.g-medium-4x1    {grid-column:span 4;grid-row:span 1}
.g-letterhead-2x2{grid-column:span 2;grid-row:span 2}
.g-small-2x1     {grid-column:span 2;grid-row:span 1}

/* Gallery items are <button> in the dynamic template so they can open the
   lightbox. Button defaults would break the visual styling — override here. */
.gallery-item{padding:0;font:inherit;cursor:zoom-in}
.gallery-item:focus-visible{outline:3px solid var(--mint);outline-offset:3px}

/* Standalone palette section (separated from the gallery in the dynamic
   single-case_study.php template — gives the palette its own visual break).
   Header styled to match .case-gallery-head so both sections read at the
   same hierarchy level and align to the same left edge as the rest of
   the case body. */
.case-palette{
  margin-top:60px;
  margin-bottom:60px;
}
.case-palette-head{
  display:flex;align-items:baseline;justify-content:space-between;
  margin-bottom:20px;padding-bottom:14px;
  border-bottom:2px solid var(--navy);
}
.case-palette-head .eyebrow{color:var(--navy)}

/* Color swatch panel */
.swatches{
  display:flex;gap:8px;width:100%;align-items:stretch;height:100%;
}
.case-palette .swatch{min-height:140px}
.swatch{
  flex:1;border-radius:8px;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:12px;min-height:120px;
  font-family:var(--display);font-weight:700;
  font-size:10px;letter-spacing:0.1em;text-transform:uppercase;
}
.swatch-navy{background:#0e1328;color:#ff5c35}
.swatch-orange{background:#ff5c35;color:#0e1328}
.swatch-label-box{
  position:absolute;top:16px;left:16px;
  font-family:var(--display);font-weight:700;font-size:10px;
  letter-spacing:0.14em;text-transform:uppercase;
  color:var(--navy);opacity:0.6;
}

@media (max-width:900px){
  .gallery-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:minmax(160px,auto)}
  .g-cards, .g-system, .g-letterhead, .g-wordmark{grid-column:span 2;grid-row:span 1}
  .g-mark, .g-swatches{grid-column:span 1;grid-row:span 1}
  .g-cards, .g-system, .g-letterhead{min-height:220px}
  /* ACF-driven spans also collapse on mobile. */
  .g-large-4x2, .g-medium-4x1, .g-letterhead-2x2{grid-column:span 2;grid-row:span 1;min-height:220px}
  .g-small-2x1{grid-column:span 1;grid-row:span 1}
}
@media (max-width:520px){
  .gallery-grid{grid-template-columns:1fr}
  .g-mark, .g-swatches{grid-column:span 1}
  .g-large-4x2, .g-medium-4x1, .g-letterhead-2x2, .g-small-2x1{grid-column:span 1}
}

/* ----- Deliverables grid ----- */
.deliverables{
  margin-bottom:60px;
}
.deliverables-head{
  display:flex;align-items:baseline;justify-content:space-between;
  margin-bottom:20px;padding-bottom:14px;
  border-bottom:2px solid var(--navy);
}
.deliverables-head .eyebrow{color:var(--navy)}
.deliverables-head .count{
  font-family:var(--script);
  font-style:italic;
  font-weight:700;
  color:var(--pink-dk);
  font-size:24px;
  transform:rotate(-3deg);
}

.deliverables-grid{
  display:grid;
  /* minmax(0,1fr) lets cells shrink BELOW their min-content width — without
     this, long unbreakable uppercase text in deliverable subtitles forces
     cells wider than 1/4 of the container and the row overflows. */
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}
.deliverable{min-width:0}
.deliverable h5, .deliverable small{overflow-wrap:anywhere}
.deliverable{
  /* Removed aspect-ratio: grid rows natively stretch cells to the tallest
     item's content. aspect-ratio was pinning each card to a width-based
     square, causing short-content cards to stay short in a row of tall ones.
     min-height preserves a reasonable card size when all content is brief. */
  min-height:260px;
  background:var(--paper);
  border:2px solid var(--navy);
  border-radius:16px;
  padding:20px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transition:transform .25s, box-shadow .25s;
}
.deliverable:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--navy)}
.deliverable .num{
  font-family:var(--display);
  font-weight:900;
  font-size:32px;
  letter-spacing:-0.02em;
  line-height:1;
}
.case-1-body .deliverable .num{color:var(--mint-dk)}
.case-2-body .deliverable .num{color:var(--pink-dk)}
.case-3-body .deliverable .num{color:var(--violet)}
.deliverable h5{
  font-family:var(--display);
  font-weight:800;
  font-size:15px;
  color:var(--navy);
  line-height:1.15;
  letter-spacing:-0.008em;
}
.deliverable small{
  display:block;
  font-family:var(--display);
  font-weight:600;
  font-size:10px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin-top:4px;
}

/* Accent deliverable */
.deliverable.accent{background:var(--navy);color:var(--off);border-color:var(--navy)}
.deliverable.accent h5{color:var(--off)}
.deliverable.accent small{color:rgba(253,249,243,0.6)}
.case-1-body .deliverable.accent .num{color:var(--mint)}
.case-2-body .deliverable.accent .num{color:var(--pink)}
.case-3-body .deliverable.accent .num{color:var(--mint)}

@media (max-width:900px){.deliverables-grid{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.deliverables-grid{grid-template-columns:1fr 1fr;gap:12px}}

/* ----- Pull quote ----- */
.pullquote{
  padding:60px 48px;
  border-radius:20px;
  margin-bottom:40px;
  position:relative;
  overflow:hidden;
}
.pullquote.pq-mint{background:var(--mint);color:var(--navy)}
.pullquote.pq-pink{background:var(--pink);color:var(--navy)}
.pullquote.pq-navy{background:var(--navy);color:var(--off)}
.pullquote::before{
  content:"\201C";
  position:absolute;
  top:-40px;left:24px;
  font-family:var(--display);
  font-weight:900;
  font-size:220px;
  line-height:1;
  opacity:0.28;
}
.pullquote.pq-mint::before{color:var(--navy)}
.pullquote.pq-pink::before{color:var(--navy)}
.pullquote.pq-navy::before{color:var(--mint)}

.pullquote blockquote{
  position:relative;
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(22px,2.8vw,32px);
  line-height:1.3;
  letter-spacing:-0.015em;
  max-width:780px;
  margin-bottom:28px;
}
.pullquote blockquote em{font-style:normal}
.pullquote.pq-mint blockquote em, .pullquote.pq-pink blockquote em{color:var(--navy);text-decoration:underline;text-decoration-color:rgba(43,43,84,0.3);text-underline-offset:4px}
.pullquote.pq-navy blockquote em{color:var(--mint)}

.pullquote-attr{
  display:flex;align-items:center;gap:14px;
  padding-top:24px;
  border-top:1.5px solid rgba(43,43,84,0.2);
  max-width:560px;
}
.pullquote.pq-navy .pullquote-attr{border-top-color:rgba(253,249,243,0.18)}
.pullquote-attr .avatar{
  width:48px;height:48px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:900;font-size:17px;
}
.pullquote.pq-mint .pullquote-attr .avatar{background:var(--navy);color:var(--mint)}
.pullquote.pq-pink .pullquote-attr .avatar{background:var(--navy);color:var(--pink)}
.pullquote.pq-navy .pullquote-attr .avatar{background:var(--mint);color:var(--navy)}
.pullquote-attr-text strong{
  display:block;
  font-family:var(--display);
  font-weight:700;
  font-size:15px;
  letter-spacing:-0.005em;
}
.pullquote-attr-text small{
  display:block;
  font-size:13px;
  opacity:0.7;
  margin-top:2px;
}

@media (max-width:700px){
  .pullquote{padding:40px 28px 36px}
  .pullquote::before{font-size:160px;top:-28px;left:18px}
}

/* ----- Case footer (nav to next) ----- */
.case-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  padding:24px 0;
  margin-top:40px;
  border-top:1px solid var(--line);
}
.case-footer .back{
  font-family:var(--display);
  font-weight:700;
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ink-3);
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.case-footer .back:hover{color:var(--navy)}
.case-footer .next{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:14px 24px;
  border:2px solid var(--navy);
  border-radius:999px;
  font-family:var(--display);
  font-weight:700;
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--navy);
  transition:all .25s;
}
.case-footer .next:hover{background:var(--navy);color:var(--off)}
.case-footer .next em{
  font-style:normal;
  font-family:var(--script);
  font-size:17px;
  letter-spacing:0;
  text-transform:none;
  color:var(--pink-dk);
  font-weight:600;
  margin-right:4px;
}
@media (max-width:640px){.case-footer{flex-direction:column;align-items:flex-start;gap:14px}}

/* ----- BBL-specific case styling ----- */

/* Crimson hero variant for case 1 */
.case-hero-bbl{
  background:
    radial-gradient(circle at 20% 30%, rgba(0,0,0,0.15), transparent 55%),
    #7a1722;
  color:#f4ece3;
  position:relative;
}
.case-hero-bbl::after{
  /* ink splatter texture via css */
  content:"";
  position:absolute;inset:0;
  background-image:
    radial-gradient(circle at 78% 22%, rgba(244,236,227,0.12) 2px, transparent 3px),
    radial-gradient(circle at 86% 38%, rgba(244,236,227,0.08) 4px, transparent 5px),
    radial-gradient(circle at 72% 58%, rgba(0,0,0,0.18) 3px, transparent 4px),
    radial-gradient(circle at 90% 72%, rgba(0,0,0,0.15) 5px, transparent 6px);
  pointer-events:none;
  mix-blend-mode:multiply;
}
.case-hero-bbl .case-hero-mark-img{
  width:clamp(160px, 20vw, 260px);
  height:auto;
  filter: drop-shadow(4px 4px 0 rgba(0,0,0,0.25));
}
.case-hero-bbl .case-tag{background:#f4ece3;color:#7a1722}
.case-hero-bbl .case-hero-mark-wordmark{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(18px,1.6vw,22px);
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:#f4ece3;
  opacity:0.85;
  margin-top:24px;
  font-style:italic;
  position:relative;
}
.case-hero-bbl .case-hero-meta-row{border-top-color:rgba(244,236,227,0.25)}
.case-hero-bbl .case-hero-bottom-corner{color:#f4ece3;opacity:0.75}
.case-hero-bbl .case-hero-corner{color:#f4ece3;opacity:0.65}
.case-hero-bbl .client em{color:#f4ece3;opacity:0.65}

/* Crimson-tinted body head for BBL */
.bbl-body .case-body-head{border-bottom-color:#7a1722}
.bbl-body .case-body-head .label-num{color:#7a1722}
.bbl-body .case-body-head h3 em{color:#7a1722}
.bbl-body .narrative-block .label{color:#7a1722;border-bottom-color:#7a1722}

/* Logo evolution band */
.evolution{
  margin-bottom:60px;
  padding:40px 48px;
  background:#faf5ec;
  border:2px solid #1a2438;
  border-radius:20px;
  position:relative;
}
.evolution-head{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:28px;padding-bottom:16px;
  border-bottom:2px dashed #1a2438;
  flex-wrap:wrap;gap:12px;
}
.evolution-head .eyebrow{color:#1a2438}
.evolution-head .note{
  font-family:var(--script);font-style:italic;font-weight:700;
  color:#c7603a;font-size:22px;transform:rotate(-3deg);
}
.evolution-image{
  width:100%;height:auto;display:block;
}
.evolution-caption{
  margin-top:20px;padding-top:16px;
  border-top:1px dashed rgba(26,36,56,0.3);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
}
.evolution-caption p{
  font-family:var(--display);font-weight:600;font-size:13px;
  color:#1a2438;letter-spacing:0.04em;line-height:1.45;max-width:640px;
}
.evolution-caption strong{color:#7a1722;font-weight:800;text-transform:uppercase;letter-spacing:0.08em;font-size:11px;display:block;margin-bottom:4px}

/* Direction comparison split */
.directions{margin-bottom:60px}
.directions-head{
  display:grid;grid-template-columns:auto 1fr;gap:40px;
  align-items:end;margin-bottom:28px;
  padding-bottom:16px;border-bottom:2px solid #7a1722;
}
.directions-head .eyebrow{color:#7a1722;margin-bottom:10px;display:block}
.directions-head h3{
  font-family:var(--display);font-weight:800;font-size:clamp(22px,2.8vw,32px);
  line-height:1.1;letter-spacing:-0.018em;color:var(--navy);
}
.directions-head h3 em{font-style:normal;color:#7a1722}

.directions-split{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;
}
.direction{
  border-radius:20px;border:2px solid var(--navy);
  overflow:hidden;position:relative;
  box-shadow:6px 6px 0 var(--navy);
  display:flex;flex-direction:column;
}
.direction-visual{
  aspect-ratio:4/3;
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
}
.direction-stamp .direction-visual{background:#f4ece3}
.direction-stamp .direction-visual img{width:52%;height:auto;max-height:75%}
.direction-finance .direction-visual{
  background:linear-gradient(135deg, #1a2438 0%, #2c3954 100%);
  padding:32px;
}
.direction-finance .direction-visual img{max-height:75%;width:auto;max-width:80%}

.direction-label{
  position:absolute;top:16px;left:16px;
  font-family:var(--display);font-weight:700;font-size:10px;
  letter-spacing:0.16em;text-transform:uppercase;
  padding:6px 12px;border-radius:999px;
}
.direction-stamp .direction-label{background:#7a1722;color:#f4ece3}
.direction-finance .direction-label{background:#c7603a;color:#1a2438}

.direction-status{
  position:absolute;top:16px;right:16px;
  font-family:var(--script);font-style:italic;font-weight:700;
  font-size:20px;
  transform:rotate(-5deg);
}
.direction-stamp .direction-status{color:#7a1722}
.direction-finance .direction-status{color:rgba(244,236,227,0.8)}

.direction-body{
  padding:24px 28px;background:var(--paper);flex:1;
}
.direction-body h4{
  font-family:var(--display);font-weight:800;font-size:20px;
  color:var(--navy);margin-bottom:8px;letter-spacing:-0.015em;line-height:1.1;
}
.direction-body h4 em{font-style:normal}
.direction-stamp .direction-body h4 em{color:#7a1722}
.direction-finance .direction-body h4 em{color:#c7603a}
.direction-body p{font-size:14px;color:var(--ink-2);line-height:1.5}
.direction-tags{
  display:flex;gap:6px;margin-top:14px;padding-top:12px;
  border-top:1px dashed var(--line);flex-wrap:wrap;
}
.direction-tag{
  font-family:var(--display);font-weight:700;font-size:10px;
  letter-spacing:0.12em;text-transform:uppercase;
  padding:5px 10px;border-radius:999px;
  background:rgba(26,36,56,0.08);color:var(--navy);
}
.direction-stamp .direction-tag{background:rgba(122,23,34,0.1);color:#7a1722}
.direction-finance .direction-tag{background:rgba(199,96,58,0.12);color:#c7603a}

@media (max-width:820px){
  .directions-split{grid-template-columns:1fr}
  .directions-head{grid-template-columns:1fr;gap:8px}
}

/* BBL gallery — parchment/kraft tones */
.bbl-gallery .gallery-item{border-color:#1a2438}
.bbl-gallery .gallery-item-caption{background:#7a1722;color:#f4ece3}
.bbl-gallery .case-gallery-head{border-bottom-color:#7a1722}
.bbl-gallery .case-gallery-head .eyebrow{color:#7a1722}
.bbl-gallery .case-gallery-head .count{color:#7a1722}

/* BBL deliverable tiles */
.bbl-body .deliverable{border-color:#1a2438}
.bbl-body .deliverable .num{color:#7a1722}
.bbl-body .deliverable.accent{background:#7a1722;border-color:#1a2438}
.bbl-body .deliverable.accent .num{color:#f4ece3}
.bbl-body .deliverable.accent h5{color:#f4ece3}
.bbl-body .deliverable.accent small{color:rgba(244,236,227,0.7)}
.bbl-body .deliverables-head{border-bottom-color:#7a1722}
.bbl-body .deliverables-head .eyebrow{color:#7a1722}

/* BBL pullquote override */
.pullquote.pq-bbl{
  background:#7a1722;color:#f4ece3;
  position:relative;overflow:hidden;
}
.pullquote.pq-bbl::before{color:#f4ece3;opacity:0.25}
.pullquote.pq-bbl::after{
  /* subtle splatter */
  content:"";position:absolute;
  top:20%;right:8%;
  width:180px;height:180px;
  background-image:
    radial-gradient(circle at 30% 40%, rgba(244,236,227,0.18) 2px, transparent 3px),
    radial-gradient(circle at 70% 60%, rgba(0,0,0,0.2) 4px, transparent 5px),
    radial-gradient(circle at 50% 80%, rgba(244,236,227,0.1) 3px, transparent 4px);
  pointer-events:none;
}
.pullquote.pq-bbl blockquote em{color:#f4ece3;text-decoration:underline;text-decoration-color:rgba(244,236,227,0.4)}
.pullquote.pq-bbl .pullquote-attr{border-top-color:rgba(244,236,227,0.22)}
.pullquote.pq-bbl .pullquote-attr .avatar{background:#f4ece3;color:#7a1722}


/* ============================================================
   PYRORITY-SPECIFIC CASE STYLING (Case 03)
   Amber-on-dark treatment distinct from BBL's crimson-on-kraft.
   Source: _reference/popwaffle-cred-v1.html → Pyrority section.
   Brand colors (not in :root tokens — localized to this case):
     #EF9F27 amber, #E24B4A burn red, #3498BF active blue,
     #0e0e0e near-black bg, #f4f1ec off-white ink on dark.
   ============================================================ */

/* ----- Hero variant: amber-over-dark ----- */
.case-hero-pyrority{
  background:
    radial-gradient(circle at 15% 20%, rgba(239,159,39,0.18), transparent 55%),
    radial-gradient(circle at 85% 85%, rgba(226,75,74,0.12), transparent 50%),
    #0e0e0e;
  color:#f4f1ec;
  position:relative;
  overflow:hidden;
}
.case-hero-pyrority::after{
  content:"";
  position:absolute;inset:0;
  background-image:
    radial-gradient(circle at 22% 78%, rgba(239,159,39,0.08) 3px, transparent 4px),
    radial-gradient(circle at 78% 22%, rgba(239,159,39,0.06) 5px, transparent 6px),
    radial-gradient(circle at 50% 50%, rgba(226,75,74,0.05) 4px, transparent 5px);
  pointer-events:none;
}
.case-hero-pyrority .case-hero-mark-img{
  width:clamp(120px,14vw,180px);
  height:auto;
  filter:drop-shadow(4px 4px 20px rgba(239,159,39,0.3));
}
.case-hero-pyrority .case-tag{background:#EF9F27;color:#0e0e0e}
.case-hero-pyrority .case-hero-mark-wordmark{
  font-family:var(--display);font-weight:500;
  font-size:clamp(14px,1.4vw,18px);
  letter-spacing:0.14em;text-transform:uppercase;
  color:#f4f1ec;opacity:0.75;
  margin-top:20px;
}
.case-hero-pyrority .case-hero-mark-wordmark em{
  color:#EF9F27;font-style:italic;opacity:1;
}
.case-hero-pyrority .case-hero-meta-row{border-top-color:rgba(244,241,236,0.18)}
.case-hero-pyrority .case-hero-bottom-corner{color:#EF9F27;opacity:0.8}
.case-hero-pyrority .case-hero-corner{color:#f4f1ec;opacity:0.5}

/* ----- Inline Pyrority logo mark (no image needed) ----- */
.pyrority-mark{
  width:clamp(120px,14vw,180px);
  height:clamp(120px,14vw,180px);
  background:#EF9F27;
  border-radius:28px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 20px 60px rgba(239,159,39,0.35), 0 0 0 1px rgba(239,159,39,0.2);
  position:relative;
}
.pyrority-mark::before{
  content:"";
  width:36%;height:36%;
  background:#0e0e0e;
  border-radius:8px;
}

/* ----- Amber-tinted body elements ----- */
.pyrority-body .case-body-head{border-bottom-color:#EF9F27}
.pyrority-body .case-body-head .label-num{color:#EF9F27}
.pyrority-body .case-body-head h3 em{color:#EF9F27}
.pyrority-body .narrative-block .label{color:#EF9F27;border-bottom-color:#EF9F27}

/* ----- Fire glossary grid (language system) ----- */
.glossary{
  margin-bottom:60px;
  background:#0e0e0e;
  border:2px solid var(--navy);
  border-radius:24px;
  overflow:hidden;
  box-shadow:8px 8px 0 var(--navy);
}
.glossary-head{
  padding:32px 40px 20px;
  border-bottom:1px dashed rgba(244,241,236,0.15);
  display:flex;justify-content:space-between;align-items:baseline;
  flex-wrap:wrap;gap:12px;
}
.glossary-head .eyebrow{color:#EF9F27}
.glossary-head .note{
  font-family:var(--script);font-style:italic;font-weight:700;
  color:#EF9F27;font-size:22px;transform:rotate(-3deg);
}
.glossary-grid-inner{
  display:grid;grid-template-columns:1fr 1fr;
}
.glossary-item{
  padding:24px 32px;
  display:grid;grid-template-columns:100px 1fr;gap:24px;align-items:center;
  border-top:1px solid rgba(244,241,236,0.08);
  border-right:1px solid rgba(244,241,236,0.08);
}
.glossary-item:nth-child(-n+2){border-top:none}
.glossary-item:nth-child(2n){border-right:none}
.glossary-term{
  font-family:var(--display);font-weight:800;
  font-size:14px;color:#EF9F27;
  letter-spacing:0.06em;text-transform:uppercase;
}
.glossary-def{
  font-size:13px;color:rgba(244,241,236,0.65);line-height:1.55;
  margin:0;max-width:none;
}
.glossary-def em{color:#EF9F27;font-style:italic;font-weight:400}
@media (max-width:720px){
  .glossary-grid-inner{grid-template-columns:1fr}
  .glossary-item{grid-template-columns:80px 1fr;border-right:none;padding:20px 24px;gap:16px}
  .glossary-item:first-child{border-top:none}
  .glossary-item{border-top:1px solid rgba(244,241,236,0.08)}
}

/* ----- Heat system — 4-state grid ----- */
.heat-system{margin-bottom:60px}
.heat-system-head{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:20px;padding-bottom:14px;
  border-bottom:2px solid var(--navy);
  flex-wrap:wrap;gap:12px;
}
.heat-system-head .eyebrow{color:var(--navy)}
.heat-system-head .note{
  font-family:var(--script);font-style:italic;font-weight:700;
  color:#E24B4A;font-size:22px;transform:rotate(-3deg);
}
.heat-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px;
}
.heat-cell{
  padding:24px 22px;
  border-radius:16px;
  border:2px solid var(--navy);
  background:var(--paper);
  display:flex;flex-direction:column;gap:10px;
  transition:transform .2s;
}
.heat-cell:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--navy)}
.heat-dots{display:flex;gap:5px;margin-bottom:4px}
.heat-dot{width:10px;height:10px;border-radius:50%}
.heat-dot.off{background:rgba(43,43,84,0.12)}
.heat-dot.flick{background:#555;animation:heat-blink 1.2s infinite}
.heat-dot.smol{background:#EF9F27}
.heat-dot.burn{background:#E24B4A}
.heat-dot.active{background:#3498BF}
@keyframes heat-blink{0%,100%{opacity:1}50%{opacity:0.15}}
.heat-flick-1{animation-delay:0s}
.heat-flick-2{animation-delay:0.2s}
.heat-flick-3{animation-delay:0.4s}
.heat-flick-4{animation-delay:0.6s}
.heat-state{
  font-family:var(--display);font-weight:800;font-size:16px;
  color:var(--navy);letter-spacing:-0.01em;margin-top:4px;
}
.heat-state em{font-style:italic;font-weight:700;font-family:var(--script);font-size:14px;margin-left:4px}
.heat-cell.flickering .heat-state em{color:#555}
.heat-cell.smoldering .heat-state em{color:#EF9F27}
.heat-cell.burning .heat-state em{color:#E24B4A}
.heat-cell.active-state .heat-state em{color:#3498BF}
.heat-desc{
  font-size:13px;color:var(--ink-2);line-height:1.5;margin:0;max-width:none;
}
.heat-hex{
  font-family:var(--display);font-weight:700;font-size:10px;
  letter-spacing:0.06em;color:var(--ink-3);margin-top:auto;padding-top:12px;
  border-top:1px dashed var(--line);
}
@media (max-width:900px){.heat-grid{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.heat-grid{grid-template-columns:1fr}}

/* ----- Phone gallery — mobile screen showcase ----- */
.phone-gallery{
  margin-bottom:60px;
  padding:48px 32px;
  background:#0e0e0e;
  border:2px solid var(--navy);
  border-radius:24px;
  position:relative;
  overflow:hidden;
}
.phone-gallery::before{
  content:"";position:absolute;inset:0;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(239,159,39,0.06), transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(226,75,74,0.05), transparent 40%);
  pointer-events:none;
}
.phone-gallery-head{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:32px;padding-bottom:16px;
  border-bottom:1px dashed rgba(244,241,236,0.15);
  position:relative;flex-wrap:wrap;gap:12px;
}
.phone-gallery-head .eyebrow{color:#EF9F27}
.phone-gallery-head .note{
  font-family:var(--script);font-style:italic;font-weight:700;
  color:#EF9F27;font-size:22px;transform:rotate(-3deg);
}
.phones-row{
  display:flex;gap:20px;overflow-x:auto;padding:8px 0;
  scrollbar-width:thin;scrollbar-color:#EF9F27 transparent;
  position:relative;
}
.phones-row::-webkit-scrollbar{height:6px}
.phones-row::-webkit-scrollbar-thumb{background:#EF9F27;border-radius:3px}

.phone{
  width:240px;flex-shrink:0;
  background:#141414;
  border-radius:24px;
  border:1px solid rgba(244,241,236,0.12);
  overflow:hidden;
  display:flex;flex-direction:column;
}
.phone-bar{
  padding:14px 14px 10px;
  display:flex;align-items:center;gap:8px;
  border-bottom:1px solid rgba(244,241,236,0.06);
}
.phone-logo-dot{
  width:14px;height:14px;background:#EF9F27;border-radius:4px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.phone-logo-dot::before{
  content:"";width:5px;height:5px;background:#141414;border-radius:1px;
}
.phone-title{
  font-family:var(--display);font-weight:700;font-size:12px;
  color:#f4f1ec;letter-spacing:-0.01em;
}
.phone-sub{
  padding:4px 14px 12px;font-size:9px;
  color:rgba(244,241,236,0.35);
  border-bottom:1px solid rgba(244,241,236,0.06);
}
.phone-body{padding:12px;flex:1;display:flex;flex-direction:column;gap:5px}
.phone-sec-label{
  font-family:var(--display);font-weight:800;font-size:8px;
  letter-spacing:0.14em;text-transform:uppercase;
  padding:6px 2px 4px;
}
.phone-sec-label.flicker{color:#888}
.phone-sec-label.smolder{color:#EF9F27}
.phone-sec-label.burn{color:#E24B4A}
.phone-sec-label.week{color:#E24B4A}
.phone-item{
  background:#1e1e1e;
  border:1px solid rgba(244,241,236,0.06);
  border-radius:8px;
  padding:10px 11px;
  position:relative;
}
.phone-item.flicker{border-left:2px solid #555}
.phone-item.smolder{border-left:2px solid #EF9F27}
.phone-item.burn{border-left:2px solid #E24B4A}
.phone-item.active-fire{border-left:2px solid #3498BF}
.phone-item.cinder{border-left:2px solid #E24B4A;background:#1c1414}
.phone-item.fresh{background:rgba(239,159,39,0.04);border-color:rgba(239,159,39,0.15)}
.phone-item-title{
  font-size:11px;color:#c8c8c8;line-height:1.3;margin-bottom:6px;
  font-family:var(--body);
}
.phone-item.cinder .phone-item-title{
  color:#7a6a6a;font-style:italic;text-decoration:line-through;
}
.phone-item-tags{display:flex;gap:4px;flex-wrap:wrap}
.phone-tag{
  font-family:var(--display);font-weight:700;font-size:8px;
  padding:2px 6px;border-radius:3px;
  letter-spacing:0.04em;
}
.phone-tag.flicker{background:rgba(85,85,85,0.25);color:#888}
.phone-tag.smolder{background:rgba(239,159,39,0.14);color:#EF9F27}
.phone-tag.burn{background:rgba(226,75,74,0.14);color:#E24B4A}
.phone-tag.active{background:rgba(52,152,191,0.14);color:#3498BF}
.phone-tag.fresh{background:rgba(239,159,39,0.15);color:#EF9F27}
.phone-spotter{
  padding:7px 12px;
  background:rgba(239,159,39,0.04);
  border-top:1px solid rgba(239,159,39,0.1);
  font-size:9px;color:rgba(244,241,236,0.4);
  font-family:var(--body);
}
.phone-spotter strong{color:#EF9F27;font-weight:700}
.phone-spotter.red{background:rgba(226,75,74,0.04);border-top-color:rgba(226,75,74,0.15)}
.phone-spotter.red strong{color:#E24B4A}
.phone-capture{
  padding:10px 12px 14px;
  border-top:1px solid rgba(244,241,236,0.06);
  background:#0e0e0e;
}
.phone-capture-input{
  display:flex;align-items:center;gap:8px;
  background:#1e1e1e;border:1px solid rgba(244,241,236,0.1);
  border-radius:10px;padding:7px 8px 7px 12px;
}
.phone-capture-text{flex:1;font-size:10px;color:rgba(244,241,236,0.25)}
.phone-capture-fab{
  width:24px;height:24px;background:#EF9F27;border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  font-size:10px;color:#0e0e0e;font-weight:700;
}
.phone-label{
  text-align:center;margin-top:14px;
  font-family:var(--display);font-weight:700;font-size:11px;
  color:var(--navy);letter-spacing:0.14em;text-transform:uppercase;
}
.phone-wrap{display:flex;flex-direction:column}

/* ----- Lifecycle diagram ----- */
.lifecycle{
  margin-bottom:60px;
  padding:40px 48px;
  background:var(--paper);
  border:2px solid var(--navy);
  border-radius:20px;
  box-shadow:6px 6px 0 var(--navy);
}
.lifecycle-head{margin-bottom:28px;padding-bottom:14px;border-bottom:2px dashed var(--line)}
.lifecycle-head .eyebrow{color:#EF9F27;margin-bottom:8px;display:block}
.lifecycle-head h4{
  font-family:var(--display);font-weight:800;font-size:22px;
  color:var(--navy);letter-spacing:-0.015em;
}
.lifecycle-head h4 em{font-style:normal;color:#EF9F27}
.lifecycle-track{
  display:flex;align-items:center;gap:0;overflow-x:auto;padding:12px 0;
}
.lifecycle-step{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  flex-shrink:0;min-width:110px;
}
.lifecycle-dot{
  width:54px;height:54px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:900;font-size:22px;
  border:2px solid var(--navy);
}
.lifecycle-step.ember .lifecycle-dot{background:var(--off);color:var(--ink-3)}
.lifecycle-step.kindle .lifecycle-dot{background:#EF9F27;color:#0e0e0e}
.lifecycle-step.fire .lifecycle-dot{background:#E24B4A;color:#f4f1ec}
.lifecycle-step.douse .lifecycle-dot{background:#3498BF;color:#f4f1ec}
.lifecycle-step.ash .lifecycle-dot{background:var(--navy);color:#3498BF}
.lifecycle-name{
  font-family:var(--display);font-weight:800;font-size:13px;
  color:var(--navy);letter-spacing:-0.01em;
}
.lifecycle-step.kindle .lifecycle-name{color:#EF9F27}
.lifecycle-step.fire .lifecycle-name{color:#E24B4A}
.lifecycle-step.douse .lifecycle-name{color:#3498BF}
.lifecycle-sub{
  font-family:var(--script);font-style:italic;font-weight:700;
  font-size:14px;color:var(--ink-3);line-height:1;
}
.lifecycle-arrow{
  flex:1;height:2px;
  background:repeating-linear-gradient(to right,var(--navy) 0,var(--navy) 4px,transparent 4px,transparent 8px);
  margin:0 4px 32px;
  min-width:30px;position:relative;
}
.lifecycle-arrow::after{
  content:"→";position:absolute;right:-4px;top:-9px;
  color:var(--navy);font-size:14px;font-weight:700;
}
@media (max-width:720px){
  .lifecycle-track{flex-direction:column;align-items:flex-start;gap:16px}
  .lifecycle-step{flex-direction:row;gap:14px;min-width:0}
  .lifecycle-arrow{display:none}
}

/* ----- Pyrority pullquote — amber on dark ----- */
.pullquote.pq-pyrority{
  background:
    radial-gradient(circle at 20% 30%, rgba(239,159,39,0.15), transparent 55%),
    #0e0e0e;
  color:#f4f1ec;position:relative;overflow:hidden;
}
.pullquote.pq-pyrority blockquote em{color:#EF9F27;text-decoration:none;font-style:italic}
.pullquote.pq-pyrority .pullquote-attr{border-top-color:rgba(244,241,236,0.15)}
.pullquote.pq-pyrority .pullquote-attr .avatar{background:#EF9F27;color:#0e0e0e}
.pullquote.pq-pyrority .pullquote-attr strong{color:#f4f1ec}
.pullquote.pq-pyrority .pullquote-attr small{color:rgba(244,241,236,0.55)}

/* ----- Pyrority deliverables — amber accent ----- */
.pyrority-body .deliverable{border-color:var(--navy)}
.pyrority-body .deliverable .num{color:#EF9F27}
.pyrority-body .deliverable.accent{background:#0e0e0e;border-color:var(--navy)}
.pyrority-body .deliverable.accent .num{color:#EF9F27}
.pyrority-body .deliverable.accent h5{color:#f4f1ec}
.pyrority-body .deliverable.accent small{color:rgba(244,241,236,0.6)}
.pyrority-body .deliverables-head{border-bottom-color:#EF9F27}
.pyrority-body .deliverables-head .eyebrow{color:#EF9F27}

/* ----- Homepage Case 03 tile override — amber-on-dark for Pyrority -----
   The dynamic front-page.php applies .case-3 to the third featured case
   by iteration. Assuming Pyrority is pinned as the third featured case,
   these rules swap the earlier navy/mint treatment (defined in section 8)
   for the new Pyrority amber-on-dark palette. Later source order wins on
   matching selectors, so these override without needing !important.
   If Pyrority ever moves out of the third slot, revisit this. */
.case.case-3{background:#0e0e0e;color:#f4f1ec}
.case-3 .case-body{background:#0e0e0e}
.case-3 .case-body .eyebrow{color:#EF9F27}
.case-3 .case-body h3{color:#f4f1ec}
.case-3 .case-body h3 em{color:#EF9F27;font-style:normal}
.case-3 .case-body p{color:rgba(244,241,236,0.7)}
.case-3 .case-body .case-meta-item strong{color:#f4f1ec}
.case-3 .case-body .case-link{color:#EF9F27}
.case-3 .case-body .case-link:hover{color:#f4f1ec}
.case-3 .case-meta{border-color:rgba(244,241,236,0.18)}
.case-3 .case-tag{background:#EF9F27;color:#0e0e0e}
.case-3 .case-num{color:#EF9F27;opacity:0.85}
.case-3 .case-mark{color:#EF9F27}


/* ============================================================
   12.5 DIGITS PAGE (contact)
   ============================================================ */

/* ----- Digits-scoped overrides for shared .page-hero component ----- */
body.page-slug-digits .page-hero{background:var(--pink-lt);padding:80px 0 40px}
body.page-slug-digits .page-hero::before{
  width:600px;height:600px;
  background:radial-gradient(circle at 30% 40%, rgba(95,212,180,0.3), transparent 60%);
}
body.page-slug-digits .page-hero::after{
  bottom:-40%;left:-8%;width:560px;height:560px;
  background:radial-gradient(circle at 60% 30%, rgba(245,180,191,0.4), transparent 60%);
}
body.page-slug-digits .page-hero .breadcrumb{color:var(--navy);opacity:0.65}
body.page-slug-digits .page-hero h1{color:var(--navy)}
body.page-slug-digits .page-hero h1 em{color:var(--pink-dk);font-size:0.7em;margin-left:-2px}
body.page-slug-digits .page-hero-grid{margin-bottom:32px}
body.page-slug-digits .page-hero .lead{font-size:22px;color:var(--navy);opacity:0.82;max-width:640px}
body.page-slug-digits .page-hero .lead em{font-style:normal;color:var(--pink-dk);font-family:var(--display);font-weight:700}
body.page-slug-digits .page-hero-meta-col .eyebrow{color:var(--navy);opacity:0.7}
body.page-slug-digits .page-hero-meta-col p{color:var(--navy)}

/* ----- Mega hello@ email anchor ----- */
.mega-hello{
  font-family:var(--display);
  font-weight:900;
  font-size:clamp(42px,8.5vw,140px);
  line-height:0.82;
  letter-spacing:-0.05em;
  color:var(--navy);
  white-space:nowrap;
  overflow:hidden;
  text-transform:lowercase;
  padding:32px 0 0;
  margin-top:40px;
  border-top:2px dashed var(--navy);
  position:relative;
  display:block;
  text-decoration:none;
  transition:color .25s;
}
.mega-hello:hover{color:var(--pink-dk)}
.mega-hello em{font-style:normal;color:var(--pink-dk)}
.mega-hello::after{
  content:"◆ say hello";
  position:absolute;
  top:-14px;left:0;
  font-family:var(--display);font-weight:700;font-size:11px;
  letter-spacing:0.2em;text-transform:uppercase;
  color:var(--navy);background:var(--pink-lt);
  padding:4px 12px;
}
@media (max-width:900px){
  .mega-hello{margin-top:28px;padding-top:24px}
}

/* ----- Promises band ----- */
.promises{background:var(--pink-lt);padding:0 0 80px}
.promises-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding-top:20px}
.promise{
  background:var(--off);border:2px solid var(--navy);
  border-radius:16px;padding:22px 26px;
  display:flex;align-items:center;gap:16px;
  transition:transform .25s, box-shadow .25s;
}
.promise:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--navy)}
.promise-num{
  flex-shrink:0;width:40px;height:40px;border-radius:12px;
  background:var(--mint);color:var(--navy);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:900;font-size:15px;
}
.promise:nth-child(2) .promise-num{background:var(--pink)}
.promise:nth-child(3) .promise-num{background:var(--violet-lt);color:var(--paper)}
.promise-text h4{
  font-family:var(--display);font-weight:800;font-size:16px;
  color:var(--navy);letter-spacing:-0.008em;line-height:1.15;margin-bottom:2px;
}
.promise-text p{font-size:13px;color:var(--ink-2);line-height:1.4}
@media (max-width:900px){.promises-grid{grid-template-columns:1fr;gap:12px}}

/* ----- Contact: form card + sidebar ----- */
.contact{padding:100px 0;background:var(--off)}
.contact-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:40px;align-items:start}

.form-card{
  background:var(--paper);border:2px solid var(--navy);
  border-radius:24px;padding:48px;
  box-shadow:8px 8px 0 var(--navy);
}
.form-card .eyebrow{color:var(--pink-dk);margin-bottom:14px;display:block}
.form-card h2{
  font-family:var(--display);font-weight:900;
  font-size:clamp(32px,4vw,48px);
  color:var(--navy);letter-spacing:-0.02em;line-height:1;margin-bottom:14px;
}
.form-card h2 em{font-style:normal;color:var(--mint-dk)}
.form-card > p{font-size:16px;color:var(--ink-2);margin-bottom:32px;line-height:1.55;max-width:480px}

.form-group{margin-bottom:22px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:22px}

/* Form control typography — scoped to the form card so these don't leak
   out and restyle other forms on the site (newsletter, hero review, etc.). */
.form-card label{
  display:block;font-family:var(--display);font-weight:700;font-size:11px;
  letter-spacing:0.14em;text-transform:uppercase;color:var(--navy);margin-bottom:8px;
}
.form-card label .opt{
  font-family:var(--script);font-weight:600;font-style:italic;
  font-size:14px;letter-spacing:0;text-transform:none;
  color:var(--pink-dk);margin-left:6px;
}
.form-card input[type="text"],
.form-card input[type="email"],
.form-card input[type="tel"],
.form-card select,
.form-card textarea{
  width:100%;font-family:var(--body);font-size:15px;color:var(--ink);
  background:var(--off);border:1.5px solid var(--line);border-radius:10px;
  padding:12px 14px;outline:none;
  transition:border-color .2s, background .2s;
}
.form-card input:focus,
.form-card select:focus,
.form-card textarea:focus{border-color:var(--navy);background:var(--paper)}
.form-card input::placeholder,
.form-card textarea::placeholder{color:var(--ink-3)}
.form-card textarea{resize:vertical;min-height:120px;line-height:1.5}

.form-submit-row{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:32px;padding-top:24px;border-top:1px solid var(--line);
  gap:16px;flex-wrap:wrap;
}
.form-submit-note{font-size:13px;color:var(--ink-3);max-width:280px;line-height:1.4}
.form-submit-note strong{color:var(--navy);font-weight:600}

@media (max-width:900px){
  .contact-grid{grid-template-columns:1fr;gap:24px}
  .form-card{padding:32px 24px}
  .form-row{grid-template-columns:1fr;gap:18px}
}

/* ----- Fluent Forms overrides (when embedded via shortcode inside .form-card) -----
   FF renders its own markup but uses native input/select/textarea/label elements
   underneath, so the brand styles on those elements cascade in automatically.
   These rules re-style FF's wrapper classes (button, field groups) to match. */
.form-card .ff-el-group{margin-bottom:22px}
.form-card .ff-el-input--label{margin-bottom:0}
.form-card .ff-el-input--label label{
  font-family:var(--display);font-weight:700;font-size:11px;
  letter-spacing:0.14em;text-transform:uppercase;color:var(--navy);
  margin-bottom:8px;display:block;
}
/* Submit button — mimic .btn.btn--mint.btn--lg */
.form-card .ff-btn,
.form-card .ff-btn-submit{
  display:inline-flex;align-items:center;gap:10px;
  padding:19px 32px;border-radius:999px;
  font-family:var(--body);font-size:15px;font-weight:600;
  letter-spacing:0.01em;border:2px solid var(--mint);
  background:var(--mint);color:var(--navy);
  white-space:nowrap;line-height:1;cursor:pointer;
  transition:transform .2s ease, background .2s, color .2s, border-color .2s;
}
.form-card .ff-btn-submit:hover{
  background:var(--mint-dk);border-color:var(--mint-dk);
  color:var(--paper);transform:translateY(-2px);
}
/* FF success + error messages */
.form-card .ff-message-success{
  padding:32px 28px;border-radius:12px;
  background:var(--mint-lt);color:var(--navy-dk);
  border:1.5px solid var(--mint);
  font-family:var(--body);font-size:16px;line-height:1.5;
}
.form-card .ff-errors-in-stack,
.form-card .error{color:var(--pink-dk);font-size:13px;margin-top:4px}

/* When FF swaps in its success message, hide the pre-form heading and
   the post-form "we reply within 1 day" note — both read as prompts
   to act and feel stale next to the already-acknowledged confirmation.
   :has() is supported in every evergreen browser (Chrome 105+, Safari 15.4+). */
.form-card:has(.ff-message-success) .form-card-intro,
.form-card:has(.ff-message-success) .form-submit-note{
  display:none;
}


/* ----- .ff-compact — pill-shape single-field Fluent Forms wrapper -----
   Used on the homepage hero review, footer newsletter, and Digits alt-CTA
   where a 1-field FF form renders inside an existing pill-shaped container.

   Actual FF DOM (observed, form 4 = email-only):
     .hero-review-form.ff-compact  (flex, pill background)
       .fluentform                 (FF outer wrapper — must flatten)
         form.frm-fluent-form      (the real form — made flex row here)
           fieldset                (FF groups fields — must flatten)
             legend                (visually hidden by inline style — OK)
             .ff-el-group          (email field — takes remaining width)
               .ff-el-input--label (hidden here)
               .ff-el-input--content > input
             .ff-el-group.ff_submit_btn_wrapper  (button — content-width)
               .ff-btn-submit
         .ff-errors-in-stack       (error slot; hidden when empty)

   Every rule uses an `html` prefix for specificity because FF's stylesheet
   loads after the theme's and its rules use !important too. The html prefix
   adds just enough specificity to win the cascade without resorting to body/id. */

html .ff-compact .frm-fluent-form{
  display:flex !important;
  align-items:center;
  gap:6px;
  margin:0 !important;
  padding:0 !important;
  width:100%;
}
html .ff-compact .fluentform,
html .ff-compact .ff-form-wrap,
html .ff-compact fieldset,
html .ff-compact .ff-t-container,
html .ff-compact .ff-t-cell,
html .ff-compact .ff_columns,
html .ff-compact .ff_columns_total_1,
html .ff-compact .ff_t_cell,
html .ff-compact .ff-el-input--content,
html .ff-compact .ff-el-group-title{
  display:contents !important;
}
/* Empty error slot would still occupy a gap-spacer — hide when empty. */
html .ff-compact .ff-errors-in-stack:empty{display:none !important}

/* Email field — takes the remaining width. Exclude the submit wrapper
   (which is also .ff-el-group) so the button stays content-sized. */
html .ff-compact .ff-el-group:not(.ff_submit_btn_wrapper){
  flex:1 !important;
  margin:0 !important;
  padding:0 !important;
  min-width:0;
}
html .ff-compact .ff-el-group.ff_submit_btn_wrapper{
  flex:0 0 auto !important;
  margin:0 !important;
  padding:0 !important;
}

html .ff-compact .ff-el-input--label,
html .ff-compact .ff-el-input--label label,
html .ff-compact .ff-el-input-label{
  display:none !important;
}

html .ff-compact input[type="email"],
html .ff-compact input[type="text"],
html .ff-compact input.ff-el-form-control{
  width:100% !important;
  background:transparent !important;
  border:none !important;
  outline:none !important;
  box-shadow:none !important;
  padding:8px 0 !important;
  font-family:inherit !important;
  font-size:14px !important;
  color:inherit !important;
  min-height:0 !important;
  height:auto !important;
}
html .ff-compact input::placeholder{opacity:0.5}

html .ff-compact .ff-btn,
html .ff-compact .ff-btn-submit,
html .ff-compact .ff-btn-sm,
html .ff-compact .ff_btn_style,
html .ff-compact button[type="submit"]{
  padding:10px 18px !important;
  border-radius:999px !important;
  background:var(--mint) !important;
  color:var(--navy) !important;
  font-family:var(--body) !important;
  font-size:13px !important;
  font-weight:700 !important;
  letter-spacing:0.01em !important;
  border:none !important;
  cursor:pointer;
  flex-shrink:0;
  white-space:nowrap;
  transition:background .2s;
  margin:0 !important;
  height:auto !important;
  min-height:0 !important;
  line-height:1.2 !important;
  width:auto !important;
}
html .ff-compact .ff-btn:hover,
html .ff-compact .ff-btn-submit:hover,
html .ff-compact button[type="submit"]:hover{
  background:var(--mint-dk) !important;
  color:var(--paper) !important;
}

/* Placeholder + text color on dark-bg wrappers. */
html .footer-newsletter.ff-compact input::placeholder,
html .alt-cta-input-row.ff-compact input::placeholder{
  color:rgba(253,249,243,0.4) !important;
}
html .footer-newsletter.ff-compact input[type="email"],
html .alt-cta-input-row.ff-compact input[type="email"]{
  color:var(--off) !important;
}

/* Success message inside a compact wrapper.
   Two layouts work:
   - FF "Reset Form" (preferred): form stays visible, success appears below.
     In this case .ff-message-success renders as a sibling block under the form.
   - FF "Hide Form" (default): form is removed, success replaces it.
     In this case we flatten the surrounding pill container so the confirmation
     stands alone instead of floating inside an empty rounded rectangle. */
html .ff-compact .ff-message-success{
  display:block !important;
  width:100% !important;
  max-width:none !important;
  padding:14px 20px;
  border-radius:999px;
  background:rgba(95,212,180,0.18);
  color:inherit;
  font-family:var(--body);
  font-size:13px;
  line-height:1.4;
  text-align:center;
  margin:10px 0 0;
  border:1px solid rgba(95,212,180,0.35);
  box-sizing:border-box;
}

/* --------------------------------------------------------------
   Post-submission transform: when Fluent Forms shows a success
   message inside a compact wrapper, restyle the ENTIRE enclosing
   panel — not just the form slot. The pre-submit label, heading,
   and pill chrome all hide; the success message becomes the
   dominant content of the card.

   Works in both FF "Hide Form" and "Reset Form" modes because we
   only key off .ff-message-success existing, not on whether the
   form itself is still in the DOM.
   -------------------------------------------------------------- */

/* Strip the pill chrome from the form slot so the success message
   doesn't look like it's floating inside an empty white capsule. */
html .ff-compact:has(.ff-message-success){
  background:transparent !important;
  border:none !important;
  padding:0 !important;
  max-width:none;
}

/* Make the success message itself the visual hero in each location. */
html .ff-compact:has(.ff-message-success) .ff-message-success{
  padding:24px 28px !important;
  border-radius:16px !important;
  font-size:16px !important;
  font-weight:600 !important;
  line-height:1.4 !important;
  text-align:center !important;
  margin:0 !important;
  border:none !important;
}

/* Homepage hero review card: hide the label + h3 prompt since the
   confirmation speaks for itself. Success message takes mint fill and
   centers horizontally + vertically inside the navy panel. min-height
   preserves roughly the pre-submit card height so the layout doesn't
   collapse upward when the form is replaced. */
html .hero-review:has(.ff-message-success) .hero-review-label,
html .hero-review:has(.ff-message-success) h3{
  display:none !important;
}
/* Thank-you card fills the navy panel with a small inset gap. The inner
   mint message spans full width, block-centered text. Intermediate FF
   wrappers are forced to block + full-width so they don't constrain the
   success message. */
html .hero-review:has(.ff-message-success){
  padding:12px !important;
  display:block !important;
}
html .hero-review:has(.ff-message-success) .hero-review-form,
html .hero-review:has(.ff-message-success) .fluentform{
  display:block !important;
  width:100% !important;
  padding:0 !important;
  margin:0 !important;
  background:transparent !important;
  border:none !important;
}
html .hero-review:has(.ff-message-success) .ff-message-success{
  display:block !important;
  width:100% !important;
  box-sizing:border-box !important;
  margin:0 !important;
  padding:28px 24px !important;
  border-radius:12px !important;
  text-align:center !important;
  background:var(--mint) !important;
  color:var(--navy) !important;
  border:none !important;
  font-size:16px !important;
  font-weight:600 !important;
  line-height:1.4 !important;
}

/* Footer newsletter: hide the "Let's Talk!" footer-brand prose is
   too aggressive (it's a separate column). Just strip the form
   chrome and tint the success mint-lt against the navy footer. */
html .footer-brand:has(.ff-message-success) .footer-newsletter{
  background:transparent;
  border:none;
  padding:0;
}
html .footer-brand:has(.ff-message-success) .ff-message-success{
  background:rgba(95,212,180,0.18) !important;
  color:var(--mint) !important;
  text-align:left !important;
  padding:14px 20px !important;
  border-radius:12px !important;
  max-width:360px;
}

/* Digits alt-CTA: hide the "Drop your email" heading + eyebrow so
   the thank-you owns the panel. */
html .alt-cta-form-box:has(.ff-message-success) > .eyebrow,
html .alt-cta-form-box:has(.ff-message-success) > h3{
  display:none !important;
}
html .alt-cta-form-box:has(.ff-message-success) .ff-message-success{
  background:var(--mint) !important;
  color:var(--navy) !important;
}

.contact-sidebar{display:flex;flex-direction:column;gap:16px;position:sticky;top:110px}
.sidebar-card{border-radius:20px;border:2px solid var(--navy);padding:32px;position:relative}
.sidebar-card--mint{background:var(--mint);color:var(--navy)}
.sidebar-card--navy{background:var(--navy);color:var(--off)}
.sidebar-card--pink{background:var(--pink);color:var(--navy)}
.sidebar-card .eyebrow{margin-bottom:16px;display:block}
.sidebar-card--mint .eyebrow{color:var(--navy);opacity:0.7}
.sidebar-card--navy .eyebrow{color:var(--mint)}
.sidebar-card--pink .eyebrow{color:var(--navy);opacity:0.7}

.direct-row{
  display:flex;align-items:flex-start;gap:12px;
  padding:14px 0;border-bottom:1px solid rgba(43,43,84,0.2);
}
.direct-row:last-child{border-bottom:none;padding-bottom:0}
.direct-icon{
  flex-shrink:0;width:36px;height:36px;
  background:var(--navy);color:var(--mint);border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:700;font-size:13px;
}
.direct-info{flex:1;min-width:0}
.direct-label{
  font-family:var(--display);font-weight:700;font-size:10px;
  letter-spacing:0.14em;text-transform:uppercase;
  color:var(--navy);opacity:0.65;margin-bottom:2px;
}
.direct-value{
  font-family:var(--display);font-weight:800;font-size:18px;
  color:var(--navy);letter-spacing:-0.01em;line-height:1.15;
  word-break:break-all;
}
.direct-value:hover{color:var(--pink-dk)}

.location-card h4{
  font-family:var(--display);font-weight:800;font-size:22px;
  color:var(--off);margin-bottom:8px;letter-spacing:-0.01em;line-height:1.1;
}
.location-card p{font-size:14px;color:rgba(253,249,243,0.78);line-height:1.5}
.location-card p em{font-style:normal;color:var(--mint);font-family:var(--display);font-weight:700}

.social-card h4{
  font-family:var(--display);font-weight:800;font-size:18px;
  color:var(--navy);margin-bottom:12px;letter-spacing:-0.01em;
}
.social-row{display:flex;gap:10px}
.social-dot{
  width:38px;height:38px;border-radius:50%;
  background:var(--navy);color:var(--mint);border:2px solid var(--navy);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:700;font-size:12px;
  transition:all .25s;
}
.social-dot:hover{background:var(--mint);color:var(--navy);transform:translateY(-2px)}

@media (max-width:900px){.contact-sidebar{position:static}}

/* ----- What happens next — 4 step cards ----- */
.happens{padding:120px 0;background:var(--mint)}
.happens-head{text-align:center;margin-bottom:60px}
.happens-head .eyebrow{color:var(--navy);opacity:0.7;margin-bottom:14px;display:block}
.happens-head h2{color:var(--navy);margin:0 auto;max-width:760px}
.happens-head h2 em{font-style:normal;color:var(--pink-dk)}
.happens-head p{font-size:17px;color:var(--navy);opacity:0.75;max-width:600px;margin:16px auto 0;line-height:1.55}

.steps-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;
  position:relative;
}
.steps-grid::before{
  content:"";position:absolute;top:38px;left:6%;right:6%;height:2px;
  background:repeating-linear-gradient(to right, var(--navy) 0, var(--navy) 6px, transparent 6px, transparent 12px);
  z-index:0;
}
.step-card{
  position:relative;z-index:1;
  background:var(--off);border:2px solid var(--navy);
  border-radius:18px;padding:32px 26px 26px;
  box-shadow:4px 4px 0 var(--navy);
  transition:transform .25s;
}
.step-card:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--navy)}
.step-card .circle{
  width:60px;height:60px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:900;font-size:22px;
  letter-spacing:-0.01em;margin:0 auto 18px;border:2px solid var(--navy);
}
.step-card:nth-child(1) .circle{background:var(--mint);color:var(--navy)}
.step-card:nth-child(2) .circle{background:var(--pink);color:var(--navy)}
.step-card:nth-child(3) .circle{background:var(--violet);color:var(--off)}
.step-card:nth-child(4) .circle{background:var(--navy);color:var(--mint)}
.step-card h3{
  font-family:var(--display);font-weight:800;font-size:20px;
  color:var(--navy);letter-spacing:-0.01em;line-height:1.1;margin-bottom:10px;
  text-align:center;
}
.step-card p{font-size:14.5px;color:var(--ink-2);line-height:1.5;text-align:center}
.step-card .who{
  margin-top:14px;padding-top:12px;
  border-top:1px dashed var(--line);
  font-family:var(--display);font-weight:700;font-size:10px;
  letter-spacing:0.14em;text-transform:uppercase;
  color:var(--pink-dk);text-align:center;
}

@media (max-width:900px){.steps-grid{grid-template-columns:1fr 1fr;gap:16px}.steps-grid::before{display:none}}
@media (max-width:520px){.steps-grid{grid-template-columns:1fr}}

/* ----- FAQ accordion (native <details>) ----- */
.faq{padding:120px 0;background:var(--off)}
.faq-head{
  display:grid;grid-template-columns:auto 1fr auto;gap:40px;
  align-items:end;margin-bottom:48px;
  padding-bottom:28px;border-bottom:2px solid var(--navy);
}
.faq-head .chapter{
  font-family:var(--display);font-weight:900;
  font-size:clamp(44px,5vw,64px);color:var(--violet);
  letter-spacing:-0.02em;line-height:1;
}
.faq-head .eyebrow{color:var(--navy);opacity:0.6;margin-bottom:10px;display:block}
.faq-head h2{color:var(--navy)}
.faq-head h2 em{font-style:normal;color:var(--violet)}
.faq-head .tag{
  font-family:var(--script);font-style:italic;font-weight:700;
  color:var(--pink-dk);font-size:22px;transform:rotate(-3deg);white-space:nowrap;
}

.faq-list{display:flex;flex-direction:column;gap:12px;max-width:920px;margin:0 auto}
details.faq-item{
  background:var(--paper);border:2px solid var(--navy);
  border-radius:16px;overflow:hidden;
  transition:transform .2s;
}
details.faq-item[open]{box-shadow:4px 4px 0 var(--navy);transform:translate(-2px,-2px)}
details.faq-item summary{
  padding:24px 28px;cursor:pointer;
  display:flex;align-items:center;gap:20px;list-style:none;
  font-family:var(--display);font-weight:800;
  font-size:clamp(17px,2vw,22px);color:var(--navy);
  letter-spacing:-0.01em;line-height:1.2;
}
details.faq-item summary::-webkit-details-marker{display:none}
details.faq-item summary::after{
  content:"+";margin-left:auto;
  width:36px;height:36px;border-radius:50%;
  background:var(--mint);color:var(--navy);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:900;font-size:22px;
  flex-shrink:0;border:2px solid var(--navy);
  transition:transform .25s, background .25s;
}
details.faq-item[open] summary::after{content:"−";background:var(--pink);transform:rotate(180deg)}
.faq-num{
  font-family:var(--display);font-weight:900;
  font-size:15px;color:var(--pink-dk);letter-spacing:-0.01em;
  flex-shrink:0;min-width:36px;
}
details.faq-item .faq-answer{
  padding:0 28px 28px;border-top:1px dashed var(--line);margin-top:-4px;
}
details.faq-item .faq-answer p{
  font-size:16px;line-height:1.65;color:var(--ink-2);
  padding-top:18px;max-width:740px;
}
details.faq-item .faq-answer p + p{padding-top:12px}
details.faq-item .faq-answer strong{color:var(--navy);font-weight:600}

@media (max-width:780px){
  .faq-head{grid-template-columns:1fr;gap:12px}
  .faq-head .tag{transform:rotate(-3deg)}
}

/* ----- Alt CTA (brand-review opt-in) ----- */
.alt-cta{padding:100px 40px;background:var(--off)}
.alt-cta-inner{
  background:var(--navy);color:var(--off);
  border-radius:28px;padding:60px;
  display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:center;
  position:relative;overflow:hidden;
}
.alt-cta-inner::before{
  content:"";position:absolute;top:-100px;right:-100px;
  width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle, rgba(245,180,191,0.35), transparent 70%);
}
.alt-cta-info{position:relative}
.alt-cta-info .eyebrow{color:var(--pink);margin-bottom:18px;display:block}
.alt-cta-info h2{
  font-family:var(--display);font-weight:900;
  font-size:clamp(32px,4vw,52px);color:var(--off);
  letter-spacing:-0.025em;line-height:1;margin-bottom:16px;
}
.alt-cta-info h2 em{font-style:normal;color:var(--mint)}
.alt-cta-info h2 .script{
  font-family:var(--script);font-style:italic;font-weight:700;
  color:var(--pink);font-size:0.85em;letter-spacing:0;
}
.alt-cta-info p{font-size:16px;color:rgba(253,249,243,0.78);line-height:1.55;max-width:440px}

.alt-cta-form{position:relative}
.alt-cta-form-box{
  background:rgba(253,249,243,0.08);
  border:1.5px solid rgba(253,249,243,0.22);
  border-radius:20px;padding:28px;
}
.alt-cta-form-box .eyebrow{color:var(--mint);margin-bottom:12px;display:block;font-size:11px}
.alt-cta-form-box h3{
  font-family:var(--display);font-weight:800;font-size:22px;
  color:var(--off);letter-spacing:-0.015em;line-height:1.2;margin-bottom:16px;
}
.alt-cta-input-row{
  display:flex;gap:6px;
  background:rgba(253,249,243,0.1);
  border-radius:999px;padding:4px 4px 4px 14px;
  border:1px solid rgba(253,249,243,0.2);
}
.alt-cta-input-row input{
  flex:1;border:none;background:none;outline:none;
  font-family:inherit;font-size:14px;color:var(--off);padding:8px 0;
}
.alt-cta-input-row input::placeholder{color:rgba(253,249,243,0.45)}
.alt-cta-input-row button{
  padding:10px 18px;border-radius:999px;
  background:var(--mint);color:var(--navy);
  font-family:var(--body);font-size:13px;font-weight:700;
  transition:background .2s;
}
.alt-cta-input-row button:hover{background:var(--pink)}

@media (max-width:860px){
  .alt-cta{padding:60px 20px}
  .alt-cta-inner{grid-template-columns:1fr;gap:32px;padding:40px 32px}
}


/* ============================================================
   13. FOOTER
   ============================================================ */
.footer{
  padding:80px 0 30px;
  background:var(--navy-dk);
  color:var(--off);
  position:relative;
  overflow:hidden;
}
.footer-top{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1.3fr;
  gap:40px;
  margin-bottom:60px;
}
.footer-brand h3{
  font-family:var(--script);
  font-weight:700;
  font-style:italic;
  font-size:44px;
  color:var(--mint);
  margin-bottom:18px;
  letter-spacing:-0.01em;
  transform:rotate(-2deg);
  display:inline-block;
}
.footer-brand p{color:rgba(253,249,243,0.7);font-size:15px;max-width:340px;margin-bottom:24px}
.footer-newsletter{
  display:flex;gap:6px;
  background:rgba(253,249,243,0.08);
  border:1px solid rgba(253,249,243,0.12);
  padding:4px 4px 4px 14px;
  border-radius:999px;
  max-width:360px;
}
.footer-newsletter input{
  flex:1;border:none;background:none;outline:none;
  font-family:inherit;font-size:14px;color:var(--off);
}
.footer-newsletter input::placeholder{color:rgba(253,249,243,0.4)}
.footer-newsletter button{
  padding:10px 18px;
  border-radius:999px;
  background:var(--mint);
  color:var(--navy);
  font-family:var(--body);
  font-size:13px;font-weight:700;
  transition:background .2s;
}

/* .footer-newsletter button:hover — CONFLICT: homepage/goods set color:var(--navy); legend/agency/cred omit */
/* from popwaffle-homepage-v2.html, popwaffle-goods-v1.html */
.footer-newsletter button:hover{background:var(--pink);color:var(--navy)}
/* from popwaffle-legend-v1.html, popwaffle-agency-v1.html, popwaffle-cred-v1.html */
/* .footer-newsletter button:hover{background:var(--pink)} */

.footer-col h4{
  font-family:var(--display);
  font-weight:700;
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--mint);
  margin-bottom:18px;
}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.footer-col a{
  font-family:var(--display);
  font-weight:600;
  font-size:14px;
  color:var(--off);
  transition:color .2s;
  letter-spacing:0.04em;
}
.footer-col a:hover{color:var(--mint)}

.footer-contact{color:rgba(253,249,243,0.7);font-size:14px;line-height:1.7}
.footer-contact strong{display:block;color:var(--off);font-weight:600;font-size:15px;margin-bottom:4px}

/* .footer-contact a — CONFLICT: homepage/goods include text-decoration:none; legend/agency/cred omit */
/* from popwaffle-homepage-v2.html, popwaffle-goods-v1.html */
.footer-contact a{color:var(--mint);text-decoration:none}
/* from popwaffle-legend-v1.html, popwaffle-agency-v1.html, popwaffle-cred-v1.html */
/* .footer-contact a{color:var(--mint)} */

.footer-socials{display:flex;gap:8px;margin-top:18px}
.social-pill{
  width:34px;height:34px;
  border-radius:50%;
  border:1.5px solid rgba(253,249,243,0.25);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);
  font-weight:700;
  font-size:11px;
  color:var(--off);
  transition:all .2s;
}
.social-pill:hover{background:var(--mint);border-color:var(--mint);color:var(--navy)}

.footer-mega{
  font-family:var(--display);
  font-weight:900;
  font-size:clamp(100px, 22vw, 320px);
  line-height:0.82;
  letter-spacing:-0.055em;
  color:var(--mint);
  margin:40px 0 0;
  padding:40px 0 0;
  border-top:1px solid rgba(253,249,243,0.12);
  white-space:nowrap;
  overflow:hidden;
  text-transform:uppercase;
}
.footer-mega em{font-style:normal;color:var(--pink)}

.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;
  padding-top:20px;
  border-top:1px solid rgba(253,249,243,0.12);
  font-size:13px;color:rgba(253,249,243,0.55);
  margin-top:20px;
  font-family:var(--body);
}
.footer-bottom-links{display:flex;gap:20px}
.footer-bottom-links a{color:rgba(253,249,243,0.55);transition:color .2s}
.footer-bottom-links a:hover{color:var(--mint)}

@media (max-width:900px){
  .footer-top{grid-template-columns:1fr 1fr;gap:40px 20px}
  .footer-bottom{flex-direction:column;gap:14px;text-align:center}
}

/* ============================================================
   14. SHARED COMPONENTS
   ============================================================ */

/* ----- Big CTA (appears on every page) ----- */
.big-cta{padding:60px 40px}
.big-cta-inner{
  background:
    radial-gradient(circle at 15% 30%, rgba(95,212,180,0.35), transparent 55%),
    radial-gradient(circle at 85% 75%, rgba(245,180,191,0.35), transparent 55%),
    var(--navy);
  border-radius:28px;
  padding:100px 60px;
  text-align:center;
  color:var(--paper);
  position:relative;
  overflow:hidden;
}
.big-cta-inner::before{
  content:"";
  position:absolute;
  top:20px;left:20px;
  width:40px;height:40px;
  background:var(--mint);
  border-radius:12px;
  background-image:
    linear-gradient(var(--navy) 1.5px, transparent 1.5px) 0 0 / 25% 25%,
    linear-gradient(90deg, var(--navy) 1.5px, transparent 1.5px) 0 0 / 25% 25%;
  background-blend-mode:normal;
}
/* note: homepage includes background-blend-mode:normal; others omit it. Kept for parity with homepage. */
.big-cta h2{font-size:clamp(44px, 6vw, 86px);line-height:0.98;letter-spacing:-0.03em;margin-bottom:20px;font-family:var(--display);font-weight:900;color:var(--paper)}

/* .big-cta h2 em — CONFLICT: homepage adds font-family:var(--display); others just color */
/* from popwaffle-homepage-v2.html */
.big-cta h2 em{font-style:normal;color:var(--mint);font-family:var(--display)}
/* from popwaffle-goods-v1.html, popwaffle-legend-v1.html, popwaffle-agency-v1.html, popwaffle-cred-v1.html */
/* .big-cta h2 em{font-style:normal;color:var(--mint)} */

.big-cta h2 .script{font-family:var(--script);font-weight:700;font-style:italic;color:var(--pink);font-size:0.92em;letter-spacing:0;display:inline-block;transform:rotate(-2deg)}
.big-cta p{font-size:18px;color:rgba(253,249,243,0.8);max-width:540px;margin:0 auto 36px}
.big-cta-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
@media (max-width:640px){.big-cta{padding:40px 20px}.big-cta-inner{padding:60px 28px}}

/* ----- Reveal animation (homepage only) ----- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1;transform:translateY(0)}


/* ----- Single insight (blog post) -----
   Editorial reading layout. Content column is constrained to ~680px for
   comfortable line length; images can break out wider if desired.
   Typography leans on the brand tokens — Archivo for headings, DM Sans
   for body, navy text on off background. */
.insight-single{background:var(--off)}

.insight-header{
  padding:72px 0 40px;
}
.insight-header .breadcrumb{
  font-family:var(--display);font-weight:700;font-size:11px;
  letter-spacing:0.18em;text-transform:uppercase;color:var(--navy);opacity:0.6;
}
.insight-header .breadcrumb a:hover{color:var(--pink-dk);opacity:1}

.insight-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  font-family:var(--display);font-weight:700;font-size:12px;
  letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-3);
  margin-bottom:24px;
}
.insight-topic{color:var(--pink-dk)}
.insight-meta-sep{opacity:0.4}

.insight-title{
  color:var(--navy);
  font-size:clamp(40px,5.5vw,76px);
  line-height:1;
  margin-bottom:24px;
  max-width:880px;
}

.insight-lead{
  max-width:720px;
  font-size:20px;
  color:var(--ink-2);
  line-height:1.5;
}

.insight-featured{padding:20px 0 40px}
.insight-featured-img{
  width:100%;height:auto;display:block;
  border-radius:16px;
  border:2px solid var(--navy);
}

.insight-body{padding:20px 0 60px}
.insight-content{
  max-width:680px;
  margin:0 auto;
  font-size:18px;
  line-height:1.7;
  color:var(--ink);
}
.insight-content p{margin-bottom:1.4em}
.insight-content h2{
  font-family:var(--display);font-weight:800;
  font-size:clamp(26px,2.4vw,34px);
  color:var(--navy);letter-spacing:-0.018em;line-height:1.2;
  margin:1.8em 0 0.6em;
}
.insight-content h3{
  font-family:var(--display);font-weight:800;
  font-size:clamp(22px,1.8vw,26px);
  color:var(--navy);letter-spacing:-0.01em;line-height:1.25;
  margin:1.6em 0 0.5em;
}
.insight-content h4{
  font-family:var(--display);font-weight:700;
  font-size:18px;color:var(--navy);letter-spacing:-0.005em;
  margin:1.4em 0 0.4em;
}
.insight-content a{color:var(--pink-dk);text-decoration:underline;text-underline-offset:3px}
.insight-content a:hover{color:var(--mint-dk)}
.insight-content strong{color:var(--navy);font-weight:700}
.insight-content em{font-style:italic}
.insight-content blockquote{
  margin:2em 0;padding:20px 28px;
  border-left:4px solid var(--pink-dk);
  font-family:var(--display);font-weight:500;font-size:20px;
  color:var(--navy);line-height:1.4;background:var(--pink-lt);
  border-radius:0 12px 12px 0;
}
.insight-content ul, .insight-content ol{margin:1em 0 1.4em 1.4em}
.insight-content li{margin-bottom:0.5em}
.insight-content hr{
  border:none;border-top:2px solid var(--line);
  margin:2em 0;
}
.insight-content code{
  background:rgba(43,43,84,0.06);
  padding:2px 6px;border-radius:4px;
  font-family:monospace;font-size:0.92em;
}

.insight-footer{padding:40px 0 80px}
.insight-tags{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  padding-bottom:36px;margin-bottom:36px;
  border-bottom:1px solid var(--line);
  max-width:680px;margin-left:auto;margin-right:auto;
}
.insight-tags .eyebrow{color:var(--ink-3);margin-right:6px}
.insight-tag{
  padding:6px 12px;border-radius:999px;
  background:var(--mint-lt);color:var(--navy);
  font-family:var(--display);font-weight:700;font-size:11px;
  letter-spacing:0.14em;text-transform:uppercase;
  transition:background .2s, color .2s;
}
.insight-tag:hover{background:var(--mint);color:var(--navy-dk)}

.insight-nav{
  display:grid;grid-template-columns:1fr auto 1fr;gap:24px;align-items:center;
  max-width:900px;margin:0 auto;
}
.insight-nav-prev, .insight-nav-next{
  display:flex;flex-direction:column;gap:6px;
  padding:16px 20px;border-radius:12px;
  transition:background .2s, transform .2s;
}
.insight-nav-next{text-align:right;align-items:flex-end}
.insight-nav-prev:hover, .insight-nav-next:hover{
  background:var(--paper);transform:translateY(-2px);
}
.insight-nav-prev .eyebrow, .insight-nav-next .eyebrow{color:var(--ink-3)}
.insight-nav-prev strong, .insight-nav-next strong{
  font-family:var(--display);font-weight:700;font-size:15px;
  color:var(--navy);letter-spacing:-0.005em;line-height:1.3;
}
.insight-nav-all{
  padding:12px 18px;border-radius:999px;
  background:var(--navy);color:var(--off);
  font-family:var(--display);font-weight:700;font-size:11px;
  letter-spacing:0.14em;text-transform:uppercase;
  white-space:nowrap;
  transition:background .2s;
}
.insight-nav-all:hover{background:var(--ink)}

@media (max-width:760px){
  .insight-header{padding:48px 0 32px}
  .insight-nav{grid-template-columns:1fr;gap:12px}
  .insight-nav-next{text-align:left;align-items:flex-start}
  .insight-nav-all{text-align:center}
}


/* ----- Lightbox (gallery image preview) -----
   Rendered once per page in single-case_study.php. Hidden by default.
   JS adds .open when a gallery thumbnail is clicked and sets the image src.
   Locks body scroll via .lightbox-open class on <body> while open. */
.lightbox{
  position:fixed;
  inset:0;
  background:rgba(14,19,40,0.92);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:100;
  padding:40px;
  opacity:0;
  visibility:hidden;
  transition:opacity .2s ease, visibility 0s linear .2s;
}
.lightbox.open{
  opacity:1;
  visibility:visible;
  transition:opacity .2s ease;
}
.lightbox-img{
  max-width:90vw;
  max-height:88vh;
  width:auto;
  height:auto;
  object-fit:contain;
  border-radius:8px;
  box-shadow:0 20px 60px rgba(0,0,0,0.4);
  /* Stops clicks on the image from bubbling to the overlay (which closes). */
  cursor:default;
}
.lightbox-close{
  position:absolute;
  top:24px;right:24px;
  width:48px;height:48px;
  background:transparent;
  border:2px solid rgba(253,249,243,0.4);
  border-radius:50%;
  color:var(--off);
  font-size:28px;
  line-height:1;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:border-color .2s ease, background .2s ease;
}
.lightbox-close:hover{
  border-color:var(--mint);
  background:rgba(95,212,180,0.1);
}
.lightbox-close:focus-visible{
  outline:3px solid var(--mint);
  outline-offset:3px;
}
/* Body-scroll lock while the lightbox is open. */
body.lightbox-open{overflow:hidden}

@media (max-width:640px){
  .lightbox{padding:20px}
  .lightbox-close{top:12px;right:12px;width:40px;height:40px;font-size:24px}
}