/* ============================================================
   Breakout — Snowball design language (shared across sub-pages)
   Loaded LAST in <head>, after each page's own <style> and the
   #bx-colorize block, so these rules win. It applies:
     • Plus Jakarta Sans typography
     • the cool "paper" palette (#F1F0F5) from the home page
     • the dark WebGL fluid-simulation hero on every page
     • the Snowball pill-nav / footer button components
   No page copy or link target is changed by this file.
   ============================================================ */

:root{
  --primary:#D1001C; --secondary:#016B4E; --ink:#15131A; --paper:#F1F0F5;
  --s400:#9A9CB0; --s500:#6E7187; --s600:#4E5067;
}

/* ---------- Typography + base palette ---------- */
body{
  font-family:'Plus Jakarta Sans', system-ui, sans-serif !important;
  background:var(--paper) !important;
  color:var(--ink);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
::selection{ background:rgba(209,0,28,0.16); color:#15131A; }

/* Re-tint the colorized warm section backgrounds to the cool paper system */
.bg-\[\#F7EDEC\]{ background-color:#F1F0F5 !important; }   /* warm near-white -> paper   */
.bg-\[\#F4E9E8\]{ background-color:#ECEDF2 !important; }   /* warm tint      -> cool s100 */

/* ---------- CTA pills (Snowball) ---------- */
.btn{ display:inline-flex; align-items:center; gap:.6rem; border-radius:999px; font-weight:700; transition:all .35s cubic-bezier(.16,1,.3,1); }
.btn .arr{ transition:transform .3s cubic-bezier(.16,1,.3,1); display:inline-block; }
.btn:hover .arr{ transform:translate(3px,-3px); }
.btn-primary{ background:var(--primary); color:#fff; box-shadow:0 14px 34px -14px rgba(209,0,28,.7); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 20px 44px -14px rgba(209,0,28,.8); }
.btn-ink{ background:var(--ink); color:#fff; }
.btn-ink:hover{ transform:translateY(-2px); background:var(--primary); color:#fff; }
.btn-ghost{ background:transparent; border:1.5px solid rgba(21,19,26,.18); color:var(--ink); }
.btn-ghost:hover{ border-color:var(--ink); transform:translateY(-2px); }
.btn-white{ background:#fff; color:var(--ink); box-shadow:0 14px 34px -16px rgba(21,19,26,.5); }
.btn-white:hover{ transform:translateY(-2px); background:var(--primary); color:#fff; }

/* keep the colorized .cta-btn arrows animating in the Snowball idiom */
.cta-btn .arrow{ transition:transform .3s cubic-bezier(.16,1,.3,1); display:inline-block; }
.cta-btn:hover .arrow{ transform:translateX(4px); }

/* ---------- Accent underline + gradient text ---------- */
.ul-red{ text-decoration:underline; text-decoration-color:var(--primary); text-decoration-thickness:3px; text-underline-offset:8px; text-decoration-skip-ink:none; }
.grad-red{ background:linear-gradient(100deg,#D1001C 0%,#FF3650 58%,#FF6478 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.grad-green{ background:linear-gradient(100deg,#016B4E 0%,#16A34A 58%,#34D399 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }

/* ---------- Dome arcs (Snowball curved section edges) ---------- */
.arc-bottom{ border-bottom-left-radius:55% 11vw; border-bottom-right-radius:55% 11vw; }
.arc-top{ border-top-left-radius:55% 11vw; border-top-right-radius:55% 11vw; }

/* ---------- Giant footer wordmark ---------- */
.giant{ font-weight:800; letter-spacing:-.04em; line-height:.78; }

/* ============================================================
   DARK FLUID-SIM HERO
   Every page's hero (.banner-hero section / .post-hero header)
   becomes a dark ink panel that hosts the WebGL fluid canvas,
   exactly like the home page. The canvas supplies the red fluid;
   the ink base keeps the existing white hero copy readable.
   ============================================================ */
.banner-hero, .post-hero{
  background:#15131A !important;
  color:#fff !important;
  position:relative;
  overflow:hidden;
}
/* signature curved dome bottom on the standard heroes (gentle so short heroes don't crowd) */
.banner-hero{ border-bottom-left-radius:50% 6vw; border-bottom-right-radius:50% 6vw; }

/* the fluid canvas fills the hero and sits behind its content */
canvas[data-fluid]{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
/* lift the resource-post hero copy above the canvas (its wrapper is otherwise static) */
.post-hero > div{ position:relative; z-index:1; }

@media (prefers-reduced-motion: reduce){
  canvas[data-fluid]{ /* static gradient still shows via the canvas inline background */ }
}

/* ---------- Floating cards (home idea-gallery mockup, reused on services) ---------- */
@keyframes float-y{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-8px);} }
.float-y{ animation:float-y 5s ease-in-out infinite; }
.float-y.d1{ animation-delay:1.2s; } .float-y.d2{ animation-delay:2.4s; } .float-y.d3{ animation-delay:.6s; }

/* ---------- Services client-logo scroller: transparent over the dark hero ---------- */
.svc-logos .text-ys-text{ color:#fff !important; }
.svc-logos .text-slate-500{ color:rgba(255,255,255,.62) !important; }
.svc-logos .text-slate-400{ color:rgba(255,255,255,.6) !important; }
/* no borders on the logo chips */
.svc-logos .border{ border:0 !important; }
.svc-logos .bg-slate-100{ background-color:rgba(255,255,255,.06) !important; }
/* logos +30% with text scaled proportionally */
.svc-logos .h-12{ height:62px !important; }
.svc-logos .w-12{ width:62px !important; }
.svc-logos .text-\[13px\]{ font-size:17px !important; line-height:1.2 !important; }
.svc-logos .text-\[11px\]{ font-size:14px !important; }

/* ---------- Remove the cross paper-grid background pattern site-wide ---------- */
.grid-bg, .grid-bg-light, .grid-bg-full{ background-image:none !important; }

/* ---------- Keyword highlights: red gradient text, matching the homepage ---------- */
.accent-underline{
  background:linear-gradient(100deg,#D1001C 0%,#FF3650 58%,#FF6478 100%) !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent !important; color:transparent !important;
  text-decoration:none !important;
}
