/* ============================================================================================
   Coast band microsite — design tokens + global rules + responsive gates
   Lifted VERBATIM from the Claude Design export (The Big Papas.dc.html, 2 Sep 2026) <helmet><style>.
   This is the single source of truth for every colour, radius, font, keyframe and breakpoint.
   Do not retype, reformat, tokenise further or "align to conventions". Add nothing here per band.
   Breakpoints: 960px (layout collapse), 600px (single column + mobile CTA copy), 384px (arrow drop).
   ============================================================================================ */
:root{
--ink-base:#0C0C11;--ink-900:#101017;--ink-800:#16161F;--ink-750:#1C1C27;--ink-700:#23232F;
--ink-hair:rgba(255,255,255,.08);--ink-hair-2:rgba(255,255,255,.14);--ink-tint:rgba(255,255,255,.05);
--on-ink:#F4F2F7;--on-ink-mut:#A7A2B3;
--paper-0:#FFFFFF;--paper-50:#FAF7F9;--paper-100:#F3EEF2;--paper-200:#E9E2E9;
--ink-text:#17131A;--ink-mut:#6B6572;
--magenta-400:#C862B4;--magenta-500:#B5439B;--magenta-600:#93357F;
--amber-400:#F6C56E;--amber-500:#EDAB4E;--amber-600:#DE9433;
--success:#2FB27C;--danger:#E0563B;--whatsapp:#25D366;
--viz-1:#EDAB4E;--viz-2:#C862B4;--viz-3:#4FD1E0;
--r-sm:10px;--r-md:16px;--r-lg:22px;--r-xl:30px;
--onax:#1A1206;
--maxw:1280px;
--glow-a:rgba(200,98,180,.28);--glow-b:rgba(237,171,78,.22);
}
*{box-sizing:border-box}
*{-webkit-text-fill-color:currentColor}
button,input,select,textarea{color:inherit}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink-base);font-family:'Hanken Grotesk',system-ui,sans-serif;color:var(--ink-text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
::selection{background:var(--magenta-500);color:#fff}
.grain{position:absolute;inset:0;pointer-events:none;opacity:.05;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:140px 140px}
@keyframes eq{0%{transform:scaleY(.22)}100%{transform:scaleY(1)}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(200,98,180,.45)}70%{box-shadow:0 0 0 14px rgba(200,98,180,0)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes shimmer{0%{transform:translateX(-130%)}100%{transform:translateX(130%)}}
@keyframes viewIn{from{transform:translateY(12px)}to{transform:none}}
@keyframes blink{0%,100%{opacity:.2}50%{opacity:1}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes glowDrift{0%,100%{opacity:.75;transform:translate(-50%,0) scale(1)}50%{opacity:1;transform:translate(-50%,-2%) scale(1.06)}}
@keyframes slideUp{from{transform:translateY(120%)}to{transform:translateY(0)}}
.reveal{opacity:1;transform:none}
.eqbar{transform-origin:bottom;animation:eq 1s ease-in-out infinite alternate}
.cta-m{display:none}
.mstep-bar{display:none}
@media (max-width:960px){
 .col-2,.col-3,.col-4{grid-template-columns:1fr !important}
 .stack-sm{flex-direction:column !important;align-items:stretch !important}
 .desk-only{display:none !important}
 .subnav-scroll{overflow-x:auto !important;justify-content:flex-start !important}
 .hero-pad{padding:96px 20px 120px !important}
 .sec-pad{padding:64px 20px !important}
 .mob-cta{display:flex !important;bottom:calc(12px + env(safe-area-inset-bottom,0px)) !important}
 .mstep-bar{display:block !important}
 .chat-panel{left:0 !important;right:0 !important;bottom:0 !important;width:auto !important;max-width:none !important;height:94vh !important;height:94dvh !important;border-radius:var(--r-xl) var(--r-xl) 0 0 !important;padding-bottom:env(safe-area-inset-bottom,0px) !important}
 body{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
 .split{grid-template-columns:1fr !important}
 .split>div{position:static !important;top:auto !important}
 .split>.keep-rel{position:relative !important} /* KIT PATCH 1 (2 Sep 2026): the Meet the Band photo column must stay a positioning context at <=960px, otherwise its absolute stats card escapes to the top of the page. Mirror in Claude Design. */
 .song-cols{column-count:2 !important;column-gap:24px !important}
 .gal-cols{column-count:2 !important}
 .qs-mount{order:-1 !important}
}
@media (max-width:600px){
 .song-cols{column-count:1 !important}
 .hero-trust{flex-direction:column !important;align-items:flex-start !important}
 .gal-cols{column-count:1 !important}
 .quote-foot{padding:12px 14px !important;gap:10px !important}
 .quote-foot button{padding:13px 16px !important;font-size:15px !important}
 .foot-total{display:none !important}
 .foot-cta{flex:1 1 auto !important;justify-content:center !important}
 .cta-m{display:inline !important}
 .cta-d{display:none !important}
 .extra-card{flex-direction:column !important}
 .extra-card>div:first-child{width:100% !important;height:150px !important}
 .extra-card>button{align-self:stretch !important;justify-content:center !important}
}
@media (max-width:384px){.cta-arrow{display:none !important}}
@media (min-width:961px){.mob-cta{display:none !important}.mob-only{display:none !important}}
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
 .reveal{opacity:1 !important;transform:none !important}
}