/* =====================================================================
   overrides.css  -  loaded AFTER style.css
   1) every section = 1080px tall (desktop)
   2) every button = transparent background + orange border only
   ===================================================================== */

/* ---------- 1) SECTION HEIGHT : 1080px ---------- */
:root{--sec-h:1080px}
@media (min-width:1101px){
  html{scroll-snap-type:y proximity}
  .nums,.proj,.sol,.team,.vc,.wy,.fq,.mood{
    height:var(--sec-h)!important;min-height:var(--sec-h)!important;max-height:var(--sec-h)!important;
    overflow:hidden;scroll-snap-align:start
  }
}

/* ---------- 2) BUTTONS : transparent + orange border only ---------- */
.btn,.btn.cta,.btn.ghost,.btn.vision,.vbtn,.mood-btn,.fq-ask,.sol h2 .wwd,.wa-go,
.vc-arrow,.vc-arrow:disabled,.ft-sub button,.ft-top b,.menu-x,.vm-x,.wa-btn{
  background:transparent!important;
  border:1.5px solid #FF9900!important;
  color:#FF9900!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  filter:none!important;
}
/* shine sweep + ripple were white fills -> remove */
.btn::after,.vbtn::after,.mood-btn::after,.fq-ask::after,.sol h2 .wwd::after,.rip{display:none!important}
/* arrow circles inside buttons: no fill, no ring */
.btn>svg,.fq-ask>svg,.vbtn .ar,.mood-btn b,.sol h2 .wwd b{background:transparent!important;border:0!important}
.btn>svg,.fq-ask>svg,.vbtn .ar svg,.mood-btn b svg,.sol h2 .wwd b svg{stroke:#FF9900!important}
/* hover: stays transparent, orange border stays, text/arrow go white (dark sections) */
.btn:hover,.vbtn:hover,.mood-btn:hover,.fq-ask:hover,.sol h2 .wwd:hover,.wa-go:hover,
.vc-arrow:hover:not(:disabled),.ft-sub button:hover,.ft-top:hover b,.menu-x:hover,.vm-x:hover,.wa-btn:hover{
  background:transparent!important;border-color:#FF9900!important;color:#fff!important;box-shadow:none!important;
}
.btn:hover>svg,.fq-ask:hover>svg{stroke:#fff!important}
.mood-btn:hover b svg,.sol h2 .wwd:hover b svg,.vbtn:hover .ar svg{stroke:#fff!important}
.vc-arrow:disabled{opacity:.35}
/* buttons that sit on LIGHT sections keep dark text so they stay readable */
.nums .vbtn,.proj .vbtn,.vc .vbtn,.vc .vc-arrow{color:#0b0b0b!important}
.nums .vbtn:hover,.proj .vbtn:hover,.vc .vbtn:hover,.vc .vc-arrow:hover:not(:disabled){color:#c46f00!important}
.nums .vbtn:hover .ar svg,.proj .vbtn:hover .ar svg{stroke:#c46f00!important}
.vc .vc-arrow{color:#0b0b0b!important}
/* WhatsApp floating button: orange ring, orange icon, no green */
.wa-btn::before{background:transparent!important;border:1.5px solid #FF9900}
.wa-btn svg.wa-ic{fill:#FF9900!important}
.wa-btn .wa-x{stroke:#FF9900!important}
.wa-go{color:#FF9900!important}.wa-go svg{fill:#FF9900!important}
.wa-go:hover svg{fill:#fff!important}
/* footer "back to top" label button */
.ft-top{border:0!important;background:transparent!important}
.ft-top b svg{stroke:#FF9900}

/* ---------- 3) FIT CONTENT INSIDE 1080px (desktop) ---------- */
@media (min-width:1101px){
  /* Why choose us: tighter paddings so cards + CTA all show */
  .wy{padding:84px 56px 64px;display:flex;align-items:center}
  .wy-in{width:100%}
  .wy-head{margin-bottom:40px}
  .wy-eb{margin-bottom:18px}
  .wy-grid{grid-template-rows:repeat(2,minmax(0,290px));gap:24px}
  .wy-c{padding:30px 32px 30px}
  .wy-big{padding:40px}
  .wy-num{margin-top:20px}
  .wy-cta{margin-top:30px;padding:20px 40px}
  /* FAQ: centre the block vertically inside the 1080px frame */
  .fq{display:flex;align-items:center;padding:90px 56px}
  .fq-in{width:100%}
}

/* ---------- 4) WhatsApp popup -> same dark + orange theme ---------- */
.wa-pop{background:#0b0b0b;color:#fff;box-shadow:0 24px 60px -12px rgba(0,0,0,.7),0 0 0 1px rgba(255,153,0,.45)}
.wa-head{background:#111;color:#fff;border-bottom:1px solid rgba(255,153,0,.35)}
.wa-head div>span::before{background:#FF9900}
.wa-body{background:#0b0b0b}
.wa-msg{background:transparent;color:#fff;border:1px solid rgba(255,153,0,.45);box-shadow:none}

/* ---------- 5) small round "buttons" inside cards ---------- */
.pgo,.sc .go2,.vc-play,.pc.next .pgo{
  background:transparent!important;border:1.5px solid #FF9900!important;box-shadow:none!important;color:#FF9900!important
}
.pgo svg,.sc .go2 svg,.vc-play svg{stroke:#FF9900!important}
.vc-play svg{fill:#FF9900!important}
.sc:hover .go2{background:transparent!important;color:#fff!important}
.vc-play::before{display:none!important}

/* menu now has 8-9 links: stagger them too */
.menu.open .menu-nav a:nth-child(8){transition-delay:.35s}.menu.open .menu-nav a:nth-child(9){transition-delay:.4s}

/* ---------- hero = exactly one screen (stats row never cut) ---------- */
@media (min-width:1101px){
  .hero{height:100vh;height:100svh;min-height:680px;max-height:none;overflow:hidden;scroll-snap-align:start}
  .hero>div[style*="height:56px"]{height:22px!important}
}
@media (min-width:1101px) and (max-height:860px){.stat{padding:16px 24px}.stat:first-child{padding-left:0}}