/* =====================================================================
   site.css  -  loaded LAST on every page
   1) WhatsApp button: small + green
   2) ONE standard type scale for all pages
   3) About: history, CEO, team cards (each different)
   4) Services: slim top nav (no hero)
   5) Portfolio: 32-photo gallery + lightbox
   ===================================================================== */

/* ---------------------------------------------------------------------
   1) WhatsApp floating button: smaller, green
   --------------------------------------------------------------------- */
.wa-wrap{right:22px;bottom:22px;gap:12px}
.wa-btn{width:46px!important;height:46px!important;background:#25D366!important;border:0!important;color:#fff!important;
  box-shadow:0 8px 20px rgba(37,211,102,.4)!important}
.wa-btn:hover{background:#1ebe5b!important;box-shadow:0 10px 24px rgba(37,211,102,.55)!important;transform:scale(1.08)}
.wa-btn::before{background:#25D366!important;border:0!important}
.wa-btn svg{width:26px;height:26px}
.wa-btn svg.wa-ic{fill:#fff!important}
.wa-btn .wa-x{width:18px;height:18px;stroke:#fff!important}
.wa-badge{min-width:16px;height:16px;line-height:12px;padding:0 4px;font-size:10px;border-width:1.5px;top:-4px;right:-4px}
.wa-go{background:#25D366!important;border:0!important;color:#fff!important}
.wa-go:hover{background:#1ebe5b!important;color:#fff!important}
.wa-go svg{fill:#fff!important}.wa-go:hover svg{fill:#fff!important}
.wa-head div>span::before{background:#25D366!important}
.wa-pop{width:280px}
@media (max-width:640px){.wa-wrap{right:14px;bottom:14px}.wa-pop{width:min(280px,calc(100vw - 28px))}}

/* ---------------------------------------------------------------------
   2) STANDARD TYPE SCALE  (same on Home, About, Services, Portfolio)
      Display / H1 .... var(--h1)  page title + big statement lines
      H2 .............. var(--h2)  every section title
      H3 .............. var(--h4)  large card titles
      H4 .............. var(--h5)  normal card titles
      Body ............ var(--body) 16px   paragraphs, buttons, lists
      Label ........... var(--cap)  12.8px small labels
      Micro ........... var(--tiny) 10.2px tags / counters
   --------------------------------------------------------------------- */
/* H1 / display */
h1,.pg-hero h1,.sol h2,.mood h2{font-size:var(--h1)!important;line-height:1.15}
.sol h2{line-height:1.28}.mood h2{line-height:1.25}
/* H2 : section titles */
.sx h1,.sx h2,.sx h2.xl,.proj h2,.team h2,.wy h2,.fq h2,.vc h2,.spot-body h2,.nums-head{
  font-size:var(--h2)!important;line-height:1.2}
.nums-head{font-size:var(--h4)!important}      /* long statement, one step down */
/* H3 : large card titles */
.mv-c h3,.fc h3,.pc-info h3,.wy-big h3,.panel-row b,.quote-band p,.ceo h2{font-size:var(--h4)!important}
.ceo h2{font-size:var(--h2)!important}
/* H4 : card titles */
.svc h3,.step h3,.crew b,.ncard h3,.wy-c h3,.tm-info h3,.sc h3,.vc-name,.hist h3,.gi-cap b,.menu-side h3,
.vals b,.lg-item span,.marq span,.team-lead,.ceo-sign b{font-size:var(--h5)!important}
.lg-item span,.marq span{font-weight:inherit}
/* Body */
.lead,.sx-lead,.sx-lead.big,.story-p,.svc p,.step p,.mv-c p,.fc p,.checks li,.vals span,.loc-list a,.loc-list div,
.spec div,.spec b,.wy-lead,.wy-c p,.wy-big p,.sc p,.ncard p,.proj-sub,.team-sub,.vc-text,.fq-sub,.fq-a p,.ft-news p,
.ft-brand p,.ft-nav a,.ft-ct a,.ft-addr p,.ft-dir,.sx-cta p,.wa-msg,.menu-side p,.hist p,.gal .sx-lead,.mood-tag{
  font-size:var(--body)!important}
.lead{font-size:var(--h5)!important}                 /* hero intro line */
.spot-tab,.chip,.step ul,.svc ul,.stat span,.slots .on,.panel-row span,.panel-num span,.avail,.bn span,
.ceo-sign span,.gi-cap small,.ft-legal a,.ft-msg{font-size:var(--cap)!important}
.mini-stats span,.badge-yr span,.node,.mapcard .cap,.fc .tag,.fc small,.spot-img .cnt,.gi-cap i,.hist b.yr{font-size:var(--tiny)!important}
/* big numbers: one shared size for stat figures */
.stat b,.mini-stats b,.team-count b{font-size:var(--h3)!important}
.bn b,.wy-num b,.panel-num b{font-size:clamp(3rem,4.4vw,4.4rem)!important}
.step .nn{font-size:5.4rem!important}
.mv-c .big{font-size:7rem!important}
.badge-yr b{font-size:var(--h3)!important}
.pg-art b{font-size:clamp(5rem,12vw,12rem)}

/* ---------------------------------------------------------------------
   3) ABOUT
   --------------------------------------------------------------------- */
/* history timeline */
.hist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:0 28px;position:relative}
.hist::before{content:"";position:absolute;left:0;right:0;top:71px;height:1px;background:linear-gradient(90deg,#FF9900,rgba(255,153,0,.25))}
.hist li{position:relative;padding-top:0}
.hist li b{display:block;font-size:var(--h3);font-weight:300;line-height:1;letter-spacing:-1px;color:#fff;margin-bottom:52px}
.hist li i{position:absolute;left:0;top:64px;width:15px;height:15px;border-radius:50%;background:#000;border:1.5px solid #FF9900;transition:background .3s,transform .3s}
.hist li:hover i{background:#FF9900;transform:scale(1.25)}
.hist li:last-child b{color:#FF9900}
.hist h3{margin:0 0 10px;font-weight:600;line-height:1.3}
.hist p{margin:0;line-height:1.75;font-weight:300;color:rgba(255,255,255,.6);font-size:var(--cap)!important}
.hist p{font-size:var(--cap)!important}

/* CEO */
.ceo{align-items:center}
.ceo-ph{position:relative;justify-self:center;width:min(280px,60vw);aspect-ratio:1;border-radius:50%;overflow:hidden;background:#d9d6d3;
  box-shadow:0 0 0 8px #f0eeee,0 0 0 9.5px #FF9900,0 30px 50px -26px rgba(0,0,0,.5)}
.ceo-ph svg{position:absolute;inset:0;width:100%;height:100%;fill:#bdb9b5;padding:18%}
.ceo-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%;border-radius:50%}
.ceo-sign{margin-top:34px;padding-top:22px;border-top:1px solid rgba(0,0,0,.14);display:flex;flex-direction:column;gap:6px}
.ceo-sign b{font-weight:600}
.ceo-sign span{font-weight:600;letter-spacing:3px;color:#FF9900}

/* team: clean, professional cards (same format for everyone) */
.crew{grid-template-columns:repeat(5,1fr);gap:24px;align-items:stretch;counter-reset:tm}
.crew figure{counter-increment:tm;position:relative;display:flex;flex-direction:column;margin:0!important;background:#fff;border:1px solid rgba(0,0,0,.08);
  border-radius:20px;overflow:hidden;box-shadow:0 1px 0 rgba(0,0,0,.03),0 24px 40px -30px rgba(0,0,0,.35);transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s,border-color .4s}
.crew figure:hover{transform:translateY(-8px);border-color:rgba(255,153,0,.7);box-shadow:0 34px 50px -28px rgba(255,153,0,.45)}
.crew .ph{aspect-ratio:1/1!important;border-radius:0!important;background:#e4e1de}
.crew .ph::after{display:none}
.crew .ph::before{content:"0" counter(tm);position:absolute;left:14px;top:14px;z-index:2;padding:5px 10px;border-radius:999px;background:rgba(0,0,0,.55);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-size:var(--tiny);font-weight:600;letter-spacing:2px;color:#fff}
.crew img{object-position:50% 22%}
.crew figcaption{position:relative;padding:22px 22px 24px!important;text-align:left!important;border-top:3px solid #FF9900}
.crew figcaption b{font-weight:600;line-height:1.3}
.crew figcaption span{margin-top:6px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;color:#8a8886!important;font-size:var(--tiny)!important}
.crew figcaption::after{content:"";position:absolute;right:22px;top:24px;width:26px;height:1px;background:#FF9900}
.crew-note{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;margin:40px 0 0;padding:26px 34px;border:1px solid rgba(0,0,0,.1);border-radius:999px;background:rgba(255,255,255,.6)}
.crew-note div{display:flex;align-items:baseline;gap:12px}
.crew-note b{font-size:var(--h3);font-weight:300;line-height:1}
.crew-note span{font-size:var(--cap);font-weight:600;letter-spacing:2px;color:#8a8886}
.crew-note i{width:1px;align-self:stretch;background:rgba(0,0,0,.12)}
@media (max-width:1100px){
  .hist{grid-template-columns:repeat(3,1fr);gap:48px 24px}
  .hist::before{display:none}
  .hist li i{display:none}.hist li b{margin-bottom:14px}
  .crew{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:640px){.hist{grid-template-columns:1fr}.crew{grid-template-columns:1fr 1fr;gap:14px}.crew figcaption{padding:16px!important}.crew-note{border-radius:24px;padding:20px}.crew-note i{display:none}}

/* ---------------------------------------------------------------------
   4) SERVICES: slim top nav instead of the big hero
   --------------------------------------------------------------------- */
.top-nav{position:absolute;top:0;left:0;right:0;z-index:30;padding:32px 48px 0;pointer-events:none}
.top-nav nav{pointer-events:auto}
.sx.first{padding-top:170px}
@media (max-width:1100px){.top-nav{padding:24px 20px 0}.sx.first{padding-top:120px}}

/* ---------------------------------------------------------------------
   5) PORTFOLIO gallery + lightbox
   --------------------------------------------------------------------- */
@media (min-width:1101px){.sx.gal{height:auto;min-height:1080px;padding:110px 56px}}
.gal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.gi{position:relative;display:block;padding:0;aspect-ratio:4/3;border:1px solid rgba(0,0,0,.1);border-radius:22px;overflow:hidden;background:#1a1a1a;color:#fff;cursor:pointer;text-align:left;font-family:'Montserrat',sans-serif}
.gi img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.16,.84,.3,1)}
.gi:hover img{transform:scale(1.07)}
.gi::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.82));opacity:0;transition:opacity .4s}
.gi:hover::after,.gi:focus-visible::after{opacity:1}
.gi:focus-visible{outline:2px solid #FF9900;outline-offset:3px}
.gi-cap{position:absolute;left:20px;right:20px;bottom:18px;z-index:2;display:flex;flex-direction:column;gap:4px;opacity:0;transform:translateY(10px);transition:opacity .4s,transform .4s}
.gi:hover .gi-cap,.gi:focus-visible .gi-cap{opacity:1;transform:none}
.gi-cap i{font-style:normal;font-weight:600;letter-spacing:3px;color:#FF9900}
.gi-cap b{font-weight:600}
.gi-cap small{font-weight:400;color:rgba(255,255,255,.75)}
/* empty slot (photo not added yet) */
.gi-ph{display:none;position:absolute;inset:0;align-items:center;justify-content:center;background:
  linear-gradient(135deg,rgba(255,153,0,.14),rgba(255,153,0,0) 55%),repeating-linear-gradient(45deg,#1b1b1b 0 14px,#202020 14px 28px)}
.gi-ph b{font-size:var(--h1);font-weight:200;letter-spacing:-1px;color:transparent;-webkit-text-stroke:1px rgba(255,153,0,.6)}
.gi.empty .gi-ph{display:flex}
.gi.empty .gi-cap{opacity:1;transform:none}
.gi.empty::after{opacity:1}
.lb{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;gap:20px;padding:24px;background:rgba(0,0,0,.92)}
.lb.on{display:flex}
.lb figure{margin:0;max-width:min(980px,80vw);text-align:center}
.lb img{max-width:100%;max-height:78vh;border-radius:14px;display:block;margin:0 auto}
.lb figcaption{margin-top:16px;font-size:var(--cap);letter-spacing:2px;color:rgba(255,255,255,.75)}
.lb-x,.lb-n{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border:1.5px solid #FF9900;border-radius:50%;background:transparent;color:#FF9900;cursor:pointer;flex:none}
.lb-x:hover,.lb-n:hover{color:#fff}
.lb-x{position:absolute;top:22px;right:22px}
@media (max-width:1100px){.gal-grid{grid-template-columns:repeat(3,1fr);gap:16px}}
@media (max-width:640px){.gal-grid{grid-template-columns:1fr 1fr;gap:12px}.gi{border-radius:16px}.gi-cap{opacity:1;transform:none;left:12px;right:12px;bottom:12px}.gi::after{opacity:1}.gi-cap small,.gi-cap i{display:none}
  .lb{padding:14px;gap:8px}.lb-n{position:absolute;bottom:22px}.lb-n.prev{left:22px}.lb-n.next{right:22px}.lb figure{max-width:100%}}

/* ---------------------------------------------------------------------
   6) Why-choose: smaller "projects" card
   --------------------------------------------------------------------- */
@media (min-width:1101px){
  .wy-grid{grid-template-columns:.8fr 1fr 1fr!important}
  .wy-big{grid-column:1/2!important;padding:34px 30px!important}
  .wy-big .wy-num{margin-top:26px}
  .wy-big .wy-num b{font-size:clamp(3rem,4vw,3.6rem)!important}
  .wy-big .wy-rings{width:340px;height:340px;right:-90px;top:-80px}
  .wy-big p{max-width:none}
}

/* ---------------------------------------------------------------------
   7) About: story photo cards - each one a different shape
   --------------------------------------------------------------------- */
.collage .c1{border-radius:999px 999px 30px 30px;border:0;box-shadow:0 40px 60px -34px rgba(0,0,0,.5)}
.collage .c2{width:min(250px,40%);height:auto;aspect-ratio:1;border-radius:50%;border:0;box-shadow:0 0 0 7px #f0eeee,0 0 0 8.5px #FF9900,0 30px 50px -28px rgba(0,0,0,.5)}
.collage .c3{border:0;border-radius:0;box-shadow:none;clip-path:polygon(0 0,calc(100% - 52px) 0,100% 52px,100% 100%,52px 100%,0 calc(100% - 52px));right:2%;bottom:0;width:44%;height:38%}

/* ---------------------------------------------------------------------
   8) Top nav: dark pill so it reads on dark AND light sections
   --------------------------------------------------------------------- */
.top-nav nav{background:rgba(11,11,11,.88)!important;box-shadow:0 10px 30px rgba(0,0,0,.35)!important;border:1px solid rgba(255,255,255,.08)}
.sx.first{height:1080px}

/* ---------------------------------------------------------------------
   9) RICHER BLACK BACKGROUNDS (all pages)
      deep blue-black base, warm orange glow top-right, cool glow bottom-left,
      soft vignette + fine grain. Cards become glassy so they lift off it.
   --------------------------------------------------------------------- */
:root{--rich:
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .09 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
  radial-gradient(900px 620px at 88% -4%,rgba(255,153,0,.20),transparent 62%),
  radial-gradient(820px 720px at -6% 104%,rgba(64,92,190,.24),transparent 62%),
  radial-gradient(700px 480px at 52% 52%,rgba(255,255,255,.035),transparent 70%),
  linear-gradient(165deg,#07080d 0%,#0b0d16 48%,#06070b 100%)}
body{background:#05060a}
.hero,.sol,.wy,.sx.dark,.ft{background:var(--rich)!important}
.sx.dark::after{background:radial-gradient(circle,rgba(255,153,0,.16),rgba(255,153,0,0) 66%)}
/* glassy cards on dark */
.mv-c,.svc,.bn,.wy-c,.vals,.sx-cta,.wy-cta{background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.02))!important;
  border-color:rgba(255,255,255,.12)!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.mv-c:first-child,.wy-big{background:radial-gradient(120% 90% at 100% 0%,rgba(255,153,0,.24),rgba(255,153,0,0) 58%),linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02))!important;border-color:rgba(255,153,0,.45)!important}
.mv-c:hover,.svc:hover,.bn:hover,.wy-c:hover{border-color:rgba(255,153,0,.7)!important}

/* About: story text only (photo collage removed) */
.story-solo{max-width:900px;margin:0 auto}