/* ==========================================================================
   HexaTech Global — stylesheet
   Content lives in /content.js. This file is presentation only.
   ========================================================================== */

/* ------------------------------------------------------------------ RESET */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0}
img,svg,video{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,h5,p,figure,blockquote,dl,dd{margin:0}
[hidden]{display:none!important}

/* ----------------------------------------------------------------- TOKENS */
:root{
  /* Palette derived from the logo: navy #0A2250 + cyan #0CA9DF (assets/img/logo.png). */
  --navy-900:#051129;   /* logo navy, darkened */
  --navy-800:#0A2250;   /* the logo navy itself */
  --navy-700:#0E3071;
  --navy-600:#123C8D;
  --ink:#0A2250;        /* the logo navy */
  --blue:#087296;       /* logo cyan, darkened to pass AA on white */
  --blue-400:#0A8BB8;
  --blue-300:#0CA9DF;   /* the logo cyan itself */
  --blue-200:#77D7F8;   /* pale logo cyan — accents over photography */
  --purple:#184395;     /* mid brand navy — replaces the old off-brand violet */
  --grad:linear-gradient(84deg,#0CA9DF 0%,#087296 100%);
  --grad-soft:linear-gradient(140deg,#0CA9DF 0%,#087296 100%);
  --grad-alt:linear-gradient(84deg,#0CA9DF 0%,#184395 100%);
  /* Page-hero scrim. Heavy logo navy where the heading sits, opening to the
     logo cyan on the far right, so white text and the accent stay legible. */
  --grad-banner:linear-gradient(89deg,rgba(10,34,80,.86) 0%,rgba(14,48,113,.66) 48%,rgba(12,169,223,.4) 100%);
  --soft:#F5FBFD;       /* cyan-tinted section ground */
  --soft-2:#E3F4F9;
  --line:rgba(10,34,80,.17);  /* logo navy at 17% */
  --body:#49515B;       /* --text */
  --star:#F8BC26;       /* --ratting */
  --white:#fff;
  --shell:1600px;
  --gap:30px;
  --r:25px;      /* hero / CTA panels */
  --r-card:12px;  /* the reference's workhorse radius */
  --r-sm:4px;     /* buttons, badges, fields */
  --shadow-sm:0 10px 30px rgba(10,34,80,.06);
  --shadow:0 24px 60px rgba(10,34,80,.10);
  --shadow-lg:11px 15px 80px 20px rgba(10,34,80,.16);
  --t:.4s ease-in-out;
  --font:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-head:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}

body{
  font-family:var(--font);
  font-size:16px;
  line-height:1.75;
  color:var(--body);
  background:var(--white);
  /* clip, not hidden: the off-canvas menu, the preloader and the sliding
     heading letters must not widen the page on phones, and clip (unlike
     hidden) does not turn body into a scroll container, so the sticky header
     keeps working. html needs it too or iOS still scrolls sideways. */
  overflow-x:clip;
}
html{overflow-x:clip}

/* Type scale copied from the theme: h1 80/120%, h2 60/130%, h3 24/150%, h4 20px,
   stepping down at its own 1399 / 1199 / 767 / 575 breakpoints. Note the theme
   drops section headings to 42px inside `.section-title` — the global 60px is
   really only reached by the big stat numbers, so `.split-text` carries 42px. */
h1,h2,h3,h4,h5,h6{color:var(--ink);font-family:var(--font-head);font-weight:700;letter-spacing:-.02em;transition:color var(--t)}
h1{font-size:80px;line-height:120%}
h2{font-size:60px;line-height:130%}
h3{font-size:24px;line-height:150%}
h4{font-size:20px;line-height:150%}
h2.split-text{font-size:42px;line-height:130%}
/* Card titles are h4-scale in the theme (20px), whatever tag they use here. */
.feature-card h3,.highlight-body h3,.service-card h3,.value-card h3,
.industry-card h3,.process-step h3,.why-feature h3,.case-body h3,
.post-card h3,.team-name{font-size:20px;line-height:150%}
em{font-style:normal;color:var(--blue)}
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{color:#fff}
.on-dark{color:rgba(255,255,255,.76)}
.on-dark em{color:var(--blue-300)}

.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:clamp(18px,3.45vw,52px)}
.section{padding:clamp(70px,8vw,120px) 0;position:relative}
/* The .shape layer clips itself (inset:0 + overflow:hidden); everything that
   follows it in a section is lifted above it. */
.shape~*{position:relative;z-index:2}
.section--soft{background:var(--soft)}
.section--tight{padding-block:clamp(50px,6vw,80px)}

/* ------------------------------------------------------- SHARED PATTERNS */
/* Two-tone pill label: first word inherits navy, rest gradient-blue. */
.kicker{
  display:inline-block;
  white-space:nowrap;
  background:var(--soft-2);
  color:var(--ink);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  padding:9px 20px;
  border-radius:var(--r-sm);
  margin-bottom:22px;
  line-height:1.4;
}
.kicker b{font-weight:700;color:var(--blue)}
.on-dark .kicker,.kicker--dark{background:rgba(255,255,255,.09);color:#fff}
.on-dark .kicker b,.kicker--dark b{color:var(--blue-300)}

.lead{font-size:1.02rem;max-width:60ch}

.section-head{max-width:820px;margin-inline:auto;text-align:center;margin-bottom:clamp(40px,5vw,64px)}
.section-head p{margin-top:18px}
.section-head--split{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:end;max-width:none;text-align:left;margin-inline:0}
.section-head--split p{margin-top:0}

/* Buttons */
/* The reference's .theme-btn: two white blocks grow out of the top-right and
   bottom-left corners (50% x 0% -> 100% x 100%) until the button is white and
   the label has turned blue. */
.btn{
  --btn-bg:var(--grad);
  --btn-wipe:#fff;
  --btn-hover-color:var(--blue);
  position:relative;z-index:2;vertical-align:middle;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--btn-bg);color:#fff;
  font-size:17px;font-weight:700;line-height:1;
  padding:18px 35px;border:0;border-radius:var(--r-sm);
  text-transform:capitalize;text-align:center;white-space:nowrap;
  transition:.5s ease-in-out;
  -webkit-appearance:none;outline:none;overflow:hidden;cursor:pointer;
}
.btn::before,.btn::after{
  content:'';position:absolute;width:50%;height:0%;
  background:var(--btn-wipe);
  transition:.4s;z-index:-1;
}
.btn::before{top:0;right:0}
.btn::after{left:0;bottom:0}
.btn:hover::before,.btn:hover::after,
.btn:focus-visible::before,.btn:focus-visible::after{width:100%;height:100%}
.btn:hover,.btn:focus-visible{color:var(--btn-hover-color)}

.btn--ghost{
  --btn-bg:transparent;--btn-wipe:var(--grad);--btn-hover-color:#fff;
  color:var(--blue);border:1px solid var(--blue-300);
}
.on-dark .btn--ghost,.hero-copy .btn--ghost,.cta-band .btn--ghost{
  color:#fff;border-color:rgba(255,255,255,.32);--btn-wipe:#fff;--btn-hover-color:var(--blue);
}
.btn--sm{padding:13px 26px;font-size:15px}

.link-arrow{
  display:inline-flex;align-items:center;gap:9px;
  color:var(--blue);font-weight:600;
  transition:gap var(--t);
}
.link-arrow:hover{gap:15px}
.link-arrow svg{width:17px;height:17px}

/* Check list */
.checks{display:grid;gap:14px}
.checks li{display:flex;gap:12px;align-items:flex-start;color:var(--body)}
.checks svg{width:20px;height:20px;flex:none;margin-top:4px;color:var(--blue)}
.on-dark .checks li{color:rgba(255,255,255,.8)}

/* Icon tile */
/* Icon tile, after the savictech.com reference: a pale rounded square with a
   line icon in brand blue, which fills with the brand gradient when its card
   is hovered. The old solid gradient disc read heavy once every card on a page
   carried one. Dark bands override this back to a solid tile (see below). */
.icon-tile{
  width:56px;height:56px;flex:none;
  display:grid;place-items:center;
  border-radius:14px;
  background:linear-gradient(145deg,#EAF7FC 0%,#D8EFF8 100%);
  color:var(--blue);
  box-shadow:inset 0 0 0 1px rgba(12,169,223,.18);
  transition:background var(--t),color var(--t),box-shadow var(--t),transform var(--t);
}
.icon-tile svg{width:26px;height:26px;stroke-width:1.75}
.icon-tile--sm{width:56px;height:56px;border-radius:14px}
.icon-tile--sm svg{width:28px;height:28px}
:is(.feature-card,.service-card,.solution-card,.cap-card,.offering-card,.highlight,.contact-item):hover .icon-tile{
  background:var(--grad);color:#fff;box-shadow:0 10px 22px rgba(12,169,223,.3);
}
/* On navy, a pale tile disappears — keep the solid brand tile there. */
.mail-box .icon-tile,.on-dark .icon-tile{background:var(--grad-soft);color:#fff;box-shadow:0 12px 26px rgba(12,169,223,.28)}

/* The reference uses plain rounded corners throughout — clip-path appears
   exactly once in its whole stylesheet — so no cut-corner helpers here. */

/* The theme has no utility bar above the header, so there is no .topbar here. */

/* ---------------------------------------------------------- DECORATIVE SHAPES
   The reference floats PNG shapes behind most sections and keeps them in slow
   perpetual motion (`spinner` 30s/100s, `zoomBig`, `topToBottom`, `float-bob`).
   Drawn here in CSS so nothing extra has to load. */
.shape{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.shp{position:absolute;display:block}

/* Wire-globe outline, rotating slowly — the theme's world.png. */
.shp--globe{
  top:6%;right:-6%;width:min(620px,52vw);aspect-ratio:1;border-radius:50%;
  background:
    repeating-conic-gradient(from 0deg,currentColor 0deg .18deg,transparent .18deg 7.5deg),
    radial-gradient(circle,transparent 30%,currentColor 30% 30.3%,transparent 30.4%),
    radial-gradient(circle,transparent 46%,currentColor 46% 46.3%,transparent 46.4%),
    radial-gradient(circle,transparent 62%,currentColor 62% 62.3%,transparent 62.4%),
    radial-gradient(circle,transparent 49.7%,currentColor 49.7% 50%,transparent 50.1%);
  color:rgba(12,169,223,.16);
  -webkit-mask-image:radial-gradient(circle,#000 62%,transparent 68%);
  mask-image:radial-gradient(circle,#000 62%,transparent 68%);
  animation:spinner 100s infinite linear;
}
.on-dark .shp--globe,.process .shp--globe,.page-hero .shp--globe,
.hero-panel .shp--globe,.cta-band .shp--globe,.footer-cta-inner .shp--globe{color:rgba(150,195,255,.2)}

/* Soft ring that breathes in and out. */
.shp--ring{
  left:-5%;bottom:-18%;width:min(360px,34vw);aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(12,169,223,.22);
  animation:zoomBig 6s infinite linear;
}
.on-dark .shp--ring,.process .shp--ring,.hero-panel .shp--ring,
.cta-band .shp--ring,.footer-cta-inner .shp--ring{border-color:rgba(150,195,255,.24)}

/* Dot cluster drifting up and down. */
.shp--dots{
  right:4%;bottom:8%;width:130px;height:130px;
  background-image:radial-gradient(circle at 2px 2px,rgba(12,169,223,.3) 2px,transparent 0);
  background-size:18px 18px;
  animation:topToBottom 5s infinite linear;
}
.on-dark .shp--dots,.process .shp--dots{background-image:radial-gradient(circle at 2px 2px,rgba(150,195,255,.32) 2px,transparent 0)}

@keyframes spinner{to{transform:rotate(360deg)}}
@keyframes zoomBig{0%,100%{transform:scale(1);opacity:.75}50%{transform:scale(1.16);opacity:.35}}
@keyframes topToBottom{0%,100%{transform:translateY(0)}50%{transform:translateY(26px)}}
@keyframes floatBobY{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}
@keyframes floatBobX{0%,100%{transform:translateX(0)}50%{transform:translateX(20px)}}
@keyframes bounceX{0%,100%{transform:translateX(0)}50%{transform:translateX(14px)}}
/* The theme's hover nudge: the icon slides out and back in from the left. */
@keyframes iconTranslateX{49%{transform:translateX(60%)}50%{opacity:0;transform:translateX(-60%)}51%{opacity:1}}
/* Diagonal shine sweep across project imagery on hover. */
@keyframes projectCardShine{100%{left:125%}}

@media (prefers-reduced-motion:reduce){
  .shp{animation:none!important}
}

/* -------------------------------------------------------------------- HEADER */
.header{background:#fff;position:sticky;top:0;z-index:60;transition:box-shadow var(--t)}
.header.is-stuck{box-shadow:0 6px 30px rgba(10,26,78,.09)}
.header .shell{display:flex;align-items:center;gap:24px;min-height:86px}

.brand{display:inline-flex;align-items:center;gap:12px;font-weight:700;font-size:1.5rem;color:var(--ink);letter-spacing:-.02em}
.brand-mark{width:46px;height:46px;flex:none;display:grid;place-items:center;border-radius:var(--r-card);background:var(--grad-soft);color:#fff;box-shadow:0 10px 24px rgba(12,169,223,.3)}
.brand-mark svg{width:26px;height:26px}
.brand span em{color:var(--blue);margin-left:.28em}
.on-dark .brand,.footer .brand{color:#fff}

.nav{margin-left:auto;display:flex;align-items:center;gap:34px}
.nav a{font-weight:600;color:var(--ink);font-size:1rem;position:relative;padding:6px 0;transition:color var(--t)}
.nav a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--grad);transition:width var(--t)}
.nav a:hover,.nav a.is-active{color:var(--blue)}
.nav a:hover::after,.nav a.is-active::after{width:100%}

.header-actions{display:flex;align-items:center;gap:22px}
.icon-btn{background:none;border:0;padding:6px;cursor:pointer;color:var(--ink);display:grid;place-items:center;transition:color var(--t)}
.icon-btn svg{width:21px;height:21px}
.icon-btn:hover{color:var(--blue)}
.nav-toggle{display:none}

/* Search overlay */

/* ---------------------------------------------------------------------- HERO */
.hero{padding:0 0 clamp(60px,7vw,90px);position:relative}
.hero-panel{
  position:relative;
  background:
    radial-gradient(1100px 620px at 78% 40%,rgba(14,48,113,.55),transparent 62%),
    linear-gradient(115deg,#051129 0%,#0A2250 52%,#0E3071 100%);
  border-radius:var(--r);
  overflow:hidden;
  min-height:600px;
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  align-items:center;
}
.hero-panel::before{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.14) 1px,transparent 0);
  background-size:16px 16px;
  -webkit-mask-image:radial-gradient(circle at 62% 46%,#000 12%,rgba(0,0,0,.45) 38%,transparent 66%);
  mask-image:radial-gradient(circle at 62% 46%,#000 12%,rgba(0,0,0,.45) 38%,transparent 66%);
  opacity:.9;
}
.hero-panel::after{
  content:'';position:absolute;left:-6%;top:8%;width:58%;height:84%;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 2px,transparent 2px 9px);
  -webkit-mask-image:linear-gradient(100deg,#000,transparent 72%);
  mask-image:linear-gradient(100deg,#000,transparent 72%);
  opacity:.55;
}
.hero-copy{position:relative;z-index:2;padding:clamp(56px,5vw,84px) clamp(28px,4vw,64px) clamp(150px,14vw,190px);max-width:660px}
/* The theme's hero title: 60px / 800 / 69px, stepping down at 1399 and 1199. */
.hero-copy h1{color:#fff;font-size:60px;font-weight:800;line-height:69px;margin-bottom:22px}
.hero-copy h1 em{color:var(--blue-300)}
.hero-copy p{color:rgba(255,255,255,.76);font-size:1.05rem;max-width:52ch;margin-bottom:34px}
.hero-actions{display:flex;flex-wrap:wrap;gap:18px;align-items:center}

/* Rating badges under the hero button (`.feedback .infu` in the reference). */
.hero-ratings{display:flex;flex-wrap:wrap;gap:clamp(30px,7vw,107px);padding-top:30px}
.hero-rating{display:grid;grid-template-columns:auto auto;column-gap:10px;align-items:center}
.hero-rating b{font-size:1.6rem;font-weight:800;color:#fff;line-height:1}
.hero-rating .stars{margin:0}
.hero-rating span{grid-column:1/-1;font-size:18px;color:#fff;margin-top:6px}
.hero-media{position:relative;z-index:2;height:100%;min-height:600px;overflow:hidden}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center}
.hero-media::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,#051129 0%,rgba(7,24,58,.85) 22%,rgba(10,34,80,.28) 55%,transparent 100%);
}

/* Cards overlapping the hero */
.hero-cards{
  position:relative;z-index:5;
  margin-top:-110px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);
}
.feature-card{
  background:#fff;border-radius:var(--r-card);padding:34px 30px 36px;
  box-shadow:var(--shadow);
  transition:transform var(--t),box-shadow var(--t);
}
.feature-card:hover{transform:translateY(-10px);box-shadow:var(--shadow-lg)}
.feature-card:hover .icon-tile svg{animation:iconTranslateX .4s forwards}
.feature-card h3{margin:26px 0 14px}
.feature-card p{margin-bottom:20px;font-size:.95rem}
.feature-card .checks{gap:10px}
.feature-card .checks li{font-size:.93rem}

/* ------------------------------------------------------------- ABOUT SPLIT */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,5vw,80px);align-items:center}
.about-media{position:relative;padding:0 0 70px 0}
.about-media img{border-radius:var(--r-card)}
.about-media .img-main{width:72%;height:420px;object-fit:cover;border-radius:var(--r-card)}
.about-media .img-inset{
  position:absolute;right:0;bottom:0;width:56%;height:300px;object-fit:cover;
  border:8px solid #fff;border-radius:var(--r-card);box-shadow:var(--shadow);
}
.play-btn{
  position:absolute;left:72%;top:38%;translate:-50% -50%;z-index:4;
  width:80px;height:80px;border-radius:50%;border:0;cursor:pointer;
  background:#fff;color:var(--blue);display:grid;place-items:center;
  box-shadow:0 18px 40px rgba(10,26,78,.2);
}
.play-btn svg{width:26px;height:26px;margin-left:3px;position:relative;z-index:2}
.play-btn::before,.play-btn::after{
  content:'';position:absolute;inset:-14px;border-radius:50%;
  border:1.5px solid rgba(12,169,223,.4);animation:ripple 2.6s ease-out infinite;
}
.play-btn::after{animation-delay:1.3s}
@keyframes ripple{0%{transform:scale(.85);opacity:.9}100%{transform:scale(1.4);opacity:0}}

.about-cta{display:flex;flex-wrap:wrap;align-items:center;gap:26px;margin-top:34px}
.call-box{display:flex;align-items:center;gap:14px}
.call-box img{width:56px;height:56px;border-radius:50%;object-fit:cover}
.call-box small{display:block;font-size:.86rem}
.call-box b{color:var(--ink);font-size:1.08rem}

/* ------------------------------------------------------------- SERVICE BAND
   One tinted section carrying the years counter, the bars and the three photo
   cards — the reference's `service-1`, which does not split the background. */
.service-band{overflow:hidden}
.service-band .shell{position:relative;z-index:2}
.skills-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(40px,5vw,80px);align-items:start}
.years{font-size:clamp(4rem,8vw,7rem);font-weight:700;line-height:.9;letter-spacing:-.05em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.years-label{font-size:1.15rem;color:var(--ink);font-weight:500;margin:10px 0 26px}
.bars{display:grid;gap:26px;margin-top:34px}
.bar-row{display:grid;gap:10px}
.bar-meta{display:flex;justify-content:space-between;color:var(--ink);font-weight:500;font-size:.95rem}
.bar-track{height:8px;border-radius:99px;background:#fff;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)}
.bar-fill{height:100%;width:0;border-radius:99px;background:var(--grad);transition:width 1.4s cubic-bezier(.4,0,.2,1)}

/* ------------------------------------------------------- HIGHLIGHT CARDS */
.highlights{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);margin-top:clamp(40px,5vw,70px)}
.highlight{position:relative;border-radius:var(--r-card);overflow:visible}
.highlight .shape{border-radius:var(--r-card)}
.highlight .shp--dots{right:-14px;bottom:auto;top:-14px;width:80px;height:80px;opacity:.7}
.highlight:hover .icon-tile svg{animation:iconTranslateX .4s forwards}
.highlight-img{border-radius:var(--r-card);overflow:hidden}
.highlight-img img{width:100%;height:330px;object-fit:cover;transition:transform .6s ease}
.highlight:hover .highlight-img img{transform:scale(1.06)}
.highlight-body{
  position:relative;margin:-90px 22px 0;z-index:2;
  background:#fff;border-radius:var(--r-card);padding:44px 26px 28px;text-align:center;
  box-shadow:var(--shadow);
}
.highlight .icon-tile{position:absolute;top:-32px;left:50%;transform:translateX(-50%)}
.highlight-body h3{margin-bottom:10px}
.highlight-body p{font-size:.95rem}

/* ----------------------------------------------------------- DARK CTA BAND */
.cta-band{
  position:relative;overflow:hidden;color:#fff;text-align:center;
  background:linear-gradient(115deg,#051129 0%,#0A2250 55%,#0E3071 100%);
  border-radius:var(--r);
  padding:clamp(60px,7vw,100px) clamp(24px,5vw,80px);
}
.cta-band::before{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(circle at 1px 1px,rgba(120,205,240,.22) 1px,transparent 0);
  background-size:14px 14px;
  -webkit-mask-image:radial-gradient(120% 90% at 30% 110%,#000,transparent 65%);
  mask-image:radial-gradient(120% 90% at 30% 110%,#000,transparent 65%);
}
.cta-band>*:not(.shape){position:relative;z-index:2}
.cta-band h2{max-width:30ch;margin-inline:auto}
.cta-band-actions{display:flex;flex-wrap:wrap;gap:28px;align-items:center;justify-content:center;margin-top:36px}
.mail-box{display:flex;align-items:center;gap:16px;text-align:left}
.mail-box small{display:block;font-size:.86rem;color:rgba(255,255,255,.6)}
.mail-box b{color:#fff;font-size:1.05rem}

/* -------------------------------------------------------------- WHY CHOOSE */
.why-media{position:relative}
.why-media::before{
  content:'';position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:118%;aspect-ratio:1;border-radius:50%;
  background:
    repeating-conic-gradient(from 0deg,rgba(12,169,223,.14) 0deg 2deg,transparent 2deg 8deg),
    radial-gradient(circle,transparent 52%,rgba(12,169,223,.1) 53% 54%,transparent 55%);
  -webkit-mask-image:radial-gradient(circle,#000 40%,transparent 72%);
  mask-image:radial-gradient(circle,#000 40%,transparent 72%);
}
.why-media img{position:relative;z-index:2;border-radius:var(--r-card)}
.why-features{display:grid;grid-template-columns:1fr 1fr;gap:34px;margin:36px 0}
.why-feature svg{width:38px;height:38px;color:var(--blue);margin-bottom:16px}
.why-feature h3{margin-bottom:8px}
.why-feature p{font-size:.94rem}
.stat-card{display:grid;grid-template-columns:1fr 1fr;gap:24px;background:#fff;border-radius:var(--r-card);padding:34px 36px;box-shadow:var(--shadow)}
.stat b{display:block;font-size:clamp(2.2rem,4vw,3.2rem);line-height:1;font-weight:700;letter-spacing:-.03em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{font-size:.95rem}

/* ------------------------------------------------------------------ LOGOS
   A looping slider in the reference (6 per view, autoplay 3000ms), not a row. */
.logos{background:var(--soft);padding:clamp(40px,5vw,64px) 0}
.logos-title{font-size:1.4rem;font-weight:700;color:var(--ink);margin-bottom:32px;font-family:var(--font-head)}
.logos-slider .slider-track>*{flex:0 0 calc((100% - var(--gap)*5)/6)}
.logo-item{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-weight:700;font-size:1.15rem;color:var(--ink);opacity:.55;
  transition:opacity var(--t),transform var(--t);
}
.logo-item:hover{opacity:1;transform:translateY(-4px)}
.logo-item svg{width:26px;height:26px;color:var(--blue);flex:none}
.logo-item img{max-height:46px;width:auto;object-fit:contain}

/* ------------------------------------------------------------------- TEAM */
.team-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--gap);--per:5}
/* Flex rather than grid so a short last row sits centred. --per = cards per row. */
.team-card{text-align:center;flex:0 0 calc((100% - var(--gap) * (var(--per) - 1)) / var(--per))}
@media (max-width:1199px){.team-grid{--per:3}}
@media (max-width:767px){.team-grid{--per:1}}
.team-photo{border-radius:var(--r-card);overflow:hidden;position:relative}
.team-photo img{width:100%;height:340px;object-fit:cover;transition:transform .6s ease}
.team-card:hover .team-photo img{transform:scale(1.06)}
.team-social{
  position:absolute;left:50%;bottom:18px;translate:-50% 0;
  display:flex;gap:8px;opacity:0;transition:opacity var(--t),translate var(--t);
}
.team-card:hover .team-social{opacity:1;translate:-50% -8px}
.team-social a{width:34px;height:34px;border-radius:var(--r-sm);display:grid;place-items:center;background:#fff;color:var(--blue);transition:background var(--t),color var(--t)}
.team-social a:hover{background:var(--grad);color:#fff}
.team-social a:hover svg{animation:iconTranslateX .4s forwards}
.team-social svg{width:15px;height:15px}
.team-role{color:var(--blue);font-size:.93rem;margin-top:20px}
.team-name{margin-top:2px}

/* ---------------------------------------------------------------- SLIDERS */
.slider{position:relative}
.slider-track{display:flex;gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:8px;
  scrollbar-width:none}
.slider-track::-webkit-scrollbar{display:none}
.slider-track>*{scroll-snap-align:start;flex:0 0 calc((100% - var(--gap)*2)/3)}
.slider-nav{display:flex;gap:14px;justify-content:center;margin-top:40px}
.slider-btn{width:52px;height:52px;border-radius:50%;border:1.5px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;display:grid;place-items:center;transition:all var(--t)}
.slider-btn svg{width:20px;height:20px}
.slider-btn:hover{background:var(--grad);color:#fff;border-color:transparent}
.slider-dots{display:flex;gap:10px;justify-content:center;margin-top:36px}
.slider-dots button{width:9px;height:9px;padding:0;border-radius:50%;border:0;background:var(--ink);opacity:.25;cursor:pointer;transition:all var(--t)}
.slider-dots button.is-active{opacity:1;background:var(--blue);width:11px;height:11px;box-shadow:0 0 0 4px rgba(12,169,223,.18)}

/* Case study card. The reference sweeps a diagonal shine across the image on
   hover (`projectCardShine`) alongside the 1.1 scale. */
.case-card{position:relative;border-radius:var(--r-card);overflow:hidden}
.case-card img{width:100%;height:420px;object-fit:cover;transition:transform .6s ease}
.case-card::before{
  content:'';position:absolute;top:0;left:-75%;z-index:3;
  width:50%;height:100%;pointer-events:none;
  background:linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(255,255,255,.28) 100%);
  transform:skewX(-25deg);
}
.case-card:hover::before{animation:projectCardShine .75s}
.case-card:hover img{transform:scale(1.1)}
.case-body{
  position:absolute;left:20px;right:20px;bottom:20px;
  background:var(--navy-800);color:#fff;border-radius:var(--r-card);padding:24px 26px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
}
.case-body small{color:var(--blue-300);font-size:.8rem;letter-spacing:.09em;text-transform:uppercase;font-weight:600}
.case-body h3{color:#fff;margin-top:6px}
.case-arrow{width:46px;height:46px;flex:none;border-radius:50%;border:1.5px solid rgba(255,255,255,.3);display:grid;place-items:center;transition:all var(--t)}
.case-arrow svg{width:19px;height:19px}
.case-card:hover .case-arrow{background:var(--grad);border-color:transparent}

/* Star row — used by the hero rating badges */
.stars{display:flex;gap:4px;color:var(--star);margin-bottom:18px}
.stars svg{width:17px;height:17px}

/* --------------------------------------------------------------- PROCESS */
.process{
  position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(115deg,#051129 0%,#0A2250 55%,#0E3071 100%);
}
.process::before{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(circle at 1px 1px,rgba(120,205,240,.2) 1px,transparent 0);
  background-size:14px 14px;
  -webkit-mask-image:radial-gradient(130% 80% at 40% 120%,#000,transparent 60%);
  mask-image:radial-gradient(130% 80% at 40% 120%,#000,transparent 60%);
}
.process .shell{position:relative;z-index:2}
.process-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(26px,4vw,50px);align-items:start}
.process-step{position:relative;text-align:center}
.process-step:nth-child(2){margin-top:-56px}
.process-step-img{border-radius:var(--r-card);overflow:hidden}
.process-step-img img{width:100%;height:250px;object-fit:cover}
.process-num{
  position:absolute;top:-24px;left:16px;z-index:3;
  width:56px;height:56px;border-radius:50%;
  background:var(--grad);color:#fff;font-weight:700;font-size:1.15rem;
  display:grid;place-items:center;box-shadow:0 12px 26px rgba(12,169,223,.4);
}
.process-step:nth-child(2) .process-num{left:50%;translate:-50% 0}
.process-step h3{color:#fff;margin:26px 0 12px}
.process-step p{color:rgba(255,255,255,.72);font-size:.95rem}
.process-arrow{position:absolute;bottom:-60px;left:58%;width:min(28%,300px);color:rgba(120,205,240,.5);display:none}
@media (min-width:1024px){.process-arrow{display:block}}

/* --------------------------------------------------------------- CONTACT */
.contact-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(40px,5vw,70px);align-items:start}
.contact-list{display:grid;gap:26px;margin-top:34px}
.contact-item{display:flex;gap:18px;align-items:flex-start}
.contact-item .icon-tile{width:54px;height:54px}
.contact-item .icon-tile svg{width:22px;height:22px}
.contact-item small{display:block;color:var(--blue);font-weight:600;font-size:.92rem}
.contact-item b{color:var(--ink);font-size:1.06rem;font-weight:600;line-height:1.45}

.form-card{
  background:#fff;border-radius:var(--r-card);padding:clamp(30px,4vw,48px);
  box-shadow:var(--shadow);border-right:5px solid var(--blue);
}
.form-card h3{text-align:center;font-size:clamp(1.5rem,2.4vw,2rem);margin-bottom:30px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form-grid .full{grid-column:1/-1}
.field{width:100%;background:var(--soft);border:1.5px solid transparent;border-radius:var(--r-sm);padding:15px 18px;outline:none;transition:border-color var(--t),background var(--t)}
.field::placeholder{color:#93a1ba}
.field:focus{border-color:var(--blue);background:#fff}
textarea.field{resize:vertical;min-height:130px}
.form-card .btn{margin-top:22px}
.form-note{margin-top:16px;font-size:.9rem;color:var(--blue);font-weight:600}
.form-note--error{color:#c0392b}
.field.is-invalid{border-color:#c0392b;background:#fff}
.field-error{margin:6px 2px 0;font-size:.82rem;color:#c0392b;font-weight:600}
.form-field{display:flex;flex-direction:column}
.form-card button[type=submit][disabled]{opacity:.6;cursor:progress}
/* Honeypot: off-screen for people, still fillable by a form-filling bot. */
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ------------------------------------------------------------------ BLOG */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.post-card{background:#fff;border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform var(--t),box-shadow var(--t);display:flex;flex-direction:column}
.post-card:hover{transform:translateY(-8px);box-shadow:var(--shadow)}
.post-card>a{display:block;overflow:hidden}
.post-card img{width:100%;height:230px;object-fit:cover;transition:transform .6s ease}
.post-card:hover img{transform:scale(1.06)}
.post-body{padding:28px 28px 30px;display:flex;flex-direction:column;flex:1}
.post-meta{display:flex;align-items:center;gap:12px;font-size:.88rem;margin-bottom:14px}
.post-meta span:first-child{color:var(--blue);font-weight:600}
.post-meta i{width:6px;height:6px;border-radius:50%;background:var(--line);display:inline-block}
.post-card h3{margin-bottom:14px}
.post-card h3 a:hover{color:var(--blue)}
.post-card p{font-size:.94rem;margin-bottom:20px}
.post-card .link-arrow{margin-top:auto}

/* ------------------------------------------------------------- PAGE HERO
   The theme's breadcrumb banner: the page photo under a blue-to-purple scrim,
   120px tall, left aligned, h1 60px, and the crumb trail below it. */
.page-hero{
  position:relative;overflow:hidden;z-index:9;color:#fff;
  /* Every inner page's banner is the same height at a given screen width,
     whatever it carries (a bare h1, or kicker + lead + button). The height
     steps down per breakpoint through --page-hero-h; content is centred. */
  --page-hero-h:560px;
  min-height:var(--page-hero-h);
  display:flex;align-items:center;
  padding:70px 0;
  background:var(--navy-800) center/cover no-repeat;
}
.page-hero::before{
  content:'';position:absolute;inset:0;z-index:0;
  background:var(--grad-banner);
}
.page-hero>.shape{z-index:1}
.page-hero .shell{position:relative;z-index:2;width:100%}
.page-heading{position:relative;z-index:99}
.page-hero h5{
  position:relative;z-index:1;font-size:18px;line-height:1;font-weight:600;
  color:#fff;margin-bottom:20px;letter-spacing:.04em;text-transform:uppercase;
}
.page-hero h1{color:#fff;font-size:60px;line-height:1.3;position:relative;z-index:9}
.crumbs{margin-top:18px;font-size:18px;font-weight:500;color:#fff;display:flex;align-items:center;gap:10px}
.crumbs svg{width:16px;height:16px}
.crumbs a{transition:color var(--t)}
.crumbs a:hover{color:var(--blue)}
.page-hero-lead{margin-top:20px;max-width:760px;color:rgba(255,255,255,.85);font-size:1.06rem;line-height:1.7}
.page-hero-actions{margin-top:28px}

/* ------------------------------------------------------------ VIDEO BAND
   `video-wrapper video-1`: a tall cover image with the clipped corners the
   reference cuts with an SVG mask, and the rippling play button. */
.video-band .video-image{
  position:relative;height:535px;border-radius:30px;
  background:var(--navy-800) center/cover no-repeat;
  clip-path:polygon(0 104px,104px 0,calc(100% - 118px) 0,100% 94px,100% 100%,0 100%);
}
.video-band .play-btn{left:50%;top:50%;translate:-50% -50%}
@media (max-width:991px){
  .video-band .video-image{height:360px;border-radius:var(--r-card);clip-path:none}
}

/* --------------------------------------------------------------- MARQUEE
   The reference's `.marque-wrapper` text slider: one row looping forever. The
   item list is rendered twice so the wrap is seamless. */
.marquee{background:var(--navy-800);overflow:hidden;padding:26px 0}
.marquee-track{display:flex;width:max-content;animation:marqueeScroll 40s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-item{
  display:inline-flex;align-items:center;gap:35px;padding-right:35px;
  font-family:var(--font-head);font-size:clamp(1.4rem,2.4vw,2rem);font-weight:700;
  color:#fff;white-space:nowrap;
}
.marquee-item svg{width:26px;height:26px;color:var(--blue-300);flex:none}
@keyframes marqueeScroll{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none}}

/* -------------------------------------------------------- SERVICE LISTING */
.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.service-card{background:#fff;border-radius:var(--r-card);padding:36px 30px;box-shadow:var(--shadow-sm);transition:transform var(--t),box-shadow var(--t);scroll-margin-top:120px}
.service-card:hover{transform:translateY(-8px);box-shadow:var(--shadow)}
.service-card:hover .icon-tile svg{animation:iconTranslateX .4s forwards}
.service-card small{display:block;margin:24px 0 8px;font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:var(--blue)}
.service-card h3{margin-bottom:12px}
.service-card p{font-size:.95rem;margin-bottom:20px}
.service-card .checks{gap:9px;margin-bottom:22px}
.service-card .checks li{font-size:.92rem}

.value-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.value-card{background:#fff;border-radius:var(--r-card);padding:36px 30px;box-shadow:var(--shadow-sm)}
.value-card small{font-size:2.2rem;font-weight:700;line-height:1;letter-spacing:-.03em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.value-card h3{margin:16px 0 10px}
.value-card p{font-size:.95rem}

.industry-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.industry-card{background:#fff;border-radius:var(--r-card);padding:34px 30px;box-shadow:var(--shadow-sm);border-top:3px solid transparent;transition:all var(--t)}
.industry-card:hover{border-top-color:var(--blue);transform:translateY(-6px);box-shadow:var(--shadow)}
.industry-card h3{margin-bottom:10px}
.industry-card p{font-size:.95rem}
.industry-card{display:block;color:inherit}
.industry-card .link-arrow{display:flex;margin-top:16px}
/* The whole card is the link, so its arrow reacts to hovering the card. */
.industry-card:hover .link-arrow{gap:15px}

/* Industry detail pages: the six solution cards under "Key Challenges". */
.solution-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.solution-card{background:#fff;border-radius:var(--r-card);padding:34px 30px;box-shadow:var(--shadow-sm);
  transition:transform var(--t),box-shadow var(--t)}
.solution-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.solution-card:hover .icon-tile svg{animation:iconTranslateX .4s forwards}
.solution-card h3{margin:22px 0 10px;font-size:20px}
.solution-card p{font-size:.95rem}

.ribbon{display:block;background:var(--soft);border-left:4px solid var(--blue);border-radius:var(--r-sm);padding:20px 26px;color:var(--ink);font-weight:600;margin-top:28px}

/* Project cards (grid version) */
.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}

/* Industry cards with a photo header. The image bleeds to the card edge and
   eases in on hover; the body keeps the original padding. */
.industry-card--media{padding:0;overflow:hidden;display:flex;flex-direction:column;border-top:0;border:1px solid var(--line)}
.industry-card--media:hover{border-color:rgba(12,169,223,.4)}
.industry-card-media{aspect-ratio:16/10;overflow:hidden;position:relative}
.industry-card-media::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(10,34,80,.35))}
.industry-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.industry-card--media:hover .industry-card-media img{transform:scale(1.06)}
.industry-card--media .industry-card-body{padding:26px 28px 28px;display:flex;flex-direction:column;flex:1}
.industry-card--media .industry-card-body p{flex:1}
.industry-card--media .link-arrow{margin-top:14px}

/* ------------------------------------------------------------- CAREERS
   Open roles as full-width rows, then an open-application panel. */
.job-count{text-align:center;margin:-8px 0 30px;font-size:.95rem;color:var(--body)}
.job-count b{color:var(--blue);font-size:1.05rem}
.job-list{display:grid;gap:20px;max-width:1080px;margin:0 auto}
.job-card{
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:auto 1fr auto;gap:26px;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:18px;padding:30px 34px;
  box-shadow:0 2px 12px rgba(10,34,80,.04);
  transition:transform var(--t),box-shadow var(--t),border-color var(--t);
}
/* Brand rule down the left edge, drawn in on hover. */
.job-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--grad);transform:scaleY(0);transform-origin:top;transition:transform .45s ease}
.job-card:hover{transform:translateY(-4px);box-shadow:0 22px 44px rgba(10,34,80,.11);border-color:rgba(12,169,223,.4)}
.job-card:hover::before{transform:scaleY(1)}
.job-card:hover .icon-tile{background:var(--grad);color:#fff;box-shadow:0 10px 22px rgba(12,169,223,.3)}
.job-card>.icon-tile{align-self:start}
.job-main h3{font-size:22px;margin-bottom:14px}
.job-chips{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-wrap:wrap;gap:10px 26px}
.job-chips li{display:flex;align-items:center;gap:10px;font-weight:600;color:var(--ink);font-size:.93rem}
.job-chips small{display:block;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--body);opacity:.8;line-height:1.2}
.job-chip-icon{width:34px;height:34px;border-radius:10px;background:var(--soft);display:grid;place-items:center;color:var(--blue);flex:none}
.job-chip-icon svg{width:17px;height:17px}
.job-skills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.job-skills span{font-size:.8rem;font-weight:700;letter-spacing:.02em;color:var(--blue);background:#EAF7FC;border:1px solid rgba(12,169,223,.25);border-radius:999px;padding:5px 13px}
.job-desc{font-size:.93rem;margin:0}
.job-apply{align-self:center}
.job-apply .btn{white-space:nowrap}
.job-empty{text-align:center;max-width:640px;margin:0 auto}

.open-application{
  position:relative;overflow:hidden;max-width:1080px;margin:36px auto 0;
  display:grid;grid-template-columns:auto 1fr auto;gap:26px;align-items:center;
  border-radius:20px;padding:34px 38px;color:#fff;
  background:
    radial-gradient(600px 240px at 90% 0%,rgba(12,169,223,.35),transparent 70%),
    linear-gradient(115deg,#051129 0%,#0A2250 55%,#0E3071 100%);
}
.open-application .icon-tile{background:var(--grad-soft);color:#fff;box-shadow:0 12px 26px rgba(12,169,223,.35)}
.open-application h3{color:#fff;font-size:24px;margin-bottom:6px}
.open-application h3 em{font-style:normal;color:var(--blue-300)}
.open-application p{color:rgba(255,255,255,.8);margin:0}
.open-application-actions{display:flex;flex-wrap:wrap;gap:12px}
.open-application .btn--ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.5)}
.open-application .btn--ghost:hover{box-shadow:inset 0 0 0 2px #fff}

@media (max-width:991px){
  .job-card{grid-template-columns:auto 1fr}
  .job-apply{grid-column:2}
  .open-application{grid-template-columns:auto 1fr}
  .open-application-actions{grid-column:1/-1}
}
@media (max-width:575px){
  .job-card{grid-template-columns:1fr;padding:26px 22px;gap:18px}
  .job-apply{grid-column:auto}
  .job-apply .btn{width:100%;justify-content:center}
  .open-application{grid-template-columns:1fr;padding:28px 24px}
  .open-application-actions .btn{flex:1;justify-content:center}
}

/* ------------------------------------------------------- HERO SLIDER
   The full-bleed home hero. Slides are stacked and crossfaded; only the
   active one takes pointer events, so the buttons behind cannot be clicked.
   --hero-foot is the space reserved under the buttons for the dots and the
   overlapping feature cards. The copy's bottom padding AND the dots' offset
   both derive from it, so the two can never drift apart at a breakpoint. */
.hero--slider{--hero-foot:200px;padding:0 0 clamp(60px,7vw,90px)}
/* Every slide shares one grid cell, so the band is as tall as the TALLEST
   slide — a slide with longer copy can never run into the dots. */
.hero-slides{position:relative;isolation:isolate;display:grid}
.hero-slide{
  grid-area:1/1;position:relative;opacity:0;pointer-events:none;
  background-size:cover;background-position:center;
  display:grid;align-items:center;
  transition:opacity .8s ease;
}
.hero-slide.is-active{opacity:1;pointer-events:auto;z-index:2}
.hero-slide::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(5,17,41,.94) 0%,rgba(10,34,80,.82) 42%,rgba(10,34,80,.28) 78%,rgba(10,34,80,.12) 100%);
}
.hero-slide>.shell{position:relative;z-index:2}
.hero-slide-copy{
  max-width:660px;color:#fff;
  padding:clamp(120px,13vw,180px) 0 var(--hero-foot);
}
.hero-badge{
  display:inline-flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);
  border-radius:999px;padding:9px 18px;margin-bottom:26px;
  font-size:.86rem;font-weight:600;color:rgba(255,255,255,.92);
  backdrop-filter:blur(6px);
}
.hero-badge i{width:8px;height:8px;border-radius:50%;background:var(--blue-300);animation:heroPulse 2s ease-in-out infinite}
@keyframes heroPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.7)}}
.hero-slide-copy h1{color:#fff;font-size:clamp(38px,4.6vw,64px);line-height:1.08;margin-bottom:22px}
/* The emphasised phrase takes its own line, as the reference does. */
.hero-slide-copy h1 em{display:block;font-style:normal;color:var(--blue-300)}
.hero-slide-copy p{color:rgba(255,255,255,.82);font-size:1.08rem;max-width:560px;margin-bottom:34px}
.hero-slide-copy .hero-actions{display:flex;flex-wrap:wrap;gap:16px}
.hero-slide-copy .btn--ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)}
.hero-slide-copy .btn--ghost:hover{box-shadow:inset 0 0 0 2px #fff}

/* Dots and arrows, sitting over the foot of the slide. */
/* Zero-height, sitting flush with the foot of .hero-slides — so the controls
   below measure their offset from the bottom of the photo, not from below the
   feature cards that overlap it. */
.hero-ui-wrap{height:0}
/* Left in normal flow inside the shell so it lines up with the slide copy —
   positioning it absolutely would measure from the shell's padding edge and
   sit ~50px to the left of the text. The negative margin lifts it onto the
   photo; the wrapper is height:0, so nothing below moves. */
.hero-ui{
  position:relative;z-index:6;top:calc(28px - var(--hero-foot));
  display:flex;align-items:center;gap:22px;pointer-events:none;
}
.hero-ui>*{pointer-events:auto}
.hero-dots{display:flex;align-items:center;gap:9px}
.hero-dot{
  width:11px;height:11px;padding:0;border:0;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.42);transition:width var(--t),background var(--t);
}
.hero-dot.is-active{width:30px;background:var(--blue-300)}
.hero-dot:focus-visible{outline:2px solid #fff;outline-offset:3px}
.hero-arrows{display:flex;gap:10px}
.hero-arrow{
  width:42px;height:42px;border-radius:50%;cursor:pointer;display:grid;place-items:center;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);color:#fff;
  transition:background var(--t),transform var(--t);
}
.hero-arrow:hover{background:var(--blue);border-color:transparent;transform:translateY(-2px)}
.hero-arrow svg{width:18px;height:18px}
.hero-arrow:focus-visible{outline:2px solid #fff;outline-offset:3px}
.hero--slider .hero-cards{margin-top:-96px}

/* Visible to screen readers only. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

@media (max-width:991px){
  .hero--slider{--hero-foot:190px}
  .hero-slide-copy{padding-top:clamp(100px,14vw,140px)}
}
@media (max-width:767px){
  .hero--slider{--hero-foot:150px}
  .hero-slide-copy{max-width:none;padding-top:96px}
  .hero-slide-copy p{font-size:1rem}
  .hero-slide-copy .hero-actions{gap:12px}
  .hero-slide-copy .btn{width:100%;justify-content:center}
  .hero-ui{gap:16px}
  .hero--slider .hero-cards{margin-top:-56px}
}
/* No feature cards (`showHeroCards: false`): reserve only enough room under
   the buttons for the dots, and drop the white strip the cards used to sit on. */
.hero--slider.hero--no-cards{--hero-foot:120px;padding-bottom:0}
@media (max-width:767px){
  .hero--slider.hero--no-cards{--hero-foot:100px}
}
@media (prefers-reduced-motion:reduce){
  .hero-slide{transition:none}
  .hero-badge i{animation:none}
}

/* ------------------------------------------------ END-TO-END SAP SERVICES
   Short cards: one line each, linking to that offering's own detail page.
   Deliberately lighter than .service-card — this band is a directory, not a
   pitch, so it stays quiet next to the four practice cards above it. */
.offering-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.offering-card{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;color:inherit;text-decoration:none;
  background:#fff;border-radius:16px;padding:28px 26px 24px;
  border:1px solid var(--line);box-shadow:0 2px 10px rgba(10,34,80,.04);
  transition:transform var(--t),box-shadow var(--t),border-color var(--t);
}
/* A brand-gradient rule slides in along the top edge on hover. */
.offering-card::before{
  content:'';position:absolute;left:0;top:0;height:3px;width:100%;
  background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .45s ease;
}
.offering-card:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(10,34,80,.12);border-color:rgba(12,169,223,.4)}
.offering-card:hover::before{transform:scaleX(1)}
.offering-card h3{margin:20px 0 8px;font-size:18px;line-height:1.3}
.offering-card p{font-size:.92rem;line-height:1.6;margin-bottom:18px;flex:1}
.offering-card .link-arrow{margin-top:auto}
.offering-card .link-arrow svg{transition:transform var(--t)}
.offering-card:hover .link-arrow svg{transform:translateX(4px)}
.offering-cta{display:flex;justify-content:center;margin-top:clamp(36px,4vw,52px)}

/* A capability card that links out to its own page. */
.cap-card--link{display:block;color:inherit;text-decoration:none}

/* A short list (fewer cards than columns) keeps the card width and sits
   centred, rather than leaving the right-hand columns empty. */
@media (min-width:1200px){
  .offering-grid:has(> :last-child:nth-child(2)){grid-template-columns:repeat(2,calc((100% - 3 * var(--gap)) / 4));justify-content:center}
  .offering-grid:has(> :last-child:nth-child(3)){grid-template-columns:repeat(3,calc((100% - 3 * var(--gap)) / 4));justify-content:center}
}
@media (min-width:992px) and (max-width:1199px){
  .offering-grid:has(> :last-child:nth-child(2)){grid-template-columns:repeat(2,calc((100% - 2 * var(--gap)) / 3));justify-content:center}
}
@media (max-width:1199px){.offering-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:991px){.offering-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:575px){.offering-grid{grid-template-columns:1fr}}

/* -------------------------------------------------- SERVICE DETAIL PAGES
   The bands used by service-<slug>.html. Everything here reuses the existing
   card language (--r-card, --shadow-sm, the cyan gradient numerals) so a
   service page reads as the same family as the industry detail pages. */

/* A card that is itself a link. .service-card already styles the box; this
   only removes the anchor's own colour and underline. */
.service-card--link{display:block;color:inherit;text-decoration:none}
.service-card--link:hover{border-top-color:var(--blue)}

/* Overview: image one side, the argument the other. */
.svc-overview{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(36px,4.5vw,72px);align-items:center}
.svc-overview-media img{width:100%;height:100%;max-height:520px;object-fit:cover;border-radius:var(--r-card);box-shadow:var(--shadow)}
.svc-overview .lead{font-size:1.1rem;color:var(--ink);font-weight:600}
.svc-overview p{margin-bottom:16px}
.svc-overview .checks{margin-top:22px}

/* Capabilities: the detail behind each bullet on the services card. */
.cap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.cap-card{background:#fff;border-radius:var(--r-card);padding:34px 30px;box-shadow:var(--shadow-sm);
  border-top:3px solid transparent;transition:transform var(--t),box-shadow var(--t),border-color var(--t)}
.cap-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-top-color:var(--blue)}
.cap-card:hover .icon-tile svg{animation:iconTranslateX .4s forwards}
.cap-card h3{margin:22px 0 10px;font-size:20px}
.cap-card p{font-size:.95rem}
.cap-points{margin-top:18px;padding-top:18px;border-top:1px solid var(--line);gap:9px}
.cap-points li{font-size:.9rem}

/* Metrics: the same counters as .stat-card, on the dark ground. */
.metric-band{background:linear-gradient(115deg,#051129 0%,#0A2250 55%,#0E3071 100%)}
.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.metric{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);
  border-radius:var(--r-card);padding:32px 28px;text-align:center}
.metric b{display:block;font-size:clamp(2.1rem,3.6vw,3rem);line-height:1;font-weight:700;letter-spacing:-.03em;
  background:linear-gradient(84deg,#0CA9DF 0%,#77D7F8 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.metric span{display:block;margin-top:12px;font-size:.94rem;color:rgba(255,255,255,.78)}

/* Approach: a numbered timeline, connected down the left. */
.timeline{display:grid;gap:26px;position:relative;max-width:960px;margin:0 auto}
.tl-step{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:start;
  background:#fff;border-radius:var(--r-card);padding:28px 32px;box-shadow:var(--shadow-sm);position:relative}
.tl-step::after{content:'';position:absolute;left:calc(32px + 30px);top:100%;width:2px;height:26px;background:var(--line)}
.tl-step:last-child::after{display:none}
.tl-num{display:grid;place-items:center;width:60px;height:60px;border-radius:50%;
  background:var(--grad);color:#fff;font-weight:700;font-size:1.15rem;font-family:var(--font-head)}
.tl-step h3{margin-bottom:8px;font-size:20px}
.tl-step p{font-size:.95rem;margin:0}

/* Deliverables: two or three checklist columns. */
.deliver-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--gap)}
.deliver-col{background:#fff;border-radius:var(--r-card);padding:34px 32px;box-shadow:var(--shadow-sm);border-top:3px solid var(--blue)}
.deliver-col h3{margin-bottom:20px;font-size:20px}
.deliver-col .checks li{font-size:.94rem}

@media (max-width:1199px){
  .cap-grid{grid-template-columns:repeat(2,1fr)}
  .metric-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:991px){
  .svc-overview{grid-template-columns:1fr}
  .svc-overview-media img{max-height:380px}
}
@media (max-width:767px){
  .cap-grid,.metric-grid{grid-template-columns:1fr}
  .tl-step{grid-template-columns:1fr;gap:16px;padding:26px 24px}
  .tl-step::after{display:none}
  .tl-num{width:52px;height:52px;font-size:1rem}
}

/* --------------------------------------------------------------- FOOTER */
.footer-cta{position:relative;z-index:2;margin-bottom:-90px}
/* When a page ends on a dark band (About and Services end on the process
   band) the card would sit flush against it; give it air. After a white
   section the section's own bottom padding already does that. */
main:has(> section:last-child:is(.on-dark,.cta-band)) + .footer-cta{margin-top:clamp(56px,7vw,100px)}
.footer-cta-inner{
  position:relative;overflow:hidden;border-radius:var(--r);color:#fff;
  background:linear-gradient(115deg,#051129 0%,#0A2250 55%,#0E3071 100%);
  display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:clamp(28px,4vw,56px);
  /* Equal padding on every side: the photo is a framed panel, centred against
     the copy, not a cut-out standing on the bottom edge. */
  padding:clamp(36px,4.5vw,56px) clamp(28px,4vw,56px);
}
.footer-cta-inner::before{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(circle at 1px 1px,rgba(120,205,240,.2) 1px,transparent 0);
  background-size:14px 14px;
  -webkit-mask-image:radial-gradient(110% 90% at 70% 50%,#000,transparent 62%);
  mask-image:radial-gradient(110% 90% at 70% 50%,#000,transparent 62%);
}
.footer-cta-copy{position:relative;z-index:2}
.footer-cta-copy h2{margin-bottom:28px;max-width:20ch}
.footer-cta-media{position:relative;z-index:2}
.footer-cta-media img{
  display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:center;
  border-radius:var(--r-card);box-shadow:0 24px 50px rgba(0,0,0,.35);
}

.footer{background:#fff;padding:calc(90px + clamp(60px,7vw,110px)) 0 0}
.footer-grid{display:grid;grid-template-columns:1.35fr 1fr 1fr 1.2fr;gap:clamp(30px,4vw,56px);padding-bottom:clamp(50px,6vw,80px)}
.footer .brand{color:var(--ink)}
.footer-about p{margin:24px 0 26px;font-size:.96rem}
.footer h4{font-size:1.22rem;margin-bottom:26px}
.footer-links{display:grid;gap:14px}
.footer-links a{color:var(--blue);font-size:.97rem;transition:padding-left var(--t)}
.footer-links a:hover{padding-left:6px}
.subscribe{display:flex;background:var(--soft);border-radius:var(--r-sm);padding:6px;margin-top:6px}
.subscribe input{flex:1;background:none;border:0;outline:none;padding:12px 14px;font-size:.95rem}
.subscribe button{width:46px;height:46px;flex:none;border:0;border-radius:var(--r-sm);background:var(--grad);color:#fff;cursor:pointer;display:grid;place-items:center}
.subscribe button svg{width:18px;height:18px}
.subscribe button:disabled{opacity:.6;cursor:progress}
.subscribe input:disabled{opacity:.7}
.subscribe input.is-invalid{box-shadow:inset 0 0 0 1.5px #c0392b;border-radius:var(--r-sm)}
/* The footer note sits directly under the field, so it needs less air than the
   contact form's. */
.form-note--sm{margin-top:10px;font-size:.85rem}
.footer-social{display:flex;gap:8px;margin-top:28px;margin-left:-9px}
/* The icon is 17px but the link needs a 36px hit area to be comfortably
   clickable (and to clear the 24px minimum target size). Negative margin on the
   row keeps the icons optically aligned with the text above. */
.footer-social a{
  width:36px;height:36px;display:grid;place-items:center;border-radius:50%;
  color:var(--body);transition:color var(--t),transform var(--t),background var(--t);
}
.footer-social svg{width:17px;height:17px}
.footer-social a:hover{color:var(--blue);background:var(--soft-2);transform:translateY(-3px)}
.footer-social a:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.footer-contact{display:grid;gap:22px}
.footer-bar{background:var(--navy-900);color:rgba(255,255,255,.66);text-align:center;padding:24px 0;font-size:.94rem}

/* -------------------------------------------------- SCROLL REVEAL (WOW) --
   The reference ships a trimmed animate.css: fadeInUp / fadeInLeft /
   fadeInRight, 20px offset, 1s, fill-mode both, driven by WOW.js with
   data-wow-delay steps of 200-800ms. Reproduced here with IntersectionObserver
   so no library is needed. */
.reveal{opacity:0;will-change:opacity,transform}
.reveal.is-in{animation-duration:1s;animation-fill-mode:both;animation-name:fadeInUp}
.reveal--left.is-in{animation-name:fadeInLeft}
.reveal--right.is-in{animation-name:fadeInRight}
@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:translateY(0)}}
@keyframes fadeInLeft{0%{opacity:0;transform:translateX(-20px)}100%{opacity:1;transform:translateX(0)}}
@keyframes fadeInRight{0%{opacity:0;transform:translateX(20px)}100%{opacity:1;transform:translateX(0)}}

/* ------------------------------------------------- SPLIT-TEXT HEADINGS --
   The reference runs GSAP SplitText over every section <h2> (`.split-text
   left|right`): chars start at opacity 0 / x +-50px and settle in a 0.02s
   stagger over 0.4s, triggered at "top 90%". Same result, hand-rolled: the
   heading is split into per-character spans and each gets a transition-delay. */
.split-text{display:block}
/* One word = one atomic inline-block, so lines never break between chars.
   max-width lets a word too long for the container wrap inside itself
   rather than overflow the page. */
.split-text .sw{display:inline-block;max-width:100%}
.split-text .sc{
  display:inline-block;white-space:pre;
  opacity:0;transform:translateX(50px);
  transition:opacity .4s ease-out,transform .4s ease-out;
  will-change:opacity,transform;
}
.split-text.left .sc{transform:translateX(-50px)}
.split-text.up .sc{transform:translateY(80px)}
.split-text.is-in .sc{opacity:1;transform:none}
/* <em> accents keep their colour through the split. */
.split-text .sc-em{color:var(--blue)}
.on-dark .split-text .sc-em,.hero-copy .split-text .sc-em{color:var(--blue-300)}
.page-hero .split-text .sc-em,.page-hero h1 em{color:var(--blue-200)}

/* ------------------------------------------------------------- TO TOP --
   The reference wraps the button in an SVG whose stroke-dashoffset tracks
   page-scroll progress, and reveals it past 50px. */
.to-top{
  position:fixed;right:25px;bottom:35px;z-index:80;
  width:50px;height:50px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:#fff;color:var(--blue);display:grid;place-items:center;
  box-shadow:0 8px 26px rgba(10,34,80,.14);
  opacity:0;visibility:hidden;transform:translateY(15px);
  transition:all .4s ease-in-out;
}
.to-top.is-visible{opacity:1;visibility:visible;transform:translateY(0)}
.to-top:hover{color:var(--blue-300)}
.to-top svg.to-top-icon{width:17px;height:17px;position:relative;z-index:2}
.to-top svg.scroll-circle{position:absolute;inset:0;width:50px;height:50px;fill:none;pointer-events:none}
.to-top svg.scroll-circle path{
  fill:none;stroke:var(--blue);stroke-width:3;
  transition:stroke-dashoffset 10ms linear;
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1}
  .split-text .sc{opacity:1;transform:none}
}

/* --------------------------------------------------------------- RESPONSIVE
   Breakpoints follow the theme's own bootstrap steps: 1399 / 1199 / 991 /
   767 / 575, with the type scale stepping down alongside the layout. */
@media (max-width:1399px){
  h1{font-size:64px}
  h2{font-size:48px}
  .hero-copy h1{font-size:50px;line-height:60px}
  .page-hero h1{font-size:50px}
  .logos-slider .slider-track>*{flex-basis:calc((100% - var(--gap)*4)/5)}
}
@media (max-width:1199px){
  h1{font-size:52px}
  h2{font-size:42px}
  .hero-copy h1{font-size:45px;line-height:60px}
  .page-hero{--page-hero-h:500px;padding:60px 0}
  .page-hero h1{font-size:44px}
  .hero-cards{grid-template-columns:repeat(2,1fr);margin-top:-90px}
  .team-grid,.service-grid,.value-grid{grid-template-columns:repeat(2,1fr)}
  .slider-track>*{flex-basis:calc((100% - var(--gap))/2)}
  .logos-slider .slider-track>*{flex-basis:calc((100% - var(--gap)*3)/4)}
  .skills-grid{gap:40px}
}
@media (max-width:991px){
  .nav-toggle{display:grid}
  .nav{
    position:fixed;inset:0 0 0 auto;width:min(340px,86vw);
    background:#fff;flex-direction:column;align-items:stretch;gap:0;
    padding:96px 30px 30px;box-shadow:-20px 0 60px rgba(10,26,78,.18);
    transform:translateX(100%);transition:transform var(--t);z-index:120;overflow-y:auto;
  }
  .nav.is-open{transform:none}
  .nav a{padding:15px 0;border-bottom:1px solid var(--line)}
  .nav a::after{display:none}
  .nav-close{position:absolute;top:28px;right:26px}
  .nav-backdrop{position:fixed;inset:0;background:rgba(5,17,41,.5);z-index:110;opacity:0;visibility:hidden;transition:all var(--t)}
  .nav-backdrop.is-open{opacity:1;visibility:visible}
  .header .btn{display:none}

  .hero-panel{grid-template-columns:1fr;min-height:0}
  .hero-media{min-height:0;height:340px;order:-1}
  .split,.skills-grid,.contact-grid,.section-head--split,.footer-cta-inner{grid-template-columns:1fr}
  .section-head--split{gap:20px}
  .highlights,.process-grid,.post-grid,.industry-grid,.solution-grid,.project-grid{grid-template-columns:repeat(2,1fr)}
  .process-step:nth-child(2){margin-top:0}
  .footer-grid{grid-template-columns:repeat(2,1fr)}
  .footer-cta-media{width:100%}
  .why-media{max-width:480px;margin-inline:auto}
  .logos-slider .slider-track>*{flex-basis:calc((100% - var(--gap)*2)/3)}
}
@media (max-width:767px){
  :root{--gap:20px}
  h1{font-size:40px}
  h2{font-size:36px}
  h2.split-text{font-size:38px}
  .hero-copy h1{font-size:38px;line-height:1.25}
  .page-hero{--page-hero-h:470px;padding:48px 0}
  .page-hero h1{font-size:36px}
  .hero-cards,.highlights,.process-grid,.post-grid,.team-grid,.service-grid,.value-grid,.industry-grid,.solution-grid,.project-grid,.form-grid,.why-features,.stat-card{grid-template-columns:1fr}
  .logos-slider .slider-track>*{flex-basis:calc((100% - var(--gap))/2)}
  .slider-track>*{flex-basis:100%}
  .about-media{padding:0}
  .about-media .img-main{width:100%}
  .about-media .img-inset{display:none}
  .play-btn{left:50%;top:40%;translate:-50% -50%}
  .footer-grid{grid-template-columns:1fr}
  .case-body{flex-direction:column;align-items:flex-start}
}
@media (max-width:575px){
  h1{font-size:34px}
  h2{font-size:32px}
  h2.split-text{font-size:32px}
  h3{font-size:20px}
  .hero-copy h1{font-size:32px}
  .page-hero{--page-hero-h:460px;padding:40px 0}
  .page-hero h1{font-size:30px}
  .hero-ratings{flex-direction:column;gap:20px}
  .logos-slider .slider-track>*{flex-basis:100%}
  .crumbs,.page-hero h5{font-size:15px}
}

/* ==========================================================================
   NAV DROPDOWN
   ========================================================================== */
.nav-item{position:relative}
.nav-item>button{
  display:inline-flex;align-items:center;gap:6px;
  background:none;border:0;padding:6px 0;cursor:pointer;
  font-weight:600;font-size:1rem;color:var(--ink);position:relative;
  transition:color var(--t);
}
.nav-item>button::after{content:'';position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--grad);transition:width var(--t)}
.nav-item:hover>button,.nav-item>button.is-active{color:var(--blue)}
.nav-item:hover>button::after,.nav-item>button.is-active::after{width:100%}
.nav-item>button svg{width:14px;height:14px;transition:transform var(--t)}
.nav-item.is-open>button svg{transform:rotate(180deg)}

.submenu{
  position:absolute;top:calc(100% + 18px);left:50%;translate:-50% 0;
  min-width:230px;background:#fff;border-radius:var(--r-card);padding:8px 0;
  box-shadow:0 24px 60px rgba(10,26,78,.16);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity var(--t),visibility var(--t),transform var(--t);
  z-index:70;
}
.nav-item:hover>.submenu,.nav-item.is-open>.submenu{opacity:1;visibility:visible;transform:none}
.submenu a{display:block;padding:13px 26px;font-weight:500;font-size:.97rem;border-bottom:1px solid var(--line)}
.submenu a:last-child{border-bottom:0}
.submenu a::after{display:none}
.submenu a:hover{color:var(--blue);background:var(--soft)}

@media (max-width:991px){
  .nav-item{display:block}
  .nav-item>button{width:100%;justify-content:space-between;padding:15px 0;border-bottom:1px solid var(--line)}
  .submenu{
    position:static;translate:none;transform:none;min-width:0;box-shadow:none;
    background:var(--soft);border-radius:8px;padding:0;margin:0;
    max-height:0;overflow:hidden;opacity:1;visibility:visible;
    transition:max-height var(--t),margin var(--t);
  }
  .nav-item.is-open>.submenu{max-height:420px;margin:10px 0 14px}
  .nav-item:hover>.submenu{max-height:0}
  .nav-item.is-open:hover>.submenu{max-height:420px}
  .submenu a{padding:12px 18px}
}

/* ==========================================================================
   ANIMATED CURSOR
   --------------------------------------------------------------------------
   Matches the reference: a small solid dot that BALLOONS to 70px at 30%
   opacity over anything clickable, and a 30px outline ring that trails at
   0.08s and fades out on hover. (Note this is the inverse of the more common
   grow-the-ring pattern.)
   ========================================================================== */
.cursor-inner,.cursor-outer{
  position:fixed;top:0;left:0;border-radius:50%;pointer-events:none;
  visibility:hidden;will-change:transform;
}
.cursor-inner{
  width:6px;height:6px;margin:-3px 0 0 -3px;z-index:10000001;
  background:var(--blue);
  transition:width .3s ease-in-out,height .3s ease-in-out,margin .3s ease-in-out,opacity .3s ease-in-out,background .3s ease-in-out;
}
.cursor-inner.cursor-hover{width:70px;height:70px;margin:-35px 0 0 -35px;opacity:.3}
.cursor-outer{
  width:30px;height:30px;margin:-15px 0 0 -15px;z-index:10000000;
  border:1px solid var(--blue);box-sizing:border-box;opacity:.5;
  transition:all .08s ease-out;
}
.cursor-outer.cursor-hover{opacity:0}
/* Over the dark panels the cursor switches to the light accent. */
.cursor-inner.on-dark-area{background:var(--blue-300)}
.cursor-outer.on-dark-area{border-color:var(--blue-300)}
@media (hover:none),(pointer:coarse),(prefers-reduced-motion:reduce){
  .cursor-inner,.cursor-outer{display:none}
}

/* ==========================================================================
   FAQ / PRICING
   ========================================================================== */
.faq-list{display:grid;gap:16px;max-width:900px;margin-inline:auto}
.faq-item{background:#fff;border-radius:var(--r-card);box-shadow:var(--shadow-sm);overflow:hidden;transition:box-shadow var(--t)}
.faq-item.is-open{box-shadow:var(--shadow)}
.faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:none;border:0;cursor:pointer;text-align:left;
  padding:24px 28px;font-weight:600;font-size:1.06rem;color:var(--ink);
  transition:color var(--t);
}
.faq-item.is-open .faq-q{color:var(--blue)}
.faq-q span{
  width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--soft);color:var(--blue);transition:all var(--t);
}
.faq-item.is-open .faq-q span{background:var(--grad);color:#fff;transform:rotate(180deg)}
.faq-q svg{width:16px;height:16px}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.4,0,.2,1)}
.faq-a p{padding:0 28px 26px;font-size:.98rem}

.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.price-card{
  background:#fff;border-radius:var(--r-card);padding:40px 34px;
  box-shadow:var(--shadow-sm);position:relative;
  display:flex;flex-direction:column;
  transition:transform var(--t),box-shadow var(--t);
}
.price-card:hover{transform:translateY(-8px);box-shadow:var(--shadow)}
.price-card.is-featured{
  background:linear-gradient(115deg,#051129 0%,#0A2250 55%,#0E3071 100%);color:rgba(255,255,255,.76);
}
.price-card.is-featured h3,.price-card.is-featured .price-amount{color:#fff}
.price-card.is-featured .checks li{color:rgba(255,255,255,.8)}
.price-badge{
  position:absolute;top:20px;right:20px;
  background:var(--grad);color:#fff;font-size:.74rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;padding:6px 14px;border-radius:99px;
}
.price-card small{display:block;font-size:.8rem;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:var(--blue);margin-bottom:12px}
.price-amount{font-size:clamp(2.4rem,4vw,3.2rem);font-weight:700;letter-spacing:-.03em;line-height:1;color:var(--ink);margin:18px 0 4px}
.price-amount sup{font-size:.42em;top:-.7em;position:relative;font-weight:600}
.price-period{font-size:.92rem;margin-bottom:28px}
.price-card .checks{margin-bottom:32px}
.price-card .btn{margin-top:auto;justify-content:center}
@media (max-width:991px){.price-grid{grid-template-columns:1fr}}

/* ==========================================================================
   VIDEO LIGHTBOX  (stands in for magnific-popup)
   ========================================================================== */
.video-popup{
  position:fixed;inset:0;z-index:300;
  background:rgba(2,8,66,.9);
  display:grid;place-items:center;padding:24px;
  opacity:0;visibility:hidden;transition:opacity var(--t),visibility var(--t);
}
.video-popup.is-open{opacity:1;visibility:visible}
.video-popup-frame{width:min(1000px,92vw);aspect-ratio:16/9;background:#000;border-radius:var(--r-card);overflow:hidden}
.video-popup-frame iframe{width:100%;height:100%;border:0;display:block}
.video-popup-close{
  position:absolute;top:26px;right:30px;
  background:none;border:0;padding:8px;cursor:pointer;color:#fff;
}
.video-popup-close svg{width:26px;height:26px}

/* ==========================================================================
   PRELOADER
   --------------------------------------------------------------------------
   The reference's preloader: a spinning ring, the wordmark spelled out one
   letter at a time (each letter flips in on rotateY with a 0.2s step), and a
   four-column white curtain that wipes open once loading finishes.
   ========================================================================== */
.preloader{
  position:fixed;inset:0;z-index:9999999;
  display:flex;align-items:center;justify-content:center;cursor:default;
}
.preloader-inner{position:relative;z-index:1000;text-align:center;padding:0 20px}
.preloader-ring{
  width:7.5em;height:7.5em;margin:0 auto 1.5em;
  border-radius:50%;
  border:3px solid rgba(0,0,0,.2);border-top-color:var(--blue-300);
  animation:pre-spin 1s linear infinite;
}
@keyframes pre-spin{to{transform:rotate(360deg)}}

.preloader-word{
  font:700 2.5em/1.1 var(--font-head);
  text-align:center;user-select:none;white-space:nowrap;
  color:var(--blue-300);
}
.preloader-word .pl-letter{position:relative;display:inline-block}
.preloader-word .pl-letter::before{
  content:attr(data-letter);
  position:absolute;left:0;top:-3px;
  color:var(--ink);font-family:var(--font-head);
  opacity:0;transform:rotateY(-90deg);
  animation:letters-loading 4s infinite;
}
.preloader-word .pl-letter:nth-child(2)::before{animation-delay:.2s}
.preloader-word .pl-letter:nth-child(3)::before{animation-delay:.4s}
.preloader-word .pl-letter:nth-child(4)::before{animation-delay:.6s}
.preloader-word .pl-letter:nth-child(5)::before{animation-delay:.8s}
.preloader-word .pl-letter:nth-child(6)::before{animation-delay:1s}
.preloader-word .pl-letter:nth-child(7)::before{animation-delay:1.2s}
.preloader-word .pl-letter:nth-child(8)::before{animation-delay:1.4s}
.preloader-word .pl-letter:nth-child(9)::before{animation-delay:1.6s}
.preloader-word .pl-letter:nth-child(10)::before{animation-delay:1.8s}
.preloader-word .pl-letter:nth-child(11)::before{animation-delay:2s}
.preloader-word .pl-letter:nth-child(12)::before{animation-delay:2.2s}
.preloader-word .pl-letter:nth-child(13)::before{animation-delay:2.4s}
@keyframes letters-loading{
  0%,75%,100%{opacity:0;transform:rotateY(-90deg)}
  25%,50%    {opacity:1;transform:rotateY(0)}
}

.preloader-label{
  margin-top:14px;font-size:15px;font-weight:600;
  text-transform:uppercase;letter-spacing:8px;color:var(--blue-300);
}

/* Four-column curtain, wiped open left-to-right on completion. */
.preloader-curtain{position:fixed;inset:0;z-index:1;display:flex;pointer-events:none}
.preloader-curtain span{flex:1;height:100%;background:#fff;transition:width 800ms cubic-bezier(.77,0,.175,1)}
.preloader.is-done .preloader-inner{opacity:0;transition:opacity .3s ease-out}
.preloader.is-done .preloader-curtain span{flex:0 1 0;width:0;transition:all .7s .3s cubic-bezier(.1,.1,.1,1)}

/* ==========================================================================
   HERO ENTRANCE
   --------------------------------------------------------------------------
   The reference flips each hero line in on the X axis from -80deg with a
   "top center -50" origin behind a 400px perspective, 0.1s apart. */
.hero-anim{perspective:400px}
.hero-anim>*{opacity:0;transform:rotateX(-80deg);transform-origin:top center -50px}
.is-loaded .hero-anim>*{animation:hero-in 1s cubic-bezier(.16,.84,.44,1) forwards}
.is-loaded .hero-anim>*:nth-child(1){animation-delay:.70s}
.is-loaded .hero-anim>*:nth-child(2){animation-delay:.80s}
.is-loaded .hero-anim>*:nth-child(3){animation-delay:.90s}
.is-loaded .hero-anim>*:nth-child(4){animation-delay:1.00s}
.is-loaded .hero-anim>*:nth-child(5){animation-delay:1.10s}
.is-loaded .hero-anim>*:nth-child(n+6){animation-delay:1.20s}
@keyframes hero-in{to{opacity:1;transform:none}}

/* The reference brings the hero image in on a plain `wow fadeInUp` at 300ms. */
.hero-media img{opacity:0}
.is-loaded .hero-media img{animation:fadeInUp 1s both .3s}

@media (prefers-reduced-motion:reduce){
  .hero-anim>*,.hero-media img{opacity:1;transform:none;animation:none}
  .preloader{display:none}
}

/* Industries grid: with 10 cards in three columns, centre the lone card on the
   last row instead of leaving it flush left. Desktop only. */
@media (min-width:992px){
  .industry-grid>:last-child:nth-child(3n+1){grid-column:2}
}