/* ==========================================================================
   SCOPEX — BRANDING HERO V3  (brand-board concept, July 2026)
   Scoped to .bxv3 — replaces only the service hero on /branding/.
   ========================================================================== */

.bxv3{
  --bx-blue:#2059e9; --bx-blue-deep:#1a47c4; --bx-blue-mid:#6f9bf5; --bx-blue-soft:#c8d9f7;
  --bx-tint:#eef3fc; --bx-navy:#0d1d36; --bx-ink:#101d35; --bx-body:#51617c;
  --bx-muted:#7787a0; --bx-line:#e4ebf6;
  --bx-display:'Bricolage Grotesque','Geist',sans-serif;
  --bx-body-font:'Geist',sans-serif;
  --bx-mono:'Geist Mono',monospace;

  position:relative;
  overflow:hidden;
  background:#fff;
  padding:120px 0 90px;
  font-family:var(--bx-body-font);
  color:var(--bx-body);
}
.bxv3 *,.bxv3 *::before,.bxv3 *::after{box-sizing:border-box;}
.bxv3 img{max-width:100%;height:auto;}

/* ---------- canvas background ---------- */
.bxv3__grid{
  position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(32,89,233,.06) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(32,89,233,.06) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 72%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0%,#000 72%,transparent 100%);
}
.bxv3__wash,.bxv3__wash2{position:absolute;border-radius:50%;pointer-events:none;}
.bxv3__wash{right:-180px;top:-260px;width:1150px;height:1150px;
  background:radial-gradient(circle,rgba(32,89,233,.10) 0%,rgba(32,89,233,.04) 45%,rgba(255,255,255,0) 70%);}
.bxv3__wash2{left:-300px;bottom:-420px;width:820px;height:820px;
  background:radial-gradient(circle,rgba(111,155,245,.12) 0%,rgba(255,255,255,0) 68%);}
.bxv3__mark{
  position:absolute;right:19%;top:34px;pointer-events:none;
  font-family:var(--bx-display);font-size:clamp(280px,34vw,620px);font-weight:800;
  line-height:.8;color:rgba(32,89,233,.045);letter-spacing:-.04em;user-select:none;
}

/* ---------- layout ---------- */
.bxv3__inner{
  position:relative;z-index:5;
  max-width:1240px;margin:0 auto;padding:0 24px;
  display:grid;grid-template-columns:.88fr 1.12fr;gap:26px;align-items:center;
}

/* ---------- copy ---------- */
.bxv3__kicker{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--bx-mono);font-size:.75rem;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--bx-blue);
  background:var(--bx-tint);border:1px solid rgba(32,89,233,.16);
  padding:8px 15px;border-radius:99px;margin:0 0 22px;
}
.bxv3__kicker i{width:7px;height:7px;border-radius:50%;background:var(--bx-blue);display:block;}

.bxv3 h1.bxv3__title{
  font-family:var(--bx-display);
  font-size:clamp(2.3rem,3.8vw,3.75rem);
  line-height:1.04;letter-spacing:-.03em;font-weight:800;color:var(--bx-ink);
  margin:0;
}
.bxv3__hl{position:relative;display:inline-block;color:var(--bx-blue);}
.bxv3__hl svg{position:absolute;left:0;bottom:-.14em;width:100%;height:.16em;overflow:visible;}

.bxv3__lead{font-size:1.05rem;line-height:1.68;max-width:470px;margin:24px 0 32px;color:var(--bx-body);}

.bxv3__actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.bxv3__btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--bx-body-font);font-weight:600;font-size:1rem;
  border-radius:11px;padding:16px 27px;text-decoration:none;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease;
}
/* Specificity guard: the theme styles bare <a> inside content wrappers, which
   would otherwise repaint these buttons. */
.bxv3 a.bxv3__btn--primary,
.bxv3 a.bxv3__btn--primary:visited{background:var(--bx-blue);color:#fff;box-shadow:0 12px 28px rgba(32,89,233,.32);}
.bxv3 a.bxv3__btn--primary:hover,
.bxv3 a.bxv3__btn--primary:focus{background:var(--bx-blue-deep);color:#fff;transform:translateY(-2px);}
.bxv3 a.bxv3__btn--ghost,
.bxv3 a.bxv3__btn--ghost:visited{color:var(--bx-ink);border:1.5px solid var(--bx-line);background:#fff;}
.bxv3 a.bxv3__btn--ghost:hover,
.bxv3 a.bxv3__btn--ghost:focus{border-color:rgba(32,89,233,.45);color:var(--bx-blue);transform:translateY(-2px);}
.bxv3__btn span{transition:transform .18s ease;}
.bxv3__btn:hover span{transform:translateX(4px);}

.bxv3__proof{display:flex;align-items:center;gap:24px;margin-top:38px;flex-wrap:wrap;}
.bxv3__proof-item{display:flex;flex-direction:column;gap:2px;}
.bxv3__proof-item b{font-family:var(--bx-display);font-size:1.55rem;color:var(--bx-ink);letter-spacing:-.02em;font-weight:800;}
.bxv3__proof-item span{font-family:var(--bx-mono);font-size:.67rem;letter-spacing:.1em;text-transform:uppercase;color:var(--bx-muted);}
.bxv3__proof-sep{width:1px;height:34px;background:var(--bx-line);}

/* ---------- board ---------- */
.bxv3__board{position:relative;min-height:620px;}
.bxv3__mascot{
  position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:min(430px,86%);z-index:6;
  filter:drop-shadow(0 26px 30px rgba(13,34,80,.20));
}
.bxv3__shadow{
  position:absolute;bottom:4px;left:50%;transform:translateX(-50%);
  width:320px;height:34px;border-radius:50%;z-index:1;
  background:radial-gradient(ellipse,rgba(32,89,233,.16) 0%,rgba(32,89,233,0) 70%);
}

.bxv3__card{
  position:absolute;background:#fff;border:1px solid var(--bx-line);border-radius:16px;
  box-shadow:0 16px 40px rgba(16,44,100,.11);padding:15px;z-index:7;
  transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s ease;
}
.bxv3__card:hover{box-shadow:0 22px 52px rgba(16,44,100,.16);}
.bxv3__cap{
  display:block;font-family:var(--bx-mono);font-size:.6rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--bx-muted);margin-bottom:9px;
}
.bxv3__pin{
  position:absolute;top:-7px;left:50%;transform:translateX(-50%);
  width:14px;height:14px;border-radius:50%;background:var(--bx-blue);
  box-shadow:0 0 0 4px rgba(32,89,233,.16);
}

/* logo lockup */
.bxv3__card--logo{top:22px;left:-6px;width:206px;transform:rotate(-5deg);}
.bxv3__card--logo:hover{transform:rotate(-5deg) translateY(-5px);}
.bxv3__lock{display:flex;align-items:center;gap:10px;padding:6px 2px 2px;}
.bxv3__lockmark{
  width:44px;height:44px;border-radius:11px;background:var(--bx-navy);flex:none;
  display:flex;align-items:center;justify-content:center;padding:9px;
}
.bxv3__lockmark img{width:100%;height:auto;display:block;}
.bxv3__word{font-family:var(--bx-display);font-weight:700;font-size:1.12rem;color:var(--bx-ink);letter-spacing:-.02em;line-height:1;}
.bxv3__word small{display:block;font-family:var(--bx-mono);font-weight:500;font-size:.5rem;letter-spacing:.2em;color:var(--bx-muted);margin-top:4px;}

/* type specimen */
.bxv3__card--type{top:0;right:64px;width:180px;transform:rotate(4deg);text-align:center;}
.bxv3__card--type:hover{transform:rotate(4deg) translateY(-5px);}
.bxv3__spec{font-family:var(--bx-display);font-size:3.3rem;font-weight:800;color:var(--bx-ink);line-height:1;letter-spacing:-.03em;}
.bxv3__spec em{color:var(--bx-blue);font-style:normal;}
.bxv3__typerow{display:flex;justify-content:center;gap:5px;margin-top:10px;}
.bxv3__typerow span{font-family:var(--bx-mono);font-size:.55rem;color:var(--bx-muted);border:1px solid var(--bx-line);border-radius:5px;padding:3px 6px;}

/* palette */
.bxv3__card--pal{bottom:118px;left:-14px;width:216px;transform:rotate(3.5deg);}
.bxv3__card--pal:hover{transform:rotate(3.5deg) translateY(-5px);}
.bxv3__swrow{display:flex;gap:6px;}
.bxv3__sw{flex:1;height:42px;border-radius:8px;}
.bxv3__swhex{display:flex;gap:6px;margin-top:7px;}
.bxv3__swhex span{flex:1;text-align:center;font-family:var(--bx-mono);font-size:.46rem;color:var(--bx-muted);}

/* business card */
.bxv3__card--biz{bottom:44px;right:-6px;width:240px;transform:rotate(-4deg);}
.bxv3__card--biz:hover{transform:rotate(-4deg) translateY(-5px);}
.bxv3__biz{background:var(--bx-navy);border-radius:11px;padding:15px 14px;position:relative;overflow:hidden;}
.bxv3__biz-mark{position:absolute;right:-10px;bottom:-14px;width:86px;opacity:.09;}
.bxv3__biz b{display:block;color:#fff;font-family:var(--bx-display);font-size:.98rem;letter-spacing:-.01em;}
.bxv3__biz i{display:block;font-style:normal;font-family:var(--bx-mono);font-size:.52rem;letter-spacing:.14em;color:var(--bx-blue-mid);margin-top:4px;text-transform:uppercase;}
.bxv3__biz u{display:block;text-decoration:none;color:rgba(255,255,255,.62);font-size:.61rem;margin-top:15px;}

/* signage */
.bxv3__card--sign{top:196px;right:-24px;width:166px;transform:rotate(5deg);}
.bxv3__card--sign:hover{transform:rotate(5deg) translateY(-5px);}
.bxv3__sign{
  background:linear-gradient(180deg,#f7faff 0%,#eaf1fd 100%);border:1px solid var(--bx-line);
  border-radius:10px;height:78px;display:flex;align-items:center;justify-content:center;gap:8px;
}
.bxv3__sign-mark{width:26px;height:26px;border-radius:7px;background:var(--bx-blue);display:flex;align-items:center;justify-content:center;padding:6px;}
.bxv3__sign-mark img{width:100%;display:block;filter:brightness(0) invert(1);}
.bxv3__sign-t{font-family:var(--bx-display);font-weight:700;color:var(--bx-navy);font-size:.93rem;}

/* chips */
.bxv3__chip{
  position:absolute;background:#fff;border:1.5px solid rgba(32,89,233,.3);border-radius:13px;
  box-shadow:0 10px 24px rgba(16,44,100,.12);display:flex;align-items:center;justify-content:center;z-index:8;
}
.bxv3__chip--a{width:50px;height:50px;top:168px;left:100px;}
.bxv3__chip--b{width:44px;height:44px;bottom:210px;right:180px;}

/* ---------- reveal ---------- */
/* Reveal only when JS is confirmed running (html.bx-js). */
.bx-js .bxv3 [data-bx-rv]{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.2,.65,.25,1),transform .7s cubic-bezier(.2,.65,.25,1);}
.bx-js .bxv3 [data-bx-rv].bx-in{opacity:1;transform:none;}
.bxv3 [data-bx-rv="1"]{transition-delay:.07s}
.bxv3 [data-bx-rv="2"]{transition-delay:.14s}
.bxv3 [data-bx-rv="3"]{transition-delay:.21s}
.bxv3 [data-bx-rv="4"]{transition-delay:.28s}
/* cards keep their rotation when revealing */
.bx-js .bxv3__card[data-bx-rv]{opacity:0;}
.bx-js .bxv3__card[data-bx-rv].bx-in{opacity:1;}

@media (prefers-reduced-motion:reduce){
  .bxv3 [data-bx-rv]{opacity:1!important;transform:none!important;transition:none;}
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1180px){
  .bxv3{padding:104px 0 80px;}
  .bxv3__inner{grid-template-columns:.94fr 1.06fr;gap:18px;}
  .bxv3__card--logo{left:-14px;width:192px;}
  .bxv3__card--type{right:34px;width:168px;}
  .bxv3__card--pal{left:-22px;width:200px;bottom:104px;}
  .bxv3__card--biz{right:-10px;width:222px;}
  .bxv3__card--sign{right:-2px;width:152px;}
  .bxv3__chip--a{left:70px;}
  .bxv3__chip--b{right:150px;}
}

@media (max-width:980px){
  .bxv3{padding:96px 0 64px;}
  .bxv3__inner{grid-template-columns:1fr;gap:8px;}
  .bxv3__copy{text-align:center;order:1;}
  .bxv3__lead{margin-left:auto;margin-right:auto;}
  .bxv3__actions{justify-content:center;}
  .bxv3__proof{justify-content:center;}
  .bxv3__board{order:2;min-height:560px;margin-top:18px;}
  .bxv3__mark{right:6%;top:auto;bottom:12%;font-size:340px;}
  .bxv3__mascot{width:min(360px,64%);}
  .bxv3__card--logo{top:8px;left:2%;width:186px;}
  .bxv3__card--type{top:0;right:4%;width:158px;}
  .bxv3__card--pal{bottom:78px;left:0;width:194px;}
  .bxv3__card--biz{bottom:26px;right:0;width:212px;}
  .bxv3__card--sign{top:176px;right:-6px;width:146px;}
  .bxv3__chip--a{top:150px;left:8%;}
  .bxv3__chip--b{bottom:182px;right:22%;}
}

@media (max-width:760px){
  .bxv3__board{min-height:520px;}
  .bxv3__mascot{width:min(300px,58%);}
  .bxv3__card--logo{width:164px;padding:13px;}
  .bxv3__card--type{width:138px;padding:13px;}
  .bxv3__spec{font-size:2.6rem;}
  .bxv3__card--pal{width:172px;padding:13px;bottom:60px;}
  .bxv3__sw{height:34px;}
  .bxv3__card--biz{width:186px;padding:13px;}
  .bxv3__card--sign{display:none;}
  .bxv3__chip--a{width:44px;height:44px;left:2%;}
  .bxv3__chip--b{display:none;}
}

@media (max-width:560px){
  .bxv3{padding:84px 0 52px;}
  .bxv3__lead{font-size:1rem;}
  .bxv3__btn{padding:15px 22px;font-size:.95rem;flex:1 1 auto;justify-content:center;}
  .bxv3__actions{gap:12px;}
  .bxv3__proof{gap:16px;margin-top:30px;}
  .bxv3__proof-item b{font-size:1.32rem;}
  .bxv3__board{min-height:430px;margin-top:8px;}
  .bxv3__mascot{width:min(230px,54%);}
  .bxv3__mark{font-size:230px;bottom:16%;}
  .bxv3__card--logo{top:0;left:-8px;width:146px;padding:11px;transform:rotate(-4deg);}
  .bxv3__lockmark{width:36px;height:36px;padding:7px;border-radius:9px;}
  .bxv3__word{font-size:.95rem;}
  .bxv3__card--type{width:112px;padding:11px;right:-6px;transform:rotate(4deg);}
  .bxv3__spec{font-size:2rem;}
  .bxv3__typerow{display:none;}
  .bxv3__card--pal{width:152px;padding:11px;bottom:34px;left:-10px;}
  .bxv3__sw{height:28px;}
  .bxv3__swhex{display:none;}
  .bxv3__card--biz{width:158px;padding:11px;bottom:4px;right:-10px;}
  .bxv3__biz u{display:none;}
  .bxv3__chip--a{display:none;}
}

/* Theme h2 orange border guard */
.bxv3 h1,.bxv3 h2,.bxv3 h3,.bxv3 h4{border:0!important;}