:root{
  --paper:#FFFFFF;
  --mist:#F4DCEB;
  --card:#FFFFFF;
  --ink:#0A060F;
  --soft:#544963;
  --faint:#8C7F98;
  --accent:#C13FE0;
  --accent-soft:#A855D6;
  --blush:#D883B2;
  --eggplant:#000000;
  --chrome-purple:#2A1442;
  --line:rgba(24,15,36,0.13);
  --band-bg:linear-gradient(155deg,#000000 0%,#1A0A2E 55%,#5C1F73 100%);
  --band-fg:#FFFFFF;
  --band-fg-soft:rgba(255,255,255,0.72);
  --tag-bg:rgba(193,63,224,0.08);
  --shadow-c:0,0,0;
}
/* Intentionally no @media (prefers-color-scheme: dark) override: every
   section on this site already declares its own light/dark treatment
   explicitly (.band vs .band.light), with literal colors chosen to match.
   Letting the OS theme silently swap the base tokens on top of that
   caused real dark-text-on-dark-background breakage in components that
   still referenced the adaptive tokens (e.g. .demo-card, related-service
   lists) instead of the explicit band colors. */

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:'Manrope',-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:'Fraunces',Georgia,serif;text-wrap:balance;margin:0;font-weight:600;}
p{margin:0;}
a{color:inherit;}
img{max-width:100%;display:block;}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace;}

.wrap{max-width:1180px;margin:0 auto;padding:0 32px;}
section{padding:88px 0;}
section.tight{padding:56px 0;}
@media (max-width:640px){
  .wrap{padding:0 20px;}
  section{padding:56px 0;}
}

.eyebrow{
  font-family:'Manrope',sans-serif;text-transform:uppercase;letter-spacing:.14em;
  font-size:.74rem;font-weight:700;color:var(--accent);
}

/* ---------- header ---------- */
.site-header{
  position:relative;z-index:50;background:var(--chrome-purple);
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.site-header .bar{display:flex;align-items:center;justify-content:space-between;padding:16px 32px;max-width:1180px;margin:0 auto;}
.site-header .logo img{height:28px;width:auto;}
.site-header nav{display:flex;align-items:center;gap:30px;}
.site-header nav a{font-size:.92rem;font-weight:600;text-decoration:none;color:rgba(247,239,251,0.78);position:relative;transition:color .2s ease;}
.site-header nav a:hover, .site-header nav a.active{color:var(--accent);}
/* Dropdown sits flush against the trigger (top:100%, zero gap) so there is no dead zone
   to cross on the way down — a gapped dropdown reliably closes itself mid-hover. Visual
   breathing room comes from the dropdown's own padding-top instead of a position offset. */
.nav-services{position:relative;}
.nav-services .dropdown{
  position:absolute;top:100%;left:50%;transform:translateX(-50%);
  padding-top:14px;
  min-width:250px;
  opacity:0;pointer-events:none;transition:opacity .2s ease, transform .2s ease;
}
.nav-services .dropdown-inner{
  background:#2E1A4A;border:1px solid rgba(255,255,255,0.12);border-radius:14px;padding:10px;
  box-shadow:0 20px 40px rgba(0,0,0,0.35);
}
.nav-services:hover .dropdown, .nav-services:focus-within .dropdown{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0);}
.nav-services .dropdown a{display:block;padding:9px 12px;border-radius:8px;font-size:.88rem;color:rgba(247,239,251,0.85);transition:color .2s ease;}
.nav-services .dropdown a:hover, .nav-services .dropdown a.active{background:rgba(255,255,255,0.08);color:var(--accent);}
.site-header .header-cta{display:none;}
@media (min-width:860px){.site-header .header-cta{display:inline-flex;}}
.mobile-toggle{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:10px;cursor:pointer;padding:0;width:44px;height:44px;transition:background .2s ease;}
.mobile-toggle:hover{background:rgba(255,255,255,.16);}
.mt-bar{display:block;width:18px;height:2px;border-radius:2px;background:#fff;transition:transform .25s ease, opacity .2s ease;}
.mobile-toggle.is-open .mt-bar:nth-child(1){transform:translateY(7px) rotate(45deg);}
.mobile-toggle.is-open .mt-bar:nth-child(2){opacity:0;}
.mobile-toggle.is-open .mt-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
@media (min-width:860px){.mobile-toggle{display:none;}}
.site-header nav.desktop-nav{display:none;}
@media (min-width:860px){.site-header nav.desktop-nav{display:flex;}}
.mobile-panel{
  display:none;flex-direction:column;gap:2px;padding:8px 32px 20px;border-top:1px solid rgba(255,255,255,0.1);
}
.mobile-panel.open{display:flex;}
.mobile-panel a{padding:10px 0;font-size:.95rem;font-weight:600;text-decoration:none;color:rgba(247,239,251,0.82);transition:color .2s ease;}
.mobile-panel a:hover, .mobile-panel a.active{color:var(--accent);}
@media (min-width:860px){.mobile-panel{display:none !important;}}

/* ---------- buttons ---------- */
.btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;}
.btn{
  display:inline-flex;align-items:center;gap:8px;padding:14px 26px;border-radius:999px;
  background:linear-gradient(120deg,var(--accent),var(--accent-soft));color:#fff;font-weight:700;
  font-size:.95rem;text-decoration:none;border:none;cursor:pointer;
  box-shadow:0 10px 26px rgba(193,63,224,0.28);transition:transform .25s ease, box-shadow .25s ease;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(193,63,224,0.36);}
.btn.small{padding:11px 20px;font-size:.85rem;}
.btn-ghost{
  padding:14px 26px;border-radius:999px;border:1.5px solid var(--accent);color:var(--accent);
  font-weight:700;font-size:.95rem;text-decoration:none;background:transparent;
  transition:background .25s ease;
}
.btn-ghost:hover{background:var(--tag-bg);}
.btn-ghost.on-dark{border-color:rgba(255,255,255,0.5);color:#fff;}
.btn-ghost.on-dark:hover{background:rgba(255,255,255,0.1);}
.btn-text{color:var(--accent);font-weight:700;font-size:.92rem;text-decoration:none;position:relative;padding-bottom:2px;}
.btn-text::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1.5px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.22,1,.36,1);
}
.btn-text:hover::after{transform:scaleX(1);}
.btn-text.on-dark{color:#fff;}

/* ---------- hero (legacy split layout, still used on subpages) ---------- */
.hero{padding:76px 0 60px;}
.hero .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;}
@media (max-width:900px){.hero .grid{grid-template-columns:1fr;}}
.hero h1{font-size:clamp(2.3rem,5vw,3.6rem);}
.hero .sub{color:var(--soft);font-size:1.1rem;margin-top:20px;max-width:520px;}
.hero .btn-row{margin-top:28px;}
.hero-video{
  position:relative;border-radius:22px;overflow:hidden;aspect-ratio:4/5;
  background:linear-gradient(160deg,#24123A 0%,#C13FE0 60%,#F4DCEB 130%);
  box-shadow:0 30px 60px rgba(var(--shadow-c),0.16);
}
.hero-video video{width:100%;height:100%;object-fit:cover;position:relative;z-index:1;}
.hero-video.small{aspect-ratio:16/10;}

/* ---------- hero (full-bleed cinematic video, Home) ---------- */
.hero-full{
  position:relative;height:100vh;min-height:640px;max-height:980px;
  display:flex;align-items:center;overflow:hidden;background:var(--eggplant);
}
.hero-bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.hero-scrim{
  position:absolute;inset:0;z-index:1;
  /* two soft layers: a left-side wash sitting behind where the text column
     actually lives (text is left-aligned within the centered .wrap), plus
     the original top/bottom vignette — both gradients, no hard edges, so
     the video still reads clearly on the right and at the vertical center. */
  background:
    linear-gradient(100deg, rgba(8,4,14,.62) 0%, rgba(8,4,14,.34) 38%, rgba(8,4,14,0) 66%),
    linear-gradient(180deg, rgba(15,9,20,.46) 0%, rgba(20,10,32,.22) 42%, rgba(13,8,20,.72) 100%);
}
.hero-content{position:relative;z-index:2;color:#fff;}
.hero-content .eyebrow{color:var(--blush);}
.hero-content h1{color:var(--accent);font-size:clamp(2.6rem,6vw,4.4rem);line-height:1.05;text-transform:uppercase;letter-spacing:.01em;}
.hero-content .sub{color:rgba(255,255,255,.84);font-size:1.15rem;margin-top:22px;max-width:560px;}
.hero-content .btn-row{margin-top:32px;}
.kline{display:block;overflow:hidden;opacity:0;transform:translateY(100%);animation:klineIn .9s cubic-bezier(.22,1,.36,1) forwards;}
@keyframes klineIn{to{opacity:1;transform:translateY(0);}}
.kinetic{opacity:0;animation:fadeUp .7s ease forwards;}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
.scroll-cue{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);z-index:2;}
.scroll-cue span{display:block;width:1px;height:36px;background:rgba(255,255,255,.45);position:relative;overflow:hidden;}
.scroll-cue span::after{content:"";position:absolute;top:-50%;left:0;width:100%;height:50%;background:#fff;animation:scrollCue 2.2s ease-in-out infinite;}
@keyframes scrollCue{0%{top:-50%;}100%{top:100%;}}
@media (max-width:640px){.hero-full{height:auto;min-height:88vh;padding:130px 0 60px;}}

/* subpage video heroes now match the homepage's full-bleed cinematic hero exactly —
   same height, same scale — so every page opens with the same weight and presence */
.hero-content .route-tag{background:rgba(255,255,255,.14);color:rgba(255,255,255,.85);}
@media (prefers-reduced-motion: reduce){
  .kline, .kinetic{opacity:1 !important;transform:none !important;animation:none !important;}
  .scroll-cue span::after{animation:none;top:20%;}
}

/* magnetic CTA */
.magnetic{transition:transform .25s cubic-bezier(.22,1,.36,1);}

/* ---------- marquee ticker ---------- */
.marquee{overflow:hidden;border-bottom:1px solid rgba(255,255,255,.1);padding:16px 0;background:var(--eggplant);}
.marquee-track{display:flex;width:max-content;gap:16px;animation:marquee 30s linear infinite;}
.marquee-track span{font-family:'IBM Plex Mono',monospace;font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:rgba(247,239,251,.55);white-space:nowrap;}
.marquee-track .dot{color:var(--accent);}
.marquee:hover .marquee-track{animation-play-state:paused;}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (prefers-reduced-motion: reduce){.marquee-track{animation:none;}}

/* ---------- grain texture (dark bands) ---------- */
.grain{position:relative;}
.grain::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ---------- watercolor wash accents on light sections ---------- */
.wash-accent{position:relative;overflow:hidden;}

/* ---------- paint-splash / watercolor-mask decorations ---------- */
.splash-decor{
  position:absolute;z-index:0;pointer-events:none;
  --py:0px;--r:0deg;--end-op:.85;
  opacity:0;
  transform:scale(.15) translateY(var(--py)) rotate(var(--r));
}
.splash-decor.soft{--end-op:.42;}
/* brush-flick entrance: snaps in small and rotated, overshoots like a splatter, settles */
@keyframes splashIn{
  0%  {opacity:0;   transform:scale(.15) translateY(var(--py)) rotate(calc(var(--r) - 26deg));}
  50% {opacity:1;   transform:scale(1.2) translateY(var(--py)) rotate(calc(var(--r) + 9deg));}
  75% {opacity:var(--end-op); transform:scale(.92) translateY(var(--py)) rotate(calc(var(--r) - 3deg));}
  100%{opacity:var(--end-op); transform:scale(1)   translateY(var(--py)) rotate(var(--r));}
}
.splash-decor.is-in{
  animation: splashIn .8s cubic-bezier(.22,1,.36,1) forwards,
             inkBreathe 8s ease-in-out .8s infinite;
}
.splash-decor.soft.is-in{
  animation: splashIn .8s cubic-bezier(.22,1,.36,1) forwards,
             inkBreatheSoft 8s ease-in-out .8s infinite;
}
/* brush-stroke variant: dragged on like a real bristle swipe, not a splatter pop */
.splash-decor.stroke{transform:scaleX(.08) scaleY(.7) translateY(var(--py)) rotate(var(--r));}
@keyframes strokeIn{
  0%  {opacity:0;   transform:scaleX(.08) scaleY(.7) translateY(var(--py)) rotate(var(--r));}
  60% {opacity:1;   transform:scaleX(1.1) scaleY(1.04) translateY(var(--py)) rotate(var(--r));}
  100%{opacity:var(--end-op); transform:scaleX(1) scaleY(1) translateY(var(--py)) rotate(var(--r));}
}
.splash-decor.stroke.is-in{
  animation: strokeIn .65s cubic-bezier(.22,1,.36,1) forwards,
             inkBreathe 8s ease-in-out .65s infinite;
  transform-origin:left center;
}
.splash-decor.stroke.soft.is-in{animation-name:strokeIn, inkBreatheSoft;}
@keyframes inkBreathe{0%,100%{opacity:.8;filter:saturate(1) blur(0px);}50%{opacity:1;filter:saturate(1.3) blur(.4px);}}
@keyframes inkBreatheSoft{0%,100%{opacity:.32;filter:saturate(1) blur(0px);}50%{opacity:.55;filter:saturate(1.25) blur(.4px);}}
@media (prefers-reduced-motion: reduce){
  .splash-decor{animation:none !important;opacity:var(--end-op);transform:scale(1) translateY(0) rotate(var(--r));}
}
/* Keep the paint decor on mobile too (same visual language as desktop) — just capped
   smaller so a blot sized for a 1400px band doesn't swallow a 375px screen. max-width
   wins over the literal px width JS sets inline, so this works without touching JS. */
@media (max-width:760px){
  .splash-decor{max-width:150px;}
  .splash-decor.stroke{max-width:190px;}
}

/* content image placeholder slots (real assets drop in later) */
.img-slot{
  border:1.5px dashed rgba(255,255,255,.32);border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  aspect-ratio:4/3;background:rgba(255,255,255,.05);position:relative;z-index:1;
  color:rgba(255,255,255,.55);font-family:'IBM Plex Mono',monospace;font-size:.7rem;
  text-transform:uppercase;letter-spacing:.06em;text-align:center;padding:20px;
}
.band.light .img-slot{border-color:rgba(24,15,36,.22);background:rgba(255,255,255,.4);color:#8C7F98;}
.img-slot.wide{aspect-ratio:21/9;}
.img-slot.tall{aspect-ratio:auto;align-self:stretch;min-height:100%;}
@media (max-width:860px){.img-slot.tall{aspect-ratio:3/4;min-height:0;}}
.img-slot.filled{border-style:solid;border-color:rgba(255,255,255,.14);background:none;padding:0;overflow:hidden;}
.band.light .img-slot.filled{border-color:rgba(24,15,36,.1);}
.img-slot.filled img,.img-slot.filled video{width:100%;height:100%;object-fit:cover;display:block;}

/* large tech motifs (gears, circuit/microchip traces) — the "AI" counterweight to the watercolor softness */
.tech-decor{position:absolute;z-index:0;pointer-events:none;opacity:.5;filter:drop-shadow(0 0 30px rgba(193,63,224,.25));}
.tech-decor.gear{animation:techSpin 50s linear infinite;}
.tech-decor.gear.rev{animation-direction:reverse;animation-duration:64s;}
.tech-decor.circuit{animation:techPulse 6.5s ease-in-out infinite;}
@keyframes techSpin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
@keyframes techPulse{0%,100%{opacity:.35;}50%{opacity:.6;}}
@media (prefers-reduced-motion: reduce){
  .tech-decor.gear{animation:none;}
  .tech-decor.circuit{animation:none;opacity:.5;}
}
@media (max-width:760px){.tech-decor{max-width:170px;}}

/* ---------- technical / AI counterpoint (balances the watercolor softness) ---------- */
body{
  background-color:var(--paper);
  background-image:radial-gradient(rgba(24,15,36,0.05) 1px, transparent 1px);
  background-size:24px 24px;
}
@media (prefers-color-scheme: dark){
  body{background-image:radial-gradient(rgba(244,238,251,0.045) 1px, transparent 1px);}
}

.hud-corner{position:absolute;width:34px;height:34px;pointer-events:none;z-index:3;opacity:.55;}
.hud-corner.tl{top:22px;left:22px;border-top:1.5px solid rgba(255,255,255,.7);border-left:1.5px solid rgba(255,255,255,.7);}
.hud-corner.br{bottom:22px;right:22px;border-bottom:1.5px solid rgba(255,255,255,.7);border-right:1.5px solid rgba(255,255,255,.7);}

.hud-chip{
  position:absolute;z-index:3;display:flex;align-items:center;gap:8px;
  background:rgba(15,9,20,.4);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(6px);
  border-radius:999px;padding:8px 14px;font-family:'IBM Plex Mono',monospace;
  font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.82);
}
.hud-chip .dot{width:6px;height:6px;border-radius:50%;background:#7CF29C;box-shadow:0 0 8px #7CF29C;animation:pulseDot 2s ease-in-out infinite;}
@keyframes pulseDot{0%,100%{opacity:1;}50%{opacity:.35;}}
@media (prefers-reduced-motion: reduce){.hud-chip .dot{animation:none;}}
/* Homepage-hero-only badge. Used to float bottom-left via position:absolute, but that
   measures from hero-content's own box — which is sized to its in-flow content only
   (the chip is out of flow), so "bottom:56px" could land the chip on top of the button
   row whenever the flowed content was short enough. Flowing it in normal document order,
   right after the buttons, is simple and never collides regardless of content length
   or viewport width. */
.hero-hud-chip{position:static;display:inline-flex;margin-top:24px;}

.scanline{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1;}
.scanline::before{
  content:"";position:absolute;left:0;right:0;height:120px;
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.08), transparent);
  animation:scan 9s linear infinite;
}
@keyframes scan{0%{top:-120px;}100%{top:100%;}}
@media (prefers-reduced-motion: reduce){.scanline::before{animation:none;display:none;}}

.coord-tag{font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.08em;color:var(--faint);}
.band .coord-tag{color:rgba(247,239,251,.45);}

/* ---------- bento grid (dark band cards) ---------- */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,minmax(150px,auto));gap:20px;margin-top:32px;}
.bento .b-card:nth-child(1){grid-column:1 / 3;grid-row:1 / 3;}
.bento .b-card:nth-child(2){grid-column:3 / 5;grid-row:1;}
.bento .b-card:nth-child(3){grid-column:3;grid-row:2;}
.bento .b-card:nth-child(4){grid-column:4;grid-row:2;}
.bento .b-card.featured h4{font-size:1.4rem;}
.bento .b-card.featured p{font-size:1rem;max-width:320px;}
@media (max-width:900px){
  .bento{grid-template-columns:1fr;grid-template-rows:auto;}
  .bento .b-card{grid-column:auto !important;grid-row:auto !important;}
}

/* ---------- sections ---------- */
h2.section-title{font-size:clamp(1.5rem,2.8vw,2.15rem);margin-bottom:10px;}
.section-intro{color:var(--soft);max-width:640px;margin-top:10px;}
.grid{display:grid;gap:20px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:860px){.grid-2,.grid-3{grid-template-columns:1fr;}}
/* on the services overview page, alternating left/right image placement
   (for desktop visual rhythm) means two img-slots can land back-to-back
   once grid-2 collapses to one column on mobile; force text first, image
   second every time so images never stack directly on each other. */
@media (max-width:860px){.svc-split .img-slot{order:2;}}
/* grid-4 gets a 2-column tablet stop instead of jumping straight to 1 —
   four short cards (or eight service cards) read cleanly as 2x2 or 4x2,
   never as an odd 3-then-remainder split. */
@media (max-width:860px){.grid-4{grid-template-columns:1fr;}}

.card{
  background:var(--card);border:1px solid var(--line);border-radius:18px;padding:26px;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(var(--shadow-c),0.12);border-color:var(--accent-soft);}
.card h4{font-size:1.05rem;margin-bottom:8px;}
.card p{color:var(--soft);font-size:.95rem;}

.service-card{
  display:block;text-decoration:none;color:inherit;background:var(--card);border:1px solid var(--line);
  border-radius:18px;padding:28px;transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.service-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(var(--shadow-c),0.12);border-color:var(--accent-soft);}
.service-card h3{font-size:1.2rem;margin-bottom:8px;}
.service-card p{color:var(--soft);font-size:.92rem;}
.service-card .tag{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);font-weight:700;margin-top:14px;display:block;}

/* ---------- growth system: clusters the 8 existing services into the
   attract / convert / operate stages of one funnel, always used inside a
   dark .band (no light-band variant needed — see .service-card.on-black
   for why hardcoded dark-context colors are safe here). ---------- */
.growth-system{margin-top:36px;}
.gs-stage{padding:26px 0;border-top:1px solid rgba(255,255,255,.14);}
.gs-stage:first-child{border-top:none;padding-top:0;}
.gs-stage-head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:18px;}
.gs-label{font-family:'IBM Plex Mono',monospace;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);font-weight:600;}
.gs-stage-head p{color:var(--band-fg-soft);font-size:.95rem;margin:0;}
.gs-services{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;}
.gs-arrow{text-align:center;font-size:1.2rem;color:var(--band-fg-soft);opacity:.5;}
.gs-connector{margin-top:40px;display:flex;align-items:center;justify-content:center;gap:16px;font-family:'Fraunces',serif;font-size:clamp(1.1rem,2.6vw,1.7rem);font-weight:600;color:var(--band-fg);text-align:center;flex-wrap:wrap;}
.gs-x{color:var(--accent);font-size:1.15em;}

.feature-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;}
.feature-list li{display:flex;gap:10px;font-size:.96rem;color:var(--soft);}
.feature-list li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);margin-top:9px;flex:none;}
.feature-list li strong{color:var(--ink);}
.band.flat .feature-list li{color:var(--band-fg-soft);}
.band.flat .feature-list li strong{color:var(--band-fg);}

/* ---------- legal-copy: long-form prose for Privacy/Terms/Blog pages ---------- */
.legal-copy p, .article-copy p{line-height:1.7;margin-top:14px;}
.legal-copy h3, .article-copy h2{font-size:1.15rem;margin-top:36px;}
.legal-copy .feature-list, .article-copy .feature-list{margin-top:14px;}
.legal-copy > p:first-child, .article-copy > p:first-child{margin-top:0;}
.article-copy ul{margin-top:14px;padding-left:22px;}
.article-copy li{line-height:1.6;margin-top:8px;}
.band.light .article-copy li{color:#544963;}
.band.light .article-copy li strong{color:#0A060F;}

.cat-jump{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;}
.cat-jump a{font-size:.82rem;font-weight:600;padding:8px 14px;border-radius:20px;border:1px solid rgba(247,239,251,.18);color:inherit;text-decoration:none;transition:border-color .2s ease,color .2s ease;}
.cat-jump a:hover{border-color:var(--accent);color:var(--accent);}

.tools-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px;}
@media (max-width:900px){.tools-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.tools-grid{grid-template-columns:1fr;}}
.tool-card{border-radius:14px;padding:18px 20px;border:1px solid rgba(24,15,36,.1);display:flex;flex-direction:column;gap:8px;transition:border-color .2s ease,transform .2s ease;}
.tool-card:hover{border-color:var(--accent);transform:translateY(-2px);}
.tool-card h4{font-size:1rem;}
.tool-card p{font-size:.88rem;line-height:1.5;flex:1;}
.tool-card .tool-link{font-size:.8rem;font-weight:600;color:var(--accent);text-decoration:none;}
.tool-card .tool-link:hover{text-decoration:underline;}
.band.flat .tool-card{border-color:rgba(247,239,251,.14);}
.band.light .tool-card{border-color:rgba(24,15,36,.1);}
.band.light .tool-card p{color:#544963;}
.band.flat .tool-card p{color:var(--band-fg-soft);}
.tool-card .tool-head{display:flex;align-items:center;flex-wrap:wrap;gap:7px;}
.badge-free{display:inline-block;font-size:.6rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:3px 8px;border-radius:20px;background:#F9D9EF;color:#A31C9C;white-space:nowrap;}

.tool-subcat{margin-top:34px;}
.tool-subcat:first-child{margin-top:24px;}
.subcat-title{font-size:1.02rem;font-weight:600;margin:0 0 14px;color:var(--accent);}
.tool-subcat .tools-grid{margin-top:0;}

.blog-list{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
@media (max-width:1100px){.blog-list{grid-template-columns:repeat(3,1fr);}}
@media (max-width:640px){.blog-list{grid-template-columns:repeat(2,1fr);}}
@media (max-width:420px){.blog-list{grid-template-columns:1fr;}}
.blog-list-item{display:flex;flex-direction:column;padding:22px 20px;border-radius:14px;border:1px solid rgba(24,15,36,.1);text-decoration:none;transition:border-color .2s ease,transform .2s ease;}
.blog-list-item:hover{border-color:var(--accent);transform:translateY(-2px);}
.blog-list-item h2{font-size:1.06rem;line-height:1.35;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.blog-list-item p{color:#544963;font-size:.85rem;line-height:1.5;flex:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.blog-list-item .tag{color:var(--accent);font-size:.8rem;font-weight:600;}
/* hardcoded, not var(--soft): .band.light's bg is fixed white regardless of OS theme, but
   --soft flips light in dark mode — same bug class as the h1-h4/p fix above */
.band.light .feature-list li{color:#544963;}
.band.light .feature-list li strong{color:#0A060F;}

.integration-note{background:var(--mist);border-radius:14px;padding:20px 22px;border-left:3px solid var(--accent);}
.integration-note .tag-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);font-weight:700;}
.integration-note p{font-size:.92rem;color:var(--soft);margin-top:8px;}
/* .integration-note keeps its own light mist background even inside a black .band section
   (see index.html's "Proof of credibility" block) — needs higher specificity than the
   generic .band p rule so it doesn't inherit near-white text meant for the black bg */
.band.light .integration-note p, .band.flat .integration-note p{color:var(--soft);}

.process{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:24px;margin-top:10px;}
.process.cols-3{grid-template-columns:repeat(3,1fr);column-gap:96px;}
.process.cols-4{grid-template-columns:repeat(4,1fr);}
/* homepage's 7-step process: 4 then 3 on desktop, straight to a single
   column on mobile — no 2-column tablet stop, unlike .cols-4. */
.process.cols-4-3{grid-template-columns:repeat(4,1fr);}
@media (max-width:860px){.process,.process.cols-3,.process.cols-4-3{grid-template-columns:1fr;}}
@media (max-width:980px){.process.cols-4{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.process.cols-4{grid-template-columns:1fr;}}
.process .step .n{font-family:'Fraunces',serif;color:var(--blush);font-size:1.5rem;}
.process .step h4{margin-top:10px;font-size:1.02rem;}
.process .step p{color:var(--soft);font-size:.9rem;margin-top:6px;}
.process .step h4{color:var(--ink);}
.band.flat .process .step h4{color:var(--band-fg);}
.band.flat .process .step p{color:var(--band-fg-soft);}

/* ---------- flow diagram: sequence of steps (call flows, ad funnels, pipelines).
   Fixed column-count grid so a short trailing row never stretches to fill the
   space; it just leaves the unused columns empty. Default is 4 columns; add
   .cols-3 on a specific instance when its step count divides evenly by 3
   instead (e.g. exactly 6 steps -> a clean 2x3). Sequence is carried by the
   numbered/labeled badge on each card, not by connector arrows, which have no
   sensible direction once a chain wraps onto a second row. ---------- */
.flow-diagram{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:32px;position:relative;z-index:1;}
.flow-diagram.cols-3{grid-template-columns:repeat(3,1fr);}
.flow-diagram.cols-5{grid-template-columns:repeat(5,1fr);}
.flow-diagram.cols-center{display:flex;flex-wrap:wrap;justify-content:center;}
.flow-diagram.cols-center .flow-step{flex:0 1 250px;}
.flow-diagram.cols-3-2{grid-template-columns:repeat(3,1fr);}
@media (max-width:860px){.flow-diagram,.flow-diagram.cols-3,.flow-diagram.cols-5,.flow-diagram.cols-3-2{grid-template-columns:1fr;}.flow-diagram.cols-center .flow-step{flex-basis:100%;}}
.flow-diagram .flow-step{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  border-radius:14px;padding:20px 18px;min-width:0;
}
.flow-diagram .flow-step .n{font-family:'IBM Plex Mono',monospace;font-size:.68rem;color:var(--accent);letter-spacing:.1em;text-transform:uppercase;}
.flow-diagram .flow-step h4{margin-top:8px;font-size:.98rem;}
.flow-diagram .flow-step p{margin-top:6px;font-size:.82rem;color:var(--band-fg-soft);line-height:1.45;}
.flow-diagram .flow-arrow{display:none;}
.band.light .flow-diagram .flow-step{background:rgba(24,15,36,.04);border-color:rgba(24,15,36,.1);}
.band.light .flow-diagram .flow-step h4{color:#0A060F;}
.band.light .flow-diagram .flow-step p{color:#544963;}

/* ---------- converging channels into one layer (AI Chat & Messaging) ---------- */
.converge{margin-top:32px;position:relative;z-index:1;}
.converge .channels{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;}
.converge .channel-chip{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:999px;
  padding:9px 18px;font-size:.8rem;font-family:'IBM Plex Mono',monospace;letter-spacing:.02em;color:var(--band-fg-soft);
}
.band.light .converge .channel-chip{background:rgba(24,15,36,.04);border-color:rgba(24,15,36,.12);color:#544963;}
.converge .converge-line{width:1px;height:26px;background:linear-gradient(var(--accent),transparent);margin:4px auto;opacity:.6;}
.converge .layer-box{
  max-width:440px;margin:0 auto;text-align:center;background:linear-gradient(120deg,var(--accent),var(--accent-soft));
  color:#fff;border-radius:16px;padding:18px 26px;font-family:'Fraunces',serif;font-weight:600;font-size:1.08rem;
  box-shadow:0 16px 34px rgba(193,63,224,.28);
}

/* ---------- deliverables checklist ("what you actually get") ---------- */
.deliverables{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:13px 30px;position:relative;z-index:1;}
@media (max-width:700px){.deliverables{grid-template-columns:1fr;}}
.deliverables li{display:flex;gap:11px;align-items:flex-start;font-size:.94rem;color:var(--band-fg-soft);line-height:1.4;}
.deliverables li::before{content:"✓";flex:none;color:var(--accent);font-weight:700;font-family:'IBM Plex Mono',monospace;font-size:.82rem;margin-top:2px;}
.band.light .deliverables li{color:#544963;}

/* ---------- capability stat strip (what the system does, not claimed results —
   no fabricated performance numbers, per brand voice guide) ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:28px;}
.stat-grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
@media (max-width:980px){.stat-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:520px){.stat-grid,.stat-grid.cols-2{grid-template-columns:1fr;}}
.stat-tile{text-align:center;padding:22px 14px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);min-width:0;}
.stat-tile .num{font-family:'Fraunces',serif;font-size:clamp(1.4rem,4vw,2rem);font-weight:600;color:var(--accent);line-height:1.15;overflow-wrap:break-word;}
.stat-tile .label{margin-top:8px;font-size:.8rem;color:var(--band-fg-soft);line-height:1.4;}
.band.light .stat-tile{background:rgba(24,15,36,.04);border-color:rgba(24,15,36,.1);}
.band.light .stat-tile .label{color:#544963;}
.band.light .stat-tile .num{color:#C13FE0;}

/* ---------- sample call transcript (AI Phone Agents: "listen to the agent" without
   a real audio file — a realistic transcript card carries the same idea). ---------- */
.call-transcript{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:26px 28px;max-width:640px;margin-top:28px;position:relative;z-index:1;}
.transcript-head{display:flex;align-items:center;gap:8px;font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:20px;}
.transcript-head .live-dot{width:7px;height:7px;border-radius:50%;background:#4ade80;display:inline-block;box-shadow:0 0 0 3px rgba(74,222,128,.18);}
.transcript-line{display:flex;gap:16px;margin-top:16px;}
.transcript-line:first-child{margin-top:0;}
.transcript-line .who{flex:none;width:60px;font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--band-fg-soft);padding-top:3px;}
.transcript-line.agent .who{color:var(--accent);}
.transcript-line p{margin:0;font-size:.95rem;line-height:1.55;}
.band.light .call-transcript{background:rgba(24,15,36,.04);border-color:rgba(24,15,36,.1);}

/* ---------- integration row: small pill badges for what a system plugs into,
   lighter-weight than a full card grid so it doesn't compete with the main flow. ---------- */
.integration-row{display:grid;grid-template-columns:repeat(3,1fr);justify-items:start;gap:14px;margin-top:28px;position:relative;z-index:1;}
@media (max-width:700px){.integration-row{grid-template-columns:1fr;}}
.integration-chip{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:11px 22px 11px 16px;font-size:.92rem;font-weight:600;color:var(--band-fg);}
.integration-chip .n{font-family:'IBM Plex Mono',monospace;font-size:.68rem;color:var(--accent);}
.band.light .integration-chip{background:rgba(24,15,36,.04);border-color:rgba(24,15,36,.1);color:#0A060F;}

/* ---------- FAQ: native <details>/<summary> so the accordion works with zero JS
   and is keyboard/screen-reader accessible by default. ---------- */
.faq-list{max-width:760px;margin-top:28px;position:relative;z-index:1;}
.faq-item{border-bottom:1px solid var(--line);padding:18px 0;}
.faq-item summary{cursor:pointer;font-weight:600;font-size:1rem;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;color:var(--ink);}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+";font-family:'IBM Plex Mono',monospace;color:var(--accent);font-size:1.3rem;flex:none;transition:transform .2s ease;line-height:1;}
.faq-item[open] summary::after{transform:rotate(45deg);}
.faq-item p{margin:12px 0 0;color:var(--soft);font-size:.94rem;line-height:1.6;max-width:640px;}
.band.flat .faq-item summary{color:var(--band-fg);}
.band.flat .faq-item p{color:var(--band-fg-soft);}
.band.flat .faq-item{border-color:rgba(255,255,255,.14);}

/* ---------- demo card: lighter-weight service-card variant for "see an example"
   links, with a small status tag instead of the full service-card treatment. ---------- */
.demo-card{display:block;text-decoration:none;color:inherit;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px;transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;}
.demo-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(var(--shadow-c),0.12);border-color:var(--accent-soft);}
.demo-card h4{font-size:1rem;margin-top:10px;}
.demo-card p{color:var(--soft);font-size:.88rem;margin-top:6px;}
.demo-card .tag{margin-top:14px;display:inline-block;font-size:.82rem;color:var(--accent);font-weight:600;}

/* ---------- illustrative mock dashboard: makes an abstract "AI optimizes your
   campaigns" claim concrete without presenting fabricated client numbers as
   real — always paired with an explicit "illustrative example" tag. ---------- */
.mock-dashboard{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:26px 28px;margin-top:28px;position:relative;z-index:1;}
.mock-dashboard-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:20px;}
.mock-dashboard-head .tag-label{font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--band-fg-soft);}
.mock-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.mock-metric{background:rgba(255,255,255,.04);border-radius:10px;padding:16px;min-width:0;}
.mock-metric .val{font-family:'Fraunces',serif;font-size:1.5rem;font-weight:600;color:var(--accent);}
.mock-metric .lbl{font-size:.76rem;color:var(--band-fg-soft);margin-top:4px;}
.mock-metric .trend{font-size:.72rem;margin-top:6px;color:#4ade80;font-weight:600;}
@media (max-width:700px){.mock-metrics{grid-template-columns:repeat(2,1fr);}}
.band.light .mock-dashboard{background:rgba(24,15,36,.04);border-color:rgba(24,15,36,.1);}
.band.light .mock-metric{background:rgba(24,15,36,.03);}
.band.light .mock-dashboard-head .tag-label{color:#544963;}
.band.light .mock-metric .lbl{color:#544963;}
.band.light .mock-metric .trend{color:#1a9a52;}

/* ---------- before / after: two-card comparison for a literal transformation
   (same site, two states), distinct from .compare which argues template vs
   custom in the abstract. ---------- */
.before-after{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:28px;position:relative;z-index:1;}
@media (max-width:700px){.before-after{grid-template-columns:1fr;}}
.ba-col{border-radius:16px;padding:24px 26px;border:1px solid var(--line);}
.ba-col .tag-label{font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;}
.ba-col ul{list-style:none;margin:16px 0 0;padding:0;}
.ba-col li{padding:8px 0;font-size:.92rem;border-top:1px solid var(--line);}
.ba-col li:first-child{border-top:none;}
.ba-col.before{background:rgba(255,255,255,.03);opacity:.75;}
.ba-col.before .tag-label{color:var(--band-fg-soft);}
.ba-col.after{background:rgba(255,255,255,.06);border-color:var(--accent-soft);}
.ba-col.after .tag-label{color:var(--accent);}
.band.light .ba-col{border-color:rgba(24,15,36,.1);}
.band.light .ba-col.before{background:rgba(24,15,36,.03);}
.band.light .ba-col.after{background:rgba(193,63,224,.06);}
.band.light .ba-col li{border-color:rgba(24,15,36,.08);color:#544963;}
.band.light .ba-col.before .tag-label{color:#544963;}

.table-wrap{overflow-x:auto;}
table.compare{width:100%;border-collapse:collapse;margin-top:10px;}
table.compare th,table.compare td{padding:13px 14px;text-align:left;border-bottom:1px solid var(--line);font-size:.92rem;}
table.compare th{color:var(--faint);font-weight:700;text-transform:uppercase;font-size:.68rem;letter-spacing:.08em;}
table.compare td.hl{color:var(--accent);font-weight:700;}

.divider{display:flex;align-items:center;gap:14px;margin:16px 0;color:var(--faint);}
.divider .line{flex:1;height:1px;background:var(--line);}
.divider .mark{font-family:'Fraunces',serif;font-size:.85rem;}

/* ---------- band (dark section) ---------- */
.band{background:var(--band-bg);color:var(--band-fg);position:relative;overflow:hidden;}
.band.flat{background:var(--eggplant);}

/* white variant, alternated with the black bands for high-contrast rhythm.
   Background is deliberately fixed white regardless of OS theme, so every text color
   in here MUST be hardcoded too, never the --ink/--soft/--faint theme variables — those
   flip to near-white in dark mode and would put white text on this white background. */
.band.light{background:#FFFFFF;}
.band.light .eyebrow{color:#C13FE0;}
.band.light p{color:#544963;}
.band.light h1, .band.light h2, .band.light h3, .band.light h4{color:#0A060F;}
.band.light .coord-tag{color:#8C7F98;}
.band.light table.compare th{color:#8C7F98;border-bottom-color:rgba(24,15,36,.13);}
.band.light table.compare td{color:#0A060F;border-bottom-color:rgba(24,15,36,.13);}
.band.light table.compare td.hl{color:#C13FE0;}
.band.light .process .step .n{color:#C13FE0;}
.band.light .process .step p{color:#544963;}
.band.light .hud-chip{background:rgba(255,255,255,.5);border-color:rgba(24,15,36,.15);color:#0A060F;}
.band.light .hud-corner{border-color:rgba(24,15,36,.4);}

/* .mist swaps the fixed white for the theme-aware mist tint (pink in light mode, dark
   plum in dark mode) — so unlike plain .band.light, its text MUST use the theme variables
   to flip together with it, not the hardcoded colors above. Three classes beats two. */
.band.light.mist{background:var(--mist);}
.band.light.mist .eyebrow{color:var(--accent);}
.band.light.mist p{color:var(--soft);}
.band.light.mist h1, .band.light.mist h2, .band.light.mist h3, .band.light.mist h4{color:var(--ink);}
.band.light.mist .coord-tag{color:var(--faint);}
.band .eyebrow{color:var(--band-fg-soft);}
.band p{color:var(--band-fg-soft);}
.band h2, .band h1, .band h3, .band h4{color:var(--band-fg);}
.band table.compare th{color:rgba(247,239,251,.5);}
.band table.compare td{color:rgba(247,239,251,.85);border-bottom-color:rgba(255,255,255,.14);}
.band table.compare th{border-bottom-color:rgba(255,255,255,.14);}
.band table.compare td.hl{color:var(--blush);}
.band > .wrap{position:relative;z-index:2;}
/* paint-blot washes: soft-edged like ink bled into paper, not glowing smoke — kept out of the
   blur(70px) range on purpose so the color pools read as pigment, not haze */
.band .blob, .form-module .blob{position:absolute;border-radius:47% 53% 58% 42% / 45% 40% 60% 55%;filter:blur(26px);pointer-events:none;z-index:0;}
.band .blob.b1, .form-module .blob.b1{width:420px;height:380px;background:#E7A9CC;opacity:.5;top:-140px;right:-90px;animation:float1 46s ease-in-out infinite;}
.band .blob.b2, .form-module .blob.b2{width:360px;height:400px;background:#8B5CF6;opacity:.46;bottom:-120px;left:-80px;animation:float2 52s ease-in-out infinite;}
.band .blob.b3, .form-module .blob.b3{width:300px;height:280px;background:#C13FE0;opacity:.36;top:35%;left:45%;animation:float3 58s ease-in-out infinite;}
@keyframes float1{0%,100%{transform:translate(0,0) rotate(0deg) scale(1);}50%{transform:translate(-40px,50px) rotate(6deg) scale(1.06);}}
@keyframes float2{0%,100%{transform:translate(0,0) rotate(0deg) scale(1);}50%{transform:translate(50px,-35px) rotate(-5deg) scale(1.04);}}
@keyframes float3{0%,100%{transform:translate(0,0) rotate(0deg) scale(1);}50%{transform:translate(-25px,-40px) rotate(8deg) scale(1.08);}}
@media (prefers-reduced-motion: reduce){.band .blob, .form-module .blob{animation:none;}}

.band .card, .band .service-card{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(6px);
}
.band .card h4, .band .service-card h3{color:#fff;}
.band .card p, .band .service-card p{color:rgba(247,239,251,.72);}
.band .card:hover, .band .service-card:hover{border-color:rgba(255,255,255,.32);box-shadow:0 18px 40px rgba(0,0,0,.3);}
.band.light .card, .band.light .service-card{background:rgba(24,15,36,.04);border-color:rgba(24,15,36,.12);}
.band.light .card h4, .band.light .service-card h3{color:#0A060F;}
.band.light .card p, .band.light .service-card p{color:#544963;}

/* solid opaque card backing, for legibility over the busier animated bands */
.band .card.on-white, .band .service-card.on-white{
  background:var(--paper);border:1px solid rgba(24,15,36,.08);backdrop-filter:none;
}
.band .card.on-white h4, .band .service-card.on-white h3{color:var(--ink);}
.band .card.on-white p, .band .service-card.on-white p{color:var(--soft);}
.band .card.on-white:hover, .band .service-card.on-white:hover{border-color:var(--accent-soft);box-shadow:0 18px 40px rgba(var(--shadow-c),.25);}
.band .service-card.on-white .tag{color:var(--accent);}

.band .card.on-black, .band .service-card.on-black{
  background:#120A1C;border:1px solid rgba(255,255,255,.1);backdrop-filter:none;
}
.band .card.on-black h4, .band .service-card.on-black h3{color:#fff;}
.band .card.on-black p, .band .service-card.on-black p{color:rgba(247,239,251,.68);}
.band .card.on-black:hover, .band .service-card.on-black:hover{border-color:var(--accent);box-shadow:0 18px 40px rgba(0,0,0,.5);}
.band .service-card.on-black .tag{color:var(--blush);}
.band .service-card .tag{color:var(--blush);}
/* blush reads fine on dark bands but drops to ~2.8:1 on the near-white
   .band.light background — restore the higher-contrast accent purple
   for plain (non on-black/on-white) service-cards in a light band. */
.band.light .service-card .tag{color:var(--accent);}

/* form-module gets the same paint-blot washes as .band, no photographic overlay */
.form-module{position:relative;overflow:hidden;}

/* footer stays flat brand purple, deliberately simple against the busier bands */
footer.dark{background:var(--chrome-purple) !important;}

/* ---------- consultation form ---------- */
.form-module{
  background:var(--eggplant);border-radius:26px;padding:118px 44px 64px;color:var(--band-fg);position:relative;overflow:hidden;
  margin-top:100px;
}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;position:relative;z-index:2;}
.form-grid .real-form{margin-top:14px;}
@media (max-width:860px){.form-grid{grid-template-columns:1fr;}}
.form-module h2{color:var(--band-fg);font-size:clamp(1.4rem,2.6vw,2rem);}
.form-module p{color:var(--band-fg-soft);}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.real-form{display:flex;flex-direction:column;gap:12px;}
.real-form input, .real-form select, .real-form textarea{
  background:rgba(255,255,255,0.09);border:1px solid rgba(255,255,255,0.22);border-radius:10px;
  padding:13px 15px;font-size:.9rem;color:#fff;font-family:'Manrope',sans-serif;width:100%;
}
.real-form input::placeholder, .real-form textarea::placeholder{color:rgba(255,255,255,0.55);}
/* contact.html's form sits on a light mist background (not the dark form-module glass),
   so its placeholder text needs a dark color instead — otherwise it's white-on-white */
.real-form.light-fields input::placeholder, .real-form.light-fields textarea::placeholder{color:var(--faint);}
.real-form .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media (max-width:500px){.real-form .row2{grid-template-columns:1fr;}}
.real-form button{
  margin-top:6px;background:#fff;color:var(--accent);text-align:center;font-weight:800;border-radius:999px;
  padding:14px;font-size:.94rem;border:none;cursor:pointer;transition:transform .2s ease;
}
.real-form button:hover{transform:translateY(-2px);}
.form-note{font-size:.78rem;color:var(--band-fg-soft);margin-top:10px;}
.form-success{display:none;font-size:.95rem;background:rgba(255,255,255,0.12);padding:16px;border-radius:12px;margin-top:6px;}
.form-success.show{display:block;}

/* ---------- footer ---------- */
footer{padding:60px 0 40px;border-top:1px solid var(--line);}
footer.dark{
  background:var(--chrome-purple);border-top:1px solid rgba(255,255,255,.08);
  position:relative;overflow:hidden;
}
footer.dark > .wrap{position:relative;z-index:2;}
.foot-grid{display:grid;grid-template-columns:1.15fr 1fr 1fr 1fr 1fr;gap:30px;}
@media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr;}}
footer .logo img{height:24px;margin-bottom:12px;}
footer h5{font-size:.76rem;text-transform:uppercase;letter-spacing:.1em;color:var(--faint);margin-bottom:12px;}
footer a{display:block;font-size:.88rem;color:var(--soft);text-decoration:none;padding:4px 0;}
footer a:hover{color:var(--accent);}
footer.dark h5{color:rgba(247,239,251,.5);}
footer.dark p, footer.dark a, footer.dark span{color:rgba(247,239,251,.78);}
footer.dark a:hover{color:#fff;}
.foot-social{display:flex;gap:10px;margin-top:16px;}
.foot-social a{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:1px solid rgba(247,239,251,.18);padding:0;color:rgba(247,239,251,.78);transition:border-color .2s ease,color .2s ease;}
.foot-social a:hover{border-color:var(--accent);color:#fff;}
.foot-social svg{width:16px;height:16px;}

.foot-bottom{margin-top:40px;padding-top:20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.8rem;color:var(--faint);}
footer.dark .foot-bottom{border-top-color:rgba(255,255,255,.1);color:rgba(247,239,251,.5);}
.foot-legal{display:flex;align-items:center;gap:8px;}
.foot-legal a{display:inline;padding:0;color:inherit;}
.foot-legal a:not(:last-child)::after{content:"·";margin-left:8px;opacity:.6;}

.reveal{opacity:0;transform:translateY(14px);transition:opacity .7s ease, transform .7s ease;}
.reveal.is-in{opacity:1;transform:translateY(0);}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1 !important;transform:none !important;transition:none !important;}}

.route-tag{font-size:.72rem;color:var(--faint);background:var(--tag-bg);padding:4px 10px;border-radius:6px;}
.page-hero{padding:64px 0 20px;}
.page-hero .eyebrow{margin-bottom:14px;display:block;}
.page-hero h1{font-size:clamp(2rem,4.4vw,3rem);}
.page-hero .sub{color:var(--soft);font-size:1.05rem;margin-top:16px;max-width:600px;}

/* ---------- brand-styled "map" (no external Maps API/key — an illustrative street-grid
   panel in brand colors, with a pulsing pin) ---------- */
.map-embed{position:relative;aspect-ratio:4/3;border-radius:20px;overflow:hidden;border:1px solid var(--line);}
.map-embed iframe{width:100%;height:100%;display:block;}

/* ---------- HUMAN x AI equation: the brand philosophy as a visual equation
   instead of a paragraph — human column, AI column, operators, result. ---------- */
.human-ai-eq{display:grid;grid-template-columns:1fr auto 1fr auto 1.3fr;gap:18px;align-items:center;margin-top:32px;position:relative;z-index:1;}
@media (max-width:900px){.human-ai-eq{grid-template-columns:1fr;}}
.hai-op{font-family:'Fraunces',serif;font-size:2rem;color:var(--band-fg-soft);text-align:center;}
.hai-col{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:24px;}
.hai-col .tag-label{font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--band-fg-soft);}
.hai-col.ai .tag-label{color:var(--accent);}
.hai-col ul{list-style:none;margin:14px 0 0;padding:0;}
.hai-col li{padding:6px 0;font-weight:600;color:var(--band-fg);}
.hai-result{background:linear-gradient(160deg,rgba(193,63,224,.16),rgba(139,92,246,.08));border:1px solid var(--accent-soft);border-radius:16px;padding:24px;}
.hai-result .tag-label{color:var(--accent);font-weight:700;font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.1em;}
.hai-result p{margin-top:10px;font-size:.95rem;line-height:1.55;color:var(--band-fg);}

/* ---------- brand statement: one oversized typographic line, no card, no
   image — the "responsiveness of a 50-person team" line gets to stand alone. ---------- */
.brand-statement{max-width:900px;margin:0 auto;text-align:center;position:relative;z-index:1;}
.brand-statement h2{font-family:'Fraunces',serif;font-weight:500;font-size:clamp(1.8rem,4.5vw,3.2rem);line-height:1.15;}
.brand-statement p{margin-top:20px;color:var(--band-fg-soft);font-size:1rem;max-width:560px;margin-left:auto;margin-right:auto;}
.band.light .brand-statement h2{color:#0A060F;}
.band.light .brand-statement p{color:#544963;}

/* ---------- messaging network diagram (AI Chat & Messaging hero/intro): channels
   converge into one AI layer, then diverge into outcomes and systems — the
   signature visual grammar for this page (routing), distinct from every other
   service page's diagram type. ---------- */
.network-tier{margin-top:18px;}
.network-tier:first-child{margin-top:0;}
.network-tier .channels{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;}
.network-tier .channel-chip{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:999px;
  padding:9px 18px;font-size:.8rem;font-family:'IBM Plex Mono',monospace;letter-spacing:.02em;color:var(--band-fg-soft);
}
.network-tier .channel-chip.outcome{color:var(--accent);border-color:var(--accent-soft);}
.band.light .network-tier .channel-chip{background:rgba(24,15,36,.04);border-color:rgba(24,15,36,.12);color:#544963;}
.band.light .network-tier .channel-chip.outcome{color:var(--accent);border-color:var(--accent-soft);}
.network-line{width:1px;height:26px;background:linear-gradient(var(--accent),transparent);margin:4px auto;opacity:.6;}
.network-layer{
  max-width:440px;margin:0 auto;text-align:center;background:linear-gradient(120deg,var(--accent),var(--accent-soft));
  color:#fff;border-radius:16px;padding:18px 26px;font-family:'Fraunces',serif;font-weight:600;font-size:1.08rem;
  box-shadow:0 16px 34px rgba(193,63,224,.28);
}

/* ---------- vertical conversation progression: a single narrow stepped
   column (dot + line + label), used only where the story is genuinely
   sequential and personal, not a wide multi-card grid. ---------- */
.vert-flow{max-width:440px;margin:28px auto 0;position:relative;z-index:1;}
.vert-flow .vf-step{display:flex;align-items:center;gap:14px;padding:9px 0;}
.vert-flow .vf-step .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none;}
.vert-flow .vf-step .label{font-family:'IBM Plex Mono',monospace;font-size:.8rem;letter-spacing:.03em;font-weight:600;color:var(--band-fg);}
.vert-flow .vf-step .label.human{color:var(--accent);}
.vert-flow .vf-line{width:1px;height:18px;background:rgba(255,255,255,.15);margin-left:3px;}
.band.light .vert-flow .vf-line{background:rgba(24,15,36,.12);}
.band.light .vert-flow .vf-step .label{color:#0A060F;}

/* ---------- chat window: a premium messaging-UI mockup for a labeled example
   conversation — visually distinct from .call-transcript's phone-call layout
   so Phone Agents and Chat & Messaging never look like the same page. ---------- */
.chat-window{max-width:520px;margin:28px auto 0;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:22px;position:relative;z-index:1;}
.chat-window .chat-head{display:flex;align-items:center;gap:8px;font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.1);}
.chat-bubble{max-width:78%;padding:10px 16px;border-radius:16px;margin-top:10px;font-size:.9rem;line-height:1.45;}
.chat-bubble:first-of-type{margin-top:0;}
.chat-bubble.customer{background:rgba(255,255,255,.08);border-bottom-left-radius:4px;margin-right:auto;color:var(--band-fg);}
.chat-bubble.ai{background:linear-gradient(120deg,var(--accent),var(--accent-soft));color:#fff;border-bottom-right-radius:4px;margin-left:auto;}
.chat-result{margin-top:18px;padding-top:14px;border-top:1px solid rgba(255,255,255,.1);text-align:center;font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--band-fg-soft);}
.chat-result .arrow{color:var(--accent);margin:0 8px;}
.band.light .chat-window{background:rgba(24,15,36,.04);border-color:rgba(24,15,36,.1);}
.band.light .chat-bubble.customer{background:rgba(24,15,36,.06);color:#0A060F;}
.band.light .chat-head{border-color:rgba(24,15,36,.1);}
.band.light .chat-result{border-color:rgba(24,15,36,.1);}

/* ---------- roadmap: vertical numbered timeline with a connecting spine —
   the "strategy map" signature visual for Marketing & Growth Strategy,
   deliberately not the horizontal flow-diagram grid used elsewhere. ---------- */
.roadmap{max-width:600px;margin:32px auto 0;position:relative;z-index:1;}
.roadmap-step{position:relative;padding-left:56px;padding-bottom:26px;}
.roadmap-step:last-child{padding-bottom:0;}
.roadmap-step::before{content:"";position:absolute;left:19px;top:40px;bottom:-6px;width:1px;background:rgba(255,255,255,.14);}
.roadmap-step:last-child::before{display:none;}
.roadmap-step .rm-n{position:absolute;left:0;top:0;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid var(--accent-soft);display:flex;align-items:center;justify-content:center;font-family:'IBM Plex Mono',monospace;font-size:.76rem;color:var(--accent);}
.roadmap-step h4{font-size:1rem;}
.roadmap-step p{margin-top:4px;font-size:.88rem;color:var(--band-fg-soft);}
.band.light .roadmap-step::before{background:rgba(24,15,36,.12);}
.band.light .roadmap-step .rm-n{background:rgba(24,15,36,.04);}
.band.light .roadmap-step p{color:#544963;}

/* ---------- question grid: an index-card wall, each tile carrying an
   oversized ghost "?" watermark — distinct from the roadmap's spine+circle
   treatment and the numbered-deliverables index elsewhere on this same
   page, so the two 8-item lists don't read as the same component twice. ---------- */
.question-grid{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:32px 0 0;padding:0;position:relative;z-index:1;}
.question-grid li{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:16px;
  padding:24px 20px 20px;position:relative;overflow:hidden;min-width:0;
  transition:transform .3s ease,border-color .3s ease;
}
.question-grid li:hover{transform:translateY(-4px);border-color:var(--accent-soft);}
.question-grid li::before{
  content:"?";font-family:'Fraunces',serif;font-weight:600;font-size:3.4rem;line-height:1;
  position:absolute;top:-8px;right:8px;color:rgba(255,255,255,.07);pointer-events:none;
}
.question-grid li p{font-family:'Fraunces',serif;font-size:1rem;font-weight:500;line-height:1.4;position:relative;z-index:1;margin:0;}
.band.light .question-grid li{background:rgba(24,15,36,.04);border-color:rgba(24,15,36,.1);}
.band.light .question-grid li::before{color:rgba(24,15,36,.06);}
.band.light .question-grid li p{color:#0A060F;}
@media (max-width:980px){.question-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.question-grid{grid-template-columns:1fr;}}

/* ---------- numbered deliverables: large serif index numbers instead of
   checkmarks or cards, for a "strategic outputs" feel. ---------- */
.numbered-deliverables{display:grid;grid-template-columns:repeat(2,1fr);gap:26px 40px;margin-top:28px;position:relative;z-index:1;}
.numbered-deliverables .nd-n{font-family:'Fraunces',serif;font-size:1.7rem;color:var(--accent-soft);line-height:1;}
.numbered-deliverables h4{margin-top:6px;font-size:.98rem;}
@media (max-width:700px){.numbered-deliverables{grid-template-columns:1fr;}}

/* ---------- simple two-column AI/Human split (no "=" result box) — a
   lighter variant of .human-ai-eq for pages that need the contrast without
   the About page's brand-equation framing. ---------- */
.split-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:28px;position:relative;z-index:1;}
@media (max-width:700px){.split-cols{grid-template-columns:1fr;}}
.split-cols .sc-col{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:24px;}
.split-cols .sc-col .tag-label{font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--band-fg-soft);}
.split-cols .sc-col.accent .tag-label{color:var(--accent);}
.split-cols .sc-col ul{list-style:none;margin:14px 0 0;padding:0;}
.split-cols .sc-col li{padding:5px 0;font-size:.92rem;color:var(--band-fg-soft);}
.band.light .split-cols .sc-col{background:rgba(24,15,36,.04);border-color:rgba(24,15,36,.1);}
.band.light .split-cols .sc-col .tag-label{color:#544963;}
.band.light .split-cols .sc-col.accent .tag-label{color:var(--accent);}
.band.light .split-cols .sc-col li{color:#544963;}

/* ---------- branch diagram: one idea expanding into many formats (Social
   Media) — a single-direction tree, visually distinct from the Chat page's
   converge-then-diverge network. ---------- */
.branch-diagram{max-width:600px;margin:32px auto 0;text-align:center;position:relative;z-index:1;}
.branch-diagram .branch-root{max-width:340px;margin:0 auto;background:linear-gradient(120deg,var(--accent),var(--accent-soft));color:#fff;border-radius:16px;padding:16px 24px;font-family:'Fraunces',serif;font-weight:600;font-size:1.02rem;box-shadow:0 16px 34px rgba(193,63,224,.28);}
.branch-diagram .branches{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:18px;}

/* ---------- content engine: a wrapped chain with a loop-back marker instead
   of a straight line — the cyclical "insight to next idea" process unique to
   Social Media. ---------- */
.content-engine{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:28px;position:relative;z-index:1;}
.content-engine .ce-step{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:16px 18px;text-align:center;min-width:0;}
.content-engine .ce-step .n{font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.04em;color:var(--accent);text-transform:uppercase;}
.content-engine .ce-step h4{margin-top:6px;font-size:.88rem;}
.content-engine .ce-loop{grid-column:1/-1;text-align:center;margin-top:6px;font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--band-fg-soft);}
.content-engine .ce-loop .arrow{color:var(--accent);margin:0 6px;}
.band.light .content-engine .ce-step{background:rgba(24,15,36,.04);border-color:rgba(24,15,36,.1);}
.band.light .content-engine .ce-loop{color:#8C7F98;}
@media (max-width:860px){.content-engine{grid-template-columns:1fr;}}

/* ---------- week calendar: a five-day content example, unique to Social
   Media's "one idea becomes a week" demonstration. ---------- */
.week-cal{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:28px;position:relative;z-index:1;}
@media (max-width:860px){.week-cal{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.week-cal{grid-template-columns:1fr;}}
.week-cal .day{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:16px;min-width:0;}
.week-cal .day .dow{font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);}
.week-cal .day h4{margin-top:8px;font-size:.9rem;}
.band.light .week-cal .day{background:rgba(24,15,36,.04);border-color:rgba(24,15,36,.1);}

/* ---------- leaky pipeline: a vertical descent where each step reads as
   friction/loss, ending in a dead stop — Sales Automation's "where momentum
   gets lost" visual, distinct from the neutral .vert-flow used for Chat. ---------- */
.leak-flow{max-width:520px;margin:32px auto 0;position:relative;z-index:1;}
.leak-flow .lf-step{position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:12px 0 12px 28px;}
.leak-flow .lf-step::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:11px;height:11px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(193,63,224,.14);}
.leak-flow .lf-step .lf-label{font-weight:700;font-size:.9rem;flex:none;min-width:150px;}
.leak-flow .lf-step .lf-loss{font-size:.78rem;color:var(--band-fg-soft);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:5px 14px;}
.leak-flow .lf-line{width:1px;height:18px;margin-left:5.5px;background:linear-gradient(rgba(255,255,255,.24),rgba(255,255,255,0));}
.leak-flow .lf-end{margin-top:18px;padding:18px;border-radius:14px;background:rgba(255,255,255,.04);border:1px dashed var(--accent-soft);font-family:'IBM Plex Mono',monospace;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);text-align:center;}
.band.light .leak-flow .lf-step::before{box-shadow:0 0 0 4px rgba(193,63,224,.1);}
.band.light .leak-flow .lf-loss{color:#544963;background:rgba(24,15,36,.03);border-color:rgba(24,15,36,.09);}
.band.light .leak-flow .lf-line{background:linear-gradient(rgba(24,15,36,.2),rgba(24,15,36,0));}
.band.light .leak-flow .lf-end{background:rgba(24,15,36,.03);border-color:var(--accent-soft);}
@media (max-width:520px){.leak-flow .lf-step .lf-label{min-width:0;}}

/* ---------- dual-layer pipeline: each stage shows both the automated action
   and the human action side by side — the signature diagram for Sales
   Automation, showing movement rather than a single conversation. ---------- */
.dual-pipeline{display:flex;flex-wrap:wrap;gap:16px;margin-top:28px;justify-content:center;position:relative;z-index:1;}
.dual-pipeline .dp-step{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:18px 18px;flex:1 1 190px;max-width:210px;min-width:0;}
.dual-pipeline .dp-step h4{font-size:.9rem;}
.dual-pipeline .dp-row{margin-top:10px;}
.dual-pipeline .dp-row .lbl{font-family:'IBM Plex Mono',monospace;font-size:.6rem;letter-spacing:.05em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:2px;}
.dual-pipeline .dp-row.human .lbl{color:var(--band-fg-soft);}
.dual-pipeline .dp-row p{margin:0;font-size:.8rem;color:var(--band-fg-soft);}
.band.light .dual-pipeline .dp-step{background:rgba(24,15,36,.04);border-color:rgba(24,15,36,.1);}
.band.light .dual-pipeline .dp-row p{color:#544963;}
.band.light .dual-pipeline .dp-row.human .lbl{color:#8C7F98;}

/* ---------- illustrative timeline: two parallel time-stamped sequences
   (without automation / connected system) — explicitly labeled as an
   illustrative workflow, not measured performance data. ---------- */
.timeline-compare{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:28px;position:relative;z-index:1;}
@media (max-width:700px){.timeline-compare{grid-template-columns:1fr;}}
.timeline-compare .tl-col{border-radius:16px;padding:22px 24px;border:1px solid var(--line);}
.timeline-compare .tl-col.without{background:rgba(255,255,255,.03);opacity:.75;}
.timeline-compare .tl-col.connected{background:rgba(255,255,255,.06);border-color:var(--accent-soft);}
.timeline-compare .tl-col .tag-label{font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;}
.timeline-compare .tl-col.without .tag-label{color:var(--band-fg-soft);}
.timeline-compare .tl-col.connected .tag-label{color:var(--accent);}
.timeline-compare .tl-row{display:flex;gap:12px;padding:8px 0;font-size:.86rem;border-top:1px solid var(--line);}
.timeline-compare .tl-row:first-of-type{border-top:none;margin-top:14px;}
.timeline-compare .tl-time{font-family:'IBM Plex Mono',monospace;font-size:.76rem;color:var(--band-fg-soft);flex:none;width:52px;}
.band.light .timeline-compare .tl-col{border-color:rgba(24,15,36,.1);}
.band.light .timeline-compare .tl-col.without{background:rgba(24,15,36,.03);}
.band.light .timeline-compare .tl-col.connected{background:rgba(193,63,224,.06);}
.band.light .timeline-compare .tl-row{border-color:rgba(24,15,36,.08);color:#544963;}

/* ---------- photo band: a full-bleed real-photo section (not a hero, not an
   img-slot) with a scrim so text stays readable over it. ---------- */
.photo-band{position:relative;overflow:hidden;min-height:400px;display:flex;align-items:center;}
.photo-band img.pb-bg,.photo-band video.pb-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.photo-band .pb-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(5,3,8,.82) 0%,rgba(5,3,8,.5) 55%,rgba(5,3,8,.2) 100%);}
.photo-band .wrap{position:relative;z-index:2;}
@media (max-width:700px){.photo-band{min-height:460px;}.photo-band .pb-scrim{background:linear-gradient(180deg,rgba(5,3,8,.4) 0%,rgba(5,3,8,.85) 65%);}}

/* ---------- FAQ page: category nav, short-answer intro, and a lighter
   inline conversion block distinct from the final form CTA. ---------- */
.cat-nav{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px;position:relative;z-index:1;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px;}
.cat-nav a{flex:none;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:9px 18px;font-size:.82rem;font-weight:600;color:var(--band-fg);text-decoration:none;white-space:nowrap;transition:border-color .2s ease,background .2s ease;}
.cat-nav a:hover{border-color:var(--accent-soft);background:rgba(255,255,255,.09);}
.band.light .cat-nav a{background:rgba(24,15,36,.04);border-color:rgba(24,15,36,.12);color:var(--ink);}
.band.light .cat-nav a:hover{background:rgba(24,15,36,.07);border-color:var(--accent-soft);}

.short-answer{max-width:720px;position:relative;z-index:1;}
.short-answer .sa-big{font-family:'Fraunces',serif;font-size:clamp(1.3rem,3vw,1.9rem);font-weight:500;line-height:1.35;margin-top:18px;}
.short-answer .sa-big em{color:var(--accent);font-style:normal;}

.inline-cta{max-width:640px;margin:0 auto;text-align:center;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:28px 32px;position:relative;z-index:1;}
.inline-cta h3{font-size:1.15rem;}
.inline-cta p{margin-top:8px;color:var(--band-fg-soft);font-size:.92rem;}
.inline-cta .btn-text{margin-top:14px;}
.band.light .inline-cta{background:rgba(24,15,36,.04);border-color:rgba(24,15,36,.12);}

.faq-cat-block{margin-top:36px;}
.faq-cat-block:first-of-type{margin-top:0;}

/* ---------- back-to-top: injected by site.js on every page. Left side on
   purpose — Tawk.to's bubble already owns the bottom-right corner. ---------- */
.back-to-top{
  position:fixed;left:22px;bottom:22px;z-index:80;width:46px;height:46px;border-radius:50%;
  background:var(--accent);color:#fff;border:none;cursor:pointer;font-size:1.15rem;line-height:1;
  display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(0,0,0,.28);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .25s ease,transform .25s ease,visibility .25s,background .2s ease;
}
.back-to-top.visible{opacity:1;visibility:visible;transform:translateY(0);}
.back-to-top:hover{background:var(--accent-soft);}
@media (max-width:600px){.back-to-top{left:14px;bottom:14px;width:42px;height:42px;}}
@media (prefers-reduced-motion: reduce){.back-to-top{transition:none;}}
.faq-cat-label{font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:6px;display:block;}