/* ============ TOKENS ============ */
:root{
  --blue:#086AFE;
  --blue-deep:#0552C9;
  --navy:#2B447D;
  --navy-deep:#0A1B36;
  --amber:#FF7A3D;
  --amber-deep:#E85D22;
  --bg:#FFFFFF;
  --cream:#FAF9F7;
  --tint:#EBF5FF;
  --ink:#111111;
  --grey:#666666;
  --grey-light:#94989E;
  --border:#EAEAEA;
  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:28px;
  --cut:22px;
  --maxw:1400px;
  --ease:cubic-bezier(.16,.8,.24,1);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:hidden;width:100%;}
body{
  font-family:'Inter',sans-serif;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  width:100%;
  position:relative;
  padding-bottom:72px; /* room for sticky mobile CTA bar */
}
@media(min-width:701px){body{padding-bottom:0;}}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
address{font-style:normal;}
ul{list-style:none;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 48px;}
h1,h2,h3,h4{font-family:'Manrope',sans-serif;font-weight:800;letter-spacing:-0.02em;line-height:1.35;}
/* Signature cut-corner motif — a recurring shape so the brand reads as more than a template */
.cut-corner{clip-path:polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);border-radius:0;}
.eyebrow{
  font-family:'JetBrains Mono',monospace;
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--blue);
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:18px;
}
.eyebrow::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--blue);}
.section{padding:140px 0;position:relative;}
.section-alt{background:var(--cream);}
.lede{font-size:19px;line-height:1.6;color:var(--grey);max-width:560px;}
@media(max-width:1000px){
  .wrap{padding:0 24px;}
  .section{padding:88px 0;}
}

/* ============ ACCESSIBILITY ============ */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.faq-q:focus-visible,.nav-toggle:focus-visible{
  outline:2px solid var(--blue);outline-offset:3px;border-radius:6px;
}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:2000;
  background:var(--ink);color:#fff;padding:12px 20px;border-radius:0 0 10px 0;font-size:14px;font-weight:600;
}
.skip-link:focus{left:0;}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;}

/* reveal animation */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease), transform .9s var(--ease);}
.reveal.in{opacity:1;transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  html{scroll-behavior:auto;}
  .float-card,.hero h1 .line span,.blob{animation:none !important;}
  .hero-chart-line path{stroke-dashoffset:0;animation:none;}
}

/* ============ CASE STUDY DETAIL PAGE ============ */
.case-stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin:50px 0;}
.case-stat{text-align:center;padding:28px 16px;border:1px solid var(--border);border-radius:var(--radius-md);}
.case-stat .num{font-family:'Manrope',sans-serif;font-weight:800;font-size:32px;color:var(--blue);}
.case-stat .lbl{font-size:13px;color:var(--grey);margin-top:6px;}
.article-body{max-width:720px;margin:0 auto;font-size:17px;line-height:1.8;color:var(--ink);}
.article-body h2{font-size:26px;margin:44px 0 16px;}
.article-body h3{font-size:20px;margin:32px 0 12px;}
.article-body p{margin-bottom:20px;color:var(--grey);}
.article-body ul{list-style:disc;padding-left:22px;margin-bottom:20px;color:var(--grey);}
.article-body li{margin-bottom:8px;}
.pull-quote{
  border-left:3px solid var(--blue);padding:6px 0 6px 26px;margin:36px 0;
  font-family:'Manrope',sans-serif;font-weight:700;font-size:21px;color:var(--ink);line-height:1.5;
}
.pull-quote span{display:block;font-family:'Inter',sans-serif;font-weight:500;font-size:13.5px;color:var(--grey);margin-top:10px;}
@media(max-width:700px){.case-stat-row{grid-template-columns:1fr 1fr;}}

/* ============ BLOG ARTICLE PAGE ============ */
.article-meta-bar{display:flex;gap:20px;flex-wrap:wrap;font-size:13px;color:var(--grey);margin-bottom:36px;padding-bottom:24px;border-bottom:1px solid var(--border);max-width:720px;margin-left:auto;margin-right:auto;}
.article-author{display:flex;align-items:center;gap:10px;}
.article-author .aa-avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--navy));display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:700;font-family:'Manrope',sans-serif;}

/* ============ NAV ============ */
header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  padding:22px 0;
  transition:all .4s var(--ease);
  background:rgba(255,255,255,0);
}
header.scrolled{
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(16px) saturate(180%);
  -webkit-backdrop-filter:blur(16px) saturate(180%);
  border-bottom:1px solid var(--border);
  padding:14px 0;
}
nav{display:flex;align-items:center;justify-content:space-between;max-width:var(--maxw);margin:0 auto;padding:0 48px;}
.logo{display:flex;align-items:center;}

/* Main header logo: two full-wordmark images (white + black) stacked and
   cross-faded via header.scrolled. Used only where BOTH .logo-mark--light
   and .logo-mark--dark are present (the primary header). */
.logo-mark-wrap{position:relative;display:inline-block;width:150px;height:34px;} /* set width:height to your logo's real aspect ratio */
.logo-mark{
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
  max-width:100%; max-height:100%;
  object-fit:contain;
  transition:opacity .4s var(--ease); /* same timing as your existing header transition */
}
.logo-mark--dark{opacity:0;}   /* hidden by default = top of page, transparent header */
.logo-mark--light{opacity:1;} /* visible by default */
header.scrolled .logo-mark--light{opacity:0;} /* hide white version once header turns white */
header.scrolled .logo-mark--dark{opacity:1;}  /* show dark version */

/* Small single-color icon mark — pair ONLY with an icon-only asset
   (e.g. preside-work-fav.webp), never the full wordmark, or it'll be
   squished into this small square. */
.logo-icon{width:19px;height:21px;object-fit:contain;display:block;}

/* Full wordmark (icon+text baked into one image) used standalone, without
   separate "Preside Works" text beside it — e.g. footer, mobile menu.
   height:auto keeps it proportional to whatever the source image's real
   aspect ratio is, so it can never get squashed like .logo-icon would. */
.logo-wordmark-sm{width:130px;height:auto;object-fit:contain;display:block;}
.nav-links{display:flex;gap:38px;font-size:14.5px;font-weight:500;}
.nav-links a{position:relative;color:#fff;opacity:.82;transition:opacity .25s, color .4s var(--ease);}
.nav-links a:hover{opacity:1;}
.nav-links a::after{content:'';position:absolute;left:0;bottom:-6px;width:0;height:1.5px;background:var(--blue);transition:width .3s var(--ease);}
.nav-links a:hover::after{width:100%;}
header.scrolled .nav-links a{color:var(--ink);}
.nav-cta{
  font-size:13.5px;font-weight:600;background:var(--blue);color:#fff;
  padding:11px 22px;border-radius:100px;transition:all .3s var(--ease);
  display:inline-flex;align-items:center;gap:8px;
  box-shadow:0 8px 20px -8px rgba(8,106,254,.6);
  border:none;cursor:pointer;font-family:inherit;
}
.nav-cta:hover{background:var(--blue-deep);transform:translateY(-1px);}
.nav-toggle{display:none;color:#fff;transition:color .4s var(--ease);background:none;border:none;cursor:pointer;padding:8px;margin:-8px;}
header.scrolled .nav-toggle{color:var(--ink);}
.nav-toggle svg{width:22px;height:22px;display:block;}
@media(max-width:900px){
  .nav-links{display:none;}
  nav{padding:0 24px;}
  .nav-cta{display:none;}
  .nav-toggle{display:block;}
}

/* ============ MOBILE MENU ============ */
.mobile-menu{
  position:fixed;inset:0;z-index:1200;visibility:hidden;pointer-events:none;
}
.mobile-menu.open{visibility:visible;pointer-events:auto;}
.mobile-menu .mm-backdrop{
  position:absolute;inset:0;background:rgba(5,13,28,.55);backdrop-filter:blur(2px);
  opacity:0;transition:opacity .35s var(--ease);
}
.mobile-menu.open .mm-backdrop{opacity:1;}
.mobile-menu .mm-panel{
  position:absolute;top:0;right:0;bottom:0;width:min(340px,84vw);
  background:#0A1B36;padding:24px 28px 32px;
  display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .4s var(--ease);
  box-shadow:-30px 0 60px -20px rgba(0,0,0,.4);
}
.mobile-menu.open .mm-panel{transform:translateX(0);}
.mm-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:36px;}
.mm-close{background:none;border:1px solid rgba(255,255,255,.2);color:#fff;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.mm-close svg{width:16px;height:16px;}
.mm-links{display:flex;flex-direction:column;gap:2px;}
.mm-links a{color:#fff;font-family:'Manrope',sans-serif;font-weight:700;font-size:22px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:space-between;}
.mm-links a svg{width:16px;height:16px;opacity:.4;}
.mm-cta-row{margin-top:auto;padding-top:28px;display:flex;flex-direction:column;gap:12px;}
.mm-cta-row .btn-primary{justify-content:center;width:100%;}
.mm-cta-row .mm-wa{display:flex;align-items:center;justify-content:center;gap:8px;color:#fff;border:1px solid rgba(255,255,255,.2);border-radius:100px;padding:14px;font-weight:600;font-size:14.5px;}
.mm-cta-row .mm-wa svg{width:18px;height:18px;color:#25D366;}

/* ============ HERO ============ */
.hero{
  min-height:100vh;
  display:flex;
  align-items:center;
  padding-top:140px;
  padding-bottom:80px;
  position:relative;
  overflow:hidden;
  color:#fff;
  background:
    radial-gradient(ellipse 1000px 640px at 84% -8%, rgba(8,106,254,.45), transparent 60%),
    radial-gradient(ellipse 800px 560px at -6% 96%, rgba(8,106,254,.22), transparent 62%),
    linear-gradient(165deg, #0A1B36 0%, #0D2246 55%, #0A1B36 100%);
}
.hero-grid{
  display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center;
  max-width:var(--maxw);margin:0 auto;padding:0 48px;position:relative;z-index:2;
}
.hero .eyebrow{color:#8FBBFF;}
.hero .eyebrow::before{background:#8FBBFF;}
.hero h1 {
  font-size: clamp(42px, 5.2vw, 74px);
  color: #fff;
  line-height: 1.15;
}

.hero h1 .line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.14em; 
  margin-bottom: -0.14em; 
}

.hero h1 .line span {
  display: inline-block;
  animation: riseIn .9s var(--ease) both;
  vertical-align: top;
}

.hero h1 .line:nth-child(2) span {
  animation-delay: .08s;
}
.hero h1 .grad{background:linear-gradient(100deg,#8FBBFF,#fff 90%);-webkit-background-clip:text;background-clip:text;color:transparent;}
@keyframes riseIn{from{transform:translateY(110%);}to{transform:translateY(0);}}
.hero-sub{margin-top:26px;font-size:18.5px;line-height:1.65;color:rgba(255,255,255,.68);max-width:480px;}
.hero-cta-row{display:flex;gap:14px;margin-top:38px;flex-wrap:wrap;}
.btn-primary{
  background:var(--blue);color:#fff;font-weight:600;font-size:15px;
  padding:15px 28px;border-radius:100px;display:inline-flex;align-items:center;gap:10px;
  box-shadow:0 1px 2px rgba(8,106,254,.1), 0 12px 24px -8px rgba(8,106,254,.45);
  transition:all .35s var(--ease);border:none;cursor:pointer;
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 1px 2px rgba(8,106,254,.15), 0 18px 32px -8px rgba(8,106,254,.55);}
.btn-secondary{
  background:transparent;color:var(--ink);font-weight:600;font-size:15px;
  padding:15px 26px;border-radius:100px;border:1px solid var(--border);
  display:inline-flex;align-items:center;gap:8px;transition:all .3s var(--ease);
}
.btn-secondary:hover{border-color:var(--ink);background:var(--ink);color:#fff;}
.hero .btn-secondary{border-color:rgba(255,255,255,.28);color:#fff;}
.hero .btn-secondary:hover{border-color:#fff;background:#fff;color:var(--navy-deep);}
.btn-whatsapp{
  background:#25D366;color:#fff;font-weight:600;font-size:15px;
  padding:15px 26px;border-radius:100px;border:none;
  display:inline-flex;align-items:center;gap:8px;transition:all .3s var(--ease);
  box-shadow:0 1px 2px rgba(37,211,102,.15), 0 12px 24px -8px rgba(37,211,102,.45);
}
.btn-whatsapp:hover{transform:translateY(-2px);box-shadow:0 1px 2px rgba(37,211,102,.2), 0 18px 32px -8px rgba(37,211,102,.55);}
.btn-whatsapp svg{width:18px;height:18px;flex-shrink:0;}
.scb-row .btn-whatsapp{padding:12px 16px;font-size:13.5px;white-space:nowrap;flex-shrink:0;}
.btn-whatsapp.icon-only{padding:12px;}
.scb-btns{display:flex;gap:8px;flex-shrink:0;}
.trust-row{margin-top:52px;display:flex;align-items:center;gap:28px;flex-wrap:wrap;}
.trust-row .badge{
  display:flex;align-items:center;gap:8px;font-size:13px;color:rgba(255,255,255,.68);font-weight:500;
}
.trust-row .badge svg{width:16px;height:16px;color:#8FBBFF;}

/* hero visual */
.hero-visual{position:relative;height:520px;}
.hero-chart-line{position:absolute;inset:0;z-index:1;opacity:.9;}
.hero-chart-line path{fill:none;stroke:url(#lineGrad);stroke-width:2.5;stroke-linecap:round;
  stroke-dasharray:1400;stroke-dashoffset:1400;animation:drawLine 2.4s var(--ease) .3s forwards;}
@keyframes drawLine{to{stroke-dashoffset:0;}}
.float-card{
  position:absolute;background:rgba(255,255,255,.08);
  backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius-md);
  box-shadow:0 24px 60px -18px rgba(0,0,0,.5);
  padding:18px 20px;color:#fff;
  animation:floaty 6s ease-in-out infinite;
}
@keyframes floaty{0%,100%{transform:translateY(0);}50%{transform:translateY(-14px);}}
.fc-1{top:6%;right:2%;width:220px;animation-delay:0s;}
.fc-2{bottom:20%;left:0%;width:210px;animation-delay:1.4s;}
.fc-3{bottom:2%;right:14%;width:180px;animation-delay:2.6s;}
.fc-label{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:rgba(255,255,255,.55);text-transform:uppercase;letter-spacing:.08em;display:flex;justify-content:space-between;align-items:center;}
.fc-value{font-family:'Manrope',sans-serif;font-weight:800;font-size:26px;margin-top:6px;color:#fff;}
.fc-delta{font-size:12px;color:#4ADE80;font-weight:600;margin-top:4px;}
.fc-mini-bars{display:flex;align-items:flex-end;gap:3px;height:32px;margin-top:10px;}
.fc-mini-bars div{flex:1;background:#8FBBFF;border-radius:2px;opacity:.9;}
@media(max-width:1000px){
  .hero-grid{grid-template-columns:1fr;text-align:left;}
  .hero-visual{height:380px;margin-top:20px;}
  .fc-1{top:0;right:0;width:170px;}
  .fc-2{bottom:8%;left:0;width:160px;}
  .fc-3{display:none;}
}

/* ============ MARQUEE / LOGOS ============ */
.logo-strip{padding:52px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);position:relative;z-index:2;background:#fff;}
.logo-strip .wrap{display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap;}
.logo-strip span{font-size:13px;color:var(--grey-light);font-weight:600;letter-spacing:.04em;font-family:'JetBrains Mono',monospace;text-transform:uppercase;}
.logo-strip .marks{display:flex;gap:44px;align-items:center;flex-wrap:wrap;}
.logo-strip .marks div{
  display:flex;align-items:center;gap:8px;
  font-family:'Manrope',sans-serif;font-weight:700;font-size:16px;color:var(--ink);opacity:.62;
  transition:opacity .3s;
}
.logo-strip .marks div:hover{opacity:1;}
.logo-strip .marks div::before{content:'';width:8px;height:8px;background:var(--navy-deep);clip-path:polygon(0 0, 100% 0, 100% 100%);flex-shrink:0;}

/* ============ SECTION HEADS ============ */
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:64px;}
.section-head h2{font-size:clamp(30px,3.4vw,44px);max-width:640px;}
.section-head .lede{margin-top:14px;}
@media(max-width:800px){.section-head{flex-direction:column;align-items:flex-start;}}

/* ============ SERVICES ============ */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;}
.services-grid>article,.case-scroll>article,.blog-grid>article{display:contents;}
.service-card{display:flex;background:#fff;padding:40px 36px;transition:background .35s var(--ease);position:relative;min-height:280px;flex-direction:column;}
.service-card:hover{background:var(--tint);}
.service-icon{width:46px;height:46px;background:var(--navy-deep);display:flex;align-items:center;justify-content:center;margin-bottom:26px;color:#fff;transition:transform .3s var(--ease), background .3s;clip-path:polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);}
.service-card:hover .service-icon{background:var(--blue);transform:scale(1.06) rotate(-4deg);}
.service-card h3{font-size:19px;margin-bottom:10px;}
.service-card p{font-size:14.5px;color:var(--grey);line-height:1.6;margin-bottom:18px;}
.service-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;}
.service-tags span{font-size:11px;font-family:'JetBrains Mono',monospace;color:var(--navy);background:var(--tint);border:1px solid rgba(8,106,254,.15);padding:4px 9px;border-radius:100px;}
.service-card:hover .service-tags span{background:#fff;}
.service-more{position:absolute;top:38px;right:34px;width:32px;height:32px;border-radius:50%;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;transition:all .3s var(--ease);}
.service-card:hover .service-more{background:var(--ink);border-color:var(--ink);transform:rotate(45deg);}
.service-more svg{width:14px;height:14px;color:var(--ink);}
.service-card:hover .service-more svg{color:#fff;}
@media(max-width:900px){.services-grid{grid-template-columns:1fr;}}
@media(min-width:901px) and (max-width:1200px){.services-grid{grid-template-columns:repeat(2,1fr);}}

/* ============ STATS ============ */
.stats-band{background:var(--navy-deep);color:#fff;padding:100px 0;position:relative;overflow:hidden;}
.stats-band::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 800px 400px at 20% 0%, rgba(8,106,254,.25), transparent 60%);}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;position:relative;z-index:1;}
.stat-item .num{font-family:'Manrope',sans-serif;font-weight:800;font-size:clamp(36px,4vw,56px);background:linear-gradient(100deg,#fff,#B9D4FF);-webkit-background-clip:text;background-clip:text;color:transparent;}
.stat-item .lbl{font-size:14px;color:rgba(255,255,255,.6);margin-top:8px;font-weight:500;}
@media(max-width:800px){.stats-grid{grid-template-columns:repeat(2,1fr);gap:36px;}}

/* ============ FEATURE ALT / "ONE SYSTEM" ============ */
.system-flow{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:22px 26px;border:1px solid var(--border);border-radius:100px;
  margin-bottom:90px;background:var(--cream);
}
.sf-node{display:flex;align-items:center;gap:10px;font-family:'Manrope',sans-serif;font-weight:700;font-size:15px;color:var(--ink);}
.sf-num{
  width:30px;height:30px;border-radius:50%;background:var(--navy-deep);color:#fff;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:600;
}
.sf-arrow{width:20px;height:20px;color:var(--grey-light);flex-shrink:0;}
.sf-loop{color:var(--amber-deep);font-weight:600;}
.sf-loop svg{width:19px;height:19px;color:var(--amber);flex-shrink:0;}
@media(max-width:700px){
  .system-flow{border-radius:var(--radius-md);justify-content:flex-start;}
}

/* Scoped fluid container for this section only: holds at the 1400px/1920px
   reference size on laptops, then grows gently up to 1800px on 2K/4K/ultrawide
   so the section keeps the same visual weight instead of sitting frozen and
   undersized in a sea of extra whitespace. Other sections' .wrap are untouched. */
#how-we-work .wrap{max-width:clamp(1400px, 72vw, 1800px);}

.feature-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(60px, 4.7vw, 110px);align-items:center;margin-bottom:150px;}
.feature-row:last-child{margin-bottom:0;}
.feature-row.rev .feat-media{order:1;}
.feature-row.rev .feat-copy{order:2;}
.sys-node{display:flex;align-items:center;gap:14px;margin-bottom:22px;}
.sys-dot{
  width:38px;height:38px;border-radius:50%;background:var(--navy-deep);color:#fff;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-family:'JetBrains Mono',monospace;font-size:12.5px;font-weight:600;
}
.sys-label{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);font-weight:600;}
.feat-copy h3{font-size:clamp(26px,3vw,36px);margin-bottom:18px;}
.feat-copy p{color:var(--grey);font-size:16px;line-height:1.7;margin-bottom:26px;}
.feat-list{display:flex;flex-direction:column;gap:14px;}
.feat-list li{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--ink);}
.feat-list svg{width:18px;height:18px;color:var(--blue);flex-shrink:0;margin-top:2px;}
.feat-media{
  aspect-ratio:1/0.82;border-radius:var(--radius-lg);
  background:linear-gradient(155deg,var(--tint),#fff);
  border:1px solid var(--border);position:relative;overflow:visible;
  display:flex;align-items:center;justify-content:center;
  transition:transform .5s var(--ease);
}
.feature-row:hover .feat-media{transform:translateY(-6px);}
.feat-media .mock-ui{width:82%;background:#fff;border-radius:14px;box-shadow:0 30px 70px -20px rgba(10,27,54,.25);border:1px solid var(--border);overflow:hidden;position:relative;z-index:1;}
.mock-ui .mock-bar{height:34px;background:var(--cream);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:6px;padding:0 14px;}
.mock-bar span{width:8px;height:8px;border-radius:50%;background:var(--border);}
.mock-body{padding:22px;}
.mock-line{height:9px;border-radius:4px;background:var(--border);margin-bottom:10px;}
.mock-line.w60{width:60%;}
.mock-line.w40{width:40%;background:var(--tint);}
.mock-cta{height:34px;width:110px;border-radius:100px;background:linear-gradient(100deg,var(--blue),var(--navy));margin-top:16px;}
.mock-chart{display:flex;align-items:flex-end;gap:6px;height:70px;margin-top:16px;}
.mock-chart div{flex:1;background:linear-gradient(180deg,var(--blue),var(--navy));border-radius:3px 3px 0 0;opacity:.85;}
.feat-media .float-card{padding:12px 15px;width:auto;animation-duration:5.5s;}
.chip-tl{top:-18px;left:-18px;}
.chip-br{bottom:-18px;right:-18px;}
.cwv-row{display:flex;align-items:center;gap:11px;}
.cwv-ring{position:relative;width:38px;height:38px;border-radius:50%;background:conic-gradient(var(--blue) 0% 98%, var(--border) 98% 100%);flex-shrink:0;}
.cwv-ring::before{content:'';position:absolute;inset:4px;border-radius:50%;background:#fff;}
.cwv-ring span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Manrope',sans-serif;font-weight:800;font-size:11px;color:var(--ink);}
@media(max-width:900px){
  .feature-row,.feature-row.rev{grid-template-columns:1fr;gap:36px;}
  .feature-row.rev .feat-media,.feature-row.rev .feat-copy{order:unset;}
  .chip-tl,.chip-br{display:none;}
}

/* ============ PROCESS ============ */
/* ============ TEAM ============ */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:60px;}
.team-card{text-align:left;padding:28px 24px;border:1px solid var(--border);border-radius:var(--radius-md);transition:transform .35s var(--ease), box-shadow .35s var(--ease);}
.team-card:hover{transform:translateY(-5px);box-shadow:0 20px 50px -20px rgba(10,27,54,.18);}
.team-photo{
  width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--navy));
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-family:'Manrope',sans-serif;font-weight:700;font-size:16px;margin-bottom:18px;
}
.team-card h3{font-size:17px;margin-bottom:3px;}
.team-role{font-size:12.5px;color:var(--blue);font-weight:600;margin-bottom:12px;}
.team-card p{font-size:14px;color:var(--grey);line-height:1.6;}
@media(max-width:900px){.team-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.team-grid{grid-template-columns:1fr;}}

/* ============ PROCESS TIMELINE (shared component: home, about, service pages) ============
   Markup: .process-track > .process-line > .process-line-fill  +  .process-steps > .process-step > .dot + (h4,p | .p-card)
   Add .is-cards to the track for the card style + vertical mobile timeline. script.js animates every .process-track. */
.process-track{position:relative;margin-top:70px;}
.process-line{position:absolute;top:23px;left:0;right:0;height:2px;background:var(--border);border-radius:2px;}
.process-line-fill{position:absolute;top:0;left:0;height:100%;width:0;border-radius:2px;background:linear-gradient(90deg,var(--blue),#5B9DFF);box-shadow:0 0 12px rgba(8,106,254,.4);transition:width .65s var(--ease);}
.process-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--steps,5),1fr);gap:24px;position:relative;}
.process-step .dot{width:46px;height:46px;border-radius:50%;background:#fff;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:500;color:var(--grey);margin-bottom:22px;position:relative;z-index:1;transition:background .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease),box-shadow .4s var(--ease),transform .4s var(--ease);}
.process-step.on .dot{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 0 0 6px rgba(8,106,254,.12);}
.process-step.now .dot{transform:scale(1.08);animation:procPulse 2.2s ease-out infinite;}
@keyframes procPulse{0%{box-shadow:0 0 0 0 rgba(8,106,254,.45);}70%{box-shadow:0 0 0 14px rgba(8,106,254,0);}100%{box-shadow:0 0 0 0 rgba(8,106,254,0);}}
.process-step h4{font-size:16.5px;margin-bottom:8px;}
.process-step p{font-size:13.5px;color:var(--grey);line-height:1.55;}
/* card variant */
.process-track.is-cards .process-step{display:flex;flex-direction:column;}
.p-card{flex:1;background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);padding:24px 22px;opacity:.55;transform:translateY(10px);transition:opacity .5s var(--ease),transform .5s var(--ease),border-color .4s,box-shadow .4s;}
.process-step.on .p-card{opacity:1;transform:none;}
.process-step.now .p-card{border-color:var(--blue);box-shadow:0 20px 40px -22px rgba(8,106,254,.45);}
.p-chip{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--blue);background:var(--tint);padding:5px 10px;border-radius:999px;margin-bottom:14px;}
.p-card h4{font-size:18px;margin-bottom:8px;}
.p-card p{font-size:14px;color:var(--grey);line-height:1.6;margin:0;}
/* plain variant (dots only) keeps its 2-col layout on tablets/phones */
@media(max-width:900px){.process-track:not(.is-cards) .process-steps{grid-template-columns:1fr 1fr;}.process-track:not(.is-cards) .process-line{display:none;}}
@media(max-width:1100px) and (min-width:801px){.process-track.is-cards .process-steps{gap:14px;}.p-card{padding:20px 16px;}}
/* card variant becomes a vertical timeline on phones */
@media(max-width:800px){
  .process-track.is-cards .process-line{display:none;}
  .process-track.is-cards .process-steps{grid-template-columns:1fr;gap:22px;}
  .process-track.is-cards .process-steps::before{content:'';position:absolute;left:22px;top:23px;bottom:23px;width:2px;background:linear-gradient(180deg,var(--blue),var(--border));}
  .process-track.is-cards .process-step{flex-direction:row;gap:18px;align-items:flex-start;}
  .process-track.is-cards .dot{margin-bottom:0;flex-shrink:0;}
  .process-track.is-cards .p-card{opacity:1;transform:none;}
}
@media(prefers-reduced-motion:reduce){
  .process-line-fill,.process-step .dot,.p-card{transition:none;}
  .process-step.now .dot{animation:none;}
}

/* ============ CASE STUDIES ============ */
.case-scroll{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.case-card{display:block;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border);background:#fff;transition:transform .4s var(--ease), box-shadow .4s var(--ease);}
.case-card:hover{transform:translateY(-6px);box-shadow:0 30px 60px -24px rgba(10,27,54,.25);}
.case-media{height:210px;background:linear-gradient(150deg,var(--navy-deep),var(--navy));position:relative;display:flex;align-items:flex-end;padding:20px;overflow:hidden;clip-path:polygon(0 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 0 100%);}
.case-media .tag{font-family:'JetBrains Mono',monospace;font-size:11px;color:#fff;background:rgba(255,255,255,.14);padding:5px 11px;border-radius:100px;border:1px solid rgba(255,255,255,.2);position:relative;z-index:2;}
.case-mock{position:absolute;inset:0;opacity:.9;transition:transform .6s var(--ease);}
.case-card:hover .case-mock{transform:scale(1.08);}
.case-mock svg{width:100%;height:100%;}
.case-media::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,27,54,.75),rgba(10,27,54,.1) 60%);}
.case-body{padding:28px;}
.case-body h3{font-size:19px;margin-bottom:14px;}
.case-metrics{display:flex;gap:22px;margin-top:18px;padding-top:18px;border-top:1px solid var(--border);}
.case-metrics div .m-num{font-family:'Manrope',sans-serif;font-weight:800;font-size:22px;color:var(--blue);}
.case-metrics div .m-lbl{font-size:11.5px;color:var(--grey);margin-top:3px;}
@media(max-width:900px){.case-scroll{grid-template-columns:1fr;}}

/* ============ TESTIMONIALS ============ */
.testi-wrap{position:relative;max-width:760px;margin:0 auto;text-align:center;}
.testi-slide{display:none;}
.testi-slide.active{display:block;animation:fadeUp .7s var(--ease);}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
.testi-stars{display:flex;gap:4px;justify-content:center;margin-bottom:26px;}
.testi-stars svg{width:18px;height:18px;color:var(--blue);}
.testi-quote{font-family:'Manrope',sans-serif;font-weight:600;font-size:clamp(20px,2.4vw,28px);line-height:1.5;letter-spacing:-0.01em;}
.testi-person{margin-top:32px;display:flex;align-items:center;justify-content:center;gap:12px;}
.testi-avatar{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--navy));display:flex;align-items:center;justify-content:center;color:#fff;font-family:'Manrope',sans-serif;font-weight:700;font-size:14px;flex-shrink:0;}
.testi-name{font-size:14.5px;font-weight:600;}
.testi-role{font-size:13px;color:var(--grey);}
.testi-dots{display:flex;gap:8px;justify-content:center;margin-top:40px;}
.testi-dots button{width:7px;height:7px;border-radius:50%;background:var(--border);border:none;cursor:pointer;transition:all .3s;}
.testi-dots button.active{background:var(--blue);width:22px;border-radius:4px;}

/* ============ INDUSTRIES ============ */
.industries-row{display:flex;flex-wrap:wrap;gap:14px;}
.industry-chip{
  padding:14px 24px;border:1px solid var(--border);border-radius:100px;font-size:14.5px;font-weight:500;
  transition:all .3s var(--ease);cursor:default;
}
.industry-chip:hover{background:var(--ink);color:#fff;border-color:var(--ink);transform:translateY(-2px);}

/* ============ PRICING ============ */
.pricing-intro{margin-bottom:40px;}
.pricing-intro h2{font-size:clamp(30px,3.4vw,44px);max-width:640px;margin-top:14px;}
.pricing-layout{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.pricing-lede{max-width:420px;margin-top:0;}
.pricing-cards-stack{display:flex;flex-direction:column;gap:24px;}
@media(max-width:800px){.pricing-layout{grid-template-columns:1fr;gap:28px;}.pricing-lede{max-width:none;}}

.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;align-items:stretch;}
.price-card{border:1px solid var(--border);border-radius:var(--radius-lg);padding:40px 34px;background:#fff;display:flex;flex-direction:column;transition:all .35s var(--ease);position:relative;}
.price-card.feat{background:var(--navy-deep);color:#fff;border-color:var(--navy-deep);transform:scale(1.03);box-shadow:0 40px 80px -30px rgba(10,27,54,.4);}
.price-card.feat::before{
  content:'Most Popular';position:absolute;top:0;right:32px;transform:translateY(-50%);
  background:var(--amber);color:#fff;font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;padding:6px 12px;border-radius:100px;
}
.price-card:hover{transform:translateY(-6px);}
.price-card.feat:hover{transform:scale(1.03) translateY(-6px);}
.price-badge{font-family:'JetBrains Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--blue);margin-bottom:6px;}
.price-card.feat .price-badge{color:#8FBBFF;}
.price-card h3{font-size:22px;margin-bottom:8px;}
.price-card .price-desc{font-size:13.5px;color:var(--grey);margin-bottom:26px;}
.price-card.feat .price-desc{color:rgba(255,255,255,.65);}
.price-amt{font-family:'Manrope',sans-serif;font-weight:800;font-size:40px;margin-bottom:26px;}
.price-amt span{font-size:14px;font-weight:500;color:var(--grey);}
.price-card.feat .price-amt span{color:rgba(255,255,255,.6);}
.price-feats{display:flex;flex-direction:column;gap:13px;margin-bottom:32px;flex:1;}
.price-feats li{display:flex;gap:10px;font-size:14px;align-items:flex-start;}
.price-feats svg{width:16px;height:16px;color:var(--blue);flex-shrink:0;margin-top:3px;}
.price-card.feat .price-feats svg{color:#8FBBFF;}
.price-cta{text-align:center;padding:13px;border-radius:100px;font-weight:600;font-size:14.5px;border:1px solid var(--ink);transition:all .3s var(--ease);}
.price-cta:hover{background:var(--ink);color:#fff;}
.price-card.feat .price-cta{background:#fff;color:var(--navy-deep);border-color:#fff;}
.price-card.feat .price-cta:hover{background:var(--blue);color:#fff;}
@media(max-width:900px){.pricing-grid{grid-template-columns:1fr;}.price-card.feat{transform:none;}}

/* pricing teaser grid (homepage) — links out to each service's real, single-source-of-truth pricing */
.pricing-teaser-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.pt-card{
  display:block;border:1px solid var(--border);border-radius:var(--radius-md);padding:32px 28px;
  transition:all .3s var(--ease);background:#fff;
}
.pt-card:hover{transform:translateY(-5px);box-shadow:0 20px 50px -20px rgba(10,27,54,.18);border-color:var(--blue);}
.pt-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;}
.pt-eyebrow{font-family:'JetBrains Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--grey);}
.pt-arrow{width:26px;height:26px;border-radius:50%;background:var(--tint);display:flex;align-items:center;justify-content:center;transition:background .3s;flex-shrink:0;}
.pt-arrow svg{width:14px;height:14px;color:var(--blue);}
.pt-card:hover .pt-arrow{background:var(--blue);}
.pt-card:hover .pt-arrow svg{color:#fff;}
.pt-amt{font-family:'Manrope',sans-serif;font-weight:800;font-size:26px;margin-bottom:10px;}
.pt-card p{font-size:14px;color:var(--grey);line-height:1.6;}
.pricing-note{text-align:center;color:var(--grey);font-size:14px;margin-top:36px;max-width:560px;margin-left:auto;margin-right:auto;}
@media(max-width:900px){.pricing-teaser-grid{grid-template-columns:1fr;}}

/* ============ FAQ ============ */
.faq-list{max-width:760px;margin:0 auto;}
.faq-item{border-bottom:1px solid var(--border);}
.faq-q{width:100%;padding:26px 4px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-size:16.5px;font-weight:600;gap:20px;background:none;border:none;color:var(--ink);text-align:left;font-family:inherit;}
.faq-q .plus{width:22px;height:22px;flex-shrink:0;position:relative;}
.faq-q .plus::before,.faq-q .plus::after{content:'';position:absolute;background:var(--ink);top:50%;left:50%;transform:translate(-50%,-50%);transition:transform .3s var(--ease);}
.faq-q .plus::before{width:14px;height:1.5px;}
.faq-q .plus::after{width:1.5px;height:14px;}
.faq-item.open .plus::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0;}
.faq-a{max-height:0;overflow:hidden;transition:max-height .45s var(--ease);}
.faq-a p{padding:0 4px 26px;color:var(--grey);font-size:14.5px;line-height:1.7;max-width:640px;}

/* ============ BLOG ============ */
.blog-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:26px;}
.blog-card{display:block;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border);transition:transform .35s var(--ease);}
.blog-card:hover{transform:translateY(-5px);}
.blog-card.feat{grid-row:span 1;}
.blog-media{height:170px;background:linear-gradient(150deg,var(--tint),#fff);position:relative;}
.blog-card.feat .blog-media{height:280px;background:linear-gradient(155deg,var(--navy-deep),var(--navy));}
.blog-cat{position:absolute;top:16px;left:16px;font-family:'JetBrains Mono',monospace;font-size:10.5px;text-transform:uppercase;background:#fff;padding:5px 10px;border-radius:100px;}
.blog-card.feat .blog-cat{background:rgba(255,255,255,.15);color:#fff;}
.blog-body{padding:22px;background:#fff;}
.blog-body h3{font-size:16.5px;margin-bottom:8px;}
.blog-card.feat .blog-body h3{font-size:22px;}
.blog-meta{font-size:12.5px;color:var(--grey);margin-top:10px;}
@media(max-width:900px){.blog-grid{grid-template-columns:1fr;}}

/* ============ FINAL CTA / CONTACT ============ */
.final-cta{
  background:var(--navy-deep);color:#fff;border-radius:var(--radius-lg);
  padding:64px 60px;text-align:center;position:relative;overflow:hidden;margin:0 48px;
}
.final-cta::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 700px 400px at 50% 0%, rgba(8,106,254,.3), transparent 65%);}
.final-cta h2{font-size:clamp(30px,4vw,46px);max-width:720px;margin:0 auto;position:relative;z-index:1;}
.final-cta p{color:rgba(255,255,255,.65);margin:18px auto 32px;max-width:480px;font-size:16.5px;position:relative;z-index:1;}
.final-cta .hero-cta-row{justify-content:center;position:relative;z-index:1;}
.cta-subline{position:relative;z-index:1;margin-top:18px;font-size:13.5px;}
.cta-subline a{color:rgba(255,255,255,.55);text-decoration:underline;transition:color .25s;}
.cta-subline a:hover{color:#fff;}
@media(max-width:700px){
  .final-cta{margin:0 20px;padding:52px 26px;}
}

/* ============ BOOKING MODAL ============ */
.booking-modal{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;padding:20px;}
.booking-modal[hidden]{display:none;}
.booking-modal-backdrop{position:absolute;inset:0;background:rgba(10,27,54,.6);backdrop-filter:blur(4px);}
.booking-modal-panel{
  position:relative;z-index:1;background:#fff;border-radius:var(--radius-lg);max-width:420px;width:100%;
  padding:34px 30px;box-shadow:0 60px 120px -30px rgba(10,27,54,.5);max-height:90vh;overflow-y:auto;
  animation:modalIn .3s var(--ease);
}
@keyframes modalIn{from{opacity:0;transform:translateY(14px) scale(.98);}to{opacity:1;transform:none;}}
.booking-modal-close{
  position:absolute;top:18px;right:18px;width:32px;height:32px;border-radius:50%;border:none;background:var(--cream);
  color:var(--ink);font-size:18px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .25s;
}
.booking-modal-close:hover{background:var(--border);}
.booking-modal-panel h3{font-size:19px;margin-bottom:18px;padding-right:20px;}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.cal-head button{width:32px;height:32px;border-radius:50%;border:1px solid var(--border);background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--ink);transition:background .2s;}
.cal-head button:hover:not(:disabled){background:var(--cream);}
.cal-head button:disabled{opacity:.3;cursor:not-allowed;}
.cal-head div{font-family:'Manrope',sans-serif;font-weight:700;font-size:14.5px;}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;}
.cal-dow{text-align:center;font-size:11px;color:var(--grey-light);font-weight:600;padding:4px 0 8px;}
.cal-day{
  aspect-ratio:1;border:none;background:none;border-radius:8px;font-size:13.5px;color:var(--ink);cursor:pointer;
  transition:background .2s, color .2s;
}
.cal-day:hover:not(:disabled){background:var(--tint);color:var(--blue);}
.cal-day.disabled{color:var(--border);cursor:not-allowed;}
.time-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:6px;}
.time-slot{padding:12px;border-radius:10px;border:1px solid var(--border);background:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s;}
.time-slot:hover{border-color:var(--blue);color:var(--blue);background:var(--tint);}
.no-slots-msg{grid-column:1 / -1;padding:20px 12px;text-align:center;font-size:14px;color:var(--muted,#6b7280);background:var(--tint);border-radius:10px;}
.link-back{border:none;background:none;color:var(--grey);font-size:13px;cursor:pointer;margin-top:14px;padding:0;text-decoration:underline;}
.link-back:hover{color:var(--ink);}
.booking-summary{font-size:14px;color:var(--grey);margin-bottom:18px;padding:12px 14px;background:var(--tint);border-radius:10px;}
.booking-modal-panel input{
  width:100%;padding:13px 14px;border-radius:10px;border:1px solid var(--border);font-size:14.5px;
  font-family:inherit;margin-bottom:12px;
}
.booking-modal-panel input:focus{border-color:var(--blue);outline:none;}
.booking-error{color:#D64545;font-size:13px;margin:-4px 0 10px;display:none;}
.booking-error.show{display:block;}
#confirmBooking{width:100%;justify-content:center;border:none;cursor:pointer;margin-top:4px;}
body.modal-open{overflow:hidden;}

/* ============ FOOTER ============ */
footer{background:var(--navy-deep);color:rgba(255,255,255,.7);padding:100px 0 40px;margin-top:0;}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:70px;border-bottom:1px solid rgba(255,255,255,.1);}
.footer-brand p{font-size:14px;margin-top:16px;max-width:260px;line-height:1.7;color:rgba(255,255,255,.5);}
.footer-col h4{font-family:'JetBrains Mono',monospace;font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.4);margin-bottom:20px;font-weight:500;}
.footer-col ul{display:flex;flex-direction:column;gap:12px;}
.footer-col a{font-size:14px;color:rgba(255,255,255,.7);transition:color .25s;}
.footer-col a:hover{color:#fff;}
.footer-news input{width:100%;padding:12px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.05);color:#fff;font-size:13.5px;margin-top:14px;}
.footer-news input::placeholder{color:rgba(255,255,255,.4);}
.footer-news button{margin-top:10px;width:100%;padding:12px;background:var(--blue);border:none;border-radius:10px;color:#fff;font-weight:600;font-size:13.5px;cursor:pointer;transition:background .3s;}
.footer-news button:hover{background:var(--blue-deep);}
.footer-contact{display:flex;flex-direction:column;gap:12px;margin:16px 0;}
.footer-contact a{display:flex;align-items:center;gap:9px;}
.footer-contact svg{width:15px;height:15px;flex-shrink:0;opacity:.75;}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:32px;font-size:13px;color:rgba(255,255,255,.4);flex-wrap:wrap;gap:16px;}
.footer-social{display:flex;gap:14px;}
.footer-social a{width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;transition:all .3s;}
.footer-social a:hover{background:var(--blue);border-color:var(--blue);}
.footer-social svg{width:15px;height:15px;}
@media(max-width:900px){.footer-top{grid-template-columns:1fr 1fr;}}

/* ============ PAGE HERO (service / case-study / blog pages) ============ */
.page-hero{
  padding:160px 0 90px;color:#fff;position:relative;overflow:hidden;
  background:
    radial-gradient(ellipse 900px 500px at 88% -10%, rgba(8,106,254,.4), transparent 60%),
    linear-gradient(165deg, #0A1B36 0%, #0D2246 55%, #0A1B36 100%);
}
.page-hero .eyebrow{color:#8FBBFF;}
.page-hero .eyebrow::before{background:#8FBBFF;}
.page-hero .crumbs{font-size:13px;color:rgba(255,255,255,.5);margin-bottom:18px;}
.page-hero .crumbs a{color:rgba(255,255,255,.75);}
.page-hero .crumbs a:hover{color:#fff;}
.page-hero h1{font-size:clamp(34px,4.6vw,54px);max-width:820px;color:#fff;}
.page-hero .hero-sub{color:rgba(255,255,255,.68);max-width:620px;margin-top:20px;}
.page-hero .hero-meta{display:flex;gap:24px;margin-top:32px;flex-wrap:wrap;font-size:13.5px;color:rgba(255,255,255,.6);}
.page-hero .hero-meta strong{color:#fff;}

/* Pricing tier note strip (used under service-page pricing grids) */
.tier-note{
  margin-top:30px;padding:18px 24px;border:1px dashed var(--border);border-radius:var(--radius-sm);
  font-size:13.5px;color:var(--grey);background:var(--cream);
}
.tier-note strong{color:var(--ink);}
.addon-list{display:flex;flex-wrap:wrap;gap:14px;margin-top:22px;}
.addon-list div{
  font-size:13.5px;padding:10px 16px;border:1px solid var(--border);border-radius:100px;color:var(--grey);
}
.addon-list div strong{color:var(--ink);}
.sticky-cta-bar{
  display:none;position:fixed;bottom:0;left:0;right:0;z-index:997;
  background:#fff;border-top:1px solid var(--border);padding:12px 16px;
  box-shadow:0 -8px 24px -12px rgba(10,27,54,.15);
  transition:transform .35s var(--ease);
}
.sticky-cta-bar.hide{transform:translateY(100%);}
.sticky-cta-bar .scb-row{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.sticky-cta-bar .scb-text strong{display:block;font-size:14px;font-family:'Manrope',sans-serif;font-weight:700;}
.sticky-cta-bar .scb-text span{font-size:12px;color:var(--grey);}
.sticky-cta-bar .btn-primary{padding:12px 18px;font-size:13.5px;white-space:nowrap;flex-shrink:0;}
@media(max-width:700px){.sticky-cta-bar{display:block;}}

/* ============ STICKY WHATSAPP ============ */
.sticky-wa{
  position:fixed;bottom:26px;right:26px;z-index:999;
  width:58px;height:58px;border-radius:50%;background:#25D366;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 30px -8px rgba(37,211,102,.55);
  transition:transform .3s var(--ease), bottom .35s var(--ease);
}
.sticky-wa:hover{transform:scale(1.08);}
.sticky-wa svg{width:28px;height:28px;color:#fff;}
@media(max-width:700px){.sticky-wa{bottom:92px;right:18px;width:52px;height:52px;}.sticky-wa svg{width:25px;height:25px;}}

/* general icon sizing */
.icon-sm{width:22px;height:22px;}

/* ============ CUSTOM CURSOR ============ */
.cursor-dot,.cursor-ring{
  position:fixed;top:0;left:0;pointer-events:none;z-index:10000;
  border-radius:50%;transform:translate(-50%,-50%);
  will-change:transform;
}
.cursor-dot{width:6px;height:6px;background:var(--blue);transition:opacity .2s;}
.cursor-ring{width:36px;height:36px;border:1px solid rgba(8,106,254,.4);transition:width .25s var(--ease),height .25s var(--ease),border-color .25s,background .25s;}
.cursor-ring.grow{width:64px;height:64px;background:rgba(8,106,254,.06);border-color:rgba(8,106,254,.15);}
@media(hover:none),(max-width:900px){.cursor-dot,.cursor-ring{display:none;}}
body{cursor:default;}

/* ============ AMBIENT BLOBS ============ */
.blob-field{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;}
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;animation:blobDrift 22s ease-in-out infinite;}
.blob-a{width:420px;height:420px;background:radial-gradient(circle,rgba(143,187,255,.35),transparent 70%);top:-140px;right:-80px;animation-duration:26s;}
.blob-b{width:360px;height:360px;background:radial-gradient(circle,rgba(8,106,254,.3),transparent 70%);bottom:-120px;left:-100px;animation-duration:30s;animation-delay:-8s;}
@keyframes blobDrift{
  0%,100%{transform:translate(0,0) scale(1);}
  33%{transform:translate(40px,-30px) scale(1.08);}
  66%{transform:translate(-30px,20px) scale(.95);}
}
@media (prefers-reduced-motion: reduce){.blob{animation:none;}}

/* magnetic buttons get JS-driven inline transforms; base transition below */
.magnetic{transition:transform .25s cubic-bezier(.2,.9,.3,1.3);}

/* ============ CONTACT PAGE ============ */
.method-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:50px;}
.method-card{
  display:block;text-align:left;padding:30px 26px;border:1px solid var(--border);border-radius:var(--radius-md);
  transition:all .3s var(--ease);background:#fff;
}
.method-card:hover{transform:translateY(-5px);box-shadow:0 20px 50px -20px rgba(10,27,54,.18);border-color:var(--blue);}
.method-card .m-icon{
  width:44px;height:44px;border-radius:50%;background:var(--tint);display:flex;align-items:center;justify-content:center;margin-bottom:18px;
  transition:background .3s, color .3s;color:var(--blue);
}
.method-card:hover .m-icon{background:var(--blue);color:#fff;}
.method-card .m-icon svg{width:20px;height:20px;}
.method-card h3{font-size:15px;margin-bottom:6px;}
.method-card .m-value{font-size:14.5px;color:var(--grey);word-break:break-word;}
.method-card .m-note{display:block;margin-top:8px;font-size:12px;color:var(--grey-light);}
@media(max-width:900px){.method-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.method-grid{grid-template-columns:1fr;}}

.social-row-lg{display:flex;gap:14px;justify-content:center;margin-top:8px;}
.social-row-lg a{
  width:48px;height:48px;border-radius:50%;background:var(--cream);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;color:var(--ink);transition:all .25s var(--ease);
}
.social-row-lg a:hover{background:var(--navy-deep);color:#fff;border-color:var(--navy-deep);transform:translateY(-3px);}
.social-row-lg a svg{width:19px;height:19px;}

.hours-strip{
  display:flex;justify-content:center;gap:36px;flex-wrap:wrap;margin-top:36px;padding-top:32px;border-top:1px solid var(--border);
}
.hours-item{text-align:center;}
.hours-item .h-label{font-family:'JetBrains Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--grey-light);margin-bottom:6px;}
.hours-item .h-value{font-family:'Manrope',sans-serif;font-weight:700;font-size:15px;}
/* ============ APPROACH SECTION — TEXT + VISUAL PANEL ============ */
.approach-grid{display:grid;grid-template-columns:1fr 360px;gap:56px;align-items:start;}
.approach-visual{position:sticky;top:110px;height:460px;border-radius:var(--radius-lg);background:radial-gradient(ellipse 420px 320px at 50% 18%, rgba(8,106,254,.35), transparent 65%), radial-gradient(circle, rgba(255,255,255,.14) 1px, transparent 1px), linear-gradient(150deg,var(--navy-deep),var(--navy));background-size:auto,16px 16px,auto;overflow:hidden;display:flex;align-items:center;justify-content:center;clip-path:polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);}
.approach-visual svg{width:88%;height:88%;}
.approach-visual .av-tag{position:absolute;left:22px;top:20px;font-family:'JetBrains Mono',monospace;font-size:11px;color:#fff;background:rgba(255,255,255,.14);padding:5px 11px;border-radius:100px;border:1px solid rgba(255,255,255,.2);}
.approach-visual .av-caption{position:absolute;left:22px;bottom:22px;right:22px;font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.04em;color:rgba(255,255,255,.55);}
@media(max-width:960px){
  .approach-grid{grid-template-columns:1fr;}
  .approach-visual{position:relative;height:280px;margin-bottom:8px;}
}

/* ============ SERVICES DROPDOWN (added) ============ */
.nav-item{position:relative;display:flex;align-items:center;}
.nav-drop-trigger{display:inline-flex;align-items:center;gap:6px;background:none;border:none;padding:0;font-family:inherit;font-size:14.5px;font-weight:500;color:#fff;opacity:.82;cursor:pointer;transition:opacity .25s, color .4s var(--ease);}
.nav-item:hover .nav-drop-trigger,.nav-drop-trigger:focus-visible{opacity:1;}
header.scrolled .nav-drop-trigger{color:var(--ink);}
.nav-drop-caret{width:12px;height:12px;flex-shrink:0;transition:transform .3s var(--ease);}
.nav-item:hover .nav-drop-caret,.nav-item.open .nav-drop-caret{transform:rotate(180deg);}
.nav-dropdown{
  position:absolute;top:calc(100% + 22px);left:50%;transform:translate(-50%,6px);
  width:340px;background:#fff;border-radius:var(--radius-md);border:1px solid var(--border);
  box-shadow:0 30px 70px -24px rgba(10,27,54,.32);padding:10px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  z-index:1001;
}
.nav-dropdown::before{content:'';position:absolute;top:-6px;left:50%;transform:translateX(-50%) rotate(45deg);width:12px;height:12px;background:#fff;border-left:1px solid var(--border);border-top:1px solid var(--border);}
.nav-item:hover .nav-dropdown,.nav-item.open .nav-dropdown,.nav-item:focus-within .nav-dropdown{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);}
.nav-drop-link{display:flex;align-items:flex-start;gap:12px;padding:12px;border-radius:10px;transition:background .2s;}
.nav-drop-link:hover,.nav-drop-link:focus-visible{background:var(--tint);}
.ndl-icon{width:36px;height:36px;border-radius:9px;background:var(--tint);flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--blue);transition:background .2s,color .2s;}
.nav-drop-link:hover .ndl-icon{background:var(--blue);color:#fff;}
.ndl-icon svg{width:17px;height:17px;}
.nav-drop-link strong{display:block;font-family:'Manrope',sans-serif;font-weight:700;font-size:14px;color:var(--ink);}
.nav-drop-link small{display:block;font-family:'Inter',sans-serif;font-weight:400;font-size:12px;color:var(--grey);margin-top:2px;line-height:1.4;}
.mm-drop-toggle{width:100%;background:none;border:none;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.1);color:#fff;font-family:'Manrope',sans-serif;font-weight:700;font-size:22px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;}
.mm-drop-toggle svg{width:16px;height:16px;opacity:.4;transition:transform .3s var(--ease);}
.mm-drop.open .mm-drop-toggle svg{transform:rotate(90deg);}
.mm-sub-links{display:flex;flex-direction:column;max-height:0;overflow:hidden;transition:max-height .35s var(--ease);}
.mm-drop.open .mm-sub-links{max-height:220px;}
.mm-sub-links a{color:rgba(255,255,255,.75);font-family:'Manrope',sans-serif;font-weight:600;font-size:16px;padding:12px 0 12px 14px;border-bottom:1px solid rgba(255,255,255,.06);}
body.mm-lock{overflow:hidden;}


/* ============ ABOUT / WHY US (shared, used on about.html) ============ */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;margin-top:20px;}
.about-copy p{color:var(--grey);font-size:16px;line-height:1.75;margin-bottom:20px;max-width:480px;}
.about-copy p:last-child{margin-bottom:0;}
.team-row{display:flex;gap:-8px;margin-top:32px;align-items:center;gap:14px;}
.team-faces{display:flex;}
.team-face{width:52px;height:52px;border-radius:50%;border:3px solid #fff;margin-left:-14px;display:flex;align-items:center;justify-content:center;color:#fff;font-family:'Manrope',sans-serif;font-weight:800;font-size:15px;box-shadow:0 8px 18px -8px rgba(10,27,54,.3);}
.team-face:first-child{margin-left:0;}
.team-row-label{font-size:13.5px;color:var(--grey);}
.team-row-label b{color:var(--ink);}
.why-list{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:32px;}
.why-item{display:flex;flex-direction:column;gap:14px;align-items:flex-start;border:1px solid var(--border);border-radius:var(--radius-md);padding:22px 20px;background:#fff;transition:all .3s var(--ease);}
.why-item:hover{border-color:var(--ink);transform:translateY(-3px);box-shadow:0 16px 32px -18px rgba(10,27,54,.25);}
.why-item .wi-icon{width:34px;height:34px;border-radius:9px;background:var(--tint);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.why-item .wi-icon svg{width:17px;height:17px;color:var(--blue);}
.why-item h4{font-size:14.5px;font-weight:700;margin-bottom:3px;}
.why-item p{font-size:13px;color:var(--grey);line-height:1.5;margin:0;}
@media(max-width:900px){.about-grid{grid-template-columns:1fr;gap:40px;}.why-list{grid-template-columns:1fr;}}

/* ============ ROLE CARDS (about.html team section) ============ */
.role-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:32px;}
.role-card{border:1px solid var(--border);border-radius:var(--radius-md);padding:26px 22px;background:#fff;transition:all .3s var(--ease);}
.role-card:hover{border-color:var(--ink);transform:translateY(-3px);box-shadow:0 16px 32px -18px rgba(10,27,54,.25);}
.role-card .team-face{margin-bottom:18px;margin-left:0;}
.role-card h4{font-size:16px;font-weight:700;margin-bottom:6px;}
.role-card p{font-size:13.5px;color:var(--grey);line-height:1.6;margin:0;}
@media(max-width:900px){.role-grid{grid-template-columns:1fr;}}


/* ============ Homepage-only styles (merged in from index.css) ============ */

.feature-spine{position:relative;}

.feature-spine::before{
  content:'';position:absolute;top:14px;bottom:14px;left:50%;width:1px;
  background:linear-gradient(180deg, transparent, var(--border) 12%, var(--border) 88%, transparent);
  transform:translateX(-0.5px);z-index:0;
}

.feat-copy{position:relative;}

.feat-num{
  font-family:'Manrope',sans-serif;font-weight:800;font-size:clamp(120px, 6.25vw, 150px);line-height:1;
  position:absolute;top:-0.383em;left:-0.083em;z-index:-1;
  color:transparent;-webkit-text-stroke:1px var(--border);
  user-select:none;
}

.feat-copy .eyebrow{margin-bottom:16px;}

.feat-list .li-check{width:22px;height:22px;border-radius:50%;background:var(--tint);display:flex;align-items:center;justify-content:center;flex-shrink:0;}

.feat-media::before{
  content:'';position:absolute;inset:0;border-radius:var(--radius-lg);z-index:0;
  background-image:radial-gradient(rgba(8,106,254,.16) 1px, transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(ellipse 60% 60% at 30% 20%, #000, transparent 75%);
  mask-image:radial-gradient(ellipse 60% 60% at 30% 20%, #000, transparent 75%);
}

.feat-media .glow{position:absolute;width:280px;height:280px;border-radius:50%;filter:blur(70px);opacity:.35;z-index:0;background:radial-gradient(circle, var(--blue), transparent 70%);bottom:-60px;right:-60px;}

.feature-row.rev .feat-media .glow{background:radial-gradient(circle, var(--navy), transparent 70%);bottom:auto;top:-60px;left:-60px;}

.feature-row:hover .feat-media .mock-ui{transform:translateY(-6px);}

.mock-bar .mock-url{margin-left:6px;flex:1;height:16px;border-radius:5px;background:#fff;border:1px solid var(--border);font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--grey-light);display:flex;align-items:center;padding:0 8px;letter-spacing:.02em;}

.feat-media img.feat-photo-full{
  width:100%;height:100%;
  object-fit:cover;
  border-radius:var(--radius-lg);
}

.feat-chip{
  position:absolute;z-index:2;background:#fff;border:1px solid var(--border);border-radius:12px;
  padding:10px 14px;box-shadow:0 18px 40px -14px rgba(10,27,54,.3);
  font-family:'JetBrains Mono',monospace;display:flex;align-items:center;gap:8px;
  animation:floaty 6s ease-in-out infinite;
}

.feat-chip .dot{width:7px;height:7px;border-radius:50%;background:#5EE7A8;box-shadow:0 0 0 3px rgba(94,231,168,.2);}

.feat-chip .val{font-family:'Manrope',sans-serif;font-weight:800;font-size:15px;color:var(--ink);}

.feat-chip .lbl{font-size:9.5px;color:var(--grey);text-transform:uppercase;letter-spacing:.06em;}

.chip-1{top:-18px;right:6%;animation-delay:.3s;}

.chip-2{bottom:-16px;left:8%;animation-delay:1.8s;}

.industries-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}

.ind-card{
  position:relative;border:1px solid var(--border);border-radius:var(--radius-md);
  padding:26px 24px;background:#fff;overflow:hidden;
  transition:all .35s var(--ease);
}

.ind-card:hover{transform:translateY(-4px);border-color:var(--ink);box-shadow:0 20px 40px -20px rgba(10,27,54,.25);}

.ind-card .ic-wrap{width:40px;height:40px;border-radius:11px;background:var(--tint);display:flex;align-items:center;justify-content:center;margin-bottom:16px;transition:background .3s var(--ease);}

.ind-card .ic-wrap svg{width:20px;height:20px;color:var(--blue);}

.ind-card:hover .ic-wrap{background:var(--blue);}

.ind-card:hover .ic-wrap svg{color:#fff;}

.ind-card h4{font-size:15.5px;font-weight:700;margin-bottom:4px;line-height: 1.35;}

.ind-card p{font-size:12.5px;color:var(--grey-light);line-height:1.4;}

.ind-card.featured{
  grid-column:span 2;grid-row:span 1;
  background:linear-gradient(155deg,var(--navy-deep),var(--navy));
  border-color:var(--navy-deep);color:#fff;display:flex;flex-direction:column;justify-content:space-between;
}

.ind-card.featured::before{
  content:'';position:absolute;inset:0;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.12) 1px, transparent 1px);background-size:18px 18px;
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 100% 0%, #000, transparent 70%);
  mask-image:radial-gradient(ellipse 70% 70% at 100% 0%, #000, transparent 70%);
}

.ind-card.featured .ic-wrap{background:rgba(255,255,255,.12);position:relative;z-index:1;}

.ind-card.featured .ic-wrap svg{color:#7FB2FF;}

.ind-card.featured:hover .ic-wrap{background:rgba(255,255,255,.2);}

.ind-card.featured:hover .ic-wrap svg{color:#fff;}

.ind-card.featured h4{font-size:17px;position:relative;z-index:1;}

.ind-card.featured p{color:rgba(255,255,255,.55);position:relative;z-index:1;}

.ind-card.featured .ind-metric{
  position:relative;z-index:1;display:flex;align-items:center;gap:8px;margin-top:18px;
  font-family:'JetBrains Mono',monospace;font-size:12px;color:#5EE7A8;
}

.ind-card.featured .ind-metric b{font-family:'Manrope',sans-serif;font-weight:800;font-size:15px;color:#fff;}

.ind-card.featured .ind-arrow{
  position:absolute;top:22px;right:22px;z-index:1;width:30px;height:30px;border-radius:50%;
  background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;
  transition:all .3s var(--ease);
}

.ind-card.featured .ind-arrow svg{width:14px;height:14px;color:#fff;}

.ind-card.featured:hover .ind-arrow{background:var(--blue);transform:rotate(45deg);}

.compare-wrap{margin-top:90px;overflow-x:auto;}

.compare-table{width:100%;border-collapse:collapse;min-width:640px;}

.compare-table th,.compare-table td{padding:18px 20px;text-align:left;border-bottom:1px solid var(--border);font-size:14.5px;}

.compare-table thead th{font-family:'JetBrains Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--grey);font-weight:500;padding-bottom:20px;}

.compare-table thead th:not(:first-child){text-align:center;}

.compare-table tbody th{font-weight:600;color:var(--ink);}

.compare-table td{text-align:center;color:var(--grey);}

.compare-table td svg{width:18px;height:18px;color:var(--blue);margin:0 auto;}

.compare-table td.dash{color:var(--border);font-size:18px;}

.compare-table tbody tr:hover{background:var(--tint);}

.compare-table th.hl,.compare-table td.hl{background:rgba(8,106,254,.04);}

.blog-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.2, 0, 0.2, 1);
}

.blog-card:hover .blog-media img {
  transform: scale(1.06);
}

.blog-media::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 45%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}

.blog-body p {
  line-height: 1.5;
  margin-bottom: 12px;
}

@media (max-width: 900px) {
  .blog-grid {
    grid-template-columns: 1fr;
  }
}
/* --- Added for case-study-rejua.html: keep article-body left-aligned when it follows a left-aligned section-head, instead of the default centered reading column --- */
.article-body.body-left{margin-left:0;margin-right:0;}

/* --- Added for case-study-rejua.html: .btn-secondary needs a light-on-dark variant on .page-hero, same as the existing .hero variant, since subpages use .page-hero not .hero --- */
.page-hero .btn-secondary{border-color:rgba(255,255,255,.28);color:#fff;}
.page-hero .btn-secondary:hover{border-color:#fff;background:#fff;color:var(--navy-deep);}

/* --- Added for index.html: logo image support in the trust strip (.marks), replacing the plain diamond bullet with an actual logo when present --- */
.logo-strip .marks div.has-logo::before{display:none;}
.logo-strip .marks .mark-logo{height:22px;width:auto;max-width:120px;object-fit:contain;flex-shrink:0;}

/* --- Added to disable the custom cursor dot/ring follower sitewide --- */
.cursor-dot,.cursor-ring{display:none !important;}

/* ==========================================================================
   MOBILE & TABLET FIXES  (appended block — nothing above this line was changed)
   Covers: Hero · Services · Industries · "How we work" feature images
   Breakpoints: 1200 / 1000 / 900 / 700 / 600 / 360
   ========================================================================== */

/* ---------- "HOW WE WORK" feature images ----------
   ROOT CAUSE of the stretching: the <img> tags carry width="600" height="490"
   and the HTML class is "feat-photo", but the CSS only styled "feat-photo-full",
   so the height attribute stayed fixed at 490px while max-width:100% shrank the
   width on small screens. height:auto + aspect-ratio keeps the true proportions
   at every screen size. */
.feat-media img.feat-photo{
  display:block;width:100%;max-width:100%;height:auto;
  aspect-ratio:600 / 490;object-fit:cover;
  border-radius:var(--radius-lg);
}

/* ---------- HERO ---------- */
.hero{min-height:100vh;min-height:100svh;} /* svh = ignores the phone's collapsing address bar */

@media(max-width:1000px){
  .hero{padding-top:124px;padding-bottom:64px;}
  .hero-grid{padding:0 24px;gap:44px;}            /* was a fixed 48px side padding on phones */
  .hero h1{font-size:clamp(38px,7.4vw,60px);}
  .hero-sub{max-width:560px;font-size:17.5px;}
  .hero-visual{height:380px;margin-top:0;}
  .hero-chart-line path{vector-effect:non-scaling-stroke;} /* line no longer squashes when the box resizes */
}
@media(max-width:700px){
  .hero{min-height:auto;padding-top:108px;padding-bottom:56px;}
  .hero-grid{gap:36px;}
  .hero h1{font-size:clamp(33px,9.6vw,44px);line-height:1.18;}
  .hero-sub{font-size:16px;line-height:1.6;margin-top:20px;}
  .hero .hero-cta-row{flex-direction:column;align-items:stretch;gap:12px;margin-top:28px;}
  .hero .hero-cta-row .btn-primary,
  .hero .hero-cta-row .btn-whatsapp{width:100%;justify-content:center;}
  .hero-visual{height:300px;}
  .fc-1{width:150px;padding:14px 16px;}
  .fc-2{width:150px;bottom:6%;padding:14px 16px;}
  .fc-value{font-size:22px;}
}

/* ---------- SERVICES ("What We Do") ---------- */
@media(min-width:601px) and (max-width:1200px){
  .services-grid{grid-template-columns:repeat(2,1fr);}
  /* 3 cards in 2 columns: let the last one span the full row instead of leaving a grey hole */
  .services-grid>.service-card:nth-child(odd):last-child{grid-column:1 / -1;min-height:0;}
  .services-grid>.service-card:nth-child(odd):last-child p{max-width:640px;}
}
@media(max-width:600px){
  .services-grid{grid-template-columns:1fr;border-radius:var(--radius-md);}
  .service-card{padding:28px 22px;min-height:0;}
  .service-card h3{font-size:18px;padding-right:44px;} /* keeps the title clear of the arrow button */
  .service-more{top:26px;right:20px;}
}

/* ---------- INDUSTRIES ---------- */
/* Previously this grid had NO responsive rules: 4 columns on every screen size. */
@media(max-width:900px){
  .industries-grid{grid-template-columns:repeat(2,1fr);gap:14px;}
  .ind-card.featured{grid-column:1 / -1;}          /* Healthcare card becomes a full-width banner */
}
@media(max-width:600px){
  .industries-grid{gap:12px;}
  .ind-card{padding:20px 16px;border-radius:14px;}
  .ind-card .ic-wrap{width:36px;height:36px;margin-bottom:14px;}
  .ind-card h4{font-size:15px;overflow-wrap:break-word;}
  .ind-card p{font-size:13px;line-height:1.45;}
  .ind-card.featured{padding:22px 20px;}
  .ind-card.featured h4{font-size:17px;}
}
@media(max-width:360px){
  .ind-card{padding:18px 14px;}
  .ind-card h4{font-size:14px;}
}

/* ---------- HOW WE WORK (layout on tablet/phone) ---------- */
@media(max-width:900px){
  .feature-spine::before{display:none;}            /* the centre divider line was running through the text */
  .feature-row,.feature-row.rev{margin-bottom:72px;}
  .feature-row:last-child{margin-bottom:0;}
  .feat-media{max-width:600px;width:100%;margin:0 auto;} /* was left-aligned: block elements default to the left unless centred explicitly */
}

/* ---------- "OUR APPROACH" style section headers (used on service pages) ----------
   Flex row with no explicit widths: the heading column was only as wide as its own
   text, so on tablets it got squeezed into a narrow strip while the paragraph took
   the rest. Stacking earlier (1024px vs. the old 800px) fixes this for tablets too. */
@media(max-width:1024px){
  .section-head{flex-direction:column;align-items:flex-start;}
  .section-head h2{max-width:none;}
}

/* ---------- FOUNDER / ABOUT PAGE photo ----------
   The founder-block is `display:flex` with no justify-content, so once it wraps to
   a single column on phones the photo sticks to the left edge instead of centring. */
@media(max-width:700px){
  .founder-block{flex-direction:column;justify-content:center;text-align:center;}
}

/* ---------- FINAL CTA HEADLINE ----------
   "Let's Build Something Incredible Together." was breaking one word per line on
   phones. text-wrap:balance lets the browser choose better break points, and the
   size is trimmed slightly further down so it isn't the browser's last-resort wrap. */
@media(max-width:480px){
  .final-cta h2{font-size:28px;line-height:1.22;text-wrap:balance;}
}

/* ---------- MOBILE STICKY CTA vs. FLOATING WHATSAPP BUBBLE ----------
   Below 700px a full sticky-cta-bar appears (text + WhatsApp icon + Book Now), so
   the separate round floating WhatsApp bubble became a second, redundant WhatsApp
   touchpoint sitting right above it. Hiding the bubble on phones leaves one clear
   WhatsApp entry point there; it still shows on tablet/desktop where no bar exists. */
@media(max-width:700px){
  .sticky-wa{display:none;}
}

/* ---------- HEADER LOGO ----------
   .logo-mark uses object-fit:contain inside a fixed 150x34 box. If the real logo
   image's proportions are narrower than that box, contain's default centering
   leaves invisible empty space on the left, making the logo look shifted inward
   even though the box itself sits flush against the edge. Anchor it left instead. */
.logo-mark{object-position:left center;}
@media(max-width:600px){
  .feature-row,.feature-row.rev{margin-bottom:56px;gap:28px;}
  .feature-row:last-child{margin-bottom:0;}
  .feat-num{font-size:88px;}
  .feat-copy p{font-size:15.5px;margin-bottom:22px;}
  .feat-media .glow{width:200px;height:200px;right:-20px;bottom:-30px;}
  .feature-row.rev .feat-media .glow{top:-30px;left:-20px;right:auto;bottom:auto;}
}


.ab-split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.ab-panel{background:linear-gradient(155deg,var(--navy-deep),var(--navy));color:#fff;border-radius:24px;padding:40px 36px;display:flex;flex-direction:column;gap:22px;}
.ab-panel-eyebrow{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#8FBBFF;}
.ab-fact{padding-top:20px;border-top:1px solid rgba(255,255,255,.12);}
.ab-fact:first-of-type{border-top:none;padding-top:0;}
.ab-fact strong{display:block;font-family:'Manrope',sans-serif;font-weight:800;font-size:24px;margin-bottom:4px;}
.ab-fact span{font-size:14px;color:rgba(255,255,255,.65);line-height:1.5;}
.ab-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px;}
.ab-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);padding:32px 28px;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;}
.ab-card:hover{transform:translateY(-4px);border-color:var(--ink);box-shadow:0 20px 40px -20px rgba(10,27,54,.25);}
.ab-card h3{font-size:19px;margin-bottom:10px;}
.ab-card p{font-size:14.5px;color:var(--grey);line-height:1.6;margin-bottom:20px;flex:1;}
.ab-link{font-size:14px;font-weight:600;color:var(--blue);}
@media(max-width:900px){
  .ab-split{grid-template-columns:1fr;gap:40px;}
  .ab-cards{grid-template-columns:1fr;}
}
.ab-process-cta{display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap;margin-top:56px;}
.ab-process-cta span{font-family:'Manrope',sans-serif;font-weight:700;font-size:17px;color:var(--ink);}
.ab-principles{grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px;}
.ab-principles .why-item{padding:28px 26px;gap:16px;}
.ab-principles .wi-icon{width:44px;height:44px;border-radius:12px;}
.ab-principles .wi-icon svg{width:21px;height:21px;}
.ab-principles .why-item h4{font-size:17px;margin-bottom:6px;}
.ab-principles .why-item p{font-size:14.5px;line-height:1.6;}
@media(max-width:900px){.ab-principles{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.ab-principles{grid-template-columns:1fr;}}