/* ============================================================
   BREAK BOX — DESIGN TOKENS & BASE
   Shared across index / studio / live / contacto
   ============================================================ */

:root{
  /* --- Brand core (from Brand Guidelines 2026) --- */
  --bb-navy:      #212a50;
  --bb-purple:    #4e2bcd;
  --bb-purple-2:  #574ff4;
  --bb-lilac:     #9999ff;
  --bb-pale:      #dfe0fc;

  /* --- Live sub-palette --- */
  --live-indigo:  #4c45af;
  --live-violet:  #6e4ef6;
  --live-sky:     #8fccf2;
  --live-lime:    #cff504;

  /* --- Neutrals --- */
  --ink:          #0d1024;
  --white:        #ffffff;
  --off-white:    #f7f7fb;

  /* --- Type --- */
  --font-display: 'Montserrat', sans-serif;
  --font-body:    'DM Sans', sans-serif;

  /* --- Rhythm --- */
  --container: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
  --radius-s: 8px;
  --radius-m: 16px;
  --radius-l: 28px;

  --ease-out: cubic-bezier(.16,.84,.44,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-anchor:none; }
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--off-white);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  overflow-anchor:none;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{
  font-family:var(--font-display);
  margin:0;
  line-height:1.02;
  letter-spacing:-0.01em;
}
p{ margin:0; }
button{ font-family:inherit; cursor:pointer; }
.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}
.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}

/* ============================================================
   NAV
   ============================================================ */
.bb-nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px var(--gutter);
  transition:background .4s var(--ease-out), padding .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.bb-nav.is-scrolled{
  padding-top:12px; padding-bottom:12px;
  backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 1px 0 rgba(0,0,0,.06);
}
.bb-nav__brand{ display:flex; align-items:center; gap:10px; }
.bb-nav__brand img{ height:28px; width:auto; }
.bb-nav__links{ display:flex; align-items:center; gap:clamp(18px,3vw,40px); }
.bb-nav__links a{
  font-family:var(--font-display); font-weight:700; font-size:14px;
  letter-spacing:.02em; text-transform:uppercase;
  position:relative; padding:4px 0;
}
.bb-nav__links a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:2px;
  background:currentColor; transition:width .3s var(--ease-out);
}
.bb-nav__links a:hover::after,
.bb-nav__links a.is-active::after{ width:100%; }
.bb-nav__cta{
  font-family:var(--font-display); font-weight:800; font-size:13px;
  text-transform:uppercase; letter-spacing:.02em;
  padding:10px 20px; border-radius:999px;
  border:1.5px solid currentColor;
  transition:transform .3s var(--ease-out), background .3s, color .3s;
}
.bb-nav__cta:hover{ transform:translateY(-2px); }
.bb-nav__burger{ display:none; }

@media (max-width:860px){
  .bb-nav__links{
    position:fixed; inset:0 0 0 auto; height:100vh; width:min(78vw,360px);
    background:var(--bb-navy); color:var(--white);
    flex-direction:column; justify-content:center; align-items:flex-start;
    gap:28px; padding:0 40px;
    transform:translateX(100%); transition:transform .5s var(--ease-in-out);
  }
  .bb-nav__links.is-open{ transform:translateX(0); }
  .bb-nav__links a{ font-size:22px; }
  .bb-nav__burger{
    display:flex; flex-direction:column; gap:5px; width:28px; z-index:110;
    background:none; border:none; padding:6px;
  }
  .bb-nav__burger span{ height:2px; width:100%; background:currentColor; transition:.3s; }
}

/* ============================================================
   FOOTER (shared shell — themed per page via modifier classes)
   ============================================================ */
.bb-footer{
  padding:80px var(--gutter) 32px;
  background:var(--bb-navy); color:var(--bb-pale);
}
.bb-footer__top{
  display:flex; flex-wrap:wrap; gap:48px; justify-content:space-between;
  max-width:var(--container); margin:0 auto 56px;
}
.bb-footer__brand img{ height:30px; margin-bottom:16px; }
.bb-footer__tag{ max-width:320px; opacity:.7; font-size:15px; line-height:1.5; }
.bb-footer__cols{ display:flex; gap:64px; flex-wrap:wrap; }
.bb-footer__col h4{
  font-family:var(--font-display); font-size:12px; letter-spacing:.12em;
  text-transform:uppercase; opacity:.5; margin-bottom:16px; font-weight:700;
}
.bb-footer__col a{
  display:block; padding:6px 0; font-size:15px; opacity:.85;
  transition:opacity .25s, transform .25s;
}
.bb-footer__col a:hover{ opacity:1; transform:translateX(4px); }
.bb-footer__bottom{
  max-width:var(--container); margin:0 auto; padding-top:24px;
  border-top:1px solid rgba(255,255,255,.12);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-size:13px; opacity:.55;
}

/* ============================================================
   REVEAL / SCROLL UTILITIES (GSAP hooks — CSS fallback baseline)
   ============================================================ */
/* Reveal state is applied via JS (progressive enhancement — if JS fails to
   load for any reason, [data-reveal] content stays fully visible instead of
   getting stuck hidden). See nav.js / studio.js / live.js. */
[data-reveal]{ will-change:transform,opacity; }

/* ============================================================
   SHARED BUTTONS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-display); font-weight:800; font-size:14px;
  letter-spacing:.02em; text-transform:uppercase;
  padding:16px 30px; border-radius:999px; border:none;
  transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out), background .3s, color .3s;
}
.btn:hover{ transform:translateY(-3px); }
.btn-arrow{ transition:transform .35s var(--ease-out); }
.btn:hover .btn-arrow{ transform:translateX(5px); }

.btn--primary-dark{ background:var(--bb-pale); color:var(--bb-navy); }
.btn--primary-dark:hover{ box-shadow:0 14px 30px -10px rgba(223,224,252,.5); }

.btn--outline-light{ background:transparent; color:var(--bb-pale); border:1.5px solid rgba(223,224,252,.4); }
.btn--outline-light:hover{ background:rgba(223,224,252,.08); border-color:var(--bb-pale); }

.btn--live{ background:var(--live-lime); color:var(--bb-navy); }
.btn--live:hover{ box-shadow:0 14px 30px -10px rgba(207,245,4,.55); }

.btn--live-outline{ background:transparent; color:var(--white); border:2px solid var(--white); }
.btn--live-outline:hover{ background:var(--white); color:var(--live-indigo); }

/* ============================================================
   KICKER — "Breaking boxes, building ___." word-cycle
   This IS the hero H1 in each page (index/studio/live) — the page's
   own hero CSS sets font-size/color/max-width on the h1 as before;
   line1/line2 here just split that size into an italic intro line
   and the bold headline line, in em so it scales with it.
   Markup starts on the first word (progressive enhancement: if JS
   fails, it just reads as a static line instead of never animating).
   --kicker-accent lets each page theme the "Impact" word; falls back
   to the Studio lilac.
   ============================================================ */
.bb-kicker{ line-height:1.05; }
.bb-kicker__line1{
  display:block; font-style:italic; font-weight:500;
  font-size:.34em; line-height:1.3; opacity:.78; margin-bottom:.14em;
}
.bb-kicker__line2{ display:block; font-weight:800; }
.bb-kicker__word{
  position:relative;
  display:inline-block;
  transition:opacity .22s var(--ease-out), transform .22s var(--ease-out), color .3s;
}
.bb-kicker__word.is-out{ opacity:0; transform:translateY(6px); }
.bb-kicker__word.is-accent{ color:var(--kicker-accent, var(--bb-lilac)); font-weight:900; }
/* Hand-drawn marker underline — only shows under the accent word (Impact),
   scaling in from the left as it lands. Uses a mask so it always picks up
   --kicker-accent, same as the word color above. */
.bb-kicker__word::after{
  content:'';
  position:absolute; left:1%; right:1%; bottom:-.1em; height:.24em;
  background-color:var(--kicker-accent, var(--bb-lilac));
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 14'%3E%3Cpath d='M2 9 Q18 2 34 8 T66 7 T98 9' fill='none' stroke='black' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 14'%3E%3Cpath d='M2 9 Q18 2 34 8 T66 7 T98 9' fill='none' stroke='black' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E");
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  opacity:0; transform:scaleX(.8); transform-origin:left center;
  transition:opacity .3s ease, transform .5s cubic-bezier(.34,1.56,.64,1);
  pointer-events:none;
}
.bb-kicker__word.is-accent::after{ opacity:1; transform:scaleX(1); }

/* ============================================================
   TESTIMONIALS — shared card, recolored per page below
   ============================================================ */
.testi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:50px; }
@media (max-width:900px){ .testi-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .testi-grid{ grid-template-columns:1fr; } }
.testi-card{
  margin:0; padding:32px 28px; border-radius:var(--radius-m);
  background:rgba(255,255,255,.04); border:1px solid rgba(223,224,252,.14);
  display:flex; flex-direction:column;
}
.testi-card p{ font-size:16px; line-height:1.6; color:rgba(223,224,252,.85); font-style:italic; }
.testi-card footer{ margin-top:20px; display:flex; flex-direction:column; gap:2px; }
.testi-card__name{ font-family:var(--font-display); font-weight:800; font-size:14px; color:var(--white); }
.testi-card__role{ font-size:12.5px; color:rgba(223,224,252,.55); }

/* Eyebrow labels */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-display); font-weight:800; font-size:12px;
  letter-spacing:.18em; text-transform:uppercase;
}
.eyebrow::before{
  content:''; width:22px; height:2px; background:currentColor; display:inline-block;
}

::selection{ background:var(--bb-purple); color:#fff; }

/* ============================================================
   WHATSAPP FLOAT — fixed on every page, above everything else
   ============================================================ */
.wa-float{
  position:fixed; right:22px; bottom:22px; z-index:999;
  width:58px; height:58px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#25D366; box-shadow:0 8px 24px rgba(13,16,36,.28);
  transition:transform .22s var(--ease-out), box-shadow .22s var(--ease-out);
}
.wa-float:hover{ transform:scale(1.08); box-shadow:0 10px 30px rgba(13,16,36,.36); }
.wa-float svg{ width:30px; height:30px; display:block; }
@media (max-width:600px){
  .wa-float{ right:16px; bottom:16px; width:52px; height:52px; }
  .wa-float svg{ width:27px; height:27px; }
}