/* Telco theme — extracted from the approved static build */

:root{
  --navy:#06204A;
  --navy-2:#0B2E63;
  --blue:#0E4DA4;
  --blue-bright:#1671E0;
  --silver:#C9CFD9;
  --ink:#0A1628;
  --muted:#5B6478;
  --muted-light:#8B93A8;
  /* --muted-light is 3.07:1 on white — decorative only. --muted-mid is the
     smallest-text-safe grey at 4.82:1. */
  --muted-mid:#6A7284;
  --bg:#F7F8FB;
  --white:#fff;
  --line:rgba(10,22,40,0.08);
  --line-dark:rgba(255,255,255,0.12);
  --purple:#7C6FF0;
  --pink:#F06FA8;
  --orange:#F5A25D;
  --teal:#3FCDBB;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:auto;}
/* Lenis requirements — it drives the native scroll position (not a transform),
   so position:sticky and the fixed footer keep working normally. */
html.lenis,html.lenis body{height:auto;}
.lenis.lenis-smooth{scroll-behavior:auto !important;}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain;}
.lenis.lenis-stopped{overflow:hidden;}
.lenis.lenis-smooth iframe{pointer-events:none;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
}
body{font-family:'Inter',sans-serif;color:var(--ink);background:var(--bg);overflow-x:hidden;}
img{max-width:100%;display:block;}
a{color:inherit;}
h1,h2,h3,h4{font-family:'Space Grotesk';letter-spacing:-0.3px;}
.mono{font-family:'IBM Plex Mono';}
.wrap{max-width:1350px;margin:0 auto;padding:0 32px;}
section{position:relative;}
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:0.45;pointer-events:none;z-index:0;}

/* ============ TOP BAR ============ */
.topbar{background:var(--navy);color:var(--silver);font-size:13px;}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;padding:9px 32px;}
.topbar-links{display:flex;gap:24px;}
.topbar-links a{text-decoration:none;color:var(--silver);}
.topbar-social{display:flex;gap:14px;}
.topbar-social span{width:6px;height:6px;border-radius:50%;background:var(--teal);display:inline-block;}

/* ============ NAV ============ */
/* Header floats transparently over the hero, then locks to a white bar on scroll */
#site-header{position:fixed;top:0;left:0;width:100%;z-index:300;transition:background .3s ease, box-shadow .3s ease;}
#site-header .topbar{background:transparent;border-bottom:1px solid rgba(255,255,255,0.12);transition:all .3s ease;}
#site-header .topbar a,#site-header .topbar span{color:rgba(255,255,255,0.75);}
header.nav-wrap{background:transparent;border-bottom:none;transition:background .3s ease;}
#site-header .nav-item > a,#site-header .nav-trigger{color:#fff;}
#site-header .caret{border-color:rgba(255,255,255,0.7);}
#site-header .nav-phone{color:#fff;}
.logo-link{position:relative;display:block;line-height:0;}
.logo-dark{position:absolute;inset:0;opacity:0;transition:opacity .3s ease;}
.logo-light{opacity:1;transition:opacity .3s ease;}
/* scrolled state */
#site-header.scrolled{background:#fff;box-shadow:0 6px 24px rgba(6,32,74,0.09);}
#site-header.scrolled .topbar{max-height:0;opacity:0;overflow:hidden;border-bottom-color:transparent;}
#site-header.scrolled .nav-item > a,#site-header.scrolled .nav-trigger{color:var(--ink);}
#site-header.scrolled .caret{border-color:var(--muted);}
#site-header.scrolled .nav-phone{color:var(--blue);}
#site-header.scrolled .logo-light{opacity:0;}
#site-header.scrolled .logo-dark{opacity:1;}
.topbar{max-height:60px;transition:max-height .3s ease, opacity .3s ease;}
/* hamburger */
.nav-toggle{display:none;width:42px;height:42px;border:0;background:transparent;cursor:pointer;
  flex-direction:column;justify-content:center;gap:5px;padding:0 8px;margin-left:10px;}
.nav-toggle span{display:block;height:2px;background:#fff;border-radius:2px;transition:all .3s ease;}
#site-header.scrolled .nav-toggle span{background:var(--ink);}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
/* mobile drawer */
.mobile-drawer{position:fixed;inset:0;top:0;background:var(--navy);z-index:290;padding:96px 28px 40px;
  overflow-y:auto;transform:translateX(100%);transition:transform .35s cubic-bezier(.65,0,.35,1);
  /* the bare `nav {}` rule for the header gives every <nav> max-width:1350px and
     display:flex — without these overrides the drawer only slides 1350px and
     stays partly on screen at desktop widths */
  display:block;max-width:none;width:100%;margin:0;}
@media (min-width:1051px){ .mobile-drawer{display:none;} }
.mobile-drawer.open{transform:translateX(0);}
.mobile-drawer h5{font-size:11.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted-light);
  margin:26px 0 10px;font-family:'Inter';font-weight:600;}
.mobile-drawer a{display:block;color:#fff;text-decoration:none;font-size:16px;padding:11px 0;
  border-bottom:1px solid rgba(255,255,255,0.08);}
.mobile-drawer .md-cta{background:var(--orange);color:#1a1206;text-align:center;font-weight:700;
  border-radius:9px;margin-top:26px;border:0;padding:15px;}
nav{display:flex;align-items:center;justify-content:space-between;padding:14px 32px;max-width:1350px;margin:0 auto;}
.logo-img{height:44px;}
.nav-main{display:flex;align-items:center;gap:32px;}
.nav-item{position:relative;font-size:14.5px;font-weight:500;}
.nav-item > a, .nav-item > .nav-trigger{text-decoration:none;color:var(--ink);cursor:pointer;display:flex;align-items:center;gap:5px;}
/* .nav-trigger is a <button> so the panel can be opened from the keyboard and
   announced with aria-expanded; these strip the UA button chrome. */
button.nav-trigger{background:none;border:0;padding:0;font:inherit;line-height:inherit;}
button.nav-trigger:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:4px;}
.nav-item.is-open .caret{transform:rotate(-135deg);margin-top:2px;}
.caret{width:7px;height:7px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(45deg);margin-top:-3px;transition:transform .25s ease, margin-top .25s ease;}
.nav-cta{background:var(--blue-bright);color:#fff;padding:11px 20px;border-radius:8px;font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap;}
.nav-phone{font-size:14px;font-weight:600;color:var(--blue);text-decoration:none;margin-right:6px;}

.mega{
  z-index:320;
  position:absolute;top:calc(100% + 18px);left:50%;transform:translateX(-50%) translateY(8px);
  width:820px;background:#fff;border-radius:16px;box-shadow:0 24px 60px rgba(6,32,74,0.18);
  border:1px solid var(--line);padding:32px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:28px;
  opacity:0;visibility:hidden;transition:opacity .22s ease, transform .22s ease;
}
/* Opened by click (JS toggles .is-open), not by :hover. A hover panel cannot be
   reached from the keyboard, fires whenever the pointer crosses the header, and
   on touch turns the first tap into an open and the second into a navigation. */
.nav-item.is-open .mega{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
.mega-all{grid-column:1 / -1;display:flex;align-items:center;justify-content:center;gap:9px;
  margin-top:6px;padding-top:18px;border-top:1px solid var(--line);
  font-size:14px;font-weight:600;color:var(--blue-bright);text-decoration:none;}
.mega-all svg{width:15px;height:15px;transition:transform .22s cubic-bezier(.65,0,.35,1);}
.mega-all:hover svg{transform:translateX(4px);}
.mega-col h5{font-size:11.5px;text-transform:uppercase;letter-spacing:1px;color:var(--muted-light);margin-bottom:14px;font-family:'Inter';font-weight:600;}
.mega-col a{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-size:14px;padding:8px 0;font-weight:500;}
.mega-col a:hover{color:var(--blue-bright);}
.mega-ic{width:26px;height:26px;border-radius:7px;background:var(--bg);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.mega-ic svg{width:14px;height:14px;}

/* ============ HERO ============ */
.hero{
  background:
    repeating-linear-gradient(0deg, rgba(148,163,253,0.045) 0px, rgba(148,163,253,0.045) 1px, transparent 1px, transparent 40px),
    repeating-linear-gradient(90deg, rgba(148,163,253,0.045) 0px, rgba(148,163,253,0.045) 1px, transparent 1px, transparent 40px),
    radial-gradient(ellipse at 50% 0%, #0e1740 0%, #0a0e22 65%);
  color:#fff;padding:160px 0 56px;overflow:hidden;}
.hero .blob{}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:center;
  position:relative;z-index:2;}
.hero-copy{max-width:100%;}
/* Copy left, schematic right, equal columns. */
#hero-gateway{width:100%;position:relative;}
#hero-gateway svg{display:block;width:100%;height:auto;overflow:visible;}
@media (max-width:1000px){
  .hero-grid{display:block;}
  .hero-copy{max-width:660px;}
  #hero-gateway{margin-top:30px;}
}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;color:var(--silver);background:rgba(255,255,255,0.06);border:1px solid var(--line-dark);padding:7px 14px 7px 10px;border-radius:20px;margin-bottom:24px;}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--teal);}
.hero h1{font-size:clamp(32px,3.6vw,50px);line-height:1.12;font-weight:600;max-width:600px;}
.hero h1 span.hl{color:var(--orange);}
.hero p.sub{margin-top:20px;font-size:16.5px;line-height:1.65;color:var(--silver);max-width:460px;}
.hero-ctas{display:flex;gap:16px;margin-top:32px;flex-wrap:wrap;}
.btn-primary{background:var(--orange);color:#1a1206;font-weight:700;font-size:14.5px;padding:14px 26px;border-radius:9px;text-decoration:none;position:relative;overflow:hidden;display:inline-block;transition:transform .25s ease, box-shadow .25s ease;isolation:isolate;}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(245,162,93,0.35);}
@keyframes spark{
  0%{left:-60%;}
  35%{left:130%;}
  100%{left:130%;}
}
.nav-item > a{transition:color .2s ease;}
.nav-item > a:hover{color:var(--blue-bright);}
.mega-col a{transition:color .2s ease, transform .2s ease, background .2s ease;border-radius:8px;padding-left:6px;margin-left:-6px;}
.mega-col a:hover{transform:translateX(3px);background:rgba(22,113,224,0.06);}
.nav-cta{position:relative;overflow:hidden;transition:filter .25s ease, transform .25s ease;isolation:isolate;}
.nav-cta:hover{filter:brightness(1.08);transform:translateY(-1px);}
.nav-cta::after{
  content:'';position:absolute;top:0;left:-60%;width:35%;height:100%;
  background:linear-gradient(115deg,transparent,rgba(255,255,255,0.75),transparent);
  transform:skewX(-20deg);animation:spark 3.2s ease-in-out infinite;z-index:1;
}
.btn-ghost{transition:background .25s ease, border-color .25s ease;}
.btn-ghost:hover{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.3);}
.btn-ghost{border:1px solid var(--line-dark);color:#fff;font-size:14.5px;font-weight:600;padding:14px 24px;border-radius:9px;text-decoration:none;}
.hero-stats{display:flex;gap:30px;margin-top:34px;padding-top:22px;border-top:1px solid var(--line-dark);max-width:480px;}
.hero-stats .stat b{display:block;font-family:'IBM Plex Mono';font-size:21px;color:#fff;}
.hero-stats .stat span{font-size:12px;color:var(--muted-light);}

/* labels sit outside the 420-unit viewBox, so both the SVG and its wrapper
   must allow overflow or the longer names get clipped mid-word */
.hero-visual{overflow:visible;}
.hero-visual .net-label{font-size:9.5px;}
.net-label{font-family:'IBM Plex Mono';font-size:10px;fill:var(--silver);letter-spacing:0.4px;}

/* ============ MARQUEE ============ */
.marquee-wrap{background:#fff;padding:34px 0;border-bottom:1px solid var(--line);overflow:hidden;}
.marquee-label{text-align:center;font-size:12px;color:var(--muted-light);text-transform:uppercase;letter-spacing:1.2px;margin-bottom:22px;}
.marquee-track{display:flex;gap:70px;width:max-content;animation:scrollx 26s linear infinite;}
.marquee-track span{font-family:'Space Grotesk';font-weight:600;font-size:19px;color:var(--muted);opacity:0.75;white-space:nowrap;}
@keyframes scrollx{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ============ SLIDER SECTION ============ */
.slider-section{background:var(--bg);padding:90px 0;position:relative;}
.section-head{max-width:560px;margin-bottom:48px;}
.section-kicker{font-family:'IBM Plex Mono';font-size:12.5px;color:var(--blue-bright);margin-bottom:10px;}
.section-head h2{font-size:clamp(26px,3vw,36px);font-weight:600;line-height:1.2;}
.section-head p{margin-top:12px;color:var(--muted);font-size:15.5px;line-height:1.6;max-width:480px;}

.slider-box{position:relative;border-radius:20px;overflow:hidden;background:var(--navy);min-height:340px;}
.slide-track{display:flex;transition:transform .6s cubic-bezier(.65,0,.35,1);}
.slide{min-width:100%;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:40px;padding:56px;color:#fff;position:relative;}
.slide-copy .num{font-family:'IBM Plex Mono';font-size:13px;color:var(--orange);margin-bottom:14px;}
.slide-copy h3{font-size:26px;font-weight:600;max-width:380px;line-height:1.3;}
.slide-copy p{margin-top:14px;color:var(--silver);font-size:15px;line-height:1.6;max-width:400px;}
.slide-visual{display:flex;align-items:center;justify-content:center;}
.slide-visual .ring{width:220px;height:220px;border-radius:50%;border:1px solid var(--line-dark);display:flex;align-items:center;justify-content:center;}
.slide-visual .ring-inner{width:150px;height:150px;border-radius:50%;display:flex;align-items:center;justify-content:center;}
.slide-visual svg{width:60px;height:60px;}

.slider-nav{position:absolute;bottom:26px;left:56px;display:flex;gap:10px;align-items:center;z-index:5;}
.dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,0.3);cursor:pointer;transition:.25s;}
.dot.active{background:var(--orange);width:22px;border-radius:4px;}
.slider-arrows{position:absolute;bottom:22px;right:36px;display:flex;gap:10px;z-index:5;}
.arrow-btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--line-dark);background:rgba(255,255,255,0.05);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;}

/* ============ SERVICES GRID ============ */
.services-section{background:#fff;padding:90px 0;}
.card-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;}
.svc-card{background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:26px 22px;position:relative;overflow:hidden;transition:.3s;}
.svc-card:hover{border-color:var(--blue-bright);}
.svc-ic{width:44px;height:44px;border-radius:11px;display:flex;align-items:center;justify-content:center;margin-bottom:18px;}
.svc-ic svg{width:22px;height:22px;}
.svc-card h4,.svc-card h3{font-size:16px;font-weight:600;margin-bottom:8px;}
.svc-card p{font-size:13.5px;color:var(--muted);line-height:1.55;}

/* ============ PINNED SERVICE SWITCHER ============ */
.services-section{position:relative;}
.services-section .wrap{position:relative;z-index:2;}
.services-track{position:relative;height:300vh;} /* overridden by JS to scale with service count */
/* #pin-wrapper MUST be a direct child of .services-track: a sticky element can
   only travel inside its parent's box, so nesting it in .wrap (content height)
   made it unstick immediately and leave a large blank gap. */
#pin-wrapper{position:sticky;top:80px;padding:40px 0 60px;z-index:2;
  /* full-bleed: the wrapper sits inside .wrap-less track, so stretch the paint
     across the viewport rather than just the content column */
  box-shadow:0 0 0 100vmax var(--pin-col,transparent);clip-path:inset(0 -100vmax);}
.pin-stage{max-width:1350px;margin:0 auto;padding:0 0 100px;display:grid;grid-template-columns:300px 1fr;gap:60px;position:relative;z-index:2;}
.tab-list{display:flex;flex-direction:column;gap:2px;border-left:1px solid var(--line);}
.tab-item{padding:18px 0 18px 22px;font-size:15px;color:var(--muted);position:relative;border-left:2px solid transparent;margin-left:-1px;transition:color .3s, border-color .3s;text-decoration:none;display:block;}
.tab-item:hover{color:var(--ink);}
.tab-item.active{color:var(--ink);border-left-color:var(--blue-bright);font-weight:600;}
.panel-area{position:relative;min-height:360px;}
.panel{position:absolute;inset:0;opacity:0;visibility:hidden;pointer-events:none;
  /* visibility can't be interpolated, so it's delayed until the opacity fade
     finishes — otherwise the outgoing panel vanished instantly and the swap
     read as a hard cut rather than a crossfade. */
  transition:opacity .5s ease, visibility 0s linear .5s;background:#fff;border:1px solid var(--line);border-radius:16px;padding:44px;display:grid;grid-template-columns:1fr 150px;align-items:center;gap:20px;}
.panel.active{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .5s ease, visibility 0s linear 0s;}
.panel-kicker{font-family:'IBM Plex Mono';font-size:12px;color:var(--blue-bright);margin-bottom:14px;}
.panel h3{font-size:25px;font-weight:600;max-width:440px;line-height:1.25;}
.panel p{color:var(--muted);margin-top:12px;max-width:440px;font-size:15px;line-height:1.6;}
/* Tag pills. Defined globally: the service detail sidebar renders the same
   markup outside .panel, where these used to fall back to bare inline text. */
.tag-row{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px;}
.tag{font-size:12.5px;font-family:'IBM Plex Mono';color:var(--muted);
  border:1px solid var(--line);padding:6px 11px;border-radius:20px;}
.panel-link{margin-top:24px;font-size:14px;font-weight:600;color:var(--blue-bright);text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:gap .2s ease;}
.panel-link:hover{gap:11px;}
.panel-visual{width:150px;height:150px;border-radius:50%;display:flex;align-items:center;justify-content:center;justify-self:end;}
.panel-visual .pv-ring{width:100%;height:100%;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;}
.panel-visual .pv-inner{width:96px;height:96px;border-radius:50%;display:flex;align-items:center;justify-content:center;}
.panel-visual svg{width:42px;height:42px;}

/* ============ DIGITAL SERVICES (navy) ============ */
.digital-section{background:var(--navy);color:#fff;padding:90px 0;overflow:hidden;position:relative;z-index:1;}
.digital-section .wrap{position:relative;z-index:2;}
.digital-bg{position:absolute;inset:-15%;z-index:0;pointer-events:none;
  background:
    radial-gradient(600px circle at 20% 20%, rgba(124,111,240,0.28), transparent 60%),
    radial-gradient(520px circle at 80% 25%, rgba(240,111,168,0.20), transparent 60%),
    radial-gradient(560px circle at 50% 90%, rgba(63,205,187,0.20), transparent 60%);
  background-size:180% 180%;
  animation:auroraShift 17s ease-in-out infinite alternate;
  filter:blur(14px);
}
@keyframes auroraShift{
  0%{background-position:0% 0%, 100% 0%, 50% 100%;}
  100%{background-position:25% 30%, 65% 45%, 40% 65%;}
}
.digital-section .section-kicker{color:var(--teal);}
.digital-section .section-head p{color:var(--silver);}
.card-grid-6{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch;}
.dg-card{background:rgba(255,255,255,0.04);border:1px solid var(--line-dark);border-radius:14px;padding:22px;
  transition:transform .3s ease, background .3s ease, border-color .3s ease;
  display:flex;flex-direction:column;height:100%;}
.dg-card .svc-ic{background:rgba(255,255,255,0.08);flex-shrink:0;}
.dg-card h4{font-size:15px;font-weight:600;margin:0 0 8px;line-height:1.3;min-height:2.6em;}
.dg-card p{font-size:13px;color:var(--muted-light);line-height:1.5;margin:0;flex:1 1 auto;}
.dg-card:hover{transform:translateY(-5px);background:rgba(255,255,255,0.07);border-color:rgba(255,255,255,0.25);}

/* ============ INDUSTRIES — sticky stacking panels ============ */
.industries-section{background:var(--bg);padding:90px 0 0;}
.ind-stack{position:relative;background:#04122C;}
.ind-panel{position:sticky;top:0;height:100vh;min-height:560px;overflow:hidden;
  display:flex;align-items:center;will-change:transform,filter;
  /* Opaque base: without it, any sliver the parallax leaves uncovered shows the
     light section background through — that was the grey band, and why the
     previous panel's text ghosted through. */
  background:#04122C;}
.ind-panel-bg{position:absolute;inset:0;z-index:0;overflow:hidden;background:#04122C;}
.ind-panel-bg img{position:absolute;top:-6%;left:0;width:100%;height:112%;
  object-fit:cover;display:block;will-change:transform;
  filter:saturate(1.08) contrast(1.05);}
.ind-panel-bg::after{content:'';position:absolute;inset:0;
  /* Two stacked washes: a hard scrim over the left third where the copy sits
     (photos here are bright, so a weak overlay left headlines unreadable), plus
     a lighter brand tint across the whole frame. rgba only — no color-mix — so
     the gradient can't silently fail to parse in older browsers. */
  background:
    /* Hard scrim only under the copy column, then it falls away fast so the
       photograph reads as a real image on the right instead of a murky wash. */
    linear-gradient(95deg, rgba(4,18,44,0.95) 0%, rgba(4,18,44,0.90) 30%,
                    rgba(4,18,44,0.62) 46%, rgba(4,18,44,0.20) 68%,
                    rgba(4,18,44,0.06) 100%),
    linear-gradient(180deg, rgba(4,18,44,0.22) 0%, rgba(4,18,44,0.00) 40%, rgba(4,18,44,0.38) 100%);}
.ind-panel-bg::before{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(95deg, var(--tint) 0%, var(--tint) 38%, transparent 72%);
  opacity:0.16;mix-blend-mode:overlay;}
.ind-panel-inner{position:relative;z-index:3;width:100%;}
.ind-panel-copy{max-width:620px;color:#fff;}
.ind-panel-num{font-family:'IBM Plex Mono';font-size:13px;color:var(--tint);margin-bottom:16px;}
.ind-panel-num span{color:rgba(255,255,255,0.45);}
.ind-panel-kicker{font-size:12.5px;letter-spacing:2px;text-transform:uppercase;
  color:rgba(255,255,255,0.7);margin-bottom:14px;}
.ind-panel-copy h3{font-size:clamp(30px,4vw,52px);font-weight:700;line-height:1.08;letter-spacing:-0.6px;}
.ind-panel-copy p{margin-top:20px;font-size:16.5px;line-height:1.62;color:rgba(255,255,255,0.92);max-width:540px;}
.ind-panel-btn{display:inline-flex;align-items:center;gap:12px;margin-top:32px;background:#fff;
  color:var(--ink);font-weight:600;font-size:15px;padding:16px 26px;text-decoration:none;
  transition:gap .25s ease, transform .25s ease;}
.ind-panel-btn:hover{gap:18px;transform:translateY(-2px);}
.ind-panel-btn svg{width:17px;height:17px;}
@media (max-width:820px){
  .ind-panel{position:relative;height:auto;min-height:0;padding:70px 0;}
  .ind-panel-copy p{font-size:15px;}
}

/* ============ INDUSTRIES — scroll-driven accordion (band styling) ============ */
.industries-section{background:var(--bg);padding:90px 0 0;}
.ind-track{position:relative;}
.ind-sticky{position:sticky;top:64px;padding-bottom:56px;}
.ind-rows{display:flex;flex-direction:column;}
.ind-row{position:relative;border-radius:14px;margin-bottom:8px;overflow:hidden;color:#fff;
  background:linear-gradient(120deg,var(--acc-a) 0%,var(--acc-b) 100%);
  box-shadow:0 16px 30px -16px rgba(6,32,74,0.45);}
.ind-row-mark{position:absolute;right:-30px;top:50%;transform:translateY(-50%);
  width:230px;height:230px;opacity:0.09;pointer-events:none;}
.ind-row-head{display:flex;align-items:center;gap:14px;padding:15px 26px;cursor:pointer;
  position:relative;z-index:2;}
.ind-row-ic{width:30px;height:30px;border-radius:8px;background:rgba(255,255,255,0.2);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.ind-row-ic svg{width:16px;height:16px;}
.ind-row-title{font-size:18px;font-weight:600;line-height:1.2;letter-spacing:-0.2px;}
.ind-row-num{margin-left:auto;font-family:'IBM Plex Mono';font-size:11.5px;opacity:0.65;}
.ind-row-body{height:0;opacity:0;overflow:hidden;position:relative;z-index:2;}
.ind-row-body-inner{padding:0 26px 22px;display:grid;grid-template-columns:230px 1fr;
  gap:26px;align-items:center;}
/* Photo slot — swap the placeholder for <img class="ind-row-photo" src="..." alt="..."> */
.ind-row-photo{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px;display:block;}
.ind-row-ph{width:100%;aspect-ratio:4/3;border-radius:6px;display:flex;align-items:center;
  justify-content:center;background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.24);}
.ind-row-ph svg{width:48px;height:48px;opacity:0.9;}
.ind-row-body h4{font-size:20px;font-weight:600;line-height:1.25;margin:0 0 8px;}
.ind-row-body p{font-size:14px;line-height:1.55;color:rgba(255,255,255,0.9);margin:0;max-width:560px;}
.ind-row-btn{display:inline-flex;align-items:center;gap:10px;margin-top:16px;background:#fff;
  color:var(--ink);font-weight:600;font-size:13.5px;padding:11px 20px;border-radius:4px;
  text-decoration:none;transition:gap .25s ease;}
.ind-row-btn:hover{gap:15px;}
.ind-row-btn svg{width:15px;height:15px;}
@media (max-width:900px){
  .ind-sticky{position:static;padding-bottom:30px;}
  .ind-track{height:auto !important;}
  .ind-row-body{height:auto !important;opacity:1 !important;}
  .ind-row-body-inner{grid-template-columns:1fr;gap:16px;}
  .ind-row-mark{display:none;}
}
}
}

/* ============ STATS ============ */
.stats-section{background:linear-gradient(135deg,var(--blue) 0%,var(--navy) 100%);padding:70px 0;color:#fff;position:relative;overflow:hidden;}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative;z-index:2;}
.stat-box b{display:block;font-family:'Space Grotesk';font-size:40px;font-weight:600;}
.stat-box span{font-size:13.5px;color:var(--silver);}

/* ============ VIDEO SECTION ============ */
.video-section{position:relative;min-height:520px;display:flex;align-items:center;overflow:hidden;color:#fff;}
.bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.video-fallback{position:absolute;inset:0;z-index:0;background:linear-gradient(160deg,#06204A,#0B2E63 60%,#06204A);overflow:hidden;}
.video-fallback::before{
  content:'';position:absolute;inset:-50%;
  background-image:linear-gradient(rgba(63,205,187,0.16) 1px, transparent 1px),linear-gradient(90deg, rgba(63,205,187,0.16) 1px, transparent 1px);
  background-size:56px 56px;
  animation:gridMove 16s linear infinite;
}
@keyframes gridMove{0%{transform:translate(0,0);}100%{transform:translate(56px,56px);}}
.video-overlay{position:absolute;inset:0;background:linear-gradient(90deg, rgba(6,32,74,0.9) 20%, rgba(6,32,74,0.55) 60%, rgba(6,32,74,0.35));z-index:1;}
.video-content{position:relative;z-index:2;max-width:560px;padding:90px 32px;}
.video-content h2{font-size:clamp(26px,3.2vw,38px);font-weight:600;margin-top:12px;line-height:1.2;}
.video-content p{margin-top:16px;color:var(--silver);font-size:15.5px;line-height:1.6;}
.video-content .btn-primary{margin-top:28px;}

/* ============ TESTIMONIALS ============ */
.testi-section{background:#fff;padding:90px 0;}
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch;}
.testi-card{background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:28px;
  transition:transform .3s ease, box-shadow .3s ease;
  display:flex;flex-direction:column;height:100%;}
.testi-stars{color:var(--orange);font-size:14px;margin:0 0 14px;letter-spacing:2px;flex-shrink:0;}
.testi-card p{font-size:14.5px;line-height:1.65;color:var(--ink);margin:0;flex:1 1 auto;}
.testi-who{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);display:flex;align-items:center;gap:10px;flex-shrink:0;}
.testi-card:hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(10,22,40,0.08);}
.testi-avatar{width:34px;height:34px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;font-family:'Space Grotesk';}
.testi-who b{font-size:13.5px;display:block;}
.testi-who span{font-size:12px;color:var(--muted-light);}

/* ============ BLOG (3-up, white, RingCentral-style) ============ */
.blog-section{background:#fff;padding:100px 0;}
.blog-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;}
.blog-card-3{text-decoration:none;color:inherit;display:block;}
.blog-thumb-3{height:210px;border-radius:14px;position:relative;overflow:hidden;margin-bottom:22px;}
.blog-thumb-3 svg{position:absolute;inset:0;width:100%;height:100%;transition:transform .5s ease;}
.blog-card-3:hover .blog-thumb-3 svg{transform:scale(1.08);}
.blog-card-3 h4{transition:color .2s ease;}
.blog-card-3:hover h4{color:var(--blue-bright);}
.blog-meta .arrow{transition:transform .25s ease;}
.blog-card-3:hover .blog-meta .arrow{transform:translateX(4px);}
.blog-tag{display:inline-block;font-size:11.5px;font-weight:600;letter-spacing:0.5px;color:var(--blue-bright);margin-bottom:12px;}
.blog-card-3 h4{font-size:19px;font-weight:600;line-height:1.35;color:var(--ink);}
.blog-card-3 p.excerpt{font-size:14px;color:var(--muted);line-height:1.6;margin-top:10px;}
.blog-meta{display:flex;align-items:center;gap:8px;margin-top:18px;font-size:12.5px;color:var(--muted-light);}
.blog-meta .arrow{margin-left:auto;font-size:16px;color:var(--blue-bright);}

/* ============ CTA BANNER ============ */
.cta-banner{background:linear-gradient(150deg,var(--navy) 0%,#0B2E63 55%,var(--navy) 100%);color:#fff;padding:90px 0;position:relative;overflow:hidden;}
.cta-mesh{position:absolute;inset:-10%;z-index:0;pointer-events:none;
  background:
    radial-gradient(520px circle at 15% 30%, rgba(63,205,187,0.18), transparent 60%),
    radial-gradient(480px circle at 85% 70%, rgba(245,162,93,0.16), transparent 60%);
  filter:blur(10px);
}
.cta-card{position:relative;z-index:2;display:grid;grid-template-columns:1fr 220px;align-items:center;gap:40px;
  background:rgba(255,255,255,0.045);border:1px solid var(--line-dark);border-radius:24px;padding:56px;}
.cta-left h3{font-size:clamp(24px,2.6vw,32px);font-weight:600;max-width:480px;margin-top:10px;}
.cta-left p{margin-top:14px;color:var(--silver);font-size:15px;line-height:1.6;max-width:440px;}
.cta-btn-row{display:flex;align-items:center;gap:18px;margin-top:30px;flex-wrap:wrap;}
.cta-btn-row .btn-ghost{padding:14px 22px;}
.cta-trust-row{display:flex;flex-wrap:wrap;gap:22px;margin-top:26px;padding-top:22px;border-top:1px solid var(--line-dark);}
.cta-trust-row span{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--silver);}
.cta-trust-row i{width:6px;height:6px;border-radius:50%;background:var(--teal);display:inline-block;flex-shrink:0;}
.cta-visual{position:relative;width:220px;height:220px;display:flex;align-items:center;justify-content:center;}
.cta-ring{position:absolute;border-radius:50%;border:1px solid var(--line-dark);}
.cta-ring-1{width:100%;height:100%;}
.cta-ring-2{width:70%;height:70%;border-color:rgba(245,162,93,0.3);}
.cta-badge{width:88px;height:88px;border-radius:50%;background:linear-gradient(135deg,var(--orange),#e0824a);display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 14px rgba(245,162,93,0.08);}
.cta-badge svg{width:34px;height:34px;}
@media (max-width:720px){
  .cta-card{grid-template-columns:1fr;padding:36px;}
  .cta-visual{display:none;}
}

/* ============ FOOTER ============ */
/* Footer reveal: the footer is fixed at the viewport bottom and every section
   above it is opaque with a higher z-index, so content slides over it and the
   footer is uncovered as you reach the end. body gets padding-bottom equal to
   the footer height (set in JS) so nothing is cut off.
   NOTE: no wrapper element is used here on purpose — wrapping the page in an
   overflow:hidden container is what previously broke the sticky services panel. */
footer{background:#040E24;color:var(--silver);padding:80px 0 0;overflow:hidden;
  position:fixed;bottom:0;left:0;width:100%;z-index:0;}
#site-footer{position:fixed;bottom:0;left:0;width:100%;z-index:0;}
/* The static build had these as direct children of <body>. In the theme they
   live inside #content, so `body > section` stopped matching and the fixed
   footer (z-index:0) painted straight over the page. Scope it to the wrapper. */
#content{position:relative;z-index:3;background:var(--bg);}
#site-header{z-index:300;}
body > section,
body > .marquee-wrap,
#content > section,
#content > .marquee-wrap,
#content > .page-body,
#content > .ind-panels{position:relative;z-index:3;}
.services-section{background:#f5f5dc;}
.testi-section,.blog-section{background:#fff;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1.2fr;gap:30px;padding-bottom:60px;position:relative;z-index:2;}
.footer-logo{height:38px;margin-bottom:18px;}
.footer-grid p{font-size:13.5px;line-height:1.6;color:var(--muted-light);max-width:260px;}
.footer-col h5{font-size:13px;font-weight:600;color:#fff;margin-bottom:16px;}
.footer-col a{display:block;font-size:13.5px;color:var(--muted-light);text-decoration:none;padding:5px 0;}
.footer-col a:hover{color:#fff;}
.footer-contact div{font-size:13.5px;margin-bottom:10px;color:var(--muted-light);line-height:1.5;}
.footer-contact b{color:#fff;display:block;font-size:12px;font-family:'IBM Plex Mono';margin-bottom:3px;}
.newsletter-row{display:flex;gap:0;margin-top:14px;}
.newsletter-row input{flex:1;background:rgba(255,255,255,0.05);border:1px solid var(--line-dark);border-right:none;padding:10px 14px;border-radius:8px 0 0 8px;color:#fff;font-size:13px;}
.newsletter-row button{background:var(--orange);border:none;padding:10px 16px;border-radius:0 8px 8px 0;font-weight:700;font-size:13px;cursor:pointer;}

/* 32px sides, not 0: the element is `class="wrap footer-bottom"` and a bare
   `padding` here overrode .wrap's own 0 32px, so the copyright line ran flush
   to both screen edges below 1350px and sat 32px out of line with the columns
   above it on wider screens. */
.footer-bottom{border-top:1px solid var(--line-dark);padding:22px 32px;display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:var(--muted-light);position:relative;z-index:2;flex-wrap:wrap;gap:10px;}

/* Router graphic at footer base */
.router-zone{position:relative;height:70px;z-index:2;}
/* 34px lines the router up under the footer's own 32px gutter, so the cable
   lands on the content edge rather than floating out in the margin. */
.router-zone svg{width:90px;height:auto;position:absolute;left:34px;top:0;}
@media (max-width:900px){
  /* pull the router left so the cable can hug the screen edge and free up
     reading width for the content */
  .router-zone svg{left:-5px;}
}

/* full-page cable overlay, runs from hero to router */
#cable-overlay{position:absolute;top:0;left:0;width:100%;pointer-events:none;z-index:40;}
#cable-path-full{fill:none;stroke:url(#cableGradFull);stroke-width:2.5;filter:drop-shadow(0 0 4px rgba(63,205,187,0.35));}
.cable-node{fill:var(--bg);stroke-width:1.5;}

@media (max-width:1050px){
  .card-grid{grid-template-columns:repeat(2,1fr);}
  .card-grid-6{grid-template-columns:repeat(2,1fr);}
  .blog-grid{grid-template-columns:repeat(2,1fr);}
  .stats-grid{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .hero-grid{grid-template-columns:1fr;}
  .slide{grid-template-columns:1fr;text-align:left;}
  .nav-main{display:none;}
  .nav-toggle{display:flex;}
  .nav-phone{display:none;}
  .mega{position:static;transform:none;box-shadow:none;display:none;}
  .testi-grid{grid-template-columns:1fr;}
  .pin-stage{grid-template-columns:1fr;}
  .tab-list{flex-direction:row;overflow-x:auto;border-left:none;border-bottom:1px solid var(--line);padding-bottom:4px;}
  .tab-item{border-left:none;border-bottom:2px solid transparent;margin-left:0;white-space:nowrap;padding:10px 16px;}
  .tab-item.active{border-bottom-color:var(--blue-bright);}
  .panel-area{min-height:420px;}
  .panel{grid-template-columns:1fr;}
  .panel-visual{display:none;}
  .blog-grid-3{grid-template-columns:1fr;}
}
@media (max-width:640px){
}

/* ===== Hero security-gateway schematic (scoped) ===== */
#hero-gateway{
    --border:rgba(148,163,253,0.18);
    --border-soft:rgba(148,163,253,0.09);
    --wire:rgba(148,163,253,0.22);
    --muted:#5c6690;
    --bright:#eef1ff;
    --cyan:#5ecbff;
    --green:#3ddc9b;
    --amber:#ffb454;
    --red:#ff6b81;
  }#hero-gateway .title{font-size:11px;   letter-spacing:4px;   fill:url(#titleGrad); font-weight:800;}#hero-gateway .stat-label{font-size:7.5px;  letter-spacing:1.8px; fill:#5c6690; font-weight:700;}#hero-gateway .stat-value{font-size:13px;   letter-spacing:0.8px; font-weight:800;}#hero-gateway .stat-unit{font-size:7.5px;  letter-spacing:1px;   fill:#5c6690; font-weight:700;}#hero-gateway .node-label{font-size:10px;   letter-spacing:1.5px; fill:#c6cdf2; font-weight:700;}#hero-gateway .node-sub{font-size:7px;    letter-spacing:1.1px; fill:#5c6690; font-weight:600;}#hero-gateway .tiny{font-size:7.5px;  letter-spacing:1.2px; fill:#5c6690; font-weight:700;}#hero-gateway .device-name{font-size:10px;   letter-spacing:1.4px; fill:#dfe4ff; font-weight:800;}

  

/* This viewBox is only 586 units wide, so in a ~635px column it renders just
   ABOVE 1:1 — a large type bump would now look oversized. Only the two
   smallest classes get a nudge; the rest are left at source size. */
#hero-gateway .node-sub{font-size:8px;}
#hero-gateway .stat-label{font-size:8px;}
#hero-gateway .stat-unit{font-size:8px;}
#hero-gateway .tiny{font-size:8px;}

/* ============================================================
   INNER PAGES — shared shell so every page matches the homepage
   ============================================================ */
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;}
.skip-link:focus{position:fixed;top:10px;left:10px;width:auto;height:auto;clip:auto;z-index:999;
  background:#fff;color:var(--ink);padding:10px 16px;border-radius:6px;}

.page-hero{position:relative;overflow:hidden;color:#fff;padding:190px 0 74px;
  background:
    repeating-linear-gradient(0deg, rgba(148,163,253,0.045) 0px, rgba(148,163,253,0.045) 1px, transparent 1px, transparent 40px),
    repeating-linear-gradient(90deg, rgba(148,163,253,0.045) 0px, rgba(148,163,253,0.045) 1px, transparent 1px, transparent 40px),
    radial-gradient(ellipse at 50% 0%, #0e1740 0%, #0a0e22 65%);}
.page-hero-mesh{position:absolute;inset:-10%;pointer-events:none;
  background:radial-gradient(520px circle at 18% 30%, rgba(63,205,187,0.16), transparent 62%),
             radial-gradient(480px circle at 82% 70%, rgba(245,162,93,0.14), transparent 62%);filter:blur(10px);}
.page-hero .wrap{position:relative;z-index:2;}
.page-hero h1{font-size:clamp(30px,3.6vw,50px);font-weight:600;line-height:1.1;max-width:900px;}
.page-hero-sub{margin-top:16px;font-size:16.5px;line-height:1.6;color:var(--silver);max-width:620px;}

.page-body{padding:74px 0;background:var(--bg);}
.page-body .wrap.narrow{max-width:820px;}
.entry-content{font-size:16.5px;line-height:1.72;color:var(--ink);}
.entry-content h2{font-size:28px;margin:34px 0 12px;}
.entry-content h3{font-size:21px;margin:28px 0 10px;}
.entry-content p{margin-bottom:18px;}
.entry-content ul,.entry-content ol{margin:0 0 18px 20px;}
.entry-content li{margin-bottom:8px;}
.entry-content a{color:var(--blue-bright);}
.entry-content img{border-radius:12px;height:auto;}
.entry-meta{font-family:'IBM Plex Mono';font-size:12.5px;color:var(--muted-light);margin-bottom:18px;}
.entry-thumb{margin-bottom:26px;}
.entry-thumb img{width:100%;border-radius:14px;}
.entry-split{display:grid;grid-template-columns:1fr 320px;gap:48px;align-items:start;}
.entry-side{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px;position:sticky;top:110px;}
.entry-side h4{font-size:15px;margin-bottom:12px;}
.entry-side .btn-primary{margin-top:18px;display:block;text-align:center;}
@media (max-width:900px){ .entry-split{grid-template-columns:1fr;} .entry-side{position:static;} }

/* Service detail — sticky contents navigation -------------------
   The sidebar is already sticky; this adds the in-page nav on top of it.
   max-height keeps a long contents list from outgrowing the viewport, at which
   point it scrolls inside itself rather than pushing the quote button out of
   reach — the button is the point of the sidebar. */
.svc-side{padding:22px 24px;}
/* The bare `nav {}` rule that lays out the site header also matches this <nav>,
   which flexed the label alongside the list and capped the width at 1350px.
   Same trap the mobile drawer hits — reset the inherited layout explicitly. */
.svc-toc{display:block;max-width:none;width:auto;margin:0 0 22px;
  padding:0 0 20px;border-bottom:1px solid var(--line);align-items:initial;
  justify-content:initial;}
.svc-toc h4{font-family:'IBM Plex Mono';font-size:11px;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--muted-light);margin-bottom:12px;font-weight:500;}
.svc-toc ol{list-style:none;margin:0;padding:0;max-height:52vh;overflow-y:auto;}
.svc-toc li{margin:0;}
.svc-toc a{display:block;position:relative;padding:7px 0 7px 16px;font-size:14px;
  line-height:1.45;color:var(--muted);text-decoration:none;
  border-left:2px solid transparent;margin-left:-1px;
  transition:color .2s ease,border-color .2s ease;}
.svc-toc li.lvl-3 a{padding-left:28px;font-size:13.2px;}
.svc-toc a:hover{color:var(--ink);}
.svc-toc a.is-current{color:var(--blue-bright);border-left-color:var(--blue-bright);font-weight:500;}

/* headings must clear the fixed header when jumped to */
.entry-content h2[id],.entry-content h3[id]{scroll-margin-top:110px;}
.faq-section[id]{scroll-margin-top:90px;}

@media (max-width:900px){
  .svc-toc ol{max-height:none;}
}

/* Services page ------------------------------------------------ */
.svc-block{padding:78px 0;background:#fff;}
.svc-block-core{background:var(--bg);}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch;}
.svc-card{display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit;
  background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;}
.svc-block-core .svc-card{background:#fff;}
.svc-card:hover{transform:translateY(-4px);box-shadow:0 18px 34px rgba(10,22,40,0.09);border-color:var(--accent,var(--blue-bright));}
.svc-card h4,.svc-card h3{font-size:17px;font-weight:600;margin:0 0 8px;line-height:1.3;min-height:2.6em;}
.svc-card p{font-size:14px;line-height:1.55;color:var(--muted);margin:0;flex:1 1 auto;}
.svc-more{margin-top:16px;font-size:13.5px;font-weight:600;color:var(--blue-bright);}
@media (max-width:980px){ .svc-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){ .svc-grid{grid-template-columns:1fr;} }

/* About page --------------------------------------------------- */
.about-intro{max-width:820px;}
.about-stats{background:var(--navy);color:#fff;padding:60px 0;}
.about-stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.about-stat b{display:block;font-family:'Space Grotesk';font-size:40px;font-weight:600;}
.about-stat span{font-size:13.5px;color:var(--silver);}
@media (max-width:760px){ .about-stats-grid{grid-template-columns:1fr;} }

/* Contact page ------------------------------------------------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;}
.contact-info h2{font-size:28px;margin-bottom:12px;}
.contact-info > p{color:var(--muted);line-height:1.65;max-width:460px;}
.contact-rows{margin-top:30px;display:flex;flex-direction:column;gap:20px;}
.contact-row{display:flex;gap:14px;align-items:flex-start;}
.contact-ic{width:40px;height:40px;border-radius:11px;background:#fff;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--blue-bright);}
.contact-ic svg{width:19px;height:19px;}
.contact-row b{display:block;font-size:12px;font-family:'IBM Plex Mono';color:var(--muted-light);
  text-transform:uppercase;letter-spacing:0.6px;margin-bottom:3px;}
.contact-row a,.contact-row span{font-size:15.5px;color:var(--ink);text-decoration:none;line-height:1.5;}
.contact-row a:hover{color:var(--blue-bright);}
.contact-map{margin-top:30px;border-radius:14px;overflow:hidden;border:1px solid var(--line);}
.contact-map iframe{width:100%;height:290px;border:0;display:block;}
/* A bare column. The form inside supplies its own card — .cf for the built-in
   form and for the Contact Form 7 template — so a card here as well produced a
   panel inside a panel with two borders and double padding. */
.contact-form-col{min-width:0;}
.contact-form-placeholder h4{font-size:18px;margin-bottom:10px;}
.contact-form-placeholder p{color:var(--muted);font-size:14.5px;line-height:1.6;}
/* Fallback styling for a form plugin dropped into this column with no theme
   markup of its own — WPForms, Gravity Forms, Ninja Forms. Contact Form 7 has a
   proper shim further down and the built-in form has .cf-*, so both are excluded
   here: these rules are blunt enough to override them by accident, and did (grey
   input fills and a 14px bottom margin leaking into .cf-grid's gap). */
.contact-form-col :is(input[type=text],input[type=email],input[type=tel],textarea,select):not(.wpcf7-form-control):not(.cf-field *){
  width:100%;padding:13px 15px;border:1px solid var(--line);
  border-radius:9px;font-family:'Inter',sans-serif;font-size:14.5px;margin-bottom:14px;background:var(--bg);}
.contact-form-col textarea:not(.wpcf7-form-control):not(.cf-field *){min-height:130px;}
.contact-form-col :is(input[type=submit],button[type=submit]):not(.cf-submit){background:var(--orange);
  color:#1a1206;font-weight:700;font-size:14.5px;padding:14px 26px;border:0;border-radius:9px;cursor:pointer;}
@media (max-width:900px){ .contact-grid{grid-template-columns:1fr;gap:34px;} }

/* Pagination --------------------------------------------------- */
.pagination{margin-top:40px;display:flex;gap:8px;justify-content:center;}
.pagination .page-numbers{padding:9px 14px;border:1px solid var(--line);border-radius:8px;
  text-decoration:none;color:var(--ink);font-size:14px;background:#fff;}
.pagination .page-numbers.current{background:var(--blue-bright);color:#fff;border-color:var(--blue-bright);}

/* Elementor: let its sections span the theme container ---------- */
.elementor-page .page-body{padding:0;}
.elementor-section.elementor-section-boxed > .elementor-container{max-width:1350px;}


/* ---- Fail-safes -------------------------------------------------------
   If GSAP fails to load (blocked CDN, JS error, ad-blocker) the page must
   still be readable rather than blank. JS re-hides these only once it is
   confirmed running. */
#hero-h span > span{display:inline-block;}
.no-js .hero-copy,.no-js .section-head{opacity:1 !important;transform:none !important;}
.page-body{position:relative;z-index:3;background:var(--bg);}
.cta-banner{position:relative;z-index:3;}

/* ============================================================
   FAQ — white background accordion, sits above the footer
   ============================================================ */
.faq-section{background:#fff;padding:96px 0 104px;position:relative;z-index:3;}
.faq-section .section-head{margin-bottom:40px;}
.faq-list{max-width:980px;}
.faq-item{border-bottom:1px solid var(--line);}
.faq-item:first-child{border-top:1px solid var(--line);}
.faq-q{margin:0;font-family:'Inter',sans-serif;}
.faq-trigger{display:flex;align-items:flex-start;gap:18px;width:100%;text-align:left;
  background:none;border:0;cursor:pointer;padding:24px 0;font-family:inherit;color:var(--ink);}
.faq-num{font-family:'IBM Plex Mono';font-size:12.5px;color:var(--blue-bright);
  padding-top:4px;flex-shrink:0;min-width:26px;}
.faq-text{font-family:'Space Grotesk';font-size:18px;font-weight:600;line-height:1.4;
  letter-spacing:-0.2px;flex:1 1 auto;transition:color .25s ease;}
.faq-trigger:hover .faq-text{color:var(--blue-bright);}
.faq-trigger:focus-visible{outline:2px solid var(--blue-bright);outline-offset:3px;border-radius:4px;}

/* plus/minus built from two bars so it can rotate to an × */
.faq-icon{position:relative;width:20px;height:20px;flex-shrink:0;margin-top:3px;}
.faq-icon i{position:absolute;top:50%;left:0;width:20px;height:2px;border-radius:2px;
  background:var(--muted);transition:transform .3s cubic-bezier(.65,0,.35,1), background .25s ease;}
.faq-icon i:nth-child(1){transform:translateY(-50%);}
.faq-icon i:nth-child(2){transform:translateY(-50%) rotate(90deg);}
.faq-item.open .faq-icon i{background:var(--blue-bright);}
.faq-item.open .faq-icon i:nth-child(2){transform:translateY(-50%) rotate(0deg);}

/* height is animated in JS from the measured inner height; `auto` is not
   interpolatable, so it cannot be transitioned directly */
.faq-a{height:0;overflow:hidden;}
.faq-a-inner{padding:0 0 26px 44px;font-size:15.5px;line-height:1.72;color:var(--muted);
  max-width:820px;}
.faq-a-inner p{margin:0 0 12px;}
.faq-a-inner p:last-child{margin-bottom:0;}
.faq-a-inner strong{color:var(--ink);}
.faq-a-inner ul{margin:0 0 12px 18px;}
.faq-a-inner li{margin-bottom:7px;}

.faq-foot{margin-top:44px;display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  padding-top:30px;border-top:1px solid var(--line);}
.faq-foot span{font-size:15.5px;color:var(--muted);}

@media (max-width:720px){
  .faq-section{padding:70px 0 76px;}
  .faq-text{font-size:16px;}
  .faq-trigger{gap:12px;}
  .faq-a-inner{padding-left:0;}
}

/* No-JS / failed-JS fallback: answers must stay readable */
.no-js .faq-a{height:auto;}

/* ============================================================
   INDUSTRIES — interactive title list (alternative layout)

   The wipe inverts the whole section as you scroll. It is done with
   mix-blend-mode:difference over a two-tone background rather than by
   clipping a gradient to the text: `background-clip:text` combined with
   `background-attachment:fixed` measured out of alignment in Chrome — the
   background flipped at the wipe line but the text did not, leaving white
   text on a near-white background. Difference blending inverts against
   whatever is actually behind each pixel, so the two can never disagree.

   Everything inside the blend layer is white or neutral grey on purpose:
   greys invert to clean greys, while saturated colours invert to unrelated
   hues.
   ============================================================ */
.indl{--wipe:100%;position:relative;z-index:3;isolation:isolate;
  background:linear-gradient(to right, #0a0e22 var(--wipe), #f4f5f9 var(--wipe));}
.indl-track{position:relative;height:260vh;}
.indl-sticky{position:sticky;top:0;min-height:100vh;display:flex;align-items:center;
  padding:110px 0 70px;mix-blend-mode:difference;z-index:3;}

.indl-head{margin-bottom:34px;}
.indl .section-kicker{color:#b9c0d6;}
.indl-head h2{color:#ffffff;}

.indl-list{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,0.22);}
.indl-row{border-bottom:1px solid rgba(255,255,255,0.22);}
.indl-row a{display:flex;align-items:center;gap:22px;padding:18px 4px;text-decoration:none;
  position:relative;}
.indl-num{font-family:'IBM Plex Mono';font-size:13px;flex-shrink:0;min-width:34px;color:#8f8f8f;}
.indl-title{font-family:'Space Grotesk';font-weight:400;letter-spacing:-0.5px;line-height:1.05;
  font-size:clamp(24px,3.4vw,46px);color:#ffffff;
  transition:transform .42s cubic-bezier(.65,0,.35,1);will-change:transform;}
.indl-go{margin-left:auto;width:26px;height:26px;flex-shrink:0;color:#ffffff;
  opacity:0;transform:translateX(-14px);transition:opacity .35s ease, transform .35s ease;}
.indl-go svg{width:100%;height:100%;}
.indl-foot{margin-top:30px;font-size:13px;font-family:'IBM Plex Mono';letter-spacing:0.4px;color:#8f8f8f;}

/* pointer devices get the lift + cursor-follower; touch keeps a plain tap list */
@media (hover:hover) and (pointer:fine){
  .indl-row a:hover .indl-title{transform:translateX(26px);}
  .indl-row a:hover .indl-go{opacity:1;transform:translateX(0);}
  .indl-list.is-hovering .indl-row{transition:opacity .35s ease;opacity:0.32;}
  .indl-list.is-hovering .indl-row.is-active{opacity:1;}
}

/* Cursor follower — painted BEHIND the text layer (z-index 1 vs 2), so it
   becomes part of the backdrop the type blends against.

   That is why the image is held at reduced opacity: difference blending only
   reads clearly when the backdrop sits near one end of the range. A full
   strength photo pushes large areas to mid-grey, where |255 - backdrop| lands
   close to the backdrop itself and the type washes out. Damping the photo
   keeps the composite near the section colour and the text legible. */
.indl-reveal{position:fixed;top:0;left:0;width:400px;height:280px;pointer-events:none;
  z-index:1;opacity:0;border-radius:14px;overflow:hidden;
  will-change:transform,opacity;}
.indl-reveal-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;display:block;filter:saturate(1.2) contrast(1.06);}
.indl-reveal-img.is-shown{opacity:1;}

/* Veil: sits between the photo and the type, carrying the SAME split gradient
   as the section and reading the same --wipe.

   It exists because difference blending cannot render white type against a
   mid-tone photo — |255 - backdrop| lands near the backdrop itself and the
   text disappears. Measured across 51 glyph samples, contrast bottomed out at
   1.3:1 with the bare photo behind, at every opacity tried. The veil restores
   a near-solid backdrop so the inversion behaves exactly as it does over the
   plain section, while the photo still reads through it.

   Because the veil is the same colour as the section background, it is
   invisible at rest — it only does anything where the photo is underneath.

   TUNING. The veil is now only a light final settle — the keying layers below
   do the real work, which is why this can sit at 0.20 where a flat veil needed
   0.68 to keep the type legible.

   Measured from rendered pixels, hovered title against its own backdrop, and
   photo visibility as the 5th-to-95th percentile luminance spread inside the
   photo box:

                        dark side          light side
       flat veil 0.68   7.24:1 / 0.116     4.43:1 / 0.504
       keyed (now)      4.54:1 / 0.275     6.64:1 / 0.541

   So the photo reads about 2.4x stronger on the dark side, the light side
   improved on both counts, and every figure still clears 4.5:1 — the threshold
   for normal text, where type this large only needs 3:1.

   The three opacities were chosen by sweeping 18 combinations and taking the
   one with the most visible photo that kept both sides above 4.5:1. Changing
   any of them changes the others' effect, so re-measure rather than nudging. */
.indl-veil{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(to right, #0a0e22 var(--wipe), #f4f5f9 var(--wipe));
  opacity:0.20;}

/* Keying layers — the reason the veil above can be this low.
   A flat veil trades photo visibility against text contrast one-for-one: every
   point of photo you gain drags the backdrop toward mid-grey, where |255 - B|
   lands near B itself and the type fades. Keying breaks that trade. Multiply on
   the dark side and screen on the light side compress the photo toward the
   section's own end of the range, so the backdrop stays extreme (type stays
   legible) while the photo keeps all of its structure (it reads as a strong
   image, not a faint one).
   `transparent` is a hard stop against the same position, so each layer is a
   no-op on the other side of the wipe — a zero-alpha source leaves the backdrop
   untouched under both blend modes. */
.indl-key{position:absolute;inset:0;z-index:2;pointer-events:none;}
.indl-key-dark{mix-blend-mode:multiply;opacity:0.22;
  background:linear-gradient(to right, #0a0e22 var(--wipe), transparent var(--wipe));}
.indl-key-light{mix-blend-mode:screen;opacity:0.80;
  background:linear-gradient(to right, transparent var(--wipe), #f4f5f9 var(--wipe));}
@media (hover:none),(pointer:coarse){ .indl-reveal{display:none;} }

@media (max-width:820px){
  .indl-track{height:auto;}
  .indl-sticky{position:static;min-height:0;padding:70px 0;}
  .indl-row a{gap:14px;padding:15px 2px;}
  .indl-go{display:none;}
}

/* If blending is unsupported the section simply stays dark with white type,
   which is readable — the wipe is an enhancement, never load-bearing. */
@supports not (mix-blend-mode:difference){
  .indl{background:#0a0e22;}
}

/* ============================================================
   MISSION & VISION (About page)
   ------------------------------------------------------------
   Same mechanism as the Industries title list: one custom property, --wipe,
   is scrubbed from 100% to 0% and drives a hard-stop gradient on the section,
   while the content sits in a mix-blend-mode:difference layer above it. The
   type therefore inverts against whatever is actually behind each pixel, so
   background and text can never disagree at the wipe line.

   Two hard stops at the same position means no interpolation, so the edge
   stays a crisp vertical line rather than a soft band.

   Everything inside the blend layer is white or neutral grey on purpose:
   greys invert to clean greys, saturated colours invert to unrelated hues.
   ============================================================ */
.mv{--wipe:100%;position:relative;z-index:3;isolation:isolate;
  background:linear-gradient(to right, #0a0e22 var(--wipe), #f4f5f9 var(--wipe));}
.mv-track{position:relative;height:210vh;}
.mv-sticky{position:sticky;top:0;min-height:100vh;display:flex;align-items:center;
  padding:120px 0 80px;mix-blend-mode:difference;}

.mv-head{margin-bottom:54px;}
.mv .section-kicker{color:#b9c0d6;}
.mv-head h2{color:#ffffff;max-width:900px;}

.mv-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;}
.mv-col{position:relative;padding-top:30px;border-top:1px solid rgba(255,255,255,0.25);}
.mv-num{position:absolute;top:30px;right:0;font-family:'IBM Plex Mono';font-size:12px;
  letter-spacing:1px;color:#8f8f8f;}
.mv-label{font-family:'Space Grotesk';font-weight:500;font-size:clamp(22px,2.4vw,30px);
  letter-spacing:-0.4px;color:#ffffff;margin-bottom:10px;}
.mv-lede{font-family:'IBM Plex Mono';font-size:12px;letter-spacing:1.2px;
  text-transform:uppercase;color:#8f8f8f;margin-bottom:22px;}
.mv-body{font-size:clamp(17px,1.5vw,21px);line-height:1.62;color:#e8e8e8;
  max-width:560px;font-weight:300;}
.mv-note{display:inline-block;margin-top:26px;font-family:'IBM Plex Mono';font-size:11.5px;
  letter-spacing:1px;text-transform:uppercase;color:#8f8f8f;
  padding-top:16px;border-top:1px solid rgba(255,255,255,0.18);}

@media (max-width:900px){
  .mv-track{height:auto;}
  .mv-sticky{position:static;min-height:0;padding:76px 0;}
  .mv-grid{grid-template-columns:1fr;gap:46px;}
  .mv-head{margin-bottom:38px;}
}

/* Without blending the wipe cannot work, so the section just stays dark with
   white type — readable on its own; the inversion is an enhancement. */
@supports not (mix-blend-mode:difference){
  .mv{background:#0a0e22;}
}

/* ============================================================
   SERVICE DETAIL PAGE  (.sd-*)
   ------------------------------------------------------------
   Twelve sections sharing one scale. Everything here is prefixed sd- so it
   cannot collide with the homepage sections, and so the whole template can be
   lifted into another theme as one block.

   Rhythm: the page alternates white and off-white, with exactly two dark bands
   (hero and "why us") plus the dark close. Contrast breaks are rationed — a
   page that alternates dark and light every section reads as a stack of
   unrelated pages rather than one argument.

   --accent is set per service from the post's accent colour, so one stylesheet
   dresses twelve different-looking pages.
   ============================================================ */
/* The site header is position:fixed, so the sticky section nav has to stop
   below it rather than at 0. One variable so the two stay in step; it also sets
   the scroll offset for in-page anchors. */
.sd-page{--hdr:72px;--sdnav:60px;
  /* Text-safe accents. The raw --accent is a brand colour picked for impact, not
     for legibility: measured against white it runs from 4.70:1 (blue) down to
     1.97:1 (teal), so using it directly for small labels or as a fill behind
     white button text fails WCAG AA on most services.
       --accent-ink  darkened for text on light, and for fills carrying white text
       --accent-lite lightened for text on the dark bands
       --accent-bright lightened fill for dark-section buttons carrying dark text
     At the 55% mix every shipped accent clears 5:1 in both directions. The raw
     --accent stays in use for decoration only: glows, chart bars, rules, borders. */
  --accent-ink:#0E4DA4;
  --accent-lite:#7FB0F0;
  --accent-bright:#3986E5;}
@supports (color: color-mix(in srgb, red 50%, blue)){
  .sd-page{--accent-ink:color-mix(in srgb, var(--accent,#1671E0) 55%, #0A1628);
           --accent-lite:color-mix(in srgb, var(--accent,#1671E0) 66%, #ffffff);
           --accent-bright:color-mix(in srgb, var(--accent,#1671E0) 85%, #ffffff);}
}
@media (max-width:860px){ .sd-page{--hdr:66px;--sdnav:54px;} }

.sd-sec{padding:clamp(72px,8vw,124px) 0;background:#fff;position:relative;}
/* Landing anchors must clear the header AND the sticky nav. Lenis computes the
   same distance at click time; this covers native jumps and reduced motion. */
.sd-page [id]{scroll-margin-top:calc(var(--hdr) + var(--sdnav) + 12px);}
.sd-sec + .sd-sec{border-top:1px solid var(--line);}
/* alternate the ground so adjacent sections separate without a rule everywhere */
.sd-problems,.sd-process,.sd-eng{background:var(--bg);}

.sd-kicker{font-family:'IBM Plex Mono';font-size:11.5px;letter-spacing:2px;
  text-transform:uppercase;color:var(--accent-ink,#0E4DA4);margin-bottom:14px;font-weight:500;}
.sd-kicker-light{color:rgba(255,255,255,0.62);}
.sd-h2{font-family:'Space Grotesk';font-weight:500;letter-spacing:-1px;line-height:1.08;
  font-size:clamp(28px,3.6vw,50px);max-width:18ch;}
.sd-lede{margin-top:18px;font-size:clamp(16px,1.3vw,18.5px);line-height:1.68;
  color:var(--muted);max-width:60ch;font-weight:300;}
.sd-head{margin-bottom:clamp(38px,4.4vw,64px);}
.sd-prose{margin-top:20px;font-size:16.5px;line-height:1.72;color:var(--muted);max-width:62ch;}
.sd-prose p{margin-bottom:16px;}
.sd-prose p:last-child{margin-bottom:0;}

/* Buttons ------------------------------------------------------ */
.sd-btn{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:600;
  padding:15px 26px;border-radius:10px;text-decoration:none;white-space:nowrap;
  transition:transform .22s cubic-bezier(.65,0,.35,1), box-shadow .22s ease, background .22s ease;}
.sd-btn svg{width:17px;height:17px;transition:transform .22s cubic-bezier(.65,0,.35,1);}
.sd-btn:hover{transform:translateY(-2px);}
.sd-btn:hover svg{transform:translateX(4px);}
/* The primary button only ever sits on a dark band (hero, closing CTA). A
   bright accent fill with white text fails on four of the six shipped accents
   (pink 2.78:1, teal 1.97:1), and a darkened fill with white text passes but
   reads muted on dark. Lightening the fill and setting DARK text on it clears
   4.93:1 on every accent while keeping the colour vivid. */
.sd-btn-primary{background:var(--accent-bright,#3986E5);color:var(--ink);
  box-shadow:0 10px 30px -10px color-mix(in srgb, var(--accent,#1671E0) 60%, transparent);}
.sd-btn-primary:hover{filter:brightness(1.06);}
.sd-btn-ghost{color:#fff;border:1px solid rgba(255,255,255,0.28);background:rgba(255,255,255,0.04);}
.sd-btn-ghost:hover{background:rgba(255,255,255,0.1);}
/* @supports guard: color-mix is widely supported, but the shadow is decoration
   and a flat fallback is fine where it is not. */
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .sd-btn-primary{box-shadow:0 10px 30px -10px rgba(6,32,74,0.5);}
}

/* 1. HERO ------------------------------------------------------ */
.sd-hero{position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% -10%, #101a44 0%, #0a0e22 62%);
  color:#fff;padding:clamp(130px,13vw,184px) 0 clamp(70px,7vw,104px);}
.sd-hero-grid{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:
    repeating-linear-gradient(0deg, rgba(148,163,253,0.05) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, rgba(148,163,253,0.05) 0 1px, transparent 1px 44px);
  mask-image:radial-gradient(ellipse at 50% 30%, #000 30%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 30%, #000 30%, transparent 78%);}
.sd-hero-glow{position:absolute;top:-20%;left:50%;width:min(900px,90vw);height:520px;
  transform:translateX(-50%);pointer-events:none;border-radius:50%;filter:blur(90px);opacity:.3;
  background:radial-gradient(circle, var(--accent,#1671E0) 0%, transparent 68%);}
.sd-hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr 1fr;
  gap:clamp(30px,4vw,64px);align-items:center;}

/* justify-content and max-width are resets: this is a <nav>, so the bare
   `nav {}` header rule would otherwise space-between the crumbs across 1350px. */
.sd-crumb{display:flex;align-items:center;gap:10px;font-family:'IBM Plex Mono';font-size:11.5px;
  letter-spacing:1.4px;text-transform:uppercase;color:rgba(255,255,255,0.5);
  margin:0 0 22px;padding:0;max-width:none;justify-content:flex-start;}
.sd-crumb a{color:inherit;text-decoration:none;}
.sd-crumb a:hover{color:#fff;}
.sd-crumb-cat{color:var(--accent-lite,#5C9BEC);}

.sd-hero-h{font-family:'Space Grotesk';font-weight:500;letter-spacing:-1.6px;line-height:1.02;
  font-size:clamp(36px,5.4vw,70px);}
.sd-hero-sub{margin-top:20px;font-size:clamp(16px,1.35vw,19px);line-height:1.66;font-weight:300;
  color:rgba(255,255,255,0.74);max-width:52ch;}
.sd-hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px;}

.sd-hero-metrics{list-style:none;display:flex;flex-wrap:wrap;gap:clamp(22px,3vw,48px);
  margin:46px 0 0;padding:26px 0 0;border-top:1px solid rgba(255,255,255,0.14);}
.sd-hero-metrics b{display:block;font-family:'Space Grotesk';font-weight:500;letter-spacing:-0.8px;
  font-size:clamp(24px,2.4vw,32px);color:#fff;}
.sd-hero-metrics span{display:block;margin-top:5px;font-size:12.5px;line-height:1.45;
  color:rgba(255,255,255,0.5);max-width:20ch;}

/* Hero mockup — drawn, not photographed (see mockup.php) */
.sd-hero-visual{position:relative;}
/* The wrapper exists so the floating chips can sit outside .sd-mock, which
   clips its own overflow to keep the window frame's rounded corners. */
.sd-mock-wrap{position:relative;}
.sd-mock{position:relative;border-radius:16px;overflow:hidden;background:#0d1330;
  border:1px solid rgba(255,255,255,0.12);box-shadow:0 40px 90px -40px rgba(0,0,0,0.85);
  transform:perspective(1400px) rotateY(-9deg) rotateX(3deg);transform-origin:center;}
.sd-mock-photo{padding:0;aspect-ratio:4/3;}
.sd-mock-photo img{width:100%;height:100%;object-fit:cover;}
.sd-mock-bar{display:flex;align-items:center;gap:7px;padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,0.09);background:rgba(255,255,255,0.03);}
.sd-dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,0.18);}
.sd-mock-url{flex:1;height:8px;border-radius:4px;margin-left:8px;background:rgba(255,255,255,0.08);}
.sd-mock-body{display:grid;grid-template-columns:62px 1fr;min-height:250px;}
.sd-mock-side{padding:16px 12px;border-right:1px solid rgba(255,255,255,0.08);
  display:flex;flex-direction:column;gap:11px;}
.sd-mock-avatar{width:22px;height:22px;border-radius:7px;background:var(--accent,#1671E0);opacity:.85;}
.sd-mock-side i{height:6px;border-radius:3px;background:rgba(255,255,255,0.1);}
.sd-mock-side i:nth-child(2){background:color-mix(in srgb, var(--accent,#1671E0) 55%, transparent);}
.sd-mock-main{padding:18px;display:flex;flex-direction:column;gap:16px;}
.sd-mock-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.sd-mock-stat{padding:11px;border-radius:9px;background:rgba(255,255,255,0.045);
  border:1px solid rgba(255,255,255,0.07);}
.sd-mock-stat b{display:block;height:11px;width:62%;border-radius:4px;background:rgba(255,255,255,0.3);}
.sd-mock-stat span{display:block;height:6px;width:86%;margin-top:7px;border-radius:3px;background:rgba(255,255,255,0.11);}
.sd-mock-stat:first-child b{background:var(--accent,#1671E0);}
.sd-mock-chart{display:flex;align-items:flex-end;gap:8px;height:96px;padding:12px;
  border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);}
.sd-mock-chart span{flex:1;border-radius:4px 4px 2px 2px;height:var(--h);
  background:linear-gradient(to top, color-mix(in srgb, var(--accent,#1671E0) 30%, transparent), var(--accent,#1671E0));
  transform-origin:bottom;animation:sd-grow .9s cubic-bezier(.22,1,.36,1) both;animation-delay:var(--d);}
@keyframes sd-grow{from{transform:scaleY(0.06);opacity:0;}to{transform:scaleY(1);opacity:1;}}
.sd-mock-lines{display:flex;flex-direction:column;gap:8px;}
.sd-mock-lines i{height:7px;border-radius:4px;background:rgba(255,255,255,0.09);}
.sd-mock-lines i:nth-child(2){width:78%;}
.sd-mock-lines i:nth-child(3){width:54%;}
/* two floating chips to break the rectangle */
.sd-mock-float{position:absolute;border-radius:12px;padding:11px 13px;display:flex;align-items:center;gap:9px;
  background:rgba(16,22,56,0.92);border:1px solid rgba(255,255,255,0.14);
  box-shadow:0 18px 40px -18px rgba(0,0,0,0.8);animation:sd-float 5.5s ease-in-out infinite;}
.sd-mock-float i{display:block;height:6px;border-radius:3px;background:rgba(255,255,255,0.22);width:44px;}
.sd-mock-float-a{top:14%;right:-4%;animation-delay:-1.4s;}
.sd-mock-float-b{bottom:10%;left:-5%;flex-direction:column;align-items:flex-start;gap:6px;}
.sd-mock-float-b i:nth-child(2){width:28px;background:var(--accent,#1671E0);}
.sd-mock-tick{width:18px;height:18px;border-radius:50%;flex-shrink:0;
  background:color-mix(in srgb, var(--accent,#1671E0) 30%, transparent);
  border:1.5px solid var(--accent,#1671E0);}
@keyframes sd-float{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}
@media (prefers-reduced-motion:reduce){
  .sd-mock-float{animation:none;}
  .sd-mock-chart span{animation:none;}
}

/* 2. STICKY SECTION NAV ---------------------------------------- */
.sd-nav{position:sticky;top:var(--hdr,72px);z-index:120;background:rgba(255,255,255,0.86);
  backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);}
.sd-nav-inner{display:flex;align-items:center;gap:22px;height:60px;}
.sd-nav-label{font-family:'IBM Plex Mono';font-size:10.5px;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--muted-mid);flex-shrink:0;}
.sd-nav-links{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;flex:1;
  /* min-width:0 is load-bearing. A flex item defaults to min-width:auto, which
     refuses to shrink below its content, so on a phone the row of links pushed
     the document wider than the viewport and overflow-x:auto never engaged.
     Measured: 681px of scrollWidth in a 390px viewport before this line. */
  min-width:0;
  /* reset the bare `nav {}` header rule, which otherwise caps this at 1350px
     and adds padding — the same trap the mobile drawer hits */
  max-width:none;margin:0;padding:0;justify-content:flex-start;}
.sd-nav-links::-webkit-scrollbar{display:none;}
.sd-nav-links a{position:relative;white-space:nowrap;text-decoration:none;font-size:13.5px;
  font-weight:500;color:var(--muted);padding:8px 13px;border-radius:7px;
  transition:color .2s ease,background .2s ease;}
.sd-nav-links a:hover{color:var(--ink);background:rgba(10,22,40,0.04);}
.sd-nav-links a.is-current{color:var(--accent-ink,#0E4DA4);background:rgba(10,22,40,0.05);}
.sd-nav-cta{flex-shrink:0;font-size:13.5px;font-weight:600;text-decoration:none;color:#fff;
  background:var(--ink);padding:10px 18px;border-radius:8px;transition:background .2s ease;}
.sd-nav-cta:hover{background:var(--navy);}
@media (max-width:860px){
  .sd-nav-label,.sd-nav-cta{display:none;}
  .sd-nav-inner{height:54px;gap:0;}
}

/* 3. OVERVIEW -------------------------------------------------- */
.sd-ov-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,84px);align-items:start;}
.sd-ov-benefits{list-style:none;margin:0;padding:0;display:grid;gap:8px;}
.sd-ov-benefits li{display:flex;gap:16px;padding:22px;border-radius:14px;
  border:1px solid transparent;transition:border-color .25s ease,background .25s ease;}
.sd-ov-benefits li:hover{background:var(--bg);border-color:var(--line);}
.sd-ov-check{width:28px;height:28px;border-radius:9px;flex-shrink:0;display:flex;
  align-items:center;justify-content:center;color:var(--accent-ink,#0E4DA4);
  background:color-mix(in srgb, var(--accent,#1671E0) 14%, transparent);}
.sd-ov-check svg{width:15px;height:15px;}
.sd-ov-benefits h3{font-size:17px;font-weight:600;letter-spacing:-0.2px;margin-bottom:5px;}
.sd-ov-benefits p{font-size:14.5px;line-height:1.62;color:var(--muted);}

/* 4. PROBLEMS -------------------------------------------------- */
.sd-prob-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
.sd-prob{position:relative;background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:clamp(24px,2.6vw,34px);transition:transform .3s cubic-bezier(.65,0,.35,1),box-shadow .3s ease;}
.sd-prob:hover{transform:translateY(-4px);box-shadow:0 22px 50px -28px rgba(6,32,74,0.4);}
.sd-prob-n{font-family:'IBM Plex Mono';font-size:11.5px;letter-spacing:1.4px;
  color:var(--muted-mid);display:block;margin-bottom:16px;}
.sd-prob-q{font-family:'Space Grotesk';font-size:clamp(18px,1.6vw,22px);font-weight:500;
  line-height:1.32;letter-spacing:-0.4px;color:var(--ink);}
.sd-prob-a{display:flex;gap:13px;margin-top:20px;padding-top:20px;border-top:1px dashed var(--line);}
.sd-prob-arrow{width:24px;height:24px;border-radius:50%;flex-shrink:0;display:flex;
  align-items:center;justify-content:center;color:var(--accent-ink,#0E4DA4);
  background:color-mix(in srgb, var(--accent,#1671E0) 14%, transparent);}
.sd-prob-arrow svg{width:13px;height:13px;}
.sd-prob-a p{font-size:15px;line-height:1.66;color:var(--muted);}

/* 5. CAPABILITIES ---------------------------------------------- */
.sd-cap-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:18px;overflow:hidden;}
.sd-cap{background:#fff;padding:clamp(24px,2.4vw,32px);min-height:190px;
  display:flex;flex-direction:column;transition:background .25s ease;}
.sd-cap:hover{background:var(--bg);}
.sd-cap-n{font-family:'IBM Plex Mono';font-size:11px;letter-spacing:1.4px;
  color:var(--accent-ink,#0E4DA4);margin-bottom:auto;}
.sd-cap h3{font-family:'Space Grotesk';font-size:17.5px;font-weight:500;letter-spacing:-0.3px;
  line-height:1.26;margin-top:26px;}
.sd-cap p{margin-top:9px;font-size:14px;line-height:1.6;color:var(--muted);}

/* 6. TECHNOLOGY ------------------------------------------------ */
.sd-tech-rows{display:grid;gap:0;border-top:1px solid var(--line);}
.sd-tech-row{display:grid;grid-template-columns:230px 1fr;gap:clamp(20px,3vw,48px);
  padding:28px 0;border-bottom:1px solid var(--line);align-items:baseline;}
.sd-tech-group{font-family:'IBM Plex Mono';font-size:12px;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--muted-mid);font-weight:500;}
.sd-tech-list{list-style:none;display:flex;flex-wrap:wrap;gap:9px;margin:0;padding:0;}
.sd-tech-list li{font-family:'Space Grotesk';font-size:15px;font-weight:500;letter-spacing:-0.2px;
  color:var(--ink);padding:9px 16px;border:1px solid var(--line);border-radius:9px;background:#fff;
  transition:border-color .22s ease,color .22s ease,transform .22s ease;}
.sd-tech-list li:hover{border-color:var(--accent,#1671E0);color:var(--accent-ink,#0E4DA4);transform:translateY(-2px);}

/* 7. PROCESS --------------------------------------------------- */
/* Column count follows the number of steps actually written, not a fixed six:
   services run 4, 5 or 6 stages and a six-column grid holding four steps leaves
   two dead columns. --steps is set inline from the template. */
.sd-steps{list-style:none;margin:0;padding:0;position:relative;
  display:grid;grid-template-columns:repeat(var(--steps,6),1fr);gap:clamp(14px,1.8vw,26px);}
.sd-steps-rail{position:absolute;top:19px;left:0;right:0;height:2px;
  background:var(--line);border-radius:2px;}
.sd-steps-fill{display:block;height:100%;width:0;border-radius:2px;background:var(--accent,#1671E0);}
.sd-step{position:relative;padding-top:56px;}
.sd-step-node{position:absolute;top:0;left:0;width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:#fff;
  border:2px solid var(--line);font-family:'IBM Plex Mono';font-size:12px;color:var(--muted-mid);
  transition:border-color .35s ease,color .35s ease,background .35s ease;}
.sd-step.is-on .sd-step-node{border-color:var(--accent,#1671E0);color:var(--accent-ink,#0E4DA4);
  background:color-mix(in srgb, var(--accent,#1671E0) 8%, #fff);}
.sd-step h3{font-family:'Space Grotesk';font-size:18px;font-weight:500;letter-spacing:-0.3px;}
.sd-step p{margin-top:9px;font-size:14px;line-height:1.62;color:var(--muted);}

/* 8. CASE STUDIES ---------------------------------------------- */
.sd-work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
/* A three-column grid holding one card reads as a broken layout, so the column
   count follows the number of cards actually rendered. */
.sd-work-grid[data-n="1"]{grid-template-columns:minmax(0,560px);}
.sd-work-grid[data-n="2"]{grid-template-columns:repeat(2,1fr);}
.sd-case{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;
  transition:transform .32s cubic-bezier(.65,0,.35,1),box-shadow .32s ease;}
.sd-case:hover{transform:translateY(-5px);box-shadow:0 28px 60px -30px rgba(6,32,74,0.42);}
.sd-case-link{display:block;text-decoration:none;color:inherit;height:100%;}
.sd-case-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--navy);
  display:flex;align-items:center;justify-content:center;}
.sd-case-media img{width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.22,1,.36,1);}
.sd-case:hover .sd-case-media img{transform:scale(1.05);}
.sd-case-ph{font-family:'Space Grotesk';font-size:40px;font-weight:500;color:rgba(255,255,255,0.28);
  letter-spacing:-1px;}
.sd-case-tag{position:absolute;left:14px;bottom:14px;font-family:'IBM Plex Mono';font-size:10.5px;
  letter-spacing:1.2px;text-transform:uppercase;color:#fff;padding:6px 11px;border-radius:20px;
  background:rgba(6,20,40,0.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,0.2);}
.sd-case-body{padding:clamp(20px,2.2vw,28px);}
.sd-case-client{font-family:'IBM Plex Mono';font-size:11px;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--accent-ink,#0E4DA4);margin-bottom:9px;}
.sd-case-title{font-family:'Space Grotesk';font-size:19px;font-weight:500;line-height:1.3;
  letter-spacing:-0.4px;}
.sd-case-x{margin-top:9px;font-size:14.5px;line-height:1.62;color:var(--muted);}
.sd-case-metrics{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
  margin:20px 0 0;padding:18px 0 0;border-top:1px solid var(--line);}
.sd-case-metrics b{display:block;font-family:'Space Grotesk';font-size:20px;font-weight:500;
  letter-spacing:-0.6px;color:var(--ink);}
.sd-case-metrics span{display:block;margin-top:4px;font-size:11.5px;line-height:1.4;color:var(--muted-mid);}
.sd-case-svcs{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px;}
.sd-case-svcs span{font-family:'IBM Plex Mono';font-size:10.5px;letter-spacing:0.8px;
  color:var(--muted);border:1px solid var(--line);padding:5px 9px;border-radius:14px;}

/* 9. INDUSTRIES ------------------------------------------------ */
.sd-ind-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.sd-ind-grid[data-n="1"]{grid-template-columns:minmax(0,480px);}
.sd-ind-grid[data-n="2"]{grid-template-columns:repeat(2,1fr);}
.sd-ind{position:relative;display:block;min-height:210px;border-radius:18px;overflow:hidden;
  text-decoration:none;color:#fff;background:var(--navy);
  transition:transform .32s cubic-bezier(.65,0,.35,1);}
.sd-ind:hover{transform:translateY(-5px);}
.sd-ind-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .7s cubic-bezier(.22,1,.36,1);}
.sd-ind:hover .sd-ind-bg{transform:scale(1.07);}
.sd-ind-scrim{position:absolute;inset:0;
  background:linear-gradient(to top, rgba(4,12,30,0.92) 12%, rgba(4,12,30,0.32) 62%, rgba(4,12,30,0.18) 100%);
  transition:background .32s ease;}
.sd-ind:hover .sd-ind-scrim{background:linear-gradient(to top,
  color-mix(in srgb, var(--tint,#1671E0) 60%, rgba(4,12,30,0.95)) 8%, rgba(4,12,30,0.4) 70%);}
.sd-ind-body{position:absolute;left:0;right:0;bottom:0;padding:22px;}
.sd-ind-title{display:block;font-family:'Space Grotesk';font-size:19px;font-weight:500;
  letter-spacing:-0.4px;line-height:1.22;}
.sd-ind-sub{display:block;margin-top:6px;font-size:13.5px;line-height:1.5;color:rgba(255,255,255,0.72);}
.sd-ind-go{position:absolute;top:18px;right:18px;width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:#fff;
  background:rgba(255,255,255,0.14);border:1px solid rgba(255,255,255,0.22);
  opacity:0;transform:translateX(-6px);transition:opacity .28s ease,transform .28s ease;}
.sd-ind-go svg{width:15px;height:15px;}
.sd-ind:hover .sd-ind-go{opacity:1;transform:translateX(0);}

/* 10. WHY US (dark band) --------------------------------------- */
.sd-why{background:radial-gradient(ellipse at 20% 0%, #101a44 0%, #0a0e22 60%);color:#fff;overflow:hidden;}
.sd-why + .sd-sec{border-top:0;}
.sd-why-glow{position:absolute;top:-30%;right:-10%;width:640px;height:520px;pointer-events:none;
  border-radius:50%;filter:blur(100px);opacity:.26;
  background:radial-gradient(circle, var(--accent,#1671E0) 0%, transparent 70%);}
.sd-why .sd-h2{color:#fff;}
.sd-why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;position:relative;z-index:2;}
.sd-why-card{padding:clamp(24px,2.5vw,32px);border-radius:16px;
  background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);
  transition:background .28s ease,border-color .28s ease,transform .28s cubic-bezier(.65,0,.35,1);}
.sd-why-card:hover{background:rgba(255,255,255,0.07);border-color:rgba(255,255,255,0.2);transform:translateY(-4px);}
.sd-why-n{font-family:'IBM Plex Mono';font-size:11px;letter-spacing:1.4px;
  color:var(--accent-lite,#5C9BEC);display:block;margin-bottom:22px;}
.sd-why-card h3{font-family:'Space Grotesk';font-size:18px;font-weight:500;letter-spacing:-0.3px;
  line-height:1.26;color:#fff;}
.sd-why-card p{margin-top:10px;font-size:14.5px;line-height:1.64;color:rgba(255,255,255,0.64);}

/* 11. ENGAGEMENT MODELS ---------------------------------------- */
.sd-eng-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:stretch;}
.sd-eng-card{position:relative;display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--line);border-radius:18px;padding:clamp(24px,2.5vw,32px);
  transition:transform .3s cubic-bezier(.65,0,.35,1),box-shadow .3s ease,border-color .3s ease;}
.sd-eng-card:hover{transform:translateY(-4px);box-shadow:0 26px 56px -30px rgba(6,32,74,0.4);}
.sd-eng-card.is-featured{border-color:var(--accent,#1671E0);
  box-shadow:0 0 0 1px var(--accent,#1671E0), 0 26px 56px -32px rgba(6,32,74,0.42);}
.sd-eng-flag{position:absolute;top:-11px;left:clamp(24px,2.5vw,32px);font-family:'IBM Plex Mono';
  font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:#fff;
  background:var(--accent-ink,#0E4DA4);padding:5px 11px;border-radius:20px;}
.sd-eng-name{font-family:'Space Grotesk';font-size:20px;font-weight:500;letter-spacing:-0.4px;}
.sd-eng-for{margin-top:8px;font-size:14px;line-height:1.58;color:var(--muted);min-height:44px;}
.sd-eng-list{list-style:none;margin:20px 0 24px;padding:20px 0 0;border-top:1px solid var(--line);
  display:grid;gap:11px;}
.sd-eng-list li{display:flex;align-items:flex-start;gap:9px;font-size:14px;line-height:1.5;color:var(--ink);}
.sd-eng-list svg{width:14px;height:14px;flex-shrink:0;margin-top:3px;color:var(--accent-ink,#0E4DA4);}
.sd-eng-cta{margin-top:auto;display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  font-size:14px;font-weight:600;color:var(--accent-ink,#0E4DA4);}
.sd-eng-cta svg{width:15px;height:15px;transition:transform .22s cubic-bezier(.65,0,.35,1);}
.sd-eng-card:hover .sd-eng-cta svg{transform:translateX(4px);}

/* 12. FINAL CTA ------------------------------------------------ */
.sd-final{position:relative;overflow:hidden;color:#fff;text-align:center;
  background:radial-gradient(ellipse at 50% 120%, #142050 0%, #080c1e 62%);
  padding:clamp(86px,9vw,140px) 0;}
.sd-final-glow{position:absolute;bottom:-40%;left:50%;width:min(880px,94vw);height:600px;
  transform:translateX(-50%);pointer-events:none;border-radius:50%;filter:blur(100px);opacity:.34;
  background:radial-gradient(circle, var(--accent,#1671E0) 0%, transparent 68%);}
.sd-final-inner{position:relative;z-index:2;max-width:820px;}
.sd-final .sd-kicker{margin-bottom:18px;}
.sd-final-h{font-family:'Space Grotesk';font-weight:500;letter-spacing:-1.4px;line-height:1.06;
  font-size:clamp(30px,4.4vw,58px);}
.sd-final-sub{margin:20px auto 0;max-width:62ch;font-size:clamp(15.5px,1.3vw,18px);
  line-height:1.68;font-weight:300;color:rgba(255,255,255,0.7);}
.sd-final-ctas{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:36px;}

/* Scroll reveal ------------------------------------------------
   The class is added by JS only after it confirms GSAP is present; without it
   the rule below never applies and everything is simply visible. That ordering
   is deliberate — content must never depend on a script to become readable. */
.sd-anim .sd-rise{opacity:0;transform:translateY(22px);}

/* Responsive ---------------------------------------------------- */
@media (max-width:1180px){
  .sd-cap-grid{grid-template-columns:repeat(3,1fr);}
  .sd-why-grid,.sd-eng-grid{grid-template-columns:repeat(2,1fr);}
  /* min() so a 4-step process keeps 4 columns here rather than wrapping to 3+1 */
  .sd-steps{grid-template-columns:repeat(min(var(--steps,6),3),1fr);row-gap:38px;}
  .sd-steps-rail{display:none;}
}
@media (max-width:1000px){
  .sd-hero-inner{grid-template-columns:1fr;gap:48px;}
  .sd-hero-visual{max-width:560px;}
  .sd-mock{transform:none;}
  .sd-mock-float-a{right:-3%;}
  .sd-mock-float-b{left:-3%;}
  .sd-ov-grid{grid-template-columns:1fr;gap:34px;}
  .sd-work-grid,.sd-ind-grid{grid-template-columns:repeat(2,1fr);}
  .sd-tech-row{grid-template-columns:1fr;gap:14px;}
}
@media (max-width:760px){
  .sd-h2{max-width:none;}
  .sd-prob-grid{grid-template-columns:1fr;}
  .sd-cap-grid{grid-template-columns:repeat(2,1fr);}
  .sd-steps{grid-template-columns:repeat(min(var(--steps,6),2),1fr);}
  .sd-work-grid,.sd-ind-grid,.sd-why-grid,.sd-eng-grid{grid-template-columns:1fr;}
  .sd-hero-metrics{gap:20px 30px;}
  .sd-eng-for{min-height:0;}
  .sd-mock-float{display:none;}
}
@media (max-width:480px){
  .sd-cap-grid{grid-template-columns:1fr;}
  .sd-steps{grid-template-columns:1fr;row-gap:26px;}
  .sd-btn{width:100%;justify-content:center;}
  .sd-hero-ctas,.sd-final-ctas{flex-direction:column;}
}

/* color-mix is used for accent tints throughout; where it is unsupported the
   tinted surfaces fall back to the neutral card background rather than
   disappearing. */
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .sd-ov-check,.sd-prob-arrow{background:rgba(22,113,224,0.12);}
  .sd-step.is-on .sd-step-node{background:#fff;}
  .sd-ind:hover .sd-ind-scrim{background:linear-gradient(to top, rgba(4,12,30,0.95) 8%, rgba(4,12,30,0.4) 70%);}
}

/* Media band under the service hero ---------------------------------------
   Sits between the dark hero and the first light section, so it gets the dark
   ground: a bright band here would read as a third colour change in 200px. */
.sd-media{background:#0a0e22;padding:0 0 clamp(40px,5vw,72px);}
.sd-media-frame{margin:0;position:relative;}
.sd-media-frame img,.sd-media-video,.sd-media-embed{
  display:block;width:100%;border-radius:18px;overflow:hidden;
  border:1px solid rgba(255,255,255,0.12);
  box-shadow:0 40px 90px -46px rgba(0,0,0,0.9);}
.sd-media-frame img,.sd-media-video{aspect-ratio:16/9;object-fit:cover;}
.sd-media-cap{margin-top:14px;font-family:'IBM Plex Mono';font-size:11.5px;
  letter-spacing:1.2px;text-transform:uppercase;color:rgba(255,255,255,0.5);}

/* Embed facade: a poster plus a play button. The iframe is injected on click,
   so an unwatched video costs one image instead of a whole third-party player. */
.sd-media-embed{position:relative;aspect-ratio:16/9;background:#0d1330;cursor:pointer;}
.sd-media-embed .sd-media-poster{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;border:0;border-radius:0;box-shadow:none;}
.sd-media-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.sd-media-play{position:absolute;inset:0;width:100%;height:100%;display:flex;
  align-items:center;justify-content:center;background:rgba(6,14,34,0.35);
  border:0;cursor:pointer;transition:background .25s ease;}
.sd-media-embed:hover .sd-media-play{background:rgba(6,14,34,0.18);}
.sd-media-play-ic{width:76px;height:76px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;color:var(--ink);
  background:var(--accent-bright,#3986E5);
  box-shadow:0 14px 40px -12px rgba(0,0,0,0.6);
  transition:transform .28s cubic-bezier(.34,1.56,.64,1);}
.sd-media-embed:hover .sd-media-play-ic{transform:scale(1.08);}
.sd-media-play-ic svg{width:30px;height:30px;margin-left:3px;}
.sd-media-play:focus-visible{outline:3px solid #fff;outline-offset:-6px;}
.sd-media-embed.is-playing .sd-media-play,
.sd-media-embed.is-playing .sd-media-poster{display:none;}

@media (max-width:760px){
  .sd-media-play-ic{width:58px;height:58px;}
  .sd-media-play-ic svg{width:23px;height:23px;}
}

/* ============================================================
   ABOUT — JOURNEY TIMELINE (vertical, single column)
   ------------------------------------------------------------
   A rule down the left with year markers on it and cards to its right. The
   rule is drawn on scroll and each marker lights as the line reaches it, so
   the length of the company's history is something you feel rather than read.

   The rail is an absolutely positioned track with a scaleY fill rather than an
   animated height: transforms are composited, heights are not, and this runs
   the full length of a long section.
   ============================================================ */
.tl-sec{padding:clamp(72px,8vw,124px) 0;background:var(--bg);position:relative;}
.tl{list-style:none;margin:0;padding:0;position:relative;}
.tl-rail{position:absolute;left:11px;top:6px;bottom:6px;width:2px;
  background:var(--line);border-radius:2px;overflow:hidden;}
.tl-fill{display:block;width:100%;height:100%;border-radius:2px;
  background:linear-gradient(to bottom, var(--blue-bright), var(--teal));
  transform:scaleY(0);transform-origin:top;}

.tl-item{position:relative;padding:0 0 clamp(26px,3vw,44px) 46px;}
.tl-item:last-child{padding-bottom:0;}
.tl-node{position:absolute;left:4px;top:6px;width:16px;height:16px;border-radius:50%;
  background:#fff;border:2px solid var(--line);z-index:2;
  transition:border-color .4s ease, box-shadow .4s ease, transform .4s cubic-bezier(.34,1.56,.64,1);}
.tl-item.is-on .tl-node{border-color:var(--blue-bright);transform:scale(1.15);
  box-shadow:0 0 0 5px rgba(22,113,224,0.14);}

.tl-year{font-family:'IBM Plex Mono';font-size:13px;letter-spacing:1.6px;
  color:var(--muted-mid);margin-bottom:10px;transition:color .4s ease;}
.tl-item.is-on .tl-year{color:var(--blue);}

.tl-card{background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:clamp(20px,2.2vw,28px);max-width:760px;
  transition:transform .3s cubic-bezier(.65,0,.35,1), box-shadow .3s ease;}
.tl-card:hover{transform:translateY(-3px);box-shadow:0 20px 46px -26px rgba(6,32,74,0.34);}
.tl-card h3{font-family:'Space Grotesk';font-size:clamp(17px,1.7vw,21px);font-weight:500;
  letter-spacing:-0.3px;line-height:1.28;}
.tl-card p{margin-top:9px;font-size:15px;line-height:1.66;color:var(--muted);}

@media (max-width:600px){
  .tl-item{padding-left:38px;}
  .tl-rail{left:8px;}
  .tl-node{left:1px;width:14px;height:14px;}
}

/* ============================================================
   CONTACT FORM
   ============================================================ */
.cf{background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:clamp(24px,3vw,38px);}
.cf-title{font-family:'Space Grotesk';font-size:clamp(20px,2.2vw,26px);font-weight:500;
  letter-spacing:-0.5px;}
.cf-sub{margin-top:8px;font-size:15px;line-height:1.6;color:var(--muted);}
.cf-form{margin-top:24px;}
.cf-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
.cf-field{display:flex;flex-direction:column;grid-column:1 / -1;}
.cf-half{grid-column:span 1;}
.cf-field label{font-size:13.5px;font-weight:600;margin-bottom:6px;color:var(--ink);}
.cf-req{color:var(--blue-bright);margin-left:2px;}
.cf-field input[type=text],.cf-field input[type=email],.cf-field input[type=tel],
.cf-field select,.cf-field textarea{
  width:100%;font-family:'Inter',sans-serif;font-size:15px;color:var(--ink);
  background:var(--bg);border:1px solid var(--line);border-radius:10px;
  padding:12px 14px;transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;}
.cf-field textarea{resize:vertical;min-height:120px;line-height:1.6;}
.cf-field input:focus,.cf-field select:focus,.cf-field textarea:focus{
  outline:none;background:#fff;border-color:var(--blue-bright);
  box-shadow:0 0 0 3px rgba(22,113,224,0.14);}
.cf-field.has-err input,.cf-field.has-err select,.cf-field.has-err textarea{
  border-color:#B3261E;background:#fff;}

.cf-check{display:flex;align-items:flex-start;gap:10px;font-size:14px;font-weight:400;
  line-height:1.55;color:var(--muted);cursor:pointer;margin-bottom:0;}
.cf-check input{width:17px;height:17px;flex-shrink:0;margin-top:2px;accent-color:var(--blue-bright);}

.cf-err{font-size:13px;color:#B3261E;margin-top:6px;}
.cf-err-top{margin:0 0 16px;padding:11px 14px;border-radius:10px;
  background:rgba(179,38,30,0.07);border:1px solid rgba(179,38,30,0.25);}

/* Orange, matching .btn-primary and the rest of the site's primary actions.
   The generic `.contact-form-col button[type=submit]` fallback further up now
   excludes .cf-submit, so this rule owns the button outright. */
.cf-submit{display:inline-flex;align-items:center;gap:10px;margin-top:22px;
  font-family:'Inter',sans-serif;font-size:15px;font-weight:700;color:#1a1206;
  background:var(--orange);border:0;border-radius:9px;padding:15px 26px;cursor:pointer;
  transition:transform .22s cubic-bezier(.65,0,.35,1), box-shadow .22s ease;}
.cf-submit svg{width:17px;height:17px;transition:transform .22s cubic-bezier(.65,0,.35,1);}
.cf-submit:hover{transform:translateY(-2px);box-shadow:0 12px 30px -12px rgba(245,162,93,0.75);}
.cf-submit:hover svg{transform:translateX(4px);}
.cf-submit:focus-visible{outline:3px solid var(--ink);outline-offset:3px;}
.cf-note{margin-top:14px;font-size:13.5px;color:var(--muted);}

/* Honeypot: moved off-screen rather than display:none. Some bots skip hidden
   inputs but happily fill a visible one they cannot see the position of. */
.cf-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

.cf-done{text-align:center;padding:clamp(18px,3vw,34px) 0;}
.cf-done-ic{width:56px;height:56px;border-radius:50%;display:inline-flex;
  align-items:center;justify-content:center;margin-bottom:18px;
  color:#0F7B4F;background:rgba(15,123,79,0.12);}
.cf-done-ic svg{width:26px;height:26px;}
.cf-done h3{font-family:'Space Grotesk';font-size:22px;font-weight:500;letter-spacing:-0.4px;}
.cf-done p{margin-top:9px;font-size:15px;line-height:1.66;color:var(--muted);max-width:44ch;
  margin-left:auto;margin-right:auto;}

@media (max-width:620px){
  .cf-grid{grid-template-columns:1fr;}
  .cf-half{grid-column:1 / -1;}
  .cf-submit{width:100%;justify-content:center;}
}

/* Contact: several labelled inboxes rather than one address */
.contact-emails{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:7px;}
.contact-emails li{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;}
.contact-email-label{font-family:'IBM Plex Mono';font-size:10.5px;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--muted-mid);min-width:62px;}

/* ============================================================
   MOBILE HEADER & FOOTER
   ============================================================ */

/* The logo was stretching because .logo-img fixes a height while the two
   stacked images are absolutely positioned over each other — without an
   explicit width:auto the second one inherits the box rather than its own
   aspect ratio. object-fit is the belt-and-braces half of the same fix. */
.logo-img{height:44px;width:auto;max-width:200px;object-fit:contain;}
.logo-link{display:block;position:relative;line-height:0;height:44px;}

/* Footer static, not fixed. The reveal effect needs the footer to be shorter
   than the viewport; on a phone it is several screens tall, so the fixed
   version left most of its content permanently below the fold — and a 768px
   tablet was no better (897px of footer in a 900px window). Two rules cover it:
   this media query is the floor that applies with JS disabled, and
   .footer-static is set by setFooterSpace() whenever the measured footer would
   not fit the current viewport at any width. */
@media (max-width:1050px){
  footer,#site-footer{position:static;width:auto;z-index:auto;}
  body{padding-bottom:0 !important;}
}
html.footer-static footer,
html.footer-static #site-footer{position:static;width:auto;z-index:auto;}
html.footer-static body{padding-bottom:0 !important;}

@media (max-width:760px){
  /* The top bar is three small links and a row of dots. On a phone it costs a
     whole band of vertical space above the logo and duplicates what is already
     in the drawer. */
  .topbar{display:none;}

  .logo-img{height:36px;max-width:150px;}
  .logo-link{height:36px;}
  nav{padding:10px 18px;}

  /* The quote button moves into the drawer (see .md-quote) so the header keeps
     only the logo and the menu toggle. */
  .nav-cta{display:none;}
}

/* Quote button inside the mobile drawer, above the call link */
.md-quote{background:var(--blue-bright);color:#fff;text-align:center;font-weight:700;
  border-radius:9px;margin-top:26px;border:0;padding:15px;text-decoration:none;display:block;}
.md-quote:hover{filter:brightness(1.08);}
.mobile-drawer .md-cta{margin-top:12px;}

/* ============================================================
   FLOATING WHATSAPP BUTTON
   ============================================================ */

/* z-index sits below the mobile drawer (290) on purpose: when the drawer is
   open it is a full-screen opaque panel, and a chat bubble floating over it
   would be both ugly and tappable through the menu. It stays above #content
   (3) and the fixed desktop footer (0). */
/* Sized to the icon alone. If the label were a flex sibling it would keep its
   ~100px of layout width while invisible, leaving a transparent strip of
   anchor lying over the page and swallowing clicks meant for the content
   under it. Absolute positioning takes it out of the anchor's box. */
.wa-float{
  position:fixed;right:22px;bottom:22px;z-index:280;
  display:block;width:54px;height:54px;text-decoration:none;
}
.wa-float-ic{
  width:100%;height:100%;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#25D366;color:#fff;
  box-shadow:0 10px 26px rgba(11,19,43,0.24), 0 2px 6px rgba(11,19,43,0.14);
  transition:transform .25s cubic-bezier(.34,1.3,.64,1), box-shadow .25s ease;
  position:relative;
}
.wa-float-ic svg{width:29px;height:29px;display:block;}
.wa-float:hover .wa-float-ic,
.wa-float:focus-visible .wa-float-ic{
  transform:translateY(-3px) scale(1.05);
  box-shadow:0 16px 34px rgba(11,19,43,0.3), 0 2px 8px rgba(11,19,43,0.16);
}
.wa-float:focus-visible{outline:none;}
.wa-float:focus-visible .wa-float-ic{outline:3px solid var(--blue-bright);outline-offset:3px;}

/* The label is a white pill, not text on the green: #fff on #25D366 is 1.9:1,
   nowhere near readable. Ink on white is 15:1 and keeps the green circle
   recognisable as the WhatsApp mark. */
.wa-float-label{
  position:absolute;right:calc(100% + 12px);top:50%;
  background:#fff;color:var(--ink);
  font-size:13.5px;font-weight:600;line-height:1;
  padding:11px 15px;border-radius:999px;white-space:nowrap;
  border:1px solid var(--line);
  box-shadow:0 8px 22px rgba(11,19,43,0.12);
  opacity:0;transform:translateY(-50%) translateX(8px);pointer-events:none;
  transition:opacity .22s ease, transform .22s ease;
}
.wa-float:hover .wa-float-label,
.wa-float:focus-visible .wa-float-label{opacity:1;transform:translateY(-50%) translateX(0);}

/* A single slow ring rather than a loop that never stops: it draws the eye
   once on load and then leaves the page alone. */
.wa-float-ic::after{
  content:'';position:absolute;inset:0;border-radius:50%;
  border:2px solid #25D366;
  animation:wa-ring 2.4s ease-out 1.2s 3;
  pointer-events:none;
}
@keyframes wa-ring{
  0%{opacity:0.55;transform:scale(1);}
  70%{opacity:0;transform:scale(1.65);}
  100%{opacity:0;transform:scale(1.65);}
}

@media (max-width:760px){
  .wa-float{right:16px;bottom:16px;width:50px;height:50px;}
  .wa-float-ic svg{width:27px;height:27px;}
  /* The button is fixed, so at the very bottom of the page it lands on the
     copyright row — and on the Privacy/Terms links in it. Stack that row and
     leave 16 + 50 + clearance below it so both links stay tappable. */
  .footer-bottom{flex-direction:column;align-items:flex-start;padding-bottom:84px;}
  /* No hover on touch, so the label would never appear; the aria-label carries
     the name for screen readers either way. */
  .wa-float-label{display:none;}
}

@media (prefers-reduced-motion:reduce){
  .wa-float-ic,.wa-float-label{transition:none;}
  .wa-float-ic::after{animation:none;display:none;}
  .wa-float:hover .wa-float-ic,
  .wa-float:focus-visible .wa-float-ic{transform:none;}
  .wa-float:hover .wa-float-label,
  .wa-float:focus-visible .wa-float-label{transform:translateY(-50%);}
}

/* Printing a chat bubble makes no sense. */
@media print{ .wa-float{display:none;} }

/* ============================================================
   ARCHIVES: INDUSTRIES, CASE STUDIES
   ============================================================ */

.ind-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
@media (max-width:1050px){ .ind-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:700px){ .ind-grid{grid-template-columns:1fr;} }

.ind-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;
  background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;
  transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease, border-color .3s ease;}
.ind-card:hover{transform:translateY(-5px);box-shadow:0 22px 44px rgba(10,22,40,0.11);
  border-color:var(--tint,var(--blue-bright));}
.ind-card:focus-visible{outline:2px solid var(--tint,var(--blue-bright));outline-offset:3px;}

.ind-card-media{position:relative;aspect-ratio:16/10;background:#0A1024;overflow:hidden;}
.ind-card-media img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .55s cubic-bezier(.22,1,.36,1);}
.ind-card:hover .ind-card-media img{transform:scale(1.06);}
/* A flat wash of the industry's own tint, so the grid reads as one family
   while each card still keeps its identity. */
.ind-card-veil{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, transparent 35%, rgba(6,12,30,0.55) 100%),
             linear-gradient(0deg, var(--tint,#1671E0), var(--tint,#1671E0));
  background-blend-mode:normal, color;opacity:0.2;}

.ind-card-body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1 1 auto;}
.ind-card-title{font-family:'Space Grotesk';font-size:20px;font-weight:500;
  letter-spacing:-0.4px;margin:0 0 6px;line-height:1.25;}
.ind-card-head{font-size:13px;font-weight:600;color:var(--tint,var(--blue-bright));
  margin:0 0 10px;line-height:1.4;}
.ind-card-sum{font-size:14px;line-height:1.6;color:var(--muted);margin:0;flex:1 1 auto;}
.ind-card-more{margin-top:16px;font-size:13.5px;font-weight:600;color:var(--blue-bright);}

/* Case study cards on their own archive: same .sd-case component as the service
   pages, so only the container needs declaring here. */
.sd-page-lite{--accent-ink:#0F4FA8;--accent-lite:#4E93EC;--accent-bright:#7FB4F3;}
.sd-page-lite .sd-work-grid{margin-top:0;}

.arch-empty{font-size:16px;color:var(--muted);padding:40px 0;}

/* Footer legal links, previously flat text */
.footer-legal a{color:inherit;text-decoration:none;}
.footer-legal a:hover{color:#fff;text-decoration:underline;}
.footer-legal i{font-style:normal;opacity:0.5;margin:0 8px;}

/* ============================================================
   LEGAL PAGES
   ============================================================ */

/* Scoped to body.telco-legal (added by telco_legal_body_class) rather than to
   .entry-content, which every page shares — a policy wants a narrow measure and
   quieter headings, and the About page does not. */
.telco-legal .entry-content{max-width:78ch;}
.telco-legal .entry-content h2{font-family:'Space Grotesk';font-size:24px;font-weight:500;
  letter-spacing:-0.5px;margin:40px 0 12px;color:var(--ink);}
.telco-legal .entry-content p,
.telco-legal .entry-content li{font-size:15.5px;line-height:1.78;color:var(--muted-mid);}
.telco-legal .entry-content p{margin:0 0 14px;}
.telco-legal .entry-content ul{margin:0 0 20px;padding-left:22px;}
.telco-legal .entry-content li{margin-bottom:9px;}
.telco-legal .entry-content strong{color:var(--ink);font-weight:600;}

.legal-note{background:rgba(245,162,93,0.12);border-left:3px solid var(--orange);
  padding:15px 18px;border-radius:0 10px 10px 0;font-size:14px;line-height:1.6;
  margin:0 0 30px;}
.telco-legal .entry-content .legal-note em{color:var(--ink);font-style:normal;}

/* ============================================================
   HEADER AT MID WIDTHS
   ============================================================ */

/* Seven top-level items rather than five: at 1051–1300px the row was touching
   the logo on one side and the quote button on the other, and "About TELCO"
   was wrapping onto two lines. Tighten the row and drop the phone number,
   which is already in the top bar and the footer. */
.nav-item > a, .nav-item > .nav-trigger{white-space:nowrap;}
@media (min-width:1051px) and (max-width:1300px){
  nav{padding:14px 22px;}
  .nav-main{gap:19px;}
  .nav-item{font-size:13.5px;}
  .nav-phone{display:none;}
  .nav-cta{padding:10px 15px;font-size:13px;}
}

/* The panel is centred on its trigger, which pushes 820px of it off the left
   edge once the trigger sits near the start of a narrower header — and anchoring
   it to the trigger's right edge just moves the overflow. Below 1300px it is
   taken out of the trigger's coordinate space entirely and centred on the
   viewport, under the header. --hdr-h is published by telcoHeaderVar() because
   the header's height changes when the top bar collapses; 110px is the no-JS
   fallback, which is the unscrolled height. */
@media (max-width:1300px){
  .mega{
    position:fixed;
    top:calc(var(--hdr-h, 110px) + 10px);
    left:50%;right:auto;
    width:min(820px, calc(100vw - 32px));
    transform:translateX(-50%) translateY(8px);
  }
  .nav-item.is-open .mega{transform:translateX(-50%) translateY(0);}
}

/* ============================================================
   SINGLE CASE STUDY
   ============================================================ */

.cs-back{margin:0 0 18px;font-size:13px;}
.cs-back a{color:var(--muted-light);text-decoration:none;}
.cs-back a:hover{color:#fff;}
.cs-client{font-family:'IBM Plex Mono';font-size:11.5px;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--teal);margin-bottom:12px;}
.cs-media{margin:0 0 34px;border-radius:18px;overflow:hidden;background:#0A1024;}
.cs-media img{width:100%;height:auto;display:block;}

.cs-metrics{list-style:none;margin:0 0 40px;padding:26px 0;display:grid;gap:22px;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.cs-metrics[data-n="1"]{grid-template-columns:1fr;}
.cs-metrics[data-n="2"]{grid-template-columns:repeat(2,1fr);}
.cs-metrics[data-n="3"]{grid-template-columns:repeat(3,1fr);}
.cs-metrics b{display:block;font-family:'Space Grotesk';font-size:clamp(26px,3vw,36px);
  font-weight:500;letter-spacing:-1px;color:var(--ink);line-height:1.05;}
.cs-metrics span{display:block;margin-top:7px;font-size:13.5px;line-height:1.5;color:var(--muted-mid);}
@media (max-width:760px){
  .cs-metrics,.cs-metrics[data-n="3"],.cs-metrics[data-n="4"]{grid-template-columns:repeat(2,1fr);}
}

.cs-side-line{font-size:14px;line-height:1.6;color:var(--muted-mid);margin:0 0 18px;}
.cs-side-line a{color:var(--blue-bright);}

/* Blog card with no featured image.
   The thumb had no background of its own, so a post written without a picture
   — which the seeded articles are — left a 210px hole above the title. This
   makes the empty state look chosen: a soft brand wash with the site's grid
   motif, quiet enough that a real photograph is still obviously better. */
.blog-thumb-3{background:linear-gradient(135deg,#0B2E63,#1671E0 55%,#3FCDBB);}
.blog-thumb-3::after{content:'';position:absolute;inset:0;opacity:0.22;
  background-image:linear-gradient(rgba(255,255,255,0.5) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,0.5) 1px,transparent 1px);
  background-size:34px 34px;}
.blog-thumb-3 img,.blog-thumb-3 svg{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:1;transition:transform .5s ease;}
.blog-card-3:hover .blog-thumb-3 img{transform:scale(1.05);}

/* ============================================================
   CONTACT FORM 7 SHIM
   ============================================================ */

/* The CF7 form template in the README reuses this theme's own .cf-* markup, so
   most of the styling above already applies. What is left is the handful of
   wrappers CF7 injects around whatever you write, which would otherwise break
   the grid or sit unstyled. Harmless when CF7 is not installed. */

/* CF7 wraps every field tag in a span. Inline, it collapses the input to its
   intrinsic width inside a flex column, so the field stops filling its cell. */
.cf .wpcf7-form-control-wrap{display:block;width:100%;}
/* .cf-form supplies this spacing in the theme's own markup; CF7 owns the
   <form> element, so the gap has to hang off the grid instead. */
.wpcf7 .cf .cf-grid{margin-top:24px;}

/* .wpcf7-form-control is on every control INCLUDING the acceptance wrapper,
   which is a <span> and has no type attribute — so excluding by type alone drew
   an input box around the consent checkbox. */
.cf .wpcf7-form-control:not([type=checkbox]):not([type=submit]):not(.wpcf7-acceptance):not(.wpcf7-checkbox):not(.wpcf7-radio):not(.wpcf7-list-item){
  width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;
  font-family:'Inter',sans-serif;font-size:15px;color:var(--ink);background:var(--bg);
  margin:0;transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;}
.cf .wpcf7-form-control:focus{outline:none;background:#fff;border-color:var(--blue-bright);
  box-shadow:0 0 0 3px rgba(22,113,224,0.14);}
.cf textarea.wpcf7-form-control{resize:vertical;min-height:120px;line-height:1.6;}

/* CF7 marks an invalid field on the control itself rather than on a parent, so
   the theme's .has-err rule cannot reach it. */
.cf .wpcf7-not-valid{border-color:#B3261E;}
.cf .wpcf7-not-valid-tip{font-size:13px;color:#B3261E;margin-top:6px;display:block;}

/* Acceptance (consent) checkbox */
.cf .wpcf7-acceptance .wpcf7-list-item{margin:0;}
.cf .wpcf7-acceptance label{display:flex;align-items:flex-start;gap:10px;
  font-size:14px;font-weight:400;line-height:1.55;color:var(--muted-mid);cursor:pointer;margin:0;}
.cf .wpcf7-acceptance input[type=checkbox]{width:17px;height:17px;flex-shrink:0;
  margin-top:2px;accent-color:var(--blue-bright);}

/* The response banner.
   CF7 appends it as the last child of the <form>, which puts it *below* the
   card — the theme's own form shows its message above the fields. A flex column
   plus order:-1 moves it back on top without touching CF7's markup. */
.wpcf7-form{display:flex;flex-direction:column;}
.wpcf7-form .wpcf7-response-output{
  order:-1;margin:0 0 16px;padding:12px 15px;border-radius:10px;
  font-size:14px;line-height:1.55;border:1px solid transparent;}
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.unaccepted .wpcf7-response-output,
.wpcf7-form.payment-required .wpcf7-response-output{
  background:rgba(179,38,30,0.07);border-color:rgba(179,38,30,0.25);color:#8C1D18;}
.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.aborted .wpcf7-response-output{
  background:rgba(245,162,93,0.14);border-color:rgba(245,162,93,0.4);color:#7A3E06;}
.wpcf7-form.sent .wpcf7-response-output{
  background:rgba(15,123,79,0.09);border-color:rgba(15,123,79,0.3);color:#0B5B3B;}

/* CF7's submit is an <input>, which cannot carry the theme button's inline SVG.
   The arrow is drawn on the wrapper instead and lifted out of the hit area, so
   the button still looks and behaves like .cf-submit elsewhere on the site. */
.cf .cf-submit-wrap{position:relative;display:inline-flex;align-items:center;margin-top:22px;}
.cf input.cf-submit{margin-top:0;padding-right:44px;}
.cf .cf-submit-wrap::after{
  content:'';position:absolute;right:20px;top:50%;width:8px;height:8px;
  border-right:2px solid currentColor;border-top:2px solid currentColor;
  transform:translateY(-50%) rotate(45deg);color:#1a1206;
  pointer-events:none;transition:transform .22s cubic-bezier(.65,0,.35,1);}
.cf .cf-submit-wrap:hover::after{transform:translateY(-50%) translateX(4px) rotate(45deg);}

/* CF7's spinner keeps its 24px of layout width even while hidden, so an inline
   spinner made .cf-submit-wrap wider than the button — and the arrow, positioned
   from the wrap's right edge, landed outside the button on the spinner instead.
   Taking it out of flow makes the wrap exactly as wide as the button. */
.cf .wpcf7-spinner{position:absolute;left:calc(100% + 12px);top:50%;
  transform:translateY(-50%);margin:0;flex-shrink:0;}

@media (max-width:620px){
  .cf .cf-submit-wrap{width:100%;}
  .cf input.cf-submit{width:100%;justify-content:center;}
}