/* =========================================================
   Matrix Design — layout & component styles
   (motion/keyframes live in animations.css)
   ========================================================= */

/* ---------- Jost @font-face ---------- */
@font-face { font-family:'Jost'; font-weight:300; font-style:normal; src:url('../fonts/Jost-Light.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Jost'; font-weight:400; font-style:normal; src:url('../fonts/Jost-Regular.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Jost'; font-weight:400; font-style:italic; src:url('../fonts/Jost-Italic.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Jost'; font-weight:500; font-style:normal; src:url('../fonts/Jost-Medium.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Jost'; font-weight:500; font-style:italic; src:url('../fonts/Jost-MediumItalic.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Jost'; font-weight:600; font-style:normal; src:url('../fonts/Jost-SemiBold.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Jost'; font-weight:700; font-style:normal; src:url('../fonts/Jost-Bold.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Jost'; font-weight:700; font-style:italic; src:url('../fonts/Jost-BoldItalic.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Jost'; font-weight:800; font-style:normal; src:url('../fonts/Jost-ExtraBold.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Jost'; font-weight:900; font-style:normal; src:url('../fonts/Jost-Black.ttf') format('truetype'); font-display:swap; }

/* ---------- Tokens ---------- */
:root{
  --blue: #009edd;
  --blue-deep: #0083b8;
  --blue-dark: #006a96;
  --blue-50: #e6f6fc;
  --blue-100: #c6ebf7;
  --yellow: #ffbc37;
  --yellow-deep: #f0a826;
  --yellow-50: #fff5dc;
  --ink: #0a1929;
  --ink-2: #2a3f55;
  --muted: #607183;
  --rule: #d8e7ef;
  --paper: #ffffff;
  --soft: #f7fbfd;
  --max: 1480px;
  --gutter: clamp(20px, 4vw, 56px);
  --font: 'Jost', system-ui, -apple-system, sans-serif;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--paper);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
html{scroll-behavior:smooth}
body{font-weight:400;line-height:1.5;font-size:16px}
/* Native cursor is hidden only while the custom cursor is running (set by main.js) */
html.has-cursor body, html.has-cursor button, html.has-cursor .service{cursor:none}
@media (hover:none){html.has-cursor body, html.has-cursor button{cursor:auto}}
body.menu-open{overflow:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
::selection{background:var(--yellow);color:var(--ink)}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* ---------- Header ---------- */
.header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:18px var(--gutter);display:flex;align-items:center;justify-content:space-between;
  transition:background .4s var(--ease), padding .4s var(--ease), box-shadow .4s var(--ease);
}
.header.scrolled{background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);padding:12px var(--gutter);box-shadow:0 6px 30px -10px rgba(10,25,41,.08)}
.brand{display:flex;align-items:center;gap:14px}
.brand-mark{width:54px;height:54px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;transition:transform .6s var(--ease);box-shadow:0 4px 14px -4px rgba(255,188,55,.5);flex-shrink:0}
.brand-mark img{width:100%;height:100%;object-fit:cover;display:block}
.brand:hover .brand-mark{transform:rotate(360deg)}
.brand-text{display:flex;flex-direction:column;line-height:1;gap:6px}
.brand-wordmark{height:22px;width:auto;display:block}
.brand-text .bt{font-size:9.5px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);padding-left:2px}
@media (max-width:560px){.brand-wordmark{height:18px}.brand-mark{width:46px;height:46px}.brand-text .bt{font-size:9px}}

.nav{display:flex;gap:32px;align-items:center}
.nav a{font-size:14px;font-weight:500;position:relative;padding:6px 0}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--blue);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.nav a:hover::after,.nav a:focus-visible::after{transform:scaleX(1);transform-origin:left}

.cta-btn{
  font-family:var(--font);font-size:13px;font-weight:600;letter-spacing:.01em;
  border-radius:999px;padding:11px 22px;
  background:var(--blue);color:#fff;transition:background .35s var(--ease);
  display:inline-flex;align-items:center;gap:8px;
}
.cta-btn:hover{background:var(--ink)}
.cta-btn .arrow{transition:transform .35s var(--ease)}
.cta-btn:hover .arrow{transform:translateX(3px) rotate(-45deg)}

.nav-toggle{display:none}

/* Mobile menu — only displayed below 880px */
.mobile-menu{
  position:fixed;inset:0;background:var(--blue);z-index:90;
  display:none;flex-direction:column;justify-content:center;padding:0 var(--gutter);
  transform:translateY(-100%);transition:transform .6s var(--ease), visibility 0s linear .6s;
  visibility:hidden;overflow-y:auto;
}
.mobile-menu a{font-weight:700;font-size:40px;color:#fff;padding:10px 0;line-height:1.1;letter-spacing:-.02em}
.mobile-menu a .num{font-size:11px;color:var(--yellow);vertical-align:super;margin-right:14px;font-weight:500;letter-spacing:.12em}
.mobile-menu a:hover{color:var(--yellow)}
.mobile-menu.open{transform:translateY(0);visibility:visible;transition:transform .6s var(--ease), visibility 0s}

@media (max-width:880px){
  .nav{display:none}
  .header .cta-btn{display:none}
  .nav-toggle{display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px;background:var(--blue);border-radius:50%;width:42px;height:42px;justify-content:center;flex-shrink:0}
  .nav-toggle span{width:18px;height:2px;background:#fff;transition:transform .35s var(--ease)}
  .nav-toggle.open span:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
  .nav-toggle.open span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}
  .mobile-menu{display:flex}
}
@media (max-width:880px) and (max-height:560px){.mobile-menu{justify-content:flex-start;padding-top:90px}.mobile-menu a{font-size:30px;padding:6px 0}}

/* ---------- Layout ---------- */
section{position:relative;padding:120px var(--gutter)}
.wrap{max-width:var(--max);margin:0 auto;position:relative;z-index:2}
.section-head{display:flex;align-items:flex-start;gap:40px;margin-bottom:60px;flex-wrap:wrap}
.eyebrow{font-size:12px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--blue);display:inline-flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:32px;height:2px;background:var(--blue)}
.num-tag{font-weight:600;color:var(--yellow-deep)}

h1,h2,h3,h4{font-weight:800;letter-spacing:-.025em;line-height:1}
.it{font-style:italic;color:var(--blue)}
.hl{color:var(--blue)}
.yl{color:var(--yellow-deep)}
.hl-yellow{background:linear-gradient(180deg, transparent 60%, var(--yellow) 60%);padding:0 4px}

/* ---------- HERO ---------- */
.hero{
  min-height:100vh;padding:130px var(--gutter) 60px;
  display:flex;flex-direction:column;justify-content:space-between;
  position:relative;overflow:hidden;background:var(--paper);
}
.hero-bg-blob-1{
  position:absolute;top:-200px;right:-200px;width:700px;height:700px;border-radius:50%;
  background:radial-gradient(circle at center, rgba(0,158,221,.18), rgba(0,158,221,0) 65%);
  pointer-events:none;
}
.hero-bg-blob-2{
  position:absolute;bottom:-150px;left:-150px;width:500px;height:500px;border-radius:50%;
  background:radial-gradient(circle at center, rgba(255,188,55,.22), rgba(255,188,55,0) 65%);
  pointer-events:none;
}

.hero-top{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;flex-wrap:wrap;position:relative;z-index:2}
.hero-meta{display:flex;flex-direction:column;gap:6px;font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.hero-meta b{color:var(--ink);font-weight:700}
.hero-loc{text-align:right;font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);line-height:1.9}
.hero-loc b{color:var(--blue);font-weight:700;display:block;font-size:13px}

.hero-main{margin-top:auto;padding-top:80px;position:relative;z-index:2;padding-right:26%}
@media (max-width:980px){.hero-main{padding-right:0}}
.hero-headline{
  font-weight:900;
  font-size:clamp(40px, 6.2vw, 86px);line-height:1.02;letter-spacing:-.03em;
  color:var(--ink);text-transform:lowercase;
}
.hero-headline .line{display:block;overflow:hidden}
.hero-headline .hl-yellow{background:linear-gradient(180deg, transparent 65%, var(--yellow) 65%, var(--yellow) 95%, transparent 95%);padding:0 12px}
.hero-headline .hl{color:var(--blue)}

.hero-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-top:60px;flex-wrap:wrap}
.hero-blurb{max-width:420px;font-size:16px;line-height:1.6;color:var(--ink-2);font-weight:400}
.hero-blurb b{color:var(--blue);font-weight:600}
.hero-cta-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.cta-big{
  display:inline-flex;align-items:center;gap:12px;padding:18px 30px;border-radius:999px;
  background:var(--blue);color:#fff;font-weight:600;font-size:14px;
  transition:background .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);
}
.cta-big:hover{background:var(--ink)}
.cta-big.alt{background:var(--yellow);color:var(--ink)}
.cta-big.alt:hover{background:var(--ink);color:#fff}
.cta-big svg{transition:transform .35s var(--ease)}
.cta-big:hover svg{transform:translateX(4px) rotate(-45deg)}

/* Hero side keyword column */
.hero-keywords{
  position:absolute;top:14%;right:var(--gutter);width:24%;max-width:320px;
  height:64vh;max-height:560px;overflow:hidden;z-index:3;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
  mask-image:linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
}
.hero-keywords-track{display:flex;flex-direction:column;gap:14px;align-items:flex-end}
.kw{
  pointer-events:auto;
  padding:11px 22px;background:#fff;border:1.5px solid var(--blue);border-radius:999px;
  font-weight:600;font-size:14px;color:var(--ink);
  white-space:nowrap;
  box-shadow:0 8px 24px -12px rgba(0,158,221,.25);
  transition:transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease);
}
.kw:hover{transform:scale(1.1);background:var(--blue);color:#fff}
.kw.yl{background:var(--yellow);border-color:var(--yellow);color:var(--ink);font-weight:700}
.kw.yl:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.kw.solid{background:var(--blue);color:#fff;border-color:var(--blue);font-weight:700}
.kw.solid:hover{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}
.kw.dark{background:var(--ink);color:#fff;border-color:var(--ink);font-weight:700}
.kw.dark:hover{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}
.kw.ghost{background:transparent;color:var(--ink);border:1.5px dashed var(--muted)}
.kw.ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink);border-style:solid}
@media (max-width:980px){.hero-keywords{display:none}}

.hero-scroll{display:flex;align-items:center;gap:14px;font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);width:100%;justify-content:flex-end;margin-top:24px}
.hero-scroll .line-v{display:inline-block;width:1.5px;height:36px;background:var(--blue);transform-origin:top}

.parallax{will-change:transform}

/* ---------- Marquee: top services ---------- */
.marquee{
  background:var(--blue);color:#fff;overflow:hidden;padding:24px 0;display:flex;gap:0;
  border-top:3px solid var(--yellow);
}
.marquee-inner{display:flex;flex-shrink:0;padding-right:50px}
.marquee-item{font-size:clamp(34px,5.2vw,68px);font-weight:800;letter-spacing:-.02em;line-height:1;display:flex;align-items:center;gap:50px;white-space:nowrap;text-transform:lowercase}
.marquee-item .yl{color:var(--yellow);font-style:italic}
.marquee-item .star{width:28px;height:28px;flex-shrink:0;color:var(--yellow)}

/* ---------- About ---------- */
.about{padding:160px var(--gutter)}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
@media (max-width:880px){.about-grid{grid-template-columns:1fr;gap:40px}}
.about-h{font-size:clamp(40px,5.5vw,84px);line-height:1.02;letter-spacing:-.03em;color:var(--ink);font-weight:800;text-transform:lowercase}
.about-h .hl-yellow{background:linear-gradient(180deg, transparent 65%, var(--yellow) 65%);padding:0 6px}
.about-body{display:flex;flex-direction:column;gap:22px;font-size:16px;line-height:1.7;color:var(--ink-2)}
.about-body p:first-child::first-letter{font-weight:900;font-size:64px;line-height:.85;float:left;padding:6px 14px 0 0;color:var(--blue)}
.about-body strong{color:var(--ink);font-weight:700}
.about-body .about-lead{font-size:20px;line-height:1.5;color:var(--ink);font-weight:600}

.values{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:80px;
  border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);
}
@media (max-width:880px){.values{grid-template-columns:repeat(2,1fr)}}
.value{
  padding:32px 24px;border-right:1px solid var(--rule);
  display:flex;flex-direction:column;gap:14px;position:relative;
  transition:background .4s var(--ease);
}
.value:hover{background:var(--blue-50)}
.value:last-child{border-right:0}
@media (max-width:880px){.value:nth-child(2n){border-right:0}}
@media (max-width:480px){.values{grid-template-columns:1fr}.value{border-right:0;padding:26px 4px}.value:not(:last-child){border-bottom:1px solid var(--rule)}}
.value .v-num{font-size:12px;font-weight:600;color:var(--yellow-deep);letter-spacing:.14em}
.value .v-title{font-size:26px;line-height:1.1;letter-spacing:-.015em;font-weight:800;text-transform:lowercase}
.value .v-title .hl{color:var(--blue)}
.value .v-desc{font-size:14px;color:var(--muted);line-height:1.6}

/* ---------- CEO / Founder (blue) ---------- */
.ceo{background:var(--blue);color:#fff;padding:160px var(--gutter);position:relative;overflow:hidden}
.ceo::before{
  content:"";position:absolute;top:-100px;right:-100px;width:500px;height:500px;border-radius:50%;
  background:radial-gradient(circle at center, rgba(255,188,55,.25), rgba(255,188,55,0) 65%);
  pointer-events:none;
}
.ceo .eyebrow{color:var(--yellow)}
.ceo .eyebrow::before{background:var(--yellow)}
.ceo .num-tag{color:#fff}
.ceo-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:80px;align-items:start;margin-top:60px;position:relative;z-index:2}
@media (max-width:880px){.ceo-grid{grid-template-columns:1fr;gap:40px}}
.ceo-portrait-wrap{position:sticky;top:100px}
@media (max-width:880px){.ceo-portrait-wrap{position:static}}
.ceo-portrait{
  position:relative;aspect-ratio:4/3;background:rgba(255,255,255,.08);overflow:hidden;
  border:2px solid rgba(255,255,255,.15);
}
.ceo-photo{
  width:100%;height:100%;object-fit:cover;object-position:center 40%;
  display:block;transition:transform 1.2s var(--ease-out);
}
.ceo-portrait:hover .ceo-photo{transform:scale(1.04)}
.ceo-portrait::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, transparent 55%, rgba(0,131,184,.35) 100%);
}
.ceo-portrait-frame{position:absolute;top:14px;left:14px;right:14px;bottom:14px;border:1px solid rgba(255,255,255,.4);pointer-events:none;z-index:2}
.ceo-tag{
  position:absolute;left:24px;bottom:24px;padding:10px 18px;z-index:3;
  background:var(--yellow);color:var(--ink);font-weight:600;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  display:flex;align-items:center;gap:10px;
}
.ceo-tag .dot{width:8px;height:8px;background:var(--ink);border-radius:50%}

.ceo-content h3{font-size:clamp(40px,5vw,76px);line-height:1.02;letter-spacing:-.03em;font-weight:900}
.ceo-content h3 .hl-yellow{background:linear-gradient(180deg, transparent 65%, var(--yellow) 65%);padding:0 6px;color:var(--ink)}
.ceo-content .ceo-role{font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-top:14px}
.ceo-content .ceo-bio{margin-top:32px;font-size:16px;line-height:1.75;color:rgba(255,255,255,.88);display:flex;flex-direction:column;gap:18px}
.ceo-content .ceo-bio strong{color:#fff;font-weight:700}

.awards{margin-top:48px;display:flex;flex-direction:column;gap:0;border-top:1px solid rgba(255,255,255,.22)}
.award{
  display:grid;grid-template-columns:70px 1fr auto;gap:24px;align-items:center;
  padding:22px 0;border-bottom:1px solid rgba(255,255,255,.22);
  transition:padding-left .5s var(--ease);position:relative;overflow:hidden;
}
.award:hover{padding-left:22px}
.award::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--yellow);transform:scaleY(0);transform-origin:top;transition:transform .5s var(--ease)}
.award:hover::before{transform:scaleY(1)}
.award .a-year{font-size:13px;font-weight:600;color:var(--yellow);letter-spacing:.06em}
.award .a-title{font-size:19px;line-height:1.3;color:#fff;font-weight:500}
.award .a-arrow{color:rgba(255,255,255,.5);transition:transform .4s var(--ease), color .4s var(--ease)}
.award:hover .a-arrow{transform:translateX(-6px) rotate(-45deg);color:var(--yellow)}
@media (max-width:560px){.award{grid-template-columns:52px 1fr auto;gap:14px}.award .a-title{font-size:16px}}

/* ---------- Services ---------- */
.services{padding:160px var(--gutter)}
.services-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:60px;flex-wrap:wrap}
.services-head h2{font-size:clamp(44px,6.5vw,108px);line-height:.98;letter-spacing:-.035em;max-width:880px;font-weight:900;text-transform:lowercase}
.services-head h2 .hl{color:var(--blue)}
.services-head h2 .hl-yellow{background:linear-gradient(180deg, transparent 65%, var(--yellow) 65%);padding:0 6px}
.services-head p{max-width:360px;color:var(--ink-2);font-size:15.5px;line-height:1.65}

.service{
  border-top:2px solid var(--ink);padding:38px 0;display:grid;
  grid-template-columns:80px 1fr auto;gap:40px;align-items:center;
  cursor:pointer;transition:padding .5s var(--ease), background .5s var(--ease);position:relative;
}
.service:last-of-type{border-bottom:2px solid var(--ink)}
.service:hover{padding-left:20px;padding-right:20px;background:var(--blue-50)}
.service .s-num{font-size:13px;font-weight:600;color:var(--yellow-deep);letter-spacing:.12em}
.service .s-title{font-size:clamp(36px,4.8vw,80px);line-height:1;letter-spacing:-.025em;transition:transform .5s var(--ease), color .5s var(--ease);font-weight:900;text-transform:lowercase;min-width:0;overflow-wrap:anywhere}
.service:hover .s-title,.service.open .s-title{color:var(--blue)}
.service .s-plus{
  width:56px;height:56px;border:2px solid var(--ink);border-radius:50%;
  display:flex;align-items:center;justify-content:center;transition:background .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease);
  flex-shrink:0;
}
.service .s-plus svg{transition:transform .5s var(--ease)}
.service:hover .s-plus{background:var(--blue);border-color:var(--blue);color:#fff}
.service.open .s-plus{background:var(--yellow);border-color:var(--yellow);color:var(--ink)}
.service.open .s-plus svg{transform:rotate(45deg)}
.service .s-body{
  grid-column:2/3;max-height:0;overflow:hidden;
  transition:max-height .7s var(--ease), margin-top .7s var(--ease), opacity .5s var(--ease);
  opacity:0;
}
.service.open .s-body{max-height:600px;margin-top:28px;opacity:1}
.service .s-body-inner{display:grid;grid-template-columns:1.2fr 2fr;gap:60px;padding-bottom:8px}
@media (max-width:760px){.service .s-body-inner{grid-template-columns:1fr;gap:20px}}
.s-body p{color:var(--ink-2);font-size:15px;line-height:1.7}
.s-body ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px 24px;font-size:14px;color:var(--ink-2)}
@media (max-width:600px){.s-body ul{grid-template-columns:1fr}}
.s-body li{position:relative;padding-left:22px;line-height:1.5;font-weight:500}
.s-body li::before{content:"→";position:absolute;left:0;top:0;color:var(--blue);font-weight:700}
@media (max-width:760px){
  .service{grid-template-columns:50px 1fr auto;gap:20px;padding:28px 0}
  .service .s-num{font-size:11px}
  .service:hover{padding-left:10px;padding-right:10px}
}
@media (max-width:420px){
  .service{grid-template-columns:34px 1fr auto;gap:12px}
  .service .s-plus{width:46px;height:46px}
  .service .s-body{grid-column:1/-1}
}

/* ---------- Stats (yellow) ---------- */
.stats{background:var(--yellow);padding:120px var(--gutter);position:relative;overflow:hidden}
.stats::before{
  content:"";position:absolute;top:-200px;left:-100px;width:500px;height:500px;border-radius:50%;
  background:radial-gradient(circle, rgba(0,158,221,.18), rgba(0,158,221,0) 65%);
}
/* Columns are sized from each stat's own number (never narrower than it), then the
   spare width is shared equally. Equal 1fr columns forced "2,000+" (3.3em wide) into
   a column narrower than itself, so it crossed the divider into the next stat. */
.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(max-content,1fr));gap:0;position:relative;z-index:2}
@media (max-width:880px){.stats-grid{grid-template-columns:repeat(2,minmax(max-content,1fr))}}
.stat{padding:30px;border-right:2px solid var(--ink);position:relative}
.stat:last-child{border-right:0}
@media (max-width:880px){.stat:nth-child(2n){border-right:0}}
.stat .s-val{font-size:clamp(56px,8.5vw,128px);line-height:.95;letter-spacing:-.045em;color:var(--ink);font-weight:900;font-variant-numeric:tabular-nums;white-space:nowrap;display:grid}
/* Live counter and an invisible copy of the final value share one grid cell, so the
   stat is always as wide as its final number and the count-up never shifts the layout */
.stat .s-val > span{grid-area:1/1;display:flex;align-items:baseline;gap:4px}
.stat .s-val .s-val-sizer{visibility:hidden}
.stat .s-val .hl{color:var(--blue);font-size:.55em}
/* The label wraps inside the column instead of widening it */
.stat .s-lbl{width:0;min-width:100%;font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--ink);margin-top:14px;line-height:1.5;text-transform:uppercase}
.stat .s-lbl span{display:block;max-width:220px}
/* Small phones: two columns can't hold "17+" and "2,000+" at 56px, so padding and
   type scale with the screen, sized to exactly fit both numbers */
@media (max-width:480px){
  .stat{padding:30px 16px}
  .stat .s-val{font-size:min(56px, calc((100vw - 2 * var(--gutter) - 64px) / 4.95))}
}

/* ---------- Industries marquee (dark) ---------- */
.industries{padding:0;background:var(--ink);color:#fff;overflow:hidden}
.ind-marquee{display:flex;gap:0;padding:36px 0;width:max-content}
.ind-item{font-size:clamp(40px,6vw,86px);line-height:1;letter-spacing:-.025em;display:flex;align-items:center;gap:50px;white-space:nowrap;flex-shrink:0;padding-right:50px;font-weight:900;text-transform:lowercase}
.ind-item .dot{width:12px;height:12px;background:var(--yellow);border-radius:50%;flex-shrink:0}
.ind-item .hl{color:var(--blue)}

/* ---------- Clients 4-row scroller ---------- */
.clients-logos{padding:120px 0 120px;background:var(--soft);overflow:hidden}
.clients-logos .head-pad{padding:0 var(--gutter); padding-left:100px;}
.cl-headline{font-size:clamp(40px,5.5vw,84px);line-height:1.02;letter-spacing:-.03em;font-weight:900;margin-top:14px;text-transform:lowercase;max-width:900px}
.cl-headline .hl{color:var(--blue)}
.cl-headline .hl-yellow{background:linear-gradient(180deg, transparent 65%, var(--yellow) 65%);padding:0 6px}
.cl-sub{margin-top:18px;color:var(--ink-2);max-width:680px;font-size:16px;line-height:1.65}
.cl-sub strong{color:var(--blue);font-weight:700}

.logo-rows{margin-top:60px;display:flex;flex-direction:column;gap:18px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.logo-row{display:flex;gap:18px;flex-shrink:0;width:max-content}
.logo-card{
  flex-shrink:0;width:200px;height:120px;background:#fff;border:1px solid var(--rule);
  border-radius:14px;display:flex;align-items:center;justify-content:center;padding:20px;
  transition:transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
  position:relative;overflow:hidden;text-decoration:none;
}
.logo-card img{max-width:100%;max-height:100%;object-fit:contain;transition:transform .45s var(--ease)}
.logo-card:hover{border-color:var(--blue);transform:scale(1.18) translateY(-4px);box-shadow:0 24px 50px -18px rgba(0,158,221,.45);z-index:5}
.logo-card:hover img{transform:scale(1.05)}
@media (max-width:760px){.logo-card{width:150px;height:90px;padding:14px}}

/* ---------- Testimonials ---------- */
.testimonials{padding:160px var(--gutter);background:var(--paper)}
.test-head h2{font-size:clamp(44px,6.5vw,108px);line-height:.98;letter-spacing:-.035em;font-weight:900;text-transform:lowercase;max-width:880px}
.test-head h2 .hl{color:var(--blue)}
.test-head h2 .hl-yellow{background:linear-gradient(180deg, transparent 65%, var(--yellow) 65%);padding:0 6px}
.test-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:60px}
@media (max-width:880px){.test-grid{grid-template-columns:1fr}}
.test{
  padding:32px;border:2px solid var(--rule);background:#fff;
  display:flex;flex-direction:column;gap:20px;position:relative;border-radius:18px;
}
.test-stars{display:flex;gap:3px;color:var(--yellow-deep)}
.test-stars svg{width:18px;height:18px}
.test-quote{font-size:19px;line-height:1.45;color:var(--ink);font-weight:500;flex:1}
.test-quote .open{color:var(--blue);font-size:1.6em;line-height:0;vertical-align:-.3em;margin-right:2px;font-weight:900}
.test-meta{display:flex;align-items:center;gap:14px;padding-top:18px;border-top:1px solid var(--rule)}
.test-avatar{
  width:46px;height:46px;border-radius:50%;background:var(--blue);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:18px;color:#fff;flex-shrink:0;
}
.test-name{font-size:15px;font-weight:700}
.test-role{font-size:11px;color:var(--muted);letter-spacing:.12em;text-transform:uppercase;font-weight:500;margin-top:2px}

.test.cta-card{background:var(--blue);color:#fff;border-color:var(--blue)}
.test.cta-card .cta-card-kicker{font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--yellow)}
.test.cta-card .test-quote{color:#fff;font-size:22px}
.test.cta-card .start-btn{
  margin-top:auto;display:inline-flex;align-items:center;gap:10px;
  padding:14px 24px;border-radius:999px;background:var(--yellow);color:var(--ink);
  font-weight:700;font-size:13.5px;align-self:flex-start;
  transition:background .35s var(--ease), color .35s var(--ease);
}
.test.cta-card .start-btn:hover{background:#fff}

/* ---------- Contact ---------- */
.contact{position:relative;padding:0}
.contact-hero{
  padding:140px var(--gutter) 100px;background:var(--blue);color:#fff;
  text-align:center;position:relative;overflow:hidden;
}
.contact-hero::before{
  content:"";position:absolute;top:-200px;right:-200px;width:600px;height:600px;border-radius:50%;
  background:radial-gradient(circle, rgba(255,188,55,.3), rgba(255,188,55,0) 60%);
}
.contact-hero::after{
  content:"";position:absolute;bottom:-200px;left:-200px;width:600px;height:600px;border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.12), rgba(255,255,255,0) 60%);
}
.contact-hero .eyebrow{color:var(--yellow);justify-content:center;display:inline-flex}
.contact-hero .eyebrow::before{background:var(--yellow)}
.contact-hero .num-tag{color:#fff}
.contact-hero h2{
  font-size:clamp(56px,10vw,171px);line-height:.92;letter-spacing:-.04em;
  font-weight:900;text-transform:lowercase;color:#fff;max-width:1200px;margin:30px auto 0;position:relative;z-index:2;
}
@media (max-width:400px){.contact-hero h2{font-size:48px}}
.contact-hero h2 .hl-yellow{background:linear-gradient(180deg, transparent 65%, var(--yellow) 65%);padding:0 10px;color:var(--ink)}
.contact-hero p{margin-top:24px;color:rgba(255,255,255,.85);font-size:17px;max-width:580px;margin-left:auto;margin-right:auto;line-height:1.6;position:relative;z-index:2}
.contact-hero .cta-big{margin-top:48px;background:var(--yellow);color:var(--ink);font-size:15px;padding:22px 44px;position:relative;z-index:2}
.contact-hero .cta-big:hover{background:#fff}
@media (max-width:420px){.contact-hero .cta-big{padding:20px 26px}}

.contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:0;background:#fff}
@media (max-width:880px){.contact-grid{grid-template-columns:1fr}}
.contact-info{padding:80px var(--gutter);border-right:1px solid var(--rule);display:flex;flex-direction:column;gap:44px;background:var(--soft)}
@media (max-width:880px){.contact-info{border-right:0;border-bottom:1px solid var(--rule)}}
.c-block .c-label,.c-label{font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--blue);margin-bottom:12px}
.c-block .c-val{font-size:22px;line-height:1.35;color:var(--ink);font-weight:600;text-transform:none}
.c-block .c-val a{transition:color .3s var(--ease)}
.c-block .c-val a:hover{color:var(--blue)}
.contact-form{padding:80px var(--gutter)}
.contact-form .form-kicker{margin-bottom:30px}
.form-group{display:flex;flex-direction:column;margin-bottom:24px;min-width:0}
.form-group label{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--blue);margin-bottom:10px}
.form-group input,.form-group textarea{
  background:transparent;border:0;border-bottom:2px solid var(--rule);border-radius:0;
  padding:12px 0;font-family:var(--font);font-size:16px;color:var(--ink);font-weight:500;
  transition:border-color .35s var(--ease);width:100%;
}
.form-group input:focus,.form-group textarea:focus{outline:none;border-bottom-color:var(--blue)}
.form-group input::placeholder,.form-group textarea::placeholder{color:var(--muted);font-weight:400}
.form-group textarea{resize:vertical;min-height:80px}
.form-group.has-error input,.form-group.has-error textarea{border-bottom-color:#d9534f}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media (max-width:600px){.form-row{grid-template-columns:1fr;gap:0}}
.hp-field{position:absolute !important;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{font-size:14px;font-weight:500;line-height:1.5;max-height:0;overflow:hidden;opacity:0;transition:opacity .4s var(--ease), max-height .4s var(--ease)}
.form-status.show{max-height:80px;opacity:1;margin-bottom:8px}
.form-status.error{color:#c9302c}
.form-status.success{color:var(--blue-deep)}
.form-submit{
  margin-top:16px;display:inline-flex;align-items:center;gap:12px;
  padding:18px 36px;border-radius:999px;background:var(--blue);color:#fff;
  font-size:14px;font-weight:600;letter-spacing:.01em;transition:background .35s var(--ease), color .35s var(--ease);
}
.form-submit:hover{background:var(--ink)}
.form-submit.is-sent,.form-submit.is-sent:hover{background:var(--yellow);color:var(--ink)}
.form-submit[disabled]{opacity:.75;pointer-events:none}

.map-wrap{border-top:1px solid var(--rule);height:420px;position:relative;overflow:hidden;background:var(--soft)}
.map-wrap iframe{border:0;display:block;width:100%;height:100%}

/* ---------- Footer ---------- */
.footer{background:var(--ink);color:#fff;padding:80px var(--gutter) 40px;position:relative;overflow:hidden}
.footer::before{
  content:"";position:absolute;bottom:-200px;right:-200px;width:500px;height:500px;border-radius:50%;
  background:radial-gradient(circle, rgba(0,158,221,.18), rgba(0,158,221,0) 65%);
}
.footer-top{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:30px;padding-bottom:50px;border-bottom:1px solid rgba(255,255,255,.18);position:relative;z-index:2}
.footer-brand{display:flex;align-items:center;gap:18px}
.footer-brand .brand-mark{width:64px;height:64px;box-shadow:0 8px 20px -6px rgba(255,188,55,.4)}
.footer-wordmark{height:26px;width:auto;display:block;margin-bottom:7px}
.footer-brand-text .fbt{font-size:11px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.footer-cta{
  display:inline-flex;align-items:center;gap:12px;padding:16px 28px;border-radius:999px;
  background:var(--blue);color:#fff;font-weight:600;font-size:14px;
  transition:background .35s var(--ease), color .35s var(--ease);
}
.footer-cta:hover{background:var(--yellow);color:var(--ink)}
.footer-mark{margin:60px 0 30px;text-align:center;opacity:.12}
.footer-mark img{width:90%;max-width:1100px;height:auto;margin:0 auto;display:block}

.footer-grid{
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:60px;
  padding-top:60px;border-top:1px solid rgba(255,255,255,.18);position:relative;z-index:2;
}
@media (max-width:880px){.footer-grid{grid-template-columns:1fr 1fr;gap:40px}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr}}
.footer-col h4{font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--yellow);margin-bottom:20px}
.footer-col p,.footer-col li,.footer-col a{font-size:14.5px;line-height:1.75;color:rgba(255,255,255,.78);font-weight:400;overflow-wrap:anywhere}
.footer-col ul{list-style:none}
.footer-col li a{transition:color .3s var(--ease)}
.footer-col li a:hover{color:var(--yellow)}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;
  margin-top:60px;padding-top:30px;border-top:1px solid rgba(255,255,255,.12);
  font-size:12px;font-weight:500;letter-spacing:.06em;color:rgba(255,255,255,.55);position:relative;z-index:2;
}
.footer-social{display:flex;gap:24px}
.footer-social a{transition:color .3s var(--ease)}
.footer-social a:hover{color:var(--yellow)}

/* ---------- WhatsApp float ---------- */
.wa-float{
  position:fixed;right:24px;bottom:24px;z-index:50;
  width:58px;height:58px;border-radius:50%;background:#25d366;
  display:flex;align-items:center;justify-content:center;color:#fff;
  box-shadow:0 16px 40px -10px rgba(37,211,102,.55);
  transition:transform .35s var(--ease), background .35s var(--ease);
}
.wa-float:hover{background:var(--ink);transform:translateY(-4px) scale(1.05)}
.wa-float svg{width:28px;height:28px}
@media (max-width:560px){.wa-float{right:16px;bottom:16px;width:54px;height:54px}}



/* Website-creation credit — sits quietly under the copyright row */
.footer-credit{
  margin-top:18px;text-align:center;position:relative;z-index:2;
  font-size:11.5px;font-weight:400;letter-spacing:.06em;line-height:1.6;color:rgba(255,255,255,.4);
}
.footer-credit a{
  color:rgba(255,255,255,.7);font-weight:500;position:relative;white-space:nowrap;
  transition:color .3s var(--ease);
}
.footer-credit a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--yellow);
  transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease);
}
.footer-credit a:hover,.footer-credit a:focus-visible{color:var(--yellow)}
.footer-credit a:hover::after,.footer-credit a:focus-visible::after{transform:scaleX(1);transform-origin:left}
@media (max-width:560px){.footer-credit{padding-right:64px;text-align:left}}